:root{
  --bg:#e8edf1; --ink:#222a33; --muted:#5d6b78; --line:#cdd6de;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI",sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mincho{ font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif; }
header{ padding:18px 24px 12px; }
h1{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:clamp(1.3rem,3.4vw,1.7rem); margin:0 0 4px; letter-spacing:.02em; }
.sub{ color:var(--muted); font-size:.9rem; margin:0 0 12px; }
.controls{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-bottom:10px; }
.themes{ display:flex; gap:7px; }
.themes button{ padding:6px 13px; border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; font-size:.83rem; font-family:inherit; color:var(--ink); }
.themes button.active{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }
.legend{ display:flex; flex-wrap:wrap; gap:12px; font-size:.78rem; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.hint{ font-size:.76rem; color:var(--muted); margin-left:auto; }

.orient{ display:flex; align-items:center; gap:6px; }
.orient .orient-cap{ font-size:.78rem; color:var(--muted); margin-right:2px; }
.orient button{ padding:6px 14px; border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; font-size:.83rem; font-family:inherit; color:var(--ink); }
.orient button:hover{ border-color:#9aa7b2; }
.orient button.active{ background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600; }

.timeline-wrap{ position:relative; }
.viewport{
  position:relative; overflow-x:auto; overflow-y:hidden; height:720px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#eef3f7,#e0e7ec); cursor:grab;
}
.viewport.grabbing{ cursor:grabbing; }
.viewport.vert{ overflow-x:auto; overflow-y:auto; }
.inner{ position:relative; height:700px; }

.lane-band{ position:absolute; left:0; border-bottom:1px solid rgba(120,140,160,.14); }
.phase-band{ position:absolute; top:0; border-left:1px dashed rgba(110,130,150,.45); }
.phase-label{ position:absolute; top:6px; font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:.92rem; color:#6f7e8a; white-space:nowrap; }

svg.links{ position:absolute; top:0; left:0; pointer-events:none; overflow:visible; }
svg.links path{ fill:none; stroke-width:1.6; opacity:.55; transition:opacity .15s,stroke-width .15s; }
svg.links path.cross{ stroke-dasharray:5 4; opacity:.5; }
svg.links .linklabel{ font-size:10px; fill:#6a7884; opacity:0; transition:opacity .15s; }
svg.links path.hot{ opacity:1; stroke-width:3; }
svg.links .linklabel.hot{ opacity:1; }

.card{
  position:absolute; width:188px; background:#fff; border:1px solid #d7dee4; border-left-width:4px;
  border-radius:9px; padding:8px 11px 9px; box-shadow:0 1px 3px rgba(40,60,80,.08);
  cursor:pointer; transition:opacity .18s, box-shadow .15s, transform .1s; z-index:2;
}
.card:hover{ box-shadow:0 4px 14px rgba(40,60,80,.18); transform:translateY(-1px); z-index:5; }
.card .yr{ font-size:.72rem; color:var(--muted); letter-spacing:.02em; }
.card .person{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-weight:700; font-size:.95rem; margin:1px 0 2px; }
.card .title{ font-size:.79rem; color:#33414d; line-height:1.36; }
.card .field{ display:inline-flex; align-items:center; gap:4px; font-size:.68rem; color:var(--muted); margin-top:5px; }
.card.big{ width:206px; box-shadow:0 2px 8px rgba(40,60,80,.16); }
.card.big .person{ font-size:1.05rem; }
.card.big::after{ content:"●"; position:absolute; top:-7px; right:-7px; font-size:.6rem; color:#c9a227; }
.card.active{ outline:2px solid var(--ink); outline-offset:1px; z-index:6; }
.card.related{ box-shadow:0 3px 12px rgba(40,60,80,.22); }
.card:focus-visible{ outline:3px solid #3b6fb0; outline-offset:2px; z-index:6; }
.themes button:focus-visible, .orient button:focus-visible, .panel .close:focus-visible, .conn:focus-visible{ outline:3px solid #3b6fb0; outline-offset:2px; }
.panel:focus{ outline:none; }

.axis-tick{ position:absolute; bottom:2px; font-size:.7rem; color:#8b98a3; transform:translateX(-50%); }

.panel{
  position:fixed; top:0; right:0; height:100%; width:320px; background:#fff;
  border-left:1px solid var(--line); box-shadow:-4px 0 20px rgba(40,60,80,.12);
  padding:20px 20px 28px; transform:translateX(110%); transition:transform .22s; overflow-y:auto; z-index:20;
}
.panel.open{ transform:translateX(0); }
.panel .close{ position:absolute; top:12px; right:14px; border:none; background:none; font-size:1.3rem; cursor:pointer; color:var(--muted); }
.panel .p-yr{ font-size:.82rem; color:var(--muted); }
.panel .p-person{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; font-size:1.3rem; font-weight:700; margin:2px 0 6px; }
.panel .p-title{ font-size:.96rem; color:#2b3742; margin-bottom:10px; }
.panel .p-field{ display:inline-block; font-size:.72rem; padding:2px 9px; border-radius:999px; color:#fff; margin-bottom:12px; }
.panel .p-desc{ font-size:.86rem; line-height:1.62; color:#37424d; margin-bottom:16px; }
.panel h4{ font-size:.76rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:14px 0 6px; border-bottom:1px solid #eef1f4; padding-bottom:4px; }
.panel .conn{ font-size:.84rem; padding:5px 0; cursor:pointer; color:#2b3742; }
.panel .conn:hover{ color:#3b6fb0; }
.panel .conn .rel{ color:var(--muted); font-size:.76rem; }
.panel #pRefs a{ color:#3b6fb0; font-size:.8rem; word-break:break-all; }
footer{ padding:12px 24px 26px; font-size:.76rem; color:var(--muted); max-width:920px; }

/* モーション控えめ設定を尊重（カード hover 変形・パネル/リンクの transition・スムーススクロールを無効化） */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .card:hover{ transform:none; }
}
footer b{ color:#46535f; }