/* sections.css ── 各セクション固有のレイアウト
   ── 目次 ──
   ・sections.css — #hero〜#contact 9セクション固有のレイアウト・装飾
   ・#hero（01 ファーストビュー）
   ・#features（02 3つの特徴／設備紹介統合）
   ・#menu（03 施術メニュー・アプローチ）
   ・#interior（04 院内のようす）
   ・#first-visit（05 初めての方へ）
   ・#pricing（06 料金・保険のご案内）
   ・#faq（07 よくあるご質問）
   ・#access（08 アクセス・受付時間）
   ・#contact（09 お問い合わせ）
   ・印刷時の共通ルール（全ページ共通・例外としてこのファイル末尾に1箇所だけ置く。04§1.4）

   ── 編集の手引き ──
   ・#hero から #contact まで、HTML の並び順どおりに並べる
   ・@media print は全体共通のため、例外としてファイル末尾に1箇所だけ置く
   ・部品の見た目は components.css の担当。ここには書かない
   ------------------------------------------------------------------ */

/* ==========================================================================
   sections.css — #hero〜#contact 9セクション固有のレイアウト・装飾
   共通コンポーネント（cta / header / footer / tel-modal / field / form / tag /
   kv-list / details-block / demo-bar / mobile-tel-bar / section-intro /
   section-cta / not-found）はここに書かない。すべて components.css の管轄。
   色は tokens.css のカスタムプロパティのみを参照する（生値を書かない）。
   正本: docs/03_デザイン定義書.md・docs/04_実装仕様書.md §2.5.3
   ========================================================================== */

/* ---- セクション共通：区切り罫線・上下パディング（#heroを除く全9セクション） ---- */
main > section:not(#hero) {
  border-top: 1px solid var(--color-rule);
  padding-block: clamp(var(--space-9), 8vw, var(--space-11));
}

/* 日本語の禁則処理（行頭に小書き仮名・長音等が来るのを防ぐ）が
   効いていなかったため適用する。line-breakは継承されるためbody一箇所でよい。
   本来はbase.css管轄の全文言設定だが、今回の担当範囲がcomponents.css／
   sections.cssの2ファイルのみのため、暫定的にここへ置く */
body {
  line-break: strict;
}

/* 1つおきに面を敷いて区切りを付ける */
#menu,
#first-visit,
#faq,
#contact {
  background-color: var(--color-surface-alt);
}

/* ==========================================================================
   #hero（01 ファーストビュー）
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 帯の分を引いて「デモ帯＋FV」で画面ちょうど1枚にする。
     100svhのままだと帯の高さぶんだけ下にはみ出し、受付時間・電話を載せた
     実用情報バーが初期画面に入らなかった */
  min-height: calc(100svh - var(--demo-bar-height) - var(--header-height));
  overflow: hidden;
  background-color: var(--color-primary); /* 写真読み込み前のフォールバック面 */
}

/* 768px以上ではFVの高さに上限を設ける。100svhのままだと縦に長い端末
   （iPad Pro 12.9 縦=1366px など）でFVが巨大化し、文字塊が約220pxしかないため
   上部に最大883px（画面の68%）の空白が生まれていた。
   スマホは画面いっぱいのFVが有効なので767px以下は100svhのまま変えない */
@media (min-width: 768px) {
  .hero {
    min-height: min(calc(100svh - var(--demo-bar-height) - var(--header-height)), 720px);
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  animation: hero-media-zoom var(--dur-hero-zoom) var(--ease-out) 1 forwards;
}

@keyframes hero-media-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img {
    animation: none;
    transform: none; /* 等倍で完全に静止させる（03§8.1 must） */
  }
}

/* 767px以下はhero-sm（800×1200・縦長）に差し替わる。実際の描画結果で検証した
   ところ、縦長スマホ（375×650〜812相当）は画像(800×1200)よりさらに縦長の
   コンテナになるため、cover は常に高さ基準で表示され、縦方向は画像の全体
   （モニター上端〜プローブ下端）がそのまま収まる。つまりこの幅では
   object-positionの縦（Y）成分を変えてもモニターの占有率は変化しない。
   一方でX=50%（中央）だと横方向の余白（左右あわせ約123px相当）がちょうど
   右側のプローブ・ケーブル束にかかって見切れていたため、X=70%にして
   左の壁面側を多めに切り、プローブ側を全て画面内に収める。
   幅が767pxに近く高さの低い端末（タブレット横向き等）では逆にcoverが
   幅基準の表示になり縦方向が切り詰められるため、Y=60%を維持して
   モニター上部の余白より操作パネル側が残るようにする
   （768px以上のhero.webpはcenterのまま変更なし） */
@media (max-width: 767px) {
  .hero__media img {
    object-position: 70% 60%;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--overlay-scrim);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* 下寄せだと余った高さが全部上に溜まり、縦長の端末ほど上部が大きく空く。
     中央寄せにして文字塊を上げる。
     padding-topはヘッダー高を足していたが、ヘッダーはFVの外側で既に高さを
     占めているため二重計上だった。余白ぶんだけにする */
  justify-content: center;
  gap: var(--space-4);
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
  color: var(--color-on-dark);
}

.hero__title {
  color: var(--color-on-dark);
}

.hero__access,
.hero__since {
  color: var(--color-on-dark);
  font-feature-settings: "palt" 1;
}

.hero__access {
  font-weight: var(--fw-body-bold);
}

/* FVのアクセス行は、SPでは「小田急江ノ島線」で必ず折り返して収まりを良くする。
   768px以上は1行に並べ、語間を半角分あける */
@media (max-width: 767px) {
  .hero__access .u-phrase:first-child { display: block; }
}

@media (min-width: 768px) {
  .hero__access .u-phrase + .u-phrase { margin-left: .5em; }
}


.hero__since {
  font-size: var(--fs-small);
  font-weight: var(--fw-body-regular);
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

/* .cta--outlineは既定でcolor/border-colorともに深藍。FVの黒60%
   スクリム上では実測1.0〜1.3:1で不適合のため、生成り側（--color-on-dark＝
   白）に反転する。hoverは反転（白地×深藍文字）、focus-visibleは
   --color-focus-on-darkに切り替える */
.hero .cta--outline {
  color: var(--color-on-dark);
  border-color: var(--color-on-dark);
}
.hero .cta--outline:hover {
  background-color: var(--color-on-dark);
  color: var(--color-primary);
}
.hero .cta--outline:focus-visible {
  outline-color: var(--color-focus-on-dark);
}
.hero .cta--outline:active {
  background-color: var(--color-on-dark);
  color: var(--color-primary);
}

.hero__infobar {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-sm);
  padding-block: var(--space-6) var(--space-8);
}
@media (min-width: 768px) {
  .hero__infobar { padding-inline: var(--pad-md); }
}
@media (min-width: 1280px) {
  .hero__infobar { padding-inline: var(--pad-lg); }
}

/* ==========================================================================
   #features（02 3つの特徴／設備紹介統合）
   ========================================================================== */

.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-7);
}
/* 1280px以上は3列にする（2列だと3枚目が単独で残り右側が空くため） */
@media (min-width: 768px) {
  .feature-list { grid-template-columns: repeat(3, 1fr); }
}

.feature {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.feature__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.feature__title {
  margin-top: var(--space-5);
  margin-inline: var(--space-5);
  text-wrap: balance; /* 見出しの3文字以下孤立行を防ぐ */
}

.feature__body {
  margin-top: var(--space-3);
  margin-inline: var(--space-5);
  margin-bottom: var(--space-5);
  color: var(--color-text);
}

/* 768〜1279pxのみ：3枚とも写真ありになり3列だと1枚あたりが窮屈なため、
   1列・横長カード（画像を左、文字を右）に組み替える。
   .feature の子要素は picture／h3／p の3つのみのため、picture を左カラムに
   2行分（h3・pの行）ぶち抜きで固定し、右カラムへh3とpを縦に積む
   （新しいラッパー要素を増やさずgrid配置だけで組む。1280px以上は上の3列のまま。
   base側の.feature/.feature__img等より後ろに置き、同じ詳細度でも
   後勝ちでこのブロックが有効になるようにする） */
@media (min-width: 768px) and (max-width: 1279px) {
  .feature-list {
    grid-template-columns: 1fr;
  }
  .feature {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .feature picture {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: 100%;
  }
  .feature__img {
    width: 100%;
    /* height:100% + aspect-ratio:auto だと、カードの高さ（本文量）に応じて
       画像の縦横比が1.15〜1.36とばらついて見えるため、比率を固定する */
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .feature__title {
    grid-column: 2;
    grid-row: 1;
    margin-top: var(--space-5);
    margin-inline: var(--space-5);
  }
  .feature__body {
    grid-column: 2;
    grid-row: 2;
    margin-top: var(--space-3);
    margin-inline: var(--space-5);
    margin-bottom: var(--space-5);
  }
}

/* 設備紹介（<details>を廃止し、クラスなしのh3＋.tag-listを常時表示にした
   ブロック）の余白。新しいクラス名は増やさず、既存の.feature-list／
   h3／.tag-listとの位置関係だけで指定する */
#features .feature-list + div {
  margin-top: var(--space-7);
}
#features h3 + .tag-list {
  margin-top: var(--space-4);
}

/* ==========================================================================
   #menu（03 施術メニュー・アプローチ）
   ========================================================================== */

.menu-symptom-intro {
  margin-top: var(--space-7);
}

.menu-symptom-intro__title {
  margin-bottom: var(--space-4);
  text-wrap: balance; /* 見出しの3文字以下孤立行を防ぐ */
}

.menu-list__title {
  margin-top: var(--space-9);
  text-wrap: balance; /* 見出しの3文字以下孤立行を防ぐ */
}

.menu-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
/* 9項目（767px以下1列／768〜1279px2列／1280px以上4列）。
   2列・4列いずれでも1件余るため、最後の1件（.menu-list__item:last-child）を
   全列ぶち抜きの横長カードにして余りを埋める */
@media (min-width: 768px) {
  .menu-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .menu-list { grid-template-columns: repeat(4, 1fr); }
}
.menu-list__item:last-child {
  grid-column: 1 / -1;
}

.menu-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.menu-list__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.menu-list__item-name {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-body-bold);
  color: var(--color-primary);
  text-wrap: balance; /* 見出しの3文字以下孤立行を防ぐ */
}

/* メニュー名は見出し要素ではないが見出しとして機能するため、
   base.css の見出し規則と同じ改行制御を与える */
.menu-list__item-name {
  word-break: auto-phrase;
  line-break: strict;
}


.menu-list__item-summary {
  color: var(--color-text);
}

/* ==========================================================================
   #interior（04 院内のようす）
   ========================================================================== */

.interior-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-7);
}
@media (min-width: 768px) {
  .interior-list { grid-template-columns: repeat(2, 1fr); }
}

.interior-item {
  width: 100%;
}

.interior-item__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.interior-item__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-text);
  text-align: center;
}

/* ==========================================================================
   #first-visit（05 初めての方へ）
   ========================================================================== */

.flow-step-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin-top: var(--space-7);
}
/* 768〜1279pxで4カラムのまま維持されると本文幅142px（1行8文字）
   になり単語が毎行分断されるため、この幅域だけ2カラムに落とす */
@media (min-width: 768px) and (max-width: 1279px) {
  .flow-step-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7) var(--space-5);
  }
  .flow-step:nth-child(2n) {
    border-left: 1px solid var(--color-rule);
    padding-left: var(--space-5);
  }
}
@media (min-width: 1280px) {
  .flow-step-list {
    flex-direction: row;
    /* flex-start だと各ステップが内容の高さに縮み、横1列で下端が揃わない */
    align-items: stretch;
    gap: var(--space-5);
  }
  .flow-step {
    flex: 1 1 0;
  }
  .flow-step + .flow-step {
    border-left: 1px solid var(--color-rule);
    padding-left: var(--space-5);
  }
}

/* 番号と見出しを横並びにする。ラッパーに規則が無く display:block のままだったため
   両方がブロック要素として縦に積まれていた */
.flow-step__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.flow-step__num {
  margin-bottom: 0;
  font-size: var(--fs-h3);
  line-height: 1;
  font-weight: var(--fw-body-bold);
  color: var(--color-accent);
}

.flow-step__title {
  margin-bottom: 0;
  text-wrap: balance; /* 見出しの3文字以下孤立行を防ぐ */
}

.flow-step__body {
  color: var(--color-text);
}

/* ==========================================================================
   #pricing（06 料金・保険のご案内）
   ========================================================================== */

.price-table {
  width: 100%;
  margin-top: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto; /* 375px幅で収まらない場合、表単体にのみ横スクロールを許可する */
  table-layout: fixed; /* 1列目幅を42%に固定するため */
}

/* コンテナ幅（1024px）いっぱいだと2列しかないため金額が表の中央に取り残される。
   表と注記を同じ幅・同じ中央寄せにまとめ、金額は列の右端に寄せる
   （項目は左・金額は右、という価格表の定石。1024px幅のまま左寄せにすると
   表だけが左に取り残されて見えるため、中央に置く。中央寄せはお問い合わせ
   フォームでも使っている配置なのでページ内で一貫する） */
@media (min-width: 768px) {
  .price-table,
  #pricing .price-legal-note,
  #pricing .price-note {
    max-width: 660px;
    margin-inline: auto;
  }
  .price-table thead th:last-child,
  .price-table tbody td {
    text-align: right;
  }
}

/* 区分セル（1列目）の固有名詞・金額セル（2列目）の数値が
   任意の位置で分断されていたため、列幅を固定し破棄行に応じた改行制御を行う */
.price-table th:first-child,
.price-table td:first-child {
  width: 42%;
}
.price-table th {
  word-break: keep-all;
  overflow-wrap: break-word; /* keep-allでも収まらない場合のみ最終手段で折り返す */
}
.price-table td {
  white-space: nowrap;
}

.price-table caption {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: var(--fw-body-bold);
  color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), .04);
}

.price-table th,
.price-table td {
  padding: var(--space-3) var(--space-5);
}
/* 375px幅では1列目が140px程度しかなく、横paddingが40px（space-5×2）
   だと文字の使える幅が不足し、overflow-wrapの最終手段が長音「ー」の直前など
   禁則違反の位置で折り返してしまっていた。767px以下だけpaddingを詰めて
   文字の使える幅を確保する */
@media (max-width: 767px) {
  .price-table th,
  .price-table td {
    padding-inline: var(--space-3);
  }
}

.price-table thead th {
  color: var(--color-primary);
  font-weight: var(--fw-body-bold);
  border-bottom: 2px solid var(--color-border);
}

.price-table tbody th {
  font-weight: var(--fw-body-regular);
  color: var(--color-text);
}

.price-table tbody tr + tr th,
.price-table tbody tr + tr td {
  border-top: 1px solid var(--color-rule);
}

.price-table tbody tr:hover > * {
  background-color: rgba(var(--color-primary-rgb), .03);
}

.price-table--insurance {
  border-style: solid;
}

.price-table--cash {
  border-style: dashed; /* 自費メニューは未確定情報であることを、色に頼らず線種で示す */
}

/* 767px以下：表組みをやめ、1件ずつのカード表示に切り替える。
   theadは視覚的にのみ隠し（display:noneにするとスクリーンリーダーからも
   消えるため使わない）、区分・目安等の列見出しはテキストとして残す */
@media (max-width: 767px) {
  .price-table {
    display: block;
    border: none;
    overflow-x: visible;
  }
  .price-table caption {
    display: block;
  }
  .price-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .price-table tbody {
    display: block;
  }
  .price-table tbody tr {
    display: block;
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
  }
  .price-table tbody th,
  .price-table tbody td,
  .price-table tbody th:first-child,
  .price-table tbody td:first-child {
    /* :first-childを重ねて.price-table th:first-child（列固定用、width:42%）
       より詳細度を上げ、カード内では確実にwidth:autoへ戻す */
    display: block;
    width: auto;
    padding: 0;
    white-space: normal;
  }
  .price-table tbody th {
    margin-bottom: var(--space-2);
    font-weight: var(--fw-body-bold);
    color: var(--color-primary);
  }
  .price-table tbody td {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    font-weight: var(--fw-body-bold);
    color: var(--color-primary);
  }
  .price-table tbody tr + tr th,
  .price-table tbody tr + tr td {
    /* trが自身のborderでカード境界を持つため、行区切り用border-topは重複するので打ち消す */
    border-top: none;
  }
  .price-table--cash tbody tr {
    border-style: dashed; /* 自費メニュー（未確定情報）は線種で区別する */
  }
}

.price-legal-note {
  margin-top: var(--space-2);
  color: var(--color-text);
  font-size: var(--fs-small);
}

.price-legal-note + .price-table {
  margin-top: var(--space-7);
}

/* .price-legal-noteは元は表（罫線で区切られた明確な境界）の直下用。
   #menuのタグ一覧・#interiorの写真グリッドは境界の弱い大きな塊のため、
   同じspace-2（8px）だと注記が直前ブロックに貼り付いて見える。
   この2箇所だけ余白を広げる（色は変更しない） */
#menu .price-legal-note,
#interior .price-legal-note {
  margin-top: var(--space-4);
}

/* .price-noteは<p>のため base.css の p{max-width:40em} を継承し、自身の
   font-size:14px基準で40em=560px相当に固定されていた（1280px・コンテナ
   1024pxでも「骨折」等が幅の途中で割れる原因）。max-width:noneで解除し、
   コンテナ幅（.section__inner）まで使えるようにする */
.price-note {
  max-width: none;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: rgba(var(--color-primary-rgb), .04);
  color: var(--color-text);
  font-size: var(--fs-small);
}

/* ==========================================================================
   #faq（07 よくあるご質問）
   ========================================================================== */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.faq-list__item {
  width: 100%;
}

/* ==========================================================================
   #access（08 アクセス・受付時間）
   ========================================================================== */

.access-map {
  /* widthがautoのままaspect-ratio＋max-heightを併用すると、
     ブラウザがmax-heightで高さを制約した後にaspect-ratioから幅を逆算し、
     1280pxで532px相当まで幅が縮んでいた（写真1024px・住所リスト1024pxと
     不揃いになる原因）。widthを明示することで幅は常にコンテナ幅に揃い、
     高さのみmax-heightで抑えられるようになる */
  width: 100%;
  margin-top: var(--space-7);
  /* 狭い幅では横長。768px以上は情報の隣に置くため正方形にする（下の .access-layout） */
  aspect-ratio: 16 / 9;
  max-height: 300px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* 768px以上は「左に住所・アクセス情報／右に地図」の2カラムにする。
   1カラムだと地図が幅1024px・高さ300px（比率3.4:1）の極端な横長になり、
   地図として位置関係が読み取りにくい。
   基本規則の後ろに置くこと（前に置くと同詳細度で基本規則が後勝ちする） */
@media (min-width: 768px) {
  .access-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-8);
    margin-top: var(--space-7);
  }
  .access-layout__info > :first-child {
    margin-top: 0;
  }
  .access-map {
    margin-top: 0;
    aspect-ratio: 1 / 1;
    max-height: none;
  }
}

.access-map__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.access-info {
  margin-top: var(--space-7);
}

.access-route {
  margin-top: var(--space-4);
  color: var(--color-text);
}

/* 住所・アクセス・受付時間の固有名詞や数値が任意の位置で分断されて
   いたため、767px以下ではラベル・値を縦積みにして値の使える幅を広げ、
   値のCJKテキストはkeep-allで単語途中の改行を避ける
   （最終手段としてoverflow-wrapのみ許可し、横スクロールは発生させない） */
@media (max-width: 767px) {
  .access-info .kv-list__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  /* 修正：.kv-list__value（components.css）のflex: 1 1 200pxは、縦積みでは
     200pxがflex-basis=高さとして効いてしまい、内容が1〜2行でもdd高200pxに
     間延びする（6行合計で約1,020pxの空白）。縦積み時のみ内容に合わせる */
  .access-info .kv-list__value {
    flex: 0 1 auto;
  }
}
.access-info .kv-list__value {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ==========================================================================
   #contact（09 お問い合わせ）
   ========================================================================== */

/* .formはmax-width:640px・中央寄せだが、.contact__telには幅指定が
   なく#contact直下で1024px（section__inner全幅）まで広がっていたため、
   フォームと電話カードの幅・左端が揃っていなかった。同じ640px基準に統一する */
.contact__tel {
  max-width: 640px;
  margin-top: var(--space-7);
  margin-bottom: var(--space-7);
  margin-inline: auto;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.contact__tel-number {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--fs-h2);
  font-weight: var(--fw-body-bold);
  color: var(--color-primary);
}

.contact__tel-note {
  margin-top: var(--space-3);
  color: var(--color-text);
  font-size: var(--fs-small);
}

.contact__form-note {
  margin-top: var(--space-4);
  color: var(--color-text);
  font-size: var(--fs-small);
}

/* 注記だけがセクション左端(128px)から始まり、フォーム(320-960)と揃っていなかった。
   説明対象であるフォームに合わせる */
@media (min-width: 768px) {
  .contact__form-note {
    max-width: 640px;
    margin-inline: auto;
  }
}


/* ==========================================================================
   印刷時の共通ルール（全ページ共通・例外としてこのファイル末尾に1箇所だけ置く。04§1.4）
   デモ帯・住所・電話番号・フッターの院名は隠さない。
   ========================================================================== */

@media print {
  .header,
  .mobile-tel-bar,
  .tel-modal {
    display: none !important;
  }

  .hero__scrim {
    display: none; /* 背景の暗色オーバーレイを外し、インク消費を抑える */
  }
}