@charset "UTF-8";

/* ============================================================
   AGA 共通パーツ — parts.css

   AGA TOP 用の style.css から、下層ページへ流用する共通パーツの
   スタイルだけを切り出したもの。

   style.css との違い:
     * グローバルリセット(*, html, body, img, ul, a)を含まない。
       旧 common.css 体系の下層ページに追加読み込みしても
       既存レイアウトを壊さないようにするため。
     * ページ固有セクション(MV/PLAN/REASON 等)を含まない。

   読み込み方:
     旧 common.css / import.css の「後」に読み込むこと。
     このファイルを読み込むページ = 新パーツを採用するページ。

   【重要】style.css との重複について
     本ファイルの各節は style.css(AGA TOP専用)に「同じ内容」が
     二重に存在する。対応は以下。

       1. STICKY CTA              … style.css「11. STICKY CTA」
       2. FOOTER                  … style.css「10. FOOTER」
       3. BREADCRUMB/FOOTER BANNER… style.css のパンくず節と
                                     「9. FOOTER BANNER」
       4. HEADER                  … style.css「1. HEADER」
       ＋ 上記に対応する PC メディアクエリ内の指定

     → 変更するときは style.css も必ず同時に直すこと。
       片方だけ直すと AGA TOP と下層ページで表示がズレる。
       (実際に「サブメニュー文字色」「オーバーレイ位置」で発生した)

     将来的には本ファイルへ一本化する予定(AGA TOP にも parts.css を
     読ませ、style.css から該当節を削除する)。AGA TOP 全体の再確認が
     必要なため別案件として切り出している。

   収録パーツ:
     1. STICKY CTA (スマホ追従CTA)
     2. FOOTER     (site-footer)
     ※ ヘッダーは未収録(段階導入のため)

   参照元: /operation/aga/common/202607/css/style.css
     - 10. FOOTER            (style.css L1890-2056)
     - 11. STICKY CTA        (style.css L2057-2104)
     - PC Responsive の該当分 (style.css L2110-2480)

   セレクタのスコープについて:
     style.css の footer 節は .ft_nav / .tog_icn / .dropdown 等を
     素のまま書いているが、本ファイルでは全て
     「#footer.site-footer」配下にスコープしている。
     旧 common.css 体系のページでは同名クラスが旧ヘッダー等でも
     使われており、素のセレクタだとフッター外へ波及するため。
   ============================================================ */

/* ----------------------------------------------------------
   Design Tokens
   style.css の :root と同値。旧 common.css に同名の
   カスタムプロパティは存在しないため衝突しない。
---------------------------------------------------------- */
:root {
  --gold:     #bba171;
  --gold-btn: #a17114;
  --beige:    #e0d8ce;
  --white:    #ffffff;
  --blue:     #0077e1;
}

/* ============================================================
   4. HEADER  (sp_header)

   新ヘッダー(202607/inc/header.php)は
   <header class="sp_header" id="js-header">。
   旧ヘッダーの id="header" とは別IDのため、旧 common.css の
   「#header 配下」ルール(.h_nav 45件 / .logo_mark 3件 /
   .tb_blog 4件 / .ico 6件 など)は当たらない。

   問題になるのは素のクラスで書かれた旧ルール:
     .g_navi { display:flex; height:58px; background:#0077e1 } (L711)
     @media SP .g_navi { height:auto; flex-direction:column;
                         background:#000 }                    (L2821)
     .g_navi > ul > li { float:left; margin-left:32px }        (L730)
     @media SP .g_navi ul { display:flex;
                            justify-content:space-between }    (L2479)
     .btn-toggle-menu / .line / .icon / .tel 系               (計60件超)

   対処は FOOTER と同じ設計:
     #js-header.sp_header を起点(1,1,0)にスコープし、
     子孫を足して 1,2,x 以上で旧ルールを上回る。
     加えてヘッダー配下限定のリセットを先頭に置く。

   .switch-pc / .switch-sp はページ本文でも使われる汎用クラスの
   ため、必ずヘッダー配下にスコープすること(素で書くと本文の
   出し分けを壊す)。

   参照元: style.css L85-338 / L2125-2205 / L2288-2312
   ============================================================ */

/* ----------------------------------------------------------
   4-0. ヘッダー限定リセット
   float:none は .g_navi > ul > li{float:left} の打ち消し。
---------------------------------------------------------- */
#js-header.sp_header,
#js-header.sp_header *,
#js-header.sp_header *::before,
#js-header.sp_header *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  float: none;
}
#js-header.sp_header ul,
#js-header.sp_header ol {
  list-style: none;
}
#js-header.sp_header a {
  color: inherit;
  text-decoration: none;
}
#js-header.sp_header img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------
   4-1. ヘッダーバー (SP基準)
---------------------------------------------------------- */
/* 追従方式について

   style.css(AGA TOP)は position:sticky。下層ページでも同じ指定に
   していたが追従しなかった。計算値は sticky になっており、祖先の
   overflow / transform、body クラス(.menu_grow)、重なり順のいずれにも
   阻害要因が無いことを確認したうえで、原因を特定できなかった。

   ヘッダーがページ最上部にある以上、fixed でも見た目の挙動は
   sticky と同一になるため、確実性を優先して fixed に切り替える。
   sticky と違い祖先要素の条件に左右されない。

   fixed は流れから外れるため、直後のコンテンツをヘッダー高さ分
   押し下げる必要がある(下の #wrapper への padding-top)。

   → AGA TOP(style.css)は sticky のままで、ここだけ実装が分岐する。
     将来 parts.css へ一本化する際は、どちらに寄せるか要判断。 */
#js-header.sp_header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  height: 60px;
  background: #000;
}

/* fixed 化したヘッダー(60px)の分だけコンテンツを押し下げる。

   ヘッダーは #wrapper の外(body直下)に置いているが、この padding は
   ヘッダーが #wrapper の内側にある構成でも同じ結果になる
   (fixed なのでヘッダー自身は padding の影響を受けない)。

   ヘッダー高さは SP/PC とも 60px のためメディアクエリ不要。
   #wrapper を持たないページで parts.css を使う場合は、
   そのページ側で同等の余白確保が必要。 */
#wrapper {
  padding-top: 60px;
}
#js-header.sp_header .sp_header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 12.5px;
  height: 60px;
  background: #000;
}
#js-header.sp_header .logo_mark {
  display: flex;
  align-items: flex-end;
  height: 100%;
  max-width: 62.05px;
  flex-shrink: 0;
}
/* ロゴサイズは本サイト(fwpテーマ header)の指定に合わせる */
#js-header.sp_header .logo_mark img {
  width: 62.05px;
  height: auto;
}
@media screen and (max-width: 979px) {
  #js-header.sp_header .logo_mark img {
    width: 57.1px;
  }
}

#js-header.sp_header .h_nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
#js-header.sp_header .h_nav .btn-toggle-menu {
  order: 99;
}
#js-header.sp_header .switch-pc {
  display: none;
}
#js-header.sp_header .switch-sp {
  display: flex;
  align-items: center;
}
#js-header.sp_header .menu_iconsp {
  display: flex;
  align-items: center;
  gap: 16px;
}
#js-header.sp_header .menu_iconsp li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
#js-header.sp_header .img-svg,
#js-header.sp_header .menu_iconsp .img-svg {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
#js-header.sp_header .mail-icon-svg {
  display: block;
  flex-shrink: 0;
}

/* ハンバーガーボタン

   旧 common.css は絶対配置で組んでいる:
     .btn-toggle-menu { position:absolute; top:20px; right:0 }   (L526)
     @media SP        { top:15px; right:20px }                   (L2727)
     .btn-toggle-menu .line { position:absolute; left:0 }        (L538)
     .line.line-1 { top:0 } / .line-2 { top:50%; margin-top:-1px }
     .line-3 { top:100%; margin-top:-1px }                       (L554-)

   style.css は flex(column + gap)で組む前提のため、position 系を
   明示的に静的へ戻さないと、ボタンが流れから外れて電話アイコンに
   重なり、3本線も top:0/50%/100% で配置されて✕にならない。
   .line.line-N は (0,3,0) だが本セレクタは (1,3,0) で上回る。 */
#js-header.sp_header .btn-toggle-menu {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
#js-header.sp_header .btn-toggle-menu .line {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 0;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gold);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* 旧 common.js(L45-46)は .btn-toggle-menu のクリックで .collapsed を
   付ける。document への委譲バインドのため、フッターの .menu-sp-tog の
   ようにクラスを外して止めることができない。

   旧CSSの .collapsed 変形は絶対配置前提:
     .collapsed .line-1 { transform: translateY(8px) rotate(45deg) }  (L570)
     .collapsed .line-3 { transform: translateY(-7px) rotate(-45deg) } (L580)
     @media SP .collapsed .line-1 { translateY(10px) … }              (L2740)
   flex(gap:5px / height:2px)前提の新実装と競合し、✕が欠けて見える。

   .collapsed 側を無効化し、開閉の見た目は is-active だけで制御する。
   詳細度は (1,3,0) で旧 (0,3,0) を上回る。
   直後の .is-active 群も同値 (1,3,0) だが、後に書くことで勝たせている。 */
#js-header.sp_header .btn-toggle-menu.collapsed .line-1,
#js-header.sp_header .btn-toggle-menu.collapsed .line-2,
#js-header.sp_header .btn-toggle-menu.collapsed .line-3 {
  transform: none;
  opacity: 1;
}

#js-header.sp_header .btn-toggle-menu.is-active .line-1 {
  transform: translateY(7px) rotate(45deg);
}
#js-header.sp_header .btn-toggle-menu.is-active .line-2 {
  opacity: 0;
  transform: scaleX(0);
}
#js-header.sp_header .btn-toggle-menu.is-active .line-3 {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----------------------------------------------------------
   4-2. ハンバーガーメニュー (g_navi)
   display / height / background は旧 .g_navi の打ち消しを兼ねる。
---------------------------------------------------------- */
#js-header.sp_header .g_navi {
  display: block;
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  background: #000;
  border-top: 1px solid rgba(187,161,113,0.3);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 99;
  padding: 0;
}
#js-header.sp_header .g_navi.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#js-header.sp_header .g_navi-overlay {
  position: fixed;
  inset: 60px 0 0 0;
  background: rgba(0,0,0,0.4);
  z-index: 98;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
}
#js-header.sp_header .g_navi-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#js-header.sp_header .g_navi-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px 16px 12px;
  height: 44px;
  background: var(--blue);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}
/* ホバー/フォーカス時も背景は青のまま(--blue)とする。
   以前は var(--gold-dk) に変化させていたが、変えない方針に変更。
   outline は打ち消していないため、キーボード操作時は
   ブラウザ既定のフォーカスリングが出る(WCAG 2.4.7)。
   ※ style.css 側も同じ状態にしてある。 */

#js-header.sp_header .g_navi-list {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
#js-header.sp_header .g_navi-item {
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
#js-header.sp_header .g_navi-item--accordion.is-open > .g_navi-toggle {
  color: var(--gold);
  border-left: 2px solid var(--gold);
  padding-left: 14px;
}
#js-header.sp_header .g_navi-link {
  display: block;
  padding: 14px 16px;
  color: var(--white);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
#js-header.sp_header .g_navi-link:hover,
#js-header.sp_header .g_navi-link:focus-visible {
  background: rgba(187,161,113,0.12);
  color: var(--gold);
  outline: none;
}
#js-header.sp_header .g_navi-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--white);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
}
#js-header.sp_header .g_navi-toggle:hover,
#js-header.sp_header .g_navi-toggle:focus-visible {
  color: var(--gold);
  outline: none;
}
#js-header.sp_header .g_navi-toggle-icon {
  position: relative;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
#js-header.sp_header .g_navi-toggle-icon::before,
#js-header.sp_header .g_navi-toggle-icon::after {
  content: '';
  position: absolute;
  background: var(--gold);
  transition: transform 0.2s ease;
}
#js-header.sp_header .g_navi-toggle-icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}
#js-header.sp_header .g_navi-toggle-icon::after {
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}
#js-header.sp_header .g_navi-item--accordion.is-open .g_navi-toggle-icon::after {
  transform: translateX(-50%) scaleY(0);
}
#js-header.sp_header .g_navi-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.09);
  transition: max-height 0.25s ease;
}
#js-header.sp_header .g_navi-item--accordion.is-open .g_navi-sublist {
  max-height: 600px;
}
#js-header.sp_header .g_navi-sublink {
  display: block;
  padding: 12px 16px 12px 28px;
  /* style.css は rgba(255,255,255,0.85)(対 #000 で 15.3:1)。
     フッターと同様、第1階層(21:1)に揃えるため不透明の白にする。 */
  color: var(--white);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s ease, color 0.2s ease;
}
#js-header.sp_header .g_navi-sublink:hover,
#js-header.sp_header .g_navi-sublink:focus-visible {
  background: rgba(187,161,113,0.12);
  color: var(--gold);
  outline: none;
}
#js-header.sp_header .g_navi-sublist li:last-child .g_navi-sublink {
  border-bottom: none;
}

/* ============================================================
   3. BREADCRUMB / FOOTER BANNER

   AGA TOP ではこの2ブロックを index.php に直書きし、
   その下で 202607/inc/footer.php を include している。
   下層ページでも同じ構成を取るため、対応スタイルをここに置く。

   パンくずの基本ルールは旧 common.css(L2285-2331)と同一。
   (style.css 側に「現行TOP と同スタイル」と明記されている)
   そのため差分となる SP/PC 指定と .inner の横幅のみを扱う。

   参照元: style.css L339-374 / L1570-1587 / L1870-1886 /
           L58-80 / L2435
   ============================================================ */

/* --- パンくず: .inner の横幅(旧CSSに該当指定なし) --- */
#ft_breadcrumb .inner {
  max-width: 390px;
  margin: 0 auto;
  padding: 0 17px;
}

/* --- フッターバナー ---
   旧 footer.php は同等の指定を inline <style> で持っていたが、
   include を差し替えると失われるため、ここで受け持つ。 */
.footer_bnr {
  background: #000;
  padding-top: 20px;
}
/* 横幅は max-width ではなく width で押さえる。

   style.css の .inner は max-width:390px(width指定なし)のため
   .inner-fluid{max-width:none} で全幅にできるが、
   旧 common.css の .inner は
     .inner { width:1150px; padding:0 15px }                  (L199)
     @media(max-width:768px){ .inner{ max-width:100%; padding:0 } }
   と「width:1150px を SP で max-width:100% により抑える」作り。
   ここで max-width:none を当てると抑制が外れて 1150px が復活し、
   SPでバナーがビューポートを超えて横スクロールが発生する。 */
.footer_bnr .inner,
.footer_bnr .inner-fluid {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.footer_bnr .inner a {
  display: block;
}
.footer_bnr .inner img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   2. FOOTER  (site-footer)

   新フッター(202607/inc/footer.php)は id="footer" class="site-footer"。
   旧 common.css にも #footer / .ft_nav / .tog_icn / .dropdown の
   ルールがあり、そのまま新マークアップに当たってしまう。

   詳細度の設計:
     旧の最大は #footer .ft_home a (1,1,1)。
     本ファイルは #footer.site-footer を起点(1,1,0)とし、
     子孫を足すことで 1,2,x 以上になり旧ルールを上回る。
     打ち消しきれない残留プロパティ対策として、
     フッター配下だけに効くリセットを先頭に置く。

   参照元: style.css L1890-2056 / L2440-2477
   ============================================================ */

/* ----------------------------------------------------------
   2-0. フッター限定リセット

   style.css がグローバルリセット前提で書かれているため、
   その前提をフッター配下にのみ再現する。
   #付きで (1,1,0) あるため、旧の .ft_nav li a (0,1,2) 等を上回る。
---------------------------------------------------------- */
#footer.site-footer,
#footer.site-footer *,
#footer.site-footer *::before,
#footer.site-footer *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#footer.site-footer ul,
#footer.site-footer ol {
  list-style: none;
}
#footer.site-footer a {
  color: inherit;
  text-decoration: none;
}
#footer.site-footer img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------
   2-1. フッター本体 (SP基準)
---------------------------------------------------------- */
#footer.site-footer {
  background: #000;
  padding-bottom: 8px;
}
#footer.site-footer .inner {
  max-width: 390px;
  margin: 0 auto;
  padding: 0;
}

/* 旧 common.css の div レベル指定の打ち消し。

   style.css は .ft_nav / .ft_sns の「箱そのもの」には
   SP時なにも指定しない(既定のブロック配置)前提で書かれている。
   一方 旧 common.css は
     .ft_nav { display:flex; margin-bottom:230px }        (L2353)
     .ft_sns { position:absolute; bottom:50px; left:50%;
               transform:translate(-50%,0) }              (L2401)
   を持ち、これが新マークアップにも当たる。
   結果、SPで ft_nav が3カラムになり、ft_sns が流れから外れて
   .ft_sns ul の margin-top:92px が効かず、両者が詰まって見える。

   AGA TOP と同じ既定状態へ戻す。PC の flex 化は
   下部のメディアクエリで別途指定している。 */
#footer.site-footer .ft_nav {
  display: block;
  margin: 0;
}
#footer.site-footer .ft_sns {
  position: static;
  bottom: auto;
  left: auto;
  transform: none;
  margin: 0;
  text-align: left;
}
#footer.site-footer .ft_sns li {
  float: none;
}

/* 旧 common.css(L3846 / SP)の
     #footer .ft_home a, .ft_nav li a { border-bottom:1px solid #666 }
   がリンク要素にも線を引くため、style.css が ul / > ul > li に
   引く線と二重になり、太さが不均一に見える。
   style.css は「線は ul と li が持つ」設計なのでリンク側を解除する。
   ヘッダー限定リセットは border を扱わないため個別に指定が必要。 */
#footer.site-footer .ft_nav a {
  border: 0;
}

#footer.site-footer .ft_nav ul {
  border-bottom: 1px solid #666;
}
#footer.site-footer .ft_nav > ul > li {
  border-bottom: 1px solid #666;
}
#footer.site-footer .ft_nav > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 20px;
  font-size: 12px;
  font-weight: 400;
  color: var(--white);
  line-height: 19.2px;
}

#footer.site-footer .tog_icn {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
#footer.site-footer .tog_icn::before,
#footer.site-footer .tog_icn::after {
  content: "";
  position: absolute;
  background: #bba171;
  border-radius: 1px;
  top: 50%;
  left: 50%;
}
#footer.site-footer .tog_icn::before {
  width: 14px;
  height: 1px;
  transform: translate(-50%, -50%);
}
#footer.site-footer .tog_icn::after {
  width: 1px;
  height: 14px;
  transform: translate(-50%, -50%);
}
#footer.site-footer .ft_nav li.is-open > a .tog_icn::after,
#footer.site-footer .ft_search_clinic.is-open .tog_icn::after {
  display: none;
}

#footer.site-footer .ft_nav .dropdown {
  display: none;
  /* style.css は padding:0 0 14px 14px と上下非対称で、
     項目(a は上下10px)が上に寄って見える。
     上下対称にして中央揃えにする(合計の高さは据え置き)。 */
  padding: 7px 0 7px 14px;
  /* 旧 common.css(L3867 / SP)の
       .ft_nav .dropdown { padding:10px 0 12px; background-color:#333 }
     のうち padding は上書きできていたが background-color が残り、
     グレー帯として可視化されていた。
     style.css の padding は上0/下14pxで、帯があると下に余白が寄って
     項目が上にずれて見える。AGA TOP に背景指定は無いため透明に戻す。 */
  background-color: transparent;
}
#footer.site-footer .ft_nav li.is-open > .dropdown {
  display: block;
}
#footer.site-footer .ft_nav .dropdown li a {
  display: block;
  padding: 10px 0;
  font-size: 12px;
  color: var(--white);
  /* 元は opacity:.8 で実効色 #cccccc(対 #000 で 13.08:1)だったが、
     第1階層リンク(#ffffff / 21:1)と揃えるため外した。
     style.css 側も同時に変更済みで、AGA TOP と共通の指定。 */
  opacity: 1;
}
#footer.site-footer .ft_search_clinic .dropdown ul {
  border-bottom: none;
}

/* SNSアイコン
   icomoon の @font-face と [class^="icon-"] は旧 common.css が
   同一ハッシュ(78o7gn)で既に定義しているため再定義しない。 */
#footer.site-footer .ft_sns ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  margin-top: 92px;
  margin-bottom: 70px;
  padding: 32px 0;
}
#footer.site-footer .ft_sns li a {
  display: block;
  position: relative;
  width: 23px;
  height: 23px;
}
#footer.site-footer .icon-tiktok,
#footer.site-footer .icon-twitter {
  display: block;
  position: relative;
  width: 23px;
  height: 23px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#footer.site-footer .icon-tiktok {
  background: url(/operation/aga/common/img/tiktok.svg) no-repeat;
  background-size: 100% 100%;
}
#footer.site-footer .icon-twitter {
  background: url(/operation/aga/common/img/twitter.svg) no-repeat;
  background-size: 100% 100%;
}
#footer.site-footer .icon-twitter:before {
  display: none;
}
#footer.site-footer .icon-instagram {
  display: block;
  width: 23px;
  height: 23px;
  font-size: 23px;
  line-height: 1;
  color: var(--white);
  text-align: center;
}
#footer.site-footer .icon-instagram:before {
  content: "\ea92";
}

#footer.site-footer .ft_logo_mark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
}
#footer.site-footer .ft_logo_mark img {
  width: 65px;
  height: auto;
}

#footer.site-footer .copyright {
  text-align: center;
  font-size: 10px;
  color: var(--gold);
  line-height: 16px;
  margin-top: 26px;
  padding-bottom: 68px;
}

/* ----------------------------------------------------------
   1. STICKY CTA  (sticky_cta)

   表示制御は parts.js が .is-visible を付け外しする。
   既定は translateY(100%) で画面外に退避。
---------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--white);
  box-shadow: 0px -2px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.sticky-cta.is-visible {
  transform: translateY(0);
}
.sticky-cta-inner {
  display: flex;
  align-items: stretch;
}
.sticky-cta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  font-size: 14px;
  font-weight: 700;
}
.sticky-cta-btn--tel {
  background: var(--white);
  color: var(--gold-btn);
  border-top: 1px solid var(--beige);
}
.sticky-cta-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.sticky-cta-btn-text small {
  font-size: 10px;
  font-weight: 400;
  color: #666;
}
.sticky-cta-btn--primary {
  background: var(--blue);
  color: var(--white);
}

/* リセット非依存化:
   style.css では img{display:block} / a{text-decoration:none} の
   グローバルリセットに依存していたが、本ファイルは
   リセットを持たないためパーツ内で個別に指定する。 */
.sticky-cta a {
  text-decoration: none;
}
.sticky-cta svg {
  display: block;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   旧SP追従CTA(.contact_box)の抑止

   旧 common/inc/footer.php が出力する SP 固定CTA
   (common.css L3765 / @media max-width:768px で position:fixed)
   と本パーツが下部で二重化するため、こちらを非表示にする。

   このファイルを読み込むページ = 新CTAを採用したページ なので、
   ここで抑止して問題ない(未採用ページには影響しない)。

   セレクタ詳細度 0,3,0。旧側の .contact_box(0,1,0) /
   .contact_box.sticky.hide(0,3,0) を読み込み順に依らず上回る。

   なお .ft_wrap の padding-top:61px は footer が固定CTAに
   隠れないための余白確保で、新CTA(高さ60px)でもほぼ同値のため
   そのまま残す。
---------------------------------------------------------- */
.ft_wrap .contact_box.sticky {
  display: none;
}

/* ----------------------------------------------------------
   PC Responsive (768px+)
   PC では追従CTAを出さない(ヘッダーのCTAボタンで代替)。
---------------------------------------------------------- */
/* ----------------------------------------------------------
   SP Responsive (〜767px)
   パンくずの現行TOP SP指定。旧 common.css には無い差分。
   参照元: style.css L1570-1587
---------------------------------------------------------- */
@media (max-width: 767px) {
  #ft_breadcrumb {
    position: relative;
    height: 46px;
    border-bottom: 1px solid #666;
  }
  #ft_breadcrumb li {
    padding: 15px 0 15px 15px;
    white-space: nowrap;
  }
  /* 先頭文字を他セクションと同じコンテンツ左端(16px)に揃える */
  #ft_breadcrumb .inner {
    padding: 0 16px;
  }
  #ft_breadcrumb li:first-child {
    padding-left: 0;
  }

  /* 階層が深いページの横あふれ対策。
     AGA TOP は2階層で収まるが、下層ページ(4階層)は SP幅に
     入らず li が2行目へ回り込み、高さ46px固定の枠から
     はみ出して直下のバナーに重なる。さらにページ全体が
     横スクロールする。
     1行を維持したままパンくず内だけ横スクロールさせる。 */
  #ft_breadcrumb .inner {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* 旧Edge/IE */
  }
  #ft_breadcrumb .inner::-webkit-scrollbar {
    display: none;                  /* Safari/Chrome */
  }
  #ft_breadcrumb ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;             /* 折り返さずに実幅を取る */
  }
  #ft_breadcrumb li {
    float: none;                    /* flex 化に伴い解除 */
    flex-shrink: 0;
  }
}

@media (min-width: 768px) {
  /* --- 1. STICKY CTA --- */
  .sticky-cta {
    display: none;
  }

  /* --- 4. HEADER --- */
  #js-header.sp_header,
  #js-header.sp_header .sp_header-inner {
    height: 60px;
  }
  #js-header.sp_header .sp_header-inner {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  /* PC用CTA・アイコンを表示、SP用アイコンを非表示 */
  #js-header.sp_header .switch-pc {
    display: flex;
    align-items: center;
  }
  #js-header.sp_header .switch-sp {
    display: none;
  }
  #js-header.sp_header .switch-pc ul {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  #js-header.sp_header .h_btn .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    border-radius: 0;
    background: var(--blue);
    color: var(--white);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3px;
    white-space: nowrap;
  }
  #js-header.sp_header .tb_blog {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #js-header.sp_header .switch-pc .ico a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }
  #js-header.sp_header .tel_number {
    display: block;
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
  }
  #js-header.sp_header .tel_sm {
    font-size: 10px;
    font-weight: 400;
    color: #fff;
  }

  /* ハンバーガーメニュー(PC) */
  #js-header.sp_header .g_navi {
    top: 60px;
    max-width: 1280px;
    left: 50%;
    max-height: calc(100vh - 60px);
    transform: translateX(-50%) translateY(-8px);
    padding-bottom: 0;
  }
  #js-header.sp_header .g_navi.is-open {
    transform: translateX(-50%) translateY(0);
  }
  /* style.css は L2141 で 60px、L2298 で 50px を指定し後者が勝つ。
     PCでは opacity:0/visibility:hidden で非表示のため見た目には
     出ないが、値を揃えておく。 */
  #js-header.sp_header .g_navi-overlay {
    inset: 50px 0 0 0;
    opacity: 0;
    visibility: hidden;
  }
  /* PCではオーバーレイを出さない(style.css L2144 と同じ挙動)。
     基底の .is-open は (1,2,0) で、上の非 .is-open ルール (1,1,0) に
     勝ってしまうため、.is-open 側も明示的に伏せる必要がある。
     これが無いと PC でメニューを開いたとき、AGA TOP と違って
     背景が暗くなる。 */
  #js-header.sp_header .g_navi-overlay.is-open {
    opacity: 0;
    visibility: hidden;
  }
  #js-header.sp_header .g_navi-cta {
    width: fit-content;
    padding: 0 24px;
    margin-left: auto;
    margin-right: auto;
  }
  #js-header.sp_header .g_navi-list {
    display: flex;
    flex-wrap: wrap;
  }
  #js-header.sp_header .g_navi-item {
    flex: 1 1 33.33%;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  #js-header.sp_header .g_navi-item--accordion {
    flex: 1 1 100%;
  }

  /* --- 3. BREADCRUMB / FOOTER BANNER --- */
  #ft_breadcrumb .inner {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
  #ft_breadcrumb li:first-child {
    padding-left: 0;
  }
  .footer_bnr > * {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
  .footer_bnr .inner-fluid {
    max-width: 1120px;
  }

  /* --- 2. FOOTER --- */
  #footer.site-footer .inner {
    max-width: 1280px;
    padding-top: 40px;
  }
  #footer.site-footer .ft_nav {
    display: flex;
    align-items: flex-start;
    gap: 56px;
    padding-bottom: 40px;
  }
  #footer.site-footer .ft_nav ul {
    border-bottom: none;
  }
  #footer.site-footer .ft_nav_01 {
    width: 260px;
    flex-shrink: 0;
  }
  #footer.site-footer .ft_nav_02 {
    width: 180px;
    flex-shrink: 0;
  }
  #footer.site-footer .ft_nav_03 {
    flex: 1;
  }
  #footer.site-footer .ft_nav > ul > li {
    border-bottom: none;
  }
  #footer.site-footer .ft_nav > ul > li > a {
    padding: 0 0 14px;
    font-size: 13px;
  }
  #footer.site-footer .tog_icn {
    display: none;
  }
  #footer.site-footer .ft_nav .dropdown {
    padding: 0 0 8px 12px;
  }
  #footer.site-footer .ft_nav .dropdown li a {
    padding: 6px 0;
  }
  /* PCは .show で常時展開（SPは .is-open のトグルで開閉） */
  #footer.site-footer .ft_nav .dropdown.show {
    display: block;
  }
  #footer.site-footer .ft_nav > ul > li:has(.dropdown.show) + li > a {
    margin-top: 10px;
  }
  #footer.site-footer .ft_search_clinic .dropdown {
    display: flex;
    gap: 40px;
    padding: 0;
  }
  #footer.site-footer .copyright {
    padding-bottom: 8px;
  }
}