body { background: var(--bg); color: var(--ink); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 12px; line-height: 1.45; padding: 20px; font-variant-numeric: tabular-nums; } .wrap { max-width: 860px; margin: 0 auto; } /* ---- パンくず(Lv1 ＞ Lv2 ＞ このレース) ---- */ .crumb { font-size: 11px; color: var(--ink3); padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--border-light); } .crumb a { color: var(--ink2); } /* ---- 状態表示 ---- */ /* ---- header ---- */ .race-header { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 0 0 10px; margin-bottom: 16px; border-bottom: 2px solid var(--line-strong); } /* ★L1 = ページ主題。★24/800(2026-09-06・UI P2-3)。★元は 18/800 */ .race-title { font-size: 24px; font-weight: 800; letter-spacing: .04em; } .race-conds { font-size: 11px; color: var(--ink2); display: flex; gap: 12px; flex-wrap: wrap; } .race-conds b { color: var(--ink); } /* ---- waku / f-badge ---- */ .waku { display: inline-block; width: 26px; height: 26px; line-height: 26px; text-align: center; font-weight: 700; font-size: 12px; border: 1px solid rgba(0,0,0,.15); } .waku-sm { width: 20px; height: 20px; line-height: 20px; font-size: 10px; } .waku-xs { width: 18px; height: 18px; line-height: 18px; font-size: 10px; } /* ★.f-badge は ★base.css に移した(2026-09-06・Step 0.5) */ /* ★進入固定・安定板のバッジ。F1バッジと同じ形。 ★色はグレー階調。意味の色(良い=緑/悪い=赤)を使わない。 F1バッジが赤なのは「Fを持っている」という選手の状態を指すためで、 こちらはレースの条件なので、同じ赤にすると意味が混ざる。 */ .label-badge, .fix-badge { display: inline-block; background: var(--badge-bg); color: var(--inv-ink); font-size: 10px; font-weight: 700; padding: 1px 5px; line-height: 1.3; white-space: nowrap; } /* ---- 枠なり仮定の但し書き(2層) ---- */ .assume-bar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 7px 10px; margin-bottom: 14px; border: 1px dashed var(--ink3); background: var(--bg2); font-size: 11px; color: var(--ink); } .assume-bar b { font-weight: 700; } .assume-bar summary { font-size: 11px; color: var(--ink2); cursor: pointer; list-style: revert; } .assume-bar .detail { font-size: 11px; color: var(--ink2); line-height: 1.7; margin-top: 6px; } .assume-bar .detail table { /* border-collapse は .tile(base.css) */ margin-top: 4px; } .assume-bar .detail td { padding: 1px 12px 1px 0; } /* このレースが属する帯の1行。★色も記号も使わない。上の表と区切るだけ(2026-08-25) */ .band-row { margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--border-light); } /* 6艇の前づけ率。上の一律の数字と区切るための罫線だけ。強調はしない */ .assume-appr { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border-light); } .assume-appr td { vertical-align: middle; } /* ★仮定に基づく数字は破線の下線で「事実」と区別する(色は使わない) */ .assumed { border-bottom: 1px dashed var(--ink3); } .assume-tag { font-size: 10px; color: var(--ink2); border: 1px solid var(--ink3); padding: 0 4px; margin-left: 6px; white-space: nowrap; font-weight: 700; } /* ---- 今節成績(2026-08-19) ---- ★出走表に列を足さない。公式は日目ごとに6列使うが、あれは横に広いPC前提で、 ここは2026-08-06に前づけ列を落として86px確保したばかりの幅しかない。 ★選手ごとに1行。着順の並びは横1行で読め、狭い画面では折り返せる。 */ .series-bar { display: block; } .series-tbl { width: 100%; /* border-collapse は .tile(base.css) */ font-size: 11px; margin-top: 6px; } /* ★border-bottom を外した(2026-09-06・P1-00)。★.tile の隙間と二重だった。 ★元の値: border-bottom: 1px solid var(--border-light); */ .series-tbl td { padding: 4px 6px 4px 0; vertical-align: baseline; } .series-tbl .rh { white-space: nowrap; } .series-tbl .rh .nm { font-weight: 700; margin-left: 4px; } /* 着順の並び。★等幅で桁を揃え、狭い画面では折り返す(横スクロールを作らない) */ .series-seq { font-variant-numeric: tabular-nums; line-height: 1.9; } .series-seq .r { display: inline-block; text-align: center; white-space: nowrap; border: 1px solid var(--border-light); margin: 0 2px 2px 0; padding: 0 2px; font-weight: 700; } /* ★着順1着だけ枠を濃くする。色は使わない(良し悪しの色にしない・枠番色とも混ぜない) */ .series-seq .r.w1 { border-color: var(--line-strong); } /* ★1走の中身(2026-09-04)。★「④4C1着」+ 1着なら決まり手。 ★枠番とコースは★ずれる走が実在する(実測: 枠6→5コース)ので★両方出す。 ★★枠番に色は使わない。出走表の枠番色とここを混ぜない(上の規約どおり)。 */ .series-seq .r .wk { font-weight: 400; } .series-seq .r .cs { font-weight: 400; } .series-seq .r .pl { margin-left: 1px; } /* ★展示(2026-09-04)。★展示タイムは★着順より弱く見せる(★主役は着順)。 ★★色は使わない。★(展N)は★本番のコースと違うときだけ出る(★実測5.36%)。 */ .series-seq .r .ex-t { font-weight: 400; color: var(--ink2); } .series-seq .r .ex-c { font-weight: 400; color: var(--ink3); font-size: 11px; } /* ★出走表のC列の (展N)(2026-09-05)。★★横に広げない — ★実測: 横に置くと ★320px で ★130px はみ出した(★C列が広がり、★下の .ax-grid まで押し出した)。 ★★★だから★2段目に落とす。★列幅は変わらない。 */ /* ★日の区切り(2026-09-04)。★日が変わる位置に★細い縦線を1本。 ★★実測: ★高さの増分 ★0px(320/390/435px)。★★時系列を ★0px で示す。 ★★★数字(日目・R番号)を足す案は ★+107〜134px かかる。★区切りだけなら★タダ。 ★色は使わない。★罫線と同じ色。 */ .series-seq .daybar { display: inline-block; width: 1px; height: 11px; background: var(--track); margin: 0 4px 2px 2px; vertical-align: middle; } /* ★決まり手は1着のときだけ。★一段落として、着順より弱く見せる */ .series-seq .r .tk { font-weight: 400; font-size: 11px; color: var(--ink2); margin-left: 3px; } /* ★F・転覆・欠場などは着順が付かない。記号で出し、平均には入れない */ .series-seq .r .ng { color: var(--ink2); font-weight: 400; } .series-sum { font-size: 11px; color: var(--ink2); white-space: nowrap; } .series-note { font-size: 11px; color: var(--ink3); margin-top: 6px; line-height: 1.7; } /* ★積む幅を 435px → 559px に広げた(2026-09-04・★実測で決めた)。 ★理由: ★1走の中身が「1文字」から「④4C1着」に増えたので、★表のまま横3列に割ると ★並びの列が痩せて★★狭い画面より背が高くなる。★実測(8走・6艇の合計の高さ): ★436px … ★表 1,435px ↔ ★積む 990px ← ★★320px(1,299px)より悪かった ★480px … ★表 1,211px ↔ ★積む 953px ★560px … ★表 943px ↔ ★積む 926px ← ★ここで拮抗 ★600px … ★表 817px ↔ ★積む 908px ← ★★表が勝つ ★★= ★交差は 560px 付近。★だから 559px までを積む。 ★★★2026-09-04(2回目): ★展示タイムを足したので★測り直した。★交差が上にずれた: ★560px … ★表 1,425px ↔ ★積む 953px ← ★★559px の設定では★壊れていた ★640px … ★表 959px ↔ ★積む 916px ★700px … ★表 769px ↔ ★積む 860px ← ★★表が勝つ ★★= ★新しい交差は 640〜700px の間。★★★659px までを積む。 ★★★教訓: ★中身を増やすたびに★交差点は動く。★★数字を足したら★必ず測り直す。 ★★★横のはみ出しは ★どの幅でも0（★320/390/425/435/480/560/640/768/860/1024 で実測）。 ★変わるのは★高さだけ。 */ /* ============================================================ ★★★転置した出走表(2026-09-06)。★上下2ブロック + ★下にメモ。 ★日和の形を★やひろが実物で確かめて決めた: ★① ★色は★全行に付ける(★同点も★全部) ★② ★枠色とデータ色は★重なってよい。★★上下で分離する ★③ ★高さは★制約にしない ★実測(2026-09-06・320px・11px): ★ヘッダ(名前を2文字ずつ2行に折る) ★min-content ★246px ★データ(11行・短縮表記) ★min-content ★245px ★メモ(6艇) ★273px ★合計の高さ ★689px(★幅によらない) ★★母数の括弧「69.81(165)」は ★min-content ★403px で ★320px に入らない。 ★★★だから ★450px 以上だけ出す(★下の @media)。 ============================================================ */ .tp { overflow-x: auto; margin: 0 0 4px; } .tp-hd, .tp-dt { width: 100%; /* border-collapse は .tile(base.css) */ font-size: 11px; } .tp-hd th, .tp-hd td, .tp-dt th, .tp-dt td { padding: 3px 2px; white-space: nowrap; } .tp-hd td { text-align: center; line-height: 1.25; } .tp-dt td { text-align: right; font-variant-numeric: tabular-nums; } .tp-hd th.rh, .tp-dt th.rh { text-align: left; font-weight: 700; color: var(--ink2); font-size: 10px; white-space: nowrap; } /* ★上下の境界。★日和は青帯。★ここは色を足さず罫線を1本濃くする (★背景色の種類を増やさない — ★実測の基準線12種) */ .tp-dt { border-top: 2px solid var(--border); } /* ★★2026-09-06 追記: ★上の1行は★ブロック見出しを入れたので★打ち消した(★下の .tp-dt)。 ★元の記述は★消していない(E-101)。 */ /* ★★順位の色(2026-09-06)。★★★1位=薄い赤 / ★2位=薄い黄。 ★日和の #d62839 / #e8c820 は★そのままでは通らない(★実測): ★#d62839 + 本文#222 = ★3.20 ✗ → ★白抜きが要る → ★枠バッジと同じ形になる ★★だから★同じ色相の★薄い地にした。★実測(★AA 4.5:1): ★#fce8ea + #222 = 13.54 / + #696969 = ★4.67 ○ ★#fdf0b8 + #222 = 13.89 / + #696969 = ★4.79 ○ ★★★同点は★全部に付ける(★日和と同じ)。★「—」には付けない。 */ /* ★★★③ 2026-09-06: ★1位を★白抜きにした(★日和の形)。★元の薄い地は★下に残す。 ★実測: ★#d62839 + 白文字 = ★4.97 ○(★AA 通過)。★これより明るい赤は★落ちる: ★#cf4a52 → 4.42 ✗ / ★#c8555c → 4.28 ✗ / ★#c25f66 → 4.10 ✗ ★★2位は★黒文字のまま(★#e8c820 + #222 = ★9.63 ○)。★日和と同じ。 */ /* ★★順位塗りの凡例(2026-09-06・Step 5-5)。★畳まない。 ★★★対象は★順位塗り(.r1/.r2)が出る表だけ = ★tp-dt の1つ。 ★1艇ごとの表(dep-tbl 等)には★順位塗りが無いので★凡例も無い。 ★四角の色は ★--rank1 / --rank2（★.r1/.r2 と★同じトークン）。 */ .rank-legend { font-size: 11px; color: var(--ink2); line-height: 1.7; margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .rank-legend .sw { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; border: 1px solid rgba(0,0,0,.15); } .rank-legend .sw1 { background: var(--rank1); } .rank-legend .sw2 { background: var(--rank2); } .rank-legend .rl-note { color: var(--ink3); } /* ★母数の但し書きは★行を分ける(2026-09-06・P1-02)。★2行に収める */ .rank-legend .rl-2 { flex-basis: 100%; } /* ★順位の色は ★--rank1 / --rank2（base.css）。★2026-09-06・Step 5-2。 ★★元は var(--w3) / var(--w5) を見ていた = ★枠色と★結合していた。★値は同じ。 */ .tp-dt td.r1 { background: var(--rank1); color: var(--rank1-ink); font-weight: 700; } .tp-dt td.r2 { background: var(--rank2); color: var(--rank2-ink); font-weight: 700; } /* ★★元の薄い地(2026-09-06 の1回目)。★実測は残す — ★#fce8ea/#fdf0b8 は ★薄い字#696969 で ★4.67 / ★4.79 で通っていた。★★白抜きに変えたのは ★★★日和の実物に合わせるため(★やひろの判断)。★本文は消していない(E-101)。 */ /* ★母数の括弧。★450px 未満は出さない(★入らない・★実測) */ .tp-dt .n-paren { display: none; } /* ★★★① 枠色を★ヘッダブロック全体に(2026-09-06・★日和の形)。 ★★スクロールしても★列を見失わないため。★背景色は★増えない(★枠色6色は既にある)。 ★★★文字色は★実測で決めた(★WCAG AA 4.5:1): ★1 白 #e8e8e8 … 白文字 1.23 ✗ / ★黒文字 12.98 ○ → ★★黒 ★2 黒 #1a1a1a … ★白文字 17.40 ○ → ★★白 ★3 赤 #d62839 … ★白文字 4.97 ○ / 黒 3.20 ✗ → ★★白 ★4 青 #1e6fbf … ★白文字 5.15 ○ / 黒 3.09 ✗ → ★★白 ★5 黄 #e8c820 … 白 1.65 ✗ / ★黒文字 9.63 ○ → ★★黒 ★★★6 緑 #1b9e4b … ★白文字 3.48 ✗ / ★黒文字 4.58 ○ → ★★★黒 ★★指示書は「緑は白文字」だったが、★実測で★落ちた。★黒にした。 ★★★【2026-09-06 Step 2.9 で★上に上書き。★本文は消していない】 ★★緑を ★#15803d に濃くした → ★白との比 ★5.02 ○ → ★★白文字に戻した。 ★★★文字色は★直書きをやめて ★var(--wN-ink) にした(★6色ぶん)。 ★値が変わったのは ★w6 だけ(★他の5色は★トークンと同値だった)。 */ .tp-hd td.w1, .tp-dt th.w1 { background: var(--w1); color: var(--w1-ink); } .tp-hd td.w2, .tp-dt th.w2 { background: var(--w2); color: var(--w2-ink); } .tp-hd td.w3, .tp-dt th.w3 { background: var(--w3); color: var(--w3-ink); } .tp-hd td.w4, .tp-dt th.w4 { background: var(--w4); color: var(--w4-ink); } .tp-hd td.w5, .tp-dt th.w5 { background: var(--w5); color: var(--w5-ink); } .tp-hd td.w6, .tp-dt th.w6 { background: var(--w6); color: var(--w6-ink); } /* ★枠色の上では★リンクの色も★地に合わせる(★下線で★リンクと分かる) */ /* ★★列ヘッダ用の枠色セル(2026-09-06・Step 4)。 ★★★.waku(インラインのバッジ・26px)と★名前を分けた。 ★同じ名前で 26px と 10px を兼ねさせない(★サイズの衝突を作らない)。 ★色は .tp-hd td.wN と★同じ規則から取る(★下の1箇所)。★増やさない。 ★★white-space は指定しない。★折り返すなら★姓を落とす(★省略記号で切らない)。 */ .tp-dt th.waku-head { font-size: 10px; font-weight: 700; text-align: center; padding: 2px 1px; line-height: 1.3; } .tp-hd td.w1 a { color: var(--w1-ink); } .tp-hd td.w2 a { color: var(--w2-ink); } .tp-hd td.w3 a { color: var(--w3-ink); } .tp-hd td.w4 a { color: var(--w4-ink); } .tp-hd td.w5 a { color: var(--w5-ink); } .tp-hd td.w6 a { color: var(--w6-ink); } .tp-hd td a { text-decoration: underline; } /* ★枠番の行は★バッジを重ねない(★地が★既に枠色) */ .tp-hd tr.wk-row td { font-weight: 700; font-size: 12px; } /* ★ブロック見出し(2026-09-06)。★日和は★65行を★10ブロックに割っている(★青帯)。 ★★★新しい色は★増やさない(★基準線 背景色14種)。★既にある --bg2 を使う。 ★1行・全幅。★★これは★分類であって★順位ではない (★上のブロックが「良い」という意味は無い)。 */ .tp-hd tr.bh th, .tp-dt tr.bh th { background: var(--bg2); color: var(--ink2); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-align: left; padding: 5px 4px; } /* ★見出しが入るので、★上下の境界の罫線は★要らなくなった (★2026-09-06: ★見出しが★自然に切る) */ .tp-dt { border-top: 0; } /* ★下のメモ(★1艇1行)。★転置しない — ★中身が文章で min-content 1,298px(★9/6 実測) */ .tp-mm { font-size: 11px; line-height: 1.7; margin: 8px 0 0; } .tp-mm .row { display: block; padding: 3px 0; border-bottom: 1px solid var(--border-light); } .tp-mm .row .wk { margin-right: 4px; } /* ---- entry table ---- */ /* 「前づけ」列を足して最小幅が 389px → 456px になり、390px幅の端末で 66pxはみ出した。→ 登番列(IDであって読む情報ではない)を落として1列空けた。 ★横スクロールは保険として残す(端末や文字サイズ設定によっては溢れうる)。 */ /* ★着順トグルは廃止した(2026-08-24)。残っているのは公式値トグル1本だけ。 色は付けない(意味の色を使わない)。選択中はグレー階調の反転で示す。 ★.toggle-row は1本になっても flex のまま残す。次にトグルが増えたときに また同じ折り返しの判断をしないため。 */ .toggle-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; } .toggle-label { font-size: 11px; color: var(--ink3); } /* 公式値のセル。★勝率(点)と連率(%)で単位が違うので、単位を小さく添える */ .sub-official { color: var(--ink2); margin-right: 10px; } /* ★体格(2026-09-04)。★選手名の下に置く。★サブ行には置かない — ★★サブ行は ★449px 以下でしか出ない(★.sub-row は既定 display:none。★2026-09-05 に 435→449)。 ★★★実測: ★サブ行案は ★436px 以上で★丸ごと消えていた。★選手名セルなら全幅で出る。 ★実測(選手名セル案): ★320/390px で ★+44px、★436/768px で ★+0px、★表幅は不変。 */ .name-cell .body { display: block; font-size: 11px; color: var(--ink3); white-space: nowrap; } .place-toggle { display: inline-flex; gap: 2px; margin: 0; border: 1px solid #d5d6d7; border-radius: 4px; overflow: hidden; background: var(--panel); } .place-toggle button { font: inherit; font-size: 12px; font-weight: 700; color: var(--ink2); background: transparent; border: 0; padding: 6px 14px; cursor: pointer; font-variant-numeric: tabular-nums; } .place-toggle button + button { border-left: 1px solid #e3e4e5; } .place-toggle button.on { background: #333; color: var(--inv-ink); } .entry-scroll { overflow-x: auto; margin-bottom: 20px; -webkit-overflow-scrolling: touch; } /* ★縞は nth-child ではなく明示クラスで付ける。狭い画面では隣接メモ用の行が 間に挟まるので、nth-child(even) だと縞がずれる(隠れている行も数えられる)。 */ /* 選手ページへの導線。★意味の色は使わない(本文と同じ墨色 + 細い下線だけ) */ .racer-link { color: inherit; text-decoration: underline; text-decoration-color: var(--ink4); text-underline-offset: 3px; } .racer-link:hover { text-decoration-color: var(--ink); } /* ★F0 の「0」。事実なので出すが、F持ちが埋もれないよう一段落とす。 「—」(--ink4 = データ無し)とは別の色にして、0と欠損を見分けられるようにする。 */ /* 気象の観測時刻。★値より小さく出すが、消さない。 「何時時点の値か」が無いと「今の風」だと誤解される(E-21)。 */ .obs-at { font-size: 11px; color: var(--ink3); margin-left: 3px; } /* 相手依存タブの単位注記。★タブの先頭に1回だけ出す */ .dep-unit { font-size: 11px; color: var(--ink3); margin: 0 0 10px; } /* ★★日付タブと R タブ(2026-09-06・UI P2-1)。★主題の直下・「進入について」の上。 ★★★固定しない(★position:fixed を使わない)。★スクロールで流れてよい。 ★常時出しておくのは★下バーの仕事(★守る線⑥)。 ★色相を足さない。★現在地 = --ink 地・白抜き(★既存の「全国」ピルと同じ)。 ★★赤・黄・枠色は使わない(★順位の色・艇の色なので)。 ★締切済みの R は ★--ink3 に落とすだけ。★★消さない(★結果へ飛べる)。 */ /* ★★下バーを2段に(2026-09-06・UI P2-2)。★race.html だけの上書き。 ★★★base.css と★他48ファイルは★触っていない。 ★他のページの下バーは ★48px・3リンクのまま。 ★上段 36px = 前後R と 現在地(★文字のみ) / ★下段 36px = 既存3リンク ★色相を足さない。★上段の地は --bg2。 */ /* ★★2026-09-06(UI P6-1c): ★flex-wrap: nowrap を足した。 ★base.css が .global-nav に ★flex-wrap: wrap を入れた（★下バーの名前の段のため）。 ★★このページは flex-direction: column なので、★wrap のままだと ★gn-top と gn-bottom が★横に並んで ★441px まではみ出した（★実測）。 ★元の値: .global-nav { height: 72px; flex-direction: column; } */ .global-nav { height: 72px; flex-direction: column; flex-wrap: nowrap; } .global-nav .gn-top, .global-nav .gn-bottom { display: flex; height: 36px; } .global-nav .gn-top { background: var(--bg2); border-bottom: 1px solid var(--border-light); } .global-nav .gn-top > * { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink2); text-decoration: none; white-space: nowrap; border-right: 1px solid var(--border-light); } .global-nav .gn-top > *:last-child { border-right: none; } .global-nav .gn-top .gn-side { width: 84px; flex: none; color: var(--ink); } .global-nav .gn-top .gn-mid { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ★base.css が .global-nav a に height:48px を入れたので、★36px に戻す（実測ではみ出した） */ .global-nav .gn-bottom a { flex: 1; height: 36px; } /* ★★★2026-09-11: ★固定帯を やめて 普通の フッターに した ので ★この余白は 要らない。 ★元の値: body { padding-bottom: 80px !important; }（★固定バーが 48 → 72px の ぶん） */ /* ★★「今日の左隣効果」カード(2026-09-06・UI P2-4)。★6艇 × 1行・★枠番順。 ★★★差の大きさで★並べ替えない(★順位付けをしない・釘③)。 ★見せ方は P1-1 の .stat と★同じクラスを使う(★.ax-delta / .thin-lab)。 ★新しい見せ方を作らない。★色相も足さない。 */ #lnCard { margin: 0 0 12px; } /* ★帯の上の余白を落とす(2026-09-06)。★タブの直下に置くので★20px は要らない。 ★★実測で詰め直した(2026-09-06): ★margin-top: 0 だけでは ★237px のまま(★上の余白は★親の高さに入っていなかった)。 ★内訳は ★帯 25 ＋ ★帯の下 8 ＋ ★6行 × 34 = ★237。 ★★下の 8px も落として ★25 + 204 = ★★229px（★条件 230px 以内）。 ★帯が1行目に接する形になるが、★行に区切り線があるので★読める */ #lnCard .sec-h { margin: 0; } /* ★★.stat の compact 変種(2026-09-06・UI P5-2)。★同じクラス・同じ規則。 ★★1行目だけを横並びにする(★3層で6行並べるとカードが 230px を超える)。 ★元は .lncard .ln-row という★別クラスだった。★形の種類を2つに減らすため寄せた。 */ .stat.compact { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 0 8px; min-height: 34px; padding: 0 2px; border-bottom: 1px solid var(--border-light); text-decoration: none; color: var(--ink); } .stat.compact:last-child { border-bottom: 0; } .stat.compact .ln-who { display: flex; align-items: center; gap: 4px; white-space: nowrap; } .stat.compact .ln-nm { font-size: 11px; font-weight: 700; } /* ★3層の .lab は 12px/字間広め。★compact では 11px に落とす(★1行に収めるため) */ .stat.compact .lab { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--ink2); white-space: nowrap; align-self: center; } /* ★3層の .val は 27px。★compact では 12px */ .stat.compact .val { font-size: 12px; font-weight: 500; line-height: 1.2; text-align: right; } .stat.compact .ax-n { text-align: right; } .stat.compact .ln-none { font-size: 11px; color: var(--ink3); } .navtabs { margin: 0 0 12px; } .navtabs .nt-row { display: grid; gap: 2px; margin-bottom: 2px; } .navtabs .nt-dates { grid-auto-flow: column; grid-auto-columns: 1fr; } .navtabs .nt-rno { grid-template-columns: repeat(6, 1fr); } .navtabs a, .navtabs span.nt { display: flex; align-items: center; justify-content: center; height: 32px; font-size: 12px; font-weight: 700; text-decoration: none; background: var(--bg2); color: var(--ink); white-space: nowrap; } .navtabs a.now, .navtabs span.nt.now { background: var(--inv-bg); color: var(--inv-ink); } .navtabs a.done { color: var(--ink3); } .navtabs .nt-note { display: block; height: 32px; line-height: 32px; font-size: 12px; font-weight: 700; color: var(--ink2); background: var(--bg2); padding: 0 9px; margin-bottom: 2px; } /* ★★ページ末の出口(2026-09-06・UI P1-3)。★390px で 2列×3行。 ★色相を足さない。★塗り --rowhead-bg / 文字 --ink / 枠線 --border。 */ .exits { margin: 20px 0 0; } .exit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .exit { display: block; font: inherit; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; padding: 11px 6px; min-height: 36px; background: var(--rowhead-bg); color: var(--ink); border: 1px solid var(--border); } .exit:hover { border-color: var(--ink2); } /* ★★解説文の折りたたみ(2026-09-06・UI P1-2)。 ★★★summary は★帯にしない。★帯(.sec-h)は「データの面」の境界だけに使う。 ★解説は L7 の重さ。★色相を足さない。 */ .note-fold > summary { font-size: 11px; color: var(--ink2); cursor: pointer; padding: 4px 0; list-style: revert; } .note-fold > summary:hover { color: var(--ink); } .note-fold > .note-body { padding-top: 4px; } /* 出走しなかった艇(欠場・L)。★意味の色は使わない。グレー階調と字の大きさだけ。 コースが無いので地力・相手依存は出せず「—」になる。 */ .reliability { font-size: 11px; color: var(--ink3); margin-left: 1px; } /* ★分布上の位置(上位◯%)。2026-08-19 追加。 「39.70%は高いのか低いのか」が画面から分からなかったので、 同じコース・40走以上の中での位置を添える。 ★色は付けない(上位を赤くしない)。グレー階調と字の小ささだけで従属を示す。 ★列は足さない。地力セルの中に2行目として置く。 セル内の1行目「39.70%◎ 134走」より短く、見出し「地力3連対率」(nowrap)より 狭いので、★表の最小幅は増えない(実測: 320/390/435px で変化なし)。 */ .pct-pos { font-size: 11px; color: var(--ink3); white-space: nowrap; } /* 狭い画面のサブ行では横に続ける(行数を増やさない) */ .sub-rate .pct-pos { display: inline; margin-left: 4px; } /* ★地力の2段目(2連対率 / 3連対率)。2026-08-24 追加。 ★着順トグルを廃止し、3つを同時に出すために置いた。 トグルだと「1着15% / 3連対55%(勝てないが半分は絡む)」と 「どちらも場平均以下(本当に苦手)」を区別できない。前の数字を覚えていられない。 ★1着率が主役。2連対・3連対は★従属なので、pct-pos と同じ10px・同じグレーにする。 ★字を大きくすると3つが同格に見え、どれを見ればよいか分からなくなる。 ★色は付けない(高い方を赤くしない)。階層は字の大きさとグレー階調だけで作る。 ★実測(2026-08-24・下関1R・iframeで clientWidth を実測): 現状(トグル) 表の min-content 480.6px この2段目を足した形 493.6px (+13.0px) th/td を3列に割った形 592.2px (+111.6px) → 436pxの箱に156pxはみ出す ★だから列は足さない。セルの2段目にする。 ★390px では地力列ごと非表示になり、サブ行(.sub-rate)に入る。 そこでは行数を増やさないよう横に続ける(pct-pos と同じ扱い)。 */ .rate-sub { font-size: 11px; color: var(--ink3); white-space: nowrap; } .sub-rate .rate-sub { display: inline; margin-left: 4px; } /* 「上位◯%」の定義と、コース別の中央値。★読み方ガイドだけに置かない。 ★これが物差し。分位点を読まなくても、中央と比べれば自分で位置を測れる。 */ .pct-note { font-size: 11px; color: var(--ink3); line-height: 1.8; margin: -12px 0 20px; padding: 8px 10px; background: var(--bg2); border: 1px solid var(--border-light); border-radius: 2px; } .pct-note b { color: var(--ink2); font-weight: 700; } .pct-note .pct-med { display: inline-block; margin-right: 10px; white-space: nowrap; } .pct-note .pct-med-label { margin-right: 8px; } /* ★狭い画面だけ、隣接メモを行の下段に回す。 ブレークポイント 435px の根拠(2026-08-03 実測): 出走表が必要とする最小幅は内容で変わる。DB全走査で最悪ケースを特定し (20231016-04-08 = 左隣「堀之内紀代子 A1 F1」が構造上あり得る最長のメモ / 20251229-24-04 = 選手名の合計31文字で最大)、どちらも 435px を要した。 つまり 435px 未満では、どのレースでも横1行に収まらない可能性がある。 → 435px 以上は従来どおり横1行(6艇を横に見比べる読み方を保つ)。 435px 未満だけメモを下段に回す。実測で 390px/414px とも溢れ0になる。 ★11px への縮小(案3)は採らなかった。最悪ケースで29px不足なうえ、 メモ列が潰れて3〜4行に折り返し、右端が切れて読めなくなるため。 ★★★2026-09-05 追記(★上の記述は消さない・E-101): ★435 → ★★449 に上げた。 ★理由: ★436px で ★14px はみ出していた(★保留 #60)。 ★436px では この @media が効かず、★.a13-tbl の min-content が ★400px に戻る。 ★左余白35px と合わせて ★435px 必要だが、★箱は ★421px(436−スクロールバー15)。 ★★交差点を実測した: ★436→14px / ★445→5px / ★448→2px / ★★450→0px。 ★★★= ★箱が 435px になる ★450px が交差点。★だから ★449px までを狭い形にする。 ★★高さは★増えない(★実測: ★436px で ★a13 257→249px / ★ページ高 5,170→5,170px)。 ★.to の font-size が 24→20px に落ちる分が、★折り返しの増加を相殺している。 ★★★あわせて ★436〜449px の★横スクロールも消えた(★出走表 494→381px)。 ★★★もう1つ: ★上の「435px 以上は横1行に収まる」は ★★今は古い。 ★2026-09-05 実測: ★出走表の幅は ★494px。★横スクロールが 0 になるのは ★★560px。 ★436px で ★113px / ★500px で ★49px / ★540px で ★9px の★横スクロールが残る。 ★★原因: ★8/03 の後に列が増えた(★F→F/L、★選手名の下に体重・年齢)。 ★★★449 は「★横1行に収まる境目」ではなく「★ページが横に溢れない境目」。 ★別のもの。★横1行に戻すなら★別の判断が要る(★列を減らすか、幅を上げるか)。 */ /* ★狭い画面の方針(2026-08-03 に転換): 「特定の幅で溢れ0」を狙うのはやめた。測定環境と実機でフォント描画が 違い、11pxの余裕しか無い調整は実機で再現しなかった(実機で地力1着率が 右で切れていた)。ピクセルを追わず、構造的に溢れない形にする。 → 狭い画面では、1行目を「枠 C 選手名 級 F ST」までにし、 地力1着率と隣接メモを下段(サブ行)へ回す。 (★2026-08-05: 前づけ列を「進入について」ブロックに統合したので、 1行目からさらに1列減った。余裕は実装後に測り直す。) ★地力1着率は常時表示(核となる値なのでトグルの中に隠さない)。 隣接メモだけが開閉対象。サブ行は1本にまとめ、行数を増やしすぎない。 ★開閉は6艇まとめて1つ。行ごとに
を置くと操作が6個になる。 */ .sub-row { display: none; } .sub-rate { display: inline-block; } .sub-memo { display: none; } .memo-toggle { display: none; width: 100%; margin: -12px 0 20px; padding: 7px 10px; font: inherit; font-size: 11px; color: var(--ink2); text-align: left; background: var(--bg2); border: 1px solid var(--border-light); border-radius: 2px; cursor: pointer; } .memo-toggle::before { content: '▶'; font-size: 11px; margin-right: 6px; } .memo-toggle[aria-expanded="true"]::before { content: '▼'; } .n-small { font-size: 11px; color: var(--ink3); } .chain-cell { text-align: left !important; font-size: 11px; color: var(--ink2); line-height: 1.35; } .chain-cell .fact { color: var(--ink); font-weight: 700; } /* ---- hero ---- */ .hero { margin-bottom: 18px; } .hero-head { font-size: 12px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hero-body { font-size: 12px; line-height: 1.5; } .hero-lead { font-size: 11px; color: var(--ink2); } /* ★★相手依存3軸を★3層に(2026-09-06・UI P1-1)。★元は .ax-grid の1行4セル。 ★★★数字は1つも減らしていない。★重さと置き場所だけを変えた: ★1行目 主数値(27px/700/等幅) ＋ 差分バッジ … ★1行に数字は2つまで ★2行目 比較対象「左隣B級なら 14.3%」 … ★11.5px / --ink3 ★3行目 母数バー ＋ 「101走」 … ★10.5px ★差分バッジの強弱は★塗り/枠線で出す(★色相を使わない・P0 の規則): ★|差| ≥ DEP_PT_THRESHOLD(5pt) → ★塗り(--ink / 白) ★|差| < 5pt → ★枠線のみ(--border / --ink3) ★バーの長さは ★n ÷ 3軸の最大n(★絶対値ではない)。 ★n < DEP_MIN_N(40) → ★バーを --border に落とし「母数が薄い」を添える。 */ .ax-stats { margin: 8px 0 0; } .stat { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; padding: 11px 0; border-bottom: 1px solid var(--border-light); } .stat:last-child { border-bottom: 0; } .stat .lab { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink2); align-self: center; white-space: nowrap; } .stat .stat-1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; } .stat .val { /* ★等幅の並びを★指示書の形にした(2026-09-06・UI P2-3 の一部)。 ★"SF Mono" と "Roboto Mono" を足した。★端末に無いと★Courier に落ちる。 */ font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; font-size: 27px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ★★hero スコープから外した(2026-09-06・UI P2-9)。 ★★★元は .stat .ax-delta で、★カード(.lncard)では★当たっていなかった。 ★同じクラスなのに★見た目が違うのは★規則が2つあるのと同じ(E-40 の系)。 ★使う側: ★hero の3層(.stat) と ★今日の左隣効果カード(.lncard) */ .ax-delta { /* ★等幅の並びを★指示書の形にした(2026-09-06・UI P2-3 の一部)。 ★"SF Mono" と "Roboto Mono" を足した。★端末に無いと★Courier に落ちる。 */ font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; font-size: 12px; font-weight: 700; padding: 2px 6px; white-space: nowrap; } .ax-delta.strong { background: var(--inv-bg); color: var(--inv-ink); } .ax-delta.weak { background: transparent; border: 1px solid var(--border); color: var(--ink3); } .stat .base { font-size: 11px; color: var(--ink3); margin-top: 4px; } .stat .nbar { display: flex; align-items: center; gap: 6px; margin-top: 5px; } .stat .track { height: 4px; flex: 1; max-width: 130px; background: var(--track); position: relative; } .stat .fill { position: absolute; inset: 0 auto 0 0; background: var(--fill); } .stat .fill.thin { background: var(--border); } .stat .ax-n { font-size: 11px; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; } .stat .thin-lab { font-size: 11px; color: var(--ink3); } .hero-note { font-size: 12px; color: var(--ink); margin-top: 2px; } /* ---- A-13 ---- */ .a13 { margin: 16px 0 22px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line-strong); } /* ★セクション見出し(2026-08-22)。h1→h2→h3→h4 を繋ぐために足した。 ★意味の色は付けない。サイズと太さと余白だけで段を作る。 */ /* ★.sec-h は ★base.css に移した(2026-09-06・Step 0.5) */ .a13 h3 { font-size: 12px; font-weight: 700; margin-bottom: 10px; letter-spacing: .02em; } /* ★★.a13-tbl は消した(2026-09-06・UI P5-2)。★.stat 2本に寄せた。 ★元の規則: .a13-tbl / td / .rh / .from / .arrow / .to / .chg の7本。 ★★形の種類を .stat と .dep-tbl の2つに減らすため。★数字は変えていない。 */ .a13-note { font-size: 11px; color: var(--ink2); margin-top: 9px; line-height: 1.5; } /* ---- tabs ---- */ .tabs { display: flex; gap: 0; border-bottom: 2px solid var(--line-strong); margin-bottom: 0; } .tab-btn { font: inherit; font-size: 12px; font-weight: 700; color: var(--ink3); background: var(--bg2); border: 1px solid var(--border); border-bottom: none; padding: 8px 16px; cursor: pointer; margin-right: -1px; position: relative; top: 2px; } .tab-btn.active { color: var(--ink); background: var(--panel); border-bottom: 2px solid var(--panel); } .tab-panel { display: none; background: var(--panel); padding: 14px 0; } .tab-panel.active { display: block; } /* ---- dep detail ---- */ .dep-detail { margin-bottom: 12px; } .dep-detail h4 { font-size: 12px; font-weight: 700; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-light); } .dep-tbl { width: 100%; /* border-collapse は .tile(base.css) */ font-size: 11px; margin-bottom: 14px; } /* ★下線を外した(2026-09-06・P1-01)。★地色は table.tile thead th(base.css)。 ★元の値: border-bottom: 1px solid var(--ink); */ .dep-tbl th { font-size: 12px; font-weight: 700; color: var(--ink2); padding: 4px 6px; text-align: center; } .dep-tbl td { padding: 5px 6px; text-align: center; } .dep-tbl .rh { text-align: left; font-weight: 700; } .dep-tbl .today-rate { font-weight: 700; font-size: 12px; } .dep-tbl .dim { color: var(--ink4); font-size: 11px; } /* ★★用語ページへのリンク(2026-09-06・UI P5-3)。★新しい色相は足さない。 ★--ink3 ＋ 下線だけ。★リンクだと分かる最小限。★行の高さを増やさない */ .term-link { color: var(--ink3); text-decoration: underline; text-underline-offset: 2px; } /* ★条件の実名(2026-09-06・P5)。★値の上に小さく置く。★値より弱く */ .dep-tbl .cond-lab { display: block; font-size: 11px; font-weight: 400; color: var(--ink3); } .dep-tbl tbody tr:nth-child(even) td:not(.rh) { background: var(--stripe); } .dep-empty { font-size: 11px; color: var(--ink3); padding: 6px 0 14px; } /* ---- venue ---- */ .venue-tbl { width: 100%; /* border-collapse は .tile(base.css) */ font-size: 11px; } /* ★下線を外した(2026-09-06・P1-01)。★地色は table.tile thead th(base.css)。 ★元の値: border-bottom: 1px solid var(--ink); */ .venue-tbl th { font-size: 12px; font-weight: 700; color: var(--ink2); padding: 4px 6px; text-align: center; } .venue-tbl td { padding: 4px 6px; text-align: center; } .venue-tbl .hl { font-weight: 700; } .venue-tbl tbody tr:nth-child(even) td:not(.rh) { background: var(--stripe); } .cond-note { font-size: 11px; color: var(--ink3); margin-top: 6px; line-height: 1.6; } /* ---- 左隣F持ちの艇(内部名は sanhenka のまま。★旧名「注目艇の3軸」→ 2026-09-06 に改名) ---- */ /* ★★.sanhenka-tbl は消した(2026-09-06・UI P5-2)。★.stat 1本＋差分バッジ3つに寄せた。 ★元の規則: .sanhenka-tbl / th / td / .rh / .today / 縞 の6本。★数字は変えていない。 */ /* ★差分バッジの並び。★.ax-delta は既存のものを★そのまま使う(新しい見せ方を作らない) */ .ax-badges { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; } .ax-badge { display: inline-flex; align-items: center; gap: 5px; } .ax-badge-lab { font-size: 11px; color: var(--ink3); white-space: nowrap; } /* ★.dep-tbl のセル内に縦積みにした n(2026-09-06・UI P5-2)。★7列→5列の受け皿 */ .dep-tbl .cell-n { display: block; font-size: 11px; color: var(--ink3); font-variant-numeric: tabular-nums; } /* ---- result ---- */ details.result { margin-top: 20px; border-top: 1px solid var(--border-light); padding-top: 8px; } details.result summary { font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink2); padding: 6px 0; } details.result .result-body { padding: 8px 0; font-size: 11px; } /* ★平均ST と 差 は、実測STより一段落とす。主役は「今日の実際」。 色は付けない(遅い=悪い とは限らないので、意味の色を使わない)。 */ .result-tbl .dim { color: var(--ink3); } /* ★払戻金。色を使わない(高配当を赤くしない)。金額の大小に意味づけをしない。 等幅数字で右揃えにして、桁だけが読めるようにする。 */ .pay-tbl { width: 100%; /* border-collapse は .tile(base.css) */ margin-top: 12px; font-size: 11px; } .pay-tbl th, .pay-tbl td { padding: 3px 6px; text-align: left; } .pay-tbl th { color: var(--ink3); font-weight: 700; font-size: 12px; } .pay-tbl .pay-combo { font-weight: 700; white-space: nowrap; } .pay-tbl .pay-yen { text-align: right; white-space: nowrap; } .pay-tbl .pay-rank { color: var(--ink3); font-size: 11px; margin-left: 4px; } .result-tbl { /* border-collapse は .tile(base.css) */ font-size: 11px; } .result-tbl th { text-align: center; font-weight: 700; color: var(--ink2); padding: 3px 8px; } .result-tbl td { text-align: center; padding: 3px 8px; } /* ---- guide ---- */ .guide { font-size: 11px; color: var(--ink3); border-top: 1px solid var(--border-light); padding-top: 10px; margin-top: 12px; line-height: 1.6; } .guide dt { font-weight: 700; color: var(--ink2); } .guide dd { margin-left: 12px; margin-bottom: 4px; } /* ============================================================ ★★★メディアクエリは★ここ(★基本ルールの★後ろ)にまとめる。 ★★理由(2026-09-05 実測): ★2026-08-03 に狭い画面の上書きを書いたが、 ★@media が★基本ルールより★前にあり、★★同じ詳細度で★後勝ちになっていた。 ★★★= ★書いた日から★1度も効いていなかった(★1か月と2日)。 ★実測: ★.a13-tbl .chg は ★white-space:nowrap のまま(★狙いは normal)、 ★.to は ★min-width:86px のまま(★狙いは 0)、★.ax-today は ★106px/30px のまま。 ★★A-13対比が出るレースだけ ★320px で ★130px はみ出していた(★18/18 で一致)。 ★★★次に上書きを足す人へ: ★★必ずこの位置に足すこと。 ★上に書くと★効かない。★詳細度を上げて回避しない(★順序の問題を隠すだけ)。 ============================================================ */ @media (max-width: 659px) { /* ★狭い画面では選手名と並びを縦に積む(横スクロールを作らない) */ .series-tbl, .series-tbl tbody, .series-tbl tr, .series-tbl td { display: block; width: 100%; } /* ★tr の border は border-collapse:separate では描かれない。★消した(P1-00) */ .series-tbl td { padding: 1px 0; } } /* ★母数の括弧は ★450px 以上だけ(★2026-09-06 実測)。 ★「69.81(165)」は ★min-content ★403px。★320px(使える265)には★入らない。 ★2026-09-06 の見込みは「450px から」だったが、★★本番で測って直した: ★450px で出すと ★箱(395px)の中に ★107px の横スクロールが出る。 ★★★560px なら ★0。★だから ★560px から出す。 */ /* ★★2026-09-06(2回目): ★括弧をやめて★母数を★別行にしたので、★この @media は ★空にした。★元の記述と★実測は★上のコメントに残してある(E-101)。 */ @media (max-width: 449px) { /* 1行目から地力1着率と隣接メモを外す */ /* ★狭い画面でもトグルは残す(値を切り替える手段なので) */ /* サブ行は常時出す(地力1着率が入っているため)。メモだけ開閉する */ .sub-row { display: table-row; } .memo-toggle { display: block; } /* データ行とサブ行を1つのまとまりに見せる。サブ行は常にあるので、 区切りの罫線はサブ行側が持つ(データ行からは常に外してよい) */ /* ★.sub-row は entry-table の行だった。★転置で出力していない = ★死んだ規則。 ★border だけ外した(P1-00)。★規則ごと消すかは★判断が要る */ .sub-row > td { text-align: left; padding: 0 6px 7px 44px; } .sub-rate { color: var(--ink2); } /* ★A-13対比: 数値と単位を折り返して収める(はみ出さない)。 実測(390px)で25px溢れていた。原因は .chg の nowrap と .to の min-width。 ★★2026-09-06(UI P5-2): ★.a13-tbl を消して .stat 2本にしたので、 ★.a13-tbl の3本(.rh/.chg の normal / .to の min-width / td の padding)は ★★受け皿が無くなった。★.stat 側は元から折り返す(.stat .base に nowrap が無い)。 */ .a13 { padding: 12px 10px; } /* ★相手依存3軸: 320pxで43px溢れていた */ /* ★場の条件(7列の百分率): 390pxで11px溢れていた。 数字を折り返すと読めなくなるので、余白と文字を詰めて収める。 */ .venue-tbl { font-size: 11px; } .venue-tbl th, .venue-tbl td { padding: 4px 1px; } } /* ★★★型の水準 L5 = 値セル(2026-09-06・UI P2-3)。★★