html{-webkit-text-size-adjust:100%}
body{
/* ★単色。以前は radial-gradient 2枚を重ねていた */
background: var(--bg);
color:var(--ink);
/* ★他4ページと同じ指定順にする(実機で書体が違って見えていた) */
font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
line-height:1.5;
min-height:100vh;
/* ★等幅数字を body に指定する(他5ページと同じ)。
個別指定だと足し忘れた箇所で桁がずれ、6コースを縦に見比べられなくなる。 */
font-variant-numeric: tabular-nums;
padding:clamp(16px,4vw,48px);
}
.wrap{max-width:920px;margin:0 auto}
/* ---- header ---- */
.breadcrumb{font-size:11px;color:var(--ink3);margin-bottom:8px}
.breadcrumb a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--border)}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:10px}
.name-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
h1{font-size:clamp(34px,7vw,56px);font-weight:800;letter-spacing:.02em;line-height:1}
.toban{font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink2);border:1px solid var(--border);border-radius:var(--radius);padding:4px 12px}
.meta{margin-top:14px;display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--ink2)}
.meta b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
/* 母数・信頼度は値より一段落とす。色は付けない(意味の色を使わない) */
.meta .n-sub{color:var(--ink2);font-variant-numeric:tabular-nums}
/* ---- 登番入力(全選手対応) ---- */
.id-form{margin:24px 0 8px;display:inline-flex;padding:4px;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);align-items:center}
.id-form label{font-size:12px;color:var(--ink3);padding-left:12px;letter-spacing:.04em}
.id-form input{
font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
color:var(--ink);background:transparent;border:0;border-radius:var(--radius);
padding:9px 6px;width:80px;text-align:center;
}
.id-form input:focus{outline:1px solid var(--fill);outline-offset:-1px}
.id-form button{font:inherit;font-size:13px;font-weight:600;color:var(--ink2);background:transparent;border:0;border-radius:var(--radius);padding:9px 18px;cursor:pointer;transition:.25s}
.id-form button:hover{color:var(--ink)}
/* ---- 状態表示 ---- */
.state{
margin:28px 0;padding:22px;border:1px solid var(--border);border-radius:var(--radius);
background:var(--panel);font-size:14px;color:var(--ink2);
}
.state b{color:var(--ink);display:block;font-size:15px;margin-bottom:4px}
.state .hint{font-size:12px;color:var(--ink3);margin-top:8px}
/* ---- section titles ---- */
/* ★見出しの形は base.css の .sec-h に寄せた(2026-09-06・Step 1)。
★ここに持っていた定義は消した。★ページごとに見出しを持たない(E-40) */
.section-sub{font-size:12px;color:var(--ink3);margin-bottom:16px}
/* ---- toggle ---- */
.toggle{margin:20px 0 8px;display:inline-flex;padding:4px;gap:4px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.toggle button{font:inherit;font-size:13px;font-weight:600;color:var(--ink2);background:transparent;border:0;border-radius:var(--radius);padding:9px 18px;cursor:pointer;transition:.25s}
.toggle button.on{background:#333;color:#fff}
.view-note{font-size:13px;color:var(--ink3);margin:10px 2px 24px;min-height:1.2em}
/* ★期間別の表(2026-09-01)。★列=期間・行=指標。★同じ量は横で比べる */
/* ★★2026-09-01: ★横スクロールの手がかり(★影)。★/terms と同じ形(HANDOFF §5-96)。
★左右に影を置き、★その上に背景色の板を ★local で重ねる。
★★端まで来ると板が影を隠す = ★スクロールできる側にだけ影が出る。
★★★溢れていない箱では両端とも板が乗るので★影は出ない。
★実測: ★高さ ±0 / ★背景色の種類 ±0(★グラデーションは backgroundColor に出ない) /
★但し書き ±0。★正本は public/doc.css の .doc .tw。 */
.tw{
overflow-x:auto;
background: none; /* ★R1b-2（1016d 判断 4）… 横 送りの 影（グラデーション 4層）を やめて 平らに ＝ 表は 面 いっぱい・影 なし */
}
.ptbl{/* border-collapse は .tile(base.css) */font-size:13px;margin-top:10px}
/* ★padding は 6px10px から 5px6px にした。★320px(枠288px)で 319.4px → 287.4px。
★見出しも「直近5年」→「5年」に縮めて ★282.8px(実測・2026-09-01) */
/* ★★セルの border を外した(2026-09-06・Step 5-6)。★線が二重だった:
★.tile の border-spacing 1px が★既に罫線になっている。
★その上に border:1px solid var(--border) を敷くと ★2本になる。
★元の値: border: 1px solid var(--border); */
.ptbl th,.ptbl td{padding:5px 6px;text-align:right;white-space:nowrap}
.ptbl thead th{background:var(--panel);color:var(--ink2);font-weight:700;text-align:center;line-height:1.35}
.ptbl tbody th{text-align:left;font-weight:600;color:var(--ink2)}
.ptbl td{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
.ptbl-n{display:block;font-size:11px;font-weight:600;color:var(--ink3);font-variant-numeric:tabular-nums}
/* ---- course lanes ---- */
.lanes{display:flex;flex-direction:column;gap:12px}
.lane{
position:relative;background:var(--panel);border:1px solid var(--border);
border-radius:var(--radius);padding:16px 18px 14px 16px;
display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:start;
overflow:hidden;
}
.lane::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--wc,transparent);opacity:.9}
.badge{
width:44px;height:44px;border-radius:var(--radius);display:grid;place-items:center;
font-weight:800;font-size:19px;font-variant-numeric:tabular-nums;
background:var(--wc);color:var(--bc,var(--ink));
border:1.5px solid rgba(0,0,0,.14);margin-top:2px;
}
.track-wrap{min-width:0}
.track-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.course-label{font-size:12px;color:var(--ink2);font-weight:600}
.rate{font-variant-numeric:tabular-nums;font-weight:800;font-size:22px;line-height:1}
.rate small{font-size:12px;font-weight:600;color:var(--ink2);margin-left:2px}
.rate small.pctl{font-size:11px;font-weight:400;color:var(--ink3);margin-left:6px}
.rate.none{color:var(--ink3)}
.track{position:relative;height:12px;border-radius:4px;background:var(--bg2);border:1px solid var(--border-light);overflow:visible}
.fill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--fill);width:0;transition:width .6s cubic-bezier(.4,0,.2,1)}
.pop-marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--mark);left:0;transition:left .6s cubic-bezier(.4,0,.2,1)}
.pop-marker::after{content:"全出走平均";position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--ink2);white-space:nowrap;letter-spacing:.04em}
.pop-marker.is-right::after{left:auto;right:0;transform:none}
.pop-marker.is-left::after{left:0;transform:none}
.ghost{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--ink3);background:transparent;left:0;transition:left .6s cubic-bezier(.4,0,.2,1);opacity:0}
/* ★1着だったレースの一覧(2026-09-05)。★★必ず畳む —
★実測(390px): ★開いたままだと ★306走で ★+6,500px（★ページが2.2倍）。
★★畳めば ★+755px（★6つの summary のぶん。★走数によらずほぼ一定）。
★1コースだけ開いたときは ★15走 +314px / ★184走 +3,844px。 */
.winlist{margin-top:8px}
.winlist summary{font-size:11px;color:var(--ink3);cursor:pointer}
.winlist .wr{display:block;font-size:11px;color:var(--ink2);line-height:1.9;
white-space:nowrap;font-variant-numeric:tabular-nums}
/* ★場名が長いと 320px で溢れる(★実測: 「ボートレース住之江」+ST で 298px / 使える285px)。
★★ST は入れない。★それでも溢れる端末のために★横スクロールを保険で置く。 */
.winlist .wl-body{overflow-x:auto}
/* ---- kimarite strip ---- */
.kimarite{margin-top:11px}
.k-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.k-label{font-size:10.5px;color:var(--ink3);letter-spacing:.06em}
.k-note{font-size:10px;color:var(--ink3)}
.k-note.warn{color:var(--ink2)}
.k-strip{display:flex;height:16px;border-radius:4px;overflow:hidden;border:1px solid var(--border-light);background:var(--bg2)}
.k-seg{position:relative;display:grid;place-items:center;min-width:0;font-size:9.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;transition:filter .2s;cursor:default}
.k-seg span{padding:0 4px;overflow:hidden;text-overflow:clip}
.k-seg:hover{filter:brightness(1.15)}
.k-empty{height:16px;border-radius:4px;border:1px dashed var(--border-light);background:var(--bg2);display:grid;place-items:center;font-size:10px;color:var(--ink3)}
.lane[data-thin="1"] .k-seg{opacity:.45}
.lane[data-thin="1"] .k-strip{border-style:dashed}
.conf{width:96px;text-align:right;margin-top:2px}
.conf .n{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
.conf .n span{font-size:11px;color:var(--ink2);font-weight:600}
.dots{display:flex;gap:3px;justify-content:flex-end;margin-top:6px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--fill-subtle)}
.dot.f{background:var(--fill)}
.conf .tag{font-size:10px;color:var(--ink3);margin-top:5px;letter-spacing:.03em}
.lane[data-thin="1"]{opacity:.85}
.lane[data-none="1"]{opacity:.6}
/* ---- 相手依存3軸 ---- */
.dep-section{margin-top:36px}
.axis-toggle{margin:12px 0 16px;display:inline-flex;padding:3px;gap:3px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.axis-toggle button{font:inherit;font-size:12px;font-weight:600;color:var(--ink2);background:transparent;border:0;border-radius:var(--radius);padding:7px 14px;cursor:pointer;transition:.25s}
.axis-toggle button.on{background:#333;color:#fff}
.axis-note{font-size:12px;color:var(--ink3);margin:0 0 16px 2px}
.dep-lanes{display:flex;flex-direction:column;gap:10px}
.dep-lane{
background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
padding:14px 18px;display:grid;grid-template-columns:44px 1fr 140px;gap:14px;align-items:center;
}
/* ★★2026-09-01: ★font-size を ★16px → ★19px にした(HANDOFF §5-93)。
★理由: ★.badge が ★19px/800 と ★16px/800 の★2段階を消費していた(★同じ艇番のバッジ)。
★★★箱は 36x36 のまま。★実測: ★行の高さも文書の高さも★1pxも動かない
(★dep-lane 78/105/105 のまま・★文書 5,198px のまま)。★数字は 34x34 で収まる。
★44x44 に揃える案は★行が 78→86px、★文書が +20px になるので★採らなかった。 */
.dep-lane .badge{width:36px;height:36px;font-size:19px;border-radius:4px}
.dep-bars{min-width:0}
.dep-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.dep-row:last-child{margin-bottom:0}
.dep-row-label{font-size:11px;color:var(--ink2);width:96px;flex-shrink:0;text-align:right}
.dep-bar-wrap{flex:1;height:10px;border-radius:4px;background:var(--bg2);border:1px solid var(--border-light);position:relative;overflow:visible}
.dep-bar{position:absolute;left:0;top:0;bottom:0;border-radius:4px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.dep-bar.a{background:var(--fill)}
.dep-bar.b{background:var(--fill-weak)}
.dep-val{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;width:48px;text-align:right}
.dep-meta{text-align:right}
/* 型ラベルは無彩色。良し悪しの含意を持たせない(★だけが注目を示す) */
.dep-type{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
/* ★.dep-type .star は消した(2026-09-07)。★元: .dep-type .star{color:var(--ink2);margin-right:2px} */
.dep-diff{font-size:11px;color:var(--ink2);margin-top:2px;font-variant-numeric:tabular-nums}
.dep-n{font-size:10px;color:var(--ink3);margin-top:2px}
.dep-lane[data-no-data="1"]{opacity:.45}
.dep-lane[data-no-data="1"] .dep-bars{display:flex;align-items:center;justify-content:center}
/* ---- legends & footer ---- */
.k-legend{margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink2);align-items:center}
.k-legend .chip{display:inline-flex;align-items:center;gap:6px}
.k-legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.foot{
margin-top:18px;padding:16px 18px;border:1px solid var(--border);
border-radius:var(--radius);background:var(--bg2);
font-size:12.5px;color:var(--ink2);line-height:1.7;
}
.foot b{color:var(--ink)}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--ink3)}
.legend i{display:inline-block;vertical-align:middle;margin-right:6px}
.lg-fill{width:14px;height:8px;border-radius:4px;background:var(--fill)}
.lg-pop{width:2px;height:12px;background:var(--mark)}
.lg-ghost{width:8px;height:8px;border-radius:50%;border:2px solid var(--ink3)}
/* ---- 読み方ガイド ---- */
.guide{
margin-top:32px;padding:20px;border:1px solid var(--border);
border-radius:var(--radius);background:var(--bg2);
font-size:12.5px;color:var(--ink2);line-height:1.8;
}
.guide h3{font-size:14px;color:var(--ink);margin-bottom:12px;font-weight:700}
.guide h4{font-size:12px;color:var(--ink);margin:14px 0 6px;font-weight:700}
.guide dl{margin:0;padding:0}
.guide dt{font-weight:700;color:var(--ink);display:inline}
.guide dd{display:inline;margin:0 0 0 4px}
.guide dd::after{content:"";display:block;margin-bottom:6px}
.guide .tech{font-size:11px;color:var(--ink3);margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
@media (max-width:600px){
.lane{grid-template-columns:38px 1fr;gap:12px}
.conf{grid-column:2/3;width:auto;text-align:left;display:flex;gap:12px;align-items:center;margin-top:4px}
.dots{margin-top:0}.conf .tag{margin-top:0}
.dep-lane{grid-template-columns:36px 1fr;gap:10px}
.dep-meta{grid-column:2/3;text-align:left;display:flex;gap:12px;align-items:baseline}
}
@media (prefers-reduced-motion:reduce){
.fill,.pop-marker,.ghost,.dep-bar{transition:none}
}
/* ── ★P4 今期の 級の 見込み（2026-10-08・見本の 形）── ★PC は 段の 幅・★「級の線」の 改行は 600px 以下 だけ・★新しい 色・字 0 */
#sb-box { width: 100%; }
#sb-box .sb-pc { display: inline; }
#sb-box br.sb-sp { display: none; }
@media (max-width:600px){
#sb-box { width: auto; }
#sb-box .sb-pc { display: none; }
#sb-box br.sb-sp { display: inline; }
}
/* ★★R1b-2（1016d 判断 4）… 切り替えは 下線の タブ（★塗らない・箱で 囲まない）・★元の 塗り（#333）は 上の 規則に 残す（E-101） */
.toggle, .axis-toggle { border: 0 !important; background: transparent !important; gap: 12px; }
.toggle button, .axis-toggle button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 4px 2px; font-weight: 400; color: var(--ink2); }
.toggle button.on, .axis-toggle button.on { background: transparent; color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
/* ★★R1d（1016d）… 今の 位置（頁の 頭）＝ 数の 升 ＋ 上位% の 横棒（M）・★線 1本・影 なし・棒は 1色（長い ほど 上位）
★升の 高さは 先に 決める（★/api/shoubugake は 後から 来る ＝ 下を 押し下げない） */
.pos { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.pos-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
.pos-tile { height: 64px; overflow: hidden; }
.pos-k { font-size: 11px; color: var(--ink2); line-height: 16px; }
.pos-v { font-size: 22px; font-weight: 800; line-height: 28px; font-variant-numeric: tabular-nums; color: var(--ink); }
.pos-v small { font-size: 12px; font-weight: 600; color: var(--ink2); margin-left: 2px; }
.pos-line { display: inline-block; font-size: 15px; font-weight: 700; line-height: 20px; margin-right: 10px; }
.pos-bars { margin-top: 6px; border-top: 1px solid var(--border-light); padding-top: 8px; }
.pos-h { font-size: 11px; color: var(--ink2); line-height: 16px; margin-bottom: 4px; }
.pos-bar { display: grid; grid-template-columns: 56px 1fr 84px; align-items: center; gap: 8px; height: 22px; }
.pos-c { font-size: 12px; color: var(--ink2); }
.pos-track { position: relative; height: 8px; background: var(--bg2); overflow: hidden; }
.pos-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fill); }
.pos-p { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pos-p.none { color: var(--ink3); font-weight: 400; }
.pos-link { margin: 6px 0 14px; font-size: 13px; }
.pos-link a { display: inline-block; line-height: 24px; }
/* ★段B 2回目（1016r B-e）… 今日の 出走 と 今節・★行の 高さを 先に 決める（★後から 来る）・★長い 行は 横に 送る（★切らない）・線 1本・影 なし */
.tday { margin-top: 8px; border-top: 1px solid var(--border-light); padding-top: 6px; }
.tday-row { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 8px; height: 26px; }
.tday-k { font-size: 11px; color: var(--ink2); }
.tday-v { font-size: 13px; line-height: 26px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; font-variant-numeric: tabular-nums; }
.tday-note { margin: 2px 0 0; font-size: 11px; line-height: 16px; color: var(--ink3); }
.wm { display: inline-block; margin-left: 6px; padding: 0 4px; font-size: 11px; line-height: 16px; font-weight: 700; color: var(--ink2); border: 1px solid var(--border); vertical-align: middle; }
@media (max-width:600px){
.pos-tiles { grid-template-columns: repeat(2, 1fr); }
.pos-tile { height: 58px; }
.pos-line { display: block; margin-right: 0; }
}
/* ★R1d … 級の 理由の「?」（推定の 意味）・★押す 所 48px（よく 押す 物・sousa_kimari 3）・線 1本・影 なし */
details.kyu-q { margin: 4px 0 8px; }
details.kyu-q > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
min-width: 48px; min-height: 48px; font-size: 14px; font-weight: 700; color: var(--ink2); border: 1px solid var(--border); box-sizing: border-box; }
details.kyu-q > summary::-webkit-details-marker { display: none; }