:root{
  --ink:#1a1c1e; --sub:#5b6167; --line:#e2e5e9; --bg:#fff; --soft:#f6f8fa;
  --key:#0b5cab; --keybg:#eaf2fb; --warn:#8a4b00; --warnbg:#fdf3e6; --go:#c2410c;
  --mono:"SFMono-Regular",Consolas,"Roboto Mono",monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.75;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:16px;-webkit-text-size-adjust:100%}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
a{color:var(--key)}
header.site{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:12px;padding-bottom:12px}
.logo{font-weight:700;font-size:18px;color:var(--ink);text-decoration:none;letter-spacing:.02em}
header nav{display:flex;gap:16px;font-size:14px;flex-wrap:wrap}
header nav a{text-decoration:none}
header nav a:hover{text-decoration:underline}
main{padding:24px 16px 56px}
h1{font-size:26px;line-height:1.45;margin:8px 0 4px;letter-spacing:.01em}
h2{font-size:20px;margin:40px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--line)}
h3{font-size:17px;margin:28px 0 8px}
.lead{color:var(--sub);font-size:15px;margin:0 0 24px}

.answer{background:var(--keybg);border:1px solid #cfe0f3;border-radius:12px;padding:20px;margin:24px 0}
.answer .label{font-size:13px;color:var(--sub);margin:0 0 4px}
.answer .amount{font-size:34px;font-weight:700;color:var(--key);font-family:var(--mono);letter-spacing:-.02em;line-height:1.2}
.answer .amount small{font-size:15px;font-weight:400;color:var(--sub);margin-left:6px;font-family:inherit}
.answer .note{font-size:13px;color:var(--sub);margin:10px 0 0}
.answer ul{margin:12px 0 0;padding-left:0;list-style:none;font-size:14px}
.answer ul li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dotted #cfe0f3}
.answer ul li:last-child{border-bottom:none}
.answer ul .v{font-family:var(--mono);white-space:nowrap}

table{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--soft);font-weight:600;white-space:nowrap}
td.num,th.num{text-align:right;font-family:var(--mono);white-space:nowrap}
tr.hit td{background:var(--warnbg)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.warn{background:var(--warnbg);border-left:4px solid #e0a458;border-radius:0;padding:14px 16px;margin:20px 0;font-size:14.5px}
.warn b{color:var(--warn)}
.muted{color:var(--sub);font-size:13.5px}

.cta{display:block;background:var(--go);color:#fff;text-decoration:none;text-align:center;
  padding:15px 20px;border-radius:10px;font-weight:700;font-size:16px;margin:14px 0}
.cta:hover{filter:brightness(1.06)}
.cta small{display:block;font-weight:400;font-size:12.5px;opacity:.92;margin-top:3px}
.cta.sub{background:#fff;color:var(--go);border:2px solid var(--go)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:16px 0}
.grid a{display:block;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  text-decoration:none;color:var(--ink);font-size:15px;background:var(--bg)}
.grid a:hover{border-color:var(--key);background:var(--soft)}
.grid a span{display:block;font-size:12px;color:var(--sub);margin-top:2px}

.calc{border:1px solid var(--line);border-radius:12px;padding:20px;margin:24px 0;background:var(--soft)}
.calc .row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.calc label{font-size:13px;color:var(--sub);display:block;margin-bottom:4px}
.calc select,.calc input{font-size:16px;padding:9px 10px;border:1px solid #c6ccd3;border-radius:8px;background:#fff;min-width:120px;font-family:inherit}
.calc button{font-size:16px;font-weight:700;padding:12px 26px;border:none;border-radius:8px;background:var(--key);color:#fff;cursor:pointer;font-family:inherit}
.calc button:hover{filter:brightness(1.08)}
#result{margin-top:18px}
#result:empty{display:none}

footer.site{border-top:1px solid var(--line);background:var(--soft);padding:28px 0 40px;margin-top:56px;font-size:13px;color:var(--sub)}
footer.site a{color:var(--sub)}
.sources{line-height:1.9}
.disclaimer{border-left:3px solid var(--line);padding-left:12px;margin:18px 0}
.fnav{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0 8px}
.copy{margin:8px 0 0}
.crumb{font-size:13px;color:var(--sub);margin:0 0 4px}
.crumb a{color:var(--sub)}

@media(max-width:600px){
  h1{font-size:22px}
  .answer .amount{font-size:28px}
  main{padding:18px 14px 40px}
}

/* A8の掲載条件「広告とわかる表示」。本文より前に出す */
.adnote{color:var(--sub);font-size:12.5px;border:1px solid var(--line);border-radius:6px;padding:6px 10px;margin:0 0 14px}
.a8px{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* Lv1会員「この車を記憶」（計算結果の下に出す） */
.remember{border:1px dashed #c6ccd3;border-radius:10px;padding:12px 14px;margin:14px 0;font-size:13px;color:var(--sub);line-height:1.7}
.remember button{font-size:14px;font-weight:700;padding:8px 16px;border:1px solid var(--key);border-radius:8px;background:#fff;color:var(--key);cursor:pointer;font-family:inherit;margin:0 10px 4px 0;vertical-align:middle}
.remember button:hover{background:var(--keybg)}
.remember p{margin:0}