@charset "UTF-8";

/*
Theme Name: あなたのテーマ名
Author: あなたの名前
*/

@import url("assets/css/reset.css");
@import url("assets/css/base.css");
@import url("assets/css/utility.css");


/* ------------------------------------------- */
/* これ以降にサイトの個別パーツのスタイルを記述していく
/* 例: header, footer, sidebar など
/* ------------------------------------------- */



/* =================================
【ここから追加】ハンバーガーメニュー内リンクのスタイル
================================= */
.sp-nav-links {
 display: none; /* PCでは非表示 */
}
/* =================================
【ここまで追加】
================================= */

/* メニュー表示中に背景をスクロールさせないためのスタイル */
body.no-scroll {
 overflow: hidden;
}

body.front-page-class header.site_header {
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 100%;
 z-index: 2;
}

body.other-page-class header.site_header-top {
 position: relative;
 width: 100%;
 z-index: 2;
}

/* ヘッダー全体 */
.site-header-inner {
 display: flex; /* Flexboxコンテナに設定 */
 justify-content: space-between; /* 子要素を両端に配置 */
 align-items: center; /* 垂直方向の中央揃え */
 padding: 10px 20px 15px 30px;
 width: 100%;
}

/* ロゴのエリア */
.header-left {
 flex-shrink: 0; /* 縮小しないように設定 */
 text-align: left;
}

.site-logo {
 transition: max-height 0.3s ease;
 width: 260px;

}

/* 右側のコンテンツ全体 */
.header-right {
 display: flex;
 flex-direction: column; /* 子要素を縦に並べる */
 align-items: flex-end; /* 子要素を右寄せに配置 */
 width: 100%; /* 親要素の幅をいっぱいまで使う */
 margin-left: 20px; /* ロゴとの間に余白を作成 */
}

/* 上段のリンク */
.header-top {
 display: flex;
 justify-content: flex-end; /* 子要素を右寄せに配置 */
 align-items: center; /* 要素の垂直位置を中央に揃える */
 margin-bottom: 10px; /* グローバルナビとの間に余白を作成 */
 gap: 5px; /* 各リンク間の余白 */
 position: relative;
}

/* 各リンク共通のスタイル */
.header-link {
 align-items: center; /* ★垂直方向中央に揃える */
 gap: 5px; /* ★アイコンとテキストの間の余白 */
 text-decoration: none;
 color: #000;
 padding: 10px 10px;
 font-size: 1.0rem;
 font-family: "Zen Kaku Gothic New", sans-serif;
 font-weight: 500;
 font-style: normal;
}
.header-link span {
 font-family: "Montserrat", sans-serif;
 font-optical-sizing: auto;
 font-weight: 500;
 font-style: normal;
}

/* 電話番号リンクのスタイル */
.tel-link {
 display: inline-flex; /* ★インライン要素として扱い、幅をコンテンツに合わせる */
 flex-direction: column; /* ★中の要素（divとp）を縦に並べる */
 align-items: flex-start; /* 左揃えにする場合 */
 padding: 10px 0;
 margin-right: 10px;
 border-radius: 5px;
 text-shadow: 0px 0px 1px rgba(255, 255, 255, 1.0),0px 0px 2px rgba(255, 255, 255, 0.9),0px 0px 3px rgba(255, 255, 255, 0.8),0px 0px 4px rgba(255, 255, 255, 0.7),0px 0px 5px rgba(255, 255, 255, 0.6),0px 0px 6px rgba(255, 255, 255, 0.5);
}
.tel-link p {
 line-height: 1.0;
}
.tel-link .tel-link-number {
 font-size: 1.6rem;
 letter-spacing: 2px;
 transition: all 0.3s ease;
}
.tel-link .tel-link-receptiontime {
 font-size: 0.8rem;
 letter-spacing: 1px;
 padding: 0 0 0 3px;
}
.tel-link .tel-link-receptiontime span {
 font-size: 0.9rem;
 letter-spacing: 2px;
 padding: 0 0.3rem 0 0.3rem;
}

/* ★新しく追加したdivのスタイル */
.tel-link-main {
 display: flex;    /* SVGと電話番号を横並びに */
 align-items: flex-start; /* 垂直方向中央揃え */
 gap: 5px;       /* アイコンと番号の間の隙間 */
}
.tel-link svg {
 width: 24px;
 height: 24px;
}



/* LINEリンクのスタイル */
.line-link {
 display: flex;
 background-color: #00c300;
 color: #fff;
 border-color: #00c300;
 width: 140px;
 justify-content: center;
 border-radius: 50px; /* ★変更点 */
 transition: all 0.3s ease;
}
.line-link svg {
 width: 20px;
 height: 20px;
 fill: #fff;
}
.line-link span {
 font-size: 1.05rem;
}

/* WEB予約リンクのスタイル */
.web-link {
 display: flex;
 background: linear-gradient(to right, rgb(104, 193, 173) 0%, rgb(60, 194, 130) 100%);
 color: #fff;
 border-color: #007bff;
 width: 140px;
 justify-content: center;
 border-radius: 50px; /* ★変更点 */
 transition: all 0.3s ease;
}
.web-link svg {
 width: 20px;
 height: 20px;
}
.web-link span {
 font-size: 1.05rem;
}


/* グローバルナビ（下段） */
.header-nav {
 width: 100%; /* 親要素の幅に合わせる */
}
.nav-list {
 display: flex;
 justify-content: flex-end; /* 子要素を右寄せに配置 */
 list-style: none; /* マーカーを削除 */
 gap: 25px;
 padding: 0;
 margin: 0 10px 0 0;
}
.nav-item {
    position: relative;
}
.nav-item a {
 font-family: "Zen Kaku Gothic New", sans-serif;
 font-weight: 500;
 font-style: normal;
 color: #000;
 text-shadow: 0px 0px 1px rgba(255, 255, 255, 1.0),0px 0px 2px rgba(255, 255, 255, 0.9),0px 0px 3px rgba(255, 255, 255, 0.8),0px 0px 4px rgba(255, 255, 255, 0.7),0px 0px 5px rgba(255, 255, 255, 0.6),0px 0px 6px rgba(255, 255, 255, 0.5);
}
.nav-link {
 text-decoration: none;
 color: #555;
 font-weight: bold;
 padding: 5px 0 10px;
 display: block;
}
.nav-link:hover {
 color: #007bff;
}

.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  position: absolute;
  top: 150%;
  left: 0;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  list-style: none;
  padding: 20px;
  margin: 0;
  min-width: 200px;
  z-index: 100;
}
.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu li a {
  padding: 0;
  margin-bottom: 10px;
  display: block;
}
.dropdown-menu li:last-child a {
  margin-bottom: 0px;
}


/* スクロール時にヘッダーに付与するクラス */
header.site_header.fixed-header {
 position: fixed; /* 画面上部に固定 */
 top: 0;
 left: 0;
 transform: none; /* 中央寄せのtransformをリセット */
 background-color: rgba(255, 255, 255, 0.95); /* 白い背景色を追加 */
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* コンテンツとの境界を示す影を追加 */
 transition: all 0.3s ease-in-out; /* スタイルが滑らかに変化するアニメーション */
}

/* 固定表示されたヘッダー内のpaddingを調整（任意） */
header.site_header.fixed-header .site-header-inner {
 padding-top: 10px;
 padding-bottom: 15px;
}



.hamburger-button {
 position: absolute; /* .header-top を基準に絶対配置 */
 top: 50%;
 right: 0; /* 右端0pxの位置に配置 */
 transform: translateY(-50%); /* 垂直方向の中央揃え */
 z-index: 100; /* 他の要素より手前に表示 */
 display: none; /* 初期状態では非表示（SPでのみ表示） */
 width: 44px;
 height: 44px;
 background: transparent;
 border: none;
 cursor: pointer;
 padding: 0;
}

.hamburger-line {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 width: 24px;
 height: 2px;
 background-color: #000;
 transition: all 0.3s ease-in-out;
 border-radius: 9999px;
}

/* 3本線の位置を調整 */
.hamburger-line:nth-child(1) {
 top: 14px;
}

.hamburger-line:nth-child(2) {
 top: 21px;
}

.hamburger-line:nth-child(3) {
 top: 28px;
}

/* --- ボタンがクリックされた時のスタイル（JSで .active クラスを付与） --- */

/* 1本目の線を回転させて「×」にする */
.hamburger-button.active .hamburger-line:nth-child(1) {
 top: 21px;
 transform: translateX(-50%) rotate(45deg);
}

/* 2本目の線を透明にする */
.hamburger-button.active .hamburger-line:nth-child(2) {
 opacity: 0;
}

/* 3本目の線を回転させて「×」にする */
.hamburger-button.active .hamburger-line:nth-child(3) {
 top: 21px;
 transform: translateX(-50%) rotate(-45deg);
}


/* --- レスポンシブ対応 (999px以下) --- */
@media screen and (max-width: 999px) {

 /* ヘッダー全体の左右の余白を少し詰める */
 .site-header-inner {
  padding-left: 20px;
  padding-right: 15px;
 }

 /* ロゴを少し小さくしてバランスを取る */
 .site-logo {
  width: 70%;
  margin-top: 10px;
 }

 /* ======== ▼▼ ここが重なり解消のポイント ▼▼ ======== */
 /* ハンバーガーボタンを配置するスペースを確保するため、
  ボタンの親要素(.header-top)の右側に余白を追加します */
 .header-top {
  padding-right: 50px; /* ハンバーガーボタンの幅＋余白 */
  gap: 5px; /* ボタン間の隙間を維持 */
  margin-bottom: 0;
 }
 /* ============================================== */

 /* 電話リンクの文字サイズを少し小さく調整 */
 .tel-link {
  margin-right: 8px;
 }
 .tel-link svg {
  width: 18px;
  height: 18px;
  transform: translateY(3px);
 }
 .tel-link .tel-link-number {
  font-size: 1.5rem;
  letter-spacing: 1px;
 }

 /* LINEとWEB予約ボタンの幅と内側余白を調整 */
 .line-link,
 .web-link {
  width: 125px;
  padding-top: 8px;
  padding-bottom: 8px;
 }
 /* ボタン内のSVGアイコンと文字のサイズを調整 */
 .line-link svg,
 .web-link svg {
  width: 18px;
  height: 18px;
 }
 .header-link p {
  font-size: 0.95rem;
 }
 .header-link p span {
  font-size: 1rem;
 }
 .header-link p.tel-link-number span {
  font-size: 1.3rem;
 }

 /* --- 以下はナビゲーションとハンバーガーボタン自体のスタイル --- */

 /* ハンバーガーボタンを表示 */
 .hamburger-button {
  display: block;
  /* .site-header-inner の padding-right と同じ値にすると右端に揃います */
  right: 0px;
 }

 /* PC用のグローバルナビを画面外に隠す */
.header-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 50;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */ /* ← 削除 */
    justify-content: flex-start;  /* ▲ 上から配置するように変更 */
    align-items: center;
    overflow-y: auto;             /* ▲ コンテンツがはみ出た場合にスクロールを許可 */
    padding: 80px 0 170px;         /* ▲ 上下の余白を追加（スクロール時の見栄え調整） */
    box-sizing: border-box;       /* ▲ paddingを含めて高さを100vhに収める */
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
  }

 /* JSで .active クラスが付いたらナビゲーションを画面内に表示 */
 .header-nav.active {
  transform: translateX(0);
 }

 /* SP用ナビゲーションのレイアウト */
 .nav-list {
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin: 0;
 }
 .nav-item a {
  font-size: 1.2rem;
 }
 
  /* ▼▼▼【ここから追加】ハンバーガーメニュー内リンクの表示スタイル ▼▼▼ */
 .sp-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* 各リンク間の余白 */
  margin-top: 40px; /* ナビゲーションリストとの余白 */
  padding: 0 20px;
  width: 100%;
 }

 /* メニュー内リンクのスタイルを調整 */
 .sp-nav-links .tel-link {
  text-shadow: none; /* 背景が白なのでテキストシャドウを解除 */
  color: #000;
  margin-right: 0;
  align-items: center; /* 中央揃えに */
 }
 .sp-nav-links .tel-link svg {
  width: 27px;
  height: 27px;
  transform: none;
 }
 .sp-nav-links .tel-link .tel-link-number {
  font-size: 1.6rem;
 }
 .sp-nav-links .tel-link .tel-link-number span {
  font-size: 2.0rem;
 }
 .sp-nav-links .tel-link .tel-link-receptiontime {
  text-align: center;
 }


 .sp-nav-links .line-link,
 .sp-nav-links .web-link {
  width: 80%;
  max-width: 280px; /* 最大幅を設定 */
  padding-top: 12px;
  padding-bottom: 12px;
 }
 .sp-nav-links .line-link p,
 .sp-nav-links .web-link p {
  font-size: 1.2rem;
 }
 .sp-nav-links .line-link p span,
 .sp-nav-links .web-link p span {
  font-size: 1.35rem;
 }
  /* ▲▲▲【ここまで追加】▲▲▲ */


}


/* --- さらなるレスポンシブ対応 (768px以下) --- */
@media screen and (max-width: 768px) {

    /* 通常のヘッダー(.site_header) のスタイル */
    .site_header .header-top .tel-link,
    .site_header .header-top .line-link,
    .site_header .header-top .web-link {
        display: none;
    }

    .site_header .header-top {
        padding-right: 0;
    }

    .site_header .site-header-inner {
        padding-left: 15px;
        padding-right: 15px;
    }
    .site_header .hamburger-button {
        right: 0px;
    }

    .site_header .header-right {
        margin-left: 10px;
    }


    /* ▼▼▼【ここから修正】固定ヘッダー(.fixed_header)の専用スタイル ▼▼▼ */

    /* 1. ロゴを非表示にする */
    .fixed_header .header-left {
        display: none;
    }

    /* 2. 右側の要素を全幅で使う */
    .fixed_header .header-right {
        width: 100%;
        margin-left: 0;
    }
    
    /* 3. コンテナのpaddingを調整 */
    .fixed_header .site-header-inner {
        padding: 0 15px 0 0;
    }
    
    /* 4. 4つの要素を横並びにする */
    .fixed_header .header-top {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 100%;
        padding-left: 0;
        margin-bottom: 0;
        margin-left: 0;
        padding-left: 40px;
        gap: 20%;
    }

    /* 5. 【重要】header-top内の各リンクのスタイルを縦積みに最適化 */
    .fixed_header .header-top .header-link { 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 0 2px;
        width: auto;
        height: auto;
        text-shadow: none;
        border-radius: 0;
    }
    
    /* 6. 【重要】header-top内のアイコンサイズを統一 */
    .fixed_header .header-top .header-link svg { 
        width: 22px;
        height: 22px;
        margin: 0;
        transform: none;
        color: #29a488;
    }
    .fixed_header .header-top .header-link.line-link svg { 
        fill: #29a488;
    }
    .fixed_header .header-top .header-link.web-link svg { 
        color: #29a488;
    }
    
    /* 7. 【重要】header-top内のテキストのスタイルを統一 */
    .fixed_header .header-top .header-link p { 
        font-size: 10px;
        line-height: 1.1;
        margin: 0;
        color: #29a488;
    }
    .fixed_header .header-top .header-link p span { 
        font-size: 10px;
        color: #29a488;
    }

    /* 8. 【重要】header-top内の電話リンクの個別調整 */
    .fixed_header .header-top .tel-link { 
        color: #000;
        margin-right: 0;
    }
    .fixed_header .header-top .tel-link .tel-link-main { 
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }
    .fixed_header .header-top .tel-link .tel-link-number,
    .fixed_header .header-top .tel-link .tel-link-receptiontime {
        display: none;
    }
    .fixed_header .header-top .tel-link .tel-link-main::after {
        content: "電話";
        font-size: 10px;
        line-height: 1.1;
        font-family: "Zen Kaku Gothic New", sans-serif;
        color: #29a488;
    }

    /* 9. 【重要】header-top内のLINEリンクの個別調整 */
    .fixed_header .header-top .line-link { 
        background-color: transparent;
        color: #00c300;
    }

    /* 10. 【重要】header-top内のWEB予約リンクの個別調整 */
    .fixed_header .header-top .web-link { 
        background-color: transparent;
        color: #007bff;
    }
    
    /* 11. ハンバーガーボタンの位置を調整 */
    .fixed_header .hamburger-button {
        position: static;
        transform: none;
        right: auto;
        top: auto;
        margin: 0;
        flex-basis: 25%;
    }
    .fixed_header .hamburger-button .hamburger-line {
        background-color: #000;
    }

     .fixed_header .header-top .web-link {
        background: none;
    }

    .nav-list {
        width: 100%;
    }
    .nav-item {
        width: 70%;
        text-align: center;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        box-shadow: none;
        background: rgba(204, 192, 163, 0.15);
        width: 100%;
        min-width: initial;
        padding: 15px;
        margin: 15px 0 0;
  }
  .dropdown-menu li a {
        padding: 0;
        color: rgb(0, 175, 154);
        width: 100%;
        display: block;
  }
  .has-dropdown {
        text-align: center;
  }
  .has-dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: none;
  }

}


/* =================================
【ここから追加】固定ヘッダー用のスタイル
================================= */
.fixed_header {
  /* 常に画面上部に固定 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* 他の要素より手前に表示 */

  /* 固定ヘッダーのデザイン */
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  /* site_header と同じpaddingを適用 */
  .site-header-inner {
    padding-top: 10px;
    padding-bottom: 15px;
  }
  
  /* 最初は画面の上側に見えないように隠す */
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

/* JavaScriptによってこのクラスが付くと、ヘッダーが表示される */
.fixed_header.is-active {
  transform: translateY(0);
}

/* 固定ヘッダー内のハンバーガーメニューも独立して動くように、
  元のセレクタから変更・追記します。
*/
.fixed_header .hamburger-button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 100;
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
@media screen and (max-width: 999px) {
  .fixed_header .hamburger-button {
    display: block;
    right: 0px;
  }
}
@media screen and (max-width: 768px) {
  .fixed_header .hamburger-button {
    right: 0px;
  }
}







/* --- Footer --- */
/*-------------------------------------------*/
/* フッター全体
/*-------------------------------------------*/
.site_footer {
    width: 100%;
}
.site_footer span {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}


/*-------------------------------------------*/
/* お問い合わせエリア
/*-------------------------------------------*/
.footer_contact {
    width: 100%;
    margin: 0 auto;
    padding: 5% 5% 7%; /* 上下に余白を追加 */
    background: url(assets/images/bg_green_trans.webp) no-repeat top center / 100% auto;
    background-color: rgb(104, 193, 173);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer_contact h3 {
    color: #fff;
    font-size: 1.0rem;
    text-align: center; /* h3を中央揃え */
    margin-bottom: 60px; /* 下に余白を追加 */
}
.footer_contact h3 span {
    display: block;
    font-size: 2.4rem;
    letter-spacing: 2px;
}

/* リンクコンテナの設定 */
.footer_contact_links {
    width: 100%;
    display: flex; /* 子要素を横並びに */
    justify-content: space-around; /* 均等に配置 */
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 5%;
    box-sizing: border-box;
}

/* 共通のボタンデザイン */
.footer_contact_links a {
    flex: 1; /* 幅を均等に */
    text-decoration: none;
    padding: 1em 1em;
    border: none; /* borderを削除 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    font-size: 1.0rem;
    color: #000;
    font-weight: bold;
    box-shadow: none;
    text-shadow: none;
}
.footer_contact_links a svg {
    width: 24px;
    height: 24px;
}

/* 電話ボタンのコンテンツを横並びにするための新しいクラス */
.tel-link .tel-content {
    display: flex;
    align-items: center;
    gap: 10px; /* SVGとテキスト間の隙間 */
}
.tel-link .tel-content p {
    font-size: 1.6rem;
}
/* 電話番号のテキストに適用されていた不要なスタイルを削除 */
.footer_contact_links .tel-link p span {
    text-shadow: none; /* text-shadowを無効化 */
}
.footer_contact_links .tel-link p {
    color: #fff;
}
.footer_contact_links .tel-link svg {
    stroke: #fff;
}

/* WEBボタンのデザイン */
.footer_contact_links .line-link{
    background-color: #fff;
    border-radius: 9999px; /* 左右を丸型に */
    color: #00b900;
}
.footer_contact_links .line-link svg {
    fill: #00b900;
}
.footer_contact_links .line-link p {
    font-size: 1.2rem;
}
.footer_contact_links .line-link p span {
    font-size: 1.35rem;
}
/* WEBボタンのデザイン */
.footer_contact_links .web-link {
    background: #fff;
    border-radius: 9999px; /* 左右を丸型に */
    color: #00AF9A;
}
.footer_contact_links .web-link svg {
    stroke: #00AF9A;
}
.footer_contact_links .web-link p {
    font-size: 1.2rem;
}
.footer_contact_links .web-link p span {
    font-size: 1.35rem;
}

/*-------------------------------------------*/
/* フッターコンテンツ
/*-------------------------------------------*/
.footer_contents {
    width: 100%;
    padding: 5.5% 5% 2.5%;
    background-color: #fff;
}

/* 上部：ロゴとSNS */
.footer_contents_top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
}
.footer_logo {
    text-align: right;
}
.footer_logo img {
    width: 160px; /* ロゴサイズを適宜調整 */
    height: auto;
}

.footer_socials ul {
    display: flex;
    justify-content: flex-start; /* 右詰め */
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px; /* アイコン間の余白 */
}

/* SVGアイコンの色を黒に統一 */
.footer_socials svg {
    width: 24px;
    height: 24px;
    fill: #444;
}

/* 下部：住所・診療時間とリンクリスト */
.footer_contents_bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 3%;
    margin-bottom: 2.5%;
    border-bottom: 1px solid rgba(204, 192, 163, 0.5); /* 区切り線 */
}

/* 左側：住所・診療時間 */
.footer_contents_bottom_left {
    width: 35%; /* 幅を調整 */
}

.footer_contents_bottom_left_dl {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 2em;
}

.footer_contents_bottom_left_dl dl {
    width: 50%;
}

.footer_contents_bottom_left dt {
    font-weight: bold;
    margin-bottom: 0.5em;
    font-size: 1.0rem;
    line-height: 1.2;
}
.footer_contents_bottom_left dd {
    margin: 0 0 1em 0;
    font-size: 0.9rem;
}

.footer_contents_bottom_left table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    border-top: 1px solid rgba(204, 192, 163, 0.5);
    margin-bottom: 5px;
}
.footer_contents_bottom_left th,
.footer_contents_bottom_left td {
    border-bottom: 1px solid rgba(204, 192, 163, 0.5);
    padding: 0.5em;
    font-size: 0.9rem;
}
.footer_contents_bottom_left th {
    
}
.footer_contents_bottom_left td span {
    font-size: 0.8rem;
}
.footer_contents_bottom_left .mark {
    color: rgb(104, 193, 173);
}
.footer_contents_bottom_left p.table-hosoku {
   font-size: 0.9rem;
}
.footer_contents_bottom_left p.table-hosoku span {
   font-size: 0.8rem;
}


/* 右側：リンクリスト */
.footer_contents_bottom_right {
    width: 60%; /* 幅を調整 */
    display: flex;
    justify-content: flex-start;
    gap: 2%;
}

.footer_linklist {
    width: 31%;
    padding: 0;
    margin: 0;
}

.footer_linklist h4 {
    font-size: 1.0em;
    margin: 0 0 1em 0;
    width: 100%;
    line-height: 1.2;
}

.footer_linklist ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.footer_linklist ul li {
    margin-bottom: 0.8em;
    font-size: 0.9em;
}
.footer_linklist ul li a {
    color: #000;
}

/*-------------------------------------------*/
/* Google Map
/*-------------------------------------------*/
.footer_gmap {
    width: 100%;
    height: 400px;
}

.footer_gmap iframe {
    width: 100%;
    height: 100%;
}

/*-------------------------------------------*/
/* コピーライト
/*-------------------------------------------*/
.footer_copyright {
    width: 100%;
    padding: 1.5em 0;
    background: linear-gradient(to right, rgb(104, 193, 173) 0%, rgb(60, 194, 130) 100%);
    color: #fff;
    text-align: center;
}

.copyright {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
}
.copyright span {
    margin: 0;
    padding: 0;
    font-size: 0.8em;
    padding: 0 3px;
}


/* --- レスポンシブ対応 (999px以下) --- */
@media screen and (max-width: 999px) {

    .footer_contact {
        padding: 6% 2.5% 9%;
    }

    .footer_contact h3 {
        margin-bottom: 50px;
    }

    /* リンクコンテナの設定 */
    .footer_contact_links {
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 0;
        box-sizing: border-box;
    }

    /* フッターコンテンツ下部を縦並びに */
    .footer_contents_bottom {
        flex-direction: column;
        gap: 30px;
    }

    /* 左側：住所・診療時間 */
    .footer_contents_bottom_left {
        width: 100%;
    }

    /* 右側：リンクリスト */
    .footer_contents_bottom_right {
        width: 100%;
    }

    .footer_contents_bottom_left_dl {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 0px;
    }

    .footer_contents_bottom_left_dl dl {
        width: 50%;
    }

}

/* --- レスポンシブ対応 (768px以下) --- */
@media screen and (max-width: 768px) {
    
    /* フッター全体の余白を調整 */
    .footer_contents {
        padding: 10% 5% 15%;
    }

    .footer_logo {
    text-align: center;
}

    /* footer_contents_bottom_rightのfooter_linklistを縦並びに */
    .footer_contents_bottom_right {
        flex-direction: column;
        gap: 40px; /* 縦並びの際の隙間を調整 */
    }

    .footer_linklist {
        width: 100%;
    }

    .footer_linklist h4 {
        margin: 0 0 20px 0;
    }
    
    /* footer_linklistのulのliを2つずつ横並びに */
    .footer_linklist ul {
        display: flex;
        flex-wrap: wrap;
        gap: 15px 20px; /* 縦横の余白を調整 */
    }
    
    .footer_linklist ul li {
        width: calc(50% - 10px); /* 隙間を考慮した幅 */
        margin-bottom: 0; /* 既存の余白をリセット */
    }
    .footer_linklist ul li a {
        font-size: 1.0rem;
    }



    .footer_contents_bottom {
        border-bottom: none;
        margin-bottom: 15%;
        padding-bottom: 0;
    }

    /* footer_contents_bottom_left_dlのdlを縦並びに */
    .footer_contents_bottom_left_dl {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 2em;
    }
    
    .footer_contents_bottom_left_dl dl {
        width: 100%;
    }
    .footer_contents_bottom_left_dl dl dd {
        font-size: 1.0rem;
    }

    /* footer_contents_topのfooter_socialsとfooter_logoを縦並びに */
    .footer_contents_top {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    /* footer_contactのh3とfooter_contact_linksは横並びにして、footer_contact_linksの要素は縦並びに */
    .footer_contact {
        padding: 7% 5% 12.5%; /* 全体の余白を調整 */
    }
    
    .footer_contact h3 {
        margin-bottom: 30px; /* 縦並びの隙間を調整 */
        font-size: 1.0rem;
    }
    .footer_contact h3 span {
        font-size: 2.0rem;
    }

    .footer_contact_links {
        flex-direction: column;
        align-items: center;
        width: 80%; /* 幅を調整して中央寄せ */
        gap: 10px;
    }
    
    .footer_contact_links a {
        width: 100%; /* ボタンの幅を100%に */
        white-space: normal; /* テキストの折り返しを許可 */
        justify-content: center; /* ボタン内の要素を中央に配置 */
    }
    .tel-link .tel-content p {
        font-size: 2.2rem;
        letter-spacing: 1px;
    }
    .tel-link .tel-content svg {
        transform: translateY(2px);
        width: 27px;
        height: 27px;
    }





}







/* リンク効果 */


/* リンク①　リンク全体を中央に配置するためのコンテナ */
.link-container {
  text-align: center;
  display: flex;
  justify-content: center;
}

/* リンクの基本スタイル */
.cta-link {
  display: inline-flex;
  align-items: center;
  color: #00AF9A;
  text-decoration: none;
  font-weight: bold;
  position: relative; /* アンダーラインの基点にするため */
  padding-bottom: 5px; /* アンダーラインとテキストの間隔 */
  transition: color 0.3s ease; /* ホバー時のテキスト色変化用 */
  margin: 10px auto 10px;
}

/* テキストのアンダーライン */
.cta-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0; /* 最初は幅0 */
  height: 1px; /* アンダーラインの太さ */
  background-color: #00AF9A; /* アンダーラインの色 */
  transition: width 0.3s ease-out; /* 幅の変化をアニメーション */
}

/* マウスオーバー時のテキスト色とアンダーライン */
.cta-link:hover {
  color: #00AF9A; /* ホバー時のテキスト色（変わらない場合は同じ色を明示） */
}
.cta-link:hover::before {
  width: 100%; /* アンダーラインの幅を100%にする */
}

/* 丸いアイコンと矢印をまとめるラッパー */
.circle-arrow-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px; /* ラッパーの幅 */
  height: 26px; /* ラッパーの高さ */
  margin-left: 8px; /* テキストとの間のスペース */
  position: relative; /* 矢印アイコンの配置基点 */
  border-radius: 50%; /* ホバー時の背景色を円にする */
  transition: background-color 0.3s ease; /* 背景色の変化を滑らかに */
}

/* SVG（円の輪郭線アニメーション用） */
.circle-svg {
  position: absolute; /* ラッパーの中央に配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* 描画開始位置を上にする */
}

.circle-svg circle {
  stroke-dasharray: 75.36; /* 円周の長さ（2 * PI * r = 2 * 3.14 * 12 = 75.36） */
  stroke-dashoffset: 75.36; /* 最初は線全体が見えない状態 */
  transition: stroke-dashoffset 0.6s ease-out, stroke 0.3s ease; /* アニメーションと色の変化 */
  fill: transparent; /* 円の内部は透明 */
}

/* 矢印アイコンのスタイル */
.arrow-icon {
  font-size: 14px;
  line-height: 1;
  color: #00AF9A; /* 通常時の矢印の色 */
  position: relative; /* SVGの上に重なるように */
  z-index: 1; /* SVGより手前に表示 */
  transform: translateX(-6px); /* 矢印を右に動かす */
  transition: color 0.3s ease, transform 0.3s ease; /* 色と動きのアニメーション */
}

/* マウスオーバー時のエフェクト */
.cta-link:hover .circle-arrow-wrapper {
  
}

.cta-link:hover .circle-svg circle {
  stroke-dashoffset: 0; /* 線が完全に描画される */
  stroke: #00AF9A; /* 輪郭線の色を白に */
}

.cta-link:hover .arrow-icon {
  color: #00AF9A; /* ホバー時、矢印の色を白に */
  transform: translateX(0px); /* 矢印を右に動かす */
}



/* リンク①-2　リンク全体を中央に配置するためのコンテナ */
.link-container-left {
  display: flex;
  text-align: left;
  justify-content: flex-start;
}

/* リンクの基本スタイル */
.cta-link {
  display: inline-flex;
  align-items: center;
  color: #00AF9A;
  text-decoration: none;
  font-weight: bold;
  position: relative; /* アンダーラインの基点にするため */
  padding-bottom: 5px; /* アンダーラインとテキストの間隔 */
  transition: color 0.3s ease; /* ホバー時のテキスト色変化用 */
  margin: 10px 0 10px;
}

/* テキストのアンダーライン */
.cta-link::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0; /* 最初は幅0 */
  height: 1px; /* アンダーラインの太さ */
  background-color: #00AF9A; /* アンダーラインの色 */
  transition: width 0.3s ease-out; /* 幅の変化をアニメーション */
}

/* マウスオーバー時のテキスト色とアンダーライン */
.cta-link:hover {
  color: #00AF9A; /* ホバー時のテキスト色（変わらない場合は同じ色を明示） */
}
.cta-link:hover::before {
  width: 100%; /* アンダーラインの幅を100%にする */
}

/* 丸いアイコンと矢印をまとめるラッパー */
.circle-arrow-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 26px; /* ラッパーの幅 */
  height: 26px; /* ラッパーの高さ */
  margin-left: 8px; /* テキストとの間のスペース */
  position: relative; /* 矢印アイコンの配置基点 */
  border-radius: 50%; /* ホバー時の背景色を円にする */
  transition: background-color 0.3s ease; /* 背景色の変化を滑らかに */
}

/* SVG（円の輪郭線アニメーション用） */
.circle-svg {
  position: absolute; /* ラッパーの中央に配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* 描画開始位置を上にする */
}

.circle-svg circle {
  stroke-dasharray: 75.36; /* 円周の長さ（2 * PI * r = 2 * 3.14 * 12 = 75.36） */
  stroke-dashoffset: 75.36; /* 最初は線全体が見えない状態 */
  transition: stroke-dashoffset 0.6s ease-out, stroke 0.3s ease; /* アニメーションと色の変化 */
  fill: transparent; /* 円の内部は透明 */
}

/* 矢印アイコンのスタイル */
.arrow-icon {
  font-size: 14px;
  line-height: 1;
  color: #00AF9A; /* 通常時の矢印の色 */
  position: relative; /* SVGの上に重なるように */
  z-index: 1; /* SVGより手前に表示 */
  transform: translateX(-6px); /* 矢印を右に動かす */
  transition: color 0.3s ease, transform 0.3s ease; /* 色と動きのアニメーション */
}

/* マウスオーバー時のエフェクト */
.cta-link:hover .circle-arrow-wrapper {
  
}

.cta-link:hover .circle-svg circle {
  stroke-dashoffset: 0; /* 線が完全に描画される */
  stroke: #00AF9A; /* 輪郭線の色を白に */
}

.cta-link:hover .arrow-icon {
  color: #00AF9A; /* ホバー時、矢印の色を白に */
  transform: translateX(0px); /* 矢印を右に動かす */
}



/* リンク②　ボタンを中央に配置するためのコンテナ（任意） */
.link-button-container {
  text-align: center;
}

/* ボタン本体のスタイル */
.gradient-button {
  /* displayと配置 */
  display: inline-block; /* ボタンとしての領域を確保 */
  position: relative;    /* SVGアイコンを配置する際の基準点 */
  
  /* サイズと余白 */
  padding: 16px 60px 16px 60px; /* 上下 左右 の余白 */
  
  /* 見た目 */
  background: linear-gradient(to right, rgb(104, 193, 173) 0%, rgb(60, 194, 130) 100%);
  border-radius: 9999px; /* 左右を完全に丸くする */
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1); /* 立体感を出す影（任意）*/

  /* テキストのスタイル */
  color: white;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  
  /* アニメーション */
  transition: transform 0.2s ease-in-out;
}

/* SVGアイコンのスタイル */
.arrow-svg {
  /* 配置 */
  position: absolute; /* ボタン（親要素）を基準に絶対配置 */
  top: 50%;           /* 上から50%の位置 */
  right: 20px;        /* 右から20pxの位置 */
  transform: translateY(-50%); /* 垂直方向中央に補正 */

  /* サイズ */
  width: 9px;
  height: 14px;
  
  /* アニメーション */
  transition: transform 0.3s ease;
  stroke: #fff;
}

/* マウスオーバー時のエフェクト */
.gradient-button:hover {
  transform: translateY(0px); /* ボタンが少し浮き上がる（任意） */
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.15);
}

.gradient-button:hover .arrow-svg {
  /* Y軸方向の位置は維持しつつ、X軸方向に6px移動 */
  transform: translateY(-50%) translateX(6px);
}




/* リンク③　ボタンを中央に配置するためのコンテナ（任意） */
.link-button-container2 {
  text-align: center;
}

/* ボタン本体のスタイル */
.link-button-container2 .gradient-button {
  /* displayと配置 */
  display: inline-block; /* ボタンとしての領域を確保 */
  position: relative;    /* SVGアイコンを配置する際の基準点 */
  
  /* サイズと余白 */
  padding: 16px 60px 16px 60px; /* 上下 左右 の余白 */
  
  /* 見た目 */
  background: #fff;
  border-radius: 9999px; /* 左右を完全に丸くする */
  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1); /* 立体感を出す影（任意）*/

  /* テキストのスタイル */
  color: rgb(104, 193, 173);
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  
  /* アニメーション */
  transition: transform 0.2s ease-in-out;
}

/* SVGアイコンのスタイル */
.link-button-container2 .arrow-svg {
  /* 配置 */
  position: absolute; /* ボタン（親要素）を基準に絶対配置 */
  top: 50%;           /* 上から50%の位置 */
  right: 20px;        /* 右から20pxの位置 */
  transform: translateY(-50%); /* 垂直方向中央に補正 */

  /* サイズ */
  width: 9px;
  height: 14px;
  
  /* アニメーション */
  transition: transform 0.3s ease;
  stroke: rgb(104, 193, 173);
}

/* マウスオーバー時のエフェクト */
.link-button-container2 .gradient-button:hover {
  transform: translateY(0px); /* ボタンが少し浮き上がる（任意） */
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.15);
}

.link-button-container2 .gradient-button:hover .arrow-svg {
  /* Y軸方向の位置は維持しつつ、X軸方向に6px移動 */
  transform: translateY(-50%) translateX(6px);
}




/* トップページ */


/* --- top mv --- */

.top-mv-wrapper {
    position: relative;
}

.top-mv {
  width: 100%;
  height: 100vh; /* ビューポートの高さの100%に設定 */
  overflow: hidden; /* 子要素がはみ出す場合は隠す */
  position: relative;
  z-index: 1;
  margin-bottom: 12.4rem;
}

.top-mv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.top-mv-message {
    position: absolute;
    bottom: 7%;
    left: 5%;
    z-index: 1;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.top-mv-message p {
    font-size: clamp(4.0rem, 1.5rem + 3.0vw, 9.0rem);
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: 600;
}
.top-mv-message p span {
    font-size: clamp(2.0rem, 1.0rem + 1.8vw, 2.8rem);
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.top-mv-message h1 {
    font-size: clamp(1.2rem, 0.5rem + 3.0vw, 1.4rem);
}

.top-implantlink a {
    position: absolute;
    writing-mode: vertical-rl;
    background: rgb(0, 175, 154);
    color: #fff;
    padding: 17px 12px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    top: 25%;
    right: 0;
    z-index: 1;
    font-size: 1.1rem;
    letter-spacing: 2px;
    transition: padding 0.3s ease;
    text-decoration: none;
    display: block;
}

/* ↓ これを追加：マウスが乗った時のスタイル */
.top-implantlink a:hover {
  /* paddingの左右の値を大きくして幅を広げる */
  padding: 17px 25px; 
}


.top-mv-info {
    position: absolute;
    width: 35rem;
    bottom: -17%;
    right: 0;
    padding: 3.5rem 4rem 10px;
    background-color: #fff;
    z-index: 1;
    white-space: nowrap;
    border-top-left-radius: 5px;
}
.top-mv-info table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    border-top: 1px solid rgba(204, 192, 163, 0.5);
    margin-bottom: 5px;
}
.top-mv-info th,
.top-mv-info td {
    border-bottom: 1px solid rgba(204, 192, 163, 0.5);
    padding: 0.5em;
    font-size: 0.9rem;
}
.top-mv-info td span {
    font-size: 0.9rem;
}
.top-mv-info .mark {
    color: rgb(104, 193, 173);
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.top-mv-info p.table-hosoku {
   font-size: 0.9rem;
}
.top-mv-info p.table-hosoku span {
   font-size: 0.9rem;
}

.top-mv-info .info-list {
  display: flex; /* 横並びにする */
  padding: 0;
  list-style: none; /* liの黒丸を消す */
  text-align: center; /* テキストを中央ぞろえにする */
  margin-bottom: 16px;
}

.top-mv-info .info-list li {
  flex: 1; /* 均等な幅に広げる */
  position: relative; /* 疑似要素の基準位置とする */
  font-size: 0.8rem;
  font-weight: 500;
}

/* liとliの間の縦線 */
.top-mv-info .info-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 60%; /* 線の高さ */
  background-color: rgba(204, 192, 163, 0.5); /* 線の色 */
}

/* spanタグのスタイル（数字部分） */
.info-list li span {
    font-size: 2.2rem; /* 数字を少し大きくする */
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    padding: 0 2px;
    transform: translateY(-4px);
    line-height: 1.2;
}


/* 画面幅が1360px以上の時のスタイル */
@media (min-width: 1360px) {
  .top-mv {
    height: 100vh; /* 例として高さを720pxに設定 */
  }
}

/* 画面幅が768px以下の時のスタイル */
@media (max-width: 768px) {

.top-mv {
    height: 90vh;
    margin-bottom: 245px;
}
.top-mv-info {
    z-index: 1;
}
.top-mv-info {
    position: absolute;
    width: 90%;
    bottom: -32%;
    right: 0;
    padding: 30px;
    background-color: #fff;
    z-index: 1;
    white-space: nowrap;
    border-top-left-radius: 5px;
}
.top-mv-message {
    bottom: 13%;
}
.top-mv-message p {
    margin-bottom: 10px;
    font-size: 2.4rem;
}
.top-mv-message p span {
    font-size: 1.3rem;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}


}



section.top-concept {
  display: flex; /* figureとテキストブロックを横並びにする */
  align-items: center; /* figureとテキストブロックを垂直方向に中央揃え */
  width: 100%; /* セクション全体の幅 */
  padding-right: 6%; /* 画面右端に余白を作る */
  margin-bottom: 100px;
}
section.top-concept .img-block {
  width: 60%;
  margin-right: 5%;
  order: 1;
}
section.top-concept .text-block { /* h2とpをまとめたdiv */
  flex: 1; /* 残りのスペースを埋めるように幅を広げる */
  order: 2;
}
section.top-concept figure {
  width: 100%;
  height: 70%; /* 例：ビューポートの高さの70%に設定 */
  overflow: hidden; /* figureからはみ出た画像を隠す */
}
section.top-concept figure img {
  width: 100%; /* figureの幅いっぱいに広げる */
  height: 100%; /* figureの高さいっぱいに広げる */
  object-fit: cover; /* 縦横比を保ちながら要素を埋める（はみ出た部分は切り取る） */
  display: block; /* 画像の下に発生しがちな余白を消す */
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {
  section.top-concept {
    flex-direction: column; /* 要素を縦に並べる */
    padding-right: 0; /* 左右の余白を調整 */
    margin-bottom: 50px;
    margin-top: ;
  }
  section.top-concept .img-block {
    width: 95%; /* 幅を100%にする */
    margin-right: 5%; /* 右の余白をなくす */
    margin-bottom: 40px; /* 下に余白を追加 */
  }
  section.top-concept .text-block {
    width: 85%; /* 幅を調整 */
    margin: 0 auto; /* 中央揃えにする */
  }
}





.top-gairaikan {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto 100px;
    background-color: #f4f2ed;
    border-radius: 10px;
    padding: 50px;
}
.top-gairaikan h2 {
    font-size: clamp(1.3rem, 0.7rem + 1.0vw, 1.6rem);
    text-align: center;
    margin-bottom: 30px;
}

/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

.top-gairaikan {
    width: 90%;
    margin: 0 auto 50px;
    border-radius: 10px;
    padding: 30px;
}
.top-gairaikan h2 {
    margin-bottom: 20px;
}

}





section.top-3pint {
  width: 100%;
  margin-bottom: 120px;
}
section.top-3pint ul {
  width: 90%;
  max-width: 1300px;
  margin: 0 auto; /* 中央揃え */
  display: flex;
  gap: 30px; /* ← これを追加 */
  padding: 0;
  list-style: none;
}
section.top-3pint li {
  flex-grow: 1;
  position: relative;
  padding-bottom: var(--h3-height-half);
}
section.top-3pint figure {
  margin: 0 0 0;
  position: relative; /* 子要素のposition: absoluteの基準 */
  width: 100%;
  padding-top: 70%;
  overflow: hidden; /* はみ出した画像を隠す */
  border-radius: 5px;
}
section.top-3pint figure img {
  position: absolute; /* 親のfigureを基準に配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がfigureからはみ出す場合、比率を保ったまま領域を埋める */
}
section.top-3pint h3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 85%;
  transform: translateY(50%); 
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px 0 0 20px;
  text-align: left;
  box-sizing: border-box;
  border-top-right-radius: 5px;
}

/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

section.top-3pint {
    margin-bottom: 60px;
}
section.top-3pint ul {
    width: 85%;
    flex-direction: column;
}
section.top-3pint li {
    width: 100%;
    margin-bottom: 70px;
}
section.top-3pint h3 {
    position: absolute;
    bottom: 0;
    left: inherit;
    right: 0;
    width: 75%;
    transform: translateY(50%);
    background-color: rgba(255, 255, 255, 0.85);
    padding: 20px 25px 0 0;
    text-align: right;
    box-sizing: border-box;
    border-top-left-radius: 5px;
    border-top-right-radius: 0;
}
section.top-3pint li:nth-child(2) h3 {
    left: 0;
    padding: 20px 0 0 25px;
    border-top-left-radius: 0;
    border-top-right-radius: 5px;
    text-align: left;
}

}




/* --- 診療メニュー --- */
.top-menu {
  width: 100%;
  /*background-color: #eef3e9;*/
  background: url(assets/images/bg_green_trans.webp) no-repeat top center / 100% auto;
  background-color: rgb(104, 193, 173);
  padding: 100px 0 16px; /* 上下の余白を追加して見やすくします */
}


/* --- h2直下の説明文p --- */
.top-menu > p {
  max-width: 500px;
  width: 90%;
  margin: 0 auto 64px; /* 上下左右の真ん中に配置し、下に余白を追加 */
  color: #fff;
}

/* --- リストul --- */
.top-menu ul {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0; /* デフォルトのpaddingをリセット */
  list-style: none; /* デフォルトの黒丸を非表示 */
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4つの要素を均等に横並び */
  gap: 10px; /* 要素間の間隔 */
}
.top-menu ul li {
  background: #fff;
  border-radius: 5px;
}
/* --- 画像 figure/img --- */
.top-menu li figure {
  margin: 0 0 20px;
  position: relative; /* 子要素のposition: absoluteの基準 */
  width: 100%;
  padding-top: 70%; /* 9 / 16 = 0.5625 = 56.25% で16:9の縦横比を確保 */
  overflow: hidden; /* はみ出した画像を隠す */
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.top-menu li img {
  position: absolute; /* 親のfigureを基準に配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がfigureからはみ出す場合、比率を保ったまま領域を埋める */
}
.top-menu ul li h3 {
    text-align: center;
    width: 85%;
    margin: 0 auto 20px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgba(204, 192, 163, 0.4);
}
.top-menu ul li h3 span {
    font-size: 1.0rem;
    display: inline-block;
    letter-spacing: 1px;
    margin-bottom: 8px;
    background: rgba(104, 193, 173, 0.2);
    border-radius: 9999px;
    padding: 3px 17px;
}
.top-menu ul li p {
    text-align: left;
    width: 90%;
    margin: 0 auto 16px;
    padding: 0 5% 0;
}

/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

.top-menu {
  padding: 50px 0 5px; /* 上下の余白を追加して見やすくします */
}
.top-menu ul {
    width: 85%;
    margin: 0 auto 10px; /* ボックス自体を中央に配置 */
    padding: 0; /* デフォルトのpaddingをリセット */
    list-style: none; /* デフォルトの黒丸を非表示 */
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 4つの要素を均等に横並び */
    gap: 30px; /* 要素間の間隔 */
}
.top-menu .link-button-container2 {
    margin-top: 60px;
}
}







/* --- 基本設定 --- */
.top-reason {
  width: 100%;
  /*background-color: #eef3e9;*/
  background: url(assets/images/bg_beige.webp) repeat-y top center / 100% auto;
  background-color: rgba(244, 242, 237, 1.0);
  padding: 100px 0 100px; /* 上下の余白を追加して見やすくします */
}

/* --- 見出しh2 --- */
.top-reason h2 {
  text-align: center;
  margin-bottom: 80px;
}


/* --- リストul --- */
.top-reason ul {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 64px; /* ボックス自体を中央に配置 */
  padding: 0; /* デフォルトのpaddingをリセット */
  list-style: none; /* デフォルトの黒丸を非表示 */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3つの要素を均等に横並び */
  gap: 60px 50px; /* 要素間の間隔 */
}
.top-reason ul li {
  background: ;
}
/* --- 画像 figure/img --- */
.top-reason li figure {
  margin: 0 0 20px;
  position: relative; /* 子要素のposition: absoluteの基準 */
  width: 100%;
  padding-top: 70%; /* 9 / 16 = 0.5625 = 56.25% で16:9の縦横比を確保 */
  overflow: hidden; /* はみ出した画像を隠す */
  border-radius: 5px;
}
.top-reason li img {
  position: absolute; /* 親のfigureを基準に配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がfigureからはみ出す場合、比率を保ったまま領域を埋める */
}
.top-reason ul li h3 {
    text-align: center;
    width: 100%;
    margin: 0 auto 16px;
    padding: 0 5% 0;
}
.top-reason ul li p {
    text-align: left;
    width: 100%;
    margin: 0 auto 16px;
    padding: 0 5% 0;
}
.top-reason p.reason-number {
    text-align: center;
    font-size: 2.2rem; /* 数字を少し大きくする */
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    position: relative;
    margin-bottom: 30px;
}
.top-reason p.reason-number:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    display: inline-block;
    width: 9.0rem;
    height: 3px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* 修正箇所 */
    background: repeating-linear-gradient(
        -45deg,
        rgb(104, 193, 173),
        rgb(104, 193, 173) 4px,
        transparent 4px,
        transparent 8px
    );
    /* 線の長さを調整する場合は以下を使用 */
    /* width: 4rem; */
    border-radius: 9999px;
}


/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

.top-reason {
    padding: 50px 0 70px;
}
.top-reason h2 {
    margin-bottom: 40px;
}
.top-reason ul {
    width: 85%;
    margin: 0 auto 64px; /* ボックス自体を中央に配置 */
    padding: 0; /* デフォルトのpaddingをリセット */
    list-style: none; /* デフォルトの黒丸を非表示 */
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 3つの要素を均等に横並び */
    gap: 50px; /* 要素間の間隔 */
}

}




.top-geeting {
    width: 100%;
    padding: 100px 0 0;
    background: #fff;
}
.top-greeting-inner {
    width: 90%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.top-greeting-inner .figure-block {
  width: 50%;
  position: relative;
}
.top-greeting-inner .figure-block figure {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 5px;
  width: 100%;
  margin-bottom: 15px;
}
.top-greeting-inner .figure-block figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.top-greeting-inner .figure-block p.jp-name {
    box-sizing: border-box;
    font-size: 1.55rem;
    background: #fff;
    border-top-left-radius: 5px;
    position: absolute;
    bottom: -5%;
    left: 10%;
    width: 90%;
    padding: 15px 0 0 20px;
}
.top-greeting-inner .figure-block span.katagaki {
    font-size: 0.9rem;
    display: block;
}
.top-greeting-inner .figure-block span.en-name {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 0.65rem;
    display: inline-block;
    padding-left: 10px;
}

.top-greeting-inner .text-block { 
  width: 40%;
  margin-top: 4%;
}
.top-greeting-inner .text-block h3 { 
  margin-bottom: 30px;
}
.top-greeting-inner .text-block p { 
  margin-bottom: 40px;
}
.top-greeting-inner .text-block .top-greeting-inner-box { 
  
}
.top-greeting-inner .text-block .top-greeting-inner-box h4 { 
    margin: 0 0 10px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: rgb(104, 193, 173);
}
.top-greeting-inner .text-block .top-greeting-inner-box dt { 
    font-weight: 500;
}
.top-greeting-inner .text-block .top-greeting-inner-box dd, .top-greeting-inner .text-block .top-greeting-inner-box li { 
    margin: 0 0 10px;
}

/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

.top-geeting {
    padding: 50px 0 0;
}
.top-greeting-inner {
    width: 85%;
    flex-direction: column; /* 要素を縦に並べる */
    margin-bottom: 40px; /* 下の余白を調整 */
}
.top-greeting-inner .text-block {
    width: 100%; /* 幅を100%にする */
}
.top-greeting-inner .figure-block {
    width: 90%;
    margin: 0 auto 50px;
}
.top-greeting-inner .text-block {
    margin-top: 0; /* 元のmargin-topをリセット */
}

}







section.top-access {
  display: flex; /* figureとテキストブロックを横並びにする */
  align-items: center; /* figureとテキストブロックを垂直方向に中央揃え */
  width: 100%; /* セクション全体の幅 */
  padding:120px 0 120px 6%; /* 画面右端に余白を作る */
  margin: 0 0 0;
  background: url(assets/images/bg_green.webp) repeat-y top center / 100% auto;
  background-color: #e4edea;
}

section.top-access figure {
  width: 65%;
  margin-left: 5%;
  height: 64%; /* 例：ビューポートの高さの70%に設定 */
  overflow: hidden; /* figureからはみ出た画像を隠す */
  order: 2;
}

section.top-access figure img {
  width: 100%; /* figureの幅いっぱいに広げる */
  height: 100%; /* figureの高さいっぱいに広げる */
  object-fit: cover; /* 縦横比を保ちながら要素を埋める（はみ出た部分は切り取る） */
  display: block; /* 画像の下に発生しがちな余白を消す */
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

section.top-access .text-block { /* h2とpをまとめたdiv */
  flex: 1; /* 残りのスペースを埋めるように幅を広げる */
  order: 1;
}
section.top-access .text-block p { /* h2とpをまとめたdiv */
    margin-bottom: 40px;
}

/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

section.top-access {
    flex-direction: column; /* 要素を縦に並べる */
    padding:60px 0 50px 0; /* 画面右端に余白を作る */
    margin: 0 0 0px; /* 上下の余白を調整 */
}
section.top-access figure {
    width: 95%; /* 幅を100%にする */
    margin-left: 5%; /* 左の余白をなくす */
    order: 1; /* 画像ブロックを上に配置 */
}
section.top-access .text-block {
    width: 85%; /* 幅を調整 */
    margin-top: 30px; /* 上に余白を追加 */
    order: 2; /* テキストブロックを下に配置 */
}

}





.gallery-wrap {
    width: 100%;
    margin: 0 0 40px 0;
}
/* ギャラリー全体のコンテナ */
.gallery-container {
    width: 100%;
    display: flex;
    cursor: grab; /*掴めるカーソルを表示*/
}

/* スワイプ操作中のカーソル */
.gallery-container:active {
    cursor: grabbing;
}

/* 画像を横並びにするスライダー */
.slider {
    display: flex;
    flex-shrink: 0; /*要素の縮小を無効化*/
}

/* 画像のスタイル */
.slider img {
  width: 25vw;
  height: auto; /* 高さを自動調整 */
  aspect-ratio: 10 / 7; /* 縦横比を16:9に固定 */
  object-fit: cover;
  flex-shrink: 0;
}


/* --- レスポンシブ対応 (768px以下) --- */
@media screen and (max-width: 768px) {

/* ギャラリー全体のコンテナ */
.gallery-container {
    width: 100%;
    display: flex;
    cursor: grab; /*掴めるカーソルを表示*/
    overflow-x: hidden;
}
/* 画像のスタイル */
.slider img {
  width: 50vw;
  height: auto; /* 高さを自動調整 */
  aspect-ratio: 10 / 7; /* 縦横比を16:9に固定 */
  object-fit: cover;
  flex-shrink: 0;
}

}






.top-menudetail-wrapper {
    margin: 150px auto 100px;
}
.top-menudetail-wrapper h2 {
    margin-bottom: 80px;
}
.top-menudetail {
  position: relative;
  padding: 75px 0;
  margin-bottom: 50px;
  width: 100%;
}
.top-menudetail-topbox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  gap: 5%;
  position: relative;
}
.top-menudetail-txtbox {
  width: 25%; /* テキストボックスの幅を25%に設定 */
  margin-top: 25px;
}
.top-menudetail-txtbox h3 {
  margin-bottom: 30px;
}
.top-menudetail-txtbox h4 {
  margin-bottom: 10px;
}
.top-menudetail-txtbox p {
  margin-bottom: 25px;
}
.top-menudetail-imgbox {
  width: 55%; /* figureの幅 */
  aspect-ratio: 10 / 7; /* 縦横比を16:9に設定 */
  overflow: hidden; /* 画像がはみ出さないように */
}
.top-menudetail-imgbox img {
  width: 100%; /* 親要素の幅に合わせて画像を広げる */
  height: 100%; /* 親要素の高さに合わせて画像を広げる */
  object-fit: cover; /* 画像が縦横比を保ったまま、指定領域を埋めるようにトリミング */
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.top-menudetail:nth-of-type(even) .top-menudetail-topbox {
  flex-direction: row-reverse; 
}

.top-menudetail-brandbox {
    width: 75%;
    max-width: 1100px;
    margin: 50px auto 0;
    background: #fff;
    padding: 40px;
    border-radius: 5px;
}
.top-menudetail-brandbox h3 {
    width: 90%;
    margin: 0 auto 30px;
    text-align: center;
    font-size: 1.2rem;
}
.top-menudetail-brandbox ul {
  display: flex;
}
.top-menudetail-brandbox li {
  flex: 1; /* flex-grow, flex-shrink, flex-basisのショートハンド */
  text-align: center; /* 必要に応じてテキストを中央寄せ */
}
.top-menudetail-brandbox li img {
  width: 50%;
}

.top-menudetail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 6.5%;
  right: 6.5%;
  bottom: 0;
  background-color: #e4edea;
  z-index: -1; 
  border-radius: 10px;
}
.top-menudetail:nth-of-type(even)::before {
  background-color: #f4f2ed;
}
.top-menudetail:nth-of-type(even) .top-menudetail-imgbox img {
  width: 100%; /* 親要素の幅に合わせて画像を広げる */
  height: 100%; /* 親要素の高さに合わせて画像を広げる */
  object-fit: cover; /* 画像が縦横比を保ったまま、指定領域を埋めるようにトリミング */
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

.top-menudetail-wrapper {
    margin: 70px auto 50px;
}
.top-menudetail-wrapper h2 {
    text-align: center;
    margin-bottom: 50px;
}
.top-menudetail {
    position: relative;
    padding: 40px 0 40px;
    margin-bottom: 20px;
    width: 100%;
}
.top-menudetail-topbox {
    flex-direction: column; /* 要素を縦に並べる */
    gap: 0; /* ギャップをなくす */
    justify-content: center;
    align-items: center;
}
.top-menudetail-imgbox {
    width: 90%; /* 幅を90%に設定 */
    margin: 0 0 40px 10%; /* 中央揃え */
    order: 1;
}
.top-menudetail-imgbox img {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.top-menudetail:nth-of-type(even) .top-menudetail-imgbox {
    width: 90%; /* 幅を90%に設定 */
    margin: 0 10% 40px 0; /* 中央揃え */
    order: 1;
}
.top-menudetail:nth-of-type(even) .top-menudetail-imgbox img {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.top-menudetail-txtbox {
    width: 80%; /* 幅を90%に設定 */
    margin-top: 0; /* 上部に余白を追加 */
    text-align: center;
    order: 2;
}
.top-menudetail-txtbox p {
    text-align: left;
}
.top-menudetail:nth-of-type(even) .top-menudetail-topbox {
    flex-direction: column; /* 偶数番目のアイテムも縦並びにする */
}
.top-menudetail-brandbox {
    width: 80%; /* 幅を90%に設定 */
    padding: 20px; /* パディングを調整 */
    margin: 0 auto 0;
}
.top-menudetail-brandbox ul {
    flex-direction: column; /* ブランドロゴを縦に並べる */
}
.top-menudetail-brandbox li {
    margin-bottom: 15px; /* 各アイテムの下に余白を追加 */
}
.top-menudetail::before {
    left: 3%;
    right: 3%;
}

}






/*　よくあるご質問　*/

.top-faq-wrapper {
    width: 100%;
    background-color: #e4edea;
    padding: 100px 0;
    margin: 0 0 120px;
}
.top-faq-wrapper h2 {
    margin-bottom: 80px;
}
.top-faq {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

.top-faq h2 {
    text-align: center;
    margin-bottom: 60px;
}

/* FAQの各項目 */
.faq-item {
  border-bottom: 1px solid rgba(204, 192, 163, 0.5);
  padding: 25px 0;
}

/* 質問部分 */
.faq-question {
  margin: 0;
  font-size: 1.1em;
  font-weight: bold;
}

.faq-question a {
  display: block;
  text-decoration: none;
  color: #000;
  transition: color 0.3s;
  padding-left: 25px;
  position: relative;
}

/* 質問の前に + を表示 */
.faq-question a::before {
  content: '+';
  position: absolute;
  left: 0;
  color: rgb(104, 193, 173);
  font-size: 1.2em;
  top: -2px;
}

.faq-question a:hover {
  color: #0066cc;
}

/* 回答部分 */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0;
  margin: 0;
}

/* 質問がクリックされた時に .active クラスを付与 */
.faq-item.active .faq-answer {
  max-height: 1000px;
  padding: 30px;
  margin: 15px auto 0;
  background: #fff;
  border-radius: 5px;
}

/* 質問がクリックされた時、+ を - に変更 */
.faq-item.active .faq-question a::before {
  content: '-';
  color: rgb(104, 193, 173);
  font-size: 1.3em;
  padding-left: 4px;
}

/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

.top-faq-wrapper {
    padding: 50px 0;
    margin: 0 0 60px;
}
.top-faq-wrapper h2 {
    margin-bottom: 40px;
}
.top-faq {
    width: 85%;
}

}






.top-post {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto 160px;
}
.top-post h2 {
    margin-bottom: 60px;
}

/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

.top-post {
    width: 100%;
    margin: 0 auto 60px;
}
.top-post h2 {
    width: 85%;
    margin: 0 auto 40px;
}

}




.news-list {
  list-style: none; /* リストの先頭にあるマークを削除 */
  padding: 0;
  margin: 0 0 70px;
}
.news-list li {
  border-bottom: 1px solid rgba(204, 192, 163, 0.5);
  padding: 0 0 20px; /* 上下の余白を追加 */
  margin: 0 0 20px;
}
.news-list li a {
  display: flex; /* Flexboxを有効にして子要素を横並びに */
  text-decoration: none; /* リンクの下線を削除 */
  color: #000; /* リンクの色を設定 */
  transition: color 0.3s;
  align-items: center;
}
.news-list li a:hover {
  color: #007bff; /* ホバー時に色を変更 */
}
.news-date {
    font-size: 0.9rem;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    flex-shrink: 0; /* 日付の幅を固定し、縮まないようにする */
    margin-right: 15px; /* 日付と内容の間に余白を確保 */
    width: 8%;
}
.news-text {
  font-size: 1rem;
  font-weight: bold;
  word-break: break-all; /* 長いテキストがはみ出さないように改行 */
}


/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

.news-list {
    width: 85%;
    margin: 0 auto 70px;
}
.news-list li {
    padding: 0 0 15px;
    margin: 0 0 15px;
}
.news-list li a {
    flex-direction: column; /* ニュースリストも縦に並べる */
    align-items: flex-start;
}
.news-date {
    width: auto; /* 幅を自動調整 */
    margin-bottom: 5px; /* 日付とテキストの間に余白を追加 */
}

}





@media (min-width: 769px) {

ul.topcolumn_list {
  list-style: none; /* リストのマークを削除 */
  margin: 0;
  padding: 0;
  display: flex; /* Flexboxを有効にする */
  flex-wrap: wrap; /* 要素の折り返しを許可 */
  gap: 40px; /* 要素間の隙間を設定 */
}
ul.topcolumn_list li.topcolumn_child {
  flex: 1 1 calc(25% - 40px); /* 4列に分割し、間隔を空ける */
  box-sizing: border-box; /* paddingとborderを幅に含める */
  text-align: center;
}
ul.topcolumn_list li.topcolumn_child a.topcolumn_child-link .post-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 70%;
  height: 0;
  overflow: hidden;
  margin-bottom: 20px;
}
ul.topcolumn_list li.topcolumn_child a.topcolumn_child-link .post-thumbnail img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
ul.topcolumn_list li.topcolumn_child div.topcolumn_contbox {
  text-align: left;
}
ul.topcolumn_list li.topcolumn_child p.topcolumn_text {
  font-size: 1.0rem;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  transition: color 0.3s;
}
ul.topcolumn_list li.topcolumn_child p.topcolumn_date {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 0.9rem;
    margin-bottom: 10px;
}
ul.topcolumn_list li.topcolumn_child .post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
ul.topcolumn_list li.topcolumn_child .post-categories a.category-item {
  background-color: #e4edea;
  color: #000;
  padding: 3px 8px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 0.8rem;
  white-space: nowrap;
}

}



/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

/* ===============================================
   スライダーリスト関連
=============================================== */
/* リスト全体（スクロールコンテナ） */
ul.topcolumn_list {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 auto 50px;
    scroll-padding: 0 10% 0;
    gap: 30px;
    scroll-behavior: smooth;
    padding-right: 30px;
    padding-left: 30px;
}

/* スクロールバーを非表示（Chrome, Safari） */
ul.topcolumn_list {
    position: relative;
}
ul.topcolumn_list::-webkit-scrollbar {
    display: none;
}

/* リストの各要素（カード） */
ul.topcolumn_list li.topcolumn_child {
    flex: 0 0 80%;
    scroll-snap-align: center;
}


/* ===============================================
   カード内部の要素
=============================================== */
ul.topcolumn_list li.topcolumn_child a.topcolumn_child-link {
    width: 100.0%;
    display: block; /* figureとcontboxを縦並びにする */
    margin-bottom: 0;
    padding-bottom: 0;
}

/* figure（画像コンテナ）のスタイルを修正 */
ul.topcolumn_list li.topcolumn_child figure {
    width: 100%;
    margin-bottom: 15px;
    aspect-ratio: 10 / 7;
    overflow: hidden;
}

/* figure内のimg（画像自体）のスタイルを新しく追加 */
ul.topcolumn_list li.topcolumn_child figure img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を保ったまま、コンテナ全体を覆う */
    border-radius: 5px;
}

ul.topcolumn_list li.topcolumn_child div.topcolumn_contbox {
    width: 100%; /* 横幅を100%に変更 */
    margin-bottom: 0;
}

ul.topcolumn_list li.topcolumn_child p.topcolumn_date {
    margin-bottom: 10px;
    color: #000;
    font-size: 0.9rem;
    letter-spacing: 0;
    line-height: 1.0;
}

ul.topcolumn_list li.topcolumn_child p.topcolumn_text {
    line-height: 1.6;
    margin-bottom: 10px;
}


/* ===============================================
   カテゴリタグ関連
=============================================== */
ul.topcolumn_list li.topcolumn_child .topcolumn_category_list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 3px;
}

ul.topcolumn_list li.topcolumn_child .topcolumn_category {
  font-size: 0.8rem;
  background-color: #ff941d;
  padding: 4px 8px;
  margin: 0;
  border-radius: 0px;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.0;
}
ul.topcolumn_list li.topcolumn_child .post-categories a.category-item {
  background-color: #e4edea;
  color: #000;
  padding: 3px 8px;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 0.8rem;
  white-space: nowrap;
  width: inherit;
  display: inline-block;
}


}









/*　イメージ表示用セクション　*/

.imgsection figure {
  margin: 0 auto 0;
  position: relative; /* 子要素のposition: absoluteの基準 */
  width: 100%;
  padding-top: 25%;
  overflow: hidden; /* はみ出した画像を隠す */
}
.imgsection figure img {
  position: absolute; /* 親のfigureを基準に配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がfigureからはみ出す場合、比率を保ったまま領域を埋める */
}

.imgsection-compact figure {
  margin: 0 auto 100px;
  position: relative; /* 子要素のposition: absoluteの基準 */
  width: 80%;
  max-width: 1200px;
  padding-top: 30%;
  overflow: hidden; /* はみ出した画像を隠す */
}
.imgsection-compact figure img {
  position: absolute; /* 親のfigureを基準に配置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がfigureからはみ出す場合、比率を保ったまま領域を埋める */
}

/* 768px以下の画面幅に適用されるスタイル */
@media screen and (max-width: 768px) {

.imgsection figure {
  padding-top: 40%;
}

.imgsection-compact figure {
    width: 90%;
    margin: 0 auto 0;
    padding-top: 40%;
}

}






/* ---------　
　　ここから下層ページ
　　　　　-------------- */

.bg_emerald { background: rgb(104, 193, 173); }
.bg_green { background: #e4edea; }
.bg_beige { background: #f4f2ed; }
.bg_white { background: #fff; }

.bg_beige_img {
    background: url(assets/images/bg_beige.webp) repeat-y top center / 100% auto;
}
.bg_beigetrans_img {
    background: url(assets/images/bg_beige_trans.webp) no-repeat top center / 100% auto;
    background-color: #f4f2ed;
}
.bg_green_img {
    background: url(assets/images/bg_green.webp) repeat-y top center / 100% auto;
}
.bg_greentrans_img {
    background: url(assets/images/bg_green_trans.webp) no-repeat top center / 100% auto;
    background-color: rgb(104, 193, 173);
}
.bg_greentranslight_img {
    background: url(assets/images/bg_green_translight.webp) no-repeat top center / 100% auto;
    background-color: #e4edea;
}

ul.feature-list {
    /* ulのデフォルトのリストスタイルを削除 */
    list-style-type: none;
    /* 擬似要素の位置の基準にするため、positionをrelativeに設定 */
    position: relative;
    /* 項目間のスペースを調整 */
    padding-left: 1.5em;
}
ul.feature-list li {
    position: relative;
    line-height: 1.5;
    margin-bottom: 15px;
}
ul.feature-list li::before {
    /* 丸型アイコンのコンテンツ（中身）は空に設定 */
    content: '';
    /* 絶対位置で配置 */
    position: absolute;
    /* 左端からの位置を調整 */
    left: -1.0rem;
    /* 上からの位置を調整（テキストの中央に配置） */
    top: 0.6em; /* フォントサイズに合わせて調整 */
    /* アイコンの幅と高さを設定 */
    width: 0.5em;
    height: 0.5em;
    /* 丸型にするためにborder-radiusを50%に設定 */
    border-radius: 50%;
    /* アイコンの色を設定 */
    background-color: rgb(204, 192, 163); /* 好みの色に変更 */
}

ul.normal-list {
    list-style-type: disc;
    list-style-position: outside;

}
ul.normal-list li {
    margin-left: 1.5em;
    line-height: 1.5;
    margin-bottom: 15px;
}


div.point-list {
  display: flex;
  align-items: flex-start;
  padding: 0 0 15px;
  margin: 0 0 15px;
}

div.point-list dt {
  flex: 0 0 120px; /* 項目名（dt）の幅を150pxに固定 */
  margin-right: 20px;
  font-weight: bold;
}

div.point-list dd {
  flex-grow: 1; /* 内容（dd）が残りの幅を全て使う */
}

/* スマホ表示（画面幅767px以下） */
@media screen and (max-width: 767px) {
  div.point-list {
    display: block;
  }

  div.point-list dt {
    margin-bottom: 5px; 
  }
}


div.history-list {
  display: flex;
  align-items: flex-start;
  margin: 0 0 5px;
}

div.history-list dt {
  flex: 0 0 70px; /* 項目名（dt）の幅を150pxに固定 */
  font-weight: bold;
}

div.history-list dd {
  flex-grow: 1; /* 内容（dd）が残りの幅を全て使う */
}

/* スマホ表示（画面幅767px以下） */
@media screen and (max-width: 767px) {
  div.history-list {
    display: block;
  }
  div.history-list dt {
    margin-bottom: 0px; 
  }
  div.history-list dd {
    margin-bottom: 15px; 
  }
}


div.general-list {
  display: flex;
  align-items: flex-start;
  margin: 0 0 5px;
}

div.general-list dt {
  flex: 0 0 150px; /* 項目名（dt）の幅を150pxに固定 */
  font-weight: bold;
}

div.general-list dd {
  flex-grow: 1; /* 内容（dd）が残りの幅を全て使う */
}

/* スマホ表示（画面幅767px以下） */
@media screen and (max-width: 767px) {
  div.general-list {
    display: block;
  }
  div.general-list dt {
    margin-bottom: 0px; 
  }
  div.general-list dd {
    margin-bottom: 15px; 
  }
}


.access_gmap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
}

.access_gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.clinic-treatment-time table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid rgba(204, 192, 163, 0.5);
    margin-bottom: 5px;
}
.clinic-treatment-time table th,
.clinic-treatment-time table td {
    border-bottom: 1px solid rgba(204, 192, 163, 0.5);
    padding: 0.5em;
    font-size: 0.9rem;
    text-align: center;
}
.clinic-treatment-time table th:first-child,
.clinic-treatment-time table td:first-child {
    text-align: left;
}
.clinic-treatment-time table td span {
    font-size: 0.9rem;
}
.clinic-treatment-time table .mark {
    color: rgb(104, 193, 173);
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.clinic-treatment-time p.table-hosoku {
   font-size: 0.9rem;
}
.clinic-treatment-time p.table-hosoku span {
   font-size: 0.9rem;
}


/* ---------------------------
--------------------------------
    　　ページタイトル・MV
--------------------------------
------------------------------- */

.page-mv-wrapper {
    position: relative;
}
.page-mv {
  width: 100%;
  height: 45vh; /* ビューポートの高さの100%に設定 */
  overflow: hidden; /* 子要素がはみ出す場合は隠す */
  position: relative;
  z-index: 1;
  margin-bottom: 100px;
  display: flex; /* 子要素（擬似要素とテキスト）をFlexboxで配置 */
  justify-content: center; /* 主軸（横方向）で中央寄せ */
  align-items: center; /* 交差軸（縦方向）で中央寄せ */
  position: relative; /* 子要素を相対配置するために必要 */
}
.page-mv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(204, 192, 163, 0.3);
    z-index: 2; /* 画像より上に配置 */
}
.page-mv .mv-text {
    position: absolute;
    z-index: 3; /* オーバーレイより上に配置 */
    color: white; /* 文字色を白に設定 */
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}
.page-mv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mv-text {
    font-size: clamp(1.6rem, 1.0rem + 1.8vw, 2.4rem); line-height: 1.3;
    font-weight: 600;
}
.mv-text span {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 1.2rem;
  display: block;
  letter-spacing: 1px;
}

/* 画面幅が1360px以上の時のスタイル */
@media (min-width: 1360px) {
  .page-mv {
    height: 45vh; /* 例として高さを720pxに設定 */
    margin-bottom: 60px;
  }
}

/* 画面幅が768px以下の時のスタイル */
@media (max-width: 768px) {

.page-mv {
    height: 34vh;
    margin-bottom: 60px;
}
.page-mv .mv-text {
    line-height: 1.4;
    width: 100%;
}
.mv-text {
    font-size: 1.6rem;
}
.mv-text span {
  font-size: 0.9rem;
}


}






/* ---------------------------
--------------------------------
    　　　　箱の大きさ
--------------------------------
------------------------------- */

.fullsizewrapper {
    width: 100%;
    margin: 120px auto 120px;
}
.justsizewrapper {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
}
.justsizewrapper-mini {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 768px) {

.fullsizewrapper {
    margin: 50px auto 50px;
}
.justsizewrapper {
    width: 85%;
}
.justsizewrapper-mini {
    width: 85%;
}

}






h3 span.titlecard {
    display: inline-block;
    font-size: 0.9rem;
    padding: 3px 8px;
    color: #fff;
    background: rgb(104, 193, 173);
    border-radius: 3px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    margin-right: 10px;
    margin-bottom: 8px;
    transform: translateY(-5px);
}
h3 span.titlecard-circle {
    /* 円を維持するための変更点 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;  /* 固定幅を指定 */
    height: 28px; /* 固定高さを指定 (幅と同じ値) */

    /* 元のスタイル */
    font-size: 0.9rem;
    color: #fff;
    background: rgb(104, 193, 173);
    border-radius: 50%;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    margin-right: 10px;
    margin-bottom: 0px;
    transform: translateY(-5px);
}



/* ---------------------------
--------------------------------
    　　　横並びリスト
--------------------------------
------------------------------- */


ul.itemlists2,
ul.itemlists3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto 0;
}
ul.itemlists3::after {
    content: "";
    width: 30%;
}
ul.itemlists2::after {
    content: "";
    width: 47%;
}
ul.itemlists2 li {
    flex-basis: 47%;
    margin-bottom: 60px;
}
ul.itemlists3 li {
    flex-basis: 30%;
    margin-bottom: 60px;
}
ul.itemlists3 li .feature-list li {
    margin-bottom: 15px;
}

ul.itemlists2 p.reason-number, ul.itemlists3 p.reason-number {
    text-align: center;
    font-size: 2.2rem; /* 数字を少し大きくする */
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    position: relative;
    margin-bottom: 30px;
}
ul.itemlists2 p.reason-number:before, ul.itemlists3 p.reason-number:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    display: inline-block;
    width: 3.5rem;
    height: 4px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* 修正箇所 */
    background: repeating-linear-gradient(
        -45deg,
        rgb(104, 193, 173),
        rgb(104, 193, 173) 4px,
        transparent 4px,
        transparent 8px
    );
    /* 線の長さを調整する場合は以下を使用 */
    /* width: 4rem; */
    border-radius: 9999px;
}

@media (max-width: 768px) {

ul.itemlists2,
ul.itemlists3 {
    flex-direction: column; /* アイテムを縦に並べる */
    justify-content: center; /* 中央寄せにする（任意） */
    align-items: center; /* 中央寄せにする（任意） */
}

ul.itemlists2 li,
ul.itemlists3 li {
    flex-basis: 100%; /* 各アイテムを幅いっぱいに広げる */
    width: 100%; /* flex-basisのサポートがないブラウザ向け */
    margin: 0 auto;
    margin-bottom: 40px; /* アイテム間の余白を追加 */
}
ul.itemlists3 li .feature-list li {
    margin-bottom: 15px;
}

}




/* ---------------------------
--------------------------------
    　　　画像の縦横比
--------------------------------
------------------------------- */


figure.ar16 {
    position: relative;
    width: 100%;
    padding-top: 70%;
    overflow: hidden; /* はみ出た部分を隠す */
}
figure.ar16 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

figure.ar100 {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 9 / 16 * 100 = 56.25 */
    overflow: hidden; /* はみ出た部分を隠す */
}
figure.ar100 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* ---------------------------
--------------------------------
    feature-box
--------------------------------
------------------------------- */

.feature-box {
    width: 90%;
    max-width: 1200px;
    padding: 80px;
    border-radius: 10px;
    background: #f4f2ed;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
.feature-box {  
    padding: 30px;
}
}




/* ---------------------------
--------------------------------
    画像50%（メッセージ・列挙）
--------------------------------
------------------------------- */


.img50-txt40 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}
.img50-txt40 .imgbox {
    width: 50%;
    order: 1;
}
.img50-txt40 .txtbox {
    width: 40%;
    margin-left: 5%;
    order: 2;
}

.txt40-img50 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
}
.txt40-img50 .txtbox {
    width: 40%;
    margin-right: 5%;
    order: 1;
}
.txt40-img50 .imgbox {
    width: 50%;
    order: 2;
}

@media (max-width: 768px) {
  .img50-txt40,
  .txt40-img50 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .img50-txt40 .txtbox,
  .txt40-img50 .txtbox {
    width: 100%;
    margin: 0 auto;
    order: 2;
  }

  .img50-txt40 .imgbox,
  .txt40-img50 .imgbox {
    width: 100%;
    margin:0 auto 30px;
    order: 1;
  }
}




/* ---------------------------
--------------------------------
    　　画像が60%（冒頭系）
--------------------------------
------------------------------- */


.img60-txt30 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.img60-txt30 .imgbox {
    width: 60%;
    order: 1;
}
.img60-txt30 .txtbox {
    width: 30%;
    margin-left: 5%;
    order: 2;
}

.txt30-img60 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}
.txt30-img60 .txtbox {
    width: 30%;
    margin-right: 5%;
    order: 1;
}
.txt30-img60 .imgbox {
    width: 60%;
    order: 2;
}


@media (max-width: 768px) {
  .img60-txt30,
  .txt30-img60 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .img60-txt30 .txtbox,
  .txt30-img60 .txtbox {
    width: 85%;
    margin: 0 auto;
    order: 2;
  }

  .txt30-img60 .imgbox {
    width: 92.5%;
    margin: 0 0 30px 7.5%;
    order: 1;
  }
  .img60-txt30 .imgbox {
    width: 92.5%;
    margin: 0 7.5% 30px 0;
    order: 1;
  }

  .firstbox .txt30-img60 .imgbox {
    order: 2;
    margin: 0 0 0 7.5%;
  }
  .firstbox .txt30-img60 .txtbox {
    order: 1;
  }

}



/* ---------------------------
--------------------------------
    画像とテキストが半々くらい
--------------------------------
------------------------------- */


.img48-txt47 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}
.img48-txt47 .imgbox {
    width: 48%;
    order: 1;
}
.img48-txt47 .txtbox {
    width: 47%;
    margin-left: 5%;
    order: 2;
}

.txt47-img48 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
}
.txt47-img48 .txtbox {
    width: 47%;
    margin-right: 5%;
    order: 1;
}
.txt47-img48 .imgbox {
    width: 48%;
    order: 2;
}

@media (max-width: 768px) {
  .img48-txt47,
  .txt47-img48 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .img48-txt47 .txtbox,
  .txt47-img48 .txtbox {
    width: 100%;
    margin: 0 auto;
    order: 2;
  }

  .img48-txt47 .imgbox,
  .txt47-img48 .imgbox {
    width: 100%;
    margin:0 auto 30px;
    order: 1;
  }
}



/* ---------------------------
--------------------------------
        　フローリスト
--------------------------------
------------------------------- */


.img25-txt70 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.img25-txt70 .imgbox {
    width: 25%;
    order: 1;
}
.img25-txt70 .txtbox {
    width: 70%;
    margin-left: 5%;
    order: 2;
}

@media (max-width: 768px) {

.img25-txt70 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.img25-txt70 .imgbox {
    width: 80%;
    margin: 0 auto 30px;
    order: 1;
}
.img25-txt70 .txtbox {
    width: 100%;
    margin: 0 auto;
    order: 2;
}

}




/* ---------------------------
--------------------------------
        用語説明・注意事項
--------------------------------
------------------------------- */


.title30-txt65 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}
.title30-txt65 .titlebox {
    width: 30%;
    order: 1;
}
.title30-txt65 .txtbox {
    width: 65%;
    margin-left: 5%;
    order: 2;
}

@media (max-width: 768px) {

.title30-txt65 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.title30-txt65 .titlebox {
    width: 100%;
    margin: 0 auto 20px;
    order: 1;
}
.title30-txt65 .txtbox {
    width: 100%;
    margin: 0 auto;
    order: 2;
}

}





/* ---------------------------
--------------------------------
           　料金表
--------------------------------
------------------------------- */

.price-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 0;
    border-bottom: 1px solid rgba(204, 192, 163, 0.5);
}
.price-list .price-name {
    width: 30%;
    margin-right: 3%;
    order: 1;
    background-color: #f4f2ed;
    height: auto;
    padding: 2rem 1rem;
    font-weight: bold;
}
.price-list .price-exp {
    width: 34%;
    order: 2;
    padding: 1rem 0;
    font-size: 0.9rem;
}
.price-list .price-price {
    width: 30%;
    margin-left: 3%;
    order: 3;
    padding: 1rem;
    text-align: right;
    font-size: 0.8rem;
}
.price-list .price-price span {
    font-size: 1.1rem;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    padding: 0 3px;
}

@media (max-width: 768px) {
  .price-list {
    flex-direction: column; /* 要素を縦に並べる */
    border-bottom: none; /* 各行の下線を非表示に */
    margin-bottom: 1rem; /* 各料金ブロックの下に余白を追加 */
  }

  .price-list .price-name,
  .price-list .price-exp,
  .price-list .price-price {
    width: 100%; /* 各要素を幅いっぱいに広げる */
    margin: 0 auto;
    padding: 1rem 1rem;
    order: unset; /* orderの指定をリセット */
  }

  .price-list .price-name {
    font-weight: bold; /* 料金名を目立たせる */
    border-bottom: 1px solid rgba(204, 192, 163, 0.5);
    height: auto;
  }
  
  .price-list .price-exp {
    /* 必要であればここにもスタイルを追加 */
  }
  
  .price-list .price-price {
    text-align: right; /* テキストを左寄せに戻す */
    font-size: 0.9rem;
    padding-top: 0;
  }
  .price-list .price-price span {
    font-size: 1.3rem;
  }
}





/* ---------------------------
--------------------------------
           　一覧表
--------------------------------
------------------------------- */

.overview-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 0;
    border-bottom: 1px solid rgba(204, 192, 163, 0.5);
}
.overview-list .overview-name {
    width: 30%;
    margin-right: 3%;
    order: 1;
    background-color: #f4f2ed;
    height: auto;
    padding: 2rem 1rem;
    font-weight: bold;
}
.overview-list .overview-exp {
    width: 67%;
    order: 2;
    padding: 1rem 0;
}

@media (max-width: 768px) {
  .overview-list {
    flex-direction: column; /* 要素を縦に並べる */
    border-bottom: none; /* 各行の下線を非表示に */
    margin-bottom: 1rem; /* 各料金ブロックの下に余白を追加 */
  }
  .overview-list .overview-name,
  .overview-list .overview-exp {
    width: 100%; /* 各要素を幅いっぱいに広げる */
    margin: 0 auto;
    padding: 1rem 1rem;
    order: unset; /* orderの指定をリセット */
  }
  .overview-list .overview-name {
    font-weight: bold; /* 料金名を目立たせる */
    border-bottom: 1px solid rgba(204, 192, 163, 0.5);
    height: auto;
  }
  .overview-list .overview-exp {
    /* 必要であればここにもスタイルを追加 */
  }
  
}





/* ---------------------------
--------------------------------
           table比較表
--------------------------------
------------------------------- */


/* サンプルtable ---------------------

<div class="responsive-table">
  <div class="responsive-table-header">
    <div class="responsive-table-cell">項目</div>
    <div class="responsive-table-cell">素材A</div>
    <div class="responsive-table-cell">素材B</div>
    <div class="responsive-table-cell">素材C</div>
  </div>
  <div class="responsive-table-row">
    <div class="responsive-table-cell" data-label="項目">項目1</div>
    <div class="responsive-table-cell" data-label="素材A">データ1A</div>
    <div class="responsive-table-cell" data-label="素材B">データ1B</div>
    <div class="responsive-table-cell" data-label="素材C">データ1C</div>
  </div>
  <div class="responsive-table-row">
    <div class="responsive-table-cell" data-label="項目">項目2</div>
    <div class="responsive-table-cell" data-label="素材A">データ2A</div>
    <div class="responsive-table-cell" data-label="素材B">データ2B</div>
    <div class="responsive-table-cell" data-label="素材C">データ2C</div>
  </div>
  <div class="responsive-table-row">
    <div class="responsive-table-cell" data-label="項目">項目3</div>
    <div class="responsive-table-cell" data-label="素材A">データ3A</div>
    <div class="responsive-table-cell" data-label="素材B">データ3B</div>
    <div class="responsive-table-cell" data-label="素材C">データ3C</div>
  </div>
</div>

------------------------------ */

/* PC表示（デフォルト） */
.responsive-table {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.responsive-table-header,
.responsive-table-row {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.responsive-table-header .responsive-table-cell,
.responsive-table-row .responsive-table-cell {
  padding: 1rem;
  flex: 1; /* 各セルが均等な幅を占める */
  border-right: 1px solid #ddd;
}

.responsive-table-header .responsive-table-cell:last-child,
.responsive-table-row .responsive-table-cell:last-child {
  border-right: none;
}

.responsive-table-header {
  background-color: #e4edea;
  font-weight: bold;
}
.responsive-table-scroll-hint {
    display: none;
}

/* スマホ表示（ブレークポイントは適宜調整） */
@media (max-width: 768px) {
  .responsive-table {
    /* テーブル全体を横スクロール可能にする */
    overflow-x: auto;
  }
  .responsive-table-header,
  .responsive-table-row {
    /* flexboxの折り返しを無効にし、横並びを維持 */
    flex-wrap: nowrap;
    /* テーブル全体の幅を指定し、横スクロールを強制する */
    min-width: 700px; /* 必要に応じて調整してください */
  }
  .responsive-table-container {
    position: relative;
    overflow-x: auto;
}

.responsive-table-container::before,
.responsive-table-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px; /* グラデーションの幅 */
    pointer-events: none; /* クリックやタップを透過させる */
    z-index: 10;
}

.responsive-table-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.responsive-table-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}
.responsive-table-scroll-hint {
    display: block;
    text-align: right;
    font-size: 0.8em;
    color: #666;
    margin-bottom: 5px;
}

}




p.jp-name {
    box-sizing: border-box;
    font-size: 1.55rem;
    border-top-left-radius: 5px;
}
p.jp-name span.katagaki {
    font-size: 0.9rem;
    display: block;
}
p.jp-name span.en-name {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 0.65rem;
    display: inline-block;
    padding-left: 10px;
}





/*　サイドバー　*/
.wp-block-group__inner-container {
    margin-bottom: 50px;
}

ul.wp-block-categories-list {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
ul.wp-block-categories-list:after {
    content: "";
    width: 30%;
}
ul.wp-block-categories-list li {
    width: 30%;
    margin-bottom: 20px;
}
ul.wp-block-categories-list li.cat-item a {
    display: block;
    text-align: center;
    border-radius: 9999px;
    padding: 10px 15px;
    background: rgb(104, 193, 173);
    color: #fff;
    font-size: 1.0rem;
}
@media (max-width: 768px) {
ul.wp-block-categories-list {
    width: 100%;
    box-sizing: border-box;
    display: block;
    justify-content: space-between;
}
ul.wp-block-categories-list li {
    width: 85%;
    margin: 0 auto 20px;
}
}

ul.wp-block-latest-posts__list {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}
ul.wp-block-latest-posts__list li {
    width: 30%;
}
ul.wp-block-latest-posts__list li img {
    border-radius: 5px;
}
ul.wp-block-latest-posts__list li .wp-block-latest-posts__featured-image {
    margin-bottom: 15px;
}
@media (max-width: 768px) {
ul.wp-block-latest-posts__list {
    width: 100%;
    box-sizing: border-box;
    display: block;
    justify-content: space-between;
}
ul.wp-block-latest-posts__list li {
    width: 85%;
    margin: 0 auto 20px;
}
}

.wp-block-heading {
    font-size: clamp(1.45rem, 0.7rem + 1.0vw, 1.7rem);
    margin-bottom: 30px;
}
@media (max-width: 768px) {
.wp-block-heading {
    font-size: 1.45rem;
}
}



/*　ページネーション　*/

/* ページネーション全体を中央寄せ */
.navigation.pagination {
    text-align: center;
    margin-top: 2em; /* 上部の余白 */
    margin-bottom: 2em; /* 下部の余白 */
}

/* ページ番号のリンクとspan */
.page-numbers {
    display: inline-block; /* インライン要素をブロック要素として扱い、サイズを指定 */
    padding: 8px 12px;
    margin: 0 4px; /* ボタン同士の間隔 */
    border: 1px solid #ddd;
    border-radius: 5px; /* 角を丸くする */
    text-decoration: none; /* 下線をなくす */
    color: #333;
    background-color: #fff;
    transition: background-color 0.3s, color 0.3s; /* ホバー時のアニメーション */
}

/* 現在のページ番号 */
.page-numbers.current {
    background-color: rgb(104, 193, 173); /* メインカラー */
    color: #fff;
    border-color: rgb(104, 193, 173);
    font-weight: bold;
}

/* ホバー時のスタイル */
.page-numbers:hover {
    background-color: #f0f0f0;
    color: #000;
}

/* 現在のページ番号はホバーしても色が変わらないように */
.page-numbers.current:hover {
    background-color: rgb(104, 193, 173);
    color: #fff;
}

/* 「次へ」や「前へ」のリンク */
.nav-links .next,
.nav-links .prev {
    border-radius: 5px;
    padding: 8px 16px;
}
@media (max-width: 768px) {
    /* ページネーション全体 */
    .navigation.pagination {
        display: flex; /* Flexboxを使って配置を調整 */
        justify-content: center; /* 中央寄せ */
        flex-wrap: wrap; /* 画面幅が狭い場合は折り返す */
    }

    /* 各ページ番号のボタン */
    .page-numbers {
        font-size: 14px; /* フォントサイズを小さく */
        padding: 6px 10px; /* パディングを調整 */
        margin: 2px; /* ボタン同士の間隔を狭める */
    }

    /* 「次へ」や「前へ」のリンク */
    .nav-links .next,
    .nav-links .prev {
        width: 100%; /* 全幅に広げる */
        text-align: center;
        margin-top: 8px; /* 上部に余白 */
    }
}





/*　投稿ページ　*/

.entry-header-info {
    margin-bottom: 15px;
}
.entry-header-info span {
    padding-right: 15px;
}
@media (max-width: 768px) {
   .entry-header-info span {
    display: block;
    margin-bottom: 5px;
} 
}


.entry-content {
    margin-top: 100px;
}
@media (max-width: 768px) {
   .entry-content {
    margin-top: 40px;
}
}

.entry-content img {
    width: 100%;
    border-radius: 5px;
}

.entry-content figure {
    width: 100%;
    margin-bottom: 40px;
}

.entry-content h2 {
    font-size: 2.0rem;
    margin: 40px auto 40px;
    padding-bottom: 20px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-style: normal;
    border-bottom: 2px solid rgb(104, 193, 173);
}
.entry-content h2 span {
    font-size: 2.0rem;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.entry-content h3 {
    font-size: clamp(1.45rem, 0.7rem + 1.0vw, 1.7rem);
    margin: 50px auto 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(204, 192, 163, 1.0);
}
.entry-content h4 {
    font-size: clamp(1.1rem, 0.5rem + 0.8vw, 1.25rem);
    margin: 20px auto 20px;
    color: rgb(104, 193, 173);
}
.entry-content p {
    font-size: 1.0rem;
    margin: 0 auto 30px;
}
.entry-content li p {
    font-size: 1.0rem;
    margin: 0 auto 0;
}
.entry-content li {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 20px;
    margin-bottom: 15px;
}
.entry-content li strong {
    color: rgba(204, 192, 163, 1.0);
}

@media (max-width: 768px) {
   .entry-content h2 {
    font-size: 1.6rem;
}
.entry-content h2 span {
    font-size: 1.6rem;
}
}


.attachment-thumbnail {
    border-radius: 5px;
}

span.cat-links {
    display: block;
    margin-bottom: 10px;
}
span.cat-links a {
    color: rgb(104, 193, 173);
}



/* WEB予約フォーム */

/* --------------------------------------
 * Contact Form 7 全体のスタイル調整
 * -------------------------------------- */
.wpcf7 {
    max-width: 720px; /* フォームの最大幅 */
    margin: 0 auto;   /* 中央揃え */
    padding: 2em 0;
}

/* 各フォーム要素（pタグ）の間隔を調整 */
.wpcf7-form p {
    margin-bottom: 24px;
}

/* --------------------------------------
 * 入力フィールドの共通スタイル
 * (input, textarea, select)
 * -------------------------------------- */
.wpcf7-form-control:not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    color: #333;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; /* paddingとborderを幅に含める */
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* フィールドにフォーカスした時のスタイル */
.wpcf7-form-control:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):focus {
    outline: none;
    border-color: #0073aa; /* WordPressの標準カラーに合わせる例 */
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

/* プレースホルダーのスタイル */
.wpcf7-form-control::placeholder {
    color: #999;
}

/* テキストエリアの高さが可変になるように */
.wpcf7-form-control.wpcf7-textarea {
    resize: vertical;
    min-height: 150px;
}


/* --------------------------------------
 * ▼▼▼【重要】カスタムラジオボタン ▼▼▼
 * -------------------------------------- */

/* ラジオボタンのグループ全体 */
.wpcf7-radio {
    display: flex;
    gap: 20px; /* 項目間のスペース */
}

/* ① デフォルトのラジオボタンを非表示にする */
.wpcf7-radio input[type="radio"] {
    display: none;
}

/* ② ラベルのテキスト部分のスタイル */
.wpcf7-radio .wpcf7-list-item-label {
    position: relative;
    padding-left: 30px; /* アイコン分のスペースを確保 */
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
    line-height: 22px;
}

/* ③ カスタムラジオボタンの外枠（円）を作成 */
.wpcf7-radio .wpcf7-list-item-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background-color: #fff;
    transition: border-color 0.3s;
}

/* ④ 選択された時の内側の円を作成 */
.wpcf7-radio .wpcf7-list-item-label::after {
    content: '';
    position: absolute;
    left: 4px; /* (外枠のwidth - 内円のwidth) / 2 */
    top: 50%;
    transform: translateY(-50%) scale(0); /* 最初は非表示 */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgb(104, 193, 173);
    transition: transform 0.2s ease-in-out;
}

/* ⑤ inputがチェックされたら、::beforeと::afterのスタイルを変更 */
.wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label::before {
    border-color: rgb(104, 193, 173); /* 外枠の色を変更 */
}
.wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label::after {
    transform: translateY(-50%) scale(1); /* 内側の円を表示 */
}


/* --------------------------------------
 * ▼▼▼【重要】カスタムプルダウン (select) ▼▼▼
 * -------------------------------------- */
.wpcf7-form-control-wrap[data-name="subject"] {
    position: relative;
    display: block;
}

/* ① デフォルトの矢印を非表示にする */
.wpcf7-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px; /* 矢印のスペースを確保 */
}

/* ② カスタム矢印を作成 */
.wpcf7-form-control-wrap[data-name="subject"]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #666;
    pointer-events: none; /* 矢印部分がクリックできないようにする */
}


/* --------------------------------------
 * 送信ボタンのスタイル
 * -------------------------------------- */
.wpcf7-submit {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 20px auto 0;
    padding: 14px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(to right, rgb(104, 193, 173) 0%, rgb(60, 194, 130) 100%);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

/* 送信ボタンのホバーエフェクト */
.wpcf7-submit:hover {
    background-color: #005a87; /* 少し暗い色に */
    transform: translateY(-2px);
}

/* --------------------------------------
 * 必須タグのスタイル
 * -------------------------------------- */
span.hissu {
    display: inline-block;
    border-radius: 3px;
    background: rgba(204, 192, 163, 1.0);
    font-size: 0.8rem;
    padding: 3px 5px;
    margin-left: 5px;
    line-height: 1.0;
    color: #fff;
}

/* --------------------------------------
 * 電話とLINEのスタイル
 * -------------------------------------- */

.contact-box {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.contact-other {
    width: 100%;
    margin: 0 auto;
    padding: 3% 5% 5%; /* 上下に余白を追加 */
    background: url(assets/images/bg_beige.webp) repeat-y top center / 100% auto;
    background-color: rgb(104, 193, 173);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
}

/* リンクコンテナの設定 */
.contact-other_links {
    width: 100%;
    display: flex; /* 子要素を横並びに */
    justify-content: space-around; /* 均等に配置 */
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 0;
    box-sizing: border-box;
}

/* 共通のボタンデザイン */
.contact-other_links a {
    flex: 1; /* 幅を均等に */
    text-decoration: none;
    padding: 0.5em 0.5em;
    border: none; /* borderを削除 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    font-size: 1.0rem;
    color: #000;
    font-weight: bold;
    box-shadow: none;
    text-shadow: none;
}
.contact-other_links a svg {
    width: 24px;
    height: 24px;
}

/* 電話ボタンのコンテンツを横並びにするための新しいクラス */
.contact-other_links .tel-link {
    
}
.contact-other_links .tel-link .tel-content {
    display: flex;
    align-items: center;
    gap: 10px; /* SVGとテキスト間の隙間 */
}
.contact-other_links .tel-link .tel-content p {
    font-size: 1.6rem;
}
/* 電話番号のテキストに適用されていた不要なスタイルを削除 */
.contact-other_links .tel-link p span {
    text-shadow: none; /* text-shadowを無効化 */
}
.contact-other_links .tel-link p {
    color: #000;
}
.contact-other_links .tel-link svg {
    stroke: #000;
    width: 30px;
    height: 30px;
    transform: translateY(3px);
}
.contact-other_links .tel-link p.tel-link-number span {
    font-size: 2.4rem;
}

/* WEBボタンのデザイン */
.contact-other_links .line-link{
    background-color: #00b900;
    border-radius: 9999px; /* 左右を丸型に */
    color: #fff;
}
.contact-other_links .line-link svg {
    fill: #fff;
}
.contact-other_links .line-link p {
    font-size: 1.2rem;
}
.contact-other_links .line-link p span {
    font-size: 1.35rem;
}

@media (max-width: 768px) {
.contact-other {
    padding: 0% 5% 8%; /* 上下に余白を追加 */
}
}