@charset "UTF-8";
/* ==========================================================================
   sections.css — セクション固有スタイル（p-* 接頭辞）と背景リズム
   合資会社 田野モータース 様 デザイン提案用デモサイト

   担当範囲：p-* クラスのみ。l-* / c-* の再定義はしない
   （spacing・レイアウト構成のための最小限のコンテキスト調整を除く）。

   ⚠️ 新しい色を発明しない。すべて variables.css のトークンのみを使う。
   ⚠️ 色の組み合わせは 設計書 §4.2 の対応表のみを根拠とする。
   ⚠️ .is-dark 面では --ink / --ink-muted を文字色に使わない
      （--ink-on-dark / --ink-muted-on-dark / --accent-on-dark のみ）。
      例外：暗色面の中にある白い「島」（例：S9フォーム入力欄）は、
      その島自体の背景が --surface-2 のため --ink を使ってよい。

   背景リズム（設計書 §6.0）
   S1 ヒーロー＝写真+navy-900 α.72（暗）／S1帯 p-reasons＝navy-900（暗）
   S2 p-service＝surface／S3 p-onestop＝navy-700（暗・主軸）
   S4 p-shaken＝surface／S5 p-faq＝surface-2／S6 p-price＝surface
   S7 p-flow＝surface-2／S8 p-company＝surface／S9 p-contact＝navy-900（暗）
   ========================================================================== */


/* ==========================================================================
   S1  ヒーロー — p-hero（暗／写真+オーバーレイ）
   ⚠️ オーバーレイのα値は設計書 §4.3 の確定値を厳守（絶対下限 .72 を下回らせない）。
   ⚠️ ズーム演出は animations.css の担当。ここでは object-fit のみ。
   ========================================================================== */
.p-hero {
  position: relative;
  min-height: min(100svh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--ink-on-dark);
  /* 画像読み込み前後のフォールバック地色（白フラッシュ防止） */
  background-color: var(--navy-900);
}

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

.p-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-hero__overlay {
  position: absolute;
  inset: 0;
  /* 設計書 §4.3 確定値。加算方向のグラデーションのみ。単色部分は
     variables.css の --hero-overlay（rgba(15,39,64,.72)）を単一の根拠とする。 */
  background:
    linear-gradient(180deg, rgba(15, 39, 64, .18) 0%, rgba(15, 39, 64, 0) 45%),
    var(--hero-overlay);
}

.p-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  /* テキストは縦中央〜やや下（align-items:flex-end ＋ 上下パディング） */
  padding-block: var(--sp-10) var(--section-py);
}

.p-hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
}

.p-hero__line {
  display: block;
}

.p-hero__lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-body);
  max-width: 42em;
}

.p-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* ⚠️ 2026-09-04：ヒーローの2つのCTAは「高さも幅も完全一致」させる（施主指摘）。
   flex から grid に変えたのはこのため。flex では各ボタンが自分の内容幅に
   なるので、文言の長さの差がそのまま幅の差（実測 240px 対 228px）になる。
   grid なら列幅が「広いほうのボタン」に揃い、両方がその幅にストレッチする。
   ⚠️ 幅を数値で直書きしていないのは意図的。ボタンの文言を書き換えたときに
      自動で追従させるため。数値で固定すると、文言を伸ばした瞬間に片方だけ
      はみ出す／揃わなくなる、という形で静かに壊れる。 */
.p-hero__cta {
  display: grid;
  /* モバイル：1列に縦積み。列幅は広いほうのボタンに合わせる。
     minmax(0, ...) にしてあるのは、将来文言が伸びて画面幅を超えたときに
     はみ出さず縮む（横スクロールを作らない）ようにするため。 */
  grid-template-columns: minmax(0, max-content);
  gap: var(--sp-4);
  margin-top: var(--sp-2);
  max-width: 100%;
}

@media (min-width: 640px) {
  .p-hero__cta {
    /* 横並び。1fr を2本にすると、grid 全体が max-content 幅のときに
       両列とも「広いほうの列」の幅に揃う（fr の性質）。 */
    grid-template-columns: repeat(2, 1fr);
    width: max-content;
  }
}

/* 高さ：電話CTAは設計書§5.1で最小56pxと決まっており、これを48pxへ下げると
   その要件を割る。そこで対の「無料見積りを相談する」側を56pxへ引き上げて
   揃えた。逆向き（電話CTAを48pxへ）にしなかったのはこのため。
   本文中の電話CTAはヒーローのこの1つだけ（S3・S4のものは削除した）。 */
.p-hero__cta .c-btn {
  min-height: 56px;
}


/* ==========================================================================
   S1帯  その理由（3カラム） — p-reasons（暗／navy-900）
   見出し：--accent-on-dark（navy-900上 4.97:1 ✅）／本文：--ink-on-dark
   ========================================================================== */
.p-reasons {
  background-color: var(--navy-900);
  color: var(--ink-on-dark);
  padding-block: var(--section-py);
}

.p-reasons__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

@media (min-width: 1024px) {
  .p-reasons__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
  }
}

.p-reasons__item::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  border-radius: var(--r-pill);
  background-color: var(--accent-on-dark);
  margin-bottom: var(--sp-4);
}

.p-reasons__title {
  font-size: var(--fs-h3);
  color: var(--accent-on-dark);
  margin-bottom: var(--sp-3);
}

.p-reasons__text {
  color: var(--ink-on-dark);
  font-size: var(--fs-body);
}


/* ==========================================================================
   S2  サービス一覧 — p-service（明／surface）
   ========================================================================== */
.p-service {
  background-color: var(--surface);
  padding-block: var(--section-py);
}

.p-service__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (min-width: 640px) {
  .p-service__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-service__item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.p-service__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.p-service__body {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
}

.p-service__name {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

.p-service__body p {
  color: var(--ink);
}

/* セクション末尾の注記2件（c-disclaimer--note）と一覧の間隔 */
.p-service__list + .c-disclaimer {
  margin-top: var(--sp-6);
}


/* ==========================================================================
   S3  車のことが、ここで全部 ★主軸 — p-onestop（暗／navy-700）
   ⚠️ --accent-on-dark は navy-700 上 3.86:1（大テキスト／非テキストのみ）。
      本文中の強調は白の700で行う（本文段落は --ink-on-dark）。
   ========================================================================== */
.p-onestop {
  background-color: var(--navy-700);
  color: var(--ink-on-dark);
  padding-block: var(--section-py);
}

.p-onestop__body {
  margin-top: var(--sp-6);
  color: var(--ink-on-dark);
  font-size: var(--fs-body);
}

.p-onestop__body strong {
  color: var(--ink-on-dark);
  font-weight: 700;
}

/* フロー：モバイルは縦積み＋下向きシェブロン、PC(1024px〜)は横並び＋右向きシェブロン。
   矢印はテキストではなく border 2辺を回転させた装飾図形（非テキスト・3:1要件）。 */
.p-onestop__flow {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

.p-onestop__step {
  position: relative;
  background-color: var(--surface-on-dark);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-pill);
  padding: var(--sp-3) var(--sp-5);
  text-align: center;
  color: var(--ink-on-dark);
  font-weight: 500;
}

.p-onestop__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  margin-top: calc(var(--sp-8) / 2 - 5px);
  border-top: 3px solid var(--accent-on-dark);
  border-right: 3px solid var(--accent-on-dark);
  transform: translateX(-50%) rotate(135deg);
}

@media (min-width: 1024px) {
  .p-onestop__flow {
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-8);
  }

  .p-onestop__step {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .p-onestop__step:not(:last-child)::after {
    left: 100%;
    top: 50%;
    margin-top: 0;
    margin-left: calc(var(--sp-8) / 2 - 5px);
    transform: translateY(-50%) rotate(45deg);
  }
}

.p-onestop__all {
  margin-top: var(--sp-6);
  text-align: center;
  color: var(--ink-on-dark);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
}

/* ⚠️ 2026-09-04：電話CTAを削除して「無料見積りを相談する」1つだけになったので、
   中央に置く（施主指摘）。2つ並んでいたときは左揃えで本文と頭が揃っていたが、
   1つだけ左端に取り残されると、消し忘れのように見える。 */
.p-onestop__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}


/* ==========================================================================
   S4  車検 ─ 指定工場と認証工場の違い — p-shaken（明／surface）
   ⚠️ 比較広告ではなく制度説明。当社側カードは accent の左ボーダーで強調。
   ========================================================================== */
.p-shaken {
  background-color: var(--surface);
  padding-block: var(--section-py);
}

/* ⚠️ 2026-09-04 是正（施主指摘）：この図は「認証工場」「指定工場（当社）」等の
   文字を含む説明図であり、装飾写真ではない。
   経緯：
     1. 当初はラスター画像 shaken_image.jpg（1600x692）。375px幅では表示343px＝
        自然サイズの21.4%まで縮み、原寸22pxのラベルが実効4.7px相当になって
        判読不能だった。
     2. 横スクロール領域に入れて縮小率に下限（min-width:800px）を設ける対処を
        入れたが、施主から「切れて失敗しているように見える」と指摘。図を
        スクロールさせること自体が解決になっていなかった。
     3. SVGで作り直して解決。文字が実テキストなのでどの幅でも潰れず、
        スクロールも不要になった。

   実測（ブラウザで getBoundingClientRect / 2026-09-04）：
     375px幅  → narrow 341x534、本文30単位が実効 17.1px
     640px幅  → wide   587x230、本文28単位が実効 13.7px（全幅中の最小値）
     1024px幅 → wide   945x370、実効 22.0px
     1280px幅 → wide  1022x400、実効 23.8px
   旧JPEGは375px幅で実効4.7px相当だった。
   ⚠️ この変更で、ページ内から横スクロールする要素が完全に無くなった
      （375/640/768/1024/1280 のいずれでも、overflow-x:auto かつ
      scrollWidth>clientWidth の要素は0件）。横スクロールを再導入するなら、
      「横にスクロールできます」と利用者に見える形で明示すること。
      黙って切れていると、崩れて失敗しているようにしか見えない。
   ⚠️ 縦横比が版によって違う（narrow 600x940 / wide 1200x470）。既定は
      narrow の比を持ち、640px以上で wide の比に切り替える（responsive.css）。
      読み込み前後のレイアウトシフトを防ぐため、aspect-ratio は必ず
      <source>/<img> の width・height と一致させること。 */
.p-shaken__figure {
  display: block;
  margin-block: var(--sp-8);
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* <picture> は既定で display:inline のため、中の <img> の下に
   inline 由来の余白（line-height 分）が出て枠線との間に隙間ができる。 */
.p-shaken__figure picture {
  display: block;
}

.p-shaken__diagram {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 600 / 940;   /* narrow 版。640px〜は responsive.css で上書き */
}

.p-shaken__compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (min-width: 640px) {
  .p-shaken__compare {
    grid-template-columns: 1fr 1fr;
  }
}

.p-shaken__col {
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}

.p-shaken__col--own {
  border-left: 4px solid var(--accent);
  /* --accent (#B25214) の 5% の微かな背景。文字は引き続き --ink のため
     コントラストへの影響は無視できる（surface-2上 17.40:1 が実質維持される）。
     ⚠️ 2026-09-04 是正：rgba()はカスタムプロパティを直接展開できないため
        hexを手動でrgba化した値をここに置いているが、2026-08-18のaccent是正
        （旧hex→#B25214）にこの値が追従しておらず、旧hexの5%のまま残って
        いた（伝播漏れ）。下の値を #B25214 の rgba 表現（R=178, G=82, B=20）
        に更新し、コメントの旧hex表記も現在値へ修正した。 */
  background-color: rgba(178, 82, 20, .05);
}

.p-shaken__colname {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-bottom: var(--sp-4);
}

.p-shaken__ours {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.p-shaken__dl {
  display: grid;
  grid-template-columns: minmax(6.5em, auto) 1fr;
  column-gap: var(--sp-4);
}

.p-shaken__dl dt {
  padding-top: var(--sp-3);
  color: var(--ink-muted);
  font-weight: 500;
  font-size: var(--fs-small);
}

.p-shaken__dl dd {
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
  color: var(--ink);
}

.p-shaken__dl dt:not(:first-of-type),
.p-shaken__dl dd:nth-of-type(n + 2) {
  border-top: 1px solid var(--border);
}

.p-shaken__note {
  margin-top: var(--sp-8);
}

.p-shaken__note p:first-child {
  color: var(--ink);
  font-size: var(--fs-body);
}

/* .p-shaken__cta は 2026-09-04 に削除した（S4の電話CTAを廃止したため、
   このラッパー自体が存在しなくなった）。空セレクタを残すと、後から読む人が
   「効いているはず」と誤解するので消す。経緯は index.html の該当箇所の
   コメントを参照。 */


/* ==========================================================================
   S5  よくあるご質問 — p-faq（明／surface-2）
   ========================================================================== */
.p-faq {
  background-color: var(--surface-2);
  padding-block: var(--section-py);
}

.p-faq .c-faq {
  margin-top: var(--sp-8);
}


/* ==========================================================================
   S6  料金の目安 — p-price（明／surface）
   ========================================================================== */
.p-price {
  background-color: var(--surface);
  padding-block: var(--section-py);
}

/* ⚠️ layout.css が .p-price__scroll / .p-price__table に対して
   overflow-x:auto / min-width:480px を無条件（メディアクエリなし）で
   定義している。CSSの縦断カスケードはプロパティ単位で行われるため、
   ここで同名プロパティを「書かない」だけでは打ち消せず、layout.css側の
   値がモバイル幅にも漏れて残ってしまう。そのためモバイル既定では
   明示的にリセット値を書き、640px〜のメディアクエリ側で元の値を
   明示的に再定義する（値を省略して層に委ねない）。 */
.p-price__scroll {
  margin-top: var(--sp-8);
  overflow-x: visible;
  -webkit-overflow-scrolling: auto;
}

.p-price__table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

/* ------------------------------------------------------------------------
   モバイル（〜639px・既定）
   3列表をそのまま横スクロールに逃がすと、375px幅では各行右端の「サンプル」
   チップが画面外に隠れ、横スクロールしないと見えない（設計書§6.7が意図する
   誠実表示が機能しない）。S4 .p-shaken__dl が採る「モバイルは横スクロールに
   頼らず縦積みで全情報を初期表示する」方針と統一し、theadを隠して
   tbody tr をラベル（th）＋金額（td）の2カラムgrid（.p-shaken__dl と同じ
   minmax(6.5em, auto) 1fr）に変形する。
   ------------------------------------------------------------------------ */
.p-price__table thead {
  display: none;
}

.p-price__table tbody {
  display: block;
}

/* ⚠️ 2026-09-04 是正（施主指摘：モバイルでレイアウトが崩れている）。
   以前は各 tr を `display: grid; grid-template-columns: minmax(6.5em, auto) 1fr`
   の2カラムにしていたが、**grid コンテナが tr 単位なので列幅が行ごとに
   独立して決まる**。そのため実測で
       軽自動車        → 110.5px / 216.5px（金額の左端 x=143）
       小型車（〜1.5t） → 133.2px / 193.8px（金額の左端 x=165）
   と金額の開始位置がズレ、さらに残り幅の差で「サンプル」チップの折返し方も
   行ごとに変わって行高が 76px / 100px とバラついていた。
   （tbody 側を grid にして tr を display:contents にすれば列は揃うが、
     tr の border-bottom が引けなくなるため採らない。）

   375px幅ではそもそも2カラムを維持する余地が乏しいので、ラベルと金額を
   縦に積み、すべて左端で揃える。金額＋チップが必ず1行に収まるため、
   折返しの揺れも行高のバラつきも構造的に起きなくなる。 */
.p-price__table tbody tr {
  display: block;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.p-price__table tbody th,
.p-price__table tbody td {
  display: block;
  padding: 0;
  border-bottom: 0;
  text-align: left;
  font-size: var(--fs-body);
}

.p-price__table tbody th {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

/* ラベルと金額の間隔。行間の余白（--sp-4）より小さくして、
   「同じ行の続き」であることを近接で示す。
   ⚠️ display は上の th,td 共通ルールの block のまま据え置く（flex にしない）。
      flex にすると子が横並びになり「サンプル」チップが金額の右に付く。
      block なら、下でチップを block 化するだけで自然に次の行へ落ちる。
   ⚠️ text-align は上の th,td 共通ルールの left をここで right に上書きする。
      ラベル（th）は左のまま、金額とチップだけを右端に寄せる。
      金額を右揃えにすると桁位置が縦に揃うため、価格表としては読みやすい。 */
.p-price__table tbody td {
  margin-top: var(--sp-1);
  color: var(--ink);
  text-align: right;
}

/* ⚠️ 2026-09-04 是正（施主指摘：金額と「サンプル」を右合わせに）。
   .c-disclaimer--chip の既定は inline-flex ＋ margin-left なので、金額の
   右隣に座る。モバイルでは金額の下に落とし、右端を金額と揃える。
   width: max-content は、block 化したチップが行いっぱいに伸びて
   「枠だけ長い帯」になるのを防ぐため。幅が内容ぶんに縮むので、
   右端に寄せるには margin-left: auto が要る（text-align は効かない）。
   ⚠️ 640px以上ではこの上書きを解除して既定の inline-flex に戻す
      （通常のtable表示では金額の右に添えるのが読みやすいため）。 */
.p-price__table tbody td .c-disclaimer--chip {
  display: flex;
  width: max-content;
  margin-left: auto;
  margin-right: 0;
  margin-top: var(--sp-2);
}

/* ------------------------------------------------------------------------
   タブレット以上（640px〜）
   横スクロール可の通常table表示に戻す（旧来のレイアウト）。
   ------------------------------------------------------------------------ */
@media (min-width: 640px) {
  .p-price__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .p-price__table {
    min-width: 480px;
  }

  .p-price__table thead {
    display: table-header-group;
  }

  .p-price__table thead th {
    display: table-cell;
    padding: var(--sp-4);
    text-align: left;
    font-size: var(--fs-small);
    background-color: var(--surface-2);
    color: var(--ink);
    font-weight: 700;
    border-bottom: 2px solid var(--border-strong);
  }

  .p-price__table tbody {
    display: table-row-group;
  }

  .p-price__table tbody tr {
    display: table-row;
    padding-block: 0;
    border-bottom: 0;
  }

  .p-price__table tbody th,
  .p-price__table tbody td {
    display: table-cell;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
  }

  /* ⚠️ モバイル側の text-align: right をここで打ち消す。書かないと通常の
     table表示まで右揃えになり、左揃えの見出し「車検基本料（税込）」と
     列の頭が食い違う。右揃えはモバイルの縦積み限定の指示。 */
  .p-price__table tbody td {
    text-align: left;
  }

  /* モバイル用に block 化した「サンプル」チップを、既定の inline-flex に戻す。
     通常のtable表示では横幅に余裕があり、金額の右に添えるほうが読みやすい。
     ⚠️ モバイル側で margin-left: auto にしているので、ここで明示的に戻すこと
        （auto のままだとチップだけがセル内で右端へ飛ぶ）。 */
  .p-price__table tbody td .c-disclaimer--chip {
    display: inline-flex;
    width: auto;
    margin-left: var(--sp-2);
    margin-top: 0;
  }
}

.p-price__amount {
  font-family: var(--font-heading);
  font-size: 1.5rem; /* 24px（設計書 §6.7 確定値） */
  font-weight: 700;
  color: var(--ink);
}

.p-price__note {
  margin-top: var(--sp-8);
  color: var(--ink-muted);
  font-size: var(--fs-small);
}


/* ==========================================================================
   S7  ご利用の流れ — p-flow（明／surface-2）
   番号は accent 塗り円＋白文字（4.86:1）。PCは横並び＋接続線、モバイルは縦線。
   ========================================================================== */
.p-flow {
  background-color: var(--surface-2);
  padding-block: var(--section-py);
}

.p-flow__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

.p-flow__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.p-flow__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-8) / 2 - 1px);
  top: var(--sp-8);
  width: 2px;
  height: var(--sp-6);
  background-color: var(--border-strong);
}

.p-flow__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: 50%;
  background-color: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
}

.p-flow__body {
  padding-top: var(--sp-1);
}

.p-flow__name {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

.p-flow__body p {
  color: var(--ink);
}

@media (min-width: 1024px) {
  .p-flow__list {
    flex-direction: row;
    gap: var(--sp-6);
  }

  .p-flow__item {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .p-flow__item:not(:last-child)::before {
    left: 100%;
    top: calc(var(--sp-8) / 2 - 1px);
    width: var(--sp-6);
    height: 2px;
    margin-left: 0;
  }
}


/* ==========================================================================
   S8  会社概要・アクセス — p-company（明／surface）
   dl を定義リストらしく。p-company__row は dt/dd 横並び（モバイルは縦）。
   ========================================================================== */
.p-company {
  background-color: var(--surface);
  padding-block: var(--section-py);
}

.p-company__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  margin-top: var(--sp-8);
}

@media (min-width: 1024px) {
  .p-company__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

.p-company__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.p-company__row:first-child {
  border-top: 1px solid var(--border);
}

.p-company__row dt {
  color: var(--ink-muted);
  font-size: var(--fs-small);
  font-weight: 500;
}

.p-company__row dd {
  color: var(--ink);
  font-size: var(--fs-body);
}

@media (min-width: 640px) {
  .p-company__row {
    grid-template-columns: 8em 1fr;
    gap: var(--sp-4);
    align-items: baseline;
  }
}

.p-company__subtitle {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-bottom: var(--sp-4);
}

.p-company__accesslead {
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

.p-company__accessnote {
  color: var(--ink-muted);
  font-size: var(--fs-small);
  margin-bottom: var(--sp-6);
}


/* ==========================================================================
   S9  お問い合わせ — p-contact（暗／navy-900）
   ⚠️ フォーム入力欄は暗色面上の白い「島」。--ink はその島の上でのみ使用する
      （背景そのものを --ink-on-dark にする、という意味ではない）。
   ========================================================================== */
.p-contact {
  background-color: var(--navy-900);
  color: var(--ink-on-dark);
  padding-block: var(--section-py);
}

.p-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  margin-top: var(--sp-8);
}

@media (min-width: 1024px) {
  .p-contact__grid {
    grid-template-columns: minmax(240px, 340px) 1fr;
    gap: var(--sp-10);
    align-items: start;
  }
}

.p-contact__phone {
  background-color: var(--surface-on-dark);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
}

.p-contact__subtitle {
  font-size: var(--fs-h3);
  color: var(--ink-on-dark);
  margin-bottom: var(--sp-4);
}

.p-contact__hours {
  margin-top: var(--sp-4);
  color: var(--ink-muted-on-dark);
  font-size: var(--fs-small);
}

/* ------------------------------------------------------------------------
   フォーム（c-field 等）の暗色面対応。
   c-field / c-check / c-form 自体は components.css の管轄だが、本サイトで
   フォームが使われるのはこの navy-900 の S9 のみのため、可読性確保に必要な
   最小限の文字色・入力欄の背景色だけをここで上書きする
   （border・padding・角丸・フォーカスリング等の構造は一切変更しない）。
   入力欄は白背景＋--ink文字にして可読性を確保する（設計書 本ワーカー担当分）。
   ------------------------------------------------------------------------ */
.p-contact .c-field__label {
  color: var(--ink-on-dark);
}

.p-contact .c-field__req {
  color: var(--accent-on-dark);
}

.p-contact .c-check span {
  color: var(--ink-on-dark);
}

.p-contact .c-field__input,
.p-contact .c-field__textarea {
  background-color: var(--surface-2);
  color: var(--ink);
}

/* ⚠️ 2026-08-18 是正：--error(#B3261E) は --navy-900 上で 2.32:1 しかなく判読不能だった。
      暗色面では --error-on-dark（8.93:1）に差し替える。 */
.p-contact .c-field__error {
  color: var(--error-on-dark);
}