/* 沿革（history.html）。d.css・journal.css の後に読む。2026-11-06
   単線結線図の言葉で組む：受電（引き込み）→ 幹線（送ると下へ伸びる水色の線）→ 接続点 ● と分岐の線と端子 ○ → 出来事。
   大きな節目は変圧器の記号（二つの円）、元号の変わり目は区分の印、終わりは灯り ⊗。地は方眼の製図用紙。
   動き：線は CSS の scroll() で伸びる（指の端末でも台本で動かさない。2026.11.04 の決まり）。台本は線の始めと終わりの位置を測って --a/--b に入れるだけ。
         節は線の先（画面の上から 60%）に届いたら灯り、文字は 0.18→1・36px 上がる・0.85 秒、1 行ずつ 0.07 秒。年の数字は 1 字ずつ小さく揺れながら立ち上がる。
         動きを減らす設定（端末・<html data-motion="reduce">）では、線は全部引いた形・節は全部灯った形で止める。 */
.hs{--nc:30px;--bx:22px;--pad:calc(var(--u) * 3)}
.hs .em{font-weight:inherit;color:var(--cta)}
.hs__hd .ar__t{grid-column:1/8}
.hs__hd .hs__lead{grid-column:1/8;grid-row:auto;align-self:start;font-size:var(--f3);line-height:calc(var(--u) * 1.2);color:var(--tx)}
.hs__lead br.sp{display:none}
.hs__hd .ar__big{top:auto;right:var(--gut);bottom:calc(var(--u) * 1.5);color:transparent;-webkit-text-stroke:1px rgba(12,116,180,.4);z-index:0}
@media (max-width:767px){.hs__lead br.sp{display:inline}.hs__hd .hs__lead{font-size:var(--f2);line-height:var(--l2)}}

/* ---------- 製図用紙の地 ---------- */
.hs__s{position:relative;margin-top:calc(var(--u) * 2);padding-block:calc(var(--u) * 3) calc(var(--u) * 4);background:
  linear-gradient(rgba(57,184,240,.07) 1px,transparent 1px) 0 0/var(--u) var(--u),
  linear-gradient(90deg,rgba(57,184,240,.07) 1px,transparent 1px) 0 0/var(--u) var(--u),var(--bg)}
.hs__ti{margin-bottom:calc(var(--u) * 2)}
.hs__h2{grid-column:4/13;display:flex;flex-direction:column;gap:6px;font:300 var(--f4)/var(--l4) var(--ja-l);letter-spacing:.02em;font-feature-settings:"palt"}
.hs__h2 [lang=en]{font-family:var(--en);font-weight:300;letter-spacing:.01em}
.hs__h2 .hs__en{font:500 12px/20px var(--en);letter-spacing:.24em;text-transform:uppercase;color:var(--tx2)}
.nw{white-space:nowrap}

/* ---------- 格子：計器は 1〜3 列、結線図は 4〜12 列 ---------- */
.hs__g{align-items:start}
.hs__wrap{grid-column:4/13;position:relative;padding-top:calc(var(--u) * 4)}

/* 受電（引き込み）の印：読み込むと上から引かれ、光の粒が一つ降りて幹線へ入る */
.hs__src{position:absolute;left:0;top:0;height:calc(var(--u) * 4 + var(--nc));display:flex;gap:14px}
.hs__src svg{width:44px;height:100%;overflow:visible}
.src__ln,.src__ar{fill:none;stroke:var(--ink);stroke-width:1px;vector-effect:non-scaling-stroke}
.src__ar{stroke:var(--acc);stroke-width:1.5px}
.src__sp{fill:#fff;filter:drop-shadow(0 0 4px var(--acc)) drop-shadow(0 0 10px var(--acc));opacity:0}
.src__l{align-self:flex-start;margin-top:2px;font:500 11px/16px var(--en);letter-spacing:.2em;text-transform:uppercase;color:var(--tx2)}
.src__l span{display:block;font:400 12px/20px var(--ja);letter-spacing:.12em;color:var(--tx)}

/* 幹線：灰の下線の上に、水色の線が伸びる。先に光の粒 */
.hs__bus{position:absolute;left:calc(var(--bx) - 1px);top:var(--bt,150px);height:var(--bh,0px);width:2px;pointer-events:none}
.hs__bus::before{content:"";position:absolute;left:.5px;top:0;bottom:0;width:1px;background:var(--w2)}
.hs__cur{position:absolute;inset:0;background:var(--acc);transform-origin:50% 0;box-shadow:0 0 6px rgba(57,184,240,.55)}
.hs__tip{position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--acc),0 0 14px 4px rgba(57,184,240,.75);transform:translate3d(0,var(--bh,0px),0)}

/* ---------- 一年の節 ---------- */
.hs__tl{position:relative}
.ev{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr);column-gap:calc(var(--u) * 2);padding:0 0 calc(var(--u) * 3) var(--pad)}
.ev__nd{position:absolute;left:0;top:0;width:var(--pad);height:calc(var(--nc) * 2)}
.nd{position:absolute;left:calc(var(--bx) - 22px);top:calc(var(--nc) - 22px);width:44px;height:44px;overflow:visible}
.nd__d{fill:var(--bg);stroke:var(--w2);stroke-width:1.5px;transition:fill .5s var(--soft),stroke .5s var(--soft)}
.nd__c{fill:var(--bg);stroke:var(--w2);stroke-width:1.5px;transition:stroke .6s var(--soft),fill .6s var(--soft)}
.nd--tr .nd__c+.nd__c{fill:none}
.ev__br{position:absolute;left:calc(var(--bx) + 6px);top:calc(var(--nc) - .5px);width:calc(var(--pad) - var(--bx) - 22px);height:1px;background:var(--acc);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--out) .05s}
.ev--big .ev__br{left:calc(var(--bx) + 11px);width:calc(var(--pad) - var(--bx) - 27px)}
.ev__tm{position:absolute;left:calc(var(--pad) - 16px);top:calc(var(--nc) - 4px);width:8px;height:8px;border:1px solid var(--w2);border-radius:50%;background:var(--bg);transition:border-color .4s var(--soft) .45s,background .4s var(--soft) .45s}
.ev.on .nd__d{fill:var(--acc);stroke:var(--acc)}
.ev.on .nd__c{stroke:var(--acc)}
.ev.on .nd--tr .nd__c:first-child{fill:rgba(57,184,240,.14)}
.ev.on .ev__br{transform:scaleX(1)}
.ev.on .ev__tm{border-color:var(--acc);background:#fff}
/* 灯った瞬間の輪（一回だけ） */
.ev__nd::after{content:"";position:absolute;left:calc(var(--bx) - 14px);top:calc(var(--nc) - 14px);width:28px;height:28px;border-radius:50%;border:1px solid var(--acc);opacity:0;pointer-events:none}
.ev.ring .ev__nd::after{animation:ring 1.1s var(--out) both}
@keyframes ring{0%{opacity:.8;transform:scale(.35)}100%{opacity:0;transform:scale(1.9)}}

/* 元号の区分：幹線を横切る二本の短い線と、元号の名 */
.ev__era{position:absolute;left:var(--pad);top:calc(var(--u) * -1.75);margin:0;display:flex;gap:12px;align-items:baseline;font:400 12px/20px var(--ja);letter-spacing:.2em;color:var(--tx)}
.ev__era span{font:500 11px/20px var(--en);letter-spacing:.24em;text-transform:uppercase;color:var(--tx2)}
.ev__era::before{content:"";position:absolute;left:calc(var(--bx) - var(--pad) - 9px);top:7px;width:18px;height:6px;border-block:1px solid var(--ink)}

/* 見出し：年（英字の数）・二文字・英字・和暦 */
.ev__h{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:20px;font-weight:400}
.ev__y{display:inline-flex;font:300 var(--f4)/calc(var(--nc) * 2) var(--en);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.dg{display:inline-block}
.ev__tg{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:14px}
.ev__tg b{font:500 var(--f2)/var(--l2) var(--ja);letter-spacing:.2em}
.ev__tg [lang=en]{font:500 11px/var(--l2) var(--en);letter-spacing:.2em;text-transform:uppercase;color:var(--tx2)}
.ev__wk{font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--tx2)}
.ev.on .ev__tg b{color:var(--cta);transition:color .6s var(--soft) .3s}

/* 出来事 */
.ev__e{text-wrap:pretty;margin-top:calc(var(--u) / 2);font:500 18px/30px var(--ja);letter-spacing:.06em;color:var(--ink)}
.ev__e+.ev__e{text-wrap:pretty;margin-top:calc(var(--u) / 2);padding-top:calc(var(--u) / 2);border-top:1px solid var(--line)}
.ev__s{margin-top:calc(var(--u) / 2);display:flex;align-items:baseline;gap:6px;font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.08em;color:var(--tx)}
.ev__s span{margin-right:6px}
.ev__s b{font:400 var(--f3)/1 var(--en);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.ev__ph{margin-top:var(--u);width:min(100%,280px)}
.ev__ph .ph{aspect-ratio:427/304}

/* 世の中：細い点線の脇の線（弱電）に、流行と世の中の動き */
.ev__soc{align-self:start;margin-top:calc(var(--nc) * 2 + var(--u) / 2);padding-left:20px;border-left:1px dashed var(--w2);font:400 var(--f1)/var(--l1) var(--ja);letter-spacing:.06em;color:var(--tx2)}
.ev__k{font:500 var(--f1)/var(--l1) var(--ja);letter-spacing:.12em;color:var(--tx)}
.ev__w+.ev__k{margin-top:12px}
.ev__w{margin-top:4px}

/* ---------- 計器：今の年・和暦・人数と、30 の回路の札 ---------- */
.hs__mt{grid-column:1/4;position:sticky;top:calc(72px + var(--u) * 2);padding-top:calc(var(--u) * 4)}
.mt__era{display:flex;gap:12px;align-items:baseline;font:400 12px/20px var(--ja);letter-spacing:.2em;color:var(--tx)}
.mt__era span{font:500 11px/20px var(--en);letter-spacing:.24em;text-transform:uppercase;color:var(--tx2)}
.mt__y{display:flex;margin-top:6px;font:200 var(--f6)/1 var(--en);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.md{display:inline-block}
.mt__w{display:flex;gap:16px;align-items:baseline;margin-top:14px;font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.1em;color:var(--tx2)}
.mt__tg{font:500 var(--f2)/var(--l2) var(--ja);letter-spacing:.2em;color:var(--cta)}
.mt__n{display:flex;align-items:baseline;gap:8px;margin-top:var(--u);padding-top:calc(var(--u) / 2);border-top:1px solid var(--line);font:400 var(--f1)/var(--l2) var(--ja);letter-spacing:.1em;color:var(--tx)}
.mt__k{margin-right:auto}
.mt__n b{display:inline-flex;font:300 var(--f4)/1 var(--en);letter-spacing:-.01em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.mt__tk{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:14px}
.mt__tk i{position:relative;height:16px;border:1px solid var(--w1);border-radius:2px;background:var(--paper)}
.mt__tk i::after{content:"";position:absolute;inset:2px;border-radius:1px;background:var(--acc);opacity:clamp(0,calc(var(--n) - var(--i)),1);transition:opacity .5s var(--soft) calc(var(--i) * .03s)}

/* ---------- 終わり：灯り ⊗ が灯って 70 年 ---------- */
.ev--end{grid-template-columns:minmax(0,1fr);padding-bottom:0}
.ev--end .ev__nd{height:64px}
.lp{position:absolute;left:calc(var(--bx) - 32px);top:calc(var(--nc) - 32px);width:64px;height:64px;overflow:visible}
.lp__g{fill:rgba(57,184,240,.35);opacity:0;filter:blur(8px);transition:opacity 1.2s var(--soft) .2s}
.lp__c{fill:var(--bg);stroke:var(--w2);stroke-width:1.5px;transition:fill .8s var(--soft),stroke .8s var(--soft)}
.lp__x{fill:none;stroke:var(--w2);stroke-width:1.5px;transition:stroke .8s var(--soft)}
.ev--end.on .lp__g{opacity:1}
.ev--end.on .lp__c{fill:var(--acc);stroke:var(--acc)}
.ev--end.on .lp__x{stroke:#fff}
.hs__fin{padding-top:4px}
.hs__70{display:flex;align-items:flex-end;gap:18px;color:var(--ink)}
.hs__70n{display:inline-flex;font:200 calc(var(--f6) * 1.6)/.8 var(--en);letter-spacing:-.04em;font-variant-numeric:lining-nums}
.hs__70u{padding-bottom:6px;font:500 12px/20px var(--en);letter-spacing:.2em;text-transform:uppercase;color:var(--tx2)}
.hs__h3{margin-top:calc(var(--u) * 2);font:400 32px/1.6 var(--min);letter-spacing:.04em;font-feature-settings:"palt"}
.hs__st{margin-top:var(--u);max-width:44em;font:400 var(--f2)/var(--l2) var(--ja);color:var(--tx)}

/* ---------- 出方（台本が .js を付けた時だけ。読み込めない時は全部見える） ---------- */
.js .ev .r{opacity:.18;transform:translate3d(0,36px,0);transition:opacity .85s var(--soft),transform .85s var(--out);transition-delay:calc(var(--k,0) * .07s + .25s)}
.js .ev.seen .r{opacity:1;transform:none}
.js .ev .dg{opacity:.18;transform:translate3d(0,.4em,0)}
.js .ev.seen .dg{animation:dgIn 1.5s var(--out) calc(var(--i) * .07s + .1s) both}
@keyframes dgIn{0%{opacity:.18;transform:translate3d(0,.4em,0) rotate(-5deg)}45%{opacity:1;transform:translate3d(0,-.07em,0) rotate(2deg)}70%{transform:translate3d(0,.025em,0) rotate(-.8deg)}100%{opacity:1;transform:none}}
.md.in{animation:mdIn 1.2s var(--out) calc(var(--i) * .06s) both}
@keyframes mdIn{0%{opacity:0;transform:translate3d(0,.45em,0) rotate(-4deg);filter:blur(6px)}50%{opacity:1;transform:translate3d(0,-.05em,0) rotate(1.5deg);filter:none}75%{transform:translate3d(0,.02em,0) rotate(-.6deg)}100%{opacity:1;transform:none}}
.js .hs__src .src__ln{stroke-dasharray:160;stroke-dashoffset:160}
.js .hs__src .src__ar{opacity:0;transform:translateY(-8px);transition:opacity .8s var(--soft) 1.6s,transform .8s var(--out) 1.6s}
.js .hs__src .src__l{opacity:0;transition:opacity 1s var(--soft) 1.2s}
.hs__src.in .src__ln{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s cubic-bezier(.45,0,.25,1) .2s}
.hs__src.in .src__ar{opacity:1;transform:none}
.hs__src.in .src__l{opacity:1}
.hs__src.in .src__sp{animation:spark 1.6s cubic-bezier(.5,0,.3,1) 2.2s both}
@keyframes spark{0%{opacity:0;transform:translateY(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(150px)}}
.js .hs__fin .dg{opacity:0}
.js .ev--end.seen .hs__fin .dg{animation:dgIn 1.8s var(--out) calc(var(--i) * .12s + .3s) both}

/* 線を送りで伸ばす（scroll() の分かる端末）。--a・--b は台本が測る。分からない端末：PC は台本、指の端末は全部引いた形 */
@supports (animation-timeline:scroll()){
  .js .hs__cur{animation:hsGrow linear both;animation-timeline:scroll(root block);animation-range:var(--a,0px) var(--b,1px)}
  .js .hs__tip{animation:hsTip linear both;animation-timeline:scroll(root block);animation-range:var(--a,0px) var(--b,1px)}
}
@keyframes hsGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hsTip{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--bh,0px),0)}}
.hs--full .hs__cur{transform:none!important;animation:none!important}
.hs--full .hs__tip{display:none}

/* ---------- 幅ごと ---------- */
@media (max-width:1279px){
  .ev{grid-template-columns:minmax(0,1fr);row-gap:calc(var(--u) / 2)}
  .ev__soc{margin-top:calc(var(--u) / 2)}
}
@media (max-width:1023px){
  /* 計器は上の帯に（頭の下に貼り付く） */
  .hs__mt{grid-column:1/-1;z-index:5;top:72px;margin-inline:calc(var(--gut) * -1);padding:10px var(--gut) 12px;display:grid;grid-template-columns:auto auto 1fr auto;column-gap:16px;align-items:baseline;background:rgba(241,244,247,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .mt__era{grid-row:1;grid-column:1;flex-direction:column;gap:0;line-height:16px}
  .mt__y{grid-row:1;grid-column:2;margin:0;font-size:var(--f4);font-weight:300}
  .mt__w{grid-row:1;grid-column:3;margin:0;flex-direction:column;gap:0;line-height:20px}
  .mt__w .mt__tg{line-height:20px}
  .mt__n{grid-row:1;grid-column:4;margin:0;padding:0;border:0}
  .mt__k{display:none}
  .mt__n b{font-size:var(--f3)}
  .mt__tk{grid-column:1/-1;grid-template-columns:repeat(30,1fr);gap:3px;margin-top:8px}
  .mt__tk i{height:4px;border:0;background:var(--w0)}
  .mt__tk i::after{inset:0}
  .hs__wrap{grid-column:1/-1;margin-top:calc(var(--u) * 2)}
  .hs__h2{grid-column:1/-1}
}
@media (max-width:767px){
  .hs{--nc:22.5px;--bx:12px;--pad:calc(var(--u) * 2)}
  .hs__mt{top:60px}
  .mt__era{display:none}
  .mt__y{font-size:28px}
  .hs__s{padding-block:calc(var(--u) * 2) calc(var(--u) * 3)}
  .hs__hd{padding-bottom:var(--u)}
  .hs__s{margin-top:var(--u)}
  .hs__src{gap:10px}
  .ev{padding-bottom:calc(var(--u) * 2.5)}
  .ev__br{width:calc(var(--pad) - var(--bx) - 18px)}
  .ev__tm{left:calc(var(--pad) - 13px);width:7px;height:7px;top:calc(var(--nc) - 3.5px)}
  .ev--big .ev__br{width:calc(var(--pad) - var(--bx) - 22px)}
  .nd--tr{transform:scale(.8)}
  .ev__h{column-gap:14px}
  .ev__tg{column-gap:10px}
  .ev__e{font-size:16px;line-height:28px;letter-spacing:.04em}
  .ev__ph{width:min(100%,240px)}
  .ev__era::before{left:calc(var(--bx) - var(--pad) - 9px)}
  .lp{transform:scale(.75)}
  .hs__70n{font-size:96px}
  .hs__h3{font-size:22px;line-height:1.7}
  .hs__st br.pc{display:none}
}
@media (min-width:768px){.hs__st br.pc{display:inline}}

/* ---------- 動きを減らす設定：何も動かさない（色の変化だけ 150ms まで）。data-motion の写しは reduce_copy.py が末尾に足す ---------- */
@media (prefers-reduced-motion:reduce){
  .ev .r,.ev .dg,.md,.hs__fin .dg{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;filter:none!important}
  .hs__cur{animation:none!important;transform:none!important}
  .hs__tip,.src__sp,.ev__nd::after{display:none!important}
  .hs__src .src__ln{stroke-dashoffset:0!important;transition:none!important}
  .hs__src .src__ar,.hs__src .src__l{opacity:1!important;transform:none!important;transition:none!important}
  .ev__br{transform:none!important;transition:none!important}
  .nd__d,.nd__c,.ev__tm,.lp__g,.lp__c,.lp__x,.mt__tk i::after,.ev__tg b{transition-duration:.15s!important;transition-delay:0s!important}
}

/* ===== 動きを減らす設定の写し（kit tools/reduce_copy.py が作る。ここは直さない） ===== */
html[data-motion=reduce] .ev .r,html[data-motion=reduce] .ev .dg,html[data-motion=reduce] .md,html[data-motion=reduce] .hs__fin .dg{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;filter:none!important}
html[data-motion=reduce] .hs__cur{animation:none!important;transform:none!important}
html[data-motion=reduce] .hs__tip,html[data-motion=reduce] .src__sp,html[data-motion=reduce] .ev__nd::after{display:none!important}
html[data-motion=reduce] .hs__src .src__ln{stroke-dashoffset:0!important;transition:none!important}
html[data-motion=reduce] .hs__src .src__ar,html[data-motion=reduce] .hs__src .src__l{opacity:1!important;transform:none!important;transition:none!important}
html[data-motion=reduce] .ev__br{transform:none!important;transition:none!important}
html[data-motion=reduce] .nd__d,html[data-motion=reduce] .nd__c,html[data-motion=reduce] .ev__tm,html[data-motion=reduce] .lp__g,html[data-motion=reduce] .lp__c,html[data-motion=reduce] .lp__x,html[data-motion=reduce] .mt__tk i::after,html[data-motion=reduce] .ev__tg b{transition-duration:.15s!important;transition-delay:0s!important}
/* ===== 写しここまで ===== */

/* 11/06 夜 カヲル：年の出来事の横の絵（白地のミニチュア＝ev__vg、動く窓＝ev__mv）と、70 年の結びの「これから」の窓（hs__mv） */
.ev__vg{margin-top:var(--u);width:min(100%,300px)}
.ev__mv{margin-top:var(--u);width:min(100%,440px)}
.ev__mv .ph,.hs__mv .ph{aspect-ratio:16/9}
.ev__mv figcaption,.hs__mv figcaption{margin-top:6px}
.hs__mv{margin-top:calc(var(--u) * 2);width:min(100%,760px)}
@media (max-width:767px){.ev__vg{width:min(100%,240px)}.ev__mv,.hs__mv{width:100%}}