:root{
  --bg:#0f1720;--bg2:#141f2b;--card:#182635;--line:#26384a;
  --tx:#e6edf3;--tx2:#a9b8c6;--tx3:#7a8b9b;
  --ac:#38bdf8;--ac2:#7dd3fc;--warn:#f87171;--warn-bg:rgba(248,113,113,.10);
  --ok:#4ade80;--ok-bg:rgba(74,222,128,.10);--note:#fbbf24;--note-bg:rgba(251,191,36,.10);
  --uni:#a78bfa;--uni-bg:rgba(167,139,250,.12);
  --res:#f472b6;--res-bg:rgba(244,114,182,.12);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f9fc;--bg2:#eef3f8;--card:#ffffff;--line:#d9e2ec;
    --tx:#14212e;--tx2:#3d4f61;--tx3:#63748a;
    --ac:#0369a1;--ac2:#0369a1;
    --warn:#b91c1c;--warn-bg:rgba(185,28,28,.07);
    --ok:#15803d;--ok-bg:rgba(21,128,61,.07);
    --note:#a16207;--note-bg:rgba(161,98,7,.08);
    --uni:#6d28d9;--uni-bg:rgba(109,40,217,.08);
    --res:#be185d;--res-bg:rgba(190,24,93,.08);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;line-height:1.85;font-size:16.5px;-webkit-font-smoothing:antialiased}
a{color:var(--ac2)}
.site-nav{border-bottom:1px solid var(--line);background:var(--bg2)}
.site-nav .in{max-width:900px;margin:0 auto;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.02em;text-decoration:none;color:var(--tx);font-size:1.05rem}
.brand small{display:block;font-weight:500;color:var(--tx3);font-size:.75rem;letter-spacing:.08em}
.crumbs{font-size:.8rem;color:var(--tx3)}
main{max-width:760px;margin:0 auto;padding:36px 20px 80px}
.eyebrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{font-size:.74rem;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--tx2);background:var(--card)}
.chip--danger{border-color:var(--warn);color:var(--warn);background:var(--warn-bg);font-weight:700}
h1{font-size:clamp(1.55rem,4.2vw,2.15rem);line-height:1.35;letter-spacing:.01em;margin-bottom:14px}
.lead{color:var(--tx2);font-size:1.05rem;margin-bottom:26px}
.meta{font-size:.8rem;color:var(--tx3);display:flex;gap:16px;flex-wrap:wrap;margin-bottom:34px;padding-bottom:18px;border-bottom:1px solid var(--line)}
h2{font-size:1.32rem;margin:52px 0 16px;padding-left:14px;border-left:4px solid var(--ac);line-height:1.4}
h3{font-size:1.06rem;margin:30px 0 10px;color:var(--ac2)}
p{margin-bottom:1.1em}
ul,ol{margin:0 0 1.2em 1.4em}
li{margin-bottom:.4em}
strong{color:var(--tx)}
.scene{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:0 0 30px;font-size:1.02rem}
.scene .t{font-size:.78rem;letter-spacing:.12em;color:var(--ac);margin-bottom:10px;font-weight:700}
.big{font-size:1.12rem;font-weight:800;line-height:1.8;margin:20px 0;padding:16px 18px;border-left:4px solid var(--ac);background:var(--bg2);border-radius:0 10px 10px 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.two>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.two .n{font-size:1.7rem;font-weight:900;color:var(--ac);line-height:1;margin-bottom:8px}
.two .h{font-weight:800;margin-bottom:8px;line-height:1.5}
.two p{margin:0;font-size:.95rem;color:var(--tx2)}
.callout{border-radius:12px;padding:16px 18px;margin:22px 0;border:1px solid;font-size:.97rem}
.callout .h{font-weight:800;margin-bottom:8px;display:flex;gap:8px;align-items:center}
.callout--danger{background:var(--warn-bg);border-color:var(--warn)}
.callout--danger .h{color:var(--warn)}
.callout--note{background:var(--note-bg);border-color:var(--note)}
.callout--note .h{color:var(--note)}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.kids{background:var(--ok-bg);border:2px solid var(--ok);border-radius:14px;padding:20px 22px;margin:24px 0}
.kids .t{font-weight:900;color:var(--ok);margin-bottom:12px}
.kids ol{margin-bottom:0;font-size:1.05rem;font-weight:800}
.kids li{margin-bottom:.9em}
.kids li:last-child{margin-bottom:0}
.kids li span{display:block;font-weight:400;font-size:.92rem;color:var(--tx2);margin-top:3px}
.exp{background:var(--note-bg);border:1px solid var(--note);border-radius:12px;padding:16px 18px;margin:22px 0}
.exp .t{font-weight:800;color:var(--note);margin-bottom:8px}
.exp ol{margin-bottom:8px}
/* 動く図（fig--live）: 図の下につまみを置く。スクリプトが無くても初期値の図として成立させる */
.fig-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 4px 2px;font-size:.92rem;color:var(--tx2)}
.fig-ctl label{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--tx)}
.fig-ctl input[type=range]{width:min(260px,60vw);accent-color:var(--ac)}
.fig-ctl output{min-width:2.6em;text-align:right;font-variant-numeric:tabular-nums}
/* 3Dの図: ボタンを押したときだけ three.js を読み込む（約600KB。押さない読者には負担ゼロ） */
.fig3d__btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:inherit;font-weight:700;font-size:1rem;
  padding:12px 20px;border-radius:999px;border:1px solid var(--ac);background:var(--card);color:var(--ac2);cursor:pointer}
.fig3d__btn:hover{background:var(--ac);color:#fff}
.fig3d__sun{position:absolute;right:12px;top:12px;font-size:.82rem;font-weight:700;color:#ffd166;pointer-events:none}
.fig3d__info{margin:10px 4px 0;padding:8px 12px;border-radius:8px;background:var(--bg2);font-size:.92rem;font-weight:700;line-height:1.6;color:var(--tx)}
.fig3d__inset{position:absolute;right:12px;bottom:calc(34% + 14px);font-size:.78rem;color:#cddbe8;pointer-events:none}
.fig-ctl__hint{font-size:.82rem;color:var(--tx3)}
figure{margin:26px 0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 16px 12px;overflow:hidden}
figure svg{width:100%;height:auto;display:block;border-radius:8px}
figcaption{font-size:.84rem;color:var(--tx3);margin-top:10px;line-height:1.6}
.calc{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:18px 0;font-size:.95rem}
.calc .t{font-size:.78rem;letter-spacing:.1em;color:var(--tx3);margin-bottom:8px}
.f{font-family:var(--mono);font-size:.9em;background:var(--bg2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--ac2)}
.calc .f{background:var(--card)}
.calc table{width:100%;border-collapse:collapse;margin-top:8px}
.calc td{padding:7px 4px;border-top:1px solid var(--line);vertical-align:top}
.calc td:first-child{color:var(--tx2);width:46%}
.calc td:last-child{font-family:var(--mono);font-size:.88em}
.deep{margin-top:44px;border-top:1px solid var(--line);padding-top:6px}
.deep>summary{cursor:pointer;font-weight:800;font-size:1.06rem;padding:16px 0;color:var(--ac2);list-style:none}
.deep>summary::before{content:"▶";font-size:.75rem;margin-right:8px}
.deep[open]>summary::before{content:"▼"}
.deep>summary::-webkit-details-marker{display:none}
.deep>summary .sub{display:block;font-weight:400;font-size:.85rem;color:var(--tx3);margin-top:2px}
.lv{display:inline-block;font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:6px;margin-right:8px;vertical-align:2px;white-space:nowrap;letter-spacing:.02em}
.lv--jhs{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok)}
.lv--hs{background:rgba(56,189,248,.12);color:var(--ac);border:1px solid var(--ac)}
.lv--hsx{background:var(--note-bg);color:var(--note);border:1px solid var(--note)}
.lv--uni{background:var(--uni-bg);color:var(--uni);border:1px solid var(--uni)}
.lv--res{background:var(--res-bg);color:var(--res);border:1px solid var(--res)}
.lv-legend{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 0 26px;font-size:.88rem}
.lv-legend .t{font-weight:800;margin-bottom:8px;font-size:.92rem}
.lv-legend ul{list-style:none;margin:0}
.lv-legend li{margin-bottom:.45em;color:var(--tx2)}
.lv-legend li:last-child{margin-bottom:0}
.map{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem}
.map th,.map td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.map th{background:var(--bg2);font-size:.82rem;color:var(--tx2)}
.map td:first-child{white-space:nowrap}
.refs{font-size:.83rem;color:var(--tx3);margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
.refs li{margin-bottom:.45em}
.disc{font-size:.8rem;color:var(--tx3);margin-top:24px;line-height:1.7;padding-top:16px;border-top:1px solid var(--line)}
.foot{border-top:1px solid var(--line);color:var(--tx3);font-size:.8rem;text-align:center;padding:26px 20px}
@media (max-width:560px){
  body{font-size:15.5px}main{padding:26px 16px 60px}h2{font-size:1.18rem}
  .two{grid-template-columns:1fr}
  .map td:first-child{white-space:normal}
}

.rel{margin:44px 0 8px;padding-top:20px;border-top:1px solid var(--line)}
.rel__h{font-size:1.02rem;font-weight:800;margin-bottom:14px}
.rel__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.rel__card{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none;color:inherit;transition:border-color .15s}
.rel__card:hover{border-color:var(--ac)}
.rel__cat{font-size:.68rem;font-weight:800;letter-spacing:.06em;margin-bottom:6px;color:var(--tx3)}
.rel__t{font-size:.94rem;font-weight:700;line-height:1.5}
.rel__all{display:inline-block;margin-top:14px;font-size:.9rem}

/* ---- アプリモード（ホーム画面に追加）2026-08-31 ---- */
.am-nav-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.am-nav-btn{appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--tx2);border-radius:999px;padding:6px 13px;font-size:.8rem;font-weight:700;white-space:nowrap}
.am-nav-btn:hover{border-color:var(--ac)}
.am-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.am-box{background:var(--card);border:1px solid var(--line);border-radius:16px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto;padding:22px}
.am-box h2{font-size:1.05rem;margin:0 0 8px}
.am-lead{font-size:.85rem;color:var(--tx2);margin-bottom:10px;line-height:1.6}
.am-step{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-size:.88rem}
.am-no{flex:0 0 22px;height:22px;border-radius:50%;background:var(--ac);color:var(--bg);font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.am-big{display:block;width:100%;padding:13px;margin-top:6px;border:none;border-radius:12px;background:var(--ac);color:var(--bg);font-size:.92rem;font-weight:800;cursor:pointer}
.am-close{display:block;width:100%;padding:10px;margin-top:14px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--tx2);font-size:.82rem;cursor:pointer}
.am-goal-mock{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:10px;padding:22px;border-radius:14px;background:linear-gradient(160deg,#3b5f86,#1c2e42)}
.am-goal-icon{width:64px;height:64px;border-radius:16px;display:block;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.am-goal-label{color:#fff;font-size:.78rem;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.4)}
@media (max-width:560px){
  .am-nav-btn{font-size:.76rem;padding:5px 11px}
}

/* ---- メール購読フォーム 2026-09-03 ---- */
.sub-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:40px 0 24px}
.sub-card__h{font-size:1.02rem;font-weight:800;margin-bottom:6px}
.sub-card__d{font-size:.88rem;color:var(--tx2);margin:0 0 16px;line-height:1.6}
.sub-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sub-email{flex:1 1 220px;min-width:0;box-sizing:border-box;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--tx);font-size:.92rem}
.sub-email:focus{outline:2px solid var(--ac);outline-offset:1px}
.sub-freq{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--tx2)}
.sub-freq label{display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.sub-btn{appearance:none;-webkit-appearance:none;font:inherit;cursor:pointer;border:none;border-radius:10px;background:var(--ac);color:var(--bg);padding:10px 20px;font-size:.9rem;font-weight:800}
.sub-btn:disabled{opacity:.6;cursor:default}
.sub-msg{font-size:.82rem;margin:10px 0 0;min-height:1.2em}
.sub-msg--ok{color:#4ade80}
.sub-msg--err{color:var(--warn,#f59e0b)}
@media (max-width:560px){
  .sub-form{flex-direction:column;align-items:stretch}
  .sub-email{flex:1 1 auto}
  .sub-btn{width:100%}
}

/* ---------------------------------------------------------------- 言語切替
   ナビゲーション内に置く。site-nav .in は flex なので、order で末尾に送る
   （挿入位置は build_seo.py 側の都合で brand より前になるため）。
   狭い画面では flex-wrap で自然に次の行へ落ちる。 */
.langsw{order:3;display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:.78rem}
.langsw__l{color:var(--tx3);margin-right:4px;letter-spacing:.04em}
.langsw__i{padding:3px 9px;border-radius:999px;border:1px solid var(--line);
  color:var(--tx2);background:var(--card);text-decoration:none;white-space:nowrap;
  transition:border-color .15s,color .15s}
a.langsw__i:hover{border-color:var(--ac);color:var(--ac2)}
a.langsw__i:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.langsw__i[aria-current="true"]{border-color:var(--ac);color:var(--tx);
  background:var(--bg2);font-weight:700;cursor:default}
@media(max-width:520px){
  .langsw{width:100%;justify-content:flex-start;margin-top:2px}
}

/* 言語ごとの本文フォント。既定のスタックは日本語書体が先頭に来ているため、
   欧文・繁体字のページでは字面が揃わない。lang 属性で切り替える。 */
html[lang="en"] body,html[lang="fr"] body{
  font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif}
html[lang="zh-Hant"] body{
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",
  "Hiragino Sans CNS",system-ui,sans-serif}

/* 翻訳版の一覧に出る「訳し終えた分だけ載せています」の断り書き */
.idx-partial{background:var(--note-bg);border:1px solid var(--note);border-radius:12px;
  padding:12px 16px;margin:0 0 20px;font-size:.88rem;color:var(--tx2)}
.idx-partial a{color:var(--ac2)}

/* ---------------------------------------------------------------- 記事の読み上げ
   端末内蔵の音声で本文を読み上げる（read-aloud.js）。
   本文の導入（.meta）の直後に出るので、読み始める前に気づける位置。 */
.ra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;margin:0 0 30px}
.ra.is-on{border-color:var(--ac)}
.ra--file{display:block}
.ra__cap{font-size:.9rem;font-weight:700;color:var(--tx2)}
.ra--file audio{display:block;width:100%;height:40px}
.ra__now{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--bg2,rgba(0,0,0,.04));font-size:.95rem;line-height:1.6;color:var(--tx)}
.ra--dock{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:900;border-radius:14px 14px 0 0;
  padding:8px 14px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.ra--dock .ra__cap{font-size:.8rem}
.ra--dock .ra__now,.ra--dock .ra__cap{display:none}
.ra--dock{padding-top:6px}
.ra--dock audio{height:36px;margin-top:2px}
.ra-seekable{cursor:pointer}
.ra-seekable:hover{outline:2px dashed var(--line);outline-offset:3px;border-radius:4px}
.ra__play{font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;
  background:var(--bg2);color:var(--tx);border:1px solid var(--line);
  border-radius:999px;padding:7px 16px;transition:border-color .15s,color .15s}
.ra__play:hover{border-color:var(--ac);color:var(--ac2)}
.ra.is-on .ra__play{border-color:var(--ac);color:var(--ac2)}
.ra__stop{font:inherit;font-size:.8rem;cursor:pointer;background:transparent;
  color:var(--tx3);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.ra__stop:hover{color:var(--warn);border-color:var(--warn)}
.ra__rate{font:inherit;font-size:.8rem;background:var(--bg2);color:var(--tx2);
  border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.ra__st{font-size:.76rem;color:var(--tx3);margin-left:auto;white-space:nowrap}
.ra__play:focus-visible,.ra__stop:focus-visible,.ra__rate:focus-visible{
  outline:2px solid var(--ac);outline-offset:2px}

/* 読み上げ中の箇所。色だけに頼らず、左の線でも示す。 */
.ra-now{background:var(--ok-bg);box-shadow:-10px 0 0 var(--ok),10px 0 0 var(--ok-bg);
  border-radius:2px}
@media(prefers-reduced-motion:reduce){
  .ra-now{transition:none}
}
@media(max-width:520px){
  .ra{padding:9px 12px}
  .ra__play{padding:7px 12px;font-size:.82rem}
  .ra__st{margin-left:0;width:100%}
}
.ra__voice{font:inherit;font-size:.8rem;background:var(--bg2);color:var(--tx2);
  border:1px solid var(--line);border-radius:8px;padding:5px 8px;max-width:190px}
.ra__voice:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* 音質改善ガイド（読み上げバーの小さなリンクから開く） */
.ra__help{font:inherit;font-size:.74rem;background:none;border:none;cursor:pointer;
  color:var(--tx3);text-decoration:underline;text-underline-offset:3px;padding:4px 2px}
.ra__help:hover{color:var(--ac2)}
.ra__help:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:4px}
.ra-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:20px}
.ra-ov__box{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;max-width:430px;width:100%;max-height:86vh;overflow:auto}
.ra-ov__h{font-weight:800;font-size:1.02rem;margin-bottom:10px;color:var(--tx)}
.ra-ov__now{font-size:.8rem;color:var(--tx3);margin:0 0 14px}
.ra-ov__pf{font-size:.76rem;color:var(--ac2);font-weight:700;letter-spacing:.04em;
  margin-bottom:8px}
.ra-ov__steps{margin:0 0 14px;padding-left:1.3em;font-size:.88rem;color:var(--tx2)}
.ra-ov__steps li{margin:0 0 7px;line-height:1.7}
.ra-ov__note{font-size:.78rem;color:var(--tx3);margin:0 0 18px;line-height:1.7}
.ra-ov__close{font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;width:100%;
  background:var(--bg2);color:var(--tx);border:1px solid var(--line);
  border-radius:999px;padding:10px}
.ra-ov__close:hover{border-color:var(--ac);color:var(--ac2)}