:root{--ink:#17191c;--paper:#fff;--mist:#f2f2f3;--fog:#fafafb;--slate:#777b86;--ash:#979799;
--accent:#208aae;--tint:#d3eaf3;--tint-2:#e9f5f9;--deep:#0b3a4e;
--serif:"Source Serif 4","Noto Serif JP",serif;--sans:Inter,"Noto Sans JP",system-ui,sans-serif;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.75;font-weight:430;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.bar{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #eee}
.bar .in{max-width:1040px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-family:var(--serif);font-size:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:9999px;font-size:16px;border:1px solid var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn:hover{transform:translateY(-3px);box-shadow:0 8px 18px -8px rgba(0,0,0,.35)}
.btn-fill{background:var(--ink);color:#fff}.btn-ghost{background:transparent}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hero{padding:72px 0 48px}
.crumb{font-size:14px;color:var(--slate);margin-bottom:16px}
h1{font-family:"Noto Serif JP",var(--serif);font-weight:400;font-size:clamp(34px,6vw,60px);line-height:1.3;letter-spacing:-.01em}
.lead{margin-top:20px;font-size:18px;color:var(--slate);max-width:640px}
.sec{padding:56px 0}
.sec:nth-of-type(even){background:var(--fog)}
.k{font-size:14px;color:var(--ash);margin-bottom:8px}
h2{font-family:"Noto Serif JP",var(--serif);font-weight:400;font-size:clamp(26px,4vw,38px);line-height:1.4;margin-bottom:12px}
.sub{color:var(--slate);font-size:17px;max-width:640px;margin-bottom:32px}
h3{font-family:var(--sans);font-size:20px;font-weight:500;line-height:1.4}
.note{margin-top:20px;font-size:14px;color:var(--slate)}
/* vertical timeline */
.tv{list-style:none;padding:0;position:relative;display:grid;gap:16px}
.tv::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:#d9d9dd}
.tv li{position:relative;padding-left:44px}
.tv li::before{content:"";position:absolute;left:4px;top:26px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.tv li.now::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px var(--tint)}
.tv .c{background:#fff;border-radius:24px;padding:20px 22px;transition:transform .5s var(--ease)}
.sec:nth-of-type(even) .tv .c{background:#fff}
.tv .c:hover{transform:translateY(-4px)}
.tv .d{font-family:var(--serif);font-size:30px;line-height:1.2;letter-spacing:-.01em}
.tv h3{margin:6px 0 4px}.tv p{font-size:16px}
.pill{display:inline-block;font-size:13px;padding:2px 12px;border-radius:9999px;background:var(--accent);color:#fff;margin-left:8px;vertical-align:middle;font-family:var(--sans)}
/* flow steps */
.flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:s}
.flow li{position:relative;background:var(--mist);border-radius:24px;padding:20px 16px;counter-increment:s;min-height:150px}
.flow li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--serif);font-size:16px;margin-bottom:12px}
.flow li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translateY(-50%);z-index:2;font-size:14px;color:var(--ash);background:#fff;border-radius:50%;width:22px;height:22px;display:grid;place-items:center}
.flow b{display:block;font-weight:500;font-size:17px;margin-bottom:4px}.flow span{font-size:14px;color:var(--slate);line-height:1.6;display:block}
/* cards */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cd{background:var(--mist);border-radius:24px;padding:24px 22px;transition:transform .5s var(--ease)}
.cd:hover{transform:translateY(-6px)}
.cd .big{font-family:var(--serif);font-size:40px;line-height:1.1;margin:8px 0 4px;letter-spacing:-.015em}
.cd .t{font-size:14px;color:var(--slate)}
.cd dl{margin-top:14px;display:grid;gap:10px}
.cd dt{font-size:13px;color:var(--ash)}.cd dd{font-size:16px;line-height:1.6}
.cd.hl{background:var(--accent);color:#fff}.cd.hl .t,.cd.hl dt{color:rgba(255,255,255,.82)}
.cd .bars{display:flex;gap:4px;margin-top:6px}.cd .bars i{height:8px;flex:1;border-radius:9999px;background:#d9d9dd}.cd .bars i.on{background:var(--ink)}.cd.hl .bars i{background:rgba(255,255,255,.35)}.cd.hl .bars i.on{background:#fff}
/* checklist columns */
.ck{list-style:none;padding:0;margin-top:14px;display:grid;gap:10px}
.ck li{position:relative;padding-left:30px;font-size:16px;line-height:1.6}
.ck li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:6px;border:2px solid var(--accent)}
.ck li::after{content:"";position:absolute;left:6px;top:8px;width:5px;height:9px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(40deg)}
.hl .ck li::before{border-color:#fff}.hl .ck li::after{border-color:#fff}
/* story blocks */
.sb{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.sb div{background:#fff;border-radius:24px;padding:18px 16px;border:1px solid #eee}
.sb b{display:block;font-family:var(--serif);font-size:28px;color:var(--accent);line-height:1.1;margin-bottom:6px}
.sb strong{display:block;font-weight:500;margin-bottom:4px}.sb span{font-size:14px;color:var(--slate);line-height:1.6;display:block}
.cta{padding:72px 0;text-align:center}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
footer{padding:28px 0 48px;text-align:center;color:var(--slate);font-size:14px;border-top:1px solid #eee}
/* reveal */
.r{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*1ms)}
.r.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.r{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.btn,.cd,.tv .c{transition:none}}
@media(max-width:900px){.flow{grid-template-columns:minmax(0,1fr)}.flow li{min-height:0;padding-left:60px}.flow li::before{position:absolute;left:16px;top:18px;margin:0}.flow li:not(:last-child)::after{content:"↓";right:auto;left:21px;top:auto;bottom:-14px;transform:none}.g3{grid-template-columns:minmax(0,1fr)}.sb{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.wrap,.bar .in{padding-left:16px;padding-right:16px}.hero{padding-top:48px}.btn{padding:0 16px;font-size:15px}.logo{font-size:22px}}