/* Layout: 暗い電脳空間を基調に、淡いシアンの罫線で区画を切る。図を先に、文を後に置く単一カラム */
:root{
  --bg:#050A14; --bg-grid:rgba(88,216,255,.045);
  --surface:#0A1726; --surface-2:#0F2236;
  --ink:#E2F1FF; --ink-2:#9CBCD8; --line:#1B3A5C;
  --accent:#4FD4FF; --accent-soft:#0D2C42;
  --glow:rgba(79,212,255,.45);
  --signal:#FFBD5C; --signal-ink:#1A1206; --signal-soft:#231A08;
  --good:#5BE3AC; --good-soft:#07251C;
  --display:"Zen Kaku Gothic New",'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --body:"Noto Sans JP",'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --mono:"Share Tech Mono",'SFMono-Regular',Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#E9F1FA; --bg-grid:rgba(10,110,150,.05);
  --surface:#FFFFFF; --surface-2:#E3EDF8;
  --ink:#04121F; --ink-2:#38596F; --line:#B6CFE6;
  --accent:#065E82; --accent-soft:#D8EAF5;
  --glow:rgba(6,94,130,.2);
  --signal:#8A5100; --signal-ink:#FFF4E2; --signal-soft:#FBEBD2;
  --good:#0A5F45; --good-soft:#DFF2EA;
  color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#E9F1FA; --bg-grid:rgba(10,110,150,.05);
  --surface:#FFFFFF; --surface-2:#E3EDF8;
  --ink:#04121F; --ink-2:#38596F; --line:#B6CFE6;
  --accent:#065E82; --accent-soft:#D8EAF5;
  --glow:rgba(6,94,130,.2);
  --signal:#8A5100; --signal-ink:#FFF4E2; --signal-soft:#FBEBD2;
  --good:#0A5F45; --good-soft:#DFF2EA;
  color-scheme:light;
}

*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink);
  background-image:
    repeating-linear-gradient(to right, var(--bg-grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, var(--bg-grid) 0 1px, transparent 1px 64px);
  font-family:var(--body); font-size:17px; line-height:2;
  margin:0; padding-inline:20px; padding-block:0;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px; margin-inline:auto}
section{padding-block:clamp(44px,8vw,72px); border-top:1px solid var(--line); scroll-margin-top:64px}
section:first-of-type{border-top:0}
h1,h2,h3{font-family:var(--display); text-wrap:balance; margin:0; line-height:1.45}
p{margin:0}
a{color:var(--accent)}
.stack{display:flex; flex-direction:column}
.g10{gap:10px} .g16{gap:16px} .g20{gap:20px} .g28{gap:28px}

.panel{position:relative; background:var(--surface); border:1px solid var(--line)}
.panel::before,.panel::after{
  content:""; position:absolute; width:11px; height:11px; pointer-events:none;
  border:2px solid var(--accent);
}
.panel::before{top:-1px; left:-1px; border-right:0; border-bottom:0}
.panel::after{bottom:-1px; right:-1px; border-left:0; border-top:0}

.eyebrow{font-family:var(--mono); font-size:15px; letter-spacing:.12em; color:var(--accent)}
.h2{font-size:clamp(23px,6vw,30px); font-weight:900}
.lead{color:var(--ink-2); font-size:16px}
strong{color:var(--ink); font-weight:700}

/* ── hero ── */
.hero{padding-block:clamp(44px,9vw,76px) clamp(36px,7vw,58px)}
.hero h1{
  font-weight:900; font-size:clamp(32px,9vw,56px); line-height:1.3;
  text-shadow:0 0 26px var(--glow);
}
.hero h1 .hl{color:var(--accent)}
.hero-sub{font-size:clamp(16px,4vw,19px); color:var(--ink-2); line-height:2.1}
.titleblock{display:flex; flex-direction:column; gap:10px; align-items:flex-start}
.stamp{
  display:inline-flex;
  border:1px solid var(--accent); color:var(--accent); background:var(--accent-soft);
  font-family:var(--display); font-weight:900; font-size:clamp(19px,5vw,24px);
  letter-spacing:.14em; padding:8px 18px; text-shadow:0 0 18px var(--glow);
}
.subtitle{font-family:var(--mono); font-size:clamp(13px,3.4vw,15px); color:var(--ink-2); letter-spacing:.05em}
.herofig{width:100%; max-width:540px; align-self:center; margin:0}
.herofig svg{width:100%; height:auto; display:block; overflow:visible}
.ticker{font-family:var(--mono); font-size:14px; color:var(--ink-2); letter-spacing:.06em;
  border-left:2px solid var(--accent); padding-left:13px}

/* ── 目次 ── */
.toc{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.toc a{
  background:var(--surface); padding:18px 10px 20px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; min-width:0;
}
.toc svg{width:50px; height:50px}
.toc b{font-family:var(--display); font-weight:900; font-size:15.5px; line-height:1.5}

/* ── 数字 ── */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.fact{background:var(--surface); padding:20px 16px; display:flex; flex-direction:column; gap:6px; min-width:0}
.fact b{font-family:var(--mono); font-size:clamp(28px,7vw,36px); color:var(--accent);
  font-variant-numeric:tabular-nums; line-height:1.1; text-shadow:0 0 18px var(--glow)}
.fact b small{font-size:.48em; letter-spacing:.04em}
.fact span{font-size:14px; color:var(--ink-2); line-height:1.8}
@media (max-width:460px){.facts{grid-template-columns:1fr}}

/* ── ステップ ── */
.step{display:grid; grid-template-columns:76px 1fr}
.step-no{
  background:var(--accent-soft); border-right:1px solid var(--line);
  font-family:var(--mono); font-size:32px; color:var(--accent);
  display:flex; align-items:flex-start; justify-content:center; padding-top:20px;
  text-shadow:0 0 16px var(--glow);
}
.step-body{padding:20px 20px 24px; display:flex; flex-direction:column; gap:16px; min-width:0}
.step-body h3{font-weight:900; font-size:clamp(21px,5.4vw,26px)}
.step-body p{font-size:16px; color:var(--ink-2)}
.how{background:var(--surface-2); border-left:2px solid var(--accent); padding:14px 16px; font-size:15px; line-height:2.05}
.how b{font-family:var(--display); color:var(--ink)}
@media (max-width:420px){.step{grid-template-columns:54px 1fr} .step-no{font-size:25px}}

/* ── 図解 ── */
.fig{background:var(--surface-2); border:1px solid var(--line); padding:16px 14px; display:flex; flex-direction:column; gap:12px}
.fig svg{width:100%; height:auto; display:block}
.fig figcaption{font-size:14px; color:var(--ink-2); line-height:1.85; text-align:center}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:560px){.compare{grid-template-columns:1fr; gap:20px}}
.compare > div{display:flex; flex-direction:column; gap:8px; min-width:0}
.cap{font-family:var(--display); font-weight:700; font-size:14px; text-align:center; line-height:1.5}
.cap.bad{color:var(--signal)}
.cap.ok{color:var(--good)}

/* ── 習慣 ── */
.habits{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line)}
.habit{background:var(--surface); padding:22px 18px; display:flex; flex-direction:column; gap:14px}
.habit-h{display:flex; gap:14px; align-items:center}
.habit-h svg{flex:none; width:46px; height:46px}
.habit-h h3{font-weight:900; font-size:clamp(18px,4.8vw,21px)}
.habit p{font-size:15.5px; color:var(--ink-2); line-height:1.95}
.note{font-size:15px; background:var(--surface-2); padding:13px 15px; border-left:2px solid var(--signal); line-height:1.95; color:var(--ink-2)}
.note b{font-family:var(--display); color:var(--ink)}

.vpn{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line)}
.vpn-row{background:var(--surface-2); padding:13px 15px; display:flex; flex-direction:column; gap:4px}
.vpn-row b{font-family:var(--mono); font-size:17px; color:var(--accent); letter-spacing:.03em}
.vpn-row span{font-size:14px; color:var(--ink-2); line-height:1.85}
.label{font-family:var(--mono); font-size:14px; color:var(--ink-2); letter-spacing:.08em}

/* ── 追従バー ── */
.bar{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg); border-bottom:1px solid var(--line);
  padding:11px 0; margin-inline:-20px; padding-inline:20px;
}
.bar-name{font-family:var(--mono); font-size:14px; color:var(--accent); letter-spacing:.1em;
  text-decoration:none; white-space:nowrap}
.bar-toc{font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink);
  text-decoration:none; border:1px solid var(--line); background:var(--surface);
  padding:6px 14px; white-space:nowrap}

/* ── 目次 ── */
.toclist{list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line)}
.toclist a{
  background:var(--surface); display:grid; grid-template-columns:42px 1fr auto; gap:12px;
  align-items:center; padding:15px 16px; text-decoration:none; color:var(--ink); font-size:16px;
}
.toclist em{font-family:var(--mono); font-style:normal; font-size:15px; color:var(--accent)}
.toclist i{font-style:normal; color:var(--ink-2); font-size:17px}
.toclist a:hover{background:var(--surface-2)}
.toc-lead{font-size:15px; color:var(--ink-2); line-height:1.9}

/* ── 手口の流れ ── */
.flow{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line)}
.flow-step{background:var(--surface); padding:18px; display:grid; grid-template-columns:38px 1fr; gap:15px; align-items:start}
.flow-n{font-family:var(--mono); font-size:19px; color:var(--signal); border:1px solid var(--signal);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center}
.flow-step > div{min-width:0; display:flex; flex-direction:column; gap:7px}
.flow-step b{font-family:var(--display); font-weight:900; font-size:16.5px}
.flow-step span{font-size:15px; color:var(--ink-2); line-height:1.9}
.keys{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:4px}
.combo{display:inline-flex; gap:6px; align-items:center; white-space:nowrap}
.combo + .combo::before{content:"→"; font-family:var(--mono); color:var(--ink-2); margin-right:3px}
.key{font-family:var(--mono); font-size:15px; background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line); border-bottom-width:3px; padding:5px 11px; white-space:nowrap}
.plus{font-family:var(--mono); font-size:15px; color:var(--ink-2)}
.stop{border:2px solid var(--signal); background:var(--signal-soft); padding:20px 18px;
  display:flex; flex-direction:column; gap:9px}
.stop b{font-family:var(--display); font-weight:900; font-size:clamp(18px,4.8vw,22px); color:var(--signal)}
.stop p{font-size:15.5px; color:var(--ink); line-height:1.95}

/* ── 端末の設定 ── */
.dev{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line)}
.dev-row{background:var(--surface); padding:18px; display:flex; flex-direction:column; gap:7px}
.dev-row b{font-family:var(--display); font-weight:900; font-size:16.5px}
.dev-row span{font-size:15px; color:var(--ink-2); line-height:1.95}

/* ── 上級者向け ── */
.opt{border:1px dashed var(--accent); background:var(--surface); padding:22px 20px;
  display:flex; flex-direction:column; gap:15px}
.opt h3{font-weight:900; font-size:clamp(19px,5vw,23px)}
.opt p{font-size:15.5px; color:var(--ink-2); line-height:1.95}
.optlabel{font-family:var(--mono); font-size:14px; color:var(--accent); letter-spacing:.1em}

/* ── 確認ツール ── */
.tool{padding:22px 20px; display:flex; flex-direction:column; gap:16px}
.tool h3{font-weight:900; font-size:20px}
.tool p{font-size:15.5px; color:var(--ink-2); line-height:1.95}
.urlbox{background:var(--bg); border:1px dashed var(--accent); padding:15px 16px; display:flex; flex-direction:column; gap:6px}
.urlbox a{font-family:var(--mono); font-size:clamp(18px,5vw,24px); word-break:break-all;
  text-decoration:none; text-shadow:0 0 16px var(--glow)}
.urlbox span{font-family:var(--mono); font-size:13px; color:var(--ink-2); letter-spacing:.08em}
.caution{background:var(--signal-soft); border:1px solid var(--signal); padding:15px 17px;
  font-size:15px; line-height:1.95; color:var(--ink)}
.caution b{font-family:var(--display); color:var(--signal); display:block; margin-bottom:4px; font-size:16px}

/* ── やらなくていい ── */
.skip{background:var(--good-soft); border:1px solid var(--line); padding:20px; display:flex; flex-direction:column; gap:18px}
.skip-row{display:flex; gap:13px; align-items:flex-start}
.skip-row svg{flex:none; width:24px; height:24px; margin-top:6px}
.skip-row div{min-width:0}
.skip-row b{font-family:var(--display); font-weight:700; font-size:17px; display:block; color:var(--ink)}
.skip-row span{font-size:15px; color:var(--ink-2); line-height:1.9}

/* ── ニセモノ ── */
.mail{overflow:hidden}
.mail-tag{background:var(--signal-soft); color:var(--signal); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:14px; letter-spacing:.06em; padding:9px 15px}
.mail-body{padding:17px 16px 19px; display:flex; flex-direction:column; gap:11px}
.mail-from{color:var(--ink-2); font-family:var(--mono); font-size:14px; word-break:break-all}
.mail-sub{font-family:var(--display); font-weight:700; font-size:17px}
.mail-txt{color:var(--ink-2); font-size:15px; line-height:1.95}
.mail-link{color:var(--accent); font-family:var(--mono); font-size:14px; text-decoration:underline; word-break:break-all}
.flagwrap{display:flex; flex-direction:column; gap:13px}
.flag{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.9; color:var(--ink-2)}
.flag em{flex:none; background:var(--signal); color:var(--signal-ink); font-family:var(--mono);
  font-style:normal; font-size:14px; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center; margin-top:5px}

/* ── 年代別 ── */
.ages{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line)}
.age{background:var(--surface); padding:20px 18px; display:flex; flex-direction:column; gap:11px}
.age-h{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.age-h b{font-family:var(--display); font-weight:900; font-size:19px}
.age-h span{font-family:var(--mono); font-size:14px; color:var(--ink-2)}
.age ul{margin:0; padding-left:1.15em; font-size:15.5px; color:var(--ink-2); line-height:2}
.age li{margin-block:4px}
.age li::marker{color:var(--accent)}

/* ── チェックリスト ── */
.check{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line)}
.check li{background:var(--surface); padding:16px 18px; display:flex; gap:14px; align-items:center; font-size:16.5px}
.check{list-style:none; margin:0; padding:0}
.box{flex:none; width:24px; height:24px; border:2px solid var(--accent); box-shadow:0 0 12px var(--glow)}

/* ── 連絡先 ── */
.tel{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.tel div{background:var(--surface); padding:22px 16px; display:flex; flex-direction:column; gap:5px; min-width:0}
.tel b{font-family:var(--mono); font-size:clamp(30px,8vw,40px); color:var(--accent);
  font-variant-numeric:tabular-nums; line-height:1.15; text-shadow:0 0 18px var(--glow)}
.tel span{font-size:14px; color:var(--ink-2); line-height:1.8}
@media (max-width:460px){.tel{grid-template-columns:1fr}}

/* ── 結び ── */
.thesis{border:1px solid var(--accent); background:var(--accent-soft);
  padding:clamp(26px,6vw,38px); display:flex; flex-direction:column; gap:16px}
.thesis h2{font-weight:900; font-size:clamp(22px,5.6vw,30px); line-height:1.55; text-shadow:0 0 22px var(--glow)}
.thesis p{font-size:16px; line-height:2.1; color:var(--ink-2)}

footer{border-top:1px solid var(--line); padding-block:34px 48px; font-size:13.5px; color:var(--ink-2); line-height:2}
footer h4{font-family:var(--mono); font-size:15px; letter-spacing:.12em; color:var(--accent); margin:0 0 8px}
.srcs{display:flex; flex-direction:column; gap:6px; margin-top:4px}
.srcs a{word-break:break-all; color:var(--ink-2)}
.issuer{font-family:var(--mono); font-size:18px; color:var(--ink); margin-top:22px; letter-spacing:.08em}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}


/* ── standalone host additions ── */
html{height:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img{max-width:100%}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
.cap.sub{font-weight:500; font-size:13.5px}
.fine{margin-top:18px}

/* ── タブレット以上 ── */
@media (min-width:768px){
  body{padding-inline:32px}
  .bar{margin-inline:-32px; padding-inline:32px}
  .wrap{max-width:760px}
}

/* ── 目次メニュー ──
   JS を使わず :target で開閉する。全画面幅で同じ形にそろえる。 */
.bar-toc{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-width:7.4em; font-size:15px; line-height:1.6}
.bar-toc svg{width:18px; height:18px; flex:none}
.bar-close{display:none}
#menu:target ~ .bar .bar-open{display:none}
#menu:target ~ .bar .bar-close{display:inline-flex}
/* メニューはバーの下に敷く。バーは上に残り、同じ位置のボタンで閉じられる */
.menu{display:none; position:fixed; inset:0; z-index:15; overflow-y:auto;
  background:var(--bg); padding:calc(env(safe-area-inset-top,0px) + 84px) 20px 40px}
.menu:target{display:block}
.menu-in{max-width:760px; margin-inline:auto}
@media (min-width:768px){.menu{padding-inline:32px}}