/* components.css ── 複数のセクションで使い回す部品
   ── 目次 ──
   ・components.css — 複数セクションで再利用する共通部品

   ── 編集の手引き ──
   ・デモ帯／ヘッダー／CTA／モーダル／フォーム／フッター／モバイルメニュー
   ・部品ごとに「基本 → 幅ごとの上書き」の順で並べる
   ・同じセレクタを sections.css に書かない
   ------------------------------------------------------------------ */

/* ==========================================================================
   components.css — 複数セクションで再利用する共通部品
   正本: docs/03_デザイン定義書.md §9 ／ docs/04_実装仕様書.md §1.4・§2.5.1
   このファイルが所有するのは 04§2.5.1 の一覧に載るクラスのみ。
   特定セクション固有のクラス（sections.cssの管轄）は一切書かない。
   色は tokens.css の変数のみを参照する（生値を直書きしない）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デモ帯（.demo-bar）
   -------------------------------------------------------------------------- */
/* デモ表記は必須だが、画面最上部で2行を占めると「試作物」の印象が先に立ち
   実際のサイトらしさを損なう。ここは1行の短い注記に絞り、詳しい説明は
   フッター（.footer__notice）に集約する */
.demo-bar {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-align: center;
  padding: var(--space-1) var(--pad-sm);
  border-bottom: 1px solid var(--color-rule);
}
/* max-widthを持つ段落はmargin-inline:autoが無いと帯の左端に寄る。
   広い画面ほど中央からずれて見えるため、自動マージンで必ず中央に置く */
.demo-bar > p {
  margin-inline: auto;
}
@media (min-width: 768px) {
  .demo-bar { padding-inline: var(--pad-md); }
}
@media (min-width: 1280px) {
  .demo-bar { padding-inline: var(--pad-lg); }
}

/* オーバースクロール（スマホの引っ張りバウンス）でscrollYが0を下回ると、
   .demo-bar／.headerの生成り面より上（<html>の地）が露出し、そこだけ白い
   隙間に見える。<html>にも同じ生成り面を敷いて隙間を目立たなくする */
html {
  background-color: var(--color-bg);
}

/* --------------------------------------------------------------------------
   2. 追従ヘッダー（.header）
   FV写真に重ねず、写真の上部に独立した帯として置く構成（承認済みワイヤーフレーム）。
   通常状態から常に生成り不透明面＋深藍文字。.header--scrolledは影の付与と
   高さのわずかな縮小のみを担当する（背景・文字色は変えない）。
   非stickyの.demo-barの直後に続く要素として position: sticky を使う。
   これにより .demo-bar と重ならず、.demo-bar が流れ去った後にヘッダーが
   ビューポート上端に固定される。
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-height);
  background-color: var(--color-bg);
  color: var(--color-primary);
  transition: height var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.header--scrolled {
  /* 56px→54pxの2px縮小は視認できないため高さ変化をやめ、影のみで
     スクロール状態を示す（両ブレークポイントで一貫した見え方にするため） */
  box-shadow: var(--shadow-sm);
}

.header-sentinel {
  display: block;
  width: 100%;
  height: 1px;
}

.header__inner {
  height: 100%;
  /* 本文と同じ最大幅（1120px）で中央寄せにすると、1920pxでは左右に約450pxずつ
     空きが出てロゴが画面左端から大きく離れ、ヘッダー全体が中央に寄って見える。
     ヘッダーは画面幅いっぱいに広げ、ロゴを左端・電話を右端に置く */
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--pad-sm);
  display: flex;
  align-items: center;
  /* space-between のままだと3要素が均等に散り、ナビが画面のど真ん中に浮く。
     ロゴとナビを左に寄せ、電話ボタンだけを右端へ送る */
  justify-content: flex-start;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .header__inner { padding-inline: var(--pad-md); gap: var(--space-4); }
}
@media (min-width: 1280px) {
  .header__inner { padding-inline: var(--pad-lg); }
}
/* 767px以下：電話ボタンとハンバーガーを右端に隣接させる（中央寄せ禁止）。
   .header__navが非表示になり残る3項目（ロゴ／電話／ハンバーガー）を
   space-betweenのままにすると電話ボタンが中間に浮くため、ロゴ側の
   margin-right:autoで残りスペースを吸収し、電話とハンバーガーを右へ寄せる */
@media (max-width: 767px) {
  .header__inner { justify-content: flex-start; }
  .header__logo { margin-right: auto; }
}

.header__logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-height: 48px;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.header__logo:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.header__logo-ja {
  font-weight: var(--fw-body-bold);
  font-size: var(--fs-body);
  white-space: nowrap;
}
.header__logo-en {
  display: none;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .header__logo-en { display: block; }
}

/* 767px以下は導線をハンバーガーへ一本化するため.header__nav自体を隠す */
.header__nav {
  margin-inline-start: auto;   /* ナビ以降を右へ寄せ、電話ボタンと一組にする */
  display: none;
}
@media (min-width: 768px) {
  .header__nav { display: block; }
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
/* 幅に応じてラベルを育てる。狭い画面は短縮形、768px以上は正式名称 */
.header__nav-label--full { display: none; }

.header__nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--space-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-body-bold);
  letter-spacing: .04em;
  white-space: nowrap; /* ナビラベルは折り返さない（折り返すと下線位置がラベル行ごとに崩れるため） */
  transition: color var(--dur-fast) var(--ease-standard);
}
/* 下線はラベルの<span>基準で伸ばす。リンク自体はヘッダー高に引き伸ばされ
   幅ごとに高さが変わるため、リンク基準（::after）だと位置がずれて文字に
   重なっていた。<span>自身のboxを基準にすればラベル幅・文字サイズに
   常に追従する。表示中のラベルは--short/--fullで幅ごとに切り替わるため、
   どちらのspanにも効く子孫結合子（> span）で指定する */
.header__nav-link > span {
  /* displayはここで指定しない：指定すると.header__nav-label--short/--full の
     display:none/inlineより詳細度で上回り、ラベル出し分けを壊してしまう
     （spanの既定displayはinlineのままでよく、position:relativeは
     inline要素でも::afterの位置基準として機能する） */
  position: relative;
  line-height: 1;
}
.header__nav-link > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--space-2));
  height: 2px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.header__nav-link:hover { color: var(--color-accent); }
.header__nav-link:hover > span::after,
.header__nav-link:active > span::after { transform: scaleX(1); }
.header__nav-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .header__nav-list { gap: var(--space-2); }
  .header__nav-label--short { display: none; }
  .header__nav-label--full { display: inline; }
  .header__nav-link {
    font-size: var(--fs-body);
    font-weight: var(--fw-body);
    padding-inline: var(--space-2);
  }
}
@media (min-width: 1280px) {
  .header__nav-list { gap: var(--space-3); }
}

.header__cta {
  flex-shrink: 0;
}
/* 後方の.ctaルール（padding: space-3 space-6）と詳細度が同点で後勝ちになるため、
   複合セレクタで詳細度を上げてモバイル時のみ横paddingを詰める */
.cta.header__cta {
  padding-inline: var(--space-3);
}
.header__cta-icon {
  width: 20px;
  height: 20px;
}
.header__cta-label {
  display: none;
}
@media (min-width: 768px) {
  .cta.header__cta { padding-inline: var(--space-6); }
  .header__cta-label { display: inline; }
}

/* 768〜1279pxのみ：ロゴ（英字表記）＋ナビ（5項目・正式名称・折り返し禁止）＋電話CTAの
   3つがheader__innerの幅に収まりきらず横スクロールが発生するため、
   この幅域だけ短縮ラベルに戻し、余白・CTAのpaddingを1段階詰めて幅を確保する。
   隣接間隔（.header__nav-list の gap）は16px以上を保つ。
   base側の各ルールより後ろに置き、同じ詳細度でも後勝ちで有効にする
   （1280px以上は元の正式名称・元の余白のまま） */
@media (min-width: 768px) and (max-width: 1279px) {
  /* この幅域は5項目の正式名称が収まらないため短縮ラベルを使う。
     さらに電話ボタンをアイコンのみに縮退させ、左右の余白を確保する
     （文字付きのままだと余白が8pxまで削られ、ロゴが画面端に張り付いていた） */
  .header__inner { padding-inline: var(--pad-md); gap: var(--space-3); }
  .header__nav-label--short { display: inline; }
  .header__nav-label--full { display: none; }
  .header__nav-list { gap: var(--space-3); }
  /* 2文字のラベル（特徴・料金）が43px幅となり推奨44pxをわずかに下回るため、
     最小幅を確保する */
  .header__nav-link { padding-inline: var(--space-1); min-width: 48px; }
  .header__cta-label { display: none; }
  .cta.header__cta { padding-inline: 0; min-width: 48px; }
}

/* --------------------------------------------------------------------------
   2b. ハンバーガーメニュー切替ボタン（.header__menu-toggle）
   767px以下でのみ表示。768px以上は.header__navが常設のため不要。
   -------------------------------------------------------------------------- */
.header__menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  min-height: 48px;
  min-width: 48px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  transition: color var(--dur-fast) var(--ease-standard);
}
.header__menu-toggle-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.header__menu-toggle-icon svg {
  width: 100%;
  height: 100%;
}
.header__menu-toggle:hover {
  color: var(--color-accent);
}
.header__menu-toggle:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .header__menu-toggle { display: none; }
}

/* --------------------------------------------------------------------------
   2c. モバイルメニューパネル（#mobile-menu.mobile-menu）
   ヘッダー直下から降りる全画面ドロワー。767px以下でのみJSから開閉される
   （768px以上への拡大時はJSが強制的に閉じる）。背景は不透明な生成り面にし、
   本文が透けないようにする（tel-modalと同じ、hiddenを確実に効かせる方式）。
   -------------------------------------------------------------------------- */
.mobile-menu {
  /* position:fixed + top:header-heightだと、.demo-bar分ヘッダーが下に押し
     下げられている（未スクロール／ヘッダーがまだstickyで固定されていない）
     間はパネルの開始位置がヘッダーの途中に食い込み、ヘッダーの操作ボタンや
     ロゴが隠れてしまっていた。position:staticのままヘッダー直後に自然に
     続けることで、.demo-barの表示有無やスクロール位置に関わらず常にヘッダー
     直下から始まる。min-height:100svhで、開いている間（JSがhtml/bodyの
     スクロールを止める）に背後のセクションが下に透けて見えないようにする */
  position: fixed;
  inset: 0;
  z-index: 90;                 /* ヘッダー(100)より下。開いている間もヘッダーを操作できる */
  padding-top: var(--mobile-menu-offset);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-bg);
}
/* メニューを開くとJSが html に overflow:hidden を掛けるため、sticky のヘッダーが
   viewport に追従しなくなり画面外へ流れてしまう。開いている間だけ fixed にして
   上端に固定し、ロゴ・電話・ハンバーガーを操作可能なまま保つ */
.is-menu-open .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* 線画アイコンは48pxのタップ領域の中で中央に置かれるため、塗りの電話ボタンと
   並べると見た目だけ右端から引っ込んで見える（実測38px空き）。
   負のマージンでアイコンの見た目の右端をロゴの左余白と揃える。
   タップ領域48pxはそのまま維持する */
.header__menu-toggle {
  margin-inline-end: -18px;
}

.mobile-menu[hidden] {
  /* hidden属性を実際に効かせる（自前でdisplayを持たせているため明示が必要） */
  display: none;
}

.mobile-menu__nav {
  padding: var(--space-2) var(--pad-sm) var(--space-6);
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
}

.mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-block: var(--space-3);
  font-size: var(--fs-body);
  font-weight: var(--fw-body-bold);
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-rule);
  transition: color var(--dur-fast) var(--ease-standard);
}
.mobile-menu__list li:last-child .mobile-menu__link {
  border-bottom: none;
}
.mobile-menu__link:hover {
  color: var(--color-accent);
}
.mobile-menu__link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -2px;
}

/* メニュー表示中の背景スクロール固定（.is-modal-openと同じ考え方。JSが<html>に付与） */
html.is-menu-open,
html.is-menu-open body {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. CTAボタン（.cta / .cta--solid / .cta--outline / .cta__icon）
   -------------------------------------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  min-width: 48px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body-bold);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.cta:disabled,
.cta[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

.cta__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ---- 主ボタン：塗りつぶし（朱地・白文字） ---- */
.cta--solid {
  background-color: var(--color-accent);
  color: var(--color-on-dark);
  border: none;
}
.cta--solid:hover {
  background-color: var(--color-accent-hover);
}
.cta--solid:focus-visible {
  /* 塗りの内側にリング。外側だと深藍×朱＝2.60:1で不適合（03§3.3 must） */
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: -4px;
}
.cta--solid:active {
  background-color: var(--color-accent-hover);
  transform: scale(.98);
}
.cta--solid:disabled,
.cta--solid[aria-disabled="true"] {
  transform: none;
}

/* ---- 副ボタン：輪郭線 ---- */
.cta--outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.cta--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}
.cta--outline:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.cta--outline:active {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
  transform: scale(.98);
}
.cta--outline:disabled,
.cta--outline[aria-disabled="true"] {
  transform: none;
}

/* --------------------------------------------------------------------------
   4. セクション見出し導入部（.section-intro）／セクション末尾CTA（.section-cta）
   レイアウトのみ。
   -------------------------------------------------------------------------- */
.section-intro {
  margin-bottom: var(--space-8);
}
.section-intro__title {
  position: relative;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  text-wrap: balance; /* 見出しの3文字以下孤立行を防ぐ */
}
.section-intro__title::after {
  /* h2直下の強調罫（03§7.3） */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 2px;
  background-color: var(--color-border);
}
.section-intro__lead {
  margin-top: var(--space-4);
  color: var(--color-text);
}

/* .section-cta は<p>のため base.css の p{max-width:40em} を継承し、
   text-align:centerだけでは箱自体が左に寄って見える。箱ごと中央に置く */
.section-cta {
  margin-top: var(--space-8);
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   5. タグ（.tag-list / .tag）
   -------------------------------------------------------------------------- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
/* .tagは<li>で対話要素ではないため、押せそうに見える:hover/:active と
   当たり判定拡張の::afterは削除した（:focus-visibleは将来の対話化に備え維持） */
.tag:focus-visible {
  background-color: var(--color-bg);
  color: var(--color-primary);
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. キー・バリューリスト（.kv-list）
   FV実用バー（--on-scrim）とアクセス欄で共用。レイアウトが主目的。
   -------------------------------------------------------------------------- */
.kv-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-rule);
}
.kv-list__row:last-child {
  border-bottom: none;
}
.kv-list__key {
  flex: 0 0 auto;
  min-width: 4.5em;
  font-weight: var(--fw-body-bold);
  color: var(--color-primary);
}
.kv-list__value {
  flex: 1 1 200px;
}
.kv-list__value button {
  /* 見出し側（.kv-list__key）と同じ太さだと項目名と値の区別が付かない。
     押せることは下線と色で示し、太さは本文と揃える */
  font-weight: var(--fw-body);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-fast) var(--ease-standard);
}
.kv-list__value button:hover {
  text-decoration-color: currentColor;
}

/* ---- 写真オーバーレイ上の明色バリアント ---- */
.kv-list--on-scrim {
  color: var(--color-on-dark);
}
.kv-list--on-scrim .kv-list__key {
  color: var(--color-on-dark);
}
.kv-list--on-scrim .kv-list__value button:focus-visible,
.kv-list--on-scrim .kv-list__key:focus-visible {
  /* 深藍地の上では既定の--color-focusは不適合。明色リングに切り替える */
  outline-color: var(--color-focus-on-dark);
}

/* --------------------------------------------------------------------------
   7. `<details>` 開閉ブロック（.details-block）
   施術メニュー・設備紹介・FAQで共用。
   -------------------------------------------------------------------------- */
.details-block {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
}

.details-block__summary {
  /* 右のシェブロン分の余白をpadding-inline-endで確保せず、
     grid（本文列1fr／アイコン列auto）で確保し本文の使える幅を最大化する */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  min-height: 48px;
  padding: var(--space-4) var(--space-2);
  cursor: pointer;
  font-weight: var(--fw-body-bold);
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.details-block__summary::-webkit-details-marker {
  display: none;
}
.details-block__summary::marker {
  content: "";
}
.details-block__summary:hover {
  background-color: rgba(var(--color-primary-rgb), .04);
}
.details-block__summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: -2px;
}
/* 押下時の視覚差は付けない（03§9.3 状態表） */

.details-block__summary-text {
  flex: 1 1 auto;
  text-wrap: balance; /* 見出し的なsummary文の3文字以下孤立行を防ぐ */
}

.details-block__summary-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform var(--dur-base) var(--ease-standard);
}
.details-block[open] .details-block__summary-icon {
  /* シェブロン(∨)を反転させて∧にするにはrotate(180deg)が正しい。
     45degでは斜めの折れ線（L字の破片）になってしまっていた */
  transform: rotate(180deg);
}

.details-block__body {
  /* grid-template-rows: 0fr → 1fr で高さをアニメーションする。
     height: auto は直接アニメーションできないため使わない（03§9.3 must） */
  display: grid;
  grid-template-rows: 0fr;
  grid-auto-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-standard),
              grid-auto-rows var(--dur-base) var(--ease-standard);
}
.details-block[open] .details-block__body {
  grid-template-rows: 1fr;
  grid-auto-rows: 1fr;
}
.details-block__body > * {
  min-height: 0;
  padding: 0 var(--space-2) var(--space-4);
}
.details-block__body > * + * {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   8. デモフォーム（.form / .field / .form__submit / .form__result）
   -------------------------------------------------------------------------- */
.form {
  /* 電話カード（1024px幅）・送信ボタンと幅の基準を揃えるため640pxで
     中央寄せに統一する（従来は480px・左寄せで、右側が間延びしていた） */
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 640px;
  margin-inline: auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
  font-weight: var(--fw-body-bold);
}
.field__required,
.field__optional {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-body-bold);
}
.field__required {
  background-color: var(--color-accent);
  color: var(--color-on-dark);
}
.field__optional {
  /* --color-borderは非テキストUI境界用トークン（3:1想定）でテキスト
     色には不適合（生成り地で3.31:1）。テキストなので--color-textに変更 */
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.field__control {
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.field__control::placeholder {
  /* --color-borderは非テキスト用トークンでAA不適合だったため、
     --color-textを70%不透明度にして使う（生成り地で実測4.5:1以上） */
  color: var(--color-text);
  opacity: .7;
}
.field__control:focus-visible {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
/* エラー：ブラウザ標準検証と連動する擬似クラスのみで判定する（独自エラークラスは持たない） */
.field__control:invalid:not(:placeholder-shown),
.field__control:user-invalid {
  border: 2px solid var(--color-accent);
}
.field__control:disabled {
  opacity: .5;
}

.form__submit {
  /* 送信ボタンを入力欄と同幅にするため、768px以上でのalign-self:
     flex-start切り替え（幅が約115pxに縮む原因）を廃止し常にstretchにする */
  align-self: stretch;
}

.form__result {
  color: var(--color-primary);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   9. tel:確認モーダル（.tel-modal）
   -------------------------------------------------------------------------- */
.tel-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background-color: var(--overlay-scrim);
}
.tel-modal[hidden] {
  /* hidden属性を実際に効かせる（自前でdisplayを持たせているファイルなので明示が必要） */
  display: none;
}

.tel-modal__panel {
  width: min(100%, 420px);
  max-height: 100%;
  overflow-y: auto;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: var(--space-7) var(--space-6);
}

.tel-modal__title {
  margin-bottom: var(--space-4);
  text-wrap: balance; /* 見出しの3文字以下孤立行を防ぐ */
}
.tel-modal__text {
  color: var(--color-text);
  margin-bottom: var(--space-6);
}
.tel-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.tel-modal__cancel,
.tel-modal__confirm {
  flex: 1 1 0;
}

/* モーダル表示中の背景スクロール固定（04§4.7。JSが<html>に付与するトークン） */
html.is-modal-open,
html.is-modal-open body {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   10. スマホ下部電話バー（.mobile-tel-bar）
   767px以下でのみ表示。768px以上は表示しない。
   -------------------------------------------------------------------------- */
.mobile-tel-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  min-height: 56px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.mobile-tel-bar.is-visible {
  transform: translateY(0);
}
@media (min-width: 768px) {
  .mobile-tel-bar { display: none; }
}
/* ハンバーガーメニュー表示中は隠す。.mobile-menuが通常フローでヘッダー直後に
   続く構成のため開くと#heroが画面外に押し下げられ、IntersectionObserverが
   「#hero非表示」と判定してこのバーも同時に出てしまうのを防ぐ */
html.is-menu-open .mobile-tel-bar {
  display: none;
}

.mobile-tel-bar__cta {
  width: 100%;
  min-height: 56px;
  background-color: var(--color-primary);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-md);
}
.mobile-tel-bar__cta:hover {
  background-color: color-mix(in srgb, var(--color-primary) 94%, var(--color-bg) 6%);
  box-shadow: var(--shadow-md);
}
.mobile-tel-bar__cta:active {
  background-color: color-mix(in srgb, var(--color-primary) 90%, var(--color-bg) 10%);
  box-shadow: var(--shadow-sm);
  transform: none;
}

/* --------------------------------------------------------------------------
   11. フッター（.footer）
   -------------------------------------------------------------------------- */
.footer {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}
.footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-9) var(--pad-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .footer__inner { padding-inline: var(--pad-md); }
}
@media (min-width: 1280px) {
  .footer__inner { padding-inline: var(--pad-lg); }
}

.footer__company {
  line-height: var(--lh-body);
}

.footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
/* デスクトップの横並びがそのまま折り返すと「4件／3件／1件」の不揃いな3行になり
   間延びして見える。狭い幅では2カラムのグリッドに整える */
@media (max-width: 767px) {
  .footer__nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 行間を4pxにすると48px高の項目が密着して誤タップしやすい */
    gap: var(--space-2) var(--space-4);
  }
  /* リンクがセル幅（160px）を埋めず34pxしかなく、タップ領域が幅方向に
     不足していた。セル全体を押せるようにする */
  .footer__nav-list li {
    display: flex;
  }
  .footer__nav-list a {
    flex: 1;
  }
}
.footer__nav-list a {
  min-width: 44px;   /* 2文字のリンク（特徴・院内・料金）が34px幅で推奨44pxを下回っていた */
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-fast) var(--ease-standard);
}
.footer__nav-list a:hover {
  text-decoration-color: currentColor;
}
.footer__nav-list a:focus-visible {
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: 2px;
}

.footer__notice,
.footer__privacy {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* .contact__tel-numberは既定でcolor: var(--color-primary)（深藍）。
   フッター背景も深藍のため、フッター内でのみ反転する（#contact内は維持）。
   focus-visibleは.footer__nav-list aと同じ生成り側リングに切り替える */
.footer .contact__tel-number {
  color: var(--color-on-dark);
}
.footer .contact__tel-number:hover {
  color: var(--color-focus-on-dark);
}
.footer .contact__tel-number:focus-visible {
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: 2px;
}

/* ---- 先頭へ戻る（.footer__totop）：深藍地の上で読める白文字＋輪郭線。
   タップ領域は48px以上を維持しつつ、文字サイズと余白を詰めて控えめにする
   （白文字/深藍地は実測13:1以上でコントラストに余裕があるため縮小しても4.5:1を満たす） ---- */
.footer__totop {
  display: inline-flex;
  align-self: flex-start;   /* 他の要素と左端を揃える。中央寄せは自分だけ浮いて見える */
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  min-width: 48px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-on-dark);
  border-radius: var(--radius-md);
  color: var(--color-on-dark);
  font-size: var(--fs-small);
  font-weight: var(--fw-body-bold);
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.footer__totop:hover {
  background-color: var(--color-on-dark);
  color: var(--color-primary);
}
.footer__totop:focus-visible {
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: 2px;
}

/* 固定電話バー（mobile-tel-bar）とフッター最終行のクリアランスが
   0pxだったため、767px以下でセーフエリア分をpadding-bottomに加算する */
@media (max-width: 767px) {
  .footer__inner {
    padding-bottom: calc(var(--space-9) + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   12. 404ページ案内ブロック（.not-found）
   -------------------------------------------------------------------------- */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-5);
  padding: var(--space-11) var(--pad-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
}
.not-found__title {
  color: var(--color-primary);
  text-wrap: balance; /* 見出しの3文字以下孤立行を防ぐ */
}
.not-found__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-accent);
  color: var(--color-on-dark);
  border-radius: var(--radius-md);
  font-weight: var(--fw-body-bold);
  transition: background-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.not-found__link:hover {
  background-color: var(--color-accent-hover);
}
.not-found__link:focus-visible {
  outline: 3px solid var(--color-focus-on-dark);
  outline-offset: -4px;
}
.not-found__link:active {
  background-color: var(--color-accent-hover);
  transform: scale(.98);
}