/* 文明のテックツリー 公開サイト共通スタイル
   色は全体図と共通。分野の色（--c）は情報（どの分野か）を表すときだけ使う。 */
:root{
  --paper:#ECEFEB; --sheet:#FAFBF9; --sheet-2:#F1F4F0; --ink:#1B2426; --muted:#5C6A6C; --rule:#C7CFCB; --rule-soft:#DDE3DF;
  --link:#2F4F8F;
  --info:#3A5BA0; --phys:#7B4FA0; --elec:#1F8A7C; --mech:#B85C2C; --mat:#8C7434; --life:#4F8A3C; --inst:#9A5570;
  --display:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --body:'Noto Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --measure:38em;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#131A1C; --sheet:#1C2427; --sheet-2:#232D30; --ink:#E7EBE9; --muted:#9BA7A7; --rule:#344240; --rule-soft:#283432;
    --link:#9DB4EA;
    --info:#7D9BE0; --phys:#B58BE0; --elec:#5CC4B6; --mech:#E88E5E; --mat:#C9B06A; --life:#8BC46F; --inst:#D48FAE;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.85;font-feature-settings:"palt" 0}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--info);outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.3;margin:0;text-wrap:balance}
.y,.yr,.cnt{font-variant-numeric:tabular-nums}

/* ── 上の帯 ───────────────── */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px 24px;flex-wrap:wrap;padding:10px max(20px,calc((100vw - 1120px)/2));background:color-mix(in srgb,var(--sheet) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.brand{font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:.02em}
.bar nav{display:flex;gap:4px 16px;flex-wrap:wrap;font-size:14px}
.bar nav a{color:var(--muted);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.bar nav a:hover{color:var(--ink)}
.bar nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.find{position:relative;margin-left:auto}
.find .q{width:220px;max-width:62vw;border:1px solid var(--rule);background:var(--sheet-2);color:var(--ink);border-radius:6px;padding:6px 10px;font:inherit;font-size:14px}
.hits{position:absolute;right:0;top:calc(100% + 4px);width:min(380px,92vw);max-height:60vh;overflow:auto;margin:0;padding:4px 0;list-style:none;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;box-shadow:0 10px 30px rgba(27,36,38,.14)}
.hits li a{display:flex;justify-content:space-between;gap:12px;padding:6px 12px;color:var(--ink);text-decoration:none;font-size:14px;border-left:3px solid var(--c)}
.hits li a small{color:var(--muted);white-space:nowrap}
.hits li[aria-selected="true"] a,.hits li a:hover{background:color-mix(in srgb,var(--c) 14%,var(--sheet))}
.hits .none{padding:6px 12px;color:var(--muted);font-size:13px}

main{max-width:1120px;margin:0 auto;padding:28px 20px 64px}

/* ── 項目へのリンク（共通） ───── */
.it{display:inline-flex;align-items:baseline;gap:8px;color:var(--ink);text-decoration:none;border-left:3px solid var(--c);padding:1px 0 1px 8px}
.it .nm{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 25%,transparent);text-underline-offset:3px}
.it:hover .nm{text-decoration-color:var(--ink)}
.it .y{font-size:12px;color:var(--muted);white-space:nowrap}
ul.links{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 20px}
ul.links li{min-width:0}
ul.links.era{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

.crumbs{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.crumbs a{color:var(--muted)}
.lead{color:var(--muted);max-width:var(--measure);margin:10px 0 0}

/* ── 個別ページ ────────────── */
.item-head{max-width:46em}
.item .dom{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13px;color:var(--c);font-weight:500}
.item .dom i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.kind{margin-left:6px;font-size:12px;color:var(--muted);border:1px solid var(--rule);border-radius:3px;padding:0 6px;font-weight:400}
.kind.k-product{border-style:dashed}
.kind.k-project{border-width:2px}
.item h1{font-size:clamp(30px,5.2vw,46px);font-weight:800;letter-spacing:.01em}
.item h1 .sub{display:block;font-size:.5em;font-weight:700;color:var(--muted);margin-top:6px;letter-spacing:.02em}
.ph{display:inline-block}
.lg .core .sub{display:block;font-size:13px;font-weight:500;opacity:.9}
.item .desc{font-size:17px;line-height:1.95;max-width:var(--measure);margin:16px 0 18px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin:0;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:14px;max-width:var(--measure)}
.facts dt{color:var(--muted);font-size:13px}
.facts dd{margin:0}
.facts .yr{font-family:var(--display);font-weight:700;font-size:17px}
.totree{display:flex;flex-wrap:wrap;gap:6px 20px;margin:14px 0 0;font-size:14px}

.stats{display:flex;flex-wrap:wrap;gap:16px 44px;margin:36px 0 8px;padding:20px 0 0;border-top:3px solid var(--c)}
.stats p{display:flex;align-items:baseline;gap:10px;margin:0;max-width:26em}
.stats p span{min-width:12em}
.stats b{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;color:var(--c);font-variant-numeric:tabular-nums}
.stats span{font-size:14px;line-height:1.6}
.stats small{color:var(--muted);font-size:12px}

section{margin-top:48px}
section > h2{font-size:24px;margin-bottom:6px}
.legend{font-size:12px;color:var(--muted);margin:0 0 16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ln{display:inline-block;width:26px;height:0;border-top:2px solid var(--muted);vertical-align:middle;margin-left:8px}
.ln:first-child{margin-left:0}
.ln.mv{border-top-style:dashed}
.ln.pr{border-top-style:dotted}

/* 直接のつながり：左の土台 → 中央 → 右の派生 */
.lg{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,240px) minmax(0,1fr);align-items:center}
.lg .side h3{font-family:var(--body);font-size:13px;font-weight:500;color:var(--muted);margin:0 0 8px}
.lg .side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.lg .up{padding-right:28px;border-right:2px solid var(--rule);text-align:right}
.lg .down{padding-left:28px;border-left:2px solid var(--rule)}
.lg .side li{position:relative}
.lg .side li a{display:inline-flex;flex-direction:column;align-items:flex-end;padding:4px 10px;background:var(--sheet);border:1px solid var(--rule-soft);border-right:3px solid var(--c);border-radius:4px;color:var(--ink);text-decoration:none;max-width:100%;text-align:right}
.lg .down li a{align-items:flex-start;text-align:left;border-right-width:1px;border-left:3px solid var(--c)}
.lg .side li a:hover{border-color:var(--c)}
.lg .side .nm{font-size:14px;line-height:1.4}
.lg .side .y{font-size:11px;color:var(--muted)}
.lg .side li::after{content:"";position:absolute;top:50%;width:28px;border-top:2px solid var(--rule)}
.lg .up li::after{right:-28px}
.lg .down li::after{left:-28px}
.lg .side li.mv::after{border-top-style:dashed}
.lg .side li.mv a{background:transparent;border-style:dashed;border-right-style:solid}
.lg .down li.mv a{border-right-style:dashed;border-left-style:solid}
.lg .side li.more::after,.lg .side li.none::after{display:none}
.lg .side li.more a,.lg .side li.none{font-size:13px;color:var(--muted)}
.lg .side li.more a{background:none;border:0;padding:4px 0}
.lg .side li.none{padding:4px 0}
.lg .core{position:relative;margin:0 0;padding:18px 16px;background:var(--c);color:#fff;border-radius:6px;text-align:center;display:flex;flex-direction:column;gap:4px}
.lg .core::before,.lg .core::after{content:"";position:absolute;top:50%;width:0;border-top:0}
.lg .core .nm{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.35}
.lg .core .y{font-size:13px;opacity:.9}
@media (prefers-color-scheme: dark){ .lg .core{color:#131A1C} }

/* ルーツ：古い方から一本の線でつなぐ */
.chain{list-style:none;margin:20px 0 0;padding:0;position:relative}
.chain::before{content:"";position:absolute;left:calc(7.5em + 5px);top:12px;bottom:12px;border-left:2px solid var(--rule)}
.chain li{position:relative;display:grid;grid-template-columns:7.5em 1fr;column-gap:26px;align-items:baseline;padding:3px 0}
.chain li::before{content:"";position:absolute;left:calc(7.5em + 1px);top:calc(.95em - 1px);width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--paper)}
.chain .y{text-align:right;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chain .nm{font-size:15px;color:var(--ink);text-decoration:none;line-height:1.5}
.chain a.nm:hover{text-decoration:underline}
.chain li.now .nm{font-family:var(--display);font-weight:800;font-size:20px}
.chain li.now::before{width:14px;height:14px;left:calc(7.5em - 1px);top:calc(.95em - 1px)}

.pn{margin-top:44px;padding-top:14px;border-top:1px solid var(--rule)}
.pn-h{font-size:13px;color:var(--muted);margin:0 0 8px}
.pn div{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.pn .nx{margin-left:auto;text-align:right}

.all .rel{margin-top:28px}
.rel h3{font-size:18px;display:flex;align-items:baseline;gap:10px}
.cnt{font-family:var(--body);font-weight:400;font-size:13px;color:var(--muted)}
.rel .note{font-size:13px;color:var(--muted);margin:2px 0 10px}

/* ── 一覧ページ ────────────── */
.index-page h1{font-size:clamp(28px,4.5vw,40px);font-weight:800}
.index-page h1.domh{color:var(--c);border-left:6px solid var(--c);padding-left:14px}
.index-page .row{margin-top:40px}
.index-page .row h2{font-size:21px;display:flex;align-items:baseline;gap:10px;padding-bottom:6px;margin-bottom:12px;border-bottom:1px solid var(--rule)}
.toc{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.toc .y{margin-left:5px;font-size:12px;color:var(--muted)}
.domlist,.eralist{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:18px}
.domlist li{border-left:4px solid var(--c);padding-left:14px}
.domlist a,.eralist a{display:flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--ink)}
.domlist .nm,.eralist .nm{font-family:var(--display);font-weight:700;font-size:22px}
.domlist a:hover .nm,.eralist a:hover .nm{text-decoration:underline}
.domlist .y,.eralist .y{font-size:13px;color:var(--muted)}
.domlist p{margin:4px 0 0;font-size:13px;color:var(--muted);max-width:60em}
.eralist{gap:10px}
.prose{max-width:var(--measure)}
.prose h2{font-size:22px;margin:36px 0 8px}
.prose p{margin:10px 0}
.kinds dt{font-weight:700;margin-top:14px}
.kinds dd{margin:2px 0 0;color:var(--muted)}

/* ── トップページ ──────────── */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:8px}
.hero-text{position:sticky;top:90px}
.hero h1{font-size:clamp(32px,5.4vw,58px);font-weight:800;line-height:1.22;letter-spacing:.005em}
.hero .lead{font-size:17px;color:var(--ink);margin-top:20px}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.btn{display:inline-block;padding:11px 20px;border-radius:6px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:700;font-size:15px}
.btn:hover{background:color-mix(in srgb,var(--ink) 85%,var(--info))}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--sheet)}
.nums{margin:22px 0 0;font-size:13px;color:var(--muted)}
.hero-chain{margin:0;font-size:14px}
.hero-chain li{padding:1px 0}
.hero-chain .nm{font-size:14px}
.hero-chain li.now .nm{font-size:24px}
.block{margin-top:72px}
.block > h2{font-size:26px;margin-bottom:18px}
.featured{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 28px}
.featured li{border-left:3px solid var(--c);padding:6px 0 6px 12px}
.featured a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.featured .nm{font-family:var(--display);font-weight:700;font-size:19px}
.featured a:hover .nm{text-decoration:underline}
.featured .y{font-size:12px;color:var(--muted)}
.domgrid{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.domgrid a{display:flex;align-items:baseline;gap:10px;padding:10px 16px;border:1.5px solid var(--c);border-radius:6px;text-decoration:none;color:var(--ink);background:color-mix(in srgb,var(--c) 7%,var(--sheet))}
.domgrid a:hover{background:color-mix(in srgb,var(--c) 18%,var(--sheet))}
.domgrid .nm{font-weight:700}
.domgrid .y{font-size:12px;color:var(--muted)}
.erabars{list-style:none;padding:0;margin:0;display:grid;gap:4px;max-width:760px}
.erabars a{display:grid;grid-template-columns:7.5em 1fr 5em;align-items:center;gap:14px;text-decoration:none;color:var(--ink);padding:3px 0}
.erabars .nm{font-family:var(--display);font-weight:700}
.erabars .meter{display:block;height:12px;width:var(--w);min-width:3px;background:var(--ink);opacity:.75;border-radius:2px}
.erabars a:hover .meter{opacity:1}
.erabars .y{font-size:13px;color:var(--muted);text-align:right}

/* 一度だけ：系譜の線が古い方から伸びる */
@media (prefers-reduced-motion: no-preference){
  .home .hero-chain::before{transform-origin:top;animation:grow 1.6s cubic-bezier(.3,.6,.2,1) both}
  .home .hero-chain li{animation:appear .35s ease-out both;animation-delay:calc(var(--k) * 32ms)}
  @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes appear{from{opacity:0}to{opacity:1}}
}

.foot{border-top:1px solid var(--rule);background:var(--sheet);padding:24px max(20px,calc((100vw - 1120px)/2)) 36px;font-size:13px;color:var(--muted)}
.foot p{margin:4px 0}
.foot a{color:var(--muted);margin-right:14px}
.foot .fine{font-size:12px;margin-top:10px}

/* ── スマホ ────────────────── */
@media (max-width: 760px){
  .bar{position:static}
  main{padding:20px 16px 48px}
  .bar{padding:8px 16px;gap:6px 14px}
  .find{margin-left:0;width:100%}
  .find .q{width:100%;max-width:none}
  .hits{left:0;right:auto;width:100%}
  .hero{grid-template-columns:1fr;gap:32px}
  .hero-text{position:static}
  .lg{grid-template-columns:1fr;gap:10px}
  .lg .up,.lg .down{border:0;padding:0;text-align:left}
  .lg .side li::after,.lg .core::before,.lg .core::after{display:none}
  .lg .up li a{align-items:flex-start;text-align:left;border-right-width:1px;border-left:3px solid var(--c)}
  .lg .up li.mv a{border-left-style:solid;border-right-style:dashed}
  .lg .core{margin:6px 0}
  .lg .core::after{display:block;content:"↓";position:static;border:0;width:auto;font-size:14px;opacity:.8}
  .lg .down h3::before{content:"↓ "}
  .stats b{font-size:36px}
  .chain::before{left:calc(5.6em + 5px)}
  .chain li{grid-template-columns:5.6em 1fr;column-gap:22px}
  .chain li::before{left:calc(5.6em + 1px)}
  .chain li.now::before{left:calc(5.6em - 1px)}
  .chain .y{font-size:11px;white-space:normal;line-height:1.3}
  .erabars a{grid-template-columns:6.5em 1fr 4.2em;gap:10px}
}
@media print{ .bar,.foot,.find{display:none} body{background:#fff} }
section,.crumbs{scroll-margin-top:84px}
@media (max-width: 760px){
  section,.crumbs{scroll-margin-top:12px}
  .lg .side li a{flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap;padding:3px 10px}
  .lg .side .nm{font-size:14px}
}

/* ── 本のリンク・応援 ───────── */
.books{margin-top:44px;padding:18px 20px;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;max-width:46em}
.books h2{font-size:19px;display:flex;align-items:baseline;gap:10px}
.books .pr{font-family:var(--body);font-weight:500;font-size:11px;color:var(--muted);border:1px solid var(--rule);border-radius:3px;padding:0 5px}
.books .note{font-size:13px;color:var(--muted);margin:6px 0 12px}
.books .shops{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.shop{display:inline-block;padding:9px 18px;border-radius:6px;border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;background:var(--paper)}
.shop:hover{background:var(--sheet-2)}
.support{margin-top:56px;padding:20px 0 0;border-top:1px solid var(--rule);max-width:46em}
.support p{margin:0 0 12px;font-size:15px}
.support b{font-weight:700}
.support-link{margin-left:0}