/* 攻略スライドの見た目（種目共通・deck.js と対）。

   **白地のビジネス資料**として作る。灰色の台紙に白い「紙」を1枚置き、
   紙の上に章名・タイトル・本文・フッタを載せる（Google スライドの体裁）。
   アプリ本体（frontend/index.html）はフェルト緑の暗い配色だが、
   **資料は読み物なので配色を分ける**。行き来はヘッダのリンクで示す。 */
:root{
  --bg:#eef1f5;                       /* 台紙 */
  --paper:#ffffff;
  --ink:#16233a; --ink2:#47566e; --ink3:#8a97ab;
  --line:#dde3ec; --line2:#eef2f7;
  --brand:#1f4e79;                    /* 見出しのネイビー */
  --brand2:#2f7ac8;                   /* 差し色のブルー */
  --tint:#eaf2fb;                     /* 表のヘッダ・強調の淡い塗り */
  --tint2:#f6f9fd;
  --pos:#1c7a4d; --neg:#c0392b; --warn:#a4720a;
  --oop:#b4661a;                      /* OOP はオレンジ、IP はブルーで固定 */
  --ip:#2f7ac8;
  --ink-black:#1D1D1B; --ink-red:#CE141F; --cardborder:#9aa5b1;
  --bar:56px;                         /* ヘッダの高さ */
  --rail:268px;                       /* 右の目次の幅 */
  --pad:60px;                         /* 紙の左右の余白 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",
              "Yu Gothic",Meiryo,sans-serif;
  -webkit-text-size-adjust:100%;
  overflow:hidden;                    /* スクロールするのはスライドの中だけ */
  font-size:17px;
}
a{color:var(--brand2)}
button{font:inherit;color:inherit;cursor:pointer}

/* ---------- ヘッダ ---------- */
.appbar{
  position:fixed;top:0;left:0;right:0;height:var(--bar);z-index:30;
  display:flex;align-items:center;gap:12px;padding:0 16px;
  background:#fff;border-bottom:1px solid var(--line);
}
.brand{
  display:flex;align-items:baseline;gap:8px;text-decoration:none;flex:none;
  padding-right:12px;border-right:1px solid var(--line);height:26px;
}
.brand .mark{font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--brand)}
.brand .crumb{font-size:.75rem;color:var(--ink3)}
.brand:hover .crumb{color:var(--brand2)}
.dtitle{font-size:.95rem;font-weight:700;white-space:nowrap;color:var(--ink)}
.chap{
  font-size:.72rem;color:var(--brand);background:var(--tint);
  border:1px solid #d3e3f5;border-radius:3px;padding:.22em .7em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:34vw;
}
.sp{flex:1}
.count{font-size:.8rem;color:var(--ink3);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.count b{color:var(--ink);font-size:.95rem}
.count i{font-style:normal;margin:0 .25em;color:var(--line)}
.btn{
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:.4em .9em;font-size:.78rem;color:var(--ink2);flex:none;
}
.btn:hover{border-color:var(--brand2);color:var(--brand2)}
.navbtns{display:flex;gap:6px;flex:none}
.nav{
  width:32px;height:32px;border-radius:4px;background:#fff;
  border:1px solid var(--line);color:var(--ink2);font-size:1.1rem;line-height:1;
  display:grid;place-items:center;padding:0;
}
.nav:hover{border-color:var(--brand2);color:var(--brand2)}
.nav:disabled{opacity:.35;cursor:default;border-color:var(--line);color:var(--ink3)}

.progress{position:fixed;top:calc(var(--bar) - 2px);left:0;right:0;height:2px;
  background:transparent;z-index:31}
.progress i{display:block;height:100%;background:var(--brand2);width:0;
  transition:width .18s}

/* ---------- 台紙とスライド ---------- */
#deck{position:fixed;top:var(--bar);left:0;right:0;bottom:0;background:var(--bg);
  transition:right .16s}
body.hasrail #deck{right:var(--rail)}
.slide{display:none;height:100%;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain}
.slide.on{display:block}

/* 1枚の「紙」。**短いスライドでも1枚ぶんの高さを保つ** */
.paper{
  position:relative;background:var(--paper);
  width:min(1160px,calc(100% - 40px));margin:20px auto;
  min-height:calc(100% - 40px);
  padding:52px var(--pad) 74px;
  display:flex;flex-direction:column;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,35,60,.06),0 10px 28px rgba(20,35,60,.07);
}
/* 章名（右上の小さいラベル）とフッタ。**JS が data-* を入れる** */
.paper::before{
  content:attr(data-chap);position:absolute;top:20px;right:var(--pad);
  font-size:.78rem;letter-spacing:.14em;color:var(--ink3);
}
/* 紙のフッタ。**左に資料名、右にページ番号**（JS が組み立てる） */
.pfoot{
  position:absolute;left:var(--pad);right:var(--pad);bottom:20px;
  display:flex;justify-content:space-between;gap:16px;
  padding-top:9px;border-top:1px solid var(--line2);
  font-size:.78rem;color:var(--ink3);font-variant-numeric:tabular-nums;
}
.pfoot b{color:var(--ink2);font-weight:700}
/* 紙の中身。**常に上ぞろえ。**
   上下中央にすると、スライドごとに見出しの高さが変わって落ち着かない
   （2026-08-23 の指摘）。空くのは下だけにする。
   1枚に収まらない分は deck.js が少しだけ縮める（MIN_SCALE まで）。 */
.pbody{width:100%}

h2{
  font-size:2rem;font-weight:700;color:var(--brand);line-height:1.3;
  margin:0 0 14px;padding:0 0 .6em;position:relative;
}
h2::after{content:"";position:absolute;left:0;bottom:0;width:76px;height:4px;
  background:var(--brand2)}
h3{font-size:1.1rem;margin:26px 0 10px;color:var(--brand);font-weight:700;
  padding-left:12px;border-left:4px solid #b9d3ee}
h3:first-child{margin-top:0}
.lead{color:var(--ink2);font-size:1.08rem;line-height:1.85;margin:0 0 22px}
p{line-height:1.8;font-size:1rem;margin:.6em 0;color:var(--ink)}
ul,ol{line-height:1.85;font-size:1rem;padding-left:1.35em;margin:.6em 0}
li+li{margin-top:.3em}
li::marker{color:var(--ink3)}
b,strong{color:var(--brand);font-weight:700}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--tint);border:1px solid #dbe8f6;border-radius:3px;
  padding:.08em .4em;color:var(--brand)}

/* 表紙・裏表紙 */
.cover{display:grid;place-items:center;text-align:center;
  min-height:calc(100vh - 240px)}
.cover .kicker{color:var(--brand2);letter-spacing:.24em;font-size:.85rem;font-weight:700}
.cover h1{font-size:clamp(2rem,5vw,3.1rem);margin:.3em 0 .5em;line-height:1.3;
  color:var(--brand);font-weight:800}
.cover .sub{color:var(--ink2);font-size:1.05rem;line-height:2}
.cover .hint{margin-top:30px;color:var(--ink3);font-size:.84rem}

/* ---------- 箱 ---------- */
.box{background:var(--tint2);border:1px solid var(--line);border-radius:3px;
  padding:18px 22px;margin:14px 0}
.box.key{border-left:3px solid var(--brand2);background:var(--tint)}
.box.warn{border-left:3px solid var(--warn);background:#fdf8ec}
.box.bad{border-left:3px solid var(--neg);background:#fdf3f2}
.box.good{border-left:3px solid var(--pos);background:#f1f9f4}
.box .lbl{font-size:.76rem;letter-spacing:.12em;color:var(--ink3);
  display:block;margin-bottom:8px;text-transform:uppercase}
.box p:first-of-type{margin-top:0}
.box p:last-child,.box ul:last-child,.box ol:last-child{margin-bottom:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2 .box,.grid3 .box{margin:0}
/* **min-width:0 は必須。** 既定（auto）だと中の表の最小幅に列が押し広げられ、
   1fr 1fr を無視して紙の外へはみ出す */
.grid2 > *,.grid3 > *,.ooip > *{min-width:0}

/* OOP / IP は**左右で色を固定する**（読み違えると全部逆になる） */
.ooip{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ooip .box{margin:0;background:#fff}
.ooip .oop{border-top:3px solid var(--oop);border-left:1px solid var(--line)}
.ooip .ip{border-top:3px solid var(--ip);border-left:1px solid var(--line)}
.ooip h4{margin:0 0 10px;font-size:1.02rem}
.ooip .oop h4{color:var(--oop)}
.ooip .ip h4{color:var(--ip)}

/* ---------- 表 ---------- */
table.t{width:100%;border-collapse:collapse;font-size:.94rem;margin:12px 0;
  background:#fff}
table.t th,table.t td{border-bottom:1px solid var(--line);padding:.55em .7em;
  text-align:right;font-variant-numeric:tabular-nums;vertical-align:middle;
  /* **日本語を単語の途中で折らない。** 「人数 / ベット」が
     「人数 / ベ」「ト」に割れていた。ハイフンでの分割（7-max → 7- / max）
     もこれで止まる */
  word-break:keep-all;overflow-wrap:normal}
.tscroll table.t th,.tscroll table.t td{white-space:nowrap}
table.t th{background:var(--tint);color:var(--brand);font-weight:700;
  font-size:.82rem;border-bottom:1px solid #cfe0f2;letter-spacing:.02em}
/* **見出し列に最小幅を持たせる。** 等分に近い幅を取られると短い見出しが
   折れる（「人数 / ベット」が「人数 / ベ」「ト」に割れていた）。
   `nowrap` にはしない — 見出しが26文字ある表もあり、横に溢れるため。
   最小幅なら短い見出しは1行に収まり、長い見出しは普通に折り返す */
table.t td:first-child,table.t th:first-child{text-align:left;
  white-space:normal;min-width:8em}
/* 折ってほしくない短い語（`7-max` のようにハイフンで割れるもの）に付ける */
.nb{white-space:nowrap}
table.t tbody tr:nth-child(even) td{background:var(--tint2)}
table.t tbody tr:hover td{background:var(--tint)}
table.t td.hi{color:var(--brand);font-weight:700}
/* セルの背景に伸びる棒。**表をそのままグラフにする**ための仕掛けで、
   値は deck.js が linear-gradient の位置で入れる */
table.t td.bar{position:relative;z-index:0}
table.t td.dim{color:var(--ink3)}
table.t td.pos{color:var(--pos)}
table.t td.neg{color:var(--neg)}
.tscroll{overflow-x:auto;margin:10px 0;border:1px solid var(--line)}
.tscroll table.t{margin:0;min-width:460px;border:0}

/* ---------- 棒グラフ（自前・ライブラリ無し） ---------- */
.bars{display:flex;flex-direction:column;gap:7px;margin:14px 0}
/* 名前の列は中身に合わせて伸ばす。80px 固定だと長い見出しが折れる */
/* **値の欄も中身に合わせる。** 72px 固定だと「79.9 : 32.8」のような
   2つ組の値が2行に折れる */
.bars .row{display:grid;
  grid-template-columns:minmax(80px,max-content) 1fr minmax(72px,max-content);
  align-items:center;gap:12px}
.bars .nm{font-size:.9rem;color:var(--ink2)}
.bars .tr{background:var(--line2);border-radius:2px;height:20px;overflow:hidden;
  display:flex}
.bars .fl{height:100%}
.bars .vl{font-size:.9rem;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--ink);font-weight:700;white-space:nowrap}
.seg0{background:#12395e}      /* パット */
.seg1{background:#1f4e79}      /* 1枚引き */
.seg2{background:#2f7ac8}      /* 2枚引き */
.seg3{background:#72a9de}      /* 3枚引き */
.seg4{background:#a9cbea}      /* 4枚引き */
.seg5{background:#d6e6f5}      /* 5枚引き */
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:.8rem;color:var(--ink2);
  margin:8px 0 0}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:5px;vertical-align:-1px}

/* ---------- カード（docs/ui-cards.md と同じ比率） ---------- */
.hand{display:inline-flex;align-items:flex-end;vertical-align:middle;
  margin:2px 8px 2px 0}
.card{
  --w:44px;position:relative;box-sizing:border-box;
  width:var(--w);height:calc(var(--w) * 66 / 50);
  background:#fff;border:max(1px,calc(var(--w) * .02)) solid var(--cardborder);
  border-radius:calc(var(--w) * .08);color:var(--ink-black);
  font-variant-emoji:text;flex:0 0 auto;
  box-shadow:0 1px 2px rgba(20,35,60,.13);
}
.card.h,.card.d{color:var(--ink-red)}
.card > span{position:absolute;display:block;line-height:1}
.card .rk{left:8%;top:4%;font-size:calc(var(--w) * .46);font-weight:800;
  font-family:system-ui,-apple-system,sans-serif}
.card .st{left:8%;top:46%;font-size:calc(var(--w) * .38);
  font-family:"Hiragino Sans","Yu Gothic","Noto Sans Symbols 2",system-ui,sans-serif}
.card-back{
  --w:44px;box-sizing:border-box;flex:0 0 auto;
  width:var(--w);height:calc(var(--w) * 66 / 50);
  border:max(1px,calc(var(--w) * .02)) solid var(--cardborder);
  border-radius:calc(var(--w) * .08);
  background:repeating-linear-gradient(45deg,#8fa6bd 0,#8fa6bd 3px,#7c93aa 3px,#7c93aa 6px);
  box-shadow:0 1px 2px rgba(20,35,60,.13);
}
.hand .card + .card,.hand .card + .card-back,
.hand .card-back + .card-back{margin-left:calc(var(--w) * -.55)}
.hand.sm{--w:30px}
.hand.sm .card,.hand.sm .card-back{--w:30px}
.handrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:10px 0}
/* 図や表のセルに添える小さい説明。**表の中でも使う**ので単独のクラスにする */
.cap{font-size:.88rem;color:var(--ink2)}

/* ---------- 席の並び（ポジションの図） ---------- */
.seats{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:14px 0}
.seat{
  border:1px solid var(--line);border-top:3px solid var(--brand2);
  background:#fff;padding:10px 6px;text-align:center;
}
.seat b{display:block;font-size:.95rem;color:var(--brand)}
.seat span{display:block;font-size:.72rem;color:var(--ink3);margin-top:4px;
  line-height:1.5}
.seat.blind{border-top-color:var(--warn);background:#fdf8ec}
.seat.ip{border-top-color:var(--ip);background:var(--tint)}
.seatnote{display:flex;gap:18px;flex-wrap:wrap;font-size:.8rem;color:var(--ink2);
  margin-top:4px}
.seatnote b{color:var(--brand)}
.arrow{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink2);
  margin:6px 0 0}
.arrow i{flex:1;height:2px;background:linear-gradient(90deg,var(--brand2),#cfe0f2);
  font-style:normal}

/* ---------- 手の強さ（カード + 表記） ---------- */
.low{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  white-space:nowrap}
.low b{color:var(--brand);font-weight:700;font-size:.9rem}
.low .sfx{color:var(--ink2);font-size:.85rem}
table.t .low{justify-content:flex-end}
table.t td:first-child .low{justify-content:flex-start}

/* ---------- 交換枚数（裏向きカードで示す） ---------- */
.draws{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}
.draws .n{font-size:.85rem;color:var(--ink2);white-space:nowrap}
.draws .pat{font-size:.85rem;color:var(--brand);font-weight:700;
  border:1px solid var(--brand2);background:var(--tint);border-radius:3px;
  padding:.15em .6em}

/* ---------- 進行の帯 ---------- */
.flow{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:10px 0 18px}
.flow span{font-size:.8rem;padding:.4em .85em;border-radius:3px;
  background:var(--tint2);border:1px solid var(--line);color:var(--ink3);
  white-space:nowrap}
.flow span.dr{background:#fff;border-style:dashed}
.flow span.now{background:var(--brand);border-color:var(--brand);color:#fff;
  font-weight:700}
.flow em{font-style:normal;font-size:.8rem;opacity:.75;margin-left:.3em}

/* ---------- 目次（右のレール） ----------
   **body に付ける状態クラスは要素のクラスと別名にする。**
   `body.rail` にしたら `.rail{display:none}` が body 自身にも当たり、
   ページが丸ごと消えた（2026-08-23）。状態は `hasrail`。
   常に出しておく。**いま何章のどこを読んでいるか**が分かる方が、
   46枚を行き来するときに速い。狭い画面では上に重ねる。 */
.rail{
  position:fixed;top:var(--bar);right:0;bottom:0;width:var(--rail);z-index:24;
  background:#fff;border-left:1px solid var(--line);overflow-y:auto;
  overscroll-behavior:contain;display:none;
}
body.hasrail .rail{display:block}
.rail .wrap{padding:16px 14px 40px}
.rail h3{color:var(--brand);font-size:.76rem;letter-spacing:.1em;margin:16px 0 6px;
  border-left:0;padding:0 0 5px;border-bottom:1px solid var(--line2)}
.rail h3:first-of-type{margin-top:0}
/* 2層目（章）。部の下にぶら下げる */
.rail h4{font-size:.72rem;color:var(--ink2);margin:12px 0 5px;font-weight:700;
  padding-left:2px}
.rail h3 + h4{margin-top:6px}
.rail ol{list-style:none;padding:0;margin:0;display:block}
.rail li{margin:0}
.rail button,.rail ol a{
  width:100%;text-align:left;background:transparent;border:0;border-radius:3px;
  padding:.45em .55em;font-size:.82rem;color:var(--ink2);line-height:1.45;
  display:flex;gap:8px;align-items:baseline;
}
.rail button:hover,.rail ol a:hover{background:var(--tint2);color:var(--ink)}
.rail button.now,.rail ol a.now{background:var(--tint);color:var(--brand);font-weight:700;
  box-shadow:inset 2px 0 0 var(--brand2)}
.rail button i,.rail ol a i{color:var(--ink3);font-style:normal;font-size:.68rem;
  min-width:1.6em;font-variant-numeric:tabular-nums;flex:none}

/* ---------- 下のページャ（狭い画面と、手元で送るとき用） ---------- */
.pager{position:fixed;right:20px;bottom:20px;z-index:26;display:flex;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px;
  box-shadow:0 4px 14px rgba(20,35,60,.12);transition:right .16s}
body.hasrail .pager{right:calc(var(--rail) + 20px)}
.pager .nav{width:38px;height:38px;border:0;background:transparent}
.pager .nav:hover{background:var(--tint)}

/* 1枚に収まらないスライドで「下に続く」ことを示す。
   紙が画面より高いことに気づかないと、切れていると誤解される */
.more{
  position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:24;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.3em 1em;font-size:.7rem;color:var(--ink2);
  box-shadow:0 3px 10px rgba(20,35,60,.12);display:none;
}
.more.on{display:block}
body.hasrail .more{left:calc(50% - var(--rail) / 2)}

.foot{margin-top:22px;padding-top:10px;border-top:1px solid var(--line2);
  color:var(--ink3);font-size:.82rem;line-height:1.75}
.tscroll + .foot,.bars + .foot{margin-top:8px;border-top:0}

/* ---------- 狭い画面 ---------- */
/* 目次を出すと紙が細くなる。1180px を切ったら**重ねて**出す */
@media (max-width:1180px){
  body.hasrail #deck{right:0}
  body.hasrail .pager{right:20px}
  body.hasrail .more{left:50%}
  .rail{box-shadow:-6px 0 20px rgba(20,35,60,.12);z-index:28}
}
@media (max-width:820px){
  :root{--rail:min(300px,86vw)}
  /* ---- 狭い画面では**横スクロールを出さない**。
         表は「1行 = 1ブロック」に縦積みして、左に見出し・右に値を置く ---- */
  .tscroll{overflow-x:visible;border:0}
  .tscroll table.t{min-width:0;border:1px solid var(--line)}
  table.t.stack thead{display:none}
  table.t.stack tr{display:block;border:1px solid var(--line);border-radius:3px;
    margin-bottom:10px;background:#fff;overflow:hidden}
  table.t.stack tbody tr:nth-child(even) td{background:transparent}
  table.t.stack td{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    border:0;border-bottom:1px solid var(--line2);
    text-align:right;white-space:normal;padding:.5em .7em;
  }
  table.t.stack td:last-child{border-bottom:0}
  table.t.stack td::before{
    content:attr(data-label);color:var(--ink3);font-size:.8em;font-weight:400;
    text-align:left;flex:0 0 42%;
  }
  table.t.stack td:first-child{
    background:var(--tint);font-weight:700;color:var(--brand);
    justify-content:flex-start;
  }
  table.t.stack td:first-child::before{display:none}
  /* 見出しの無い表（前提の一覧など）は折り返すだけでよい */
  table.t th,table.t td{white-space:normal}
  /* 席の並びは4列で折り返す */
  .seats{grid-template-columns:repeat(4,1fr)}
  :root{--pad:22px}
  .paper{width:calc(100% - 20px);margin:10px auto;min-height:calc(100% - 20px);
    padding:38px var(--pad) 58px}
  h2{font-size:1.2rem;padding-right:0}
  .paper::before{position:static;display:block;margin-bottom:8px}
  .grid2,.grid3,.ooip{grid-template-columns:1fr}
  .dtitle,.chap{display:none}
  /* 狭い画面。名前と値は中身ぶんだけ取り、棒に残りを回す */
  .bars .row{grid-template-columns:minmax(48px,max-content) 1fr max-content;
    gap:8px}
  .bars .nm,.bars .vl{font-size:.8rem}
}

/* ---------- 印刷（PDF 化）。**1スライド = 1ページ** ---------- */
@media print{
  @page{size:A4 landscape;margin:10mm}
  body{background:#fff;overflow:visible;font-size:11px}
  .appbar,.progress,.pager,.rail,.more{display:none !important}
  #deck{position:static}
  .slide{display:block !important;height:auto;overflow:visible}
  .paper{width:100%;margin:0;min-height:auto;border:0;box-shadow:none;
    padding:0 0 24px;page-break-after:always}
  .pfoot{position:static;margin-top:16px}
  .cover{min-height:auto;padding:60px 0}
  .box,table.t th,table.t td{border-color:#ccc}
}

/* 線グラフ（最終ベットの EV）。**印刷でも読めるよう線を太めに** */
.chart{width:100%;height:auto;max-width:680px;display:block;margin:6px auto 2px}
/* 横軸に 37 区分を並べるグラフ。**680px だと札の名前が潰れる** */
.chart.wide{max-width:100%}
.chart .ax{font-size:11px;fill:#666;font-family:inherit}

/* スターティングの段（S / A / B / C / D）。**色で序列を出す。** */
.tier{display:inline-block;min-width:1.6em;text-align:center;
  padding:.12em .3em;border-radius:3px;font-size:.8rem;line-height:1.5}
.tierS{background:#12395e;color:#fff}
.tierA{background:#2f7ac8;color:#fff}
.tierB{background:#cfe2f6;color:#12395e}
.tierC{background:#f0f0f0;color:#47566e}
.tierD{background:#fbe3de;color:#8c3a26}

/* 章ページのサーバ側リンク（前 / 目次 / 次）。**検索が辿るための導線。**
   JS が動くと全章を描き直すので、この列は最初の1回だけ見える */
.seonav{display:flex;flex-wrap:wrap;gap:14px;margin:22px 0 0;
  padding-top:14px;border-top:1px solid var(--line);font-size:.85rem}
.seonav a{color:var(--brand);text-decoration:none}
.seonav a:hover{text-decoration:underline}

/* スターティングの行列。**マスの色でポジションを出す。** */
.mx{display:block;text-align:center;border-radius:3px;padding:.25em .1em;
  line-height:1.25}
.mx b{display:block;font-size:.86rem}
.mx i{display:block;font-style:normal;font-size:.62rem;opacity:.75}
.p1{background:#12395e;color:#fff}
.p2{background:#2f7ac8;color:#fff}
.p3{background:#7fb3e3;color:#0d2b46}
.p4{background:#cfe2f6;color:#12395e}
.p5{background:#eef4fb;color:#47566e}
.pno{background:#f5f5f5;color:#8a97ab}
.legend i.sw{display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:5px;vertical-align:-1px}