:root { --primary: #1e3a5f; --primary-dark: #16284a; --primary-light: #4a7bb8; --accent: #d9354c; /* Y2 (2026-05-28): 並び替え/ドラッグ系 UI 専用のアクセント色。 サイトの primary accent (赤 #d9354c) はレーサーカラーの赤と衝突 しやすく、また「予想／重要」の意味づけが既にある。並び替えは "実験/操作" 系のニュアンスなのでオレンジ (#f59e0b) で統一する。 */ --lineup-accent: #f59e0b; --lineup-accent-soft: rgba(245, 158, 11, 0.12); --bg: #f4f6fa; --bg-soft: #fafbfd; --surface: #ffffff; --border: #e5e9f0; --text: #1f2937; --text-2: #545b64; --text-3: #545b64; /* 2026-07-03 タイポトークン(中1): 6段スケール。新規CSSはこのトークンを参照する。 --fs-micro はバッジ・補助ラベル専用（本文・注記には使わない）。 */ --fs-micro: 11px; --fs-note: 12px; --fs-label: 13px; --fs-body: 13.5px; --fs-cardtitle: 15px; --fs-h2: 17px; --fs-h1: 20px; --shadow-sm: 0 2px 8px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.06); --shadow-md: 0 4px 12px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.04); --shadow-lg: 0 8px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.05); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --transition: 200ms cubic-bezier(.4,0,.2,1); } *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin:0; padding:0 0 76px; font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", sans-serif; /* The gradient is on with `fixed` so mobile Safari does NOT allocate phantom scroll area below the document. body itself is transparent so the html background shows through. Putting fixed on body causes a half-screen of white-space at bottom on iOS. */ background: transparent; color: var(--text); font-size:17px; line-height:1.65; -webkit-font-smoothing: antialiased; /* M1 (2026-05-26): 日本語コンテンツのデフォルト改行ポリシー。 - word-break: keep-all は単語 (= 連続した英数字 / カタカナ列) を バラさない。日本語の単漢字単位の縦割れを防ぐ。 - overflow-wrap は、それでも入りきらないとき "本命候補：◯◯" のような 長い句読点なし日本語を任意位置で折り返す (はみ出し回避)。 2026-07-17: break-word は日本語長文の min-content を「文全体の幅」に保つため、 幅制約の緩いカード(guide-card 等)を画面幅超へ広げ、横オーバーフローを起こした (ガイド一覧 ratio 1.21 を iframe375 で実測)。anywhere に戻す — min-content を 1文字まで許容して要素が縮むので、横はみ出しが構造的に起きない。 anywhere が招く flex 行の 1文字改行/縦積み崩壊は、個別に (makuri-title / it-head の flex-wrap + mkt-txt の overflow-wrap:normal) で対処済み。 */ word-break: keep-all; overflow-wrap: anywhere; } /* 2026-09-16 レビュー指摘: 長文(記事・法務ページ・注記・フッター)は日本語標準の折り返しに戻す。 上の keep-all + anywhere は短いラベル向けで、長文では句読点でしか折れず「344万1,072艇」の 数字までコンマで割れ、行末がガタガタになっていた。normal は CJK の文字間で折り返し、 line-break:strict で句読点が行頭に来ない。overflow-wrap:anywhere は継承のまま(はみ出し保険)。 */ .guide-article, .legal-article, .footer, .tw-note, .tw-hint, .bm-note, .rec-intro, .rec-info-note, .rec-history-banner, .rec-empty, .ai-summary, .race-help, .dev-exclude-card { word-break: normal; line-break: strict; } /* M1: 画像・SVG はデフォルトでビューポート幅を超えない。 width/height 属性が CSS の max-width:100% を打ち消さないよう height:auto も併記する。 */ img, svg, video, canvas { max-width: 100%; height: auto; } html { background: linear-gradient(180deg, #f6f8fc 0%, #eef2f8 100%); background-attachment: fixed; min-height: 100%; /* M4 (2026-05-26): 万一どこかでオーバーフローが発生しても、ページ全体に 横スクロール (= 「画面が動く」と感じる現象) を出さない最終防御。 個別テーブルは内側で .scroll-x コンテナを使い、そこで意図的に 横スクロールを許可する設計。 */ overflow-x: hidden; } a { color:inherit; text-decoration:none; } button { font-family:inherit; } .header { background: linear-gradient(135deg, #1e3a5f 0%, #2d4f7d 100%); color:#fff; padding:8px 18px 10px; position:sticky; top:0; z-index:10; box-shadow: 0 1px 3px rgba(15,23,42,.10); transition: transform 220ms ease-out; will-change: transform; } /* スクロール下方向で .header と .sticky-bar が画面外に逃げ、本文（出走表） が画面いっぱい使える。スクロール上方向（指を上にスワイプ→画面が下にスクロール ではなく逆）で元に戻る。 Twitter/Mediumなどでお馴染みの "auto-hide on scroll down" パターン。 */ body.chrome-hidden .header { transform: translateY(-100%); } .header .nav-row, .header .brand-row { display:flex; justify-content:space-between; align-items:center; gap:10px; } .header .brand { font-size:18px; font-weight:700; letter-spacing:.02em; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:6px; opacity:.95; transition: opacity var(--transition); } .header .brand:hover { opacity:1; } .header .brand-mark { font-size:20px; } .header .meta-right { font-size:13px; opacity:.8; } /* 2026-05-25 追加: ヘッダ右上の選手検索リンク (P1.1 RUM 計測 0 PV 対策) */ .header-search-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 36px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.32); border-radius: 10px; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.2; min-height: 44px; /* 2026-07-13 UX: 36px→44px(HIG) */ -webkit-tap-highlight-color: transparent; transition: background var(--transition), border-color var(--transition); } .header-search-link:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.55); } .header-search-link:active { background: rgba(255,255,255,.30); } .header-search-icon { font-size: 15px; } .header-search-label { letter-spacing: .02em; } @media (max-width: 480px) { .header-search-label { display: none; } /* 狭幅ではアイコンのみ */ /* 2026-07-13 UX: アイコンのみ時も 44×44 の正方形タップ標的を確保 */ .header-search-link { padding: 8px; min-width: 44px; justify-content: center; } } @media (min-width: 720px) { .header-search-link { font-size: 14px; padding: 9px 14px; min-height: 40px; } } /* Venue switcher dropdown (top-right of header) */ .venue-switcher { position: relative; } .vs-trigger { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.32); border-radius: 10px; padding: 10px 16px; font-size: 15px; font-family: inherit; font-weight: 600; cursor: pointer; line-height: 1.2; min-height: 44px; display: inline-flex; align-items: center; transition: background var(--transition), border-color var(--transition); } @media (min-width: 720px) { .vs-trigger { font-size: 16px; padding: 12px 18px; min-height: 48px; } } .vs-trigger:hover, .vs-trigger[aria-expanded="true"] { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.55); } .vs-trigger .vs-caret { display: inline-block; margin-left: 6px; font-size: 11px; } .vs-panel { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; color: var(--text); border-radius: 12px; padding: 14px; box-shadow: 0 8px 24px rgba(15,23,42,.25), 0 2px 6px rgba(15,23,42,.15); z-index: 200; /* 2026-07-05 モバイル: 320px端末で右アンカー+min-width:320pxだと左端が 画面外にはみ出し横スクロールが出る問題を修正。viewport clampで必ず収める。 また縦の短い画面では下部会場が見切れるため max-height + 内部スクロール。 */ min-width: min(320px, calc(100vw - 20px)); max-width: calc(100vw - 20px); max-height: calc(100vh - 120px); overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (min-width: 720px) { .vs-panel { min-width: 400px; padding: 16px; } } .vs-title { font-size: 12px; color: var(--text-3); margin-bottom: 10px; font-weight: 600; } .vs-rounds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 14px; } .vs-round { min-height: 44px; padding: 12px 0; font-size: 14px; font-weight: 600; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); cursor: pointer; font-family: inherit; line-height: 1; transition: all var(--transition); } .vs-round:hover { background: #e5e7eb; border-color: var(--primary-light); } .vs-round.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 1px 3px rgba(30,58,95,.3); } .vs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .vs-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 10px 4px; font-weight: 600; border-radius: 9px; text-decoration: none; color: var(--text); background: var(--surface); /* 各セルの境界をはっきり：1px 実線 + 微小な内側ハイライト + 影 で 立体感を出して「タップ可能なボタン」感を強化。 */ border: 1px solid #d8e1ee; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(15, 23, 42, .05); transition: all var(--transition); } .vs-cell .vs-cell-name { font-size: 14px; line-height: 1.15; } .vs-cell .vs-cell-races { font-size: 11px; color: var(--text-3); font-weight: 700; font-variant-numeric: tabular-nums; } .vs-cell.active .vs-cell-races { color: rgba(255,255,255,.85); } @media (min-width: 720px) { .vs-cell { padding: 12px 4px; min-height: 60px; gap: 3px; } .vs-cell .vs-cell-name { font-size: 15px; } .vs-cell .vs-cell-races { font-size: 12px; } } .vs-cell:hover { background: #f4f8ff; border-color: var(--primary-light); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 3px 8px rgba(30, 58, 95, .12); } .vs-cell:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(15, 23, 42, .08); } .vs-cell.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 6px rgba(30,58,95,.32); } .vs-cell.disabled { opacity: .42; pointer-events: none; background: var(--bg-soft); border: 1px dashed #cbd5e1; color: var(--text-3); box-shadow: none; } .vs-cell.disabled .vs-cell-races { color: var(--text-3); } /* グリッドの隙間も少し広げて境界が一層分かりやすく */ .vs-grid { gap: 8px !important; } @media (min-width: 720px) { .vs-grid { gap: 10px !important; } } .header .title-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:6px; /* 2026-07-05 モバイル: subtitle が white-space:nowrap+flex-shrink:0 のため、 狭幅では固定幅を確保してブランドタイトル(.title)を極細に潰し漢字が縦割れしていた。 flex-wrap:wrap で収まらない時だけ subtitle を2行目へ落とす(広幅は従来の1行維持)。 */ flex-wrap:wrap; } .header .title { font-size:22px; font-weight:800; letter-spacing:-.01em; line-height:1.2; margin:0; } .header .subtitle { font-size:12px; opacity:.78; white-space:nowrap; flex-shrink:0; font-variant-numeric: tabular-nums; } .header .back-link { display:inline-block; font-size:12px; opacity:.8; margin-top:4px; transition: opacity var(--transition); /* F9: PC でも視認できる程度に padding を強化 */ padding: 4px 10px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); border-radius: 8px; color: #fff; text-decoration: none; } .header .back-link:hover { opacity:1; background: rgba(255,255,255,.18); } @media (min-width: 720px) { .header .back-link { font-size: 13px; padding: 6px 14px; } } /* ============================================================ レース詳細ページ用のコンパクトヘッダー（1行レイアウト）。 普段の3行ヘッダー (brand-row + title-row + back-link) を1行に まとめて約30px節約。データ表示のためのスペースを最大化。 ============================================================ */ .header.header-compact { display: flex; align-items: center; gap: 8px; padding: 6px 14px; min-height: 0; } .header.header-compact .brand-icon { font-size: 22px; text-decoration: none; color: #fff; opacity: .92; flex-shrink: 0; line-height: 1; } .header.header-compact .brand-icon:hover { opacity: 1; } .header.header-compact .hc-info { flex: 1 1 auto; min-width: 0; line-height: 1.2; display: flex; flex-direction: column; } .header.header-compact .hc-title { font-size: 17px; font-weight: 700; letter-spacing: .01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } .header.header-compact .hc-sub { font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; color: #fff; } .header.header-compact .hc-action { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .header.header-compact .hc-back { font-size: 12px; opacity: .9; color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 7px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); transition: opacity var(--transition), background var(--transition); white-space: nowrap; font-weight: 600; } .header.header-compact .hc-back:hover { opacity: 1; background: rgba(255,255,255,.16); } /* Compact-header limits the venue switcher button so it doesn't dominate the row. */ .header.header-compact .vs-trigger { padding: 5px 9px; font-size: 12px; min-height: 32px; border-radius: 7px; } .header.header-compact .vs-trigger .vs-caret { font-size: 10px; } /* 2026-07-05 モバイル: ヘッダ右上3ボタン(見方/戻る/会場▾)を44px級タップ標的に。 縦方向の拡張のみ(横は詰めない)＋隣接ギャップを広げて近接誤タップを減らす。 */ @media (max-width: 719px) { .header.header-compact .hc-action { gap: 9px; } /* review3: 幅105px に nowrap で「びわこ 1R...」と切れていた → 2行まで許す */ .header.header-compact .hc-title { white-space: normal; font-size: 15px; line-height: 1.15; } .header.header-compact .hc-back, .header.header-compact .vs-trigger, .header.header-compact .help-chip { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } @media (min-width: 720px) { .header.header-compact { padding: 8px 18px; gap: 12px; } .header.header-compact .brand-icon { font-size: 26px; } .header.header-compact .hc-title { font-size: 22px; } .header.header-compact .hc-sub { font-size: 13px; } .header.header-compact .hc-back { font-size: 14px; padding: 8px 16px; } .header.header-compact .vs-trigger { font-size: 13px; padding: 7px 12px; min-height: 36px; } } @media (min-width: 1100px) { .header.header-compact { padding: 10px 24px; } .header.header-compact .brand-icon { font-size: 30px; } .header.header-compact .hc-title { font-size: 26px; } .header.header-compact .hc-sub { font-size: 14px; } } .body { padding:16px; max-width:560px; margin:0 auto; } @media (min-width: 720px) { body { font-size:19px; } .body { max-width:820px; padding:22px 26px; } .header { padding:10px 26px 14px; } .header .brand { font-size:21px; } .header .title { font-size:28px; } .header .subtitle { font-size:14px; } } @media (min-width: 1100px) { body { font-size:20px; } .body { max-width:1080px; padding:28px 32px; } .header { padding:12px 32px 16px; } .header .brand { font-size:24px; } .header .title { font-size:32px; } .header .subtitle { font-size:15px; } } @media (min-width: 1500px) { body { font-size:21px; } .body { max-width:1320px; padding:32px 40px; } .header { padding:14px 40px 18px; } .header .title { font-size:36px; } .header .brand { font-size:26px; } } .card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:12px; margin-bottom:12px; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } @media (min-width: 720px) { .card { padding: 20px; margin-bottom: 22px; } } .notice-card { background:#fff5f6; border-color:#f7c1c8; } .notice-card .title { font-weight:700; color:#b22a3d; font-size:13px; letter-spacing:.01em; } .notice-card .body { font-size:12px; line-height:1.7; color:#444; margin-top:6px; } /* chart-box 末尾に置いたときの版（card 全体スタイルではなく "チャートの脚注" 扱いなので余白を控えめに）。 */ .chart-notice-card { margin-top: 10px; padding: 8px 12px; background:#fff5f6; border: 1px solid #f7c1c8; border-radius: 8px; } .chart-notice-card .title { font-weight:700; color:#b22a3d; font-size:13px; } .chart-notice-card .body { font-size:12px; line-height:1.55; color:#444; margin-top:4px; } @media (min-width: 720px) { .chart-notice-card .title { font-size:13px; } .chart-notice-card .body { font-size:12px; } } /* Top-page intro hero — describes the site to first-time visitors. */ .site-intro { background: linear-gradient(135deg, #1e3a5f 0%, #2d4f7d 100%); color: #fff; padding: 18px 20px; border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow-md); } .site-intro-title { margin: 0 0 8px; font-size: 22px; font-weight: 900; letter-spacing: -.01em; line-height: 1.3; } .site-intro-lead { margin: 0 0 10px; font-size: 14px; line-height: 1.75; opacity: .95; } .site-intro-lead b { color: #ffd470; font-weight: 700; } .site-intro-features { margin: 8px 0 0; padding: 0; list-style: none; } .site-intro-features li { margin: 5px 0; font-size: 13px; line-height: 1.65; opacity: .92; } .site-intro-features li b { color: #ffd470; font-weight: 700; } @media (min-width: 720px) { .site-intro { padding: 24px 28px; } .site-intro-title { font-size: 28px; } .site-intro-lead { font-size: 16px; } .site-intro-features li { font-size: 14px; } } /* Per-racer page styles */ /* B4: 選手プロフィール 1-col layout (全画面幅) */ .racer-grid { display: block; max-width: 720px; margin: 0 auto; } .rcr-profile { margin-bottom: 14px; } .rcr-profile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; } .rcr-profile-grid > div { display: flex; flex-direction: column; align-items: center; } .rcr-profile-grid .lbl { font-size: 11px; color: var(--text-3); } .rcr-profile-grid .num { font-weight: 700; color: var(--text); font-size: 16px; } .rcr-section { margin-top: 18px; } .rcr-section h2 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 8px; } .rcr-section h3 { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 12px 0 4px; } .rcr-chart { width: 100%; height: auto; display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; user-select: none; -webkit-user-select: none; } .rcr-chart text { user-select: none; pointer-events: none; } .rcr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); } .rcr-table-wrap.scrolled-end { -webkit-mask-image: none; mask-image: none; } /* Initially hide rows beyond 10 — JS toggles via .style.display. */ tr.rcr-row-hidden { display: none; } .rcr-expand-btn { display: block; width: 100%; margin-top: 8px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--primary); cursor: pointer; font-family: inherit; transition: background var(--transition); } .rcr-expand-btn:hover { background: var(--bg-soft); } .rcr-chart-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; } .rcr-toggle { display: inline-flex; gap: 2px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .rcr-toggle .opt { background: transparent; border: none; padding: 6px 12px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; /* 2026-07-13 UX: 28→44px */ -webkit-tap-highlight-color: transparent; font-size: 12px; font-weight: 600; color: var(--text-2); cursor: pointer; font-family: inherit; border-radius: 999px; transition: all var(--transition); } .rcr-toggle .opt:hover { color: var(--primary); } .rcr-toggle .opt.active { background: var(--primary); color: #fff; box-shadow: 0 1px 3px rgba(30,58,95,.3); } .rcr-range-toggle .rcr-range-label { font-size: 11px; color: var(--text-3); font-weight: 600; align-self: center; padding: 0 6px; } @media (min-width: 720px) { .rcr-toggle .opt { font-size: 13px; padding: 7px 14px; } } .rcr-chart-wrap { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; } .rcr-chart-svg { width: 100%; height: auto; display: block; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .rcr-chart-svg text { user-select: none; pointer-events: none; } /* "選択した期間の平均" バッジ — グラフ上部に表示。 範囲・コース・指標の組合せに対する平均を一目で把握できる。 */ .rcr-chart-mean-badge { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; padding: 8px 12px; background: var(--bg-soft); border-left: 4px solid var(--primary); border-radius: 6px; font-variant-numeric: tabular-nums; } .rcr-chart-mean-badge .rcr-mean-label { font-size: 11px; color: var(--text-2); font-weight: 600; } .rcr-chart-mean-badge .rcr-mean-val { font-size: 22px; font-weight: 800; letter-spacing: -.01em; } .rcr-chart-mean-badge .rcr-mean-n { font-size: 11px; color: var(--text-3); font-weight: 600; } @media (min-width: 720px) { .rcr-chart-mean-badge { padding: 10px 14px; gap: 10px; } .rcr-chart-mean-badge .rcr-mean-label { font-size: 13px; } .rcr-chart-mean-badge .rcr-mean-val { font-size: 26px; } .rcr-chart-mean-badge .rcr-mean-n { font-size: 12px; } } .rcr-chart-empty { padding: 30px 16px; text-align: center; color: var(--text-3); font-size: 13px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-sm); } .rcr-tip { position: absolute; pointer-events: none; background: rgba(15,23,42,.93); color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 12px; line-height: 1.6; box-shadow: var(--shadow-lg); white-space: nowrap; opacity: 0; transition: opacity 120ms; z-index: 5; } .rcr-tip.show { opacity: 1; } .rcr-tip-d { font-size: 11px; color: #cdd5e3; margin-bottom: 2px; } .rcr-tip-v { display: flex; gap: 8px; align-items: baseline; } .rcr-tip-v .lbl { font-size: 11px; color: #cdd5e3; } .rcr-tip-v .val { font-weight: 700; font-variant-numeric: tabular-nums; } .rcr-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; font-size: 13px; box-shadow: var(--shadow-sm); } .rcr-table thead { background: var(--bg-soft); } /* review3: 全レース履歴表が 390px で「0.1/4」「11/R」と途中改行していた(親 .rcr-table-wrap が横スクロール) */ #rcr-history-table th, #rcr-history-table td { white-space: nowrap; } @media (max-width: 480px) { #rcr-history-table th, #rcr-history-table td { padding: 8px 6px; font-size: 12px; } } .rcr-table th, .rcr-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .rcr-table th { font-weight: 700; color: var(--text-2); font-size: 12px; } .rcr-table tr:last-child td { border-bottom: none; } /* 2026-09-06 選手ランキング表: 10列あるのでモバイルでは折り返さず横スクロールさせる (.rcr-table-wrap が overflow-x:auto とフェードマスクを持っている)。 min-width を与えないと 430px で全セルが2行に割れて数値が読めない。 */ .rcr-table.rr-table { min-width: 720px; } /* 単位は小さく添える。値そのものには単位を付けない(桁が読みにくくなるため) */ .rr-u { font-size: .82em; font-weight: 400; color: var(--text-3); margin-left: 1px; } /* 列ソート: 見出しは押せることが分かるよう常時 ⇅ を出し、現在の並びは ▲▼ で示す */ .rcr-table.rr-table th[data-t] { cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .rcr-table.rr-table th[data-t]::after { content: "⇅"; opacity: .3; margin-left: 3px; font-size: .85em; } .rcr-table.rr-table th[aria-sort="ascending"]::after { content: "▲"; opacity: .95; color: var(--primary); } .rcr-table.rr-table th[aria-sort="descending"]::after { content: "▼"; opacity: .95; color: var(--primary); } .rcr-table.rr-table th[data-t]:hover { color: var(--primary); } .rcr-table.rr-table th[data-t]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .rcr-table.rr-table th, .rcr-table.rr-table td { white-space: nowrap; } .rcr-table.rr-table td:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; } .rcr-table.rr-table th:nth-child(n+3) { text-align: right; } .rcr-table.rr-table td:nth-child(2) { min-width: 5.2em; } /* 最終行の「現役全体の平均」は基準線なので本文色を落として区別する */ .rcr-table.rr-table tbody tr:last-child { color: var(--text-2); background: var(--bg-soft); } @media (min-width: 720px) { .rcr-table { font-size: 14px; } .rcr-section h2 { font-size: 18px; } .rcr-profile-grid .num { font-size: 18px; } } .hint-card { background: linear-gradient(135deg, #fff9e6 0%, #fffbed 100%); border-color:#f3d77a; } .hint-card .title { font-weight:700; color:#7a5c00; font-size:13px; letter-spacing:.01em; } .hint-card .body { font-size:13px; line-height:1.75; margin-top:6px; color:#5a4400; } .hint-card .body p { margin: 6px 0; } .hint-card .body ul { margin: 4px 0; padding-left: 20px; } .hint-card .body ul li { margin: 3px 0; } .hint-card .body b { color: #4a3700; } @media (min-width: 720px) { .hint-card .body { font-size:14px; } } /* 折りたたみ式 hint-card（
）— 既定は閉じ、タップで展開。 summary は最低 48px のタップ高を確保。 */ .hint-details { padding: 0; overflow: hidden; } .hint-details > .hint-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 18px; min-height: 48px; font-weight: 700; color: #7a5c00; font-size: 14px; user-select: none; -webkit-tap-highlight-color: transparent; } .hint-details > .hint-summary::-webkit-details-marker { display: none; } .hint-summary-title { flex: 1; } .hint-summary-hint { font-size: 11px; font-weight: 600; color: var(--text-3); letter-spacing: .03em; } .hint-summary-caret { font-size: 11px; color: var(--text-3); transition: transform 200ms ease; display: inline-block; } .hint-details[open] > .hint-summary .hint-summary-caret { transform: rotate(180deg); } .hint-details[open] > .hint-summary .hint-summary-hint { display: none; } .hint-details > .body { padding: 0 18px 14px; border-top: 1px dashed rgba(122,92,0,.18); padding-top: 12px; } @media (min-width: 720px) { .hint-details > .hint-summary { font-size: 16px; padding: 16px 22px; min-height: 52px; } .hint-details > .body { padding: 14px 22px 18px; } } .tab-bar { display:flex; gap:2px; margin:14px 0 12px; font-size:13px; background: var(--surface); border-radius: var(--radius); overflow-x:auto; padding:3px; box-shadow: var(--shadow-sm); border:1px solid var(--border); scrollbar-width:none; } .tab-bar::-webkit-scrollbar { display:none; } .tab { flex:0 0 auto; padding:7px 14px; border-radius: var(--radius-sm); display:inline-flex; align-items:center; min-height:44px; /* 2026-07-13 UX: 全タブを44px標的に */ -webkit-tap-highlight-color: transparent; color: var(--text-2); cursor:pointer; user-select:none; white-space:nowrap; font-size:13px; transition: background-color var(--transition), color var(--transition); } /* Inside .sticky-bar: even tighter to maximize data area */ .sticky-bar .tab-bar { padding: 2px; } .sticky-bar .tab { padding: 6px 12px; font-size: 12.5px; } /* Inline tab-bar inside .chart-box (タブ＆説明をグラフ領域に集約したパターン). */ .chart-box .tab-bar.tab-bar-inline { margin: 0 0 6px; font-size: 13px; } .chart-box .tab-bar.tab-bar-inline .tab { padding: 7px 14px; } @media (min-width: 720px) { .sticky-bar .tab { padding: 8px 16px; font-size: 14px; } } @media (min-width: 1100px) { .tab { font-size:15px; padding:12px 20px; } .sticky-bar .tab { padding: 10px 18px; font-size: 15px; } } .tab:hover { background: rgba(30,58,95,.05); color: var(--primary); } .tab.active { background: var(--primary); color:#fff; font-weight:600; } /* Q1 (2026-05-27): 「全12R一覧」リンクは数値タブと視覚的に区別。 - 数値 R タブ群と少し離す (左 margin) - 控えめだが視認可能なボーダー */ .tab.tab-list-link { margin-left: 8px; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-2); font-weight: 600; text-decoration: none; } .tab.tab-list-link:hover { background: var(--surface); border-color: var(--primary-light); color: var(--primary); } /* --- Tab grouping (選手 / 機材 のメンタルモデル分離) --- */ /* Used inside #tabs to label "選手" tabs vs "機材" tabs and put a thin visual divider between them. Without these labels users frequently mis-read モーター/ボート as "racer-at-this-machine" stats (it is in fact MACHINE-only stats — anyone who's ridden it counts). */ .tab-group-label { align-self: center; padding: 0 6px 0 6px; font-size: 10px; color: var(--text-3); font-weight: 700; letter-spacing: .04em; white-space: nowrap; pointer-events: none; user-select: none; text-transform: uppercase; } @media (min-width: 720px) { .tab-group-label { font-size: 11px; padding: 0 8px; } } .tab-group-divider { width: 1px; background: var(--border); margin: 6px 2px; flex-shrink: 0; } /* Contextual one-liner under the tab bar that explains what the active tab actually represents (selector vs machine vs venue scope). Compact spacing: this lives in the sticky-bar so every saved px directly increases the data view area. */ .tab-explainer { display: flex; align-items: flex-start; gap: 6px; margin: -4px 4px 6px; padding: 3px 8px; font-size: 10.5px; color: var(--text-2); background: linear-gradient(135deg, #f0f5fc 0%, #e7eef9 100%); border-left: 3px solid var(--primary-light); border-radius: 6px; line-height: 1.35; /* 2026-07-05 モバイル: 以前は white-space:nowrap+overflow:hidden+ellipsis で、 狭幅だと末尾の但し書き「（誰が乗ってきたかは問わない機材データ）」が無音クリップされ、 このバナー本来の誤読防止説明が読めなかった。折り返しを許可し情報欠落を無くす(高さ可変)。 */ } .tab-explainer-icon { font-size: 14px; line-height: 1; } .tab-explainer-text b { color: var(--primary); } @media (min-width: 720px) { .tab-explainer { font-size: 13px; } } /* 選手タブ専用：グラフだけ 全国／当地 を切替するためのサブセレクタ。 chart-box 内に配置（sticky-bar からは移動）。 モーター/ボート タブのときは JS で hidden 属性が付き非表示になる。 chart-toggle と並べたときに揃って見えるよう、外見はそのスタイルを継承。 */ .scope-toggle[hidden] { display: none; } .scope-toggle .scope-toggle-label { color: var(--text-3); font-weight: 600; font-size: 11px; letter-spacing: .03em; padding: 0 8px 0 6px; align-self: center; white-space: nowrap; } @media (min-width: 720px) { .scope-toggle .scope-toggle-label { font-size: 12px; } } .toggle-row { display:flex; background:#eef2f8; border-radius:10px; padding:4px; margin-bottom:14px; font-size:13px; } .toggle-row .opt { flex:1; text-align:center; padding:8px 4px; color: var(--text-2); display:flex; align-items:center; justify-content:center; min-height:44px; /* 2026-07-13 UX: →44px */ -webkit-tap-highlight-color: transparent; cursor:pointer; user-select:none; border-radius:7px; transition: all var(--transition); } .toggle-row .opt:hover { color: var(--primary); } .toggle-row .opt.active { background: var(--surface); color: var(--primary); font-weight:600; box-shadow: var(--shadow-sm); } .player-row { display:flex; align-items:center; gap:10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .lane-badge { width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; flex-shrink:0; box-shadow: 0 1px 2px rgba(0,0,0,.15) inset, 0 1px 2px rgba(0,0,0,.08); } .player-row .name { flex:1; font-weight:700; font-size:17px; letter-spacing:.01em; } .player-row .name-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--border); display: inline-flex; align-items: center; gap: 4px; transition: color var(--transition), border-color var(--transition); } .player-row .name-link:hover { color: var(--primary); border-bottom-color: var(--primary); } .player-row .name-link-arrow { font-size: 0.85em; color: var(--text-3); font-weight: 500; } .player-row .name-link:hover .name-link-arrow { color: var(--primary); } .player-row .meta { font-size:11px; color: var(--text-3); text-align:right; line-height:1.4; } @media (min-width: 720px) { .lane-badge { width:48px; height:48px; font-size:21px; } .player-row .name { font-size:22px; } .player-row .meta { font-size:13px; } } @media (min-width: 1100px) { .lane-badge { width:52px; height:52px; font-size:23px; } .player-row .name { font-size:25px; } .player-row .meta { font-size:14px; } } .machine-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; padding:6px 10px; background: linear-gradient(135deg, #f5f8ff 0%, #eaf0fa 100%); border:1px solid #d8e1ee; border-radius:10px; font-size:13px; color: var(--text); } .machine-row .machine-label { font-weight:600; color: var(--primary); } @media (min-width: 720px) { .machine-row { font-size:17px; padding:11px 16px; } } @media (min-width: 1100px) { .machine-row { font-size:19px; padding:13px 18px; gap:12px; } } .machine-note { margin-top: 4px; font-size: 11px; color: var(--text-3); line-height: 1.5; } @media (min-width: 720px) { .machine-note { font-size: 12px; } } .champ { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; background: linear-gradient(135deg, #fff4c2 0%, #fde08a 100%); border:1px solid #e9b831; color:#6b3e00; font-weight:700; font-size:12px; white-space:nowrap; letter-spacing:.01em; box-shadow: 0 1px 3px rgba(184,119,10,.2); } .champ.silver { background: linear-gradient(135deg, #f0f0f0 0%, #d6d6d6 100%); border-color:#a0a0a0; color:#444; box-shadow: 0 1px 3px rgba(80,80,80,.15); } .champ { cursor: pointer; position: relative; } .champ-popup { position: fixed; z-index: 200; background: rgba(15,23,42,.94); color:#fff; padding:10px 14px; border-radius:10px; font-size:12px; line-height:1.7; box-shadow: var(--shadow-lg); max-width: 240px; min-width: 140px; opacity:0; pointer-events:none; transition: opacity 120ms; } .champ-popup.show { opacity:1; } .champ-popup { word-break: keep-all; overflow-wrap: break-word; line-break: strict; } .champ-popup .pop-title { font-weight:700; margin-bottom:2px; font-size:13px; } .champ-popup .pop-count { font-size:11px; color:#cdd5e3; font-weight:600; margin-bottom:6px; font-variant-numeric: tabular-nums; } .champ-popup .pop-date { font-variant-numeric: tabular-nums; } .champ-popup .pop-more { color:#cdd5e3; font-size:11px; margin-top:4px; } .champ-popup.silver { background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%); } @media (min-width: 720px) { .champ { font-size:15px; padding:7px 16px; } } @media (min-width: 1100px) { .champ { font-size:17px; padding:8px 18px; } } .champ.has-recent { box-shadow: 0 0 0 2px var(--accent), 0 1px 3px rgba(217,53,76,.35); } .champ-recent { font-size: 11px; line-height: 1; margin-left: 1px; } .recent-note { margin-top: 6px; font-size: 12px; color: var(--accent); font-weight: 600; display: flex; gap: 6px; align-items: center; } @media (min-width: 720px) { .recent-note { font-size: 13px; } } .grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:6px; } .stat { text-align:center; background: var(--bg-soft); padding:8px 4px; border-radius: var(--radius-sm); border:1px solid #eef2f8; } .stat .num { font-weight:700; font-size:19px; color: var(--primary); letter-spacing:-.01em; } .stat .lbl { font-size:11px; color: var(--text-3); margin-top:2px; } @media (min-width: 720px) { .stat { padding:12px 4px; } .stat .num { font-size:26px; } .stat .lbl { font-size:13px; margin-top:4px; } } @media (min-width: 1100px) { .stat { padding:18px 6px; } .stat .num { font-size:30px; } .stat .lbl { font-size:14px; } } /* Compact summary of course-specific stats below the grid-3. Title (e.g. "3コース時の成績（全国）(15走)") is on its own line, with the 勝率/2連/3連 numbers wrapping onto a second line below. Left-accent border keeps it visually distinct from the ST grey block. */ .course-mini { margin-top: 6px; padding: 5px 10px 6px 9px; background: transparent; border-left: 3px solid var(--primary-light); border-radius: 0 6px 6px 0; font-size: 11.5px; color: var(--text-2); } .course-mini .cm-label { display: block; font-weight: 700; color: var(--primary); font-size: 10.5px; margin-bottom: 3px; letter-spacing: .02em; } .course-mini .cm-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; } .course-mini .cm-val { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; } .course-mini .cm-val .lbl { color: var(--text-3); font-size: 11px; } .course-mini .cm-val b { color: var(--primary); font-weight: 700; font-size: 13px; } .course-mini.course-mini-empty { color: var(--text-3); font-size: 11px; display: block; } @media (min-width: 720px) { .course-mini { font-size: 13px; padding: 6px 14px 6px 12px; } .course-mini .cm-label { font-size: 11.5px; } .course-mini .cm-val .lbl { font-size: 12px; } .course-mini .cm-val b { font-size: 15px; } } /* Compact one-liner ST averages (全国 / 当地 / モーター / ボート). Sits inside .st-spark, right under the section heading. */ .st-mini { margin-top: 0; padding: 0; font-size: 11.5px; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .st-mini .sm-label { font-weight: 600; color: var(--text); margin-right: 4px; } .st-mini .sm-val { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; } .st-mini .sm-val .lbl { color: var(--text-3); font-size: 11px; } .st-mini .sm-val b { color: var(--primary); font-weight: 700; font-size: 13px; } @media (min-width: 720px) { .st-mini { font-size: 13px; } .st-mini .sm-val .lbl { font-size: 12px; } .st-mini .sm-val b { font-size: 15px; } } /* #3: 当地×コース のクロスST 1行 / 決まり手プロファイルの注記 */ .st-cross { margin-top: 4px; font-size: 11.5px; color: var(--text-2); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .st-cross .lbl { color: var(--text-3); } .st-cross b { color: var(--primary); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .km-note { margin-top: 4px; font-size: 10.5px; color: var(--text-3); line-height: 1.45; } @media (min-width: 720px) { .st-cross { font-size: 13px; } .st-cross b { font-size: 15px; } .km-note { font-size: 11.5px; } } /* Sparkline SVG — disable text selection so axis labels can't be highlighted. */ .st-spark-svg, .st-spark-svg text { user-select: none; -webkit-user-select: none; } .st-spark-svg text { pointer-events: none; } /* Per-card ST sparkline (last N race STs). Wraps the .st-mini summary line + a compact SVG. Slight blue tint (instead of plain grey) so it visually separates from the grid-3 (white) and course-mini (white + left accent) above it. */ .st-spark { margin-top: 6px; padding: 6px 10px 8px; background: linear-gradient(135deg, #f5f8fc 0%, #eef3fa 100%); border-radius: var(--radius-sm); border: 1px solid #e3eaf3; } /* Section heading inside the ST block: small uppercase-style label so the role of this card section ("STデータ") is unambiguous. */ .st-section-head { font-size: 10px; font-weight: 700; color: var(--primary); letter-spacing: .04em; margin-bottom: 4px; } @media (min-width: 720px) { .st-section-head { font-size: 11px; } } .st-spark-title { font-size: 10px; color: var(--text-3); font-weight: 600; margin: 4px 0 2px; } .st-spark-svg { width: 100%; height: auto; display: block; } .st-spark-latest { display: inline-flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; font-size: 10.5px; } .st-spark-latest .lt-item { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); } .st-spark-latest .lt-key { font-size: 12px; line-height: 1; } .st-spark-latest .lt-name { font-weight: 600; } .st-spark-latest .lt-val { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } /* Mean-of-tail row: averages of the displayed window. Sits just below .st-spark-latest with a thin divider so it's clearly a separate signal ("most recent" vs "average of recent"). */ .st-spark-means { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border); font-size: 10.5px; } .st-spark-means .mn-item { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); } .st-spark-means .mn-key { font-size: 12px; line-height: 1; } .st-spark-means .mn-name { font-weight: 600; } .st-spark-means .mn-val { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } @media (min-width: 720px) { .st-spark-means { font-size: 12px; } } @media (min-width: 720px) { .st-spark { padding: 6px 16px 10px; } .st-spark-title { font-size: 12px; } .st-spark-latest { font-size: 12px; } } .st-spark-empty { margin-top: 8px; padding: 8px 10px; font-size: 11px; color: var(--text-3); background: var(--bg-soft); border: 1px dashed var(--border); border-radius: var(--radius-sm); text-align: center; } @media (min-width: 720px) { .st-spark-label { font-size: 11px; } } .chart-box { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:14px; margin-bottom:12px; box-shadow: var(--shadow-sm); } .chart-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:10px; } .chart-title { font-size:14px; font-weight:700; color: var(--text); display: inline-flex; align-items: center; gap: 6px; } .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-soft); color: var(--text-2); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; font-family: inherit; position: relative; transition: background var(--transition), color var(--transition); } .info-icon:hover, .info-icon.show { background: var(--primary); color: #fff; border-color: var(--primary); } .info-tip { position: fixed; z-index: 250; background: rgba(15,23,42,.94); color: #fff; padding: 10px 14px; border-radius: 10px; font-size: 12px; line-height: 1.6; font-weight: 400; box-shadow: var(--shadow-lg); max-width: 280px; min-width: 180px; opacity: 0; pointer-events: none; transition: opacity 120ms; } .info-tip.show { opacity: 1; } @media (min-width: 720px) { .info-icon { width: 20px; height: 20px; font-size: 12px; } } .chart-sub { font-size:11px; color: var(--text-3); margin-bottom:6px; } .chart-dsq-note { font-size: 11px; color: var(--accent); font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 6px; } .chart-dsq-note[hidden] { display: none; } .chart-dsq-note .x-mark { display: inline-block; width: 12px; height: 12px; position: relative; flex-shrink: 0; } .chart-dsq-note .x-mark::before, .chart-dsq-note .x-mark::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--accent); transform-origin: center; } .chart-dsq-note .x-mark::before { transform: translate(-50%, -50%) rotate(45deg); } .chart-dsq-note .x-mark::after { transform: translate(-50%, -50%) rotate(-45deg); } @media (min-width: 1100px) { .chart-title { font-size:16px; } } .chart-toggle { display:inline-flex; background: var(--bg-soft); border-radius:8px; padding:3px; gap:0; } .chart-toggle .opt { padding:6px 12px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; min-height:44px; /* 2026-07-13 UX: →44px */ -webkit-tap-highlight-color: transparent; font-size:12px; color: var(--text-2); border:none; background:transparent; cursor:pointer; font-family:inherit; font-weight:500; transition: all var(--transition); } .chart-toggle .opt:hover:not(.active):not([hidden]) { color: var(--primary); } .chart-toggle .opt.active { background: var(--surface); color: var(--primary); font-weight:700; box-shadow: var(--shadow-sm); } .chart-toggle .opt[hidden] { display:none; } @media (min-width: 720px) { .chart-toggle .opt { font-size:13px; padding:7px 14px; } } @media (min-width: 1100px) { .chart-toggle .opt { font-size:14px; padding:8px 16px; } } /* グループ分割版（成績 vs ST）— ラベルとボタンを混在させる 2グループ構成。ラベルは小さく非インタラクティブ、間に縦線で視覚分離。 */ .indicator-toggle-grouped { flex-wrap: wrap; align-items: center; gap: 0; } .indicator-toggle-grouped .ind-group-label { font-size: 10.5px; font-weight: 700; color: var(--text-3); letter-spacing: .05em; padding: 0 6px 0 4px; user-select: none; } .indicator-toggle-grouped .ind-group-divider { display: inline-block; width: 1px; height: 20px; background: var(--border); margin: 0 6px; } @media (min-width: 720px) { .indicator-toggle-grouped .ind-group-label { font-size: 11.5px; padding: 0 8px 0 6px; } .indicator-toggle-grouped .ind-group-divider { height: 22px; margin: 0 8px; } } /* 全ボタンが hidden の時はグループラベルも視覚的にミュート */ .indicator-toggle-grouped .ind-group-label[data-group="rate"]:has(~ .opt-rate:not([hidden])) { color: var(--text-2); } .indicator-toggle-grouped .ind-group-label[data-group="st"]:has(~ .opt-st:not([hidden])) { color: var(--text-2); } /* Range selector — sits below the indicator toggle. */ .chart-range-toggle { margin-top: 6px; flex-wrap: wrap; gap: 4px; } .chart-range-toggle .range-label { font-size: 11px; color: var(--text-3); font-weight: 600; align-self: center; margin-right: 4px; } @media (min-width: 720px) { .chart-range-toggle .range-label { font-size: 12px; } } .chart-wrap { position:relative; } svg.chart { width:100%; height:auto; display:block; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } /* On PC viewports, cap the SVG chart so the whole chart-box fits in one viewport height. We constrain only the SVG (not the box) so the toggles/legend stay visible. The minus accounts for header, sticky-bar, chart-header, two toggle rows, sub line, legend and the racer-cards visibility goal. */ @media (min-width: 1100px) { svg.chart { max-height: calc(100vh - 380px); min-height: 160px; } } @media (min-width: 1500px) { svg.chart { max-height: calc(100vh - 400px); } } svg.chart text { user-select: none; -webkit-user-select: none; pointer-events: none; } .chart-tooltip, .legend, .legend-item { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .chart-box { contain: layout paint; } .chart-tooltip { position:absolute; pointer-events:none; background: rgba(15,23,42,.92); color:#fff; padding:8px 12px; border-radius:8px; font-size:11px; line-height:1.6; box-shadow: var(--shadow-lg); transform: translateX(-50%); white-space: nowrap; opacity:0; transition: opacity 120ms; z-index:1; } .chart-tooltip.show { opacity:1; } .chart-tooltip .row { display:flex; align-items:center; gap:6px; } .chart-tooltip .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .chart-tooltip .dt { color:#cdd5e3; font-size:10px; margin-bottom:4px; } .chart-tooltip .val { font-variant-numeric: tabular-nums; } .chart-guide { position:absolute; top:0; bottom:0; width:1px; background:rgba(30,58,95,.4); pointer-events:none; opacity:0; transition: opacity 120ms; } .chart-guide.show { opacity:1; } .legend { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .legend-item { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--border); border-radius: 999px; cursor:pointer; user-select:none; background: var(--surface); font-size:11px; font-weight:500; transition: all var(--transition); } .legend-item:hover { border-color: var(--primary-light); transform: translateY(-1px); } .legend-item.off { opacity:.35; background: var(--bg); } .legend-dot { width:10px; height:10px; border-radius:50%; } .compare-fab { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); background: var(--accent); color:#fff; border-radius:999px; padding:13px 22px; font-weight:600; font-size:13px; box-shadow: 0 6px 18px rgba(217,53,76,.35); cursor:pointer; user-select:none; z-index:5; } /* ============================================================ 日付ナビ（前日 / 翌日） — 曜日付き、48px+ タップ高、左右ボタン形状。 元は .tab-bar に紛れていたが、独立した nav に格上げ。 ============================================================ */ .date-nav { display: flex; gap: 8px; margin: 12px 0 14px; min-width: 0; /* M3: flex 親が縮める許可 */ } .date-nav-link { flex: 1 1 0; min-width: 0; /* M3: 子も縮む */ min-height: 52px; display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm); transition: background var(--transition), border-color var(--transition), transform 120ms ease-out; font-weight: 600; overflow: hidden; /* M3: はみ出した子を隠す */ } .date-nav-link:hover { background: var(--bg-soft); border-color: var(--primary-light); transform: translateY(-1px); } .date-nav-link:active { transform: translateY(0); } .date-nav-link.prev { justify-content: flex-start; } .date-nav-link.next { justify-content: flex-end; } .date-nav-link.disabled { opacity: .4; pointer-events: none; background: transparent; box-shadow: none; } .date-nav-arrow { font-size: 16px; color: var(--primary); flex-shrink: 0; } .date-nav-label { font-size: 11px; color: var(--text-3); font-weight: 700; letter-spacing: .04em; } .date-nav-date { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-left: auto; } .date-nav-link.next .date-nav-date { margin-left: 0; margin-right: auto; } /* M3+M6 (2026-05-26): 狭い phone (~360px) で前日/翌日リンク全体が ◀ + 「前日」 + 日付 で詰まる。狭画面では日付を非表示にし 矢印＋ラベル「前日 / 翌日」だけのコンパクト UI に切替える。 日付の確認は中央の picker (2026/5/25（月）) で行える。 */ @media (max-width: 519px) { .date-nav { gap: 6px; } .date-nav-link { padding: 6px 8px; min-height: 48px; gap: 6px; min-width: 72px; /* M6: 「前日」が 2 行に割れないだけの幅を確保 */ } .date-nav-link.prev { justify-content: center; } .date-nav-link.next { justify-content: center; } .date-nav-label { font-size: 13px; white-space: nowrap; /* M6: 「前日」「翌日」を絶対に縦割れさせない */ word-break: keep-all; overflow-wrap: normal; } .date-nav-date { display: none; } /* 狭画面で日付は隠す */ .date-nav-arrow { font-size: 16px; } /* M6: 中央 picker を圧迫しすぎないよう select の max-width を縮める */ .date-nav-select { max-width: 160px; font-size: 13px; } .date-nav-picker { padding: 0 10px; } } @media (min-width: 720px) { .date-nav-link { min-height: 56px; padding: 10px 18px; } .date-nav-arrow { font-size: 18px; } .date-nav-label { font-size: 12px; } .date-nav-date { font-size: 16px; } } /* 日付ドロップダウン — 前日と翌日の中央。native