@charset "UTF-8";
/* ==========================================================================
   components.css — c-* 再利用コンポーネント／l-* レイアウト骨格の見た目
   合資会社 田野モータース 様 デザイン提案用デモサイト

   担当範囲（設計書 §5 コンポーネント定義 準拠）
     c-sectitle / c-seclead
     c-btn（--primary / --secondary / --onphoto）
     c-tel（既定 / --header / --big / --plain）
     c-badge / c-card / c-faq（見た目のみ）/ c-modal / c-toast
     c-disclaimer（--band / --chip / --note / --inline）
     c-field / c-check / c-form（構造のみ。色は §9.2 参照）
     c-map
     l-header（見た目）/ l-drawer / l-demoband / l-bottombar / l-footer（見た目）

   ⚠️ 新しい色を発明しない。すべて variables.css のトークンのみを使う。
      色の組み合わせは 設計書 §4.2 の対応表のみを根拠とする。
   ⚠️ アニメーションの「動き」（duration・easing・keyframes・transform遷移・
      opacity遷移）は animations.css が既に担当している
      （[data-reveal]／.p-hero__img／.l-header の height・background 遷移／
       .l-bottombar の transform／.c-faq__a の grid-template-rows／
       .c-modal の open・starting-style／.c-toast の opacity・transform）。
      ここでは色・寸法・角丸・影・padding など「静止した見た目」のみを扱い、
      上記プロパティの重複定義はしない。
   ⚠️ .c-toast は animations.css が transform:translateY(...) を専有しているため、
      本ファイルでは transform を使わない中央寄せ手法（margin-inline:auto）を
      採用する（後述）。
   ⚠️ .p-contact 内の .c-field__input / .c-field__textarea の色（白背景＋--ink文字）
      は sections.css が既に上書き済み（cascade順で本ファイルの後に読み込まれる）。
      ここでは c-field の構造（border・padding・角丸・フォーカスリング・レイアウト）
      のみを担当し、暗色面向けの色上書きは書かない（二重定義の回避）。
   ========================================================================== */


/* ==========================================================================
   c-sectitle / c-seclead — セクション見出し・リード（共通）
   ========================================================================== */
.c-sectitle {
  font-size: var(--fs-h2);
  color: var(--ink);
}

.is-dark .c-sectitle {
  color: var(--ink-on-dark);
}

.c-seclead {
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--ink-muted);
  max-width: 42em;
}

.is-dark .c-seclead {
  color: var(--ink-muted-on-dark);
}


/* ==========================================================================
   c-btn — ボタン（設計書 §5.1）
   最小高さ48px（電話CTAは c-tel.c-btn で56px）。タップ領域44×44px以上。
   --r-pill。hoverは背景色とbox-shadowのみ（transformは使わない）。
   ========================================================================== */
/* ⚠️ 2026-08-18 是正：[hidden] の UA 既定（display:none）は特異性 (0,1,0) で、
      display を明示する .c-btn (0,1,0) と同点になり、後から読まれる .c-btn に負ける。
      そのため map-facade.js が openBtn.hidden = true を設定しても
      「Googleマップを表示」ボタンが消えず、地図の上に残り続けていた。
      属性セレクタで特異性を (0,2,0) に上げて確実に隠す。
      （c-toast / c-field__error / l-drawer / l-bottombar には同種のガードが
        既にあったが、c-btn だけ漏れていた） */
.c-btn[hidden] {
  display: none;
}

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  min-width: 44px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) ease-out,
    border-color var(--dur-fast) ease-out,
    color var(--dur-fast) ease-out,
    box-shadow var(--dur-fast) ease-out;
}

/* ---- 明色面（既定） ------------------------------------------------------
   primary＝背景 --accent ＋ 白文字（4.86:1）／secondary＝枠 --accent 2px ＋
   文字 --accent（4.86:1）・背景透明（設計書 §5.1）。
   -------------------------------------------------------------------- */
.c-btn--primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}

.c-btn--primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: var(--sh-1);
}

.c-btn--secondary {
  background-color: transparent;
  border-color: var(--accent);
  color: var(--accent);
}

.c-btn--secondary:hover {
  /* 2026-09 是正：rgba() は var(--accent) を参照できないため、実値
     #B25214 を rgba(178, 82, 20, *) として手打ちしている。旧アクセント値
     （2026-08-18 是正前のもの）の rgba 換算値が4箇所に残っていた
     （variables.css の是正が伝播していなかった）。
     --accent を変更したときはここも同期させること。 */
  background-color: rgba(178, 82, 20, .08);
  box-shadow: var(--sh-1);
}

/* ---- 暗色面（.is-dark 内） -----------------------------------------------
   ⚠️ 暗色面の primary は --accent を使わない（navy-900上3.12:1で禁止・
      設計書 §4.2 絶対禁止事項3）。白塗り＋--navy-900文字とする（15.17:1）。
   -------------------------------------------------------------------- */
.is-dark .c-btn--primary {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--navy-900);
}

.is-dark .c-btn--primary:hover {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: var(--sh-2);
}

.is-dark .c-btn--secondary {
  background-color: transparent;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.is-dark .c-btn--secondary:hover {
  background-color: var(--surface-on-dark-hover);
  box-shadow: var(--sh-1);
}

/* ---- ヒーロー写真上（c-btn--onphoto） ------------------------------------
   写真＋α.72オーバーレイの上。§4.3の検証は合成後の色に対して行われている
   ため、.is-dark と同じ白ベース配色（白塗りprimary／白枠secondary）を踏襲する
   （合成後の白文字は最悪ケースでも6.19:1）。
   -------------------------------------------------------------------- */
.c-btn--onphoto.c-btn--primary {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--navy-900);
}

.c-btn--onphoto.c-btn--primary:hover {
  background-color: #FFFFFF;
  box-shadow: var(--sh-2);
}

.c-btn--onphoto.c-btn--secondary {
  background-color: transparent;
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.c-btn--onphoto.c-btn--secondary:hover {
  background-color: var(--surface-on-dark-hover);
}


/* ==========================================================================
   c-tel — 電話CTA（設計書 §5.2）
   番号は --fs-tel（24px以上、c-tel.c-btn文脈のみ）。受付時間を隣接表示。
   バリアント：既定 / --header / --big / --plain
   ========================================================================== */
.c-tel__label {
  display: inline;
}

.c-tel__num {
  font-family: var(--font-heading);
  font-size: var(--fs-tel);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.c-tel__hours {
  display: block;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 400;
}

/* c-btn と組み合わされた c-tel。既定は c-btn と同じ「1行・横並び」。
   電話CTAは最小56pxを確保する（設計書 §5.1）。

   ⚠️ 2026-09-04 変更：以前は既定で flex-direction: column（ラベル／番号／
      受付時間の3行）だった。しかし対になる「無料見積りを相談する」が1行の
      48pxなのに対し電話CTAだけが3行の大きな塊になり、並べたときに著しく
      バランスを欠いた（施主指摘）。番号を外して1行に統一し、対のボタン側を
      56pxへ引き上げて高さを揃える方針に変えた（.p-hero__cta 側で指定）。
      縦積みが要るのはドロワーだけなので、そちらは .c-tel--stack で明示する。
   ⚠️ レイアウトの分岐を :has() ではなくクラスで持つのは意図的。:has() が
      効かない環境で「番号が大きいまま横並び」に崩れるのを避けるため、
      既定を安全側（1行）に置き、縦積みを明示クラスで足す向きにしてある。 */
.c-tel.c-btn {
  gap: var(--sp-2);
  min-height: 56px;
}

/* ---- --stack：ラベルの下に番号を大きく置く縦積み版（ドロワー専用） ------ */
.c-tel--stack.c-btn {
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
}

/* 縦積み版では番号が見出し役なので、ラベルをキャプション化して番号を立てる。 */
.c-tel--stack.c-btn .c-tel__label {
  font-size: .9375rem;
  font-weight: 500;
}

/* 1行版の受付時間はラベルの右に並ぶ添え物。ラベル(1rem/700)より一段落として
   主従を付ける。改行させないのは、折り返すと結局2行になって高さが揃わなくなり、
   この変更の目的（対のボタンとサイズを揃える）が崩れるため。 */
.c-tel.c-btn:not(.c-tel--stack) .c-tel__hours {
  display: inline;
  font-weight: 400;
  opacity: .85;
  white-space: nowrap;
}

/* ---- --header：ヘッダー内・横並びコンパクト表示 -------------------------- */
.c-tel--header {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease-out;
}

.c-tel--header:hover {
  background-color: rgba(178, 82, 20, .08);
}

/* ⚠️ 2026-08-25 是正：山形(chevron)の疑似要素では「電話」に見えず記号的だと
      施主より指摘された。受話器シルエットの data-URI SVG に差し替える
      （外部リクエストを増やさないための唯一確実な手段）。
      SVG内の # は %23 に、" は使わず ' で属性値を囲んでエスケープを回避する。 */
.c-tel--header .c-tel__icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7.7 10.9c1.4 2.8 3.7 5.1 6.5 6.5l2.2-2.2c.3-.3.7-.3 1-.2 1.2.5 2.5.7 3.8.7.6 0 1 .4 1 1v3.4c0 .6-.4 1-1 1C11.5 21.1 3.9 13.5 3.9 3.9c0-.6.4-1 1-1h3.4c.6 0 1 .4 1 1 0 1.3.2 2.6.7 3.8.1.3.1.7-.2 1l-2.2 2.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

.c-tel--header .c-tel__stack {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.c-tel--header .c-tel__num {
  font-size: 1.125rem;
  color: var(--ink);
}

.c-tel--header .c-tel__hours {
  font-size: .75rem;
  color: var(--ink-muted);
}

/* モバイルではアイコンのみ表示し、数字・受付時間は隠す（設計書 §5.9）。 */
@media (max-width: 1023.98px) {
  .c-tel--header .c-tel__stack {
    display: none;
  }

  .c-tel--header {
    padding: var(--sp-2);
  }
}

/* ---- --big：S9電話ブロック用の大表示 ------------------------------------- */
.c-tel--big {
  /* ⚠️ 2026-08-18 是正：display:block では行ボックスの高さ（約37px）が
        そのままタップ領域になり、設計書§9.1 の「電話CTAは高さ56px以上」を
        下回っていた。お問い合わせの主要電話CTA＝コンバージョンの最終地点
        なので、inline-flex ＋ min-height で確実に確保する。 */
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  text-decoration: none;
}

.c-tel--big .c-tel__num {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  color: var(--ink-on-dark);
}

/* ---- --plain：本文中インライン表示（会社概要・フッター） ----------------- */
.c-tel--plain {
  display: inline;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.c-tel--plain .c-tel__num {
  display: inline;
  font: inherit;
  white-space: normal;
}


/* ==========================================================================
   c-badge — 塗りバッジ（設計書 §5.3）
   ヒーロー上は必ず塗り。写真の明度に依存しない自前の背景を持つ。
   ========================================================================== */
.c-badge {
  display: inline-flex;
  align-items: center;
  /* ⚠️ 2026-08-18 是正：フレックスコンテナは要素間の空白テキストノードを
        無視するため、「指定工場 <span>134</span>」の空白が描画されず
        「指定工場134」と詰まっていた（リード文の表記と食い違う）。
        gap で語間を明示的に確保する。
        ⚠️ 2026-09-04 追記：指定工場番号は表記形式が確認できず削除したため、
           現在このバッジは子要素を1つしか持たず gap は効いていない。
           それでも残すのは、他のバッジ（例「代車 無料」）が複数の子を持つ
           場合や、番号が復活した場合に同じ不具合を再発させないため。 */
  gap: .25em;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background-color: rgba(15, 39, 64, .92);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #FFFFFF;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
}


/* ==========================================================================
   c-card — カード（設計書 §5.4）
   ========================================================================== */
.c-card {
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-fast) ease-out, background-color var(--dur-fast) ease-out;
}

.c-card:hover {
  box-shadow: var(--sh-2);
}

.is-dark .c-card {
  background-color: var(--surface-on-dark);
  border-color: var(--border-on-dark);
  box-shadow: none;
}

.is-dark .c-card:hover {
  background-color: var(--surface-on-dark-hover);
  box-shadow: none;
}


/* ==========================================================================
   c-faq — FAQ（ネイティブ <details>、設計書 §5.5）
   ⚠️ 開閉アニメーション（grid-template-rows 0fr⇔1fr）は animations.css の
      担当。ここでは罫線・padding・独自+/-アイコンなど静止した見た目のみ。
   ========================================================================== */
.c-faq {
  border-top: 1px solid var(--border);
}

.c-faq__item {
  border-bottom: 1px solid var(--border);
}

.c-faq__q {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--sp-5) calc(var(--sp-8) + var(--sp-2)) var(--sp-5) var(--sp-1);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
}

.c-faq__q::-webkit-details-marker {
  display: none;
}

/* 丸背景（accent塗り）＋十字（白）。開くと縦棒だけが縮んで消え「−」表示になる。
   ⚠️ 2026-09 是正：以前は ::after の background を横棒1枚に差し替える実装で、
      背景の切り替えにはトランジションが効かず縦棒が瞬時に消えていた
      （.c-faq__a の grid-template-rows は300msかけて開閉するため質感が
      不揃いだった）。横棒は常時表示の要素として ::before の背景に焼き込み、
      ::after は縦棒専任にして transform: scaleY() で開閉と同じ
      var(--dur-base)/var(--ease) で滑らかに消す。
   ⚠️ reduced-motion 用の個別無効化は不要：animations.css 末尾の
      `*, *::before, *::after, *::backdrop { transition-duration: .01ms !important }`
      が ::after にもユニバーサルセレクタで及ぶため、ここで追加しなくても
      自動的に無効化される（確認済み）。 */
.c-faq__q::before,
.c-faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--sp-1);
  transform: translateY(-50%);
}

.c-faq__q::before {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--accent);
  background-image: linear-gradient(#FFFFFF, #FFFFFF);
  background-position: center;
  background-size: 100% 2px;
  background-repeat: no-repeat;
}

.c-faq__q::after {
  width: 12px;
  height: 12px;
  right: calc(var(--sp-1) + 8px);
  background: linear-gradient(#FFFFFF, #FFFFFF) center / 2px 100% no-repeat;
  transition: transform var(--dur-base) var(--ease);
}

.c-faq__item[open] .c-faq__q::after {
  transform: translateY(-50%) scaleY(0);
}

.c-faq__a {
  color: var(--ink);
  font-size: var(--fs-body);
}

.c-faq__a p {
  padding-bottom: var(--sp-5);
}


/* ==========================================================================
   c-modal — デモ告知モーダル（<dialog>、設計書 §5.6）
   中央配置・最大幅520px。position/inset/marginを明示し、<dialog>非対応時の
   div フォールバック（role="dialog"）でも同じ見た目で成立するようにする。
   ⚠️ フェード・scale遷移は animations.css の担当。ここでは静止時の寸法・
      位置・内側の見た目のみ。
   ========================================================================== */
.c-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  margin: auto;
  width: min(92vw, 520px);
  height: fit-content;
  max-height: min(85vh, 640px);
}

.c-modal__inner {
  overflow-y: auto;
  max-height: inherit;
  padding: var(--sp-8) var(--sp-6);
  background-color: var(--surface-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.c-modal__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h2);
  color: var(--ink);
}

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

.c-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* ⚠️ 2026-09-04：並ぶ2つのボタンの高さを揃える。
   「閉じる」は .c-btn の48px、「電話する」は .c-tel.c-btn の56px（設計書§5.1の
   電話CTA最小高さ）で、実測48px対55pxとズレていた。ヒーローと同じ理由で
   低い側を引き上げて揃える（電話CTAを下げると§5.1を割るため）。
   このモーダルはデモフォーム送信時に必ず出る＝実演で必ず見られる画面。 */
.c-modal__actions .c-btn {
  min-height: 56px;
}

@media (max-width: 479.98px) {
  .c-modal__actions .c-btn {
    flex: 1 1 100%;
  }
}


/* ==========================================================================
   c-toast — トースト（設計書 §5.7）
   画面下部中央固定。モバイルでは下部固定バーの上。
   ⚠️ animations.css が opacity / transform:translateY(...) を専有している
      ため、水平中央寄せに transform は使わない（margin-inline:auto方式）。
   ========================================================================== */
.c-toast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--h-bottombar) + env(safe-area-inset-bottom, 0px) + var(--sp-4));
  z-index: var(--z-toast);
  width: fit-content;
  max-width: min(92vw, 480px);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background-color: var(--navy-900);
  color: #FFFFFF;
  font-size: var(--fs-small);
  font-weight: 500;
  text-align: center;
  box-shadow: var(--sh-2);
}

.c-toast[hidden] {
  display: none;
}


/* ==========================================================================
   c-totop — ページ先頭へ戻るフローティングボタン
   ⚠️ [hidden] の UA 既定（display:none）は特異性 (0,1,0) しかなく、display を
      明示する .c-totop (0,1,0) と同点になり cascade順で負ける可能性がある。
      属性セレクタで特異性を (0,2,0) に上げて確実に隠す（c-btn / c-toast /
      l-drawer / l-bottombar と同種のガード）。
   ⚠️ 出現時のtransform/opacity遷移は animations.css の担当。ここでは静止した
      見た目（位置・寸法・色・影）のみを扱う。
   ⚠️ モバイルでの下部固定バーとの重なり回避は responsive.css の担当。
      ここでは既定（PC想定）の位置のみを定義する。
   ⚠️ 2026-09 是正：--focus を var(--accent-on-dark) に再束縛する。.c-totop は
      position:fixed のため DOM 上の祖先ではなく「画面上どこに重なって見えるか」
      で背景を判定する必要があり、.is-dark 子孫であることに頼れない
      （実際 .is-dark の子孫ではなく :root 既定の --focus(#B25214) を継承するが、
      表示上は暗色セクションの上に浮くため navy-700/900 とのコントラストが
      3:1未達＝WCAG 1.4.11違反になっていた。#E8722A なら navy-700で3.81:1／
      navy-900で4.97:1 を確保できる）。
   ========================================================================== */
.c-totop[hidden] {
  display: none;
}

.c-totop {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: var(--z-totop);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background-color: var(--navy-900);
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease-out;
  --focus: var(--accent-on-dark);
}

.c-totop:hover {
  background-color: var(--navy-700);
}

.c-totop__icon {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-right: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(-135deg);
}


/* ==========================================================================
   c-disclaimer — 免責表示（設計書 §5.8）
   --band / --chip / --note / --inline の4種を同一の色・サイズで統一。15px。
   ⚠️ index.html では --note / --inline / --band の本文に「※」が既に文字と
      して埋め込まれている（確定済みマークアップ）。CSS疑似要素で追加の
      「※」を重ねると二重表示になるため、ここではアイコンを生成しない。
   ========================================================================== */
.c-disclaimer {
  display: inline;
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.is-dark .c-disclaimer {
  color: var(--ink-muted-on-dark);
}

/* --note・--inline：独立した段落として表示する注記文（写真近傍・フッター・
   フォーム見出し直下・料金見出し直下）。全て同一トーンで統一する。 */
.c-disclaimer--note,
.c-disclaimer--inline {
  display: block;
}

.c-disclaimer--inline {
  margin-bottom: var(--sp-6);
}

/* --chip：金額の右に添える小さなサンプル表示 */
.c-disclaimer--chip {
  display: inline-flex;
  align-items: center;
  margin-left: var(--sp-2);
  padding: 2px var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: .8125rem;
  font-weight: 700;
  vertical-align: middle;
  line-height: 1.4;
}

/* --band：帯状の告知（現状 index.html では l-demoband が同役割を独自に
   持つため未使用だが、コンポーネントAPIとして定義しておく）。 */
.c-disclaimer--band {
  display: block;
  padding: var(--sp-3) 0;
}


/* ==========================================================================
   c-field / c-check / c-form — フォーム構造（設計書 §5.13・§8）
   ⚠️ ラベルは常時表示。必須は c-field__req の「必須」テキストで明示。
      エラーは --error。:focus-visible は殺さない（base.css の既定に委ねる）。
   ⚠️ ここでは構造（border・padding・角丸・レイアウト）のみを扱う。
      .p-contact 配下の色上書き（白背景＋--ink文字）は sections.css の担当。
   ========================================================================== */
.c-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.c-form__submit {
  align-self: flex-start;
  margin-top: var(--sp-2);
}

.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* c-field--group は <fieldset> のため、UA既定の枠・paddingを解除する。 */
.c-field--group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-field__label {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}

.c-field__req {
  display: inline-block;
  padding: 1px var(--sp-2);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 700;
  vertical-align: middle;
}

.c-field__input,
.c-field__textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background-color: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) ease-out;
}

.c-field__textarea {
  min-height: 8em;
}

.c-field__input:focus,
.c-field__textarea:focus {
  border-color: var(--accent);
}

.c-field__input[aria-invalid="true"],
.c-field__textarea[aria-invalid="true"],
.is-error .c-field__input,
.is-error .c-field__textarea {
  border-color: var(--error);
}

.c-field__error {
  display: block;
  color: var(--error);
  font-size: var(--fs-small);
}

.c-field__error[hidden] {
  display: none;
}

.c-field__checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.c-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease-out, background-color var(--dur-fast) ease-out;
}

.c-check input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
}

.c-check span {
  font-size: var(--fs-body);
  color: var(--ink);
}

.c-check:has(input:checked) {
  border-color: var(--accent);
  background-color: rgba(178, 82, 20, .06);
}


/* ==========================================================================
   c-map — 地図facade（設計書 §5.12）
   静止画の案内図を初期表示し、「Googleマップを表示」が押されたときだけ
   js/map-facade.js が iframe を差し込む。
   ⚠️ 静止画と iframe のアスペクト比を必ず揃えること。
      揃っていないと、差し替わった瞬間に高さが跳ねてレイアウトシフトになる。
      現在の案内図 access-map.svg は 1000×700。
   ⚠️ オフライン実演では iframe の中身が白紙になるが、押されるまでは
      案内図が出たままなので実演は成立する（これが facade を採る理由）。
   ========================================================================== */
.c-map {
  overflow: hidden;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.c-map__still,
.c-map__frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 700;
  border: 0;
}

.c-map__still {
  object-fit: cover;
}

/* 差し込み後にボタンを確実に隠す。
   [hidden] の UA 既定は特異性 (0,1,0) で、display を明示する .c-btn に
   同点で負けるため属性セレクタで上げる（.c-btn[hidden] と同じ理由）。 */
.c-map__open[hidden] {
  display: none;
}

.c-map__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.c-map__external {
  /* ⚠️ 2026-08-18 是正：単独で置かれたリンクのため、文中インラインリンクの
        除外規定（WCAG 2.2 の 2.5.8）は適用されない。44px を確保する。 */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: .2em;
}


/* ==========================================================================
   l-header — 追従ヘッダー（見た目、設計書 §5.9）
   ⚠️ ヘッダーは開始直後からヒーロー写真に重なるため、いつでも判読できる
      よう背景は常時 rgba(255, 255, 255, .94) とする（設計書 §6.0 の色リズム表で
      ヘッダーが「明」に分類されていることに整合）。.is-scrolled では
      高さを52pxへ縮小し、backdrop-filterとshadowを追加する
      （§5.9「高さ64→52px、背景rgba(255, 255, 255, .94)＋blur(8px)＋--sh-1」の
      うち、背景色は常時付与とし、blur・shadow・高さ変化をスクロール時の
      強調として扱う）。高さ・背景・box-shadowの「動き方」自体は
      animations.css の .l-header transition が担当する。
   ========================================================================== */
.l-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--h-header);
  background-color: rgba(255, 255, 255, .94);
}

.l-header.is-scrolled {
  height: var(--h-header-scrolled);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sh-1);
}

.l-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 100%;
}

.l-header__brand {
  display: flex;
  align-items: center;
  /* ⚠️ 2026-08-18 是正：ロゴ画像の高さ28pxがそのままタップ領域だった。
        ヘッダー高さ内に収まる範囲で44pxを確保する。 */
  min-height: 44px;
  flex: none;
}

.l-header__logo {
  height: 28px;
  width: auto;
  color: var(--ink);
}

.l-header__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  padding: 2px var(--sp-3);
  border-radius: var(--r-pill);
  background-color: var(--accent);
  color: #FFFFFF;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
}

.l-header__nav {
  display: none;
}

@media (min-width: 1024px) {
  .l-header__nav {
    display: block;
  }
}

.l-header__navlist {
  display: flex;
  align-items: center;
  /* ⚠️ 2026-08-25 是正：「お問い合わせ」追加で5→6項目になり、--sp-6(32px)の
        gapでは1024px幅で収まらなくなった。ブレークポイント自体の変更は
        responsive.css の担当のため、ここでは gap と字送りの縮小のみで対応する。 */
  gap: var(--sp-4);
}

.l-header__navlink {
  padding: var(--sp-2) 0;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) ease-out;
}

.l-header__navlink:hover {
  color: var(--accent);
}

.l-header__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
}

.l-header__burger:hover {
  background-color: rgba(178, 82, 20, .08);
}

@media (min-width: 1024px) {
  .l-header__burger {
    display: none;
  }
}

.l-header__burger-bars {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--ink);
  border-radius: var(--r-pill);
}

.l-header__burger-bars::before,
.l-header__burger-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background-color: var(--ink);
  border-radius: var(--r-pill);
}

.l-header__burger-bars::before {
  top: -7px;
}

.l-header__burger-bars::after {
  top: 7px;
}


/* ==========================================================================
   l-drawer — モバイルドロワー（見た目、設計書 §5.9）
   ⚠️ 開閉の実体は [hidden] 属性（js/nav.js が切り替える）。ここでは
      表示状態の静止した見た目（位置・寸法・色）のみを扱う。
   ========================================================================== */
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: flex;
  justify-content: flex-end;
}

.l-drawer[hidden] {
  display: none;
}

.l-drawer__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 27, 44, .6);
}

.l-drawer__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(86vw, 360px);
  height: 100%;
  padding: var(--sp-6);
  overflow-y: auto;
  background-color: var(--surface-2);
  box-shadow: var(--sh-2);
}

.l-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}

.l-drawer__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
}

.l-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
}

.l-drawer__close:hover {
  background-color: var(--surface);
}

.l-drawer__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.l-drawer__link {
  display: block;
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 500;
  text-decoration: none;
}

.l-drawer__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-6);
}

.l-drawer__foot .c-btn {
  width: 100%;
}

.l-drawer__hours {
  color: var(--ink-muted);
  font-size: var(--fs-small);
  text-align: center;
}


/* ==========================================================================
   l-demoband — デモ告知帯（見た目、設計書 §6.1）
   ⚠️ position:fixed にしない（非固定）。背景 --surface-2、下辺に
      border-strong の罫線。強調語「デザイン提案用のデモ」は本文内の
      <strong> をアクセント色にすることで実現する（マークアップ側で確定済み）。
   ========================================================================== */
.l-demoband {
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
}

/* .l-demoband__summary / __short / __details と開閉インジケーターの疑似要素は
   2026-09-04 に削除した。デモ帯の折り畳み（details/summary）をやめて常時1行
   表示にしたため、対応する要素自体が存在しなくなった。
   ⚠️ .l-demoband__flag と __flag--inline は現役（帯の「デモ」チップ）。 */
.l-demoband__flag {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-3);
  border-radius: var(--r-sm);
  background-color: var(--accent);
  color: #FFFFFF;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
}

.l-demoband__flag--inline {
  margin-right: var(--sp-2);
}

.l-demoband__body {
  padding-bottom: var(--sp-3);
  color: var(--ink-muted);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.l-demoband__body strong {
  color: var(--accent);
  font-weight: 700;
}

/* .l-demoband__link / .l-demoband__credit は 2026-09-04 に削除した。
   デモ告知帯から制作者クレジット（制作者名の表示とそのリンク）を
   外したため、対応する要素自体が存在しなくなった。空セレクタを残すと
   後から読む人が「効いているはず」と誤解するので消す。
   経緯は index.html のデモ告知帯のコメントを参照。 */


/* ==========================================================================
   l-bottombar — 下部固定バー（モバイルのみ、見た目、設計書 §5.11）
   ⚠️ 出現アニメーション（transform:translateY(100%→0)）は animations.css の
      担当。ここでは静止した見た目（位置・padding・背景・区切り線）のみ。
   ========================================================================== */
.l-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-bottombar);
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background-color: var(--surface-2);
  border-top: 1px solid var(--border);
  box-shadow: var(--sh-2);
}

.l-bottombar[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  .l-bottombar {
    display: none;
  }
}

.l-bottombar__btn {
  flex: 1 1 0;
  min-height: 48px;
}

/* c-tel と c-btn を併用したボタン（電話CTA）は既定で縦積み・56px高になるが、
   下部バーではラベルのみが表示され、隣の secondary ボタンと高さを揃える
   必要があるため、横並び・48px相当に戻す。 */
.l-bottombar__btn.c-tel.c-btn {
  flex-direction: row;
  min-height: 48px;
  padding-block: var(--sp-3);
}


/* ==========================================================================
   l-footer — フッター（見た目、設計書 §6.11）
   背景 --navy-950。著作権表記は置かない（マークアップ側で確定済み）。
   ========================================================================== */
.l-footer {
  padding-block: var(--sp-12) var(--sp-8);
  background-color: var(--navy-950);
  color: var(--ink-on-dark);
}

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

@media (min-width: 1024px) {
  .l-footer__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-10);
  }
}

.l-footer__logo {
  height: 28px;
  width: auto;
  /* ⚠️ 2026-10-09 是正：親の .l-footer__info は縦方向の flex で、既定の
     align-items: stretch によりロゴの枠が列幅いっぱい（PCで480px）に
     引き伸ばされていた。width: auto はストレッチに負ける。SVG の絵は
     preserveAspectRatio の既定で枠の中央に描かれるため、下の左揃えの
     社名・住所と頭が揃わずロゴだけ浮いて見えていた。伸ばさず左端に置く。 */
  align-self: flex-start;
  margin-bottom: var(--sp-5);
  /* ⚠️ 2026-08-18 是正：<img> で読み込む SVG には color が効かない。
        logo.svg は fill="#1A1A1A" 固定のため、--navy-950 のフッター上では
        実質不可視（1.00:1）だった。filter で純白に転換して可読性を確保する。 */
  filter: brightness(0) invert(1);
}

.l-footer__address {
  color: var(--ink-on-dark);
  font-size: var(--fs-body);
  line-height: 1.9;
}

.l-footer__hours {
  margin-top: var(--sp-4);
  color: var(--ink-muted-on-dark);
  font-size: var(--fs-small);
  line-height: 1.8;
}

.l-footer__navlist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media (min-width: 640px) {
  .l-footer__navlist {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-6);
  }
}

.l-footer__navlink {
  color: var(--ink-muted-on-dark);
  font-size: var(--fs-body);
  text-decoration: none;
  transition: color var(--dur-fast) ease-out;
}

.l-footer__navlink:hover {
  color: #FFFFFF;
}

.l-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-on-dark);
}

/* .l-footer__credit は 2026-09-04 に削除した。フッターの制作者クレジット
   （制作者名・担当者名・電話・メールと掲載停止の案内）を撤去したため、
   対応する要素自体が存在しなくなった。空セレクタを残すと後から読む人が
   「効いているはず」と誤解するので消す。経緯は index.html の該当箇所の
   コメントを参照。 */

.l-footer__link {
  color: var(--accent-on-dark);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.l-footer__demo {
  color: var(--ink-muted-on-dark);
  font-size: var(--fs-small);
}