
:root{
  --bg:#fffaf8;--card:#fff;--ink:#171717;--muted:#6d6662;--line:#eee5e1;
  --brand:#d70032;--soft:#fff0f3;--good:#087a55;--goodbg:#effaf6;
  --shadow:0 16px 50px rgba(35,20,16,.08)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 5% -5%,#ffe5ec 0,transparent 28rem),var(--bg);
  color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.75}
a{color:inherit}
.wrap{width:min(920px,calc(100% - 28px));margin:auto}
.top{font-size:11px;color:#776b66;text-align:center;padding:7px;border-bottom:1px solid var(--line);background:#fff}
header{position:sticky;top:0;z-index:20;background:rgba(255,250,248,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{height:62px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{text-decoration:none;font-weight:1000;display:flex;align-items:center;gap:9px}
.logoMark{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--brand),#ff5b7a);color:#fff;display:grid;place-items:center}
.nav a.cta{background:var(--brand);color:#fff;text-decoration:none;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:900}
.hero{padding:58px 0 28px}
.crumb{font-size:11px;color:var(--muted);margin-bottom:16px}
.crumb a{color:#5f5652}
.badge{display:inline-flex;background:#fff;border:1px solid var(--line);padding:7px 10px;border-radius:999px;font-size:11px;font-weight:900}
h1{font-size:clamp(36px,7vw,62px);line-height:1.08;letter-spacing:-.045em;margin:16px 0}
.lead{font-size:17px;color:#4f4743;max-width:760px}
.answer{background:#171717;color:#fff;padding:24px;border-radius:24px;margin:24px 0;box-shadow:var(--shadow)}
.answer b{display:block;color:#ffbdca;font-size:11px;letter-spacing:.08em;margin-bottom:7px}
.answer h2{font-size:28px;line-height:1.2;margin:0 0 8px}
.answer p{margin:0;color:#ddd3cf}
.toc{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;margin:24px 0}
.toc b{display:block;margin-bottom:7px}.toc a{font-size:13px}
section{padding:32px 0}
h2{font-size:30px;line-height:1.22;letter-spacing:-.025em;margin:0 0 13px}
h3{font-size:20px;margin:26px 0 8px}
p{margin:0 0 14px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;margin:14px 0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px}
.mini b{display:block;margin-bottom:4px}.mini span{font-size:12px;color:var(--muted)}
.check{padding-left:0;list-style:none}
.check li{padding:10px 0 10px 28px;position:relative;border-bottom:1px solid var(--line)}
.check li:before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:1000}
.warn{background:#fff7e9;border:1px solid #f0ddb5;border-radius:18px;padding:16px}
.good{background:var(--goodbg);border:1px solid #caebdf;border-radius:18px;padding:16px}
.linkCards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.linkCard{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}
.linkCard b{display:block}.linkCard span{font-size:11px;color:var(--muted)}
.ctaBox{background:linear-gradient(135deg,var(--brand),#a90028);color:#fff;border-radius:26px;padding:28px;text-align:center;margin:34px 0}
.ctaBox h2{margin-top:0}.ctaBox p{color:#ffe3ea}
.btn{display:inline-block;background:#fff;color:var(--brand);font-weight:1000;text-decoration:none;padding:13px 17px;border-radius:14px}
.small{font-size:11px;color:var(--muted)}
footer{padding:34px 0 100px;font-size:11px;color:#766b66;border-top:1px solid var(--line)}
.bottom{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;background:#171717;color:#fff;border-radius:16px;padding:9px 10px 9px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.bottom b{font-size:12px}.bottom a{background:#fff;color:var(--brand);text-decoration:none;font-weight:1000;border-radius:11px;padding:9px 12px;font-size:11px}
@media(max-width:620px){.grid,.linkCards{grid-template-columns:1fr}.hero{padding-top:38px}h1{font-size:42px}.answer h2{font-size:24px}}

html{scroll-padding-top:100px}
[id]{scroll-margin-top:100px}
button,input{font:inherit}
a,button{touch-action:manipulation}
.logo,.bottom>b{min-width:0;overflow-wrap:anywhere}
.logoMark{flex-shrink:0}
.nav{height:auto;min-height:62px;flex-wrap:wrap;padding:8px 0}
.bottom{flex-wrap:wrap}
footer{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
a:focus-visible,button:focus-visible{outline:3px solid #087a55;outline-offset:3px}
@media(max-width:380px){h1{font-size:36px}.answer,.ctaBox{padding:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
