@charset "UTF-8";
/* =========================================================
   fs-chrome.css — 全ページ共通のヘッダー（上部細帯 + ロゴ + グローバルナビ + ハンバーガー）
   clean / front / default / baked の全モードで読む（baked では本番CSSの後に読んで最優先）。
   マークアップは inc/clean-parts.php の nakaya_clean_header()。
   ========================================================= */

/* ---------- 上部細帯（そのページの h1） ---------- */
.fs-topbar { font-size: 12px; color: var(--fs-muted); padding: 5px var(--fs-gutter); letter-spacing: .02em; background: var(--fs-white); }
.fs-topbar__h1 { margin: 0; font-family: inherit; font-size: inherit; font-weight: 400; line-height: inherit; color: inherit; display: inline; }

/* ---------- ヘッダー（スクロール追従）
   position: sticky は「祖先のどれかに overflow: hidden/auto があると効かない」。
   body は base.css で overflow-x: clip にしてあるので、#page 等のラッパーにも hidden を付けないこと。
   本番は上段（ロゴ＋診療時間＋電話）＋下段（ナビ行）の2段構成（header-flex／headerNav）。 ---------- */
/* position/height/z-index を !important で明示指定。
   理由: Bakeページの brz-<slug>.css（本番の自前インラインstyleをそのまま資産化したもの）に
   `header { position: static !important; z-index: 10 !important; … }` という素タグ selector が
   !important 付きで含まれていることがあり（本番側のスクロール固定バグ対策の副産物。2026-10-27 中矢歯科TOPで発覚）、
   !important 無しでは class セレクタでも勝てない。同じ強さで対抗する。 */
.fs-header { position: sticky !important; top: 0 !important; left: auto; width: auto; height: auto; padding: 0; z-index: 1000 !important; background: var(--fs-white); box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.fs-header__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1400px; margin: 0 auto; padding: 10px 24px; }
.fs-logo { display: flex; align-items: center; }
.fs-logo__word { height: 64px; width: auto; }

/* ---------- 診療時間＋電話（本番の header-time-box／header-tel-box。白＝淡色ガラス風／電話＝content-accentのガラス風） ---------- */
.fs-header__info { display: flex; align-items: center; gap: 16px; }
.fs-header__hours { text-align: center; font-size: 12px; line-height: 1.6; color: var(--fs-text); padding: 4px 14px; background: var(--fs-primary-soft); }
.fs-header__hours p { margin: 0; }
.fs-header__hours-main { font-size: 15px; font-weight: 700; color: var(--fs-heading); }
.fs-header__tel { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px; background: var(--fs-content-accent); transition: filter .2s, transform .2s; }
.fs-header__tel:hover { filter: brightness(1.08); transform: translateY(-1px); }
.fs-header__tel-label { color: var(--fs-white); font-size: 11px; }
.fs-header__tel-number { color: var(--fs-white); font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.fs-header__tel-number i { margin-right: 8px; font-size: 18px; }

/* ---------- グローバルナビ（本番の .slideout-nav-list：デスクトップでは白背景・明朝体・1行テキストの横並び行。
   本番は「ハンバーガーメニューのドロワーと同じマークアップ」をCSSだけでデスクトップ時に横並び展開している。
   2026-10-27 中矢歯科：淡色背景＋太字2段（jp/en）で作っていたが、本番は透過背景・明朝体・1行・space-around。 ---------- */
.fs-nav { background: transparent; border-top: none; }
.fs-nav__list { display: flex; align-items: center; justify-content: space-around; gap: 0; max-width: 1400px; margin: 0 auto; padding: 15px 0; }
.fs-nav__item { position: relative; }
.fs-nav__item > a { display: flex; align-items: center; gap: 6px; padding: 0; white-space: nowrap; font-family: var(--fs-font-serif); font-size: 14px; font-weight: 500; color: #000; }
.fs-nav__jp { font-weight: 500; font-size: 14px; color: #000; letter-spacing: normal; transition: color .2s; }
.fs-nav__en { display: none; }
.fs-nav__item > a:hover .fs-nav__jp { color: var(--fs-primary); }
.fs-nav__toggle { display: none; }
.fs-nav__item.has-child > a::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; color: #000; }
/* ドロップダウン */
.fs-subnav { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--fs-white); box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .22s; z-index: 20; }
.fs-nav__item.has-child:hover .fs-subnav { opacity: 1; visibility: visible; transform: translateY(0); }
/* 右端寄りのメニューは右そろえで開く（非表示時も画面右外へはみ出して横スクロールが出るのを防ぐ） */
.fs-nav__item:nth-last-child(-n+3) .fs-subnav { left: auto; right: 0; }
.fs-subnav > li > a { display: block; padding: 9px 18px; font-size: 14px; color: var(--fs-text); white-space: nowrap; }
.fs-subnav > li > a:hover { background: var(--fs-primary-soft); color: var(--fs-primary); }
.fs-burger { display: none; }
.fs-nav__close { display: none; }
/* ドロワー下部の連絡先ボックスはモバイル専用（768px以下で表示）。デスクトップでは隠す。
   2026-10-27 中矢歯科：これを隠し忘れ、デスクトップのナビ行に無装飾の住所・電話テキストが
   そのまま表示されてしまっていた。 */
.fs-nav__contact { display: none; }

/* Bakeページの本文に残る本番自前のナビ（.headerNav#js-nav）は、共通の fs-nav で代替済みのため非表示にする。
   bake-page.js の </header> 以降を本文とみなすフォールバックが、ヘッダー直後にあったこのナビも道連れに
   資産化してしまうため（2026-10-27 中矢歯科で発覚。重複ナビとして二重表示されていた）。 */
.headerNav, #js-nav { display: none !important; }

/* ---------- レスポンシブ（ハンバーガー：右端）
   ドロワー内の子メニューはアコーディオン（初期は閉じる）。fs-theme.js が .is-expanded を付ける。 ---------- */
@media screen and (max-width: 1024px) {
  .fs-logo__word { height: 44px; }
  /* 診療時間/電話のガラスボックスはモバイルでは非表示（下部固定の電話バー fs-cta が代わりを担う） */
  .fs-header__info { display: none; }
  .fs-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; padding: 0; }
  .fs-burger span { display: block; width: 26px; height: 2px; background: var(--fs-heading); transition: .25s; }
  .fs-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .fs-burger.is-open span:nth-child(2) { opacity: 0; }
  .fs-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .fs-nav__close { display: block; position: absolute; top: 12px; right: 18px; width: 44px; height: 44px; background: none; border: none; font-size: 32px; line-height: 1; color: var(--fs-heading); z-index: 2; }
  .fs-nav { position: fixed; inset: 0 0 0 auto; width: min(84%, 340px); background: var(--fs-white); transform: translateX(100%); transition: .3s; overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,.15); z-index: 1200; padding: 70px 0 40px; }
  .fs-nav.is-open { transform: translateX(0); }
  .fs-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .fs-nav__item > a { width: 100%; box-sizing: border-box; flex-direction: row; justify-content: flex-start; gap: 10px; border-bottom: 1px solid var(--fs-line-2); padding: 14px 56px 14px 24px; font-size: 15px; }
  .fs-nav__item.has-child > a::after { display: none; } /* 子ありの矢印は .fs-nav__toggle 側（右端ボタン）が担当。重複表示を防ぐ */
  .fs-nav__toggle { display: block; position: absolute; top: 0; right: 0; width: 52px; height: 52px; background: none; border: none; }
  .fs-nav__toggle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-right: 2px solid var(--fs-heading); border-bottom: 2px solid var(--fs-heading); transform: translate(-50%, -70%) rotate(45deg); transition: transform .2s; }
  .fs-nav__item.is-expanded > .fs-nav__toggle::before { transform: translate(-50%, -30%) rotate(-135deg); }
  .fs-subnav { display: none; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 8px; background: var(--fs-primary-soft); }
  .fs-nav__item.is-expanded > .fs-subnav { display: block; }
  .fs-subnav > li > a { padding: 10px 38px; white-space: normal; }
}

/* ---------- スマホ（本番 max-width:768px に準拠）
   本番はヘッダーが細い固定バー（fixed・top:5px・高さ45px）になり、ハンバーガーは
   「正方形・content-accent色・白い3本線＋MENU文字」という独自デザインに変わる。 ---------- */
@media screen and (max-width: 768px) {
  .fs-header { position: fixed !important; top: 5px !important; left: 10px; right: 10px; width: auto; min-height: 45px; padding: 0; background: var(--fs-white); box-shadow: 0 2px 10px rgba(0,0,0,.12); }
  .fs-header__top { padding: 4px 10px; min-height: 45px; }
  .fs-logo__word { height: auto; width: 150px; }
  .fs-topbar { display: none; } /* 固定ヘッダーに収まらないため、スマホでは細帯を省略 */

  /* ハンバーガー：fs-header__top の中に収める（60x60の正方形・#6A8DC7地・白3本線＋下にMENU文字）。
     3本線は中央の塊として縦横センター、MENU文字はその下に実要素として積む（絶対配置オフセットで
     ズレさせない）。 */
  .fs-burger { position: relative; flex: 0 0 auto; width: 60px; height: 60px; background: var(--fs-content-accent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 0; }
  .fs-burger span { display: block; width: 28px; height: 2px; background: var(--fs-white); }
  .fs-burger::after { content: "MENU"; display: block; font-size: 9px; letter-spacing: .05em; color: var(--fs-white); font-weight: 700; line-height: 1; }

  /* ヘッダーが固定・高さが小さくなった分、本文の先頭が隠れないように全ページ分の余白を確保 */
  body { padding-top: 55px; }

  /* ドロワー：本番の .slideout-nav（白背景・右からスライドイン・幅90%・金茶色のリンク） */
  .fs-nav { top: 0; right: 0; left: auto; width: 90%; background: var(--fs-white); padding: 70px 0 0; display: flex; flex-direction: column; }
  .fs-nav__list { flex: 1; overflow-y: auto; }
  .fs-nav__item > a { border-bottom: 1px solid rgba(189,169,139,.3); padding: 18px 24px; }
  .fs-nav__jp { color: #bda98b; font-weight: 600; }
  .fs-nav__item > a:hover .fs-nav__jp, .fs-nav__jp { color: #bda98b; }
  .fs-subnav { background: rgba(189,169,139,.2); }
  .fs-subnav > li > a { color: #bda98b; }
  /* ドロワー下部の連絡先ボックス（本番 .slideout-nav-contact：青みがかったガラス風＋電話番号の大きなガラスボタン） */
  .fs-nav__contact { display: block; background: rgba(106,141,199,.7); padding: 20px; text-align: center; color: var(--fs-white); font-size: 13px; }
  .fs-nav__contact-addr { margin: 0 0 16px; }
  .fs-nav__contact-tel { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; color: var(--fs-white); font-size: 22px; font-weight: 700; overflow: hidden; }
  .fs-nav__contact-tel::before { content: ""; position: absolute; inset: 0; background: rgba(113,183,174,.85); z-index: 0; }
  .fs-nav__contact-tel::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.5); z-index: 1; }
  .fs-nav__contact-tel span, .fs-nav__contact-tel i { position: relative; z-index: 2; }
}