/* カーリース実質月額くらべ — 自動生成。編集は carlease-compare.html と site/_prose.css で行う */
:root{
  color-scheme:light;
  --bg:#EDEFF0;
  --card:#FFFFFF;
  --card-2:#F5F7F7;
  --ink:#14181B;
  --ink-2:#4A5257;
  --ink-3:#767F85;
  --line:#DDE1E3;
  --line-2:#EAEDEE;
  --accent:#00736E;
  --accent-ink:#005B57;
  --accent-bg:#E2F1F0;
  --warn:#9A4E1E;
  --warn-bg:#FBF0E8;
  --s-meter:#00918A;
  --s-flat:#A85A28;
  --s-other:#AFB6B9;
  --grid:#E3E7E8;
  --shadow:0 1px 3px rgba(20,24,27,.05), 0 12px 32px -18px rgba(20,24,27,.28);
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --num:"Manrope","Noto Sans JP",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#101315; --card:#1A1F22; --card-2:#22282B;
    --ink:#EDF0F1; --ink-2:#B4BCC0; --ink-3:#8A9297;
    --line:#2A3033; --line-2:#232A2D;
    --accent:#4FBDB5; --accent-ink:#7FD3CC; --accent-bg:#12302E;
    --warn:#D9915A; --warn-bg:#2A1F16;
    --s-meter:#0E9A90; --s-flat:#BE7439; --s-other:#5C6468;
    --grid:#2A3033;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101315; --card:#1A1F22; --card-2:#22282B;
  --ink:#EDF0F1; --ink-2:#B4BCC0; --ink-3:#8A9297;
  --line:#2A3033; --line-2:#232A2D;
  --accent:#4FBDB5; --accent-ink:#7FD3CC; --accent-bg:#12302E;
  --warn:#D9915A; --warn-bg:#2A1F16;
  --s-meter:#0E9A90; --s-flat:#BE7439; --s-other:#5C6468;
  --grid:#2A3033;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:880px;margin:0 auto;padding:0 22px}
h1,h2,h3{margin:0;line-height:1.4;text-wrap:balance}
p{margin:0}
button{font:inherit}
a{color:var(--accent-ink)}

/* ── ヘッダー ── */
.site-nav{background:var(--card);border-bottom:1px solid var(--line)}
.site-nav .wrap{display:flex;align-items:center;gap:6px 24px;flex-wrap:wrap;padding-top:13px;padding-bottom:13px}
.site-nav a{
  color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:500;
  white-space:nowrap;padding:3px 0;border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--accent-ink);border-bottom-color:var(--line)}
.site-nav a.home{
  font-size:16.5px;font-weight:900;color:var(--ink);margin-right:auto;
  letter-spacing:.01em;border-bottom:0;
}
.site-nav a.home:hover{color:var(--accent-ink)}
/* いま見ているページが分かるように（これまで印が無かった） */
.site-nav a[aria-current="page"]{color:var(--accent-ink);font-weight:700;border-bottom-color:var(--accent)}
.site-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ── ヒーロー ── */
.hero{background:var(--card);border-bottom:1px solid var(--line);padding:56px 0 52px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:center}
.hero h1{font-size:clamp(26px,3.3vw,33px);font-weight:900;letter-spacing:-.015em;margin-bottom:14px;text-wrap:normal}
.hero h1 em{font-style:normal;color:var(--accent-ink)}
.hero .lede{font-size:16.5px;color:var(--ink-2);line-height:1.85}
.hero-cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  background:var(--accent);color:#fff;text-decoration:none;
  padding:14px 26px;border-radius:100px;font-size:16px;font-weight:700;
}
.hero-cta:hover{filter:brightness(1.08)}
.hero-cta:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.hero-cta .ar{font-size:15px;line-height:1}
:root[data-theme="dark"] .hero-cta,
:root:not([data-theme="light"]) .hero-cta{color:#0C1516}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .hero-cta{color:#fff} }

/* 具体例カード。数字は data/lease-data.json から build.js が入れる */
.eg{
  background:var(--card-2);border:1px solid var(--line);border-radius:20px;
  padding:20px 22px;box-shadow:var(--shadow);
}
.eg-h{font-size:14.5px;color:var(--ink-3);font-weight:500;margin-bottom:14px}
.eg-h b{color:var(--ink);font-weight:700}
.eg-row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:13px 0 13px 13px;position:relative}
.eg-row + .eg-row{border-top:1px solid var(--line)}
.eg-row::before{content:"";position:absolute;left:0;top:15px;bottom:15px;width:4px;border-radius:2px}
.eg-row.a::before{background:var(--s-meter)}
.eg-row.b::before{background:var(--s-flat)}
.eg-km{font-size:15.5px;font-weight:700;color:var(--ink)}
.eg-when{font-size:14px;color:var(--ink-3);grid-column:1;line-height:1.5}
.eg-p{font-family:var(--num);font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.eg-p i{font-family:var(--sans);font-style:normal;font-size:14px;font-weight:700;color:var(--ink-2);margin-left:2px}
.eg-co{font-size:14px;color:var(--ink-2);grid-column:2;text-align:right;line-height:1.5}
.eg-f{font-size:14.5px;color:var(--ink-2);line-height:1.7;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.eg-f b{color:var(--ink);font-weight:700}

/* ── なぜ変わるのか ── */
.why{background:var(--card-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0 48px}
.why h2{font-size:23px;font-weight:900;letter-spacing:-.01em;margin-bottom:14px}
.why-lead{font-size:16.5px;line-height:1.9;color:var(--ink-2);max-width:62ch}
.why-lead b{color:var(--ink);font-weight:700}

/* 想定と実際のズレ。同じ目盛(1,500km=全幅)で並べているので、長さがそのまま差 */
.gap{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 28px;margin:26px 0;
}
.gap-row{display:grid;grid-template-columns:170px minmax(0,1fr) 132px;gap:16px;align-items:center}
.gap-row + .gap-row{margin-top:16px}
.gap-k{font-size:15px;font-weight:700;color:var(--ink-2)}
.gap-bar{height:16px;border-radius:8px;background:var(--line-2);overflow:hidden}
.gap-fill{display:block;height:100%;border-radius:8px}
.gap-fill.is-plan{background:var(--s-other)}
.gap-fill.is-real{background:var(--accent)}
.gap-v{
  font-family:var(--num);font-size:17px;font-weight:800;
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ink);
}
.gap-row.real .gap-k,.gap-row.real .gap-v{color:var(--accent-ink)}
.gap-note{font-size:14px;color:var(--ink-3);margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2)}

.why-punch{font-size:16.5px;line-height:1.9;color:var(--ink-2);max-width:62ch}
.why-punch b{color:var(--ink);font-weight:700}
.why-say{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}

/* ── 運営者「キロ」の吹き出し ──
   図柄はCSSに1つだけ持つ（マークアップ側に何度も書かない）。
   ⚠ 金額や順位の主張には添えないこと。数字は地の文で示すほうが信用される。 */
.kiro{
  width:44px;height:44px;flex:none;border-radius:13px;
  background:center/100% no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='13' fill='%2300736E'/%3E%3Ccircle cx='16.5' cy='19' r='3.5' fill='%23fff'/%3E%3Ccircle cx='31.5' cy='19' r='3.5' fill='%23fff'/%3E%3Cpath d='M14 28Q24 36.5 34 28' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.say.warn .kiro{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='13' fill='%239A4E1E'/%3E%3Ccircle cx='16.5' cy='19' r='3.5' fill='%23fff'/%3E%3Ccircle cx='31.5' cy='19' r='3.5' fill='%23fff'/%3E%3Cpath d='M18 30.5h12' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.say{display:flex;gap:13px;align-items:flex-start}
.say-body{min-width:0}
.say-b{
  /* 地の色と同じにすると吹き出しに見えないので、白＋枠線で必ず浮かせる */
  background:var(--card);border:1px solid var(--line);
  border-radius:4px 16px 16px 16px;
  padding:14px 18px;font-size:15px;line-height:1.85;color:var(--ink-2);max-width:56ch;
}
.say-b b,.say-b strong{color:var(--ink);font-weight:700}
.say-n{font-size:13.5px;color:var(--ink-3);margin-top:8px}
.say.warn .say-b{background:var(--warn-bg);border-color:var(--warn-bg);color:var(--warn)}
.say.warn .say-b b,.say.warn .say-b strong{color:var(--warn)}
.say.on-card .say-b{background:var(--card-2)}
@media (max-width:520px){
  .kiro{width:38px;height:38px;border-radius:11px}
  .say{gap:10px}
  .say-b{padding:12px 14px;font-size:14.5px}
}

/* 読みもの一覧 */
.read-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.read-list li{border-bottom:1px solid var(--line)}
.read-list li:last-child{border-bottom:0}
.read-list a{
  display:block;padding:15px 4px;font-size:16.5px;font-weight:700;
  color:var(--ink);text-decoration:none;line-height:1.7;
}
.read-list a::after{content:" →";color:var(--accent-ink);font-weight:700}
.read-list a:hover{color:var(--accent-ink)}
.read-list a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ── 帯（背景を変えて区切る） ── */
.band{padding:46px 0}
.band-a{background:var(--bg)}
.band-b{background:var(--card-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-c{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* 節の見出し（番号つきで現在地が分かるように） */
.step{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.step-n{
  font-family:var(--num);font-size:16px;font-weight:800;
  width:30px;height:30px;flex:none;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
:root[data-theme="dark"] .step-n,
:root:not([data-theme="light"]) .step-n{color:#0C1516}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .step-n{color:#fff} }
.step-t{font-size:21px;font-weight:900;letter-spacing:-.01em}

/* ── 質問（フィルタ） ── */
.ask{padding:0}
.ask + .ask{margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.ask-q{font-size:17px;font-weight:700;margin-bottom:12px;color:var(--ink-2)}
.ask-note{font-size:14.5px;color:var(--ink-3);margin-top:12px;line-height:1.75}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{
  flex:1 1 150px;min-width:0;
  background:var(--card);border:2px solid var(--line);border-radius:16px;
  padding:14px 16px;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:2px;
  transition:border-color .12s,background .12s;
}
.opt:hover{border-color:var(--accent)}
.opt:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.opt .t{font-size:16px;font-weight:700;color:var(--ink)}
.opt .s{font-size:14.5px;color:var(--ink-3);line-height:1.5}
.opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 4px 14px -8px var(--accent)}
.opt[aria-pressed="true"] .t{color:var(--accent-ink)}
.opt[aria-pressed="true"] .s{color:var(--accent-ink);opacity:.85}

.pills{display:flex;flex-direction:column;gap:16px}
.pills-row{display:flex;gap:8px;flex-wrap:wrap}
.pill-label{display:block;font-size:13.5px;font-weight:700;color:var(--ink-3);letter-spacing:.04em;margin-bottom:8px}
.pill{
  background:var(--card);border:2px solid var(--line);border-radius:100px;
  padding:8px 16px;font-size:15px;font-weight:500;color:var(--ink-2);cursor:pointer;
  transition:border-color .12s,background .12s,color .12s;
}
.pill:hover{border-color:var(--accent);color:var(--ink)}
.pill:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pill[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
:root[data-theme="dark"] .pill[aria-pressed="true"],
:root:not([data-theme="light"]) .pill[aria-pressed="true"]{color:#0C1516}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .pill[aria-pressed="true"]{color:#fff}
}

/* 選択のすぐ下に出る、その場で変わる答え */
.quick{
  display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;
  margin-top:18px;padding:14px 18px;text-decoration:none;
  background:var(--accent-bg);border:1px solid var(--accent);border-radius:14px;
}
.quick:hover{filter:brightness(.98)}
.quick:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.q-cond{font-size:14px;color:var(--accent-ink);flex:1 1 100%;font-weight:500}
.q-co{font-size:16.5px;font-weight:700;color:var(--ink)}
.q-p{font-family:var(--num);font-size:26px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:auto}
.q-p i{font-family:var(--sans);font-style:normal;font-size:13.5px;font-weight:700;color:var(--ink-2);margin-left:3px}
.q-go{flex:1 1 100%;font-size:13.5px;color:var(--accent-ink);font-weight:700}

/* ── 答え ── */
.answer{margin:0}
.ans-card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);overflow:hidden;
}
.ans-lead{
  font-size:15px;font-weight:700;color:var(--accent-ink);background:var(--accent-bg);
  padding:11px 24px;border-bottom:1px solid var(--line-2);
}
.ans-body{padding:28px}
.ans-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 28px;align-items:start}
.ans-total{
  text-align:right;border-left:1px solid var(--line);padding-left:26px;align-self:center;
}
.tot-l{font-size:14px;color:var(--ink-3);font-weight:500}
.tot-v{
  font-family:var(--num);font-size:30px;font-weight:800;line-height:1.2;
  font-variant-numeric:tabular-nums;color:var(--ink);margin-top:2px;white-space:nowrap;
}
.tot-u{font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink-2);margin-left:3px}
.tot-n{font-size:13.5px;color:var(--ink-3);margin-top:3px;line-height:1.6}
@media (max-width:620px){
  .ans-top{grid-template-columns:1fr;gap:18px}
  .ans-total{text-align:left;border-left:0;padding-left:0;padding-top:18px;border-top:1px solid var(--line)}
}
.ans-co{font-size:22px;font-weight:900;line-height:1.3}
.ans-plan{font-size:14px;color:var(--ink-3);margin-top:2px}
.ans-price{
  font-family:var(--num);font-size:clamp(42px,9vw,58px);font-weight:800;
  line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  margin:14px 0 2px;color:var(--ink);
}
.ans-price .u{font-family:var(--sans);font-size:19px;font-weight:700;margin-left:4px;color:var(--ink-2)}
.ans-sub{font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* 契約する前に知っておくこと */
.facts{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.facts-h{font-size:15px;font-weight:700;color:var(--ink-2);margin-bottom:14px}
.facts-warn{margin-bottom:18px}
.fact-list{display:flex;flex-direction:column;gap:14px;margin:0}
.fact{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.fact dt{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap;
}
.fact dd{margin:0;font-size:15.5px;line-height:1.75;color:var(--ink-2);grid-column:2}
.fi{
  width:22px;height:22px;flex:none;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;font-style:normal;
}
.fi.ok{background:var(--accent-bg);color:var(--accent-ink)}
.fi.note{background:var(--warn-bg);color:var(--warn)}
@media (max-width:520px){
  .fact{grid-template-columns:1fr}
  .fact dd{grid-column:1;padding-left:30px}
}

.ans-alt{
  border-top:1px solid var(--line-2);background:var(--card-2);
  padding:18px 24px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
}
.alt-l{flex:1 1 200px;min-width:0}
.alt-lead{font-size:14.5px;font-weight:700;color:var(--ink-3);margin-bottom:3px}
.alt-co{font-size:16px;font-weight:700}
.alt-plan{font-size:14.5px;color:var(--ink-3)}
.alt-r{text-align:right;white-space:nowrap}
.alt-price{font-family:var(--num);font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.alt-diff{font-size:14.5px;color:var(--warn);font-weight:700;font-variant-numeric:tabular-nums}

.empty{
  background:var(--card);border:1px dashed var(--line);border-radius:20px;
  padding:44px 24px;text-align:center;color:var(--ink-2);font-size:16px;
}

.ans-go{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.ans-go a{
  display:inline-block;background:var(--accent);color:#fff;
  padding:14px 26px;border-radius:100px;font-size:16px;font-weight:700;text-decoration:none;
}
.ans-go a:hover{filter:brightness(1.08)}
.ans-go a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
:root[data-theme=dark] .ans-go a,
:root:not([data-theme=light]) .ans-go a{color:#0C1516}
@media (prefers-color-scheme:light){ :root:not([data-theme=dark]) .ans-go a{color:#fff} }

/* ── 折りたたみ ── */
details{margin-top:14px}
details > summary{
  list-style:none;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:15px 20px;font-size:16px;font-weight:700;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
details > summary::-webkit-details-marker{display:none}
details > summary:hover{border-color:var(--accent);color:var(--accent-ink)}
details > summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
details > summary .cnt{font-size:14px;font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums}
details > summary .mark{
  width:20px;height:20px;flex:none;position:relative;
}
details > summary .mark::before,
details > summary .mark::after{
  content:"";position:absolute;background:currentColor;border-radius:1px;
}
details > summary .mark::before{left:2px;right:2px;top:9px;height:2px}
details > summary .mark::after{top:2px;bottom:2px;left:9px;width:2px;transition:opacity .15s}
details[open] > summary .mark::after{opacity:0}
details[open] > summary{border-radius:16px 16px 0 0;border-bottom-color:transparent}
.det-body{
  background:var(--card);border:1px solid var(--line);border-top:0;
  border-radius:0 0 16px 16px;padding:20px;
}

/* ── 一覧 ── */
.rows{display:flex;flex-direction:column;gap:0;list-style:none;padding:0;margin:0}
.row{
  display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:center;
  padding:16px 4px;border-bottom:1px solid var(--line-2);
}
.row:last-child{border-bottom:0}
.r-co{font-size:16px;font-weight:700;line-height:1.4}
.r-plan{font-size:14.5px;color:var(--ink-3);line-height:1.5}
.r-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;grid-column:1/-1}
.r-tag{font-size:14px;padding:3px 9px;border-radius:6px;background:var(--card-2);color:var(--ink-3)}
.r-tag.ok{background:var(--accent-bg);color:var(--accent-ink);font-weight:500}
.r-tag.warn{background:var(--warn-bg);color:var(--warn);font-weight:500}
.r-price{text-align:right;white-space:nowrap}
.r-num{font-family:var(--num);font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.r-unit{font-size:14.5px;color:var(--ink-3);font-weight:500}
.r-calc{font-size:14px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ── チャート ── */
.chart-lead{font-size:15px;color:var(--ink-2);margin-bottom:14px;line-height:1.75}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:14.5px;color:var(--ink-2);margin-bottom:12px}
.legend span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.sw{width:16px;height:3px;border-radius:2px;flex:none}
.chart-scroll{overflow-x:auto}
.chart-scroll svg{display:block;min-width:540px;width:100%;height:auto}
.ax{font-size:14px;fill:var(--ink-3);font-variant-numeric:tabular-nums}
.ax-t{font-size:14px;fill:var(--ink-3)}
.gl{stroke:var(--grid);stroke-width:1}
.lbl{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.xo-l{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 4;opacity:.6}
.xo-t{font-size:14px;fill:var(--ink);font-weight:700}
.chart-note{font-size:14.5px;color:var(--ink-3);line-height:1.75;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}

/* ── 手法 ── */
.method{margin:0}

.method > p{font-size:15px;color:var(--ink-2);margin-bottom:18px;max-width:60ch}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:0}
.note{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:0}
.note dt{font-size:14px;font-weight:700;color:var(--accent-ink);margin-bottom:5px}
.note dd{margin:0;font-size:14px;line-height:1.75;color:var(--ink-2)}

footer{padding:30px 0 60px;background:var(--bg);font-size:14.5px;color:var(--ink-3);line-height:1.85}
footer p{margin-bottom:8px;max-width:70ch}

@media (max-width:880px){
  .hero .wrap{grid-template-columns:1fr;gap:32px}
  .hero{padding:44px 0 40px}
  .gap-row{grid-template-columns:1fr auto;gap:6px 14px}
  .gap-bar{grid-column:1/-1;order:3}
}
@media (max-width:520px){
  /* 狭い画面ではサイト名を1行目に、リンク3本を2行目に収める。
     スマホで縦を取りすぎると、肝心の見出しが画面外に押し出される。 */
  .site-nav .wrap{gap:2px 15px;padding-top:11px;padding-bottom:11px}
  .site-nav a.home{flex:1 0 100%;margin-right:0;margin-bottom:5px;font-size:16px}
  .site-nav a{font-size:13.5px}
}
@media (max-width:560px){
  .why{padding:40px 0 36px}

  /* 車種は横スクロールの1行にする。縦に積むと答えが遠くなる */
  #f-car .pills-row{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  #f-car .pill{flex:none;scroll-snap-align:start}
  /* 右にまだ続くことを示す影 */
  #f-car .pill-group{position:relative}
  #f-car .pill-group::after{
    content:;position:absolute;right:0;bottom:6px;width:26px;height:38px;
    background:linear-gradient(90deg,transparent,var(--card));pointer-events:none;
  }
  .gap{padding:20px 18px}
  .eg{padding:18px 18px}
  .hero-cta{width:100%;justify-content:center}
  .row{grid-template-columns:1fr;gap:4px}
  .r-price{text-align:left;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .r-calc{flex:1 1 100%}
  .r-tags{margin-top:8px}

  body{font-size:16px}
  .opt{flex:1 1 calc(50% - 5px);padding:12px 13px}
  .opt .t{font-size:15.5px}
  .opt .s{font-size:13.5px}
  .ans-body{padding:20px}
  .ans-lead{padding:10px 20px}
  .ans-alt{padding:16px 20px}
  .alt-r{text-align:left}
}

/* 記事系ページ（このサイトについて / プライバシーポリシー）用の追加スタイル */

/* ⚠ .site-nav のスタイルはここに書かないこと。
   このファイルは carlease-compare.html の <style> より後ろに連結されるため、
   ここに同じセレクタを置くとツール側の指定を黙って上書きしてしまう。
   ナビの見た目は carlease-compare.html の「ヘッダー」節で一元管理している。 */

.prose{
  max-width:68ch;
  /* ⚠ padding の一括指定を使わないこと。
     記事ページは <main class="wrap prose"> と同じ要素に両方を付けているので、
     ここで padding を一括指定すると .wrap の左右余白(0 22px)まで打ち消してしまい、
     スマホで本文が画面の端に貼りつく。上下だけを longhand で足す。 */
  padding-top:44px;
}
.prose h1{
  font-size:clamp(26px,4.6vw,36px);
  line-height:1.35;font-weight:900;letter-spacing:-.01em;margin:0 0 8px;
  text-wrap:balance;
}
.prose .sub{color:var(--ink-2);font-size:16px;margin:0 0 40px}
.prose h2{
  font-size:22px;font-weight:900;
  margin:44px 0 14px;padding-top:26px;
  border-top:2px solid var(--accent);
  text-wrap:balance;
}
.prose h2:first-of-type{border-top:0;padding-top:0;margin-top:32px}
.prose h3{font-size:16.5px;font-weight:700;margin:28px 0 8px;color:var(--ink)}
.prose p{margin:0 0 18px;color:var(--ink);font-size:17px;line-height:1.95}
.prose p.note{color:var(--ink-2);font-size:15px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.4em;color:var(--ink);font-size:17px;line-height:1.95}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--accent)}
.prose strong{font-weight:700}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.prose a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

.prose dl.meta{
  display:grid;grid-template-columns:auto 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin:0 0 16px;
}
.prose dl.meta dt,.prose dl.meta dd{
  background:var(--card);margin:0;padding:12px 16px;font-size:15px;
}
.prose dl.meta dt{color:var(--ink-2);white-space:nowrap;font-weight:500}
.prose dl.meta dd{color:var(--ink)}

.callout{
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  background:var(--accent-bg);
  border-radius:12px;
  padding:16px 20px;
  margin:0 0 24px;
}
.callout p{margin:0;font-size:16px;line-height:1.85}
.callout p + p{margin-top:10px}

.callout.caution{
  border-left-color:var(--warn);
  background:var(--warn-bg);
}

/* 記事ページの中でキロが話すときの余白 */
.prose .say{margin:0 0 24px}
.prose .say-b{font-size:16px;line-height:1.9}

.prose table{
  width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15.5px;
}
.prose table th,.prose table td{
  border:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top;
}
.prose table th{background:var(--card-2);font-weight:700;color:var(--ink)}
/* 見出しは本文より少し小さく。4列だと「走った分だけ払う」が折り返してしまう */
.prose table thead th{font-size:14.5px;line-height:1.5;padding:12px 11px}
.prose table td{color:var(--ink-2)}
/* 金額は途中で折り返さない */
.prose table td strong,
.prose table td{font-variant-numeric:tabular-nums}
.prose table td strong{white-space:nowrap;color:var(--ink)}
/* ── スマホで表を読みやすくする ────────────────────────────────
   スマホの横幅では、4列の表は列がつぶれて車種名まで折り返す。
   <table class="stackable"> と各 td の data-label があれば、
   狭い画面では1行=1カードに積み替える。横スクロールが要らなくなる。 */
@media (max-width:560px){
  table.stackable, table.stackable tbody, table.stackable tr, table.stackable td, table.stackable th{
    display:block;width:auto;
  }
  table.stackable thead{ display:none }          /* 見出しは data-label が代わりに出す */
  table.stackable{ border-collapse:separate;border-spacing:0 }
  table.stackable tr{
    border:1px solid var(--line);border-radius:14px;
    background:var(--card);margin-bottom:12px;overflow:hidden;
  }
  table.stackable tbody th{
    background:var(--card-2);border:0;border-bottom:1px solid var(--line);
    font-size:16px;padding:12px 16px;
  }
  /* ⚠ flex にしないこと。td の中の <br> が別の要素として扱われ、
     金額と会社名がそれぞれ潰れて折り返す。float なら中身は普通に流れる。 */
  table.stackable td{
    border:0;border-bottom:1px solid var(--line-2);
    display:block;padding:11px 16px;text-align:right;
  }
  table.stackable tr td:last-child{ border-bottom:0 }
  /* 短い値は右に寄せて読みやすく。長い引用文は右寄せだと不自然なので左に戻す */
  table.stackable td.long{ text-align:left }
  /* 車種ページの ctab も積み替える。角丸や罫線の指定を打ち消す */
  table.ctab.stackable thead th:first-child,
  table.ctab.stackable thead th:last-child{ border-radius:0 }
  table.ctab.stackable tbody th,
  table.ctab.stackable tbody td{ white-space:normal }
  table.ctab.stackable tbody tr:last-child th{ border-bottom:1px solid var(--line) }
  table.ctab.stackable .num strong{ font-size:18px }
  table.stackable td.long::before{ display:block;float:none;margin-bottom:5px }
  table.stackable td::before{
    content:attr(data-label);
    float:left;text-align:left;font-size:14px;font-weight:500;color:var(--ink-3);
    max-width:9em;
    /* ラベルと値がくっつかないように必ず間を空ける */
    margin-right:12px;
  }
}

/* 入れ替わる距離の一覧。表ではなく「名前と数字の組」を並べる */
/* ⚠ 地の色（--bg）の上に --line-2 の罫線を置くと、色が近すぎて線が見えない。
   ほかの部品（.range / .faq-i）と同じく、1つずつ白いカードにして輪郭を出す。 */
.xo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;margin:0 0 16px;
}
.xo-i{
  display:flex;align-items:baseline;gap:10px;
  padding:11px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
}
.xo-i span{font-size:15px;color:var(--ink);font-weight:700;white-space:nowrap}
.xo-i b{
  margin-left:auto;font-family:var(--num);font-size:16px;font-weight:800;
  color:var(--accent-ink);font-variant-numeric:tabular-nums;
}
.xo-i b::after{content:"km";font-family:var(--sans);font-size:12px;font-weight:700;margin-left:2px;color:var(--ink-3)}

/* 2つの範囲を同じ目盛に並べる（重なっていないことを一目で示す） */
.range{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;margin:0 0 20px;
}
.range-row{display:grid;grid-template-columns:110px minmax(0,1fr) 104px;gap:14px;align-items:center}
.range-row + .range-row{margin-top:12px}
.range-k{font-size:14.5px;font-weight:700;color:var(--ink-2)}
.range-track{position:relative;height:16px;border-radius:8px;background:var(--line-2)}
.range-bar{position:absolute;top:0;bottom:0;border-radius:8px}
.range-bar.is-kei{background:var(--s-meter)}
.range-bar.is-cmp{background:var(--s-flat)}
.range-v{
  font-family:var(--num);font-size:14.5px;font-weight:800;text-align:right;
  white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums;
}
.range-axis{
  display:flex;justify-content:space-between;margin:8px 0 0 124px;
  font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
@media (max-width:560px){
  .range{padding:16px 16px}
  .range-row{grid-template-columns:1fr auto;gap:4px 10px}
  .range-track{grid-column:1/-1;order:3}
  .range-axis{margin-left:0}
}

.table-scroll{
  overflow-x:auto;margin:0 0 20px;
  /* ⚠ 地の上に裸で置かない。--line の罫線でも地とのコントラストは1.14しかなく薄く見える */
  background:var(--card);border:1px solid var(--line);border-radius:16px;
}
.table-scroll table{margin:0;border:0}
.table-scroll table th,.table-scroll table td{border-left:0;border-right:0}
.table-scroll table tr:first-child th{border-top:0}
.table-scroll table tbody tr:last-child th,
.table-scroll table tbody tr:last-child td{border-bottom:0}

.prose .updated{
  font-size:14.5px;color:var(--ink-3);
  margin:36px 0 0;padding-top:16px;
  /* ⚠ 記事ページの地は --bg。--line-2 は地とほぼ同色で線が見えないので --line を使う */
  border-top:1px solid var(--line);
}

/* 車種ページのよくある質問 */
.faq{margin:0;display:flex;flex-direction:column;gap:12px}
.faq-i{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.faq-i dt{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.7;margin-bottom:8px}
.faq-i dd{margin:0;font-size:15.5px;line-height:1.9;color:var(--ink-2)}
@media (max-width:560px){ .faq-i{padding:16px 17px} .faq-i dt{font-size:16px} }

/* ── 車種ページ ── */
.crumb{font-size:14.5px;color:var(--ink-3);margin-bottom:16px}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--accent-ink);text-decoration:underline}
.car-h1{
  font-size:clamp(25px,5vw,34px);font-weight:900;line-height:1.4;
  letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance;
}
.car-h1 em{font-style:normal;color:var(--accent-ink)}
.car-lede{font-size:16.5px;line-height:1.85;color:var(--ink-2);max-width:60ch;margin:0}
.car-lede strong{color:var(--ink);font-weight:700}
.sm-note{font-size:14.5px;color:var(--ink-3);line-height:1.8;margin:14px 0 0}
.sm{font-size:14px;color:var(--ink-3);font-weight:400}

table.ctab{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px}
table.ctab th,table.ctab td{
  padding:14px 16px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line);
}
table.ctab thead th{
  background:var(--card-2);color:var(--ink-2);font-size:14.5px;font-weight:700;
  border-bottom:2px solid var(--line);white-space:nowrap;
}
table.ctab thead th:first-child{border-radius:12px 0 0 0}
table.ctab thead th:last-child{border-radius:0 12px 0 0}
table.ctab tbody th{font-weight:700;color:var(--ink);white-space:nowrap}
table.ctab tbody td{color:var(--ink-2)}
table.ctab tbody tr:last-child th,table.ctab tbody tr:last-child td{border-bottom:0}
table.ctab .num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
table.ctab .num strong{font-family:var(--num);font-size:19px;font-weight:800}

.btn{
  display:inline-block;background:var(--accent);color:#fff;
  padding:14px 26px;border-radius:100px;font-size:16px;font-weight:700;
  text-decoration:none;margin-top:20px;
}
.btn:hover{filter:brightness(1.08)}
:root[data-theme="dark"] .btn,
:root:not([data-theme="light"]) .btn{color:#0C1516}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .btn{color:#fff} }