:root{--bg:#f5f6fa;--card:#fff;--ink:#151821;--sub:#596075;--line:#e2e5ee;--brand:#2b55e6;--on:#fff;--ok:#0b8a66;--warn:#a45a00;--warn-bg:#fff6e5;--r:16px;--sh:0 1px 2px rgba(21,24,33,.05),0 10px 30px rgba(21,24,33,.07);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#0e1016;--card:#171a23;--ink:#eceef6;--sub:#a4abbe;--line:#2b303e;--brand:#86a3ff;--on:#0b0d14;--ok:#45d6aa;--warn:#f5b942;--warn-bg:#29210f;--sh:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35)}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.8}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:9;background:var(--card);padding:8px 14px;border-radius:8px}
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:56px;gap:12px}
.logo{font-weight:800;letter-spacing:.02em}
.ai{font-size:12px;color:var(--sub);border:1px solid var(--line);border-radius:99px;padding:2px 10px;white-space:nowrap}
h1{font-size:clamp(28px,5.4vw,46px);line-height:1.3;margin:.2em 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(21px,3.4vw,28px);line-height:1.4;margin:0 0 .7em}
h3{font-size:18px;line-height:1.5;margin:1.2em 0 .5em}
.card>h3:first-child,.card>div>h3:first-child{margin-top:0}
p{margin:0 0 1em}
section{padding:36px 0}
.hero{padding-top:56px}
.eyebrow{color:var(--brand);font-weight:700;font-size:14px;margin:0}
.lead{color:var(--sub);font-size:17px;max-width:46em}
.row{display:flex;flex-wrap:wrap;gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:clamp(18px,3vw,28px);margin-bottom:16px}
.card.flat{box-shadow:none;background:var(--bg);margin:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.yr{font-size:13px;font-weight:700;color:var(--brand);margin:0 0 4px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:12px;border:1px solid transparent;background:var(--brand);color:var(--on);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.wide{width:100%}
.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
#q:focus{outline:none}
.steps{display:flex;gap:6px;margin:8px 0 18px}
.steps span{flex:1;height:6px;border-radius:9px;background:var(--line);transition:background .3s}
.steps span.on{background:var(--brand)}
.choices{display:grid;gap:10px}
.choice{display:block;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-height:52px;cursor:pointer;transition:border-color .15s,transform .15s}
.choice:hover{border-color:var(--brand);transform:translateX(2px)}
small{display:block;color:var(--sub);font-size:13px;line-height:1.6;font-weight:400}
.tl{list-style:none;margin:0 0 12px;padding:0 0 0 4px;border-left:2px solid var(--line)}
.tl li{position:relative;padding:0 0 18px 22px}
.tl li::before{content:"";position:absolute;left:-8px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--card);border:2px solid var(--sub)}
.tl li.key::before{background:var(--brand);border-color:var(--brand)}
.tl time{display:block;font-weight:800}
.tag{display:inline-block;font-size:12px;padding:0 8px;border-radius:99px;background:var(--brand);color:var(--on);margin-left:6px}
.note{background:var(--warn-bg);border-left:4px solid var(--warn);padding:12px 16px;border-radius:8px;font-size:15px}
.muted{color:var(--sub);font-size:14px}
.bars>div{display:grid;grid-template-columns:5.5em 1fr 4.5em;align-items:center;gap:10px;margin-bottom:8px}
.bar{height:14px;border-radius:9px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand);border-radius:9px}
.bars b{text-align:right;font-variant-numeric:tabular-nums}
ul.check{padding:0;list-style:none}
ul.check li{padding-left:1.6em;position:relative;margin-bottom:6px}
ul.check li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.price{font-size:clamp(24px,4vw,36px);font-weight:800;line-height:1.2;margin:0 0 8px;font-variant-numeric:tabular-nums}
.price small{display:inline;font-size:14px}
.best{color:var(--ok);font-weight:800}
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
caption{text-align:left;font-weight:700;padding-bottom:8px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
input,select{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:10px;min-height:44px;padding:8px 12px;width:100%;min-width:9em}
input[type=checkbox]{width:20px;height:20px;min-height:0;min-width:0;accent-color:var(--brand)}
label.f{display:grid;gap:6px;font-weight:700;font-size:15px}
label.ck{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.path{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{border:1px solid var(--line);border-radius:99px;padding:2px 12px;font-size:14px}
.chip b{margin-right:6px}
.cta{border-top:1px solid var(--line);padding-top:16px;margin-top:8px}
.cta .btn{margin:4px 8px 4px 0}
details{border-bottom:1px solid var(--line);padding:12px 0}
summary{cursor:pointer;font-weight:700;min-height:32px}
details p{margin:8px 0 0}
dl.law{display:grid;grid-template-columns:minmax(8em,28%) 1fr;margin:0}
dl.law dt,dl.law dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
dl.law dt{font-weight:700;padding-right:12px}
footer{border-top:1px solid var(--line);padding:28px 0 48px;color:var(--sub);font-size:14px}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:560px){dl.law{grid-template-columns:1fr}dl.law dt{border:0;padding-bottom:0}.bars>div{grid-template-columns:4.5em 1fr 4em}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media print{.top,.noprint,.skip{display:none!important}body{background:#fff;color:#000;font-size:12px;line-height:1.5}.card{box-shadow:none;border-color:#bbb;padding:10px}section{padding:6px 0}}