@charset "UTF-8";

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-serif;
    color: #666666;
    font-size: 1rem;
    line-height: 2;
    font-feature-settings: "palt";
}

.orange {
    color: #ff8040;
}

.orangebg {
    background-color: #ff8040;
    color: #fff;
}

/* bootstrapの文字色変更*/

.nav-link,
.list-group-item,
.table th,
.table td,
.card-head,
.card-body,
.card-body p,
.card-body h5,
.recruit_hover p ,
.not_recruit,
.bootstrap_color,
.card-text
 {
    color: #666666;
}

a {
    text-decoration: none;
}

/* ロゴ */
.logoimg {
    width: 100%;
}

@media (max-width: 768px) {
    .logoimg {
          width: 50%;
    }
  }

/* 通常リンクとカレントリンク共通デザイン */
.nav-link {
    color: #666666; /* 通常時の色 */
    position: relative;
}

/* カレントリンク */
.nav-item.active a {
    color: #ff8040;
}

.nav-item.active a::after,
.nav-link::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width 0.3s ease, left 0.3s ease;
}

/* カレントリンクのホバー時 */
.nav-item.active a:hover::after,
.nav-link:hover::after {
    width: 100%;
    left: 0;
}

/* カレントリンクは通常のリンクとは異なる色で */
.nav-item.active a {
    color: #ff8040;
}

/* 通常のリンクホバー時 */
.nav-link:hover {
    color: #808080;
}

/* サイドバーアイコン */

.fixed-icons {
    position: fixed; /* スクロールしても固定 */
    top: 88%; /* 画面の垂直中央に配置 */
    left: 50px; /* 左から20pxの位置に配置 */
    transform: translateY(-50%); /* 垂直方向に中央寄せ */
    display: flex;
    flex-direction: column; /* アイコンを縦に並べる */
    gap: 20px; /* アイコン同士の間隔 */
}

.fixed-icons .icon {
    width: 50px; /* アイコンの幅を指定 */
    height: 50px; /* アイコンの高さを指定 */
    transition: transform 0.3s; /* ホバー時のアニメーション */
}

.fixed-icons .icon:hover {
    animation: puyon 1s linear 0s 1;
    animation-iteration-count: infinite;
}
@keyframes puyon {
    0% {
        transform: scale(1, 1) translate(0%, 0%);
    }
    40% {
        transform: scale(0.95, 1.2) translate(0%, -10%);
    }
    50% {
        transform: scale(1.1, 0.9) translate(0%, 5%);
    }
    60% {
        transform: scale(0.95, 1.05) translate(0%, -3%);
    }
    70% {
        transform: scale(1.05, 0.95) translate(0%, 3%);
    }
    80% {
        transform: scale(1, 1) translate(0%, 0%);
    }
    100% {
        transform: scale(1, 1) translate(0%, 0%);
    }
}

.insta_btn {
    display: inline-block;
    text-align: center; /*中央揃え*/
}

.insta_btn .insta {
    /*アイコンの背景*/
    position: relative; /*相対配置*/
    display: inline-block;
    width: 50px; /*幅*/
    height: 50px; /*高さ*/
    background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%)
        no-repeat;
    background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; /*グラデーション①*/
    overflow: hidden; /*はみ出た部分を隠す*/
    border-radius: 13px; /*角丸に*/
}



.insta_btn .insta:before {
    /*グラデーションを重ねるため*/
    content: "";
    position: absolute; /*絶対配置*/
    top: 23px; /*ずらす*/
    left: -18px; /*ずらす*/
    width: 60px; /*グラデーションカバーの幅*/
    height: 60px; /*グラデーションカバーの高さ*/
    background: -webkit-radial-gradient(
        #ffdb2c 10%,
        rgba(255, 105, 34, 0.65) 55%,
        rgba(255, 88, 96, 0) 70%
    );
    background: radial-gradient(
        #ffdb2c 10%,
        rgba(255, 105, 34, 0.65) 55%,
        rgba(255, 88, 96, 0) 70%
    ); /*グラデーション②*/
}

.insta_btn .fa-instagram {
    /*アイコン*/
    color: #fff; /*白に*/
    position: relative; /*z-indexを使うため*/
    z-index: 2; /*グラデーションより前に*/
    font-size: 35px; /*アイコンサイズ*/
    line-height: 50px; /*高さと合わせる*/
}

@media (max-width: 768px) {
    .fixed-icons {
        position: fixed; /* ナビゲーション内に配置するため絶対配置 */
        top: 44; /* ヘッダー上部に配置 */
        left: auto; /* 左端からの配置を解除 */
        right:100; /* 右側に寄せる */
        flex-direction: row; /* アイコンを横並びに変更 */
        gap: 20px; /* アイコン間の隙間を小さく */
        padding: 10px; /* ナビバー内でのパディング調整 */
        z-index: 1050; /* ナビバーより前面に表示 */
    }

    .fixed-icons .icon {
        width: 40px; /* 小さい画面でアイコンサイズを縮小 */
        height: 40px;
    }

    .insta_btn .insta,
    .insta_btn .fa-instagram {
        font-size: 25px; /* Instagramアイコンのサイズ縮小 */
        line-height: 40px;
    }
}

/* 上部カルーセル画像 */

.carousel-item img,
.top-img {
    width: 100%;
    height: 95%;
    object-fit: cover;
}

.blur {
    width: 500px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.9);
}

.card-title {
    font-family: "Playfair Display", serif;
    font-size: 3rem;
    text-align: left;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-shadow: 2px 2px 10px #fff;
}

.card-img-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

/* タイトル */

h2 {
    position: relative;
    padding: 1rem 0.5rem;
    text-align: center;
    margin: 150px 50px;
}

h2:first-letter {
    font-size: 200%;
    color: #ff8040;
}

h2:after {
    position: absolute;
    bottom: 0;
    left: 50%; /* 水平位置を50%に設定 */
    transform: translateX(-50%); /* 水平位置を中央寄せ */
    width: 50%;
    height: 6px;
    content: "";
    border-radius: 3px;
    background-image: -webkit-gradient(
        linear,
        right top,
        left top,
        from(#FDF5E6),
        to(#ff8040)
    );
    background-image: -webkit-linear-gradient(right, #FDF5E6 0%, #ff8040 100%);
    background-image: linear-gradient(to left, #FDF5E6 0%, #ff8040 100%);
}

/* お知らせ・休診日 */

.box26 {
    margin: auto;
    padding: 2rem;
    width: 700px;
    border: 3px solid #ffa600;
    border-radius: 15px;
}

.box26 li {
    margin: 0;
    color: #ff8040;
    font-size: 1.5em;
    border-bottom: 5px dashed #ffa600;
}

.box26 span {
  font-size: 16px;
  float: right;
  
}

.box26 a,
.box26 i{
    color: #ff8040;
}

@media (max-width: 768px) {
    .newsimage {
        padding-top: 80.25%; /* 高さを16:9に調整 */
    }
}

/* ホバー時のテキストとアイコンの色変更 */
.box26:hover i {
    transition: color 0.3s ease; /* 色の変化をスムーズに */
    animation: bounce 0.5s infinite;
}

.box26:hover {
    opacity: 80%;
}

/* バウンスアニメーション */
@keyframes bounce {
    0%, 100% {
        transform: translatex(0); /* 初期位置 */
    }
    50% {
        transform: translatex(5px); /* 少し横に動かす */
    }
}


.news {
  margin: 0 16rem 1rem;
  font-size: 36px;

}

@media (max-width: 768px) {
    .news {
      margin: auto;
    }
  }



@media (max-width: 576px) {
  main.container {
    padding-left: 10px;
    padding-right: 10px;
  }

  .news {
    margin: 0;
    padding: 0;
  }

  #No1 {
    margin: 0;
    padding: 0;
  }
}




/* レスポンシブ対応 */
@media (max-width: 768px) {
    .box26 {
        width: 90%; /* 画面幅の90%に縮小 */
        padding: 1rem; /* パディングを小さく */
    }

    .box26 li {
        font-size: 1.2em; /* フォントサイズを縮小 */
    }
}

@media (max-width: 480px) {
  .box26 {
      width: 100%; /* 画面幅いっぱいにする */
      padding: 0.5rem; /* パディングをさらに小さく */
  }

  .box26 li {
      font-size: 1em; /* フォントサイズをさらに縮小 */
  }
}

/* 事業内容 */

.businessimg {
    margin:auto;
    width: auto;
}

.card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 15px; /* 角を丸く */
    overflow: hidden; /* カードの中の要素がはみ出ないように */
    border: none;
}

.card-body {
    padding: 5px 30px;
    background-color: #fff;
}

.card-body .card-text{
    text-align: left;
}

.img-fluid-wrappe .img-fluid {
    border-radius: 15px 0 0 10px; /* 画像の角も丸める */
}

.card-head {
    font-size: 1.5rem;
    line-height: 1.2;
}

.card-footer {
    text-align: center;
}

.card-footer a,
.card-footer i{
    color: #fff;
}

/* ホバー時のテキストとアイコンの色変更 */
.card-footer:hover i {
    transition: color 0.3s ease; /* 色の変化をスムーズに */
    animation: bounce 0.5s infinite;
}

.card-footer:hover {
    opacity: 80%;
}

/* バウンスアニメーション */
@keyframes bounce {
    0%, 100% {
        transform: translatex(0); /* 初期位置 */
    }
    50% {
        transform: translatex(5px); /* 少し横に動かす */
    }
}



/* アクセス */
.googlemap {
    text-align: center;
}

.map-container {
    position: relative;
    width: 100%; /* 幅をレスポンシブ対応 */
    max-width: 1300px; /* 最大幅を指定 */
    margin: auto; /* センター配置 */
    padding-top: 46.15%; /* 高さを16:9の比率に調整 (600 / 1300 ≈ 46.15%) */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 30px;
}

/* レスポンシブ対応で縮小 */
@media (max-width: 768px) {
    .map-container {
        padding-top: 80.25%; /* 高さを16:9に調整 */
    }
}


.fa-2x {
    width: 1.5rem;
    margin: 0 1rem 2rem 0;
}


@media (max-width: 375px) {
  .fa-2x {
    width: auto;
    margin: 0 1px 2px 0;
  }
}

.telbutton {
    pointer-events: none;
  }


/* 採用情報 */

.recruit_text {
    text-align: center;
    margin-bottom: 5rem;
}

.recruit_title {
    text-align: center;
    font-size: 3rem;
    padding-top: 3rem;
}

.recruit_hover p,
.card-body p {
    text-align: center;
}

/* ホバー時のカード全体の背景色変更とスムーズなトランジション */
.recruit_hover {
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: 1px solid #ff8040;
}

.recruit_hover:hover {
    background-color: #ff8040; /* オレンジ色に変更 */
    transform: scale(1.05); /* 少し拡大 */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

/* ホバー時のテキストとアイコンの色変更 */
.card.recruit_hover:hover h3,
.card.recruit_hover:hover p,
.card.recruit_hover:hover i {
    color: #fff; /* 文字とアイコンを白に変更 */
    transition: color 0.3s ease; /* 色の変化をスムーズに */
}

.card.recruit_hover:hover i {
    animation: bounce 0.5s infinite;
    color: #fff; /* 色を白に変更 */
}

/* バウンスアニメーション */
@keyframes bounce {
    0%, 100% {
        transform: translatex(0); /* 初期位置 */
    }
    50% {
        transform: translatex(5px); /* 少し横に動かす */
    }
}

/* 募集停止中 */
.not_recruit{
    background-color: #808080;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 中央に配置するテキスト */
.center_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: white;
    letter-spacing: 0.2em; /* 文字の間隔 */
}

@media (max-width: 768px) {
  .center_text,
  .recruit_title {
     font-size: 1.5rem;
  }
}

/* 下部画像アニメーション */

.slide-contents img {
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* カードに軽い影をつけて立体感を演出 */
}

li {
    list-style: none;
}

ul {
    margin: 0;
    padding: 0;
}

.slide-animation {
    display: flex;
    gap: 10px;
    overflow: hidden;
    margin-top: 300px;
}

.slide-animation li {
    width: 500px;
    height: 400px;
}

.slide-contents {
    display: flex;
    gap: 10px;
    animation: loopAnimation 30s linear infinite;
}

@keyframes loopAnimation {
    0% {
        transform: translate(0%);
    }
    100% {
        transform: translate(-100%);
    }
}

/* フッター */

footer {
    background-color: #F5F5F5;
}

address span {
    font-size: 18px;
}

@media (min-width: 768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}

/* 当院について */

.features {
    width: 80%;
    margin: auto;
}

.f_item {
    padding-bottom: 60px;
}

.f_title {
    position: relative;
    text-shadow: 0 0 2px white;
    font-size: 2rem;
    position: relative;
    display: inline-block;
}

.f_title small {
    font-size: 1.5rem;
}

.f_title:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, #ff8040 0%, rgba(255, 255, 255, 0) 50%);
    border-radius: 50%;
    transition: width 0.4s ease, height 0.4s ease, background 0.4s ease;
    z-index: -1;
}

.f_title:hover:before {
    width: 100%; /* ホバー時の円の大きさを調整 */
    height: 200%;
    background: radial-gradient(circle, #ff8040 0%, rgba(255, 255, 255, 0) 50%);
}

/* 取締役の言葉 */

.director_under {
    border-bottom: solid 3px #ff8040;
  }

/* カード内の右側画像設定 */
.director img {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block; /* 不要な隙間を削除 */
}

.director {
    width: 80%;
    margin: auto;
    padding: 1.5rem;
    border-radius: 0; /* カード全体の角丸 */
    position: relative;
    overflow: hidden; /* 擬似要素がはみ出さないように */
    padding: 2em;
    text-align: center;
}

.director::before,
.director::after {
    content: '';
    width: 80px;
    height: 50px;
    position: absolute;
}

.director::before {
    border-left: 8px solid #ff8040;
    border-top: 8px solid #ff8040;
    top: 0;
    left: 0;
}

.director::after {
    border-right: 8px solid #ff8040;
    border-bottom: 8px solid #ff8040;
    bottom: 0;
    right: 0;
}

@media (max-width: 768px) {
    .director {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
}

.card-body h5 {
    padding: 10px;
    font-size: 3rem;
}

/* ３つの事業 */

.taketsu_under{
    border-bottom: solid 3px #2C7CFF;
}

.taketsu_detail p{
    border-top: dotted 1px #2C7CFF;
    padding: 30px 10px;
    margin: 30px 10px;}

.taketsu_card,
.taketsu_card th,
.taketsu_card td{
    background-color:#F0F8FF;
}

.threeh_under{
    border-bottom: solid 3px #FF8856;
}

.threeh_detail h5{
    border-top: dotted 1px #FF8856;
    padding-top: 15px;
    margin: 10px;
    color: #FF8856;
    font-weight: 600;
}

.threeh_detail p{
    padding: 0 30px;
}

.threeh_card,
.threeh_card th,
.threeh_card td{
    background-color:#FFF5EE;
}

.anki_under{
    border-bottom: solid 3px #00CC66;
}

.anki_detail p{
    border-top: dotted 1px #00CC66;
    padding: 30px 10px;
    margin: 30px 10px;
}

.anki_card,
.anki_card th,
.anki_card td{
    background-color:#F0FFF0;
}

.table {
    margin: 40px 0 0 0;
}

.business {
    width: 100%;
    margin: auto;
    padding: 30px;
    margin-bottom: 50px; /* カード間の縦幅を開ける */
}

@media (max-width: 768px) {
    .business {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    .card-title{
        font-size: 24px;
        font-weight: 600;
        text-align: center;
    }
}



/* 診療日・休診日 */
.box_business {
    border: none;
    width: auto;
    /* overflow-x: scroll; */
}
.box_business th {
    background-color: #f7f7f7;
    font-size: 28px;
    padding: 30px;
}
.box_business td {
    font-size: 28px;
    padding: 30px;
}

/* 会社概要 */
.Company_Profile{
    width: 60%;
    margin: auto;
}

@media (max-width: 768px) {
    .Company_Profile {
        width: 90%;
        margin: auto;
    }

    .mobile-stacked tbody tr {
        display: block;
        margin-bottom: 1rem;
        border-bottom: 1px solid #dee2e6;
      }

      .mobile-stacked th,
      .mobile-stacked td {
        display: block;
        width: 100%;
        text-align: left !important;
        padding: 0.5rem 0;
      }

      .mobile-stacked th {
        font-weight: bold;
        color: #6c757d;
        border: none;
        border-bottom: 0;
      }

      .mobile-stacked td {
        border: none;
        padding-top: 0;
      }

}

/* 採用情報 */

.recruit h5 {
    border-bottom: 3px dotted #ff8040;
    font-size: 3rem;
}

.recruit{
    width: 80%;
    margin: auto;
}

.recruit p {
    margin-bottom: 2rem;
}

.recruit_content {
    margin-bottom: 10rem;
    width: 80%;
    margin: auto;
}

@media (max-width: 768px) {

    .stacked tbody tr {
        display: block;
        margin-bottom: 1rem;
        border-bottom: 1px solid #dee2e6;
      }

      .stacked th,
      .stacked td {
        display: block;
        width: 100%;
        text-align: left !important;
        padding: 0.5rem 0;
      }

      .stacked th {
        font-weight: bold;
        color: #6c757d;
        border: none;
        border-bottom: 0;
      }

      .stacked td {
        border: none;
        padding-top: 0;
      }

}