:root{
  color-scheme:light;
  --bg:#FFFFFF;--bg-2:#F1F6FF;--ink:#122033;--ink-2:#5A6B80;--navy:#2463EB;--navy-h:#1B4FC4;
  --shu:#E04A2F;--rule:#D9E2EE;--rule-2:#EAF0F7;--gray:#B7C2D0;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --head:"Zen Kaku Gothic New","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --mono:"IBM Plex Mono","Noto Sans JP",sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:17px;line-height:2;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:clip}
@media (max-width:640px){body{font-size:16px}}
a{color:inherit;text-underline-offset:6px;text-decoration-thickness:1px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.hd{position:sticky;top:0;z-index:10;height:64px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.hd .in{max-width:1100px;margin:0 auto;height:100%;padding:0 24px;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none;white-space:nowrap}
.logo b{font-family:var(--head);font-weight:700;font-size:18px;letter-spacing:.08em}
.logo span{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;gap:14px;height:56px;padding:0 10px 0 28px;border-radius:999px;background:var(--navy);color:#fff;text-decoration:none;font-weight:500;font-size:16px;letter-spacing:.06em;line-height:1;white-space:nowrap;transition:background .2s}
.btn:hover{background:var(--navy-h)}
.btn small{font-size:13px;opacity:.75;font-weight:400}
.btn .arw{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--navy);transition:transform .2s}
.btn:hover .arw{transform:translateX(4px)}
.hd .btn{height:40px;font-size:14px;padding:0 18px;margin-left:auto}
@media (max-width:640px){.logo span{display:none}}

.art{max-width:720px;margin:0 auto;padding:56px 24px 40px}
.crumb{font-size:13px;color:var(--ink-2);margin-bottom:28px}
.crumb a{color:var(--ink-2)}
.tag{display:inline-block;font-size:12px;letter-spacing:.1em;color:var(--navy);border:1px solid var(--navy);border-radius:999px;padding:2px 12px;margin-bottom:18px}
h1{font-family:var(--head);font-weight:700;font-size:clamp(26px,4.2vw,40px);line-height:1.5;letter-spacing:.05em;font-feature-settings:"palt";word-break:auto-phrase}
.meta{margin-top:18px;font-size:13px;color:var(--ink-2)}
.lead{margin-top:44px;font-size:clamp(18px,2.2vw,21px);line-height:1.95;font-weight:500}
.lead em{font-style:normal;background:linear-gradient(transparent 62%,#DCE8FF 62%)}
.def{margin-top:28px;padding:22px 26px;border-left:4px solid var(--navy);background:var(--bg-2);border-radius:0 12px 12px 0}
.def b{display:block;font-size:13px;letter-spacing:.1em;color:var(--navy);margin-bottom:4px}
h2{font-family:var(--head);font-weight:700;font-size:clamp(22px,3vw,28px);line-height:1.6;letter-spacing:.05em;font-feature-settings:"palt";margin:88px 0 24px;word-break:auto-phrase}
h2 .no{display:block;font-family:var(--mono);font-size:13px;color:var(--navy);letter-spacing:.12em;margin-bottom:6px;font-weight:500}
p+p{margin-top:1.1em}
strong{font-weight:700;background:linear-gradient(transparent 62%,#DCE8FF 62%)}

/* 図 */
figure{margin:40px 0;padding:28px 26px;border:1px solid var(--rule);border-radius:16px;background:#fff}
figcaption{font-size:13px;color:var(--ink-2);letter-spacing:.06em;margin-bottom:18px}
figcaption b{color:var(--ink);font-weight:700;margin-right:8px}
.src{margin-top:14px;font-size:12px;color:var(--ink-2);line-height:1.7}

/* 図1 */
.f1 .box{border-radius:12px;padding:18px 20px}
.f1 .must{background:var(--ink);color:#fff}
.f1 .must .lb{color:#FFB4A6}
.f1 .ex{margin-top:10px;background:var(--bg-2);border:1px dashed var(--gray)}
.f1 .lb{display:block;font-size:12px;letter-spacing:.12em;margin-bottom:6px;font-weight:700}
.f1 .ex .lb{color:var(--ink-2)}
.f1 .must p{font-size:18px;font-weight:700;line-height:1.7}
.f1 ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.f1 li{background:#fff;border:1px solid var(--rule);border-radius:999px;padding:4px 14px;font-size:15px}
.f1 .note{margin-top:14px;font-size:14px;color:var(--ink-2);line-height:1.8}

/* 原文 */
details{margin:28px 0;border:1px solid var(--rule);border-radius:12px;background:#FAFBFD}
summary{cursor:pointer;padding:14px 20px;font-size:14px;color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:10px}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋";font-family:var(--mono);color:var(--navy)}
details[open] summary::before{content:"－"}
details .q{padding:0 20px 18px;font-size:14px;line-height:1.9;color:var(--ink-2)}
details .q dt{font-weight:700;color:var(--ink);margin-top:10px}

/* 図2 */
.bars{display:grid;gap:12px}
.bar{display:grid;grid-template-columns:7.5em 1fr;align-items:center;gap:12px;font-size:14px}
.bar .tr{position:relative;height:30px;background:var(--rule-2);border-radius:6px;overflow:hidden}
.bar .fl{position:absolute;inset:0 auto 0 0;width:0;background:var(--navy);border-radius:6px;transition:width 1.1s var(--ease)}
.bar.atk .fl{background:var(--gray)}
.bar>span{white-space:nowrap}
.bar .v{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:13px;color:var(--ink)}
.go .bar .fl,html:not(.js) .bar .fl{width:var(--w)}
.bar:nth-child(2) .fl{transition-delay:.1s}.bar:nth-child(3) .fl{transition-delay:.2s}.bar:nth-child(4) .fl{transition-delay:.3s}.bar:nth-child(5) .fl{transition-delay:.45s}
.sum{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.sum div{border-radius:12px;padding:14px 16px}
.sum .h{background:var(--navy);color:#fff}
.sum .a{background:var(--rule-2);color:var(--ink-2)}
.sum b{display:block;font-family:var(--mono);font-size:clamp(28px,5vw,40px);line-height:1.2;font-weight:500}
.sum span{font-size:13px}

/* 図3 */
.f3{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
.f3 .col{border-radius:12px;padding:18px}
.f3 .l{background:var(--rule-2)}
.f3 .r{background:var(--bg-2);border:2px solid var(--navy)}
.f3 h3{font-family:var(--head);font-size:15px;letter-spacing:.06em;margin-bottom:10px}
.f3 .r h3{color:var(--navy)}
.f3 ul{list-style:none;font-size:14px;line-height:1.7;display:grid;gap:8px}
.f3 li{padding-left:1.3em;position:relative}
.f3 .l li::before{content:"・";position:absolute;left:0;color:var(--ink-2)}
.f3 .r li::before{content:"✓";position:absolute;left:0;color:var(--navy);font-weight:700}
@media (max-width:560px){.f3{grid-template-columns:1fr}.bar{grid-template-columns:6.6em 1fr;font-size:13px;gap:8px}}

/* 体験 */
.cta{margin:72px 0 0;padding:36px 30px;border-radius:20px;background:var(--ink);color:#fff}
.cta p.h{font-family:var(--head);font-size:clamp(20px,2.6vw,24px);font-weight:700;line-height:1.6}
.cta ul{list-style:none;margin:16px 0 26px;font-size:15px;line-height:1.9;color:#C9D4E3}
.cta li::before{content:"— ";color:#8FA3BD}
.cta .btn{background:#fff;color:var(--ink)}
.cta .btn .arw{background:var(--navy);color:#fff}
.refs{margin-top:64px;padding-top:24px;border-top:1px solid var(--rule);font-size:12px;color:var(--ink-2);line-height:1.9}
.refs b{display:block;color:var(--ink);font-size:13px;margin-bottom:6px}
.refs a{color:var(--ink-2);word-break:break-all}
.ft{border-top:1px solid var(--rule);padding:36px 24px;font-size:13px;color:var(--ink-2);text-align:center}

.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.bar .fl{transition:none}}
.ft a{color:var(--ink-2)}
.list{list-style:none;margin-top:40px;display:grid;gap:16px}
.list a{display:block;padding:24px 26px;border:1px solid var(--rule);border-radius:16px;text-decoration:none;transition:border-color .2s,transform .2s}
.list a:hover{border-color:var(--navy);transform:translateY(-2px)}
.list .t{font-family:var(--head);font-weight:700;font-size:19px;line-height:1.6;display:block}
.list .d{display:block;margin-top:8px;font-size:14px;color:var(--ink-2);line-height:1.8}
.list .m{display:block;margin-top:10px;font-size:12px;color:var(--navy);letter-spacing:.08em}