@charset "UTF-8";
/* =========================================================
   fs-chrome.css — 全ページ共通のヘッダー（上部細帯 + ロゴ + グローバルナビ + ハンバーガー）
   clean / front / default / baked の全モードで読む（baked では本番CSSの後に読んで最優先）。
   マークアップは inc/clean-parts.php の shirokane_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 を付けないこと。 ---------- */
.fs-header { position: sticky; top: 0; z-index: 1000; background: var(--fs-white); box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.fs-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1400px; margin: 0 auto; padding: 8px 24px; min-height: var(--fs-header-h); }
.fs-logo { display: flex; align-items: center; }
.fs-logo__word { height: 52px; width: auto; }

/* ---------- グローバルナビ ---------- */
.fs-nav__list { display: flex; align-items: center; gap: 0; }
.fs-nav__item { position: relative; }
.fs-nav__item > a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 13px; white-space: nowrap; }
.fs-nav__jp { font-weight: 400; font-size: 16px; color: #40372D; letter-spacing: .02em; transition: color .2s; }
.fs-nav__en { font-family: var(--fs-font-en); font-size: 10px; color: var(--fs-accent); letter-spacing: .1em; text-transform: capitalize; line-height: 1; }
.fs-nav__item > a:hover .fs-nav__jp { color: var(--fs-primary); }
.fs-nav__item:hover > a { background: var(--fs-accent); }
.fs-nav__item:hover > a .fs-nav__jp, .fs-nav__item:hover > a .fs-nav__en { color: var(--fs-white); }
.fs-nav__toggle { display: none; }
/* ドロップダウン（本番 #nav .header_menu>li>.sub-menu1 準拠：生成りベージュ地・影・ホバーでアクセント色反転） */
.fs-subnav { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 260px; background: #f3f2ea; box-shadow: 0 8px 16px rgba(0,0,0,.2); padding: 20px; opacity: 0; visibility: hidden; transition: .22s; z-index: 20; }
.fs-nav__item.has-child:hover .fs-subnav { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* 右端寄りのメニューは右そろえで開く（非表示時も画面右外へはみ出して横スクロールが出るのを防ぐ） */
.fs-nav__item:nth-last-child(-n+3) .fs-subnav { left: auto; right: 0; transform: translateY(6px); }
.fs-nav__item:nth-last-child(-n+3).has-child:hover .fs-subnav { transform: translateY(0); }
.fs-subnav > li > a { display: block; padding: 9px 14px; font-size: 14px; color: #40372d; white-space: nowrap; font-family: var(--fs-font-base); }
.fs-subnav > li:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.08); }
.fs-subnav > li > a:hover { background: var(--fs-accent); color: var(--fs-white); }

/* お悩み別など、グループ見出し付きのサブメニュー（site-config の children に 'group'/'items' を持たせた場合） */
.fs-subnav:has(.fs-subnav__group) { min-width: 300px; }
.fs-subnav__group { padding: 0; }
.fs-subnav__group:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 10px; margin-bottom: 10px; }
.fs-subnav__group-ttl { margin: 4px 0 4px; padding: 0 14px; font-size: 12px; font-weight: 700; color: var(--fs-accent); letter-spacing: .04em; }
.fs-subnav__group-list > li > a { display: block; padding: 7px 14px; font-size: 13.5px; color: #40372d; white-space: nowrap; font-family: var(--fs-font-base); }
.fs-subnav__group-list > li > a:hover { background: var(--fs-accent); color: var(--fs-white); }
.fs-burger { display: none; }
.fs-nav__close { display: none; }

/* ---------- レスポンシブ（ハンバーガー：右端）
   ドロワー内の子メニューはアコーディオン（初期は閉じる）。fs-theme.js が .is-expanded を付ける。 ---------- */
@media screen and (max-width: 768px) {
  /* 本番はモバイルで上部H1帯(.header-container)自体を非表示にしている。SEO上H1は残し、見た目だけ隠す */
  .fs-topbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

@media screen and (max-width: 1024px) {
  .fs-logo__word { height: 32px; }
  .fs-header__inner { padding-right: 76px; }
  /* ハンバーガー（本番準拠）：固定位置・3本線＋下に Menu/Close のラベル文字 */
  .fs-burger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; position: fixed; top: 0; right: 10px; width: 60px; height: 60px; background: none; border: none; padding: 0; z-index: 1210; }
  .fs-burger span { display: block; width: 24px; height: 2px; background: #BDB2A9; transition: .25s; margin: 3px 0; }
  .fs-burger::after { content: "Menu"; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 900; color: #BDB2A9; }
  .fs-burger.is-open span { background: var(--fs-white); }
  .fs-burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .fs-burger.is-open span:nth-child(2) { opacity: 0; }
  .fs-burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .fs-burger.is-open::after { content: "Close"; color: var(--fs-white); }
  .fs-nav__close { display: none; }
  /* ドロワー（本番準拠）：左からフルスクリーンでスライドイン・生成りベージュ地 */
  .fs-nav { position: fixed; inset: 0; width: 100%; background: #BDB2A9; transform: translateX(-100%); transition: .4s ease-in-out; overflow-y: auto; z-index: 1200; padding: 60px 25px 120px; }
  .fs-nav.is-open { transform: translateX(0); }
  .fs-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-top: 20px; }
  .fs-nav__item { padding-bottom: 10px; border-bottom: 2px solid var(--fs-white); margin-top: 10px; }
  .fs-nav__item > a { flex-direction: row; justify-content: space-between; gap: 10px; padding: 8px 20px 8px 0; font-size: 15px; }
  .fs-nav__jp, .fs-nav__item > a .fs-nav__jp { color: var(--fs-white); font-weight: 400; }
  .fs-nav__en { display: none; }
  /* アコーディオン開閉トグル：＋／－アイコン（本番準拠） */
  .fs-nav__toggle { display: block; position: absolute; top: 0; right: 0; width: 44px; height: 44px; background: none; border: none; }
  .fs-nav__toggle::before, .fs-nav__toggle::after { content: ""; position: absolute; top: 50%; right: 8px; background: var(--fs-white); transition: transform .3s; }
  .fs-nav__toggle::before { width: 12px; height: 2px; transform: translateY(-50%); }
  .fs-nav__toggle::after { width: 2px; height: 12px; transform: translate(-5px, -50%); }
  .fs-nav__item.is-expanded > .fs-nav__toggle::after { transform: translate(-5px, -50%) rotate(90deg); opacity: 0; }
  .fs-subnav { display: none; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0; background: none; }
  /* :hover 用ルール（.fs-nav__item.has-child:hover .fs-subnav 等）はこの画面幅のリセットより詳細度が高く、
     タップ直後に:hoverが残るタッチ端末だと transform: translateX(-50%) が生き残って画面外にはみ出す
     （2026-10-22 診療案内サブメニューで発覚）。同じ詳細度のセレクタで打ち消す */
  .fs-nav__item.has-child:hover .fs-subnav,
  .fs-nav__item:nth-last-child(-n+3).has-child:hover .fs-subnav { position: static; left: auto; right: auto; transform: none; }
  .fs-nav__item.is-expanded > .fs-subnav { display: block; padding-top: 20px; }
  .fs-subnav > li + li { margin-top: 20px; }
  .fs-subnav > li { border-bottom: 0; }
  .fs-subnav > li > a { padding: 0; white-space: normal; color: var(--fs-white); font-size: 14px; }
  .fs-subnav__group:not(:last-child) { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  .fs-subnav__group-ttl { padding: 0; color: var(--fs-white); opacity: .8; }
  .fs-subnav__group-list > li + li { margin-top: 14px; }
  .fs-subnav__group-list > li > a { padding: 0; white-space: normal; color: var(--fs-white); font-size: 14px; }
}