/* 配布資料ページ。トークンと基本部品は /style.css を使う。ここは、このページ固有の分だけ（見出しまわりは /shoryokuka と同じ）。 */
.sub-page{background:var(--ink)}
.subhead{border-bottom:1px solid var(--line);background:var(--void);padding:max(16px,env(safe-area-inset-top)) 0 14px}
.subhead-in{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;font:400 12px/1.6 var(--mono);letter-spacing:.14em}
.subhead a{text-decoration:none}
.subhead .brand span{opacity:.6}
.subhead nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 18px}
.top-sec{padding-top:clamp(56px,8vw,104px)}
.lead{max-width:44em;margin:16px 0 0;text-wrap:pretty}
.handout{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start;margin-top:clamp(40px,6vw,64px);padding-top:clamp(32px,5vw,48px);border-top:1px solid var(--line)}
.handout-img{display:block;border:1px solid var(--line)}
.handout-img img{display:block;width:100%;height:auto}
.handout h2{margin:0 0 12px}
.handout .note{font-size:12px;color:var(--muted);margin-top:20px}
@media (max-width:640px){.handout{grid-template-columns:minmax(0,1fr)}.handout-img{max-width:320px}}