@charset "utf-8";

body { background-color: #f5f5f5; margin: 0; padding: 0; }
.main { width: 1200px; margin: 0 auto; font-size: 80%; padding: 20px; }
h1 { border-bottom: 1px solid #333; }

/* タブ */
.tabs { margin-bottom: 15px; }
.tab-button { padding: 10px 20px; cursor: pointer; border: 1px solid #ccc; background-color: #f0f0f0; font-size: 1em; border-radius: 5px 5px 0 0; margin-right: 5px; border-bottom: none; }
.tab-button.active { background-color: #fff; border-bottom: 1px solid #fff; font-weight: bold; }
.tab-content { padding: 15px; border: 1px solid #ccc; background-color: #fff; border-radius: 0 5px 5px 5px; }

/* レースクラスの色分け (★変更) */
td.class-g1 { background-color: #FFEE80; } /* Jpn1,2,3, S1, O1 */
td.class-g2 { background-color: #CCDFFF; } /* S2, O2 */
td.class-g3 { background-color: #F0C8A0; } /* S3, O3 */
td.class-pre-graded { background-color: #b0c4de; } 

th a { color: #ffffff; text-decoration: none; }
th a:hover { text-decoration: underline; }

table { border-collapse: separate; border-spacing: 0; border: 1px solid #f5f5f5; border-radius: 8px; overflow: hidden; width: 100%; margin-bottom: 20px; }
th { background-color: #333333; color: #f5f5f5; border: 1px solid #f5f5f5; padding: 8px 5px; text-align: center; }
td { padding: 8px 5px; border: 1px solid #f5f5f5; background-color: white; }
table tr:first-child th:first-child { border-top-left-radius: 8px; }
table tr:first-child th:last-child { border-top-right-radius: 8px; }
table tr:last-child td:first-child { border-bottom-left-radius: 8px; }
table tr:last-child td:last-child { border-bottom-right-radius: 8px; }
td.position-1 { background-color: #FFEE80; color: #000; }
td.position-2 { background-color: #CCDFFF; color: #000; }
td.position-3 { background-color: #F0C8A0; color: #000; }
td.popularity-1 { background-color: #FFEE80; }
td.popularity-2 { background-color: #CCDFFF; }
td.popularity-3 { background-color: #F0C8A0; }

.pagination { text-align: center; margin: 20px 0; }
.pagination a { margin: 0 10px; padding: 8px 16px; background-color: #333333; color: #f5f5f5; text-decoration: none; border-radius: 4px; }
.pagination a:hover { background-color: #444444; }

/* --- 分析タブ用スタイル --- */
.global-filter-container { margin: 20px 0; text-align: right; padding: 10px; background-color: #f9f9f9; border: 1px solid #eee; border-radius: 8px; }
.global-filter-container label { font-weight: bold; margin-right: 10px; font-size: 1.1em; }
.global-filter-container select { padding: 5px 8px; font-size: 1.1em; border-radius: 4px; border: 1px solid #ccc; }

.chart-container-full { width: 100%; max-width: 900px; margin: 20px auto; }
.chart-container { width: 100%; max-width: 450px; margin: 20px auto; }

/* 厩舎リスト用 */
.trainer-top-list { 
    margin-bottom: 15px; 
    font-size: 0.95em;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 5px;
}
.trainer-top-list ul { list-style: none; padding: 0; margin: 0; }
.trainer-top-list li { margin-bottom: 5px; }
.color-box { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: middle; border: 1px solid #ccc; }

#analysis::after { content: ""; display: table; clear: both; }

/* ★変更: レイアウト修正 (ラッパーとfloatを使用) */
@media screen and (min-width: 900px) {
    .chart-row-wrapper {
        overflow: hidden; /* clearfix */
    }
    /* .chart-container-half を .chart-container に変更 */
    .chart-container.chart-container-half {
        width: 48%;
        padding: 1%;
        margin: 20px 0; /* マージンは維持 */
    }
    /* 競馬場 (1番目) */
    .chart-row-wrapper .chart-container.chart-container-half:nth-child(1) {
        float: left;
        margin-right: 2%;
        margin-left: 0;
    }
     /* 厩舎 (2番目) */
    .chart-row-wrapper .chart-container.chart-container-half:nth-child(2) {
        float: right;
        margin-left: 2%;
        margin-right: 0;
    }
}

@media screen and (max-width: 1240px) { .main { width: calc(100% - 16px); margin: 0 8px; } }
@media screen and (max-width: 767px) {
    .main { width: 86%; margin: 0 auto; font-size: 70%; padding: 10px; }
    table { font-size: 12px; min-width: 100%; }
    th, td { padding: 6px 3px; white-space: nowrap; }
    .tab-content > table { display: block; overflow-x: auto; white-space: nowrap; }
    .tabs { white-space: nowrap; overflow-x: auto; }
    .tab-button { padding: 8px 12px; font-size: 0.9em; }
    .global-filter-container { text-align: left; }
    .global-filter-container select { width: 100%; margin-top: 5px; }
    
    /* ★変更: 900px 未満で float を解除 */
    @media screen and (max-width: 899px) {
        .chart-container.chart-container-half { 
            width: 100%; 
            max-width: 450px; 
            float: none !important; 
            margin: 20px auto !important; 
        }
    }
}
@media screen and (max-width: 480px) { .main { font-size: 65%; } table { font-size: 10px; } th, td { padding: 4px 2px; } }