@charset "UTF-8";
/* =========================================================
   fs-chrome.css — 全ページ共通の枠（ヘッダー／SPドロワー／下層ヒーロー／パンくず／診療時間表／フッター）
   clean / front / default / baked の全モードで読む（baked では本番CSSの後に読んで最優先）。
   マークアップは inc/clean-parts.php の
     hayashi_clean_header() / hayashi_sp_drawer() / hayashi_hero_html() /
     hayashi_crumb() / hayashi_hours_table() / hayashi_clean_footer()
   寸法・色は本番（1366px / 390px）を実測して合わせている。数値を動かすときは
   tools/20-verify/compare-shots.js の比較画像で確認すること。
   ========================================================= */

/* =========================================================
   1. ヘッダー（PC）
   本番構成：左22%にキャッチ文（13px）とロゴ、右78%にナビ（和文16px＋英字12px の2段）。
   ヘッダー全体の高さは 138px（上下 15px の余白＋ナビ 102px）。
   position: sticky は「祖先のどれかに overflow: hidden/auto があると効かない」。
   body は base.css で overflow-x: clip にしてあるので、ラッパーにも hidden を付けないこと。
   ========================================================= */
.fs-header { position: sticky; top: 0; z-index: 1000; background: var(--fs-white); box-shadow: 0 0 5px rgba(0,0,0,.1); }
.fs-header__inner { display: flex; align-items: flex-start; padding: 15px 0; }

/* 左：キャッチ文（そのページの h1）＋ ロゴ */
.fs-header__brand { flex: 1 1 22%; max-width: 22%; padding: 0 15px; }
.fs-topbar__h1 { margin: 0; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.9; letter-spacing: 0; text-align: justify; color: var(--fs-catch); }
.fs-logo { display: block; margin: 7px 0 10px; }
.fs-logo__word { display: block; width: 70%; height: auto; }

/* 右：グローバルナビ
   項目は 150px を上限に、幅が足りないときだけ均等に縮める（flex-shrink）。
   本番は 150px 固定で「アクセス」「採用情報」が画面外に切れてしまうので、ここは直している。
   overflow-x: clip は保険。clip は visible と組み合わせられるので、下へ開くドロップダウンは隠れない。 */
.fs-gnav { flex: 1 1 78%; max-width: 78%; min-width: 0; padding: 5px 15px 0; margin-top: -11px; overflow-x: clip; overflow-y: visible; }
.fs-gnav__list { display: flex; align-items: stretch; min-height: 102px; }
.fs-gnav__item { position: relative; flex: 0 1 150px; min-width: 0; transition: .2s; }
.fs-gnav__item > a {
  display: block; height: 100%; padding: 25px 5px 0; text-align: center;
  font-size: 16px; line-height: 1.5; color: var(--fs-nav-text);
  border-right: 1px solid var(--fs-nav-line); position: relative; z-index: 45; transition: 200ms;
}
.fs-gnav__item:first-child > a { border-left: 1px solid var(--fs-nav-line); padding-top: 37px; }
/* 英字ラベルは本番も明朝（serif）。font-family は指定せず body から継承させる */
.fs-gnav__en { display: block; margin-top: 5px; font-size: 12px; line-height: 1.35; color: var(--fs-nav-en); }
.fs-gnav__item > a:hover { background: var(--fs-nav-hover); color: var(--fs-white); }
.fs-gnav__item > a:hover .fs-gnav__en { color: var(--fs-white); }

/* ▼（サブメニューの合図）。本番は子を持たない項目にも付いているため has-arrow で再現する */
.fs-gnav__item.has-arrow > a::after {
  content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
  width: 0; height: 0; border: 4px solid transparent; border-top: 6px solid var(--fs-nav-hover);
}
.fs-gnav__item.has-arrow > a:hover::after { border-top-color: var(--fs-white); }

/* ドロップダウン（ホバーで下に開く） */
.fs-gnav__sub { position: absolute; top: 0; left: 0; width: 100%; height: 0; overflow: hidden; text-align: center; z-index: 9; transition: .2s; }
.fs-gnav__item:hover > .fs-gnav__sub { top: 100%; height: auto; width: 160%; left: -30%; background: var(--fs-nav-hover); border-top: 1px solid var(--fs-white); }
.fs-gnav__sub > li { border-bottom: 1px solid var(--fs-white); }
.fs-gnav__sub > li > a { display: block; padding: 10px 10px 8px; font-size: 14px; line-height: 1.35; color: var(--fs-white); }
.fs-gnav__sub > li > a:hover { background: var(--fs-nav-sub-hover); }

/* ハンバーガー（PCでは出さない） */
.fs-burger { display: none; }
.fs-nav, .fs-nav__ov { display: none; }

/* 中間幅：本番と同じく項目を 100px に詰める */
@media screen and (max-width: 1320px) {
  .fs-gnav__item { flex-basis: 100px; }
  .fs-gnav__item > a { font-size: 12px; }
  .fs-gnav__sub > li > a { font-size: 10px; }
}

/* =========================================================
   2. ヘッダー（SP）＋ ドロワー
   本番はハンバーガーで左からメニューが出る。高さは 87px、ロゴは 252px。
   ========================================================= */
@media screen and (max-width: 991px) {
  .fs-header__inner { align-items: center; padding: 18px 37px 14px 15px; }
  .fs-header__brand { flex: 1 1 auto; max-width: none; padding: 0; }
  .fs-topbar__h1 { display: none; } /* 本番もSPではキャッチ文を出さない */
  .fs-logo { margin: 0; }
  .fs-logo__word { width: 252px; max-width: 100%; }
  .fs-gnav { display: none; }

  /* 本番のハンバーガーは 12×9px の細線3本。ロゴ中央よりわずかに下（margin-top で 9.5px 下げる） */
  /* 本番は 12×9px と 26×18px の2種類が混在していた。小さすぎるので大きい方に統一し、
     指で押せるよう 44×44px のタップ領域を確保する（線は中央に 26×18 で描く） */
  .fs-burger { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 44px; height: 44px; flex: 0 0 44px; align-self: center; margin-top: 0; background: none; border: none; padding: 13px 9px; box-sizing: border-box; }
  .fs-burger span { display: block; width: 26px; height: 2px; background: #333; transition: .25s; }
  .fs-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .fs-burger.is-open span:nth-child(2) { opacity: 0; }
  .fs-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ドロワー本体（左から出る） */
  .fs-nav { display: block; position: fixed; inset: 0 auto 0 0; width: min(80%, 310px); background: #333; transform: translateX(-100%); transition: .3s; overflow-y: auto; z-index: 1200; padding: 0 0 40px; }
  .fs-nav.is-open { transform: translateX(0); }
  .fs-nav__ov { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1150; }
  .fs-nav__ov[hidden] { display: none; }
  .fs-nav__ttl { margin: 0; padding: 12px 10px; text-align: center; font-size: 15px; color: rgba(255,255,255,.85); background: #3b3b3b; }
  .fs-nav__close { display: block; position: absolute; top: 4px; right: 8px; width: 36px; height: 36px; background: none; border: none; font-size: 26px; line-height: 1; color: rgba(255,255,255,.85); z-index: 2; }
  .fs-nav__list { display: block; }
  .fs-nav__item { position: relative; border-bottom: 1px solid #454545; }
  .fs-nav__item > a { display: block; padding: 12px 52px 12px 24px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.85); }
  .fs-nav__toggle { position: absolute; top: 0; right: 0; width: 48px; height: 44px; background: none; border: none; }
  .fs-nav__toggle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-right: 2px solid rgba(255,255,255,.7); border-bottom: 2px solid rgba(255,255,255,.7); transform: translate(-70%, -50%) rotate(-45deg); transition: transform .2s; }
  .fs-nav__item.is-expanded > .fs-nav__toggle::before { transform: translate(-50%, -70%) rotate(45deg); }
  /* 子メニューはアコーディオン（初期は閉じる） */
  .fs-nav__list--d1, .fs-nav__list--d2, .fs-nav__list--d3 { display: none; background: rgba(0,0,0,.25); }
  .fs-nav__item.is-expanded > .fs-nav__list { display: block; }
  .fs-nav__list--d1 > .fs-nav__item > a { padding-left: 40px; font-size: 14px; }
  .fs-nav__list--d2 > .fs-nav__item > a { padding-left: 56px; font-size: 13px; }
  .fs-nav__list--d3 > .fs-nav__item > a { padding-left: 72px; font-size: 13px; }
}

/* =========================================================
   3. 下層ページ ヒーロー
   写真の上に、下寄せで白いボックス（コンテナから左右 100px 内側）を重ねる。
   白ボックスはセクションの上下へ 20px はみ出す（本番の margin:-20px 100px）。
   ========================================================= */
.fs-hero { background-repeat: no-repeat; background-size: cover; background-position: 55% 65%; padding: 250px 0 15px; }
.fs-hero__inner { max-width: var(--fs-wrap); margin: 0 auto; }
.fs-hero__box { background: var(--fs-white); margin: -20px 100px; padding: 40px 0 10px; text-align: center; }
.fs-hero__title { margin: 0; font-size: 35px; font-weight: 400; line-height: 1; letter-spacing: 10px; color: var(--fs-text); }
.fs-hero__en { margin: 10px 0 0; font-size: 25px; font-weight: 400; line-height: 1.9; color: var(--fs-hero-en); }

@media screen and (max-width: 991px) {
  .fs-hero { padding: 82px 0 25px; }
  .fs-hero__inner { padding: 0 15px; }
  .fs-hero__box { margin: 0 0 -28px; padding: 10px 0; }
  .fs-hero__title { font-size: 28px; line-height: 1.3; letter-spacing: 5px; }
  .fs-hero__en { margin: 0; }
}

/* =========================================================
   4. パンくず
   ========================================================= */
.fs-crumb { padding: 25px 0; }
.fs-crumb__list { display: flex; flex-wrap: wrap; max-width: var(--fs-wrap); margin: 0 auto; font-size: 16px; line-height: 1.8; }
.fs-crumb__list a { color: var(--fs-text); text-decoration: underline; }
.fs-crumb__list a:hover { text-decoration: none; }
.fs-crumb__list li:not(:last-child)::after { content: "›"; margin: 0 .6em; color: var(--fs-crumb-sep); }

@media screen and (max-width: 991px) {
  .fs-crumb { padding: 35px 15px; }
}

/* =========================================================
   5. 診療時間表（フッター＝白文字／.fs-hours--body＝本文用）
   ========================================================= */
.fs-hours { width: 100%; border-collapse: collapse; font-size: 16px; }
.fs-hours th, .fs-hours td { padding: 10px 20px; text-align: center; font-weight: 400; line-height: 1.8; border-bottom: 1px solid currentColor; }
.fs-hours thead th { border-top: 1px solid currentColor; }
.fs-hours-wrap { margin: 20px 0; }
/* 本文用（白地）：罫線を薄くして読みやすくする */
.fs-hours--body { color: var(--fs-text); }
.fs-hours--body th, .fs-hours--body td { border-bottom-color: var(--fs-line); }
.fs-hours--body thead th { border-top-color: var(--fs-line); }

@media screen and (max-width: 559px) {
  .fs-hours th, .fs-hours td { padding: 10px; }
}

/* =========================================================
   6. フッター
   ※ `.fs-footer *` に font-family を当てない：FontAwesome の <i> まで上書きされて
     アイコンが豆腐になる。書体は body から継承させ、必要な要素だけ個別指定する。
   ========================================================= */
.fs-footer { background: var(--fs-footer-bg); color: var(--fs-white); padding: 55px 0 15px; }
.fs-footer__inner { max-width: var(--fs-wrap); margin: 0 auto; }
/* 本番フッター上部の地図枠。本番は Google Maps の埋め込みが表示されない（APIキー制限）ため空き枠だけ再現 */
.fs-footer__map { height: 400px; margin: 10px 0; }
.fs-footer__map iframe { display: block; width: 100%; height: 100%; border: 0; }

.fs-footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 25px 25px 0; }
.fs-footer__logo { display: block; }
.fs-footer__logo img { display: block; width: 360px; max-width: 100%; height: auto; }
.fs-footer__zip { margin: 20px 0 0; font-size: 16px; line-height: 1.9; }
.fs-footer__addr { margin: 0; font-size: 15px; line-height: 1.9; }
.fs-footer__access { margin: 21px 0 0; font-size: 13px; line-height: 1.9; }
.fs-footer__contact { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 9px 0 0; padding: 15px; }
.fs-footer__tel { margin: 0; white-space: nowrap; }
.fs-footer__tel a { font-size: 25px; line-height: 1.9; color: var(--fs-white); }
.fs-footer__insta img { display: block; width: 277px; max-width: 100%; height: auto; }
.fs-footer__caution { margin: 11px 0 0; font-size: 13px; font-weight: 700; line-height: 1.9; }
.fs-footer__note { margin: 0; font-size: 16px; line-height: 1.9; }
.fs-footer__hours .fs-footer__note:first-of-type { margin-top: 16px; }

.fs-footer__nav { display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0 0; align-items: start; }
/* 親（診療内容・医院案内）の見出し行。子リンクと区別がつくよう少し間を空ける */
.fs-footer__col-head { margin-bottom: 4px; }
.fs-footer__col-head > a, .fs-footer__col-head > span { font-weight: 500; }
.fs-footer__col-head + li { margin-top: 0; }
.fs-footer__col { padding: 15px; }
.fs-footer__col li { font-size: 16px; line-height: 1.9; }
.fs-footer__col li + li { margin-top: 5px; }
.fs-footer__col li a { color: var(--fs-white); }
.fs-footer__col li a:hover { text-decoration: underline; }

.fs-copyright { margin: 50px 0 31px; text-align: center; font-size: 16px; line-height: 1.9; color: var(--fs-white); }

@media screen and (max-width: 991px) {
  .fs-footer { padding: 15px 15px 93px; }
  .fs-footer__map { height: 260px; } /* スマホ・タブレットは地図を低めに */
  .fs-footer__top { grid-template-columns: 1fr; gap: 0; padding: 20px 0 0; }
  .fs-footer__logo img { width: 252px; margin: 0 auto; }
  .fs-footer__zip { margin-top: 21px; }
  .fs-footer__contact { gap: 10px; padding: 15px 0 15px 10px; }
  .fs-footer__insta img { width: 180px; }
  .fs-footer__hours { margin-top: 55px; }
  .fs-footer__nav { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
  .fs-footer__nav--2 { grid-template-columns: 1fr; }
  .fs-footer__col { padding: 20px 0 0; text-align: center; }
  .fs-copyright { margin: 0 0 30px; font-size: 14px; font-weight: 300; line-height: 1.7; }
}