/* ============================================================
   BRAVE コーポレートサイト — デザインシステム

   アートディレクション：「開示票」
   この会社が売っているのは車ではなく「月額に何が入っているか」の
   透明さなので、ページ自体を仕様書・開示書類の質感で組む。
   ページの主役は写真でもコピーでもなく FIG. 番号のついた図版。

   3社の住み分け（トンマナを判断するときは必ず3つ並べて見ること）
     ビックトップ … 整備記録／クリーム紙・墨・赤／静・重厚
     VANPIT      … 現場／オレンジ
     BRAVE       … 開示票／ネイビー・ブルー・イエロー／明快・誠実・スピード
   ============================================================ */

/* ── トークン ───────────────────────────── */
:root{
  --font-sans:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  --font-en:"Inter",system-ui,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,"SFMono-Regular",monospace;

  /* ネイビーは2段持つ。--navy はブランドの色、--navy-deep は面の色。
     暗い面を --navy で塗ると、その上に置くネイビーのボタンが沈んで消える */
  --navy:#14265E;
  --navy-deep:#0F1B3D;
  --navy-2:#1B2C63;          /* 暗い面の中のカード */

  --blue:#2563EB;            /* 押せるもの。それ以外には使わない */
  --blue-hover:#1D4ED8;
  --blue-ink:#1D4ED8;        /* 明るい地の上のリンク文字（白地 5.4:1） */
  --blue-on-dark:#7EA6FF;    /* 暗い地の上のリンク文字 */

  /* イエローは装飾ではなく「BRAVEが開示している数字」の印。
     総額・内訳の含まれている量・込みであることを示す箇所にだけ乗せる。
     白地の上で 2.0:1 しかないので、イエローを文字色に使うのは暗い面だけ。
     明るい面では必ず塗り（バー・下線・チップ）として使う */
  --yellow:#F5B301;
  --yellow-soft:#FFE9B0;
  --yellow-ink:#7A5A00;      /* どうしても明るい地に文字で乗せるとき */

  /* 面の色（2026-09-13 改善）。本文は白を主体に、淡い青と淡いグレーを交互に使う。
     ネイビーの全面は締めのCTAなど必要な箇所に限り、暗い箱を続けない */
  --paper:#F5F8FC;           /* 淡いグレーの面 */
  --paper-2:#EEF1F6;
  --tint-blue:#EFF5FF;       /* 淡い青の面 */
  --white:#ffffff;
  --line:#E3E7EE;
  --line-2:#CFD6E2;
  --line-strong:#94A0B8;

  --text:#1A1A1A;
  --text-2:#4A5163;
  --text-3:#6B7385;          /* これより薄い灰は使わない（白地 4.6:1 が下限） */
  --on-dark:#ffffff;
  --on-dark-2:rgba(255,255,255,.80);
  --on-dark-3:#9AA6C0;
  --hair-dark:rgba(255,255,255,.16);

  --container:1200px;
  --gutter:clamp(20px,3vw,40px);
  --header-h:64px;          /* PCは72px（下のメディアクエリ） */

  /* ── タイプスケール ────────────────────
     見出しのサイズは必ずここから採る。個別に px を直書きすると、
     同じ h3 が4種類できる（旧デザインで実際に起きていた） */
  --fs-h1:clamp(32px,4.2vw,54px);
  --fs-h2:clamp(26px,3vw,40px);
  --fs-h3:clamp(18px,1.7vw,22px);
  --fs-h4:17px;
  --fs-lead:clamp(15.5px,1.25vw,18px);
  --fs-body:16px;
  --fs-sm:14.5px;
  --fs-xs:13px;
  --fs-label:11.5px;         /* モノスペースのラベル */

  /* 角丸は大きいカード20px／小さい要素10px（2026-09-13 に 14/8 から柔らかく） */
  --r:8px;                   /* Pattern C：角丸は控えめに。パネル8px／小要素4px */
  --r-sm:4px;
  --r-pill:999px;

  --shadow-card:0 1px 2px rgba(20,38,94,.04);  /* 影で浮かせず、1pxの罫で締める */
  --shadow-on-photo:0 1px 2px rgba(0,0,0,.5), 0 4px 20px rgba(0,0,0,.45);

  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ── リセットと下地 ─────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.75;
  font-feature-settings:"palt" 1;-webkit-font-smoothing:antialiased;
}
/* 横溢れの押さえは clip で行う。hidden にすると overflow-y が auto に倒れ、
   body 自身がスクロールコンテナになってページが縦に動かなくなる
   （実際に起きた。sticky ヘッダーの基準もずれる） */
html,body{overflow-x:clip}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table{margin:0}
/* ol も既定の左余白を消す。ul だけだと、ステップ・稼働マス・関係図が
   図の左端から40pxずれる（2026-09-13 に発見。本文の番号付きリストは .prose ol で戻している） */
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
::selection{background:var(--yellow-soft);color:var(--text)}

/* ── 日本語の組版 ───────────────────────
   word-break:keep-all は使わない。和文が文字間で折り返せなくなり、
   句読点のない見出しがそのまま横に溢れる。
   文節改行（「稼働を止／めない」を防ぐ）は auto-phrase に任せ、
   対応ブラウザだけに当てる */
h1,h2,h3,h4,.h1,.h2,.h3{
  line-break:strict;text-wrap:balance;overflow-wrap:anywhere;
  font-weight:700;letter-spacing:-.03em;
}
@supports (word-break:auto-phrase){
  h1,h2,h3,h4,.h1,.h2,.h3{word-break:auto-phrase}
}
p,.lead{line-break:strict;text-wrap:pretty}

/* 金額と数値は必ず等幅・タブラー。桁が縦に揃わない表は開示に見えない */
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.skiplink{
  position:absolute;left:16px;top:-60px;z-index:300;
  background:var(--navy-deep);color:#fff;padding:12px 20px;border-radius:0 0 8px 8px;
  font-size:14px;font-weight:700;text-decoration:none;transition:top .18s var(--ease);
}
.skiplink:focus{top:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── レイアウト ─────────────────────────
   --container は「中身の幅」。ガターはその外側に足す。
   max-width に直接入れると中身が 1200-40=1160 になり設計とずれる。
   左端は全ページ・全セクションでこの1本だけ。旧デザインは
   ヘッダー144px／本文120px が混在していて、下までスクロールすると
   左端が2本あるように見えていた */
.wrap{
  width:100%;max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;padding-inline:var(--gutter);
}
.section{position:relative;padding-block:56px}
.section--tight{padding-top:0}
.section--paper{background:var(--paper)}
.section--blue{background:var(--tint-blue)}
.section--white{background:var(--white)}
.section--dark{background:var(--navy-deep);color:var(--on-dark)}
.section--dark .lead,.section--dark p{color:var(--on-dark-2)}
.section--dark .h2,.section--dark h2,.section--dark h3{color:#fff}
/* 同じ地色が続くと余白が二重になって間延びする */
.section--paper + .section--paper,
.section--blue + .section--blue,
.section--white + .section--white{padding-top:0}
@media (min-width:768px){ .section{padding-block:72px} }
@media (min-width:1100px){ .section{padding-block:104px} }

/* ── 見出しの型 ─────────────────────────
   セクション見出しは必ず eyebrow → 見出し → リード の順。
   eyebrow は常に罫を持つ。旧デザインは罫あり・罫なし・eyebrow なしの
   3種類が同じ階層で混在していた */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-weight:500;font-size:var(--fs-label);
  line-height:1;letter-spacing:.2em;color:var(--text-3);
  margin-bottom:20px;max-width:100%;
}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.section--dark .eyebrow,.hero .eyebrow{color:var(--on-dark-3)}
.hero .eyebrow{color:rgba(255,255,255,.85)}
/* 連番つきの eyebrow（選ばれる理由の 01 — FIXED TOTAL） */
.eyebrow__no{color:var(--blue-ink);font-weight:700}
.section--dark .eyebrow__no{color:var(--blue-on-dark)}

.h1{font-size:var(--fs-h1);line-height:1.28}
.h2{font-size:var(--fs-h2);line-height:1.38}
.h3{font-size:var(--fs-h3);line-height:1.55}
.lead{color:var(--text-2);font-size:var(--fs-lead);line-height:1.85;max-width:62ch}
.section--dark .lead{color:var(--on-dark-2)}
.note{color:var(--text-3);font-size:var(--fs-xs);line-height:1.85}
.section--dark .note{color:var(--on-dark-3)}

.head{margin-bottom:40px}
.head .lead{margin-top:20px}
@media (min-width:768px){ .head{margin-bottom:56px} }
/* 見出しと、右端に置く「◯◯を見る →」を1行に組むとき */
.head--row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px 40px;justify-content:space-between}
.head--row > *{min-width:0}

/* ── ボタン ─────────────────────────────
   系統は3つだけ。primary（塗り）／outline（線）／link（文字＋矢印）。
   旧デザインは白塗り・ネイビー塗り・白抜き・線・文字リンクが
   地の色と無関係に混ざっていて、明るい地の上の白ボタンが
   4箇所で完全に見えなくなっていた。
   そこで「暗い地に置く形」を --on-dark として明示的に定義し、
   地の色ごとに必ずどちらかを選ぶ形にしている */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r);
  font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn__arw{font-family:var(--font-mono);font-weight:400;transition:transform .2s var(--ease)}
.btn:hover .btn__arw{transform:translateX(3px)}

.btn--primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--primary:hover{background:var(--blue-hover);border-color:var(--blue-hover)}

.btn--outline{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn--outline:hover{background:var(--white);border-color:var(--navy);color:var(--navy)}

/* 暗い面の上。白塗り＋ネイビー文字と、白線＋白文字の2枚だけ */
.btn--on-dark{background:#fff;color:var(--navy-deep);border-color:#fff}
.btn--on-dark:hover{background:var(--yellow);border-color:var(--yellow);color:var(--navy-deep)}
.btn--on-dark-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn--on-dark-outline:hover{background:rgba(255,255,255,.10);border-color:#fff}

.btn--lg{padding:18px 32px;font-size:16px}
.btn--full{width:100%}

.actions{display:flex;flex-wrap:wrap;gap:12px}
.actions--center{justify-content:center}

/* 文字リンク。矢印は必ずつける（押せることの唯一の合図なので） */
.link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--blue-ink);font-size:var(--fs-sm);font-weight:700;text-decoration:none;
}
.link::after{content:"→";font-family:var(--font-mono);font-weight:400;transition:transform .2s var(--ease)}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.link:hover::after{transform:translateX(3px)}
.section--dark .link,.link--on-dark{color:var(--blue-on-dark)}
.links{display:flex;flex-wrap:wrap;gap:12px 28px}

/* ── ヘッダー ───────────────────────────
   天のブルーの罫は、ページのいちばん上でブランドカラーに触れさせるため。
   ビックトップの赤罫と同じ役割で、色だけ差し替えている */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.90);backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--navy)}
.site-header .wrap{
  display:flex;align-items:center;gap:24px;
  height:var(--header-h);padding-top:3px;
}
.site-logo{
  display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;flex:none;
  font-family:var(--font-en);font-weight:700;font-size:19px;letter-spacing:.16em;
  color:var(--navy);
}
.site-logo small{
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  color:var(--text-3);
}
.site-nav{margin-left:auto;display:none;align-items:center;gap:6px}
.site-nav a{
  text-decoration:none;font-size:14px;font-weight:700;
  padding:9px 13px;border-radius:var(--r-sm);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.site-nav a:hover{background:var(--paper-2);color:var(--blue-ink)}
.site-nav a[aria-current="page"]{color:var(--blue-ink);font-weight:700}
.site-header .btn{padding:11px 20px;font-size:14px}
.site-header .site-cta{margin-left:8px;display:none}
@media (min-width:1000px){
  .site-nav{display:flex}
  .site-header .site-cta{display:inline-flex}
  :root{--header-h:72px}
}

/* モバイルのドロワー */
.nav-toggle{
  margin-left:auto;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer;
}
.nav-toggle i{display:block;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
/* vh の span も子要素なので nth-of-type で数える */
.nav-toggle[aria-expanded="true"] i:nth-of-type(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i:nth-of-type(2){opacity:0}
.nav-toggle[aria-expanded="true"] i:nth-of-type(3){transform:translateY(-7px) rotate(-45deg)}
/* メニューが開いている間は、ヘッダーごと濃紺の上にのせる */
body.is-locked .site-header{background:transparent;box-shadow:none;border-bottom-color:transparent}
body.is-locked .site-logo,body.is-locked .site-logo small{color:#fff}
body.is-locked .nav-toggle i{background:#fff}
body.is-locked .site-cta{display:none}
@media (min-width:1000px){ .nav-toggle{display:none} }
@media (min-width:1000px){ .drawer{display:none!important} }

/* ── ヒーロー ───────────────────────────
   写真は暗いので、白文字は影ではなくネイビーのグラデ膜で支える。
   膜は左から効かせて、右側の被写体は見えたまま残す */
.hero{position:relative;isolation:isolate;color:#fff;background:var(--navy-deep);overflow:hidden}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(9,17,40,.94) 0%, rgba(9,17,40,.80) 42%, rgba(9,17,40,.34) 100%),
    linear-gradient(180deg, rgba(9,17,40,.55) 0%, rgba(9,17,40,0) 40%);
}
.hero .wrap{position:relative;padding-block:64px 56px}
.hero .h1{max-width:22ch}
.hero__lead{margin-top:22px;max-width:58ch;color:var(--on-dark-2);font-size:var(--fs-lead);line-height:1.95}
@media (min-width:768px){ .hero .wrap{padding-block:96px 84px} }

/* 下層ページのヒーロー。トップより浅く、写真は帯として使う */
.hero--page .wrap{padding-block:52px 48px}
@media (min-width:768px){ .hero--page .wrap{padding-block:76px 72px} }

/* トップのヒーロー：金額は出さない（2026-09-09 判断）。
   代わりに「何が1本に入っているか」を出す。見出しの
   「クルマ・保険・整備・代車を、ひとつの月額に。」の裏づけを、
   スクロールしなくても見える位置に置くための枠 */
.hero--top .wrap{padding-block:72px 64px}
@media (min-width:768px){ .hero--top .wrap{padding-block:120px 104px} }
.hero__total{
  margin-top:44px;padding-top:28px;border-top:1px solid var(--hair-dark);
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px 48px;
}
.hero__figure{display:flex;flex-direction:column;gap:6px;min-width:0}
/* 含まれるものの列挙。
   狭い幅では枠つきのチップ。縦罫で区切ると、2行に折り返したときに
   行頭へ意味のない罫が1本残る（:first-child しか消せない）ため */
.hero__incl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:#fff}
.hero__incl span{
  font-size:15px;font-weight:700;line-height:1.5;letter-spacing:-.01em;
  padding:6px 14px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-pill);
}
/* 1行に収まる幅では、細い縦罫で区切る。
   別々のものが1本に束ねられている、という形にする */
@media (min-width:768px){
  .hero__incl{gap:0}
  .hero__incl span{
    font-size:clamp(18px,1.9vw,22px);
    padding:0 18px;border:0;border-left:1px solid rgba(255,255,255,.28);border-radius:0;
  }
  .hero__incl span:first-child{padding-left:0;border-left:0}
}
.hero__cond{margin-top:10px;font-size:var(--fs-xs);color:var(--on-dark-3);line-height:1.8;max-width:46ch}
.hero__total .actions{margin-left:auto}
@media (max-width:767px){ .hero__total .actions{margin-left:0;width:100%} }

/* ページ内アンカー（サービス・料金ページの目次） */
.hero__index{
  margin-top:36px;padding-top:22px;border-top:1px solid var(--hair-dark);
  display:flex;flex-wrap:wrap;gap:8px;
}
.hero__index a{
  text-decoration:none;font-size:var(--fs-sm);font-weight:700;color:#fff;
  padding:9px 16px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-sm);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.hero__index a:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ── 連番つき3カラム ─────────────────────
   ISSUES / THREE SYSTEMS / FLOW / 会社概要 で4回出てくる形。
   旧デザインでは同じ形を毎回違うマークアップで組んでいたので、
   ここに1本化して、罫の太さと連番の書式を固定する */
.cols{display:grid;gap:32px;border-top:1px solid var(--line-2);padding-top:8px}
.cols > li{padding-top:24px}
.col__no{
  display:block;font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.14em;color:var(--blue-ink);margin-bottom:12px;
}
.col__title{font-size:var(--fs-h3);margin-bottom:12px}
.col__body{color:var(--text-2);font-size:var(--fs-sm);line-height:1.8}
.section--dark .cols{border-color:var(--hair-dark)}
.section--dark .col__no{color:var(--blue-on-dark)}
.section--dark .col__body{color:var(--on-dark-2)}
@media (min-width:768px){
  .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
  .cols--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── FIG. 図版カード ────────────────────
   このサイトの主役。開示している中身そのものを図にして、
   通し番号とキャプションをつける。文章で「透明です」と言う代わりに、
   図版が並んでいること自体で透明さを示す */
.fig{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow-card);
}
@media (min-width:768px){ .fig{padding:32px} }
.section--dark .fig{background:var(--navy-2);border-color:var(--hair-dark);box-shadow:none}
/* FIG. 番号は残すが主役にしない（2026-09-13）。
   読む順は「日本語の見出し → 図 → 条件の注記」。番号は右端に小さく置く */
.fig__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin-bottom:20px;
}
.fig__title{order:1;font-size:clamp(17px,1.5vw,19px);font-weight:700;line-height:1.5}
.fig__no{
  order:2;margin-left:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--text-3);
}
.fig__tag{
  order:3;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.12em;
  color:var(--text-3);background:var(--paper);border-radius:var(--r-sm);padding:5px 12px;
}
.fig__lead{margin:-8px 0 20px}
.fig__note{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--text-3);font-size:var(--fs-xs);line-height:1.8;
}
.section--dark .fig__note{border-color:var(--hair-dark);color:var(--on-dark-3)}

/* 図版と本文を左右に組む（選ばれる理由） */
.figrow{display:grid;gap:32px;align-items:start}
/* 図版を左右に2枚並べる行。高さを揃えないと、短いほうのカードの下に
   大きな空白が残る（旧デザインの「選び方ガイド」で起きていた） */
.figrow--even{align-items:stretch}
.figrow--even .fig{display:flex;flex-direction:column}
.figrow--even .fig__note{margin-top:auto;padding-top:20px}
@media (min-width:1000px){
  .figrow{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px}
  .figrow--flip > :first-child{order:2}
}

/* 事実を1行ずつ、罫で区切って並べる。段落で書くと読み飛ばされる */
.facts{border-top:1px solid var(--line)}
.facts li{
  padding:14px 0;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--text-2);
}
.section--dark .facts,.section--dark .facts li{border-color:var(--hair-dark)}
.section--dark .facts li{color:var(--on-dark-2)}

.legend{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;
  font-size:var(--fs-xs);color:var(--text-3);
}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:14px;height:8px;border-radius:2px;background:var(--navy);flex:none}
.legend .is-included i{background:var(--yellow)}
.legend .is-self i{background:transparent;border:1px dashed var(--line-strong)}
.legend .is-car i{background:var(--blue)}
.legend .is-mnt i{background:var(--yellow)}
.legend .is-loan i{background:var(--blue)}
.legend .is-stop i{background:#DEE3EB}

/* ── 明細（車両代 ¥27,500 のような行） ──── */
.rows{border-top:1px solid var(--line)}
.rows > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);
}
.rows dt{color:var(--text-2)}
.rows dd{margin:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:500}
.rows--total{border-top:0}
.rows--total > div{
  border-bottom:0;background:var(--navy-deep);color:#fff;border-radius:var(--r-sm);
  padding:16px 18px;margin-top:8px;align-items:center;
}
.rows--total dt{color:var(--on-dark-2);font-size:var(--fs-xs)}
.rows--total dd{font-size:clamp(22px,3.6vw,28px);color:var(--yellow);line-height:1.1}
.section--dark .rows,.section--dark .rows > div{border-color:var(--hair-dark)}
.section--dark .rows dt{color:var(--on-dark-2)}

/* ── プランカード ───────────────────────
   旧デザインはAだけ内訳つきで縦に長く、B・Cが短冊で上に張りつき、
   下に大きな空白ができていた。3枚とも同じ骨格（見出し→総額→内訳→
   位置づけ）で組んで、高さを揃える */
.plans{display:grid;gap:16px}
@media (min-width:900px){ .plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} }
.plan{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;
}
.plan--rec{border-color:var(--blue);border-width:1.5px;padding:23.5px}  /* A強調は細いブルー枠と小バッジで足りる */
.plan__head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.plan__name{font-size:var(--fs-h4);font-weight:700}
.plan__badge{
  margin-left:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  background:var(--navy);color:#fff;border-radius:var(--r-sm);padding:5px 11px;
}
.plan__price{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(28px,4.2vw,34px);font-weight:500;line-height:1.2;letter-spacing:-.03em;
  padding-bottom:4px;
}
/* 総額に引くイエローの下線。金額がこの会社の開示物であることの印 */
.plan__price b{font-weight:500;box-shadow:inset 0 -.28em 0 var(--yellow-soft)}
.plan__unit{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:20px}
.plan__desc{font-size:var(--fs-sm);color:var(--text-2);margin-top:auto;padding-top:20px}

/* ── 比較表 ─────────────────────────────
   横に溢れる表は、必ず自分のコンテナの中でスクロールさせる。
   body が横スクロールすると全ページのレイアウトが崩れる */
.tablewrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:640px}
/* 行の高さは56px以上（14.5px×1.75＋上下18px）。縦罫は引かない */
.table th,.table td{padding:18px 16px;text-align:left;vertical-align:top}
.table thead th{
  background:var(--white);color:var(--navy);font-weight:700;font-size:var(--fs-sm);
  border-bottom:2px solid var(--navy);white-space:nowrap;position:sticky;top:0;
}
.table tbody tr + tr th,.table tbody tr + tr td{border-top:1px solid var(--line)}
.table tbody th{font-weight:700;color:var(--text-2);white-space:nowrap;background:var(--paper)}
.table td{color:var(--text)}
.table .is-amount{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.table .is-rec{background:var(--tint-blue)}
.table .is-off{color:var(--text-3)}
.scroll-hint{margin-top:10px;font-size:var(--fs-xs);color:var(--text-3)}
@media (min-width:900px){ .scroll-hint{display:none} }

/* ── 定義リスト（会社情報・車両仕様） ──── */
.deflist{border-top:1px solid var(--line)}
.deflist > div{
  display:grid;gap:2px 24px;padding:18px 0;border-bottom:1px solid var(--line);
}
.deflist--card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:4px 24px}
.deflist--card > div:last-child{border-bottom:0}
@media (min-width:768px){ .deflist--card{padding:8px 32px} }
.deflist dt{font-size:var(--fs-xs);color:var(--text-3)}
.deflist dd{margin:0;font-size:var(--fs-sm)}
@media (min-width:640px){
  .deflist > div{grid-template-columns:180px minmax(0,1fr);align-items:baseline}
  .deflist dt{font-size:var(--fs-sm)}
}
/* 差し替え待ちの項目は、隠さずそう見せる。
   小さすぎる注記で条件を隠す見せ方をしないのがこのサイトの前提なので、
   「まだ決まっていない」も同じ濃さで出す */
.tbd{
  display:inline-block;font-size:12.5px;line-height:1.6;color:var(--text-3);
  background:var(--paper-2);border-radius:var(--r-sm);padding:3px 12px;
}
.section--dark .tbd{background:rgba(255,255,255,.10);color:var(--on-dark-3)}

/* 公開前に差し替える前提の、長めの但し書き */
.callout{
  border-left:3px solid var(--line-strong);background:var(--paper-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 18px;
  color:var(--text-3);font-size:var(--fs-xs);line-height:1.85;
}

/* ── ステップ ───────────────────────────
   旧デザインは列が狭くて「納車・稼働開／始」と割れていた。
   縦積みを既定にして、横並びは幅が足りるときだけ */
.steps{display:grid;gap:12px;counter-reset:step}
.step{
  display:grid;gap:12px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px;
}
.step__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.step__icon{width:40px;height:40px;flex:none}
.step__no{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--navy-deep);color:#fff;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums;
}
.step__title{font-size:var(--fs-h4);font-weight:700}
.step__when{
  width:100%;font-family:var(--font-mono);font-size:var(--fs-label);
  letter-spacing:.12em;color:var(--text-3);
}
.step__body{color:var(--text-2);font-size:var(--fs-sm)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{
  font-size:var(--fs-xs);color:var(--text-2);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:5px 12px;
}
@media (min-width:900px){
  .step{grid-template-columns:260px minmax(0,1fr);align-items:start;gap:32px;padding:24px 28px}
  .step__head{flex-wrap:wrap}
  .step__when{padding-left:48px}
  .step__head:has(.step__icon) .step__when{padding-left:102px}
}

/* ── サポートカード ─────────────────────── */
.support{display:grid;gap:16px}
@media (min-width:900px){ .support{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} }
.support__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px;
}
.support__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.support__icon{flex:none;width:56px;height:56px}
.support__en{
  display:block;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.16em;
  color:var(--text-3);margin-bottom:2px;
}
.support__name{font-size:var(--fs-h4);font-weight:700;color:var(--text)}
.support__body{color:var(--text-2);font-size:var(--fs-sm);margin-bottom:14px}
.support ul li{
  position:relative;padding-left:18px;color:var(--text-2);font-size:var(--fs-xs);
  line-height:1.9;
}
.support ul li::before{
  content:"";position:absolute;left:2px;top:.75em;width:6px;height:6px;border-radius:50%;
  background:var(--blue);
}

/* ── 開示ブロック（月額以外にかかる費用） ──
   注記に落とさず、独立した面としてイエローの縦罫で立てる。
   罰則系の条件はここに載せない（契約前の重要事項説明で提示する） */
.disclose{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--yellow);
  border-radius:var(--r-sm);padding:24px;
}
@media (min-width:768px){ .disclose{padding:28px 32px} }
.disclose__grid{display:grid;gap:24px;margin-top:8px}
@media (min-width:768px){ .disclose__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} }
.disclose h3{font-size:var(--fs-h4);margin-bottom:8px}
.disclose p{color:var(--text-2);font-size:var(--fs-sm)}

/* ── ユースケース ───────────────────────── */
.cases{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){ .cases{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} }
.case figure{margin:0}
.case img{
  width:100%;aspect-ratio:21/20;object-fit:cover;border-radius:var(--r-sm);
  background:var(--paper-2);
}
.case figcaption{margin-top:12px;font-size:var(--fs-sm);font-weight:700}

/* ── FAQ ────────────────────────────────
   details/summary で組む。JSなしで開閉でき、
   ページ内検索でも閉じた答えが引っかかる */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:16px;
  padding:20px 4px;cursor:pointer;list-style:none;
  font-size:var(--fs-body);font-weight:700;line-height:1.7;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-ink)}
.faq__no{
  flex:none;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.12em;
  color:var(--text-3);font-weight:400;padding-top:.45em;
}
.faq__mark{
  flex:none;margin-left:auto;width:20px;height:20px;position:relative;
  align-self:center;color:var(--blue-ink);
}
.faq__mark::before,.faq__mark::after{
  content:"";position:absolute;inset:50% 0 auto;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .22s var(--ease);
}
.faq__mark::after{transform:rotate(90deg)}
.faq details[open] .faq__mark::after{transform:rotate(0)}
.faq__a{
  padding:0 4px 24px calc(16px + 2.4em);
  color:var(--text-2);font-size:var(--fs-sm);
}
.faq__a p + p{margin-top:12px}
@media (max-width:639px){ .faq__a{padding-left:4px} }

/* ── フォーム ───────────────────────────── */
.form{display:grid;gap:20px}
@media (min-width:768px){ .form{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} }
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:700}
.req,.opt{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  border-radius:var(--r-sm);padding:3px 9px;
}
.req{background:var(--navy);color:#fff}
.opt{background:var(--paper-2);color:var(--text-3)}
.field input,.field select,.field textarea{
  font:inherit;font-size:15px;color:var(--text);
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:13px 14px;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{min-height:140px;resize:vertical;line-height:1.8}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
.field input::placeholder,.field textarea::placeholder{color:#A7AEBD}
.form__submit{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}

/* 連絡手段の3枚。旧デザインは1枚目だけ太い罫、2・3枚目が細罫で
   意味のない差がついていた。罫は3枚とも同じにして、
   主導線は罫ではなくボタンの種類で示す */
.contacts{display:grid;gap:24px}
@media (min-width:900px){ .contacts{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} }
.contact{border-top:2px solid var(--navy);padding-top:20px}
.contact--primary{border:1.5px solid var(--blue);border-radius:var(--r);padding:24px;background:var(--white)}
.contact__en{
  display:block;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.16em;
  color:var(--text-3);margin-bottom:8px;
}
.contact h2{font-size:var(--fs-h3);margin-bottom:12px}
.contact p{color:var(--text-2);font-size:var(--fs-sm);margin-bottom:16px}
.contact__tel{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(22px,3.2vw,28px);font-weight:500;letter-spacing:-.02em;
  text-decoration:none;display:inline-block;margin-bottom:8px;
}

/* ── クロージングCTA ────────────────────── */
.cta{background:var(--navy-deep);color:#fff;text-align:center}
.cta .wrap{padding-block:72px}
@media (min-width:768px){ .cta .wrap{padding-block:104px} }
.cta .h2{color:#fff;margin-inline:auto}
.cta p{color:var(--on-dark-2);margin:20px auto 32px;max-width:56ch;font-size:var(--fs-lead)}

/* ── フッター ───────────────────────────── */
.site-footer{background:var(--navy-deep);color:#fff;border-top:1px solid var(--hair-dark)}
.site-footer .wrap{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;padding-block:36px;
}
.site-footer .site-logo{color:#fff}
.site-footer .site-logo small{color:var(--on-dark-3)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.site-footer nav a{text-decoration:none;font-size:var(--fs-sm);color:var(--on-dark-2)}
.site-footer nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.site-footer small{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;
  color:var(--on-dark-3);
}

/* ── モバイル固定CTA ────────────────────
   スマホが閲覧の大半なので、下端に常に相談導線を出す。
   フッターに届いたら引っ込める（JS側で .is-hidden） *
@media (min-width:1000px){ .dock{display:none} }
@media (min-width:1000px){ body:has(.dock){padding-bottom:0} }

/* ── 本文ページ（規約・プライバシー） ───── */
.prose{max-width:76ch}
.prose h2{font-size:var(--fs-h3);margin:40px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--text-2);font-size:var(--fs-sm)}
.prose p + p{margin-top:12px}
.prose ol{padding-left:1.4em;list-style:decimal}
.prose ul{padding-left:1.4em;list-style:disc}
.prose li{margin-top:6px}

/* ── 出てくる動き ───────────────────────
   数字のカウントアップと、ごく浅いフェード。それ以上はやらない */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .rise.is-in{opacity:1;transform:none}
}

/* ── 選び方ガイド（FIG.06） ─────────────── */
.choose{border-top:1px solid var(--line)}
.choose li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);
}
.choose b{font-weight:700;color:var(--blue-ink);white-space:nowrap}

/* ============================================================
   2026-09-13 デザイン改善で足した部品
   指示書：~/Claude/Projects/BRAVE/50_成果物/BRAVE_デザイン改善_2026-09-13/
   図版の文字はHTMLに置き、SVGは線と色面だけに使う（スマホで文字が小さくならないように）
   ============================================================ */

/* ── アイコン ──────────────────────────
   64×64 の viewBox。32px 未満には縮小しない */
.head__icon{width:40px;height:40px;margin-bottom:14px}
.col__icon{width:40px;height:40px;margin-bottom:14px}
.ico-h{display:flex;align-items:center;gap:12px}
.ico-h img{width:40px;height:40px;flex:none}

/* ── 積み上げ棒（プランAの実額） ──────────
   幅は実際の構成比。27,500＋4,051＋33,449＝65,000。
   Cは内訳の合計が表示総額と合わないため描かない（料金表原本の不整合・確認待ち） */
.compare{display:grid;gap:32px}
@media (min-width:900px){ .compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px} }
.compare__label{font-size:var(--fs-h4);font-weight:700;line-height:1.5}
.stack{display:flex;height:40px;margin:14px 0 4px;border-radius:var(--r-sm);overflow:hidden;background:var(--paper-2)}
.stack__seg{display:block;height:100%;flex:none}
.stack__seg + .stack__seg{box-shadow:inset 2px 0 0 #fff}
.stack__seg--car{background:var(--blue)}
.stack__seg--mnt{background:var(--yellow)}
.stack__seg--ins{background:var(--navy)}
.stack__seg--self{
  background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(148,160,184,.22) 7px 9px);
  outline:1px dashed var(--line-strong);outline-offset:-1px;
}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:1px;flex:none}
.dot--car{background:var(--blue)}
.dot--mnt{background:var(--yellow)}
.dot--ins{background:var(--navy)}
.dot--self{background:transparent;border:1px dashed var(--line-strong)}
.rows .is-total dt{font-weight:700;color:var(--text)}
.rows .is-total dd{font-weight:700;color:var(--navy)}

/* ── 7日間の稼働モデル（FIG.02） ──────────
   自車・代車・停止を、色だけでなく数字・凡例・結果の文字で区別する */
.days{display:grid;gap:20px}
.days__row{display:grid;gap:10px}
.days__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.days__label{font-weight:700;font-size:var(--fs-sm)}
.days__result{font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap}
.days__result b{font-family:var(--font-mono);font-size:24px;font-weight:500;color:var(--navy);margin-right:2px}
.days__cells{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.day{
  height:40px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums;
}
.day--own{background:var(--navy);color:#fff}
.day--loan{background:var(--blue);color:#fff}
.day--stop{background:#DEE3EB;color:#526079}

/* ── 与信の関係図（FIG.03） ───────────────
   個人の与信＋所属会社の保証 → BRAVEの確認・審査。
   根拠のない長さの与信棒（38%／100%）は使わない */
.flow{display:grid;gap:28px}
.flow__node{
  position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 14px;align-items:center;
  background:var(--tint-blue);border-radius:16px;padding:16px 18px;
}
.flow__icon{width:44px;height:44px;grid-row:span 2}
.flow__title{font-weight:700;font-size:var(--fs-h4);line-height:1.4}
.flow__sub{font-size:var(--fs-xs);color:var(--text-2);line-height:1.6}
.flow__node--end{background:var(--white);border:1.5px solid var(--blue)}
.flow__node:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:-19px;width:10px;height:10px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateX(-50%) rotate(45deg);
}

/* ── 比較表の下に続ける小見出し ─────────── */
.head--sub{margin-top:72px}

/* ── 本文ページの見出し帯（規約・プライバシー）：可読性優先で明るく ── */
.hero--plain{background:var(--tint-blue);color:var(--text)}
.hero--plain::after{display:none}
.hero--plain .eyebrow{color:var(--text-3)}
.hero--plain .h1{color:var(--navy)}

/* ============================================================
   2026-09-19 トップのファーストビュー：明るい街のイラスト
   写真をやめ、自作のSVGに置き換えた（A案を採用）
   ============================================================ */

/* ── 面の境目 ───────────────────────────
   曲線で見せると柔らかくなりすぎる。1pxの罫で地の変わり目だけ示す */
.section--blue{border-block:1px solid #DCE8FA}
.section--paper{border-block:1px solid var(--line)}

/* ── プランの推奨だけ少し持ち上げる ─────── */
.plan--rec{box-shadow:0 10px 28px -22px rgba(20,38,94,.4)}

/* ── 写真の角丸をカードとそろえる ───────── */
.case img{border-radius:var(--r)}

/* ============================================================
   Pattern C（2026-09-19 承認）
   仕様：docs/C-DESIGN-IMPLEMENTATION-SPEC.md
   文法：明るい分割ヒーロー → 濃紺の情報レール → 白／淡青の説明 →
        濃紺の開示アンカー → 写真 → 濃紺のクロージング。
   濃紺の面は「確かな情報」を置く場所で、飾りの帯ではない。
   丸いアイコンの泡・波・同じ白カードの反復・強い影は使わない。
   ============================================================ */

/* ── 写真の扱い ────────────────────────
   既存写真は暗い生成画像。実写が入るまで、同じ昼光の調子に寄せる */
.photo{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(1.1) saturate(1.04) contrast(.97)}

/* ── アイコン（塗りつぶしの円を持たない） ──
   マスクで描くので、置いた場所の文字色をそのまま拾う */
.ico{
  display:inline-block;width:26px;height:26px;flex:none;background:currentColor;
  -webkit-mask:var(--i) no-repeat center/contain;mask:var(--i) no-repeat center/contain;
}
.ico--lg{width:32px;height:32px}

/* ── 濃紺の情報レール ───────────────────
   「月額に何が含まれるか」を横一列で示す。区切りは1pxの白罫 */
.rail{background:var(--navy-deep);color:#fff}
.rail__inner{display:grid;gap:14px 0;padding-block:20px}
.rail__label{display:grid;gap:6px;align-content:center}
.rail__label span{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.2em;color:var(--yellow)}
.rail__label b{font-size:15px;font-weight:700;line-height:1.6}
.rail__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.rail__item{
  display:flex;align-items:center;gap:10px;padding:12px 14px;min-width:0;
  border-top:1px solid rgba(255,255,255,.18);
}
.rail__mark{display:flex;align-items:center;gap:8px;flex:none}
.rail__check{
  width:19px;height:19px;border-radius:50%;background:var(--yellow);color:var(--navy-deep);
  display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;flex:none;
}
.rail__check::before{content:"✓"}
.rail__item:nth-child(2n){border-left:1px solid rgba(255,255,255,.18)}
.rail__item b{font-size:14.5px;font-weight:700;line-height:1.5}
.rail__item small{display:block;font-size:12px;color:var(--on-dark-3);line-height:1.5}

@media (min-width:1000px){
  .rail__inner{grid-template-columns:auto 1fr;gap:0 28px;align-items:center;padding-block:14px}
  .rail__items{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none}
  .rail__item{
    border-top:0;border-left:1px solid rgba(255,255,255,.18);padding:16px 18px;
    flex-direction:column;align-items:center;text-align:center;gap:8px;
  }
  .rail__item small{margin-top:2px}
  .rail__item:nth-child(2n){border-left:1px solid rgba(255,255,255,.18)}
}

/* ── 濃紺の開示アンカー ─────────────────
   ページで一番大事な開示を、面ごと濃紺にして置く */
.section--navy{background:var(--navy-deep);color:#fff}
.section--navy .h2,.section--navy h2,.section--navy h3{color:#fff}
.section--navy .lead,.section--navy p{color:var(--on-dark-2)}
.section--navy .eyebrow{color:var(--on-dark-3)}
.section--navy .note{color:var(--on-dark-3)}
.panel{background:var(--white);border-radius:var(--r);padding:24px;color:var(--text)}
@media (min-width:768px){ .panel{padding:28px} }
.panel--navy{background:var(--navy-2);color:#fff;border:1px solid var(--hair-dark)}
.panel--navy .note{color:var(--on-dark-3)}
.panel__title{font-size:var(--fs-h4);font-weight:700;margin-bottom:14px}

/* ── 写真と本文の2段組 ─────────────────── */
.media-split{display:grid;gap:28px}
.media-split__photo{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--paper-2)}
@media (min-width:1000px){
  .media-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
  .media-split--flip .media-split__photo{order:-1}
  .media-split__photo{aspect-ratio:3/2}
}

/* ── 罫で区切る3つの言明（カードにしない） ── */
.stmts{display:grid;gap:24px}
@media (min-width:900px){ .stmts{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} }
.stmt{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 24px;border-top:3px solid var(--navy);
}
.section--navy .stmt,.stmts--list .stmt{background:none;border:0;padding:24px 0}
.stmt__no{
  display:inline-block;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;
  background:var(--navy);color:#fff;padding:3px 8px;border-radius:var(--r-sm);margin-bottom:12px;
}
.stmt h3{font-size:var(--fs-h4);margin-bottom:10px;line-height:1.6}
.stmt p{font-size:var(--fs-sm);color:var(--text-2);line-height:1.8}
.section--navy .stmt{border-top-color:var(--yellow)}
.section--navy .stmt__no{background:rgba(255,255,255,.14)}
.section--navy .stmt p{color:var(--on-dark-2)}

/* ── 罫で並べる仕組みの行 ───────────────── */
.mechs{border-top:1px solid var(--line-2)}
.mech{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;
  padding:20px 0;border-bottom:1px solid var(--line-2);
}
.mech .ico{grid-row:span 2;color:var(--navy);margin-top:2px}
.mech h3{font-size:var(--fs-h4);line-height:1.6}
.mech p{font-size:var(--fs-sm);color:var(--text-2);line-height:1.8}

/* ── 3列の工程 ─────────────────────────── */
.steps--grid{display:grid;gap:16px}
@media (min-width:900px){ .steps--grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} }
.steps--grid .step{
  display:block;background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);padding:20px 22px;
}
.steps--grid .step__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.steps--grid .step__no{
  width:auto;height:auto;border-radius:var(--r-sm);padding:3px 8px;background:var(--navy);
  font-size:var(--fs-label);letter-spacing:.14em;
}
.steps--grid .step__when{width:auto;margin-left:auto;padding:0}
.steps--grid .step__title{font-size:var(--fs-h4)}

/* ── 濃紺の上に置く費用の開示 ─────────────── */
.fees{display:grid;gap:24px}
@media (min-width:900px){ .fees{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:32px} }
.fee .ico{width:24px;height:24px;color:var(--yellow);margin-bottom:10px;display:block}
.fee{border-left:3px solid var(--yellow);padding-left:18px}
.fee h3{font-size:var(--fs-h4);margin-bottom:8px;color:#fff}
.fee p{font-size:var(--fs-sm);line-height:1.8;color:var(--on-dark-2)}

/* ── 読み手別の導線 ─────────────────────── */
.paths{display:grid;gap:28px}
@media (min-width:900px){ .paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px} }
.path{border-top:2px solid var(--navy);padding-top:20px}
.path h2{font-size:var(--fs-h3);margin:6px 0 12px}
.path p{font-size:var(--fs-sm);color:var(--text-2);line-height:1.8}

/* ── アイコン（mask 用の参照。url() はこのCSSからの相対で解決される） */
.ico--calendar{--i:url(../img/icon-calendar.svg)}
.ico--company{--i:url(../img/icon-company.svg)}
.ico--document{--i:url(../img/icon-document.svg)}
.ico--loaner{--i:url(../img/icon-loaner.svg)}
.ico--maintenance{--i:url(../img/icon-maintenance.svg)}
.ico--shield{--i:url(../img/icon-shield.svg)}
.ico--support{--i:url(../img/icon-support.svg)}
.ico--van{--i:url(../img/icon-van.svg)}

/* 濃紺セクションの上に置いた白い面は、本文色を戻す */
.section--navy .fig,
.section--navy .card,
.section--navy .plan,
.section--navy .deflist--card{color:var(--text)}
.section--navy .fig .fig__title,
.section--navy .fig h3,
.section--navy .fig h4{color:var(--navy)}

/* 暗い写真を昼光寄りに持ち上げる（生成写真のシアン被り対策） */
.photo--lift{filter:brightness(1.24) saturate(.9) contrast(.94)}

/* ── コンパクトヒーロー（下層ページ用）
   写真を使わず、淡いブルーの面と濃紺の罫だけで受ける */
.hero--compact{background:var(--tint-blue);color:var(--text);border-bottom:1px solid var(--line)}
.hero--compact::after{display:none}
.hero--compact .eyebrow{color:var(--blue-ink)}
.hero--compact .h1{color:var(--navy)}
.hero--compact .hero__lead{color:var(--text-2)}
.hero--compact .wrap{padding-block:48px 40px}
.hero--compact .h1{margin-top:6px}
.hero--compact .hero__lead{margin-top:18px;max-width:62ch;color:var(--text-2)}
@media (min-width:768px){.hero--compact .wrap{padding-block:72px 60px}}

/* レールの項目をリンクにする場合（FAQのカテゴリー等） */
.rail__item a{
  display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none;
  width:100%;min-height:44px;justify-content:center;
}
.rail__item a:hover b{text-decoration:underline;text-underline-offset:3px}

/* 罫で区切った縦並びの言明（会社概要の3つの柱など） */
.stmts--list{display:grid;gap:0;grid-template-columns:minmax(0,1fr);list-style:none;padding:0;margin:0}
.stmts--list .stmt{border-top:1px solid rgba(255,255,255,.22);padding:24px 0}
.stmts--list .stmt:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
@media (min-width:900px){
  .stmts--list .stmt{display:grid;grid-template-columns:64px minmax(0,26ch) minmax(0,1fr);gap:24px;align-items:baseline}
}

/* 明るいヒーロー上の目次 *

/* ── 参考ボードの文法にそろえた部品（2026-09-19） ───────── */

/* 青い丸チェックの箇条書き */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.checks li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.7;color:var(--text)}
.checks li::before{
  content:"✓";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:10.5px;font-weight:700;
  display:grid;place-items:center;line-height:1;
}
.checks li b{font-weight:700}
.checks .is-note{margin-left:auto;font-size:12px;color:var(--text-3);white-space:nowrap}
.section--navy .checks li{color:var(--on-dark-2)}
.section--navy .checks li::before{background:var(--yellow);color:var(--navy-deep)}

/* 枠線のアイコンタイル（「月額に含まれるもの」） */
.tiles{
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:768px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:18px 12px;min-height:104px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
}
.tile .ico{width:30px;height:30px;color:var(--navy)}
.tile b{font-size:13.5px;font-weight:700;line-height:1.5;color:var(--navy)}
.tile small{font-size:11.5px;color:var(--text-3);line-height:1.5}

/* 白い枠の箱（タイル群や表を囲む） */
.boxed{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;
}
.section--white .boxed,.section--paper .boxed{background:var(--tint-blue)}
.boxed__title{
  font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.boxed .note{margin-top:12px}

/* 見出し左・説明右の2段組み（参考ボードの見出し） */
.head--split{display:grid;gap:12px 40px;align-items:end;margin-bottom:36px}
@media (min-width:900px){
  .head--split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .head--split .lead{margin:0;padding-bottom:4px}
}

/* 写真を画面の端まで逃がす（参考ボードの文法） */
@media (min-width:1000px){
  .media-split--bleed .media-split__photo{
    border-radius:0;aspect-ratio:auto;align-self:stretch;min-height:380px;
    margin-right:calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2));
  }
  .media-split--bleed.media-split--flip .media-split__photo{
    margin-right:0;
    margin-left:calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2));
  }
  .media-split--bleed{gap:48px}
}

/* 写真の上に濃紺をかぶせたクロージング（参考ボード） */
.cta--photo{position:relative;isolation:isolate;overflow:hidden}
.cta__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:saturate(.55);
}
.cta--photo::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(10,22,56,.94) 0%, rgba(10,22,56,.86) 55%, rgba(10,22,56,.78) 100%);
}

/* 白い枠の中に入れた仕組みの行 */
.boxed .mechs{gap:0}
.boxed .mech{padding:18px 0}
.boxed .mech:first-child{padding-top:4px}
.boxed .mech:last-child{border-bottom:0;padding-bottom:4px}

/* ══ 参考ボードの構成要素（2026-09-19 第2弾） ══════════ */

/* パンくず */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;color:var(--text-3);margin-bottom:18px}
.crumbs a{color:var(--text-3);text-decoration:none}
.crumbs a:hover{color:var(--blue-ink);text-decoration:underline}
.crumbs span::before{content:"›";margin-right:8px;color:var(--line-2)}

/* 見出しラベルの右に伸びる罫 */
.eyebrow--line{display:flex;align-items:center;gap:14px}
.eyebrow--line::after{content:"";flex:1;height:1px;background:var(--line-2);max-width:200px}
.section--navy .eyebrow--line::after{background:rgba(255,255,255,.28)}

/* 無料・有料のチップ */
.chip{display:inline-block;font-size:11.5px;font-weight:700;line-height:1;padding:4px 9px;border-radius:4px;margin-left:auto;flex:none}
.chip--free{background:var(--yellow-soft);color:#8a6200}
.chip--paid{background:var(--paper-2);color:var(--text-3)}

/* 月額の構成イメージ（＋でつなぐ） *

/* 矢印でつなぐステップ */
.steps--arrow{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);list-style:none;padding:0;margin:0;counter-reset:none}
@media (min-width:900px){
  .steps--arrow{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:stretch;gap:0}
  .steps--arrow .step{position:relative;margin-right:22px}
  .steps--arrow .step:not(:last-child)::after{
    content:"";position:absolute;right:-16px;top:50%;width:9px;height:9px;
    border-top:2px solid var(--line-strong);border-right:2px solid var(--line-strong);
    transform:translateY(-50%) rotate(45deg);
  }
}
.steps--arrow .step{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;
}
.steps--arrow .step__no{
  font-family:var(--font-mono);font-size:26px;line-height:1;color:var(--line-strong);
}
.steps--arrow .step__title{font-size:var(--fs-h4);font-weight:700;color:var(--navy);line-height:1.5}
.steps--arrow .step__body{font-size:13px;color:var(--text-2);line-height:1.8}

/* 写真つきの流れカード（濃紺の面） */
.flowcards{display:grid;gap:18px;list-style:none;padding:0;margin:0}
@media (min-width:900px){.flowcards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.flowcard{background:var(--navy-2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.flowcard__head{display:flex;align-items:center;gap:10px;padding:14px 16px}
.flowcard__no{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.12em;
  background:rgba(255,255,255,.14);color:#fff;padding:3px 8px;border-radius:var(--r-sm)}
.flowcard__title{font-size:14.5px;font-weight:700;color:#fff}
.flowcard img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.flowcard p{padding:14px 16px 18px;font-size:12.5px;line-height:1.8;color:var(--on-dark-2)}

/* 手配の比較（個別 ↔ まとめて） */
.compare-lists{display:grid;gap:16px;align-items:start}
@media (min-width:900px){.compare-lists{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:0}}
.clist{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.clist__head{font-size:13px;font-weight:700;padding:12px 18px;background:var(--paper-2);color:var(--text-2)}
.clist--brave .clist__head{background:var(--blue);color:#fff}
.clist ul{list-style:none;margin:0;padding:14px 18px 18px;display:grid;gap:9px}
.clist li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--text-2);line-height:1.7}
.clist--brave li{color:var(--text)}
.clist--brave li::before{
  content:"✓";flex:none;width:17px;height:17px;border-radius:50%;background:var(--yellow);
  color:var(--navy-deep);font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1;
}
.clist--plain li::before{content:"";flex:none;width:17px;height:1px;background:var(--line-2)}
.clist__lead{padding:14px 18px 0;font-size:13.5px;font-weight:700;color:var(--blue-ink);line-height:1.6}
.compare-lists__arrow{display:grid;place-items:center;color:var(--blue);font-size:22px}
@media (max-width:899px){.compare-lists__arrow{transform:rotate(90deg);padding:4px 0}}

/* プラン別の利用条件 */
.cond-cols{display:grid;gap:20px}
@media (min-width:900px){.cond-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cond{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px 22px}
.cond h3{font-size:var(--fs-h4);color:var(--navy);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cond ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cond li{position:relative;padding-left:16px;font-size:13px;color:var(--text-2);line-height:1.8}
.cond li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--blue)}

/* Q&A の抜粋 */
.qa{display:grid;gap:18px}
@media (min-width:900px){.qa{grid-template-columns:repeat(3,minmax(0,1fr))}}
.qa__item{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:grid;gap:12px}
.qa__row{display:flex;gap:10px;align-items:flex-start}
.qa__mark{
  flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:11px;font-weight:700;line-height:1;
}
.qa__mark--q{background:var(--blue);color:#fff}
.qa__mark--a{background:var(--paper-2);color:var(--text-3)}
.qa__q{font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.6}
.qa__a{font-size:13px;color:var(--text-2);line-height:1.8}

/* 写真＋仕様表のカード */
.details{display:grid;gap:18px}
@media (min-width:768px){.details{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.details{grid-template-columns:repeat(5,minmax(0,1fr))}}
.detail{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.detail img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.detail h3{font-size:14.5px;color:var(--navy);padding:14px 16px 10px;line-height:1.5}
.detail h3 small{display:block;font-size:11.5px;font-weight:400;color:var(--text-3);margin-top:3px}
.detail dl{margin:0;padding:0 16px 18px;display:grid;gap:0}
.detail dl>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.detail dt{font-size:11.5px;color:var(--text-3);white-space:nowrap}
.detail dd{margin:0;font-size:12px;color:var(--text);line-height:1.7}

/* 次の一歩のバンド */
.nextaction{display:grid;gap:20px;align-items:center;padding:28px 0 0;border-top:1px solid var(--line)}
@media (min-width:900px){.nextaction{grid-template-columns:minmax(0,1fr) auto}}
.nextaction h2{font-size:var(--fs-h3);color:var(--navy);line-height:1.6;margin-bottom:8px}
.nextaction p{font-size:13.5px;color:var(--text-2)}

/* レールの黄色い丸チェック（参考ボード） */
.rail__mark{display:flex;align-items:center;gap:8px;flex:none}
.rail__check{
  width:19px;height:19px;border-radius:50%;background:var(--yellow);color:var(--navy-deep);
  display:grid;place-items:center;font-size:11px;font-weight:700;line-height:1;flex:none;
}
.rail__check::before{content:"✓"}
@media (min-width:1000px){ .rail__item{padding-top:16px;padding-bottom:16px} }

/* 読み手別の導線に写真を添える */
.path__photo{margin:0 0 20px}
.path__photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);display:block}
@media (min-width:900px){.path__photo img{aspect-ratio:21/9}}

/* お問い合わせ：フォーム左／準備の案内（濃紺）右 */
.formrow{display:grid;gap:0;align-items:stretch}
@media (min-width:1000px){.formrow{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.formcol{background:var(--white);padding:0}
@media (min-width:1000px){.formcol{padding-right:48px}}
.prep{
  background:var(--navy-deep);color:#fff;border-radius:var(--r);
  padding:32px 30px 34px;margin-top:40px;
}
@media (min-width:1000px){.prep{margin-top:0}}
.prep .eyebrow{color:var(--on-dark-3)}
.prep .eyebrow--line::after{background:rgba(255,255,255,.28)}
.prep .h2{color:#fff;font-size:clamp(20px,2vw,26px);margin-top:10px}
.prep .lead{color:var(--on-dark-2);font-size:14px;margin-top:14px}
.prep__list{margin:26px 0 0;display:grid;gap:0}
.prep__list>div{padding:14px 0;border-top:1px solid rgba(255,255,255,.18)}
.prep__list dt{font-size:14.5px;font-weight:700;color:#fff;margin-bottom:4px}
.prep__list dt::before{content:"◆";color:var(--yellow);font-size:10px;margin-right:8px;vertical-align:2px}
.prep__list dd{margin:0;font-size:12.5px;color:var(--on-dark-2);line-height:1.8;padding-left:20px}
.prep__line{
  margin-top:28px;background:var(--white);border-radius:var(--r);padding:22px 22px 24px;color:var(--text);
}
.prep__line .eyebrow{color:var(--text-3)}
.prep__line h3{font-size:var(--fs-h4);color:var(--navy);margin:6px 0 10px}
.prep__line p{font-size:13px;color:var(--text-2);line-height:1.8}
.prep__line .note{color:var(--text-3)}

/* ══ SP の作り（2026-09-27 見直し） ══════════════
   ① ファーストビューはPCと同じ「コピー＋写真」だけにする。
      濃紺のレールは順番を入れ替えてページ下部（クロージングの手前）へ。
   ② PCで横1列に収まっているものは、SPでは縦に積まずに
      横スワイプのスライダーにして、スクロール量を抑える。 */

@media (max-width:999px){
  #main{display:flex;flex-direction:column}
  #main > *{order:1}
  #main > .rail{order:2}
  #main > .cta,
  #main > .section--dark{order:3}
  /* 下に回したレールは、面として独立させる */
  #main > .rail{border-top:1px solid rgba(255,255,255,.12)}
}

@media (max-width:767px){
  .swipe,
  .plans,.details,.cases,.cond-cols,.qa,.flowcards,.fees,
  .compare,.stmts,.paths,.steps--grid,.steps--arrow,
  .compare-lists,.two,.support,.scenes,.terms,.cols:not(.cols--2){
    display:flex;
    flex-wrap:nowrap;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    list-style:none;
    /* 画面端まで流して、次のカードの気配を見せる */
    margin-inline:calc(-1 * var(--gutter));
    padding-inline:var(--gutter);
    padding-block:2px 4px;
  }
  /* 濃紺の面に置く費用・言明は、枠がないと切れ目が分かりにくい */
  .fees > *{padding-block:2px}
  .paths > *{padding-top:18px}
  .cases > *{flex-basis:min(62%, 240px)}
  .steps--arrow .step{margin-right:0}
  .steps--arrow .step:not(:last-child)::after{display:none}
  /* スワイプできることを伝える */
  .swipe-hint{
    display:flex;align-items:center;gap:8px;margin-top:12px;
    font-size:var(--fs-xs);color:var(--text-3);
  }
  .section--navy .swipe-hint{color:var(--on-dark-3)}
  .swipe-hint::before{content:"";width:22px;height:1px;background:currentColor}
}
@media (min-width:768px){ .swipe-hint{display:none} }

@media (max-width:767px){
  /* ＋の記号は縦積み前提だったので、横並びでは詰める */
  /* 手配の比較は、矢印を挟まず2枚のカードとして並べる */
  .compare-lists__arrow{display:none}
  .compare-lists > .clist{flex-basis:min(84%,300px)}
}

@media (max-width:767px){
  /* 図版つきの行は縦積み。ただし本文（見出し）を必ず先に見せる */
  .figrow{display:flex;flex-direction:column;gap:28px}
  .figrow > :not(.fig){order:-1}
  /* 下層ページの目次チップは、セクションが短くなったSPでは畳む */
  .hero__index{display:none}
}

/* スワイプ列にフォーカスが当たったことが分かるように */
@media (max-width:767px){
  [role="group"][tabindex="0"]:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
}

/* ══ FV 候補（2026-09-27）｜写真を主役にした3案 ══════════
   どれも文字は写真の上。可読性は濃紺のオーバーレイで担保する。
   採用が決まったら、不採用の2つはここから削除する。 */

.fv{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-deep);color:#fff}
.fv__media{position:absolute;inset:0;z-index:-2}
.fv__media > *{position:absolute;top:0;height:100%;display:block}
.fv__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.02)}
.fv::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,
    rgba(10,22,56,.90) 0%, rgba(10,22,56,.84) 34%,
    rgba(10,22,56,.58) 60%, rgba(10,22,56,.30) 100%);
}
.fv .wrap{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:520px;padding-block:56px 48px}
@media (min-width:1000px){ .fv .wrap{min-height:620px;padding-block:80px 64px} }
.fv__eyebrow{display:flex;width:fit-content;max-width:100%;align-items:center;gap:12px;font-family:var(--font-mono);
  font-size:var(--fs-label);letter-spacing:.2em;color:var(--yellow);margin-bottom:18px}
.fv__eyebrow::before{content:"";width:28px;height:2px;background:var(--yellow)}
.fv__title{font-size:clamp(29px,4vw,48px);line-height:1.45;font-weight:700;letter-spacing:-.01em;max-width:24ch;text-shadow:0 2px 18px rgba(6,14,38,.35)}
.fv__lead{margin-top:20px;max-width:44ch;font-size:var(--fs-lead);line-height:1.95;color:#e6ebf6;text-shadow:0 1px 12px rgba(6,14,38,.4)}
.fv .actions{margin-top:32px}
.fv__note{margin-top:18px;width:fit-content;max-width:52ch;font-size:var(--fs-xs);color:var(--on-dark-3)}

/* A案：斜めに切った写真を並べる */
.fv--slice .fv__media > *:nth-child(1){left:0;width:40%;clip-path:polygon(0 0,100% 0,calc(100% - 110px) 100%,0 100%)}
.fv--slice .fv__media > *:nth-child(2){left:34%;width:28%;clip-path:polygon(110px 0,100% 0,calc(100% - 110px) 100%,0 100%)}
.fv--slice .fv__media > *:nth-child(3){left:56%;width:26%;clip-path:polygon(110px 0,100% 0,calc(100% - 110px) 100%,0 100%)}
.fv--slice .fv__media > *:nth-child(4){left:76%;width:24%;clip-path:polygon(110px 0,100% 0,100% 100%,0 100%)}
@media (max-width:767px){
  .fv--slice .fv__media > *:nth-child(1){width:64%}
  .fv--slice .fv__media > *:nth-child(2){left:56%;width:44%;clip-path:polygon(70px 0,100% 0,100% 100%,0 100%)}
  .fv--slice .fv__media > *:nth-child(3),
  .fv--slice .fv__media > *:nth-child(4){display:none}
}

/* 濃紺のFVに置くパンくず */
.crumbs--on-dark{color:var(--on-dark-3);margin-bottom:22px}
.crumbs--on-dark a{color:var(--on-dark-3)}
.crumbs--on-dark a:hover{color:#fff}
.crumbs--on-dark span::before{color:rgba(255,255,255,.35)}
.fv .actions{flex-wrap:wrap}
@media (max-width:480px){
  .fv .actions{display:grid;gap:10px}
  .fv .actions .btn{width:100%}
}

/* ══════════════════════════════════════════════════════
   仕上げ（2026-09-30）
   ① 日本語の折り返しを文節で切る
   ② 動きに階層をつける（出現・視差・ホバー）
   ③ 触ったときの手応えと、細部の始末
   すべて prefers-reduced-motion を尊重する
   ══════════════════════════════════════════════════════ */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);     /* 出現・移動 */
  --ease-soft:cubic-bezier(.4,0,.2,1);      /* 色・不透明度 */
}

/* ── ① 見出しの折り返し ──────────────────
   「黒ナンバー軽/バン」のような中途半端な改行をやめ、文節で折る。
   対応していないブラウザでは今までどおり折れるだけ */
h1,h2,h3,h4,
.h1,.h2,.h3,.fv__title,.plan__name,.qa__q,.step__title{
  word-break:auto-phrase;
  text-wrap:pretty;
}
.h2,.fv__title{text-wrap:balance}
.lead,.hero__lead,.fv__lead,p{word-break:auto-phrase}
/* 数字と単位のあいだで折らない */
.num,.plan__price,.fv__note .num{white-space:nowrap}

/* ── ② 出現に順番をつける ────────────────
   同じ列のカードが一斉に出ると、機械が描いたように見える。
   1枚ずつ 60ms ずらす */
@media (prefers-reduced-motion:no-preference){
  .rise{transition-timing-function:var(--ease-out);transition-duration:.7s}
  .rise[style*="--i"]{transition-delay:calc(var(--i) * 60ms)}
  .stagger > *{
    opacity:0;transform:translateY(16px);
    transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
    transition-delay:calc(var(--i, 0) * 70ms);
  }
  .stagger.is-in > *{opacity:1;transform:none}
}

/* FVの写真を、スクロールでゆっくり動かす（JSが --p を入れる） */
@media (prefers-reduced-motion:no-preference) and (min-width:768px){
  .fv__media > *{will-change:transform}
  .fv--slice .fv__media > *:nth-child(1){transform:translate3d(0,calc(var(--p,0) * 14px),0)}
  .fv--slice .fv__media > *:nth-child(2){transform:translate3d(0,calc(var(--p,0) * 26px),0)}
  .fv--slice .fv__media > *:nth-child(3){transform:translate3d(0,calc(var(--p,0) * 20px),0)}
  .fv--slice .fv__media > *:nth-child(4){transform:translate3d(0,calc(var(--p,0) * 32px),0)}
}

/* ── ③ 触れたときの手応え ────────────────*/
.btn{transition:background .22s var(--ease-soft),border-color .22s var(--ease-soft),
     color .22s var(--ease-soft),transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}
.btn--primary:hover{box-shadow:0 8px 20px rgba(37,99,235,.28);transform:translateY(-1px)}
.btn--primary:active,.btn--outline:active{transform:translateY(0)}
.btn--outline:hover{border-color:var(--navy);background:var(--paper)}

.link{text-underline-offset:4px;text-decoration-thickness:1px}
.link:hover{text-decoration-color:var(--blue)}
.link:hover::after{transform:translateX(4px)}

/* 写真はカードごと、ゆっくり寄る */
.case figure,.detail,.flowcard{overflow:hidden}
.case img,.detail img,.flowcard img{
  transition:transform .6s var(--ease-out),filter .4s var(--ease-soft);
}
@media (hover:hover){
  .case figure:hover img,.detail:hover img,.flowcard:hover img{transform:scale(1.045)}
}

/* カードは持ち上げず、罫と影だけで応える（安っぽくしない） */
.plan,.cond,.qa__item,.detail,.path,.step{
  transition:border-color .22s var(--ease-soft),box-shadow .22s var(--ease-out);
}
@media (hover:hover){
  .plan:hover,.cond:hover,.qa__item:hover,.detail:hover{
    border-color:var(--line-2);box-shadow:0 10px 30px rgba(20,38,94,.07);
  }
}

/* ── ヘッダー：下げると細くなって、罫が締まる ── */
.site-header{transition:box-shadow .25s var(--ease-soft),background .25s var(--ease-soft)}
body.is-scrolled .site-header{box-shadow:0 1px 0 var(--line),0 6px 24px rgba(20,38,94,.06)}

/* ── アンカーの着地位置（固定ヘッダーぶん下げる） ── */
:target,[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

/* ── FVのスクロール誘導 ───────────────── */
.fv__cue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--on-dark-3);
}
.fv__cue i{display:block;width:1px;height:38px;background:linear-gradient(to bottom,transparent,var(--yellow));}
@media (prefers-reduced-motion:no-preference){
  .fv__cue i{animation:cue 2.4s var(--ease-soft) infinite}
  @keyframes cue{0%{transform:scaleY(.2);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
    46%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
}
@media (max-width:767px){ .fv__cue{display:none} }

/* ── 濃紺の面でのスクロールバー・選択色 ── */
.section--navy ::selection,.fv ::selection,.cta ::selection{background:var(--yellow);color:var(--navy-deep)}

/* ── ページ間のつなぎ（対応ブラウザのみ・1行で効く） ── */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .18s var(--ease-soft) both}
  ::view-transition-new(root){animation:vt-in .34s var(--ease-out) both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ── FVの入り：上から順に、1行ずつ置いていく ──
   アニメーションが動かない環境では、そのまま表示されるだけ */
@media (prefers-reduced-motion:no-preference){
  .fv__copy > *,
  .fv .wrap > *{animation:fv-in .62s var(--ease-out) both}
  .fv .wrap > :nth-child(1){animation-delay:.02s}
  .fv .wrap > :nth-child(2){animation-delay:.10s}
  .fv .wrap > :nth-child(3){animation-delay:.18s}
  .fv .wrap > :nth-child(4){animation-delay:.26s}
  .fv .wrap > :nth-child(5){animation-delay:.34s}
  .fv .wrap > :nth-child(6){animation-delay:.42s}
  @keyframes fv-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  /* 写真は、わずかに引きながら定位置へ */
  .fv__media{animation:fv-media 1.1s var(--ease-out) both}
  @keyframes fv-media{from{transform:scale(1.045)}to{transform:none}}
}

/* ══ フォーム：選択はチップ、エラーはその場に（2026-09-30） ══ */
.choice{border:0;padding:0;margin:0;min-width:0}
.choice legend{
  display:flex;align-items:center;gap:10px;padding:0;margin-bottom:10px;
  font-size:var(--fs-sm);font-weight:700;
}
.chips-input{display:flex;flex-wrap:wrap;gap:8px}
.chips-input label{position:relative;display:inline-flex}
.chips-input input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chips-input label>span{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);
  font-size:14px;color:var(--text);line-height:1.4;
  transition:border-color .18s var(--ease-soft),background .18s var(--ease-soft),color .18s var(--ease-soft);
}
.chips-input label:hover span{border-color:var(--line-strong)}
.chips-input input:checked + span{
  background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700;
}
.chips-input input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px}

/* Contact Form 7（WordPress版）が入力欄を包む要素を、静的版と同じ見た目に戻す */
.form .hidden-fields-container{display:none}
.form .wpcf7-form-control-wrap{display:block}
.chips-input .wpcf7-form-control-wrap,.chips-input .wpcf7-radio{display:contents}
.chips-input .wpcf7-list-item{display:inline-flex;margin:0}
.wpcf7-not-valid-tip{display:block;margin-top:6px;font-size:var(--fs-xs);font-weight:700;color:#b3261e}
.field .wpcf7-not-valid{border-color:#b3261e;background:#fffafa}
.form .wpcf7-spinner{display:none}
.form .wpcf7-response-output{
  grid-column:1/-1;margin:0;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r);
  font-size:var(--fs-sm);line-height:1.7;
}
.form .wpcf7-response-output:empty{display:none}
.form.invalid .wpcf7-response-output,.form.failed .wpcf7-response-output,.form.spam .wpcf7-response-output,.form.unaccepted .wpcf7-response-output{
  border-color:#b3261e;background:#fffafa;color:#8c1d18;
}
.form.sent .wpcf7-response-output{border-color:#1a7f4b;background:#f4fbf7;color:#145c37}

.field__help{margin-top:8px;font-size:var(--fs-xs);color:var(--text-3);line-height:1.7}

/* 入力エラー */
.field__error{
  display:none;margin-top:8px;font-size:var(--fs-xs);line-height:1.7;
  color:#b3261e;font-weight:700;
}
.field.is-error .field__error{display:block}
.field.is-error input,.field.is-error textarea{border-color:#b3261e;background:#fffafa}
.field.is-error input:focus,.field.is-error textarea:focus{outline-color:#b3261e}
.form__alert{
  display:none;grid-column:1/-1;gap:10px;align-items:flex-start;
  padding:16px 18px;border-radius:var(--r);
  background:#fff4f4;border:1px solid #f3c9c6;color:#8f1f1a;
  font-size:var(--fs-sm);line-height:1.8;
}
.form__alert.is-on{display:flex}
.form__alert b{font-weight:700}
/* 送信中 */
.btn.is-sending{pointer-events:none;opacity:.7}

/* ══ 比較表：SPでは横スクロールをやめ、行ごとのカードにする ══
   表の横スクロールは、指で追う負荷が高いわりに比較しづらい。
   項目を1枚のカードにして、プランごとの値を縦に並べる */
@media (max-width:767px){
  .tablewrap{overflow:visible}
  .table{min-width:0;width:100%}
  .table,.table tbody,.table tr,.table th,.table td{display:block;width:auto;max-width:100%}
  .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table tr{
    background:var(--white);border:1px solid var(--line);border-radius:var(--r);
    padding:4px 16px 8px;margin-bottom:12px;
  }
  .table tbody th[scope="row"]{
    padding:12px 0 10px;font-size:14.5px;font-weight:700;color:var(--navy);
    border-bottom:1px solid var(--line);background:none;white-space:normal;
  }
  .table td{
    display:flex;align-items:baseline;justify-content:space-between;gap:16px;
    padding:10px 0;border-bottom:1px solid var(--line);text-align:right;
  }
  .table tr td:last-child{border-bottom:0}
  .table td::before{
    content:attr(data-th);flex:none;text-align:left;
    font-size:12.5px;font-weight:700;color:var(--text-3);
  }
  .table td.is-rec{background:none;position:relative}
  .table td.is-rec::before{color:var(--blue-ink)}
  .scroll-hint{display:none}
}

/* ══ 概算シミュレータ ══════════════════════ */
.sim{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)}
@media (min-width:900px){ .sim{grid-template-columns:minmax(0,1fr) 340px} }
.sim__controls{padding:26px 26px 28px;display:grid;gap:26px;align-content:start}
.sim__field{min-width:0}
.sim__label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--navy);margin-bottom:10px}
.sim .chips-input span{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;line-height:1.4}
.sim .chips-input small{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3)}
.sim .chips-input input:checked + span small{color:rgba(255,255,255,.7)}

.stepper{display:flex;align-items:center;gap:8px}
.stepper__btn{
  width:48px;height:48px;flex:none;border:1px solid var(--line-2);background:var(--white);
  border-radius:var(--r);font-size:20px;line-height:1;color:var(--navy);cursor:pointer;
  transition:border-color .18s var(--ease-soft),background .18s var(--ease-soft);
}
.stepper__btn:hover{border-color:var(--navy);background:var(--paper)}
.stepper__btn:disabled{opacity:.35;cursor:not-allowed}
.stepper__num{
  width:96px;height:48px;text-align:center;font-size:20px;font-weight:700;color:var(--navy);
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--white);
}
.stepper__num::-webkit-outer-spin-button,.stepper__num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper__num{-moz-appearance:textfield}
.stepper__unit{font-size:var(--fs-sm);color:var(--text-2)}

.sim__out{background:var(--navy-deep);color:#fff;padding:26px 26px 28px;display:grid;align-content:start;gap:14px}
.sim__cap{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;color:var(--yellow)}
.sim__total{display:flex;align-items:baseline;gap:6px;color:#fff}
.sim__total b{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(34px,5vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1.1;
}
.sim__total span{font-size:15px;color:var(--on-dark-2)}
.sim__rows{margin:4px 0 0;display:grid;gap:0}
.sim__rows > div{
  display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-top:1px solid rgba(255,255,255,.18);font-size:13px;
}
.sim__rows dt{color:var(--on-dark-3)}
.sim__rows dd{margin:0;font-family:var(--font-mono);color:#fff}
.sim__out .note{color:var(--on-dark-3)}
.sim__out .link{color:var(--blue-on-dark)}

/* ══ FAQ の絞り込み ══════════════════════ */
.faqbar{display:grid;gap:16px}
.faqbar__search input{
  width:100%;height:52px;padding:0 18px;font-size:15px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--white);color:var(--text);
}
.faqbar__search input::placeholder{color:var(--text-3)}
.faqbar__search input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.faqbar__cats{gap:8px}
.faqbar__cats span{min-height:40px;padding:8px 14px;font-size:13.5px}
.faqbar__count{margin-top:14px;font-size:var(--fs-xs);color:var(--text-3)}
.faqbar__empty{
  margin-top:20px;padding:20px 22px;background:var(--paper);border-radius:var(--r);
  font-size:var(--fs-sm);color:var(--text-2);
}
.faqbar__empty[hidden]{display:none}
.faq-hit{background:var(--yellow-soft);border-radius:2px;padding:0 2px}

/* ══════════════════════════════════════════════════════
   SP の作り（2026-10-03）
   メニュー・読み進み・目次・相談導線を、片手で完結させる
   ══════════════════════════════════════════════════════ */

/* ── メニュー（全画面） ───────────────── */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--navy-deep);color:#fff;
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--header-h) + 12px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
}
.drawer[hidden]{display:none}
@media (min-width:1000px){ .drawer{display:none!important} }
@media (prefers-reduced-motion:no-preference){
  .drawer{animation:drawer-in .32s var(--ease-out) both}
  @keyframes drawer-in{from{opacity:0}to{opacity:1}}
}
.drawer__inner{display:flex;flex-direction:column;gap:28px;min-height:100%;justify-content:space-between}
.drawer__nav{list-style:none;margin:0;padding:0}
.drawer__nav li{border-bottom:1px solid rgba(255,255,255,.14)}
.drawer__nav li:first-child{border-top:1px solid rgba(255,255,255,.14)}
.drawer__nav a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:20px 2px;text-decoration:none;color:#fff;min-height:64px;
}
.drawer__no{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--yellow);
}
.drawer__ja{font-size:19px;font-weight:700;letter-spacing:-.01em}
.drawer__en{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;color:var(--on-dark-3);
}
.drawer__nav a[aria-current="page"] .drawer__ja{color:var(--yellow)}
.drawer__nav a[aria-current="page"] .drawer__no{color:#fff}
@media (prefers-reduced-motion:no-preference){
  .drawer__nav li{animation:drawer-item .42s var(--ease-out) both}
  .drawer__nav li:nth-child(1){animation-delay:.06s}
  .drawer__nav li:nth-child(2){animation-delay:.11s}
  .drawer__nav li:nth-child(3){animation-delay:.16s}
  .drawer__nav li:nth-child(4){animation-delay:.21s}
  .drawer__nav li:nth-child(5){animation-delay:.26s}
  @keyframes drawer-item{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
.drawer__foot{display:grid;gap:10px}
@media (prefers-reduced-motion:no-preference){
  .drawer__foot{animation:drawer-item .42s var(--ease-out) .3s both}
}
.drawer__foot .btn{width:100%}
.drawer__note{font-size:var(--fs-xs);color:var(--on-dark-3);line-height:1.8;margin-top:4px}
body.is-locked{overflow:hidden}

/* ── 下端のバー ───────────────────────── */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:center;gap:10px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line);
  transition:transform .3s var(--ease-out),opacity .2s var(--ease-soft);
}
@media (min-width:1000px){ .dock{display:none} }
.dock.is-hidden{transform:translateY(120%)}
body:has(.dock){padding-bottom:84px}
@media (min-width:1000px){ body:has(.dock){padding-bottom:0} }

/* 読み進みの線 */
.dock__progress{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.dock__progress i{display:block;height:100%;width:0;background:var(--blue);transition:width .12s linear}

/* 現在地（タップで目次） */
.dock__here{
  flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:6px 10px 6px 2px;background:none;border:0;cursor:pointer;text-align:left;
}
.dock__here[hidden]{display:none}
.dock__here-cap{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;color:var(--text-3)}
.dock__here-name{
  display:block;max-width:100%;font-size:13px;font-weight:700;color:var(--navy);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dock__here-name::after{content:"  ▾";color:var(--text-3);font-weight:400}
.dock__cta{flex:0 0 auto;padding:13px 20px;font-size:14px}
.dock:not(:has(.dock__here:not([hidden]))) .dock__cta{flex:1}

/* ── 目次シート ───────────────────────── */
.sheet{position:fixed;inset:0;z-index:95;background:rgba(10,22,56,.45);display:flex;align-items:flex-end}
.sheet[hidden]{display:none}
@media (min-width:1000px){ .sheet{display:none!important} }
.sheet__panel{
  width:100%;max-height:72vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--white);border-radius:16px 16px 0 0;
  padding:10px var(--gutter) calc(20px + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion:no-preference){
  .sheet{animation:sheet-bg .24s var(--ease-soft) both}
  .sheet__panel{animation:sheet-up .3s var(--ease-out) both}
  @keyframes sheet-bg{from{opacity:0}to{opacity:1}}
  @keyframes sheet-up{from{transform:translateY(16px)}to{transform:none}}
}
.sheet__grab{width:40px;height:4px;border-radius:99px;background:var(--line-2);margin:0 auto 14px}
.sheet__title{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.sheet__list{list-style:none;margin:0;padding:0}
.sheet__list li{border-top:1px solid var(--line)}
.sheet__list a{
  display:flex;align-items:center;gap:12px;padding:15px 2px;min-height:52px;
  text-decoration:none;color:var(--text);font-size:14.5px;
}
.sheet__list a .n{font-family:var(--font-mono);font-size:11px;color:var(--text-3);flex:none}
.sheet__list a[aria-current="true"]{color:var(--blue-ink);font-weight:700}
.sheet__list a[aria-current="true"] .n{color:var(--blue)}
.sheet__close{
  width:100%;margin-top:14px;padding:14px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--white);font:inherit;font-size:14px;font-weight:700;color:var(--navy);cursor:pointer;
}

/* ── SPの入力まわり ───────────────────── */
@media (max-width:767px){
  /* 16px未満だと iOS がフォーカス時にページを拡大する */
  .field input,.field select,.field textarea,.faqbar__search input,.stepper__num{font-size:16px}
  .field textarea{min-height:120px}
}
/* タップの手応え */
*{-webkit-tap-highlight-color:rgba(37,99,235,.12)}
@media (hover:none){
  .btn:active{transform:scale(.985)}
  .sheet__list a:active,.drawer__nav a:active{background:rgba(0,0,0,.04)}
  .drawer__nav a:active{background:rgba(255,255,255,.06)}
}

/* ══ プランの中身を見せる（2026-10-03） ══════ */

/* カード内の構成比バー */
.stack--sm{height:10px;margin:14px 0 12px;border-radius:99px}
.stack--sm .stack__seg{border-radius:0}
.stack--tbd{opacity:.5}
.plan .rows dt{display:flex;align-items:center}

/* 保険条件の対比カード */
.terms{display:grid;gap:20px}
@media (min-width:768px){ .terms{grid-template-columns:repeat(2,minmax(0,1fr))} }
.termcard{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 24px 22px;display:flex;flex-direction:column;gap:14px;
}
.termcard--rec{border-color:var(--blue);border-width:1.5px}
.termcard__tag{
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;color:var(--text-3);
}
.termcard--rec .termcard__tag{color:var(--blue-ink)}
.termcard__name{font-size:var(--fs-h3);color:var(--navy);line-height:1.4}
.termlist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.termlist li{
  display:flex;align-items:center;gap:12px;padding:14px 0;
  border-top:1px solid var(--line);font-size:14.5px;color:var(--text);
}
.termlist li small{margin-left:auto;font-size:12.5px;font-weight:700}
.termlist__mark{
  flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;line-height:1;
}
.termlist .is-on .termlist__mark{background:var(--blue);color:#fff}
.termlist .is-on small{color:var(--text-3)}
.termlist .is-off{color:var(--text-3)}
.termlist .is-off .termlist__mark{background:#fdecea;color:#b3261e}
.termlist .is-off small{color:#b3261e}
.termcard__foot{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--text-2);display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.termcard__foot b{font-family:var(--font-mono);font-size:15px;color:var(--navy)}

/* ── プランの違いを「場面」で見せる ───────── */
.scenes{display:grid;gap:20px}
@media (min-width:900px){ .scenes{grid-template-columns:repeat(3,minmax(0,1fr))} }
.scene{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px 22px;display:flex;flex-direction:column;gap:14px;
}
.scene .ico{width:30px;height:30px;color:var(--navy)}
.scene__title{font-size:var(--fs-h4);color:var(--navy);line-height:1.6}
.scene__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.scene__list li{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start;
  padding:12px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.75;color:var(--text-2);
}
.scene__list b{font-weight:700;color:var(--text-3);font-size:12.5px;padding-top:1px}
.scene__list em{font-style:normal;font-weight:700;color:var(--navy)}
.scene__list .is-rec{color:var(--text)}
.scene__list .is-rec b{color:var(--blue-ink)}
.scene__list .is-rec em{color:var(--blue-ink)}
.scene__list .is-off em{color:#b3261e}
.head--sub{margin-bottom:24px}
@media (max-width:767px){
  .scene__list li{grid-template-columns:64px minmax(0,1fr)}
}

/* 流れカードに、プラン別の条件を添える */
.flowcard__plans{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 18px;margin:-6px 0 0}
.flowcard__plans .chip{margin-left:0}
.section--navy .support__card{background:var(--navy-2);border-color:rgba(255,255,255,.14)}
.section--navy .support__card p,.section--navy .support__card li{color:var(--on-dark-2)}
.section--navy .support__name{color:#fff}
.section--navy .support__en{color:var(--on-dark-3)}
.section--navy .support__card ul li::before{background:var(--yellow)}
/* 濃紺の上では、線画アイコンを白に起こす */
.section--navy .support__icon{filter:brightness(0) invert(1);opacity:.9}

/* ══ 個別手配との比較（項目ごとに2列で並べる） ══ */
.vs{border-top:2px solid var(--navy)}
.vs__head,.vs__row{display:grid;gap:20px;align-items:start}
@media (min-width:900px){
  .vs__head,.vs__row{grid-template-columns:180px minmax(0,1fr) minmax(0,1fr);gap:28px}
}
.vs__head{
  padding:14px 0;border-bottom:1px solid var(--line);
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
}
@media (max-width:899px){ .vs__head{display:none} }
.vs__head-a{color:var(--text-3)}
.vs__head-b{color:var(--blue-ink)}
.vs__row{padding:20px 0;border-bottom:1px solid var(--line)}
.vs__label{font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.6}
.vs__a,.vs__b{font-size:13.5px;line-height:1.85;margin:0;position:relative}
.vs__a{color:var(--text-3);padding-left:22px}
.vs__a::before{
  content:"";position:absolute;left:0;top:.62em;width:12px;height:1.5px;background:var(--line-strong);
}
.vs__b{color:var(--text);padding-left:22px}
.vs__b::before{
  content:"✓";position:absolute;left:0;top:.08em;width:16px;height:16px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:9.5px;font-weight:700;display:grid;place-items:center;
}
.vs__b b{font-weight:700;color:var(--navy)}
@media (max-width:899px){
  .vs__row{gap:10px;padding:18px 0}
  .vs__a::after{content:"個別に手配した場合";display:block;font-size:11px;color:var(--line-strong);margin-top:2px}
  .vs__b{background:var(--tint-blue);border-radius:var(--r);padding:14px 14px 14px 36px}
  .vs__b::before{left:14px;top:1.05em}
}

/* ══ LINE を主導線にする（2026-10-12） ══════ */
.linebox{
  display:grid;gap:32px;align-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 28px;
}
@media (min-width:900px){
  .linebox{grid-template-columns:minmax(0,1fr) auto;gap:56px;padding:44px 48px}
}
.linebox__points{margin-top:20px}
.linebox__qr{text-align:center}
.linebox__qr[hidden]{display:none}
.linebox__qr-img{
  width:176px;height:176px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  display:grid;place-items:center;overflow:hidden;
}
.linebox__qr-img img{width:100%;height:100%;display:block}
.linebox__qr p{margin-top:10px;font-size:var(--fs-xs);color:var(--text-3)}
/* QRはPCだけ。SPではボタンで足りる */
@media (max-width:899px){ .linebox__qr{display:none} }

/* ドロワーの補助リンク */
.drawer__sub{
  display:block;text-align:center;padding:12px 0 4px;font-size:13.5px;color:var(--on-dark-2);
  text-decoration:underline;text-underline-offset:4px;
}
/* LINE導線は「外部へ出る」ことが分かるように、矢印を少し変える */
a[data-line][target="_blank"] .btn__arw{transform:rotate(-45deg)}

/* ══ LINEボタンのアイコン ══════════════════════
   吹き出しの線画。文字色に追従するので、青地では白抜きになる */
.ico--line{--i:url(../img/icon-line.svg)}
a[data-line] .ico--line{width:20px;height:20px;margin-right:2px}
a[data-line].btn--lg .ico--line{width:22px;height:22px}
.site-cta[data-line] .ico--line{width:18px;height:18px;margin-right:0}
.dock__cta .ico--line{width:18px;height:18px;margin-right:0}
a[data-line]{gap:8px}
/* 矢印を回すのは外部リンクのときだけ。アイコンは回さない */
a[data-line][target="_blank"] .btn__arw{transform:rotate(-45deg)}

/* 公式アイコン（素材がある場合のみ出る）。改変せず、角丸もそのまま */
.linebox__title{display:flex;align-items:center;gap:14px}
.linebox__appicon{flex:none;width:56px;height:56px;border-radius:12px}
span.linebox__appicon[hidden]{display:none}
@media (max-width:767px){ .linebox__appicon{width:44px;height:44px;border-radius:10px} }

/* 長めのLINEボタンは、SPで折り返しを許し、中央に寄せる */
@media (max-width:767px){
  .linebox a[data-line]{
    width:100%;white-space:normal;text-align:center;line-height:1.5;
    padding-block:15px;justify-content:center;
  }
  .linebox a[data-line] .btn__arw{display:none}
}