@font-face{font-family:'NJ';font-weight:500;font-display:swap;src:url(../fonts/noto-500.woff2) format('woff2')}
@font-face{font-family:'NJ';font-weight:900;font-display:swap;src:url(../fonts/noto-900.woff2) format('woff2')}
@font-face{font-family:'SM';font-weight:700;font-display:swap;src:url(../fonts/mincho-700.woff2) format('woff2')}
*{margin:0;padding:0;box-sizing:border-box}
:root{--r:#e60012;--k:#000;--w:#fff;--pad:72px}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--w);color:var(--k);font-family:'NJ','Hiragino Sans','Yu Gothic',sans-serif;font-weight:500;line-height:1.85;-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
a:focus-visible,button:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid var(--r);outline-offset:3px}
.weekly a:focus-visible,.weekly [tabindex]:focus-visible,.about [tabindex]:focus-visible,.ft a:focus-visible{outline-color:var(--w)}
.skip{position:absolute;left:12px;top:-60px;background:var(--k);color:var(--w);padding:10px 16px;font-weight:900;z-index:50}
.skip:focus{top:8px}
.hd{position:sticky;top:0;z-index:30;background:var(--w);display:flex;justify-content:space-between;align-items:center;height:72px;padding:0 var(--pad);border-bottom:3px solid var(--k)}
.logo{font-family:'SM',serif;font-weight:700;font-size:26px;letter-spacing:.16em}.logo i{font-style:normal;color:var(--r)}
.gnav{display:flex;gap:32px;font-size:14px;letter-spacing:.06em;font-weight:700}
.gnav a{padding:4px 0;border-bottom:3px solid transparent}
.gnav a:hover,.gnav a[aria-current=true]{border-color:var(--r)}
.burger{display:none;width:46px;height:46px;background:var(--w);border:3px solid var(--k);flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.burger span{display:block;width:20px;height:3px;background:var(--k);transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.shelf{position:relative;height:236px;border-bottom:14px solid var(--k);overflow:hidden}
.shelf img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.fig{position:absolute;right:var(--pad);top:10px;background:var(--w);border:2px solid var(--k);font-size:12px;font-weight:900;padding:1px 10px}
.intro{display:grid;grid-template-columns:380px minmax(0,1fr);gap:64px;padding:48px var(--pad) 72px}
.lbl{color:var(--r);font-weight:900;font-size:14px;letter-spacing:.3em}
.lbl.inv{color:var(--w)}
h1{font-family:'SM',serif;font-weight:700;font-size:34px;line-height:1.6;margin:12px 0 20px}
.side p{font-size:15.5px;line-height:2}
.toc{list-style:none;border-top:3px solid var(--k)}
.toc li{border-bottom:1px solid var(--k)}
.toc a{display:grid;grid-template-columns:84px auto 1fr auto;align-items:baseline;gap:10px;padding:19px 0;position:relative}
.toc a::after{content:'';position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--r);transition:width .3s}
.toc a:hover::after,.toc a:focus-visible::after{width:100%}
.toc b{font-size:13px;color:var(--r);letter-spacing:.1em;font-weight:900}
.toc h2{font-family:'SM',serif;font-weight:700;font-size:25px;line-height:1.4}
.toc .d{border-bottom:2px dotted var(--k);height:1px;transform:translateY(-6px)}
.toc .p{font-weight:900;font-size:15px}
.chapters{border-top:3px solid var(--k)}
.ch{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:64px;padding:48px var(--pad);border-bottom:1px solid var(--k)}
.ch-h{grid-row:1/4;display:flex;flex-direction:column;gap:4px;font-weight:900}
.ch-h b{color:var(--r);font-size:14px;letter-spacing:.14em}.ch-h span{font-size:34px;font-family:'SM',serif;line-height:1.2}
.ch h2{font-family:'SM',serif;font-weight:700;font-size:30px;line-height:1.5;grid-column:2}
.ch p{grid-column:2;font-size:15.5px;margin-top:4px}
.bk{grid-column:2;list-style:none;margin-top:18px;max-width:640px;border-top:2px solid var(--k)}
.bk li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px dotted var(--k);font-size:15px}
.bk em{font-style:normal;font-weight:900}
.wrap{max-width:1296px;margin:0 auto}
.weekly{background:var(--k);color:var(--w);padding:80px var(--pad)}
.weekly h2,.guide h2,.about h2{font-family:'SM',serif;font-weight:700;font-size:34px;line-height:1.5;margin:10px 0 12px}
.weekly p,.guide .wrap>p{font-size:15.5px}
.three{list-style:none;margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:3px solid var(--r)}
.three li{display:grid;grid-template-columns:52px 1fr;padding:22px 24px 0 0}
.three li+li{padding-left:24px;border-left:1px solid var(--w)}
.three b{font-family:'SM',serif;font-size:36px;color:var(--w);line-height:1}
.three em{font-style:normal;font-weight:900;display:block}.three span{font-size:14.5px;display:block;margin-top:4px}
.guide{padding:80px var(--pad)}
.steps{list-style:none;margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.steps li{border-top:3px solid var(--k);padding-top:16px}
.steps b{display:inline-block;background:var(--r);color:var(--w);font-family:'SM',serif;width:40px;height:40px;line-height:40px;text-align:center;font-size:18px;margin-bottom:8px}
.steps p{font-size:15.5px}
.about{background:var(--r);color:var(--w);padding:80px var(--pad)}
.about ul{margin-top:22px;padding-left:1.4em;max-width:46em;font-size:15.5px}
.about li{margin-bottom:6px}
.ft{background:var(--k);color:var(--w);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:16px var(--pad);font-size:13px;font-weight:900}
.ft a{border:2px solid var(--w);padding:2px 12px}
/* motion */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .js .rv{opacity:1;transform:none;transition:none}
 .toc a::after,.burger span{transition:none}
}
@media (max-width:1000px){
 :root{--pad:36px}
 .intro{grid-template-columns:1fr;gap:28px}
 .ch{grid-template-columns:1fr}.ch-h{grid-row:auto;flex-direction:row;align-items:baseline;gap:14px;margin-bottom:8px}
 .ch h2,.ch p,.bk{grid-column:1}
 .three,.steps{grid-template-columns:1fr}
 .three li+li{padding-left:0;border-left:0;border-top:1px solid var(--w);margin-top:18px}
}
@media (max-width:860px){
 .burger{display:flex}
 .gnav{display:none;position:absolute;left:0;right:0;top:72px;background:var(--w);flex-direction:column;gap:0;padding:6px var(--pad) 18px;border-bottom:3px solid var(--k)}
 .gnav.open{display:flex}
 .gnav a{padding:14px 0;border-bottom:1px solid var(--k);font-size:16px}
}
@media (max-width:600px){
 :root{--pad:20px}
 html{scroll-padding-top:76px}
 .hd{height:64px}.gnav{top:64px}
 .logo{font-size:22px}
 .shelf{height:170px}.fig{right:12px;font-size:11px}
 .intro{padding:28px var(--pad) 48px}
 h1{font-size:30px}
 .toc a{grid-template-columns:64px 1fr auto}.toc .d{display:none}.toc h2{font-size:21px}
 .ch{padding:36px var(--pad)}.ch h2{font-size:25px}
 .bk li{flex-direction:column;gap:0}
 .weekly,.guide,.about{padding:56px var(--pad)}
 .weekly h2,.guide h2,.about h2{font-size:26px}
 .ft{flex-direction:column}
}