/* 案Aの土台：umt.jp と地続きの白・黒・青。白地のみ（暗い配色は持たない） */
:root{
  --bg:#ffffff; --ink:#0a0a0a; --ink2:#525252; --line:#e5e5e5; --soft:#f4f5f9;
  --accent:#1e2bdb; --on-accent:#ffffff; --mute:#c3c6d4;
  --board:#23392f; --chalk:#f1f2ec; --chalk-dim:#a9b8ae; --chalk-y:#f0d875; --frame:#b4b7c0; --tray:#8f929c;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --en:"Inter","Helvetica Neue",Arial,sans-serif;
  --hand:"Klee One","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  color-scheme:light;
}
body{background:var(--bg);color:var(--ink);font-family:var(--jp);font-size:15px;line-height:1.8;letter-spacing:.02em;font-feature-settings:"palt"}
.page{max-width:1080px;margin:0 auto;padding-inline:20px;padding-block:0 80px}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.25;text-wrap:balance}
a{color:inherit;text-decoration:none}
.en{font-family:var(--en);font-variant-numeric:tabular-nums}
.proto{font-size:12px;color:var(--ink2);padding-block:10px;border-bottom:1px solid var(--line)}
.nav{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline;justify-content:space-between;padding-block:20px}
.logo{font-family:var(--en);font-weight:700;font-size:18px}
.logo span{font-family:var(--jp);font-weight:500;font-size:14px;margin-left:10px}
.nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0;font-size:13px}
.nav a:hover{color:var(--accent)}

.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center;padding-block:48px 72px}
.hero h1{font-size:clamp(34px,5.2vw,60px);font-weight:700}
.hero .lead{margin-top:20px;font-size:16px;color:var(--ink2);max-width:26em}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:28px;background:var(--accent);color:var(--on-accent);padding:12px 22px;border-radius:999px;font-size:14px;font-weight:500}
.cta:hover{filter:brightness(1.1)}
.cta:focus-visible,.seg button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:820px){ .hero{grid-template-columns:1fr;padding-block:28px 48px} }

.lab{background:var(--soft);padding:24px;display:flex;flex-direction:column;gap:18px;min-width:0}
.lab .q{font-size:13px;color:var(--ink2)}
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:999px;overflow:hidden;align-self:flex-start}
.seg button{font:inherit;font-size:13px;padding:6px 18px;background:transparent;color:var(--ink);border:0;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.ans{font-size:22px;font-weight:700;line-height:1.3;min-height:2.6em}
.bars{display:grid;grid-template-columns:2em 1fr;gap:10px 10px;align-items:center;font-size:13px}
.track{display:flex;align-items:center;gap:8px;min-width:0}
.bar{height:18px;background:var(--mute);border-radius:0 4px 4px 0;flex:none;transition:width .7s cubic-bezier(.2,.7,.2,1),background-color .3s}
.bar.on{background:var(--accent)}
.v{font-family:var(--en);font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink2)}
.unit{font-size:12px;color:var(--ink2)}
@media (prefers-reduced-motion: reduce){ .bar{transition:none} }

section{padding-block:56px;border-top:1px solid var(--ink)}
.sec-head{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;margin-bottom:28px}
.sec-head h2{font-size:24px;font-weight:700}
.sec-head p{font-size:13px;color:var(--ink2)}

.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.how div{padding:20px 20px 20px 0;border-bottom:1px solid var(--line);min-width:0}
.how small{display:block;font-size:12px;color:var(--accent);font-weight:500}
.how b{display:block;font-size:16px;margin-bottom:6px}
.how p{font-size:13px;color:var(--ink2)}
@media (max-width:820px){ .how{grid-template-columns:1fr} }

.sup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px}
.sup .name{font-size:28px;font-weight:700;line-height:1.3}
.sup .role{font-size:13px;color:var(--ink2);margin-top:8px}
.sup .txt{font-size:16px;max-width:34em}
@media (max-width:820px){ .sup{grid-template-columns:1fr;gap:16px} }
footer{border-top:1px solid var(--ink);padding-top:20px;font-size:12px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}