/* =========================================================
   下層ページ共通スタイル（トップと同じブランド/パーツを流用）
   top.css の :root 変数・.top-* パーツ前提（top.css の後に読み込む）
   ========================================================= */

.page-body { background: var(--c-pink-soft); }
/* CTA帯はカンプに無く非表示のため、本文とフッターの間に余白を確保（カンプ準拠 約120px） */
.page-body { padding-bottom: 120px; }
@media (max-width: 820px) { .page-body { padding-bottom: 72px; } }

/* ---------- ページ見出し（サブヒーロー） ---------- */
.page-hero { position: relative; background: var(--c-cream); overflow: hidden; }
.page-hero::after { content: ""; position: absolute; left: calc(50% - 50vw); bottom: 0; width: 100vw; height: 1px; background: #efe4e1; }
.page-hero__inner { max-width: 1280px; margin: 0 auto; padding: 54px max(40px, calc((100% - 1280px) / 2 + 40px)) 46px; }
.page-hero__crumb { margin: 0 0 8px; color: var(--c-pink); font-weight: 700; font-size: 13px; letter-spacing: 1.2px; }
.page-hero__en { margin: 0; font-family: var(--ff-josefin); font-weight: 700; color: var(--c-brown); font-size: 46px; line-height: 1.1; letter-spacing: 2px; }
.page-hero__ja { margin: 6px 0 0; color: var(--c-brown2); font-weight: 700; font-size: 17px; letter-spacing: 1px; }

/* ---------- 診療メニュー（カードはトップの .top-menu__* を流用） ---------- */
.page-menu { padding: 72px 0 92px; background: var(--c-pink-soft); }
.page-menu .top-menu__panel { margin-top: 0; }

/* ---------- 予約・問い合わせ CTA バンド（全ページ共通・プリフッター） ---------- */
.cta-band { background: var(--c-cream); padding: 70px 0; }
.cta-band__inner { max-width: 920px; margin: 0 auto; padding: 0 24px; text-align: center; }
.cta-band__title { margin: 0; color: var(--c-brown); font-weight: 700; font-size: 28px; letter-spacing: 2px; }
.cta-band__lead { margin: 16px auto 0; max-width: 680px; color: var(--c-brown2); font-weight: 500; font-size: 14px; line-height: 2; }
.cta-band__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 34px; }
.cta-band__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 240px; min-height: 76px; padding: 12px 24px; border-radius: 6px; background: var(--c-brown2); color: #fff; }
.cta-band__btn small { font-size: 11px; letter-spacing: .5px; opacity: .85; }
.cta-band__btn strong { font-size: 18px; letter-spacing: 1px; font-weight: 700; }
.cta-band__btn:hover { opacity: .92; }

@media (max-width: 820px) {
  .page-hero__inner { padding: 32px 20px 26px; }
  .page-hero__en { font-size: 32px; }
  .page-hero__ja { font-size: 15px; }
  .page-menu { padding: 36px 16px 48px; }
  .cta-band { padding: 44px 0; }
  .cta-band__title { font-size: 22px; }
  .cta-band__btns { flex-direction: column; align-items: center; gap: 12px; }
  .cta-band__btn { width: 100%; max-width: 320px; }
}

/* レビュー反映: 下層ページのFVタイトルは少し大きめに統一する。 */
@media (min-width: 821px) {
  .page-hero__en,
  .stf-hero__en,
  .fac-hero__en,
  .prc-hero__en,
  .rec-hero__en,
  .nws-hero__en,
  .mnu-hero__en,
  .acc-hero__en,
  .blg-hero__en,
  .contact-hero__en,
  .bld-pagehead__en {
    font-size: clamp(54px, 4.2vw, 66px) !important;
    line-height: 1.05 !important;
  }

  .contact-hero__ja,
  .bld-pagehead__ja,
  .page-hero__ja {
    font-size: 20px !important;
  }
}

@media (max-width: 820px) {
  .page-hero__en,
  .stf-hero__en,
  .fac-hero__en,
  .prc-hero__en,
  .rec-hero__en,
  .nws-hero__en,
  .mnu-hero__en,
  .acc-hero__en,
  .blg-hero__en,
  .contact-hero__en,
  .bld-pagehead__en {
    font-size: clamp(38px, 10.4vw, 44px) !important;
    line-height: 1.08 !important;
  }

  .contact-hero__ja,
  .bld-pagehead__ja,
  .page-hero__ja {
    font-size: 17px !important;
  }
}

/* SP first-view labels: keep breadcrumbs and page titles solid white. */
@media (max-width: 820px) {
  .treat-hero__crumb,
  .treat-hero__crumb *,
  .treat-hero__ttl,
  .fac-hero__crumb,
  .fac-hero__crumb *,
  .fac-hero__en,
  .fac-hero__ja,
  .rec-hero__crumb,
  .rec-hero__crumb *,
  .rec-hero__en,
  .stf-hero__crumb,
  .stf-hero__crumb *,
  .stf-hero__en,
  .prc-hero__crumb,
  .prc-hero__crumb *,
  .prc-hero__en,
  .prc-hero__ja,
  .acc-hero__crumb,
  .acc-hero__crumb *,
  .acc-hero__en,
  .mnu-hero__crumb,
  .mnu-hero__crumb *,
  .mnu-hero__en,
  .blg-hero__crumb,
  .blg-hero__crumb *,
  .blg-hero__en,
  .nws-hero__crumb,
  .nws-hero__crumb *,
  .nws-hero__en,
  .contact-hero__crumb,
  .contact-hero__crumb *,
  .contact-hero__en,
  .contact-hero__ja {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }
}

/* SP first-view layer order: gradients stay below breadcrumb/title text. */
@media (max-width: 820px) {
  .treat-hero,
  .fac-hero,
  .prc-hero,
  .rec-hero,
  .stf-hero,
  .acc-hero,
  .mnu-hero,
  .blg-hero,
  .nws-hero,
  .contact-hero {
    isolation: isolate !important;
  }

  .treat-hero::before,
  .treat-hero::after,
  .treat-hero__overlay,
  .fac-hero::before,
  .fac-hero__overlay,
  .prc-hero::before,
  .prc-hero__bg::after,
  .prc-hero__overlay,
  .rec-hero::before,
  .rec-hero__overlay,
  .stf-hero__overlay,
  .acc-hero::before,
  .mnu-hero::before,
  .blg-hero::before,
  .nws-hero__overlay,
  .contact-hero::before {
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .treat-hero__inner,
  .fac-hero__lead,
  .prc-hero__lead,
  .rec-hero__lead,
  .acc-hero__inner,
  .mnu-hero__inner,
  .blg-hero__inner,
  .contact-hero__inner {
    position: relative !important;
    z-index: 5 !important;
  }

  .stf-hero__inner {
    z-index: 5 !important;
  }

  .nws-hero__inner {
    z-index: 5 !important;
  }

  /* SP: 下部固定のWEB予約バー(58px)にヒーローのパンくず/タイトル/サブタイトルが
     被って見切れるため、サブタイトルを持つヒーローのタイトルブロックをバー分だけ持ち上げる。
     診療科ヒーロー(.treat-hero__inner)はサブタイトルが無く、別途バー直上へ底揃えするため除外。 */
  /* サブタイトル有りの全画面ヒーローを下部固定バー直上(約14px)へ揃える。
     ヒーローごとに最下行の位置が異なるため、診療科(底揃え14px)に合わせリフト量を個別調整。
     menu / contact は本文が下に続く短いヒーローでバー干渉が無いため対象外。 */
  .fac-hero__lead,
  .prc-hero__lead,
  .rec-hero__lead {
    transform: translateY(-28px);
  }
  .stf-hero__inner,
  .nws-hero__inner {
    transform: translateY(-26px);
  }
  .acc-hero__inner,
  .blg-hero__inner {
    transform: translateY(-14px);
  }
}