/* jvdata_oddsdiffreport.css
   Generated by moving inline CSS from jvdata_oddsdiffreport.php
   Keep this file under php/ and ensure webserver can serve it.
*/

/* すべての要素のアニメーションとトランジションを強制的に無効化 */
*,
*::before,
*::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: none !important;
  animation-name: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  transition-property: none !important;
}

/* アニメーションでよく使われるプロパティも直接固定 */
.has-ran-icon,
.has-ran-icon *,
.clickable-confirmed,
.clickable-confirmed *,
.confirmed-tooltip,
.confirmed-tooltip *,
.icon-confirmed,
.icon-popup,
.confirmed-label {
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

/* 小さな上書きはここに。 */
.nav-btn,
.nav-btn.disabled {
  text-align: center;
}

.race-title {
  background: #fdf5e6;
}

.race-header {
  background: #fdf5e6 !important;
}

.race-section {
  /* アンカー時にヘッダや追従ナビが重ならないように余白を確保 */
  scroll-margin-top: 160px;
}

.has-ran-icon {
  display: inline-block;
  color: #d32f2f;
  background: #fff;
  border: 2px solid #d32f2f;
  border-radius: 1em;
  padding: 0 0.7em;
  font-size: 0.95em;
  font-weight: bold;
  margin-left: 0.5em;
  vertical-align: middle;
  line-height: 1.7em;
  /* アニメーション無効化 */
  animation: none !important;
  transition: none !important;
}

.page-title {
  font-size: 36px !important;
  line-height: 1.5;
}

.odds-red {
  color: #ff0000 !important;
  font-weight: bold;
}

.odds-blue {
  color: #0066cc !important;
  font-weight: bold;
}

.odds-black {
  color: #000000 !important;
  word-break: break-all;
  white-space: normal;
  text-align: left;
  margin: 24px 0 16px 0;
  padding: 0;
  font-weight: bold;
}

.page-header {
  padding-top: 32px;
}

.page-header__inner {
  min-height: 120px;
  display: block;
  padding: 0 0 12px 0;
}

.confirmed-tooltip {
  display: none;
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 20000;
  background: #fff;
  color: #222;
  border: 1px solid #1976d2;
  border-radius: 8px;
  padding: 16px 24px;
  font-size: 15px;
  min-width: 180px;
  max-width: 90vw;
  max-height: 70vh;
  overflow: auto;
  /* アニメーション・影無効化 */
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

.confirmed-tooltip.visible {
  display: block;
}

.has-ran-icon.clickable-confirmed {
  cursor: pointer;
  background: #1976d2;
  border-color: #1976d2;
  color: #fff;
  position: relative;
  /* アニメーション無効化 */
  animation: none !important;
  transition: none !important;
}

.tooltip-close-btn {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  color: #666;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  /* アニメーション無効化 */
  animation: none !important;
  transition: none !important;
}

.tooltip-close-btn:hover {
  color: #333;
  background: #f0f0f0;
  border-radius: 50%;
  /* ホバー時のアニメーションも無効化 */
  animation: none !important;
  transition: none !important;
}

/* 確定アイコン関連要素のアニメーション完全無効化 */
.confirmed-label,
.icon-popup,
.icon-confirmed {
  animation: none !important;
  transition: none !important;
}

/* 確定アイコンとその子孫要素すべてのアニメーション・影を無効化 */
.has-ran-icon,
.has-ran-icon *,
.confirmed-tooltip,
.confirmed-tooltip *,
.tooltip-close-btn,
.tooltip-close-btn * {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
}

/* ボタン類の影を無効化 */
.nav-btn,
.place-btn,
.race-btn {
  box-shadow: none !important;
}

/* PC表示用のデフォルトCSS */
.race-header {
  background: #fdf5e6 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}

.race-title {
  background: #fdf5e6;
}

.race-nav-btns {
  display: flex !important;
  gap: 4px !important;
}

/* モバイル対応レスポンシブCSS */
@media screen and (max-width: 768px) {

  /* body要素とhtml要素の幅制御を強化 */
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 全体のコンテナ幅を最大化 */
  .container,
  .odds-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* トップナビゲーションの調整 */
  .top-sticky-nav {
    width: 100% !important;
    font-size: 10px !important;
  }

  .top-sticky-nav__inner {
    font-size: 10px !important;
    padding: 4px 2px !important;
    gap: 6px !important;
  }

  /* レース別セクション全体の強制的全幅設定 */
  .race-section,
  .race-title,
  .race-header-container,
  .tansho-section,
  .umaren-section,
  .hrpay-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* レース別セクションの調整 */
  .race-section {
    margin: 6px 0 !important;
    padding: 0 4px !important;
  }

  /* レースヘッダー（モバイル専用2段表示） */
  .race-header {
    display: block !important;
    width: 100% !important;
    background: #fdf5e6 !important;
    margin: 4px 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  /* レースタイトル（上段・モバイル専用） */
  .race-title {
    width: 100% !important;
    padding: 4px 4px 2px 4px !important;
    margin: 0 !important;
    font-size: 14px !important;
    box-sizing: border-box;
    display: block !important;
    background: #fdf5e6 !important;
    line-height: 1.2 !important;
  }

  /* レースナビゲーションボタン（下段・モバイル専用） */
  .race-nav-btns {
    width: 100% !important;
    padding: 2px 4px 4px 4px !important;
    margin: 0 !important;
    font-size: 10px !important;
    box-sizing: border-box;
    justify-content: flex-start !important;
    display: flex !important;
    background: #fdf5e6 !important;
    gap: 3px !important;
  }

  /* カード要素の全幅対応と左揃え統一 */
  .card {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    border-radius: 0 !important;
  }

  .tansho-section .card,
  .umaren-section .card,
  .hrpay-section .card {
    overflow-x: visible !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
  }

  /* カードタイトルの調整 */
  .card__title {
    font-size: 12px !important;
    padding: 6px 4px !important;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
  }

  /* テーブル全幅表示とフォント調整 - 外部CSS完全上書き */
  .tansho-section table,
  .umaren-section table,
  .hrpay-section table,
  .tansho-table,
  .matrix-table,
  .hrpay-table,
  table {
    font-size: 10px !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .tansho-table th,
  .tansho-table td,
  .matrix-table th,
  .matrix-table td,
  .hrpay-table th,
  .hrpay-table td {
    padding: 4px 3px;
    white-space: nowrap;
    text-align: center;
    font-size: 10px !important;
  }

  /* 単勝テーブルのセル幅最適化（右側の空白を完全に埋める） */
  .tansho-table .c-uma {
    width: 15% !important;
  }

  .tansho-table .c-name {
    width: 35% !important;
    white-space: normal !important;
    word-break: break-word;
    text-align: left !important;
    padding-left: 6px !important;
  }

  .tansho-table .c-base,
  .tansho-table .c-diff {
    width: 20% !important;
  }

  .tansho-table .c-ratio {
    width: 18% !important;
  }

  .tansho-table .c-pop {
    width: 12% !important;
  }

  /* 競走除外バッジ */
  .excluded-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    background: rgba(200, 200, 200, 0.22);
    color: #333;
    border-radius: 4px;
    font-size: 11px !important;
    vertical-align: middle;
    font-weight: 600;
    border: 1px solid rgba(160, 160, 160, 0.4);
  }

  /* 馬連セクション専用 - 馬連テーブルのセル調整（全幅活用） */
  .umaren-section .matrix-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    /* ホバー時の拡大効果のためseparateに変更 */
    border-spacing: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* 馬連セクション専用 - 標準的な18頭立ての場合の幅設定 */
  .umaren-section table.matrix-table th,
  .umaren-section table.matrix-table td {
    width: 5.55% !important;
    /* 100% / 18 = 5.55% */
    min-width: 5.55% !important;
    max-width: 5.55% !important;
    padding: 1px !important;
    font-size: 7px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
  }

  /* 馬連セクション専用 - 馬連オッズのテキストサイズを更に小さく */
  .umaren-section table.matrix-table .val {
    font-size: 6px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.2s ease !important;
  }

  /* 拡大表示用の要素のスタイル - 他に影響しないよう完全分離 */
  .matrix-enlarged-display {
    font-family: inherit !important;
    position: absolute !important;
    z-index: 10001 !important;
    background: #fff !important;
    border: 3px solid #1976d2 !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
    padding: 10px 14px !important;
    font-weight: bold !important;
    color: #333 !important;
    white-space: nowrap !important;
    text-align: center !important;
    min-width: 60px !important;
    min-height: 30px !important;
    pointer-events: none !important;
    /* クリックイベントを通さない */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  /* 馬連セクション専用 - セルホバー時の拡大表示 */
  .umaren-section table.matrix-table tbody tr td:hover,
  .umaren-section table.matrix-table td:hover {
    cursor: pointer !important;
  }

  /* 馬連セクション専用 - ヘッダーセルのホバー効果 */
  .umaren-section table.matrix-table thead tr th:hover,
  .umaren-section table.matrix-table th:hover {
    cursor: pointer !important;
  }

  /* 馬連マトリクステーブル専用 - 16頭立ての場合 */
  .umaren-section table.matrix-table[style*="--cols: 17"] th,
  .umaren-section table.matrix-table[style*="--cols: 17"] td {
    width: 6.25% !important;
    /* 100% / 16 = 6.25% */
    min-width: 6.25% !important;
    max-width: 6.25% !important;
    padding: 1px !important;
    font-size: 7px !important;
  }

  /* 馬連マトリクステーブル専用 - 14頭立ての場合 */
  .umaren-section table.matrix-table[style*="--cols: 15"] th,
  .umaren-section table.matrix-table[style*="--cols: 15"] td {
    width: 7.14% !important;
    /* 100% / 14 = 7.14% */
    min-width: 7.14% !important;
    max-width: 7.14% !important;
    padding: 1px !important;
    font-size: 8px !important;
  }

  /* 馬連マトリクステーブル専用 - 12頭立ての場合 */
  .umaren-section table.matrix-table[style*="--cols: 13"] th,
  .umaren-section table.matrix-table[style*="--cols: 13"] td {
    width: 8.33% !important;
    /* 100% / 12 = 8.33% */
    min-width: 8.33% !important;
    max-width: 8.33% !important;
    padding: 1px !important;
    font-size: 9px !important;
  }

  /* 馬連セクション専用 - matrix-wrapの調整 */
  .umaren-section .matrix-wrap {
    width: 100% !important;
    overflow: visible !important;
    /* ホバー拡大時に切り取られないようにする */
    position: relative !important;
    padding: 20px !important;
    /* 拡大時のはみ出しを防ぐ余白 */
    margin: -20px !important;
    /* paddingを相殺してレイアウトを維持 */
  }

  /* 親要素の基本設定のみ保持 */
  .race-content,
  .wp-content,
  body {
    overflow-x: visible !important;
  }

  /* グローバルなスタイル設定は全て削除済み - 馬連マトリクス専用設定のみ残す */

  /* オッズ変動履歴のモバイル対応 - マトリクステーブル以外に限定 */
  /* 関係のないエリアへの影響を防ぐため、グローバル設定は削除済み */
}

/* jvdata_oddsdiffreport.css (v6) */

:root {
  --bg: #f4f6fa;
  --card: #ffffff;
  --ink: #111827;
  --muted: #6b7280;
  --accent: #2c7be5;
  --accent-weak: #e8f1fe;
  /* --line:#e5e7eb; */
  --line: hwb(240 64% 29%);
  --warn: #ffe5e5;
  /* 赤背景（薄め） */
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  background: var(--bg);
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Meiryo", Roboto, Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: .2px;
}

/* Top Sticky Nav (メインタイトルより上) */
.top-sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(244, 246, 250, .98);
  backdrop-filter: saturate(120%) blur(2px);
  border-bottom: 1px solid var(--line);
}

.top-sticky-nav__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.place-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

.race-links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* 共通ボタン */
.nav-btn {
  appearance: none;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #374151;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}

.nav-btn:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}

.nav-btn.active {
  background: #2c7be5;
  color: #fff;
  border-color: #2c7be5;
}

/* 競馬場選択ボタン */
.place-btn {
  background: #eef2ff;
}

/* レース番号ボタン */
.race-btn {
  background: #98fb98 !important;
}

.race-btn.active {
  background: #2c7be5 !important;
  color: #fff !important;
  border-color: #2c7be5 !important;
}

/* Header */
.page-header {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.page-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.meta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.meta__item {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.meta__label {
  background: var(--accent-weak);
  color: #1a56db;
  border: 1px solid #d6e4ff;
  padding: 2px 6px;
  border-radius: 6px;
}

.meta__value {
  color: #111827;
}

/* Content */
.content {
  max-width: 1400px;
  margin: 16px auto 40px auto;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.race-section {
  scroll-margin-top: 92px;
}

.race-header {
  padding: 8px 10px;
  border-left: 4px solid var(--accent);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 10px;
}

.race-title {
  font-weight: 700;
  color: #1f2937
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.card__title {
  padding: 6px 10px 4px 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  color: #111827;
}

/* Grid - 横並びレイアウトのみ適用 */
.layout-horizontal .odds-container {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 12px;
}

@media (max-width: 1100px) {
  .layout-horizontal .odds-container {
    grid-template-columns: 1fr;
  }
}

.odds-container {
  margin-top: 10px;
}

/* Chips (tooltip) */
.chipwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.chipwrap .chip {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: #111827;
  color: #fff;
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  z-index: 5;
}

.chipwrap:hover .chip {
  display: block;
}

/* --- チップ（オッズ・人気）共通 --- */
.chip,
.pop-chip {
  display: inline-block;
  width: 0;
  height: 0;
  background: none;
  border-radius: 0;
  margin-left: 0;
  vertical-align: middle;
  cursor: pointer;
}

.chip::after,
.pop-chip::after {
  content: '';
  display: none;
}

/* Tansho Table */
.tansho-table {
  width: 100%;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.tansho-table thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 2;
  font-size: 12px;
  white-space: nowrap;
}

.tansho-table th,
.tansho-table td {
  padding: 6px 8px;
}

/* borders handled by .odds-table */
.tansho-table th:first-child,
.tansho-table td:first-child {}

.tansho-row:hover {
  background: #fafbff;
}

.tansho-row.changed td {
  background: var(--warn);
}

/* 変動倍率>=2.0 */
.c-uma {
  width: 48px;
  text-align: center;
  font-weight: 700;
}

.c-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-base,
.c-diff,
.c-ratio {
  width: 90px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.c-diff {
  font-weight: 700;
}

.c-ratio {
  font-weight: 700;
}

/* Tansho-Fukusho Table (Combined) */
/* Ensure odds tables have no inline/CSS borders by default.
   Borders are managed centrally by an explicit helper class (e.g. .odds-table-border) when needed. */
.tansho-fukusho-table {
  width: 100%;
  table-layout: auto;
  font-variant-numeric: tabular-nums;
}

.tansho-fukusho-table thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 2;
  font-size: 12px;
  white-space: nowrap;
  padding: 6px 8px;
}

.tansho-fukusho-table th,
.tansho-fukusho-table td {
  padding: 6px 8px;
}

.tansho-fukusho-table .tansho-row:hover {
  background: #fafbff;
}

.tansho-fukusho-table .tansho-row.changed td {
  background: var(--warn);
}

/* 列幅調整 - オッズ表示部分を広く */
.tansho-fukusho-table .c-uma {
  width: 48px;
  text-align: center;
  font-weight: 700;
}

.tansho-fukusho-table .c-name {
  min-width: 80px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tansho-fukusho-table .c-base,
.tansho-fukusho-table .c-diff {
  width: 90px;
  text-align: right;
}

.tansho-fukusho-table .c-ratio {
  width: 80px;
  text-align: right;
}

.tansho-fukusho-table .c-pop {
  width: 60px;
  text-align: right;
}

.tansho-fukusho-table td.c-base-odds,
.tansho-fukusho-table td.c-diff-odds,
.tansho-fukusho-table td.c-fuku-base-odds,
.tansho-fukusho-table td.c-fuku-diff-odds,
.tansho-fukusho-table th.c-base-odds,
.tansho-fukusho-table th.c-diff-odds,
.tansho-fukusho-table th.c-fuku-base-odds,
.tansho-fukusho-table th.c-fuku-diff-odds {
  /* 単勝/複勝でオッズ列幅を揃える（インライン幅を上書き） */
  width: 85px !important;
}

.tansho-fukusho-table td.c-base-vote,
.tansho-fukusho-table td.c-diff-vote,
.tansho-fukusho-table td.c-fuku-base-vote,
.tansho-fukusho-table td.c-fuku-diff-vote,
.tansho-fukusho-table th.c-base-vote,
.tansho-fukusho-table th.c-diff-vote,
.tansho-fukusho-table th.c-fuku-base-vote,
.tansho-fukusho-table th.c-fuku-diff-vote {
  /* 投票数列も揃えておく */
  width: 85px !important;
}

.tansho-fukusho-table .c-fuku-base-min,
.tansho-fukusho-table .c-fuku-base-max,
.tansho-fukusho-table .c-fuku-diff-min,
.tansho-fukusho-table .c-fuku-diff-max {
  width: 90px;
  text-align: right;
}

.tansho-fukusho-table .c-fuku-sep1,
.tansho-fukusho-table .c-fuku-sep2 {
  width: 30px;
  text-align: center;
  color: #999;
}

.tansho-fukusho-table .c-fuku-pop {
  width: 60px;
  text-align: right;
}

/* ソート列のハイライト */
.tansho-fukusho-table th.sorted {
  background: #d0e8ff !important;
  font-weight: bold;
}

/* Tansho-Fukusho Wrapper - 馬連と同じ幅に */
.tansho-fukusho-wrap {
  overflow: auto;
  width: 100%;
}

/* 馬連折りたたみヘッダー */
.umaren-toggle-header {
  background: #f0f0f0;
  padding: 10px 15px;
  cursor: pointer;
  user-select: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 14px;
}

.umaren-toggle-header:hover {
  background: #e0e0e0;
}

.toggle-icon {
  font-size: 12px;
  color: #666;
}

/* Umaren Matrix */
.matrix-wrap {
  overflow: auto;
}

.matrix-table {
  font-variant-numeric: tabular-nums;
  width: max-content;
  min-width: 100%;
}

.matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
}

.matrix-table .corner {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #f8fafc;
  min-width: 40px;
}

.matrix-table .hnum {
  min-width: 44px;
  text-align: center;
  padding: 6px 8px;
}

.matrix-table tbody th.vnum {
  position: sticky;
  left: 0;
  background: #f8fafc;
  z-index: 2;
  text-align: center;
  padding: 6px 8px;
}

/* 横罫線 */
.matrix-table td {
  padding: 4px 6px;
  min-width: 44px;
  height: 36px;
}

/* Odds table border definitions (centralized). Apply by adding `odds-table` class to tables. */
.odds-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: none !important;
  /* outer frame removed — cells only define borders */
}

.odds-table th,
.odds-table td {
  border: 1px solid var(--line) !important;
  /* cell-only borders (single source) */
  padding: 6px 8px;
}

/* Note: tansho/matrix table border properties removed — .odds-table is authoritative. */

/* hrpay: keep minimal defaults here; detailed layout/spacing is controlled
   in the confirmed-tooltip scope so global table rules won't break popups. */
.hrpay-table,
.hrpay-table th,
.hrpay-table td {
  border: none !important;
  background-clip: padding-box;
}

.matrix-table td.blank {
  background: #f3f4f6;
}

.matrix-table td.diag {
  background: #f3f4f6;
  text-align: center;
  color: #6b7280;
  font-weight: 700;
}

.matrix-table td.cell.empty {
  background: #f9fafb;
  color: #cbd5e1;
}

.matrix-table td.cell.changed {
  background: var(--warn);
}

/* 変動倍率>=2.0 */
.one-odds {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
}

.footer-note {
  padding: 24px 0 40px 0;
  color: #6b7280;
}

.footer-note__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 12px;
}


/* v7 tweaks */
.tansho-table {
  font-size: 13px;
}

.tansho-row.changed:hover td {
  background: var(--warn);
}

/* hoverでも赤を維持 */
.matrix-table td.cell.changed {
  background: var(--warn) !important;
}

/* 強制維持 */


/* v8 matrix sizing & font unification */
.matrix-table td {
  height: auto;
  padding: 6px 8px;
}

/* same padding as Tansho */
.one-odds {
  font-size: 17px;
}

/* 2サイズ大きく (13px→17px) */
.matrix-table td.cell,
.matrix-table .hnum {
  min-width: 5ch;
}

/* 5 characters width */


/* v9: constant-width matrix */
.matrix-wrap {
  overflow: hidden;
}

/* no horizontal scroll; fit container */
.matrix-table {
  table-layout: fixed;
  width: 100%;
}

:root {
  --vnum-w: 48px;
}

/* left index column width */
.matrix-table .corner {
  width: var(--vnum-w);
  min-width: var(--vnum-w);
}

.matrix-table th.vnum {
  width: var(--vnum-w);
  min-width: var(--vnum-w);
}

.matrix-table .hnum,
.matrix-table td.cell,
.matrix-table td.blank,
.matrix-table td.diag {
  width: calc((100% - var(--vnum-w)) / var(--cols));
  min-width: 0;
}

/* tighten to avoid wrapping and keep within section */
.matrix-table .hnum,
.matrix-table td {
  padding: 6px 6px;
}

.one-odds {
  font-size: 17px;
}

/* 2サイズ大きく */

/* v10: row height & font unification */
.tansho-table th,
.tansho-table td,
.matrix-table th,
.matrix-table td {
  line-height: 1.6;
}

.matrix-table .hnum,
.matrix-table th.vnum {
  font-size: 13px;
  padding: 6px 8px;
}

.matrix-table td {
  padding: 6px 8px;
}

/* same as Tansho */
.one-odds {
  font-size: 17px;
}

/* 2サイズ大きく (13px→17px) */

/* v11: unify heights to match Tansho */
.tansho-table th,
.tansho-table td {
  font-size: 13px;
  line-height: 1.6;
  padding: 6px 8px;
}

.matrix-table th,
.matrix-table td {
  font-size: 13px;
  line-height: 1.6;
  padding: 6px 8px;
}

/* 単勝オッズテーブルの左側にスペース */
.tansho-section {
  margin-left: 12px;
}

/* 馬連マトリクスの右側にスペース */
.umaren-section {
  margin-right: 12px;
}

/* ▼オッズレポートの表示域だけ配色を固定 */
.jv-oddsreport {
  --color_text: #000;
  --ink: #000;
  --thead-color--txt: #000;
  --tbody-th-color--txt: #000;
}

/* リンク色も本文色に揃える
.jv-oddsreport a:link,
.jv-oddsreport a:visited,
.jv-oddsreport a:hover,
.jv-oddsreport a:active{
  color: inherit;
} */

/* 念のためのフォールバック（必要なければ削除可） */
.jv-oddsreport thead th,
.jv-oddsreport thead td {
  color: #000;
}

/* ヘッダーに移動したときの見た目を整える */
.jv-in-header-nav header .top-sticky-nav {
  position: static !important;
  /* sticky/fixed を無効化 */
  top: auto !important;
  z-index: auto !important;
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 0;
}


/* 固定ヘッダーで隠れないよう：ターゲット要素のアンカー位置補正 */
.jv-oddsreport [id] {
  scroll-margin-top: var(--jv-offset, 100px);
}


/* 固定ヘッダーの下に、ナビを画面固定で表示（本文だけ） */
.jv-oddsreport .top-sticky-nav {
  position: fixed;
  top: var(--jv-offset, 100px);
  left: 0;
  right: 0;
  z-index: 10000;
}

/* ナビ分で本文が隠れないよう余白を確保（ナビの高さをJSで反映） */
.jv-oddsreport {
  padding-top: calc(var(--jv-nav-h, 0px) + 8px);
}

/* アンカー位置を固定ヘッダー＋ナビの高さぶん補正（ジャンプ用） */
.jv-oddsreport [id] {
  scroll-margin-top: calc(var(--jv-offset, 100px) + var(--jv-nav-h, 0px));
}

/* 念のため：ヘッダー側にクローンが残っていたら隠す */
header .top-sticky-nav.jv-nav-moved {
  display: none !important;
}

.jv-oddsreport .top-sticky-nav {
  position: fixed;
  top: var(--jv-offset, 100px);
  left: 0;
  right: 0;
  z-index: 999999;
  /* ← これを追加/上書き */
}

/* トップナビは常に画面最上部（管理バーが出ている時だけ下げる） */
#jv-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483647;
}

body.admin-bar #jv-topnav {
  top: 32px;
}

/* PCの管理バー */
@media (max-width: 782px) {
  body.admin-bar #jv-topnav {
    top: 46px;
  }

  /* SPの管理バー */
}

/* コンテンツが隠れないように上を空ける（JSが高さを入れているならその変数で） */
body.jv-has-topnav {
  padding-top: var(--jv-topnav-h, 56px);
}

/* アンカー着地もナビぶん補正（管理バー分は top で吸収できるのでここは nav 高だけ） */
.jv-oddsreport [id] {
  scroll-margin-top: var(--jv-topnav-h, 56px);
}

/* ============================================================
   レイアウト制御: vertical / horizontal
   ============================================================ */
/* 縦並びレイアウト（デフォルト） */
.layout-vertical .odds-container {
  display: block;
}

.layout-vertical .tansho-section,
.layout-vertical .umaren-section,
.layout-vertical .tansho-fukusho-section,
.layout-vertical .tansho-fukusho-row,
.layout-vertical .umaren-row {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

/* 横並びレイアウト */
.layout-horizontal .odds-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.layout-horizontal .tansho-section,
.layout-horizontal .umaren-section {
  flex: 1;
  min-width: 300px;
}

/* モバイルでは常に縦並び */
@media screen and (max-width: 768px) {
  .layout-horizontal .odds-container {
    display: block;
  }

  .layout-horizontal .tansho-section,
  .layout-horizontal .umaren-section {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* 確定ボタンデザイン (適用対象: .has-ran-icon 要素。以前の a 内包パターンではなく span を使用しているためセレクタを調整) */
.has-ran-icon {
  background: #eee;
  border-radius: 3px;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 220px;
  padding: 10px 25px;
  color: #313131;
  transition: 0.3s ease-in-out;
  font-weight: 600;
  box-shadow: 5px 5px 0 #6bb6ff;
}

.has-ran-icon:hover {
  background-color: #b3d9ff;
  box-shadow: 0 0 0;
  transform: translate(5px, 5px);
}

/* 確定ボタン（外部CSS管理） */
.has-ran-icon.icon-confirmed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1976d2;
  border: 1px solid #1976d2;
  color: #fff;
  cursor: pointer;
  padding: 10px 10px;
  /* ここを調整してボタンを小さく/大きくできます */
  border-radius: 10px;
  font-weight: 700;
  line-height: 1;
}

.has-ran-icon.icon-confirmed .confirmed-label {
  font-size: 14px;
  /* 確定文字サイズ */
  display: inline-block;
}

.has-ran-icon.icon-confirmed .icon-popup {
  font-size: 12px;
  /*  ⧉ 文字サイズ */
  line-height: 1;
  margin-left: 0px;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.has-ran-icon.icon-confirmed:hover {
  background: #1565c0;
}

.has-ran-icon.icon-confirmed:hover .icon-popup {
  opacity: 1;
  transform: scale(1.05);
}

/* Ensure tansho/matrix tables do not draw borders themselves. */
.tansho-table th,
.tansho-table td,
.matrix-table th,
.matrix-table td {
  border: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

.umaren-section .matrix-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* hrpay-table: add vertical gap between rows to avoid thin seam from adjacent backgrounds */
.hrpay-table {
  border: none !important;
  /* keep no outer border */
  border-collapse: separate !important;
  /* allow vertical gaps */
  border-spacing: 0 6px !important;
  /* 6px vertical gap between rows (adjustable) */
  background-clip: padding-box;
  /* ensure gaps show table background */
}

.hrpay-table tr {
  /* keep existing row backgrounds (often set inline), but ensure rows render separately */
  display: table-row;
}

.hrpay-table td,
.hrpay-table th {
  background-clip: padding-box;
  /* prevent cell background from bleeding into spacing */
  padding: 6px 8px;
  /* keep comfortable padding; respects existing cell padding */
}

/* Scoped override: inside confirmed-tooltips restore hrpay-table native layout
   and disable global table rules that may affect it (width/table-layout/padding). */
.confirmed-tooltip .hrpay-table,
.confirmed-tooltip .hrpay-table th,
.confirmed-tooltip .hrpay-table td {
  width: auto !important;
  min-width: unset !important;
  max-width: unset !important;
  table-layout: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  /* cells will get proper padding from below */
  border: none !important;
  /* keep no outer border */
  background-clip: padding-box !important;
}

.confirmed-tooltip .hrpay-table {
  border-collapse: separate !important;
  /* restore native separate mode */
  border-spacing: 0 6px !important;
  /* vertical gap between rows to avoid seams */
  width: auto !important;
}

.confirmed-tooltip .hrpay-table td,
.confirmed-tooltip .hrpay-table th {
  padding: 6px 8px !important;
  /* restore comfortable cell padding */
  background-clip: padding-box !important;
}

/* Moved from inline popup CSS: base hrpay-table styles (kept minimal; popup scope may override spacing) */
.hrpay-table {
  min-width: 320px;
  width: 100%;
  font-size: 15px;
  margin: 0 auto;
  background: #fff;
  table-layout: fixed;
}

.hrpay-table th,
.hrpay-table td {
  padding: 4px 12px !important;
  text-align: right;
  font-family: inherit;
  min-width: 60px;
}

.hrpay-label {
  text-align: left;
  font-weight: bold;
  background: #fff;
  color: #222;
  padding-left: 8px !important;
  border: none !important;
  min-width: 60px;
}

/* ==== 背景色を維持したまま二重線に見える境界を消す処理 ==== */
/* セルを “内側に 1px（透明）だけ縮めて” 行背景の段差を見えなくする */

.tansho-table td,
.tansho-table th,
.matrix-table td,
.matrix-table th {
  background-clip: padding-box !important;
  /* 背景を内側に閉じ込める */
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  /* ↑ 元の padding が 6px だったため +1px にする */
}

/* 払戻ポップアップテーブルの行間スペース削除 */
.confirmed-tooltip .hrpay-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100%;
}

.confirmed-tooltip .hrpay-table td {
  padding: 4px 8px !important;
  margin: 0 !important;
  border: none !important;
  line-height: 1.4 !important;
}

.confirmed-tooltip .hrpay-table tr {
  margin: 0 !important;
  padding: 0 !important;
}

/* 券種ラベルが空のセルのパディングを削除 */
.confirmed-tooltip .hrpay-label:empty {
  padding: 0 !important;
  width: 0 !important;
}

/* 券種ラベルの改行を防ぐ */
.confirmed-tooltip .hrpay-label {
  white-space: nowrap !important;
  min-width: 50px !important;
  width: auto !important;
  padding: 4px 8px !important;
  text-align: center !important;
  vertical-align: middle !important;
}