@charset "UTF-8";

/* ==========================================================================
   1. 変数・リセット・基本設定 (Variables & Base)
   ========================================================================== */
:root {
    --color-brand: #ea4e19; /* メインオレンジ */
    --color-brand-dark: #d1400b; /* 濃いオレンジ（ホバー用） */
    --color-footer-sub: #ef7348; /* フッタ下部などの薄いオレンジ */
    --color-bg-light: #fcece4; /* 薄いベージュ背景 */
    --color-text-main: #000000;
    --color-text-white: #ffffff;
    --color-border-white: rgba(255, 255, 255, 0.5); /* 白い区切り線 */

    --font-base: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Hepta Slab", "Roboto", sans-serif;
}

body {
    font-family: var(--font-base);
    margin: 0;
    padding: 0;
    color: var(--color-text-main);
    line-height: 1.5;
    /* margin-bottomはフッター固定などの場合に調整 */
    margin-bottom: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

    a:hover {
        opacity: 0.8;
    }

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* レイアウト調整用 */
.layout-gap {
    gap: 30px;
}

/* ==========================================================================
   2. ヘッダー (Header)
   ========================================================================== */
.site-header {
    width: 100%;
    background-color: #fff;
}

/* --- PC版ヘッダー (992px以上) --- */
@media (min-width: 992px) {
    .header-pc-wrap {
        display: flex;
        flex-direction: column;
    }

    /* ロゴ・広告エリア */
    .header-pc-top {
        background-color: var(--color-brand);
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 60px;
    }

    .header-pc-logo-img {
        width: 100%;
        max-width: 250px;
        margin-bottom: 10px;
    }

    .header-pc-logo-text {
        font-family: var(--font-heading);
        font-size: 40px;
        color: #fff;
        font-weight: bold;
        margin-left: 10px;
    }

    .header-pc-ad {
        background-color: #d9d9d9;
        width: 728px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: #333;
        font-size: 2rem;
    }

    /* グローバルナビ */
    .header-pc-nav {
        background-color: #000;
        padding: 12px 0;
    }

    .header-pc-nav-list {
        display: flex;
        justify-content: center;
        gap: 30px;
    }

    .header-pc-nav-item a {
        color: #fff;
        font-weight: bold;
        font-size: 18px;
    }
}

/* --- SP版ヘッダー (991px以下) --- */
@media (max-width: 991.98px) {
    .header-sp-wrap {
        background-color: var(--color-brand);
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
    }

    .header-sp-logo {
        display: flex;
        align-items: center;
        color: #fff;
        font-family: var(--font-heading);
        font-weight: bold;
        font-size: 24px;
        gap: 8px;
    }

        .header-sp-logo img {
            height: 30px;
        }

    /* ハンバーガーボタン */
    .header-sp-menu-btn {
        background: none;
        border: none;
        padding: 0;
        width: 30px;
        height: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }

        .header-sp-menu-btn span {
            display: block;
            width: 100%;
            height: 3px;
            background-color: #fff;
            border-radius: 2px;
        }

    /* PR帯 */
    .header-sp-pr {
        background-color: #2f2f2f;
        color: #fff;
        text-align: center;
        font-weight: bold;
        padding: 6px 0;
        font-size: 20px;
    }
}

/* ==========================================================================
   3. SP用メニュー (Offcanvas)
   ========================================================================== */
.sp-menu-offcanvas {
    background-color: var(--color-brand) !important;
    color: #fff;
    width: 80% !important;
    max-width: 300px;
    border-left: none !important;
}

.sp-menu-header {
    display: flex;
    justify-content: flex-end;
    padding: 15px;
    background-color: var(--color-brand);
}

.sp-menu-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    font-weight: bold;
}

.sp-menu-body {
    padding: 0;
    overflow-y: auto;
}

.sp-menu-list {
    display: flex;
    flex-direction: column;
}

.sp-menu-link {
    display: block;
    padding: 15px 20px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid var(--color-border-white);
    text-align: left;
}

    .sp-menu-link:hover {
        background-color: rgba(255,255,255,0.1);
    }

/* ==========================================================================
   4. フッター (Footer)
   ========================================================================== */
.site-footer {
    width: 100%;
    margin-top: 60px;
}

@media (min-width: 992px) {
    .footer-pc-main {
        background-color: var(--color-brand);
        padding: 50px 0;
        color: #fff;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .footer-pc-container {
        width: 100%;
        max-width: 1920px;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 100px;
    }

    .footer-pc-logo-area {
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 300px;
    }

    .footer-pc-logo-img {
        width: 100%;
        max-width: 250px;
        margin-bottom: 10px;
    }

    .footer-pc-logo-text {
        font-family: var(--font-heading);
        font-size: 48px;
        font-weight: bold;
        line-height: 1;
    }

    .footer-pc-nav-area {
        margin-left: 100px;
        display: flex;
        gap: 60px;
        text-align: left;
    }

    .footer-pc-nav-col {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .footer-pc-link {
        font-weight: bold;
        font-size: 18px;
        color: #fff;
    }

    .footer-pc-bottom {
        background-color: var(--color-footer-sub);
        padding: 15px 0;
        color: #fff;
        font-size: 14px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .footer-pc-bottom-inner {
        width: 100%;
        max-width: 1920px;
        padding: 0 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-pc-bottom-links {
        display: flex;
        gap: 20px;
    }
}

/* --- SP版フッター --- */
@media (max-width: 991.98px) {
    .footer-sp-nav {
        background-color: var(--color-brand);
        border-top: 2px solid #fff;
    }

    .footer-sp-link {
        display: block;
        padding: 12px 20px;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        text-align: left;
        border-bottom: 1px solid var(--color-border-white);
    }

    .footer-sp-logo-area {
        background-color: var(--color-brand);
        padding: 30px 0;
        text-align: center;
        color: #fff;
    }

    .footer-sp-logo-img {
        width: 200px;
        margin-bottom: 10px;
    }

    .footer-sp-bottom {
        background-color: var(--color-footer-sub);
        padding: 20px 10px;
        text-align: center;
        color: #fff;
        font-size: 12px;
    }

    .footer-sp-bottom-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 15px;
        margin-bottom: 15px;
    }
}

/* ==========================================================================
   5. ページ共通・コンポーネント (Components)
   ========================================================================== */
.no-image-data {
    position: relative;
    width: 80px;
    height: 80px;
    background-color: #d9d9d9;
    aspect-ratio: 1;
}

/* 広告プレースホルダー */
.ad-300x250 {
    background-color: #e0e0e0;
    color: #000;
    font-weight: bold;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 250px;
    margin-bottom: 20px;
}

.ad-label {
    font-size: 0.9rem;
    font-weight: normal;
    margin-bottom: 5px;
}

/* サイドバー (PC) */
.sidebar-fixed {
    width: 300px;
    flex-shrink: 0;
}

/* メインコンテンツ可変幅 */
.main-content-fluid {
    flex-grow: 1;
    min-width: 0;
}

/* リンクボタン (下線なし太字) */
.clean-text-link {
    color: #000 !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    display: inline-block;
    padding-bottom: 2px;
}

    .clean-text-link:hover {
        opacity: 0.7;
    }

/* ニュース一覧コンテナ (PC3列、SP1列) */
@media (min-width: 992px) {
    .news-list-container {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .news-list-container {
        width: 100%;
        padding: 0 10px;
    }
}

/* --- トップページ固有 --- */

.carousel-caption-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

.carousel-title {
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

.top-sp-heading {
    background-color: #2f2f2f;
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 10px 0;
    font-size: 1.1rem;
    margin-bottom: 0;
}

.race-list-container {
    background-color: var(--color-bg-light);
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   6. ページ固有: 本日のレース (Today)
   ========================================================================== */

.today-result-area {
    background-color: var(--color-bg-light);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 40px;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

@media (min-width: 992px) {
    .result-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.result-card {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rc-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.rc-name {
    font-size: 20px;
    font-weight: bold;
}

.rc-day {
    font-size: 14px;
    font-weight: bold;
}

/* ベーススタイル (色は grade-XX で上書き) */
.rc-grade {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 2px;
    /* デフォルト背景 */
    background-color: #666;
    color: #fff;
}

.rc-icons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rc-icon-img {
    height: 18px;
    width: auto;
}

.rc-info {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.4;
    flex-grow: 1;
}

.rc-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-top: 2px;
}

.rc-divider {
    border-top: 1px solid var(--color-brand);
    margin: 10px 0;
}

.rc-links {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px 4px;
}

.rc-link-item {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-decoration: underline !important;
}

    .rc-link-item:hover {
        color: var(--color-brand);
        text-decoration: none !important;
    }

.text-start-pc {
    text-align: left;
}

@media (max-width: 991.98px) {
    .text-start-pc {
        text-align: center;
    }
}

/* ==========================================================================
   7. ページ固有: 記事詳細 (Details)
   ========================================================================== */

/* 記事一覧へ戻るボタン */
.btn-back-to-list {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* 親要素(メインカラム)の幅いっぱい */
    background-color: var(--color-brand);
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none !important;
    padding: 15px 0;
    border-radius: 4px;
    border: none;
    transition: opacity 0.2s;
    line-height: 1.5;
}

    .btn-back-to-list:hover {
        color: #fff;
        opacity: 0.8;
    }

/* ==========================================================================
   8. ページ固有: 開催日程 (EventSchedule)
   ========================================================================== */

/* テーブルラッパー */
.schedule-table-wrapper {
    width: 100%;
    /* PCはスクロールあり、SPはスクロールなし */
    overflow-x: auto;
    margin-bottom: 30px;
}

/* テーブル本体 */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #999;
    /* デフォルト(PC)はスクロール前提の最小幅を設定 */
    min-width: 600px;
}

    /* 全セル共通 */
    .schedule-table th,
    .schedule-table td {
        border: 1px solid #999;
        padding: 4px 2px;
        height: 30px;
        vertical-align: middle;
        box-sizing: border-box;
    }

    /* 出走マークが入るセル */
    .schedule-table td {
        padding: 0;
        height: 60px;
    }

/* 日付ヘッダーセル */
.date-header-cell {
    background-color: #333;
    color: #fff;
    font-weight: bold;
    line-height: 1.2;
    /* PC幅 */
    min-width: 30px;
}

/* リージョン名ヘッダー (左上) */
.region-header-cell {
    background-color: var(--color-brand);
    color: #fff;
    font-weight: bold;
    /* PC幅 */
    width: 80px;
    border: 1px solid #999;
}

/* 場名のセル */
.place-name-cell {
    background-color: #eee;
    font-weight: bold;
    color: #000;
    /* PC幅 */
    width: 80px;
    min-width: 60px;
    padding: 4px 2px !important;
}

/* 今日のハイライト (縦帯) */
.today-highlight {
    background-color: var(--color-bg-light) !important;
}

/* ヘッダー部分のハイライト */
th.today-highlight {
    color: var(--color-brand) !important;
    background-color: #fff !important;
    border-bottom: 2px solid var(--color-brand);
    border-top: 2px solid var(--color-brand);
}

/* リンクボタンのスタイル */
.race-mark-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    padding: 1px; /* 狭いので少し詰める */
    transition: background-color 0.2s;
}

    .race-mark-link:hover {
        background-color: rgba(234, 84, 29, 0.1);
        opacity: 0.8;
    }

/* グレードバッジ */
.grade-badge {
    font-weight: bold;
    font-size: 11px;
    line-height: 1;
    padding: 2px 2px; /* 横余白を詰める */
    border-radius: 2px;
    color: #fff;
    background-color: #333;
    display: inline-block;
    min-width: 20px; /* 最小幅を縮小 */
    text-align: center;
}

/* グレードごとの色分け */
.grade-GP, .grade-SG {
    background-color: #bf901e;
}
.grade-G1 {
    background-color: #d00;
}

.grade-G2 {
    background-color: #a832ea;
}

.grade-G3 {
    background-color: #d60;
}

.grade-F1 {
    background-color: #00a;
}

.grade-F2 {
    background-color: #080;
}

.grade-普通 {
    background-color: #666;
}

/* アイコン画像 */
.race-icon-img {
    width: 14px; /* 少し小さく */
    height: 14px;
    object-fit: contain;
}

/* === SP版調整 (スクロールなし・画面幅合わせ) === */
@media (max-width: 991.98px) {
    .schedule-table-wrapper {
        overflow-x: visible; /* スクロール無効化 */
        margin-bottom: 20px;
    }

    .schedule-table {
        min-width: auto; /* 固定幅解除 */
        width: 100%; /* 画面いっぱい */
        table-layout: fixed; /* 列幅を固定レイアウトで制御 */
    }

    /* 左端（場名）の列幅 */
    .region-header-cell,
    .place-name-cell {
        width: 18%; /* 全体の約18% */
        min-width: auto;
        font-size: 11px;
    }

    /* 日付列 (残り82%を7等分 -> 約11.7%ずつ) */
    .date-header-cell,
    .schedule-table td:not(.place-name-cell) {
        width: 11.7%;
        min-width: auto;
    }

    .schedule-table th,
    .schedule-table td {
        font-size: 10px; /* フォントサイズ縮小 */
        padding: 2px 0px; /* 余白極小 */
        height: 56px; /* 高さ少し詰め */
    }

    /* ヘッダーの日付文字 */
    .date-header-cell span {
        font-size: 10px;
        display: block;
        line-height: 1.1;
    }

    /* バッジサイズ調整 */
    .grade-badge {
        font-size: 9px;
        padding: 1px;
        min-width: 18px;
        transform: scale(0.9); /* さらに少し縮小表示 */
    }
}

/* ==========================================================================
   9. ページ固有: ニュース一覧 (NewsList)
   ========================================================================== */

/* ニュースリストアイテムのラッパー */
.news-wrapper {
    display: flex;
    align-items: center;
    padding: 10px;
    /* SPはボーダーあり、背景白 */
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
    height: 100px; /* 高さ固定 */
}

/* リンクスタイル解除 */
.news-link-block {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

    .news-link-block:hover {
        opacity: 0.7;
    }

/* 画像ボックス */
.news-img-box {
    flex-shrink: 0;
    background-color: #ccc;
    overflow: hidden;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* SP初期値 */
    width: 80px;
    height: 60px;
}

.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* タイトルテキスト */
.news-title-text {
    font-weight: bold;
    line-height: 1.4;
    color: #000;
    /* 長文省略 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    /* SP初期値 */
    font-size: 14px;
}

/* --- ページング (PC) --- */
.pagination-pc .page-item .page-link {
    color: var(--color-brand);
    border: 1px solid var(--color-brand);
    margin: 0 4px;
    font-weight: bold;
    border-radius: 0 !important; /* 四角 */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-pc .page-item.active .page-link {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: #fff;
}

.pagination-pc .page-item.disabled .page-link {
    color: #ccc;
    border-color: #ccc;
    pointer-events: none;
}

/* "前へ""次へ"ボタンの幅調整 */
.pagination-pc .page-item.prev-next .page-link {
    width: auto;
    padding: 0 15px;
}

/* --- ページング (SP) --- */
.pagination-sp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-weight: bold;
    font-size: 18px;
    color: #000;
    margin-top: 30px;
}

.sp-pager-icon {
    font-size: 28px;
    color: #000;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

    .sp-pager-icon:hover {
        color: #555;
    }

    .sp-pager-icon.disabled {
        color: #ccc;
        pointer-events: none;
        visibility: hidden;
    }

/* PC固有スタイル (992px以上) */
@media (min-width: 992px) {
    .news-wrapper {
        border-bottom: none; /* PCはボーダーなし（背景色分け） */
    }

    /* PCの背景色クラス */
    .pc-row-orange {
        background-color: var(--color-bg-light) !important;
    }

    .pc-row-white {
        background-color: #ffffff !important;
    }

    .news-img-box {
        width: 120px; /* PC: 小 */
        height: 80px;
    }

    .news-title-text {
        font-size: 16px;
    }
}

/* SP固有スタイル (991px以下) */
@media (max-width: 991.98px) {
    /* SPは常に白背景 (HTMLでクラスがついていても強制上書き) */
    .news-wrapper {
        background-color: #fff !important;
    }
}

/* ==========================================================================
   10. ページ固有: オッズ (Odds)
   ========================================================================== */
/* --- ラウンドナビ (横スクロール) --- */
.round-nav-wrapper {
    width: 100%;
    margin-bottom: 20px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 16px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

.round-nav-item {
    flex: 0 0 104px !important;
    width: 104px !important;
    height: 104px !important;
    border-radius: 16px;
    overflow: hidden;
    display: block !important;
}

.round-link-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    transition: background-color 0.2s;
}

    .round-link-inner:hover {
        background-color: #f8f9fa;
        opacity: 0.9;
    }

    .round-link-inner.tekichu {
        background-color: #fff3cd;
        border-color: #ffc107;
    }

/* --- メインタブ (出走表/オッズ/結果) --- */
.keirin-tabs {
    display: flex;
    width: 100%;
    margin-bottom: 0;
    border-bottom: none;
}

    .keirin-tabs .nav-item {
        flex: 1;
        text-align: center;
    }

    .keirin-tabs .nav-link {
        border-radius: 0;
        font-weight: bold;
        color: #fff;
        background-color: #333;
        border: 1px solid #333;
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        margin: 0;
    }

    .keirin-tabs .nav-item:not(:last-child) .nav-link {
        border-right: 1px solid #555;
    }

    .keirin-tabs .nav-link.active {
        background-color: var(--color-brand);
        border-color: var(--color-brand);
        color: #fff;
    }

    .keirin-tabs .nav-link:hover {
        opacity: 0.8;
        color: #fff;
    }

/* --- 並び予想 --- */
.line-prediction-container {
    width: 100%;
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-brand);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow-x: auto;
}

.line-prediction-wrapper {
    display: flex;
    align-items: center;
    min-width: 600px;
}

.line-group {
    display: flex;
    align-items: center;
    margin-right: 30px;
}

.line-racer-item {
    margin-right: 4px;
}

/* --- 賭け式ボタン (7種) --- */
.bet-type-nav {
    display: flex;
    width: 100%;
    gap: 5px;
    margin-bottom: 20px;
}

.bet-btn {
    flex: 1;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 0;
    border-radius: 4px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    color: #333;
}

    .bet-btn:hover {
        background-color: #f0f0f0;
        color: #000;
    }

    .bet-btn.active {
        background-color: var(--color-brand);
        color: #fff;
    }

        .bet-btn.active:hover {
            background-color: var(--color-brand-dark);
        }

/* --- 表示形式切り替え (人気順/オッズ表) --- */
.display-mode-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.mode-btn {
    width: 48%;
    text-align: center;
    padding: 10px;
    border-radius: 20px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid var(--color-brand);
    color: var(--color-brand);
    background: #fff;
}

    .mode-btn.active {
        background: var(--color-brand);
        color: #fff;
    }

/* --- 人気順リスト --- */
.popularity-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.popularity-col {
    flex: 1;
    min-width: 300px;
}

.pop-list-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 8px 0;
}

.pop-rank {
    font-weight: bold;
    width: 30px;
    text-align: center;
    font-size: 14px;
}

.pop-comb {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pop-odds {
    width: 85px;
    text-align: right;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    white-space: nowrap;
}

    .pop-odds.is-low {
        color: #d00;
    }

/* 区切り線 */
.comb-separator {
    height: 2px;
    width: 10px;
    background-color: #333;
    margin: 0 2px;
}

.comb-separator-equal {
    height: 6px;
    width: 10px;
    background-color: transparent;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    margin: 0 2px;
    box-sizing: border-box;
}

/* --- 車番/枠番ボックス (人気順用) --- */
.car-box {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
    display: inline-block;
}

.waku-box {
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
    font-size: 14px;
    display: inline-block;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
}

/* --- オッズ表 (マトリックス) --- */
.matrix-container {
    width: 100%;
}

.matrix-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    align-items: start;
}

.matrix-card {
    border: 1px solid #000;
    background: #fff;
}

.matrix-header {
    padding: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #000;
}

.matrix-header-no {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 18px;
    margin-right: 8px;
    background-color: rgba(0,0,0,0.2);
    color: inherit;
    border: 1px solid rgba(255,255,255,0.5);
}

.matrix-header-no-waku {
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
    margin-right: 8px;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 4px;
}

.matrix-body {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    background-color: #fff;
}

.matrix-row {
    display: flex;
    border-bottom: 1px solid #000;
    height: 36px;
}

.matrix-cell-car {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    border-right: 1px solid #000;
}

.matrix-cell-odds {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    background-color: #fff;
    font-weight: bold;
    font-size: 16px;
    color: #000;
}

    .matrix-cell-odds.is-low {
        color: #d00;
    }

/* --- 下部レースリンク --- */
.footer-race-list-container {
    width: 100%;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 4px;
    margin-bottom: 40px;
    padding: 20px;
}

.footer-race-header {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    font-size: 1.1rem;
}

.footer-race-body {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.footer-race-text-link {
    color: #000;
    text-decoration: underline !important;
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
}

    .footer-race-text-link:hover {
        color: var(--color-brand);
        text-decoration: none !important;
    }

/* --- PC版調整 (Odds) --- */
@media (min-width: 992px) {
    .matrix-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .popularity-col {
        max-width: 48%;
    }
}

/* --- SP版調整 (Odds) --- */
@media (max-width: 991.98px) {
    .matrix-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mode-btn {
        font-size: 14px;
        padding: 8px;
    }
    /* 賭け式ボタン折り返し */
    .bet-type-nav {
        flex-wrap: wrap;
    }

    .bet-btn {
        flex: 1 1 20%;
        font-size: 12px;
        padding: 8px 4px;
        min-width: 60px;
    }

    .footer-race-list-container {
        padding: 15px 10px;
    }

    .footer-race-body {
        flex-wrap: nowrap;
        overflow-x: hidden;
        justify-content: space-between;
        gap: 0;
    }

    .footer-race-text-link {
        flex: 0 0 auto;
        font-size: 11px;
        margin-right: 0;
        padding: 2px;
        white-space: nowrap;
    }
}

/* ==========================================================================
   11. ページ固有: 出走表 (StartingList)
   ========================================================================== */

/* --- 出走表テーブル --- */
.starting-list-wrapper {
    overflow-x: auto;
    width: 100%;
    margin-bottom: 30px;
    border: 1px solid #999;
}

.table-keirin {
    width: 100%;
    min-width: 1200px; /* PCはスクロール前提 */
    border-collapse: collapse;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
}

    .table-keirin th {
        background-color: #f2f2f2;
        border: 1px solid #999;
        padding: 10px 4px;
        font-weight: bold;
        white-space: nowrap;
        color: #333;
        vertical-align: middle;
    }

    .table-keirin td {
        border: 1px solid #999;
        padding: 6px 4px;
        white-space: nowrap;
        color: #000;
    }

/* ライン・枠番表示用 */
.cell-bracket {
    background-color: #fff;
    font-weight: bold;
    font-size: 16px;
    width: 30px;
    vertical-align: middle;
}

.bracket-top-none {
    border-top: 1px solid #fff !important;
}

.bracket-bottom-none {
    border-bottom: 1px solid #fff !important;
}

/* 車番セル */
.cell-car {
    font-weight: bold;
    font-size: 14px;
    width: 30px;
    color: #000;
}

/* 文字色強制白 */
.text-white-force {
    color: #fff !important;
}

/* 列幅調整クラス */
.col-narrow {
    width: 30px;
}

.col-std {
    min-width: 60px;
}

.col-wide {
    min-width: 140px;
    text-align: left;
}

/* フォントサイズ調整 */
.font-lg {
    font-size: 14px;
    font-weight: bold;
}

.font-sm {
    font-size: 10px;
    font-weight: normal;
    color: #555;
}

/* --- AI予想エリア (StartingList固有) --- */
.ai-prediction-area {
    width: 100%;
    margin-bottom: 40px;
}

.ai-prediction-row {
    display: flex;
    gap: 30px;
    width: 100%;
}

.ai-prediction-col {
    flex: 1;
    min-width: 0;
}

/* --- 当該レースの関連記事 (StartingList下部) --- */
.related-news-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

    .related-news-item:last-child {
        border-bottom: none;
    }

/* PC用レイアウト */
.related-news-img-pc {
    float: left;
    width: 240px;
    margin-right: 20px;
    margin-bottom: 10px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.related-news-text-pc {
    font-size: 14px;
    line-height: 1.6;
}

/* SP用レイアウト */
.related-news-img-sp {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

/* --- SP版調整 (StartingList) --- */
@media (max-width: 991.98px) {
    .table-keirin {
        font-size: 11px;
        min-width: 900px;
    }

    .ai-prediction-row {
        flex-direction: column;
        gap: 30px;
    }
}

/* ==========================================================================
   12. ページ固有: レース結果 (Result)
   ========================================================================== */

/* セクションタイトル */
.result-section-title {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 20px;
}

.sub-table-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
}

/* レイアウトコンテナ (PCで左右並び) */
.result-layout-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;
    width: 100%;
}

/* --- テーブル共通設定 (高さ同期用) --- */
.table-result th, .table-payout th {
    height: 32px; /* ヘッダ高さ固定 */
    padding: 4px;
    font-size: 14px;
    vertical-align: middle;
    box-sizing: border-box;
}

.table-result td, .table-payout td {
    height: 48px; /* データ行高さ固定 */
    padding: 4px;
    vertical-align: middle;
    box-sizing: border-box;
}

/* --- 着順表エリア --- */
.result-table-area {
    width: 100%;
    overflow-x: auto;
}

.table-result {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 1px;
    text-align: center;
    background-color: #fff;
}

    .table-result th {
        background-color: #fff;
        border: 1px solid #999;
        font-weight: bold;
        white-space: nowrap;
        color: #333;
    }

    .table-result td {
        border: 1px solid #999;
        white-space: nowrap;
        color: #000;
    }

/* 選手名セル */
.th-player, .td-player {
    text-align: left !important;
    padding-left: 8px !important;
}

/* 車番セル */
.cell-car-result {
    font-weight: bold;
    font-size: 14px;
    width: 30px;
}

/* 文字色強制白 */
.text-white-force {
    color: #fff !important;
}

/* --- 払戻金エリア --- */
.payout-area {
    width: 100%;
}

.table-payout {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background-color: #fff;
    border: 1px solid #999;
}

    .table-payout th {
        background-color: #fff;
        font-weight: bold;
        color: #000;
        border-bottom: 1px solid #999;
        /* 縦罫線なし */
        border-left: none;
        border-right: none;
        border-top: none;
    }

    .table-payout td {
        border-bottom: 1px solid #999;
        /* 縦罫線なし */
        border-left: none;
        border-right: none;
        text-align: center;
    }

/* ヘッダ配置 */
.th-bet-type {
    text-align: center;
}

.th-payout-amount, .th-payout-pop {
    text-align: right !important;
    padding-right: 15px !important;
}

/* 賭式セル (薄オレンジ) */
.payout-type-cell {
    background-color: var(--color-bg-light); /* #fcece4 */
    font-weight: bold;
    color: #000;
    width: 25%;
    text-align: center;
}

.payout-other-cell {
    background-color: #fff;
    color: #000;
}

/* 右寄せ */
.text-right-align {
    text-align: right !important;
    padding-right: 15px !important;
}

/* 払戻金文字 */
.payout-amount {
    font-weight: normal;
    font-size: 14px;
    color: #000;
}

.payout-pop {
    font-size: 12px;
    color: #000;
}

/* データなし画像 */
.no-data-image {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    display: block;
    min-height: 200px;
    object-fit: contain;
}

/* --- PC版レイアウト調整 (左右分割・幅固定) --- */
@media (min-width: 992px) {
    .result-layout-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .result-table-area {
        width: 480px;
        flex: 0 0 480px;
    }

    .payout-area {
        width: 480px;
        flex: 0 0 480px;
    }
}

/* --- SP版調整 --- */
@media (max-width: 991.98px) {
    .result-table-area, .payout-area {
        width: 100%;
        flex: auto;
    }
}

/* --- 関連記事 (Result, StartingList共通) --- */
.related-news-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

    .related-news-item:last-child {
        border-bottom: none;
    }

.related-news-img-pc {
    float: left;
    width: 240px; /* バランスを見て240pxにしています */
    margin-right: 20px;
    margin-bottom: 10px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.related-news-text-pc {
    font-size: 14px;
    line-height: 1.6;
}

.related-news-img-sp {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

/* ==========================================================================
   13. 共通: グレード別カラー定義 (Grade Colors)
   ========================================================================== */
/* GP / G1 (Gold) */
.grade-GP, .grade-G1, .grade-GI {
    background-color: #bf901e !important;
    color: #ffffff !important;
}

/* G2 (Purple) */
.grade-G2, .grade-GII {
    background-color: #a832ea !important;
    color: #ffffff !important;
}

/* G3 (Blue) */
.grade-G3, .grade-GIII {
    background-color: #1a5bc4 !important;
    color: #ffffff !important;
}

/* F1 (Cyan/Water) */
.grade-F1, .grade-FI {
    background-color: #00b7c6 !important;
    color: #ffffff !important;
}

/* F2 (Green) */
.grade-F2, .grade-FII {
    background-color: #2ebf2e !important;
    color: #ffffff !important;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* ==========================================================================
   14. トップページ見出し・テキスト調整
   ========================================================================== */

/* セクションタイトル (PC:42px / SP:28px) */
.section-heading {
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
}

@media (min-width: 992px) {
    .section-heading {
        font-size: 42px;
    }
}

@media (max-width: 991.98px) {
    .section-heading {
        font-size: 28px;
    }
}

/* AI予想下の注意文 (PC:12px / SP:14px) */
.ai-note-text {
    color: #6c757d; /* text-muted */
    margin-top: 1rem;
    line-height: 1.5;
}

@media (min-width: 992px) {
    .ai-note-text {
        font-size: 24px;
    }
}

@media (max-width: 991.98px) {
    .ai-note-text {
        font-size: 14px;
    }
}

/* ==========================================================================
   15. ラウンドナビゲーション
   ========================================================================== */
.round-link-wrapper {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
}

.round-link-inner {
    position: relative; /* 子要素の基準位置 */
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #727272;
    border-radius: 16px; /* 解析値は20pxでしたが、全体のバランスを見て16pxまたは20pxで調整 */
    overflow: hidden;
    transition: opacity 0.2s;
    box-sizing: border-box;
}

    .round-link-inner:hover {
        opacity: 0.8;
        background-color: #f8f9fa;
    }

/* --- コンテンツ配置 (テキスト群) --- */
.rn-content {
    position: relative;
    z-index: 10; /* 画像より手前に表示 */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
}

/* --- フォントサイズ設定 --- */
.rn-round {
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    margin-bottom: 2px;
}

.rn-abbr {
    font-size: 19px;
    text-align: center;
    line-height: 1.2;
    width: 94%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: scale(0.95);
    transform-origin: center;
    color: #111;
}

.rn-end {
    font-size: 20px;
    font-weight: normal;
    line-height: 1;
    color: gray;
}

/* =============================================
   的中時 (.tekichu) のスタイル
   (解析データに基づいた設定)
   ============================================= */

.round-link-inner.tekichu {
    background-color: #ffffff;
    /* 解析値に基づくボーダーとシャドウ */
    border: 1px solid #ea4e19;
    border-radius: 20px; /* デザイン指定に合わせるなら20px */
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); /* #0000004c */
}

/* 以下、解析ソース (.view-21, .vector等) の移植 */

/* 画像群をまとめるコンテナ (.view-21 相当) */
.tekichu-bg-layer {
    position: absolute;
    width: 69.23%;
    height: 69.23%;
    top: 18.75%;
    left: 21.15%;
    z-index: 1; /* テキスト(.rn-content)より奥へ */
    pointer-events: none; /* クリック等を透過 */
}

    /* 各画像の共通設定 */
    .tekichu-bg-layer img {
        position: absolute;
        display: block;
    }

/* img/vector-28.svg (.vector 相当) */
.tekichu-vec-1 {
    width: 31.02%;
    height: 31.02%;
    top: 44.16%;
    left: 24.82%;
}

/* img/vector-29.svg (.vector-2 相当) */
.tekichu-vec-2 {
    width: 55.84%;
    height: 55.84%;
    top: 31.75%;
    left: 12.41%;
}

/* img/vector-30.svg (.vector-3 相当) */
.tekichu-vec-3 {
    width: 80.65%;
    height: 80.65%;
    top: 19.35%;
    left: 0;
}

/* img/vector-31.svg (.vector-4 相当) */
.tekichu-vec-4 {
    width: 62.77%;
    height: 62.77%;
    top: 0;
    left: 37.23%;
}

/* ==========================================================================
   共通: グレード別カラー定義 (Grade Colors)
   ========================================================================== */
.common-grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
    font-weight: bold;
    color: #ffffff !important; /* 白抜き */
    padding: 2px 8px; /* 上下・左右の余白 */
    border-radius: 4px; /* ちょっと丸い角 */
    line-height: 1.2;
    min-width: 36px;
    white-space: nowrap;
    vertical-align: middle;
}

/* 個別カラー定義 */
.grade-gp, .grade-sg {
    background-color: #bf901e !important; /* 金 */
}

.grade-g1 {
    background-color: #bf901e !important; /* 金 */
}

.grade-g2 {
    background-color: #a832ea !important; /* 紫 */
}

.grade-g3 {
    background-color: #0000aa !important; /* 青 */
}

.grade-f1 {
    background-color: #00b7c6 !important; /* シアン */
}

.grade-f2 {
    background-color: #2ebf2e !important; /* 緑 */
}

.grade-normal {
    background-color: #666666 !important; /* 濃い灰色（普通・その他） */
}

/* ADバナーのサイズ指定 */
.ad-300x250 {
    width: 300px;
    height: 250px;
    margin: 0 auto;
    background: #eee;
}

.ad-728x90 {
    width: 728px;
    height: 90px;
    margin: 0 auto;
    background: #eee;
}

.ad-300x100 {
    width: 300px;
    height: 100px;
    margin: 10px auto;
    background: #eee;
    padding: 2px 8px;
}

/* ==========================================================================
   出走表・オッズ・結果画面の文字サイズ拡大対応（修正版）
   ========================================================================== */

/* 1. 出走表、マトリックスオッズ、結果テーブルなどの中身 */
.table-keirin th,
.table-keirin td {
    font-size: 18px !important; /* thやtdにも念のため強制適用 */
}

/* 2. 人気順オッズの組番（- や =）とオッズ数値 */
.pop-odds {
    font-size: 18px !important; /* 元の14pxから拡大 */
}

/* 3. 払戻金テーブルの中身（結果画面） */
.table-payout td,
.table-payout th {
    font-size: 16px !important; /* 元のサイズから拡大 */
}

/* 4. 出走表内の選手名・年齢・級班などのサイズ拡大 */
.table-keirin .font-lg {
    font-size: 18px !important; /* 元は14px -> お好みのサイズに変更してください */
}

.table-keirin .font-sm {
    font-size: 14px !important; /* 元は10px -> お好みのサイズに変更してください */
}

/* ==========================================================================
   16. SP版 全体フォントサイズ・レイアウト調整 (PC 38px → SP 20px)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* ラウンドナビゲーションの「◯R」 */
    .rn-round {
        font-size: 20px !important;
    }

    /* 開催ヘッダーの「場名」 (各View内のCSSを強制上書き) */
    .rh-held-name {
        font-size: 20px !important;
    }

    /* もしHTMLタグに直接 style="font-size: 38px;" と書かれている見出しがあれば、それも上書きする保険 */
    h2[style*="38px"],
    div[style*="38px"],
    span[style*="38px"] {
        font-size: 20px !important;
    }

    h2[style*="28px"],
    div[style*="28px"],
    span[style*="28px"] {
        font-size: 16px !important;
    }

    h2[style*="24px"],
    div[style*="24px"],
    span[style*="24px"] {
        font-size: 14px !important;
    }

    .matrix-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mode-btn {
        font-size: 14px;
        padding: 8px;
    }

    /* 賭け式ボタンを折り返さず1行で横幅いっぱいに収める */
    .bet-type-nav {
        flex-wrap: nowrap !important;
        gap: 2px !important; /* ボタン間の隙間を限界まで詰める */
        width: 100%;
    }

    .bet-btn {
        flex: 1 1 0% !important; /* 7つのボタンを厳密に均等割付 */
        min-width: 0 !important; /* 最小幅の制限を解除 */
        font-size: 11px !important; /* スマホ用に文字サイズを調整 */
        padding: 8px 0 !important; /* 左右の余白をなくして文字領域を確保 */
        letter-spacing: -0.5px; /* 文字間をわずかに詰めて「3連複」などを収める */
        text-align: center;
        white-space: nowrap; /* ボタン内での文字折り返しを禁止 */
    }

    .footer-race-list-container {
        padding: 15px 10px;
    }
}