/* 図の追加(g4)用のスタイル。色はサイト共通の変数と、T/S/D の機能色だけを使う */
.g4-chain{ display:flex; flex-wrap:wrap; align-items:stretch; gap:10px 0; }
.g4-node{ min-width:72px; padding:7px 12px 8px; text-align:center; border:1px solid var(--line2); border-top:3px solid var(--fn-x); border-radius:8px; background:var(--surface); }
.g4-node.t-T{ border-top-color:var(--fn-t); }
.g4-node.t-S{ border-top-color:var(--fn-s); }
.g4-node.t-D{ border-top-color:var(--fn-d); }
.g4-node.t-X{ border-top-color:var(--fn-x); }
.g4-node i{ display:block; font-style:normal; font-size:12px; color:var(--sub); line-height:1.4; }
.g4-node b{ display:block; font-size:17px; line-height:1.4; }
.g4-node .g4-fn{ display:block; margin-top:3px; }
.g4-node em{ display:block; margin-top:3px; font-style:normal; font-size:11.5px; color:var(--sub); line-height:1.5; }

.g4-fmap-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:10px 0; border-bottom:1px solid var(--line); }
.g4-fmap-row:first-child{ border-top:1px solid var(--line); }
.g4-fmap-h{ display:flex; align-items:baseline; gap:8px; flex:0 0 250px; }
.g4-fmap-h b{ font-size:14px; }
.g4-fmap-h span:last-child{ font-size:12.5px; color:var(--sub); }
.g4-fmap-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.g4-chip{ min-width:64px; padding:5px 10px; text-align:center; border:1px solid var(--line2); border-radius:8px; background:var(--surface); }
.g4-chip i{ display:block; font-style:normal; font-size:11.5px; color:var(--sub); line-height:1.4; }
.g4-chip b{ display:block; font-size:15px; line-height:1.4; }
.g4-fmap-row.t-T .g4-chip{ border-color:var(--fn-t); }
.g4-fmap-row.t-S .g4-chip{ border-color:var(--fn-s); }
.g4-fmap-row.t-D .g4-chip{ border-color:var(--fn-d); }

.g4-share-row{ padding:12px 0 14px; border-bottom:1px solid var(--line); }
.g4-share-row:first-child{ border-top:1px solid var(--line); }
.g4-sh-title{ display:flex; align-items:baseline; gap:6px; margin-bottom:8px; }
.g4-sh-title b{ font-size:16px; }
.g4-sh-title i{ font-style:normal; font-size:12px; color:var(--sub); margin-right:6px; }
.g4-sh-title span{ font-size:12.5px; color:var(--sub); margin-right:6px; }
.g4-sh-cols{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.g4-sh-col{ padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
.g4-sh-col.both{ background:var(--accent-bg); border-color:transparent; }
.g4-sh-col small{ display:block; margin-bottom:5px; font-size:11.5px; color:var(--sub); }
.g4-nchips{ display:flex; flex-wrap:wrap; gap:5px; min-height:24px; align-items:center; }
.g4-nchip{ display:inline-block; min-width:28px; padding:2px 7px; text-align:center; font-size:14px; font-weight:600; border:1px solid var(--line2); border-radius:6px; background:var(--surface); }
.g4-sh-col.both .g4-nchip{ border-color:var(--accent); }
.g4-none{ font-size:12.5px; color:var(--faint); }
.g4-sh-note{ margin-top:8px; font-size:13px; color:var(--sub); line-height:1.7; }

.g4-pivot{ max-width:560px; }
.g4-pv-label{ font-size:12.5px; font-weight:600; color:var(--sub); margin:2px 0 5px; }
.g4-pv-row{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.g4-pv-chip{ padding:5px 1px 4px; text-align:center; border:1px solid var(--line); border-radius:7px; background:var(--surface); min-width:0; }
.g4-pv-chip b{ display:block; font-size:13px; line-height:1.4; }
.g4-pv-chip i{ display:block; font-style:normal; font-size:10.5px; color:var(--sub); line-height:1.4; }
.g4-pv-chip.on{ border-color:var(--accent); background:var(--accent-bg); }
.g4-pv-links{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; height:16px; margin:1px 0; }
.g4-pv-links span{ display:block; width:1px; height:100%; margin:0 auto; }
.g4-pv-links span.on{ background:var(--accent); }
.g4-pv-count{ margin-top:8px; font-size:13px; color:var(--sub); }
.g4-pv-count b{ color:var(--text); }

.g4-staff{ width:100%; }
.g4-staff svg{ display:block; }

.g4-contours{ display:flex; flex-wrap:wrap; gap:10px 18px; }
.g4-cshape{ width:132px; }
.g4-cshape svg{ display:block; width:132px; height:58px; border-bottom:1px solid var(--line2); }
.g4-cshape b{ display:block; margin-top:5px; font-size:13.5px; }
.g4-cshape span{ display:block; font-size:12px; color:var(--sub); line-height:1.5; }
.g4-c-line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.g4-c-dot{ fill:var(--bg); stroke:var(--accent); stroke-width:1.6; }

@media (max-width:560px){
  .g4-fmap-h{ flex-basis:100%; }
  .g4-sh-cols{ gap:5px; }
  .g4-sh-col{ padding:6px 7px; }
  .g4-node{ min-width:60px; padding:6px 8px 7px; }
  .g4-node b{ font-size:15px; }
}

.fig[class*="fig-g4"] b, .g4-staff b{ background:none; }
.g4-pv-row + .g4-pv-label{ margin:6px 0 0; }