/* =========================================================
   handson.lx-ope.link 共通スタイル（FEATURE デザイン）
   FEATURE は 04_教材/_共通/FEATUREデザイン/ のひな形（v1）。決まりは FEATUREデザイン.md
   記事ページはこの CSS と handson.js だけで組み立てる。記事ごとに <style> を書かない
   見た目：アメリカの雑誌の特集ページ風。背景は白、角は丸めず、影は付けない。太い罫線・大きな章番号・オレンジの帯の小見出しで区切る
   色：黒・白、キーカラーのオレンジ（--accent）、コピーできる値と大事な設定の黄色（--yellow）
       オレンジは章の題・小見出しの帯・番号の印・注意の囲みだけに使い、小さい文字には使わない
       枠の線の色だけは AWS 構成図の決まり（VPC は紫、リージョンは青緑の破線など）に合わせる
   動き：アニメーションやボタンで切り替える図は入れない。図は止まった形で、道や順番は①②の番号で示す
   ひな形を直しても、このファイルは変わらない。合わせるときは手で写す
   ========================================================= */

:root{
  --ink:#000;
  --paper:#fff;
  --accent:#E8620C;
  --yellow:#FFD84D;
  --green:#7DD99A;
  --font:"IBM Plex Sans JP","Yu Gothic UI","Meiryo UI","Hiragino Sans",sans-serif;
  --display:"Archivo Black","Arial Black","IBM Plex Sans JP",sans-serif;
  --narrow:"Archivo Narrow","IBM Plex Sans JP",sans-serif;
  --mono:"IBM Plex Mono",Consolas,"BIZ UDGothic",monospace;
  /* AWS 構成図の枠の色 */
  --aws-cloud:#232F3E;
  --aws-region:#00A4A6;
  --aws-account:#E7157B;
  --aws-vpc:#8C4FFF;
  --aws-public:#7AA116;
  --aws-private:#00A4A6;
  --aws-az:#147EBA;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--font);font-size:17px;line-height:1.9;letter-spacing:.02em}
h1,h2,h3,summary,.tag,.kicker,.toc-card a,.cmp-h{font-feature-settings:"palt"}
h1,h2,h3,figcaption,.cmp-h{word-break:auto-phrase;text-wrap:balance}
p{margin:0 0 1em}
a{color:#000;text-decoration-thickness:1.5px;text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #0B5FFF;outline-offset:2px}
b,strong{font-weight:700}
ul,ol{margin:0 0 1.1em;padding-left:1.5em}
li{margin:.45em 0}
li::marker{font-weight:700}
svg.ic{display:inline-block;flex:none}

/* ---------- 表紙（雑誌の特集の扉） ---------- */
.hero{border-top:14px solid #000;border-bottom:6px solid #000}
.hero-inner{max-width:900px;margin:0 auto;padding:16px 20px 36px}
.sitebar{margin:0 0 26px;font-size:14px;font-weight:700}
.sitebar a{text-decoration:none}
.sitebar a:hover{text-decoration:underline}
.kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-family:var(--narrow);font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.kicker .k-tag{background:var(--accent);color:#000;padding:2px 10px;letter-spacing:.14em}
h1{font-size:clamp(38px,7vw,72px);line-height:1.12;letter-spacing:-.01em;margin:22px 0 24px;font-weight:700}
h1 .hl{color:var(--accent)}
.dek{max-width:40em;font-size:19px;line-height:1.85;margin:0;padding-top:18px;border-top:2px solid #000}
/* レベル・時間・使うもの・料金（表紙のいちばん下の段） */
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:760px;margin:28px 0 0;border-top:2px solid #000;border-bottom:2px solid #000}
.spec > div{min-width:0;padding:8px 14px 9px;border-left:1px solid #000}
.spec > div:first-child{border-left:0;padding-left:0}
.spec dt{font-size:13px;font-weight:700;line-height:1.5}
.spec dd{margin:0;font-size:16px;font-weight:700;line-height:1.5}

/* ---------- 本文 ---------- */
.wrap{max-width:900px;margin:0 auto;padding:40px 20px 120px}
section.sec{margin-top:96px;scroll-margin-top:16px}
.wrap > section.sec:first-child{margin-top:0}   /* TOP のように目次のないページ */
h2{display:flex;align-items:flex-end;gap:18px;margin:0 0 30px;padding-top:12px;border-top:8px solid #000;font-size:clamp(26px,4vw,36px);line-height:1.25;font-weight:700;color:var(--accent)}
h2 .n{flex:none;font-family:var(--display);font-size:clamp(46px,8vw,78px);line-height:.8;color:#000;letter-spacing:-.03em;font-weight:400}
h3.s{display:table;max-width:100%;font-size:22px;line-height:1.45;color:#000;background:var(--accent);margin:56px 0 18px;padding:6px 16px}
h2 + h3.s{margin-top:0}
.card{border:2px solid #000;padding:18px 22px;margin:0 0 28px}
.card > :last-child{margin-bottom:0}
.card-title{font-size:17px;font-weight:700;margin:0 0 6px}
.goal{display:flex;gap:14px;align-items:flex-start}
.goal .mark{flex:none;font-size:14px;font-weight:700;line-height:1.6;background:#000;color:#fff;padding:2px 10px;margin-top:3px}
.goal p{margin:0;font-weight:700}
.goal + .card-title{margin-top:16px;padding-top:14px;border-top:1px solid #000}

/* 目次（本文の最初に、章と手順の見出しを並べる） */
.toc-card{border-top:4px solid #000;border-bottom:4px solid #000;padding:14px 0 10px;margin:0 0 12px}
.toc-title{font-family:var(--narrow);font-size:16px;font-weight:700;letter-spacing:.12em;margin:0 0 6px}
.toc-list{list-style:none;padding:0;margin:0}
.toc-list > li{margin:0;border-top:1px solid #000}
.toc-list > li:first-child{border-top:0}
.toc-list a{display:flex;align-items:baseline;gap:16px;padding:9px 4px;text-decoration:none;font-weight:700;font-size:17px}
.toc-list a:hover{background:var(--yellow)}
.toc-list .tn{flex:none;width:2.2em;font-family:var(--display);font-weight:400;font-size:20px;line-height:1}
.toc-sub{list-style:none;padding:0 0 10px 3.4em;margin:0}
.toc-sub li{margin:0}
.toc-sub a{padding:3px 4px;font-weight:500;font-size:15px}
.toc-sub .sn{flex:none;font-family:var(--narrow);font-size:13.5px;font-weight:700;letter-spacing:.04em}

/* ---------- 図 ---------- */
figure{margin:24px 0 36px}
.fig{background:#fff;border:2px solid #000}
.fig-body{padding:18px;overflow-x:auto}
.fig-body svg.dg{display:block;width:100%;height:auto;max-width:var(--zw,760px);margin:0 auto}
.zoomed svg.dg{width:var(--zw,760px)!important;max-width:none!important}
.fig-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:8px 14px;border-top:1px solid #000}
.legend{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;font-size:14px;font-weight:700}
.dot{display:inline-block;width:16px;height:16px;border:2px solid #000;vertical-align:-3px;margin-right:6px;background:#fff}
figcaption{font-size:14.5px;font-weight:700;line-height:1.6;margin:10px 0 0;padding-left:14px;border-left:4px solid var(--accent)}
.hint{display:none;font-size:13px;font-weight:700;margin:6px 0 0}

/* SVG で描く図（svg.dg）。AWS のアイコンは <svg data-icon="…" x y width height> で置く */
.dg text{font-family:var(--font);fill:#000}
.dg .lb{font-size:15px;font-weight:700;text-anchor:middle}
.dg .lbs{font-size:13.5px;font-weight:700;text-anchor:middle}
.dg .sm{font-size:12.5px;text-anchor:middle}
.dg .glb{font-size:13px;font-weight:700}
.dg .line{fill:none;stroke:#000;stroke-width:2.5}
.dg .route{fill:none;stroke:#000;stroke-width:2;stroke-dasharray:6 5}
.dg .badge circle{fill:#000}
.dg .badge text{fill:#fff;font-size:13px;font-weight:700;text-anchor:middle}

/* HTML で組む AWS 構成図の枠（アイコンは左上の角に置く。文字は読みやすさのため黒） */
.grp{position:relative;border:2px solid #000;background:#fff;padding:0 14px 14px;min-width:0}
.grp-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px -14px;font-size:15px;font-weight:700;line-height:1.35;word-break:auto-phrase}
.grp-h svg.ic{width:30px;height:30px}
.grp-h > span:not(.flag){min-width:0;max-width:calc(100% - 40px)}
.grp-h .sub{display:inline-block;font-family:var(--mono);font-size:13px;font-weight:500;margin-left:6px;white-space:nowrap}
.grp.cloud{border-color:var(--aws-cloud)}
.grp.region{border:2px dashed var(--aws-region)}
.grp.account{border-color:var(--aws-account)}
.grp.vpc{border-color:var(--aws-vpc)}
.grp.pub{border-color:var(--aws-public)}
.grp.pri{border-color:var(--aws-private)}
.grp.az{border:2px dashed var(--aws-az)}
.grp.az > .grp-h{margin-left:0;padding-top:8px}   /* アベイラビリティーゾーンの枠にはアイコンがない */
.grp.new{border-width:4px}
.grp.new > .grp-h{margin-left:-16px;margin-top:-2px}
.grp-h .flag{margin-left:auto;font-size:13px;font-weight:700;line-height:1.6;background:#000;color:#fff;padding:1px 12px;white-space:nowrap}
.grp .ip{font-family:var(--mono);font-size:15px;font-weight:700;margin:0 0 4px}
.grp .empty{border:2px dashed #000;padding:10px;text-align:center;font-size:14px;font-weight:700;margin:6px 0 0}
.grp .note{font-size:14px;margin:0}
.row{display:flex;flex-wrap:wrap;gap:18px}
.row > *{flex:1 1 220px}
.res{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;line-height:1.4;background:#fff;border:1px solid #000;padding:4px 10px 4px 6px}
.res svg.ic{width:28px;height:28px}
.res .cost{font-size:12.5px;background:var(--accent);color:#000;padding:0 8px}

/* 設定による違いを並べる */
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;margin:20px 0 8px}
.cmp-card{border:2px solid #000}
.cmp-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:8px 14px;border-bottom:2px solid #000;font-size:17px;font-weight:700}
.cmp-card.ok .cmp-h{background:#000;color:#fff}
.cmp-h .tag{margin-left:auto;font-size:13px;line-height:1.6;background:#fff;color:#000;border:1px solid #000;padding:0 10px}
.cmp-in{padding:16px 14px 6px}
.cmp-in > p{font-size:15.5px}
.cmp-in .grp{margin-bottom:14px}
.mini-subs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mini-subs .grp{margin:0;padding:6px 8px}
.mini-subs .grp-h{margin:0 0 0 -8px;font-size:13.5px}
.mini-subs .grp-h svg.ic{width:24px;height:24px}
.mini-res{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* VPC どうしは届かない：ほかの VPC からの線が、自分の VPC の境目の ✕ で止まる */
.iso{display:flex;align-items:stretch}
.iso > .grp{flex:1 1 0}
.iso .me{border-width:4px}
.iso .me > .grp-h{margin-left:-16px;margin-top:-2px}
.iso-gap{flex:0 0 78px;position:relative;display:flex;align-items:center}
.iso-gap .line{position:absolute;top:50%;left:6px;right:6px;border-top:2px dashed #000}
.iso-gap .ng{position:relative;z-index:1;width:28px;height:28px;background:#000;color:#fff;font-size:16px;font-weight:700;line-height:28px;text-align:center}
.iso-gap.r .ng{margin-left:auto;margin-right:-2px}
.iso-gap.l .ng{margin-right:auto;margin-left:-2px}

/* CIDR の図：4つの数字のうち、決まっている数字は黒、自由に使える数字は破線の枠。/16 と /24 を並べて比べる */
.cidr-row{padding:16px 18px 18px}
.cidr-row + .cidr-row{border-top:2px solid #000}
.cidr-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 12px}
.cidr-v{font-family:var(--mono);font-size:clamp(22px,4.5vw,30px);font-weight:700;line-height:1.2}
.cidr-v b{background:var(--accent);padding:0 6px;margin-left:2px}
.cidr-h .tag{font-size:13px;font-weight:700;line-height:1.6;background:#000;color:#fff;padding:1px 10px}
.ipb{display:flex;align-items:center;gap:8px;max-width:620px}
.ipb .o{flex:1 1 0;min-width:0;text-align:center;font-family:var(--mono);font-size:22px;font-weight:700;line-height:1.4;background:#fff;border:2px dashed #000;padding:8px 2px;letter-spacing:0}
.ipb .o.fixed{background:#000;color:#fff;border-style:solid}
.ipb .d{flex:none;font-family:var(--mono);font-size:26px;font-weight:700}
.cidr-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:14px 0 0;border-top:1px solid #000}
.cidr-out > div{min-width:0;padding:8px 0 0}
.cidr-out > div + div{padding-left:18px;border-left:1px solid #000;margin-left:-1px}
.cidr-out > div:first-child{padding-right:18px}
.cidr-out dt{font-size:14px;font-weight:700}
.cidr-out dd{margin:0}
.cidr-out .v{display:block;font-family:var(--mono);font-size:19px;font-weight:700}
.cidr-out .why{display:block;font-size:14px}
.dot.fixed{background:#000}
.dot.free{border-style:dashed}

/* IP アドレスの範囲のマス目の図。VPC の範囲を 256 個ずつ 16×16 のマスにし、サブネットに使うマス（i.on）を黒にして番号を書く */
.ipmap{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px}
.ipgrid{display:grid;grid-template-columns:repeat(16,20px);grid-auto-rows:20px;gap:1px;background:#000;border:1px solid #000;flex:none}
.ipgrid i,.ipkey i{display:flex;align-items:center;justify-content:center;background:#fff;font-style:normal;font-family:var(--display);font-size:12px;line-height:1}
.ipgrid i.on,.ipkey i.on{background:#000;color:#fff}
.ipkey{list-style:none;padding:0;margin:0;flex:1 1 220px}
.ipkey li{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:15px;line-height:1.55}
.ipkey li:last-child{margin-bottom:0}
.ipkey i{flex:none;width:22px;height:22px;border:1px solid #000}
.ipkey span{font-family:var(--mono);font-weight:700}
.ipkey b{font-family:var(--font)}
.ipkey li:last-child span{font-family:var(--font)}

/* 画面のイメージ（実際の画面の写しではない。どの欄に何を入れるかだけを示す） */
.mock{border:2px solid #000;margin:16px 0 22px}
.mock-title{display:flex;align-items:center;gap:10px;margin:0;padding:8px 16px;background:#000;color:#fff;font-weight:700}
.mock-title .tag{margin-left:auto;font-size:13px;line-height:1.6;background:#fff;color:#000;padding:0 10px}
.mf{display:grid;grid-template-columns:14em minmax(0,1fr);gap:6px 14px;align-items:center;padding:10px 16px;border-bottom:1px solid #000}
.mf .ml{margin:0;font-size:15px;font-weight:700}
.mf .mv{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:15px}
.opt{display:inline-flex;align-items:center;gap:6px}
.opt::before{content:"";flex:none;width:15px;height:15px;border:2px solid #000;border-radius:50%;background:#fff}
.opt.on{font-weight:700}
.opt.on::before{background:#000;box-shadow:inset 0 0 0 2.5px #fff}
.inp{display:inline-flex;align-items:center;min-width:12em;border:1px solid #000;padding:3px 6px;background:#fff}
.sel{display:inline-flex;align-items:center;gap:14px;min-width:12em;border:1px solid #000;padding:3px 8px;background:#fff}
.sel::after{content:"▼";margin-left:auto;font-size:.7em}
.mock-foot{display:flex;justify-content:flex-end;padding:10px 16px}
.mock-foot .mbtn{font-size:14.5px;font-weight:700;background:var(--accent);padding:3px 14px}

/* 画面の写し（スクリーンショット）。操作する場所をオレンジの枠（.mk）で囲み、すぐそばの手順の番号と同じ数字を付ける
   枠は HTML で重ね、位置は画像の幅・高さに対する %。数字は枠の左に置く（.r は右、.b は左下）。画像の元の幅を --w に書く
   画像は元の大きさより大きくしない。狭い画面ではタップで元の大きさになり、横にスクロールできる */
figure.shot{margin:18px 0 26px}
.shot-in{position:relative;width:100%;max-width:calc(var(--w) + 2px);border:1px solid #000}
.shot-in img{display:block;width:100%;height:auto}
.mk{position:absolute;border:3px solid var(--accent)}
.mk > i{position:absolute;top:50%;right:calc(100% + 3px);transform:translateY(-50%);width:24px;height:24px;background:var(--accent);color:#000;font-style:normal;font-family:var(--display);font-size:14px;line-height:24px;text-align:center}
.mk.r > i{right:auto;left:calc(100% + 3px)}
.mk.b > i{top:calc(100% + 3px);right:auto;left:-3px;transform:none}

/* ---------- 手順 ---------- */
.step{border:2px solid #000;margin:0 0 40px;scroll-margin-top:16px}
.step-head{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:4px solid #000}
.step-head .num{font-family:var(--narrow);font-size:15px;font-weight:700;letter-spacing:.06em;background:#000;color:#fff;padding:3px 10px;white-space:nowrap}
.step-head svg.step-ic{flex:none;width:30px;height:30px}
.step-head h3{margin:0;font-size:22px;line-height:1.4;color:var(--accent)}
.step-body{padding:20px 24px 22px}
.step-body > :last-child{margin-bottom:0}
.step-body > ol > li{padding-left:2px}
.sub-t{font-weight:700;font-size:18.5px;line-height:1.5;color:var(--accent);margin:28px 0 10px;padding:1px 0 1px 10px;border-left:5px solid var(--accent)}
.step-body > .sub-t:first-child{margin-top:4px}
/* どの画面で作業するか */
.where{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 12px;font-size:15px;font-weight:700}
.where b{background:#000;color:#fff;padding:0 9px;font-size:13px;line-height:1.7}

/* コピーできる値 */
.cp{font-family:var(--mono);font-size:.9em;font-weight:500;line-height:1.5;color:#000;background:var(--yellow);border:1px solid #000;border-radius:0;padding:0 6px;margin:0 1px;cursor:pointer;white-space:nowrap}
.cp:hover{background:#FFE88A}
.cp.copied{background:var(--green)}
.cp{position:relative}
.cp.copied::after{content:"コピーしました";position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);z-index:5;font-family:var(--font);font-size:12.5px;font-weight:700;line-height:1.6;letter-spacing:0;color:#fff;background:#000;padding:1px 8px;white-space:nowrap;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
code{font-family:var(--mono);font-size:.88em;background:#fff;border:1px solid #000;padding:0 5px;white-space:nowrap}
code.brk{white-space:normal;overflow-wrap:anywhere}
.nw{white-space:nowrap}   /* 名前などをハイフンで改行させない */
.code{position:relative;margin:12px 0 20px}
pre{margin:0;font-family:var(--mono);font-size:14px;line-height:1.7;background:#111;color:#fff;padding:44px 20px 16px;overflow-x:auto}
pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit;white-space:pre}
pre.out{padding-top:14px;font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere}
pre.out code{white-space:pre-wrap}
pre .chg{color:var(--yellow);font-weight:700}
.copy{position:absolute;top:10px;right:10px;font:inherit;font-size:12.5px;font-weight:700;line-height:1.6;color:#000;background:var(--yellow);border:0;padding:1px 10px;cursor:pointer}
.copy.copied{background:var(--green)}

/* 囲み（1つの手順に1つまで） */
.box{position:relative;border:2px solid #000;padding:20px 16px 10px;margin:30px 0 8px}
.box > .tag{position:absolute;top:-13px;left:12px;font-size:13px;font-weight:700;line-height:1.6;padding:1px 12px;background:#000;color:#fff}
.box.warn{border-color:var(--accent)}
.box.warn > .tag{background:var(--accent);color:#000}
.box > :last-child{margin-bottom:0}

/* うまくいったときの例 */
.result-in{border-left:6px solid #000;padding:2px 0 2px 16px;margin:6px 0 4px}
.result-in > :last-child{margin-bottom:0}

/* 表。3列の設定の表は table.stack にすると、スマホでは1行ずつのカードになる */
.table-wrap{overflow-x:auto;margin:10px 0 20px}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.7;border-top:2px solid #000;border-bottom:2px solid #000}
th,td{padding:8px 12px;text-align:left;vertical-align:top;border-bottom:1px solid #000}
th{background:#000;color:#fff;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td:first-child{min-width:8em;font-weight:700}
td.key{background:var(--yellow)}

/* ---------- 確かめる ---------- */
ul.checks{list-style:none;counter-reset:ck;padding:0;margin:0 0 1.2em;border-top:2px solid #000}
ul.checks li{counter-increment:ck;position:relative;padding:12px 4px 12px 46px;margin:0;border-bottom:1px solid #000}
ul.checks li::before{content:counter(ck);position:absolute;left:4px;top:15px;width:28px;height:28px;background:var(--accent);font-family:var(--display);font-size:15px;line-height:28px;text-align:center}
ul.checks .mean{display:block;font-size:15.5px;margin-top:2px}
ol.questions{list-style:none;counter-reset:q;padding:0;margin:0 0 1.2em;border-top:2px solid #000}
ol.questions li{counter-increment:q;position:relative;padding:12px 4px 12px 52px;margin:0;border-bottom:1px solid #000}
ol.questions li::before{content:"Q" counter(q);position:absolute;left:4px;top:15px;font-family:var(--narrow);font-size:15px;font-weight:700;line-height:1.6;background:#000;color:#fff;padding:1px 8px}

/* ---------- うまくいかないとき ---------- */
details.tr{border-top:1px solid #000;margin:0}
details.tr:last-of-type{border-bottom:1px solid #000}
details.tr > summary{display:flex;align-items:center;gap:12px;padding:11px 4px;cursor:pointer;list-style:none;font-weight:700}
details.tr > summary::-webkit-details-marker{display:none}
details.tr > summary::before{content:"+";flex:none;width:24px;height:24px;background:#000;color:#fff;font-family:var(--mono);line-height:24px;text-align:center}
details.tr[open] > summary::before{content:"−"}
details.tr > div{padding:4px 4px 16px 40px}
details.tr > div > :last-child{margin-bottom:0}

/* ---------- 公式ドキュメント ---------- */
ul.docs{list-style:none;padding:0;margin:0;border-top:2px solid #000}
ul.docs li{margin:0;border-bottom:1px solid #000}
ul.docs a{display:flex;align-items:center;gap:10px;padding:9px 4px;font-weight:700;text-decoration:none}
ul.docs a::after{content:"↗";margin-left:auto;font-family:var(--mono)}
ul.docs a:hover{background:var(--yellow)}

/* ---------- TOP の一覧（1行に1本） ---------- */
.items{list-style:none;padding:0;margin:0;border-top:2px solid #000}
.items li{margin:0;border-bottom:1px solid #000}
.items a{display:grid;grid-template-columns:4.5em minmax(0,1fr) auto;gap:4px 18px;align-items:baseline;padding:16px 4px;text-decoration:none}
.items a:hover{background:var(--yellow)}
.items .lv{grid-area:1 / 1;font-family:var(--narrow);font-size:15px;font-weight:700;letter-spacing:.04em;background:#000;color:#fff;padding:1px 8px;justify-self:start}
.items .t{grid-area:1 / 2;font-size:21px;font-weight:700;line-height:1.45}
.items .m{grid-area:1 / 3;font-size:14.5px;font-weight:700;white-space:nowrap}
.items .d{grid-area:2 / 2 / 3 / 4;font-size:15.5px;line-height:1.8}

.totop{position:fixed;right:20px;bottom:20px;z-index:25;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;font-size:22px;font-weight:700;text-decoration:none;opacity:0;pointer-events:none;transition:opacity .2s}
.totop.show{opacity:1;pointer-events:auto}

/* ---------- スマホ ---------- */
@media (max-width:720px){
  body{font-size:16px}
  .hero-inner{padding:14px 16px 30px}
  .sitebar{margin-bottom:20px}
  .dek{font-size:17px}
  .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec > div:nth-child(odd){border-left:0;padding-left:0}
  .spec > div:nth-child(n+3){border-top:1px solid #000}
  .spec dd{font-size:15px}
  .wrap{padding:28px 16px 96px}
  section.sec{margin-top:72px}
  h2{gap:12px}
  .card{padding:16px}
  .toc-sub{padding-left:3em}
  .fig-body{padding:14px}
  .step-head{padding:10px 14px}
  .step-head h3{font-size:19px}
  .step-body{padding:16px 16px 18px}
  .cmp{grid-template-columns:1fr}
  .mini-subs{grid-template-columns:1fr}
  /* 枠が何重にもなる図で中が狭くならないよう、枠の内側の余白を減らす */
  .grp{padding:0 9px 9px}
  .grp-h{margin-left:-9px}
  .grp.new > .grp-h,.iso .me > .grp-h{margin-left:-11px}
  .grp.az > .grp-h{margin-left:0}
  .row{gap:12px}
  .iso{flex-direction:column}
  .iso-gap{flex-basis:56px;justify-content:center}
  .iso-gap .line{top:6px;bottom:6px;left:50%;right:auto;border-top:0;border-left:2px dashed #000}
  .iso-gap.r{align-items:flex-end}
  .iso-gap.l{align-items:flex-start}
  .iso-gap.r .ng,.iso-gap.l .ng{margin:0}
  .cidr-row{padding:14px 14px 16px}
  .ipb{gap:4px}
  .ipb .o{font-size:14px;padding:6px 1px}
  .ipb .d{font-size:20px}
  .cidr-out{grid-template-columns:1fr}
  .ipgrid{grid-template-columns:repeat(16,15px);grid-auto-rows:15px}
  .ipgrid i{font-size:10px}
  .items a{grid-template-columns:auto minmax(0,1fr)}
  .items .m{grid-area:1 / 2}
  .items .t{grid-area:2 / 1 / 3 / 3;font-size:19px}
  .items .d{grid-area:3 / 1 / 4 / 3}
  .cidr-out > div:first-child{padding-right:0}
  .cidr-out > div + div{padding-left:0;margin-left:0;border-left:0;margin-top:8px;border-top:1px solid #000}
  .mf{grid-template-columns:minmax(0,1fr)}
  .shot.zoomed{overflow-x:auto}
  .shot.zoomed .shot-in{width:calc(var(--w) + 2px);max-width:none}
  .mk{border-width:2px}
  .mk > i{width:20px;height:20px;font-size:12px;line-height:20px}
  .mk.b > i{left:-2px}
  th{white-space:normal}
  td:first-child{min-width:6.5em}
  table.stack{border-bottom:2px solid #000}
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{border-bottom:1px solid #000}
  table.stack tbody tr:last-child{border-bottom:0}
  table.stack td{border:0;padding:4px 12px}
  table.stack td:first-child{background:#000;color:#fff;padding:6px 12px}
  table.stack td:not(:first-child)::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:700}
  table.stack td:last-child{padding-bottom:10px}
  .hint{display:block}
  .totop{right:12px;bottom:12px;width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.totop{transition:none}}
@media print{
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .hint,.totop,.copy{display:none}
  .step,.box,figure,tr,pre,.cmp-card,.shot{break-inside:avoid}
}