* { margin: 0; padding: 0; box-sizing: border-box; }
    body, th, .race-name {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, "Noto Sans JP", sans-serif;
        line-height: 1.6;
        color: #222;
    }
    body {
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
        font-size: 16px;
    }
    h1 {
        text-align: center;
        margin-bottom: 30px;
        font-size: 2.5em;
        color: #1B5E20;
        font-weight: bold;
    }
    .form-group {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    label {
        display: inline-block;
        width: 120px;
        font-weight: 600;
        font-size: 1.1em;
    }
    input, select, button {
        padding: 10px;
        font-size: 1em;
        border: 1px solid #999;
        background: white;
        border-radius: 4px;
    }
    input[type="date"], select {
        width: 180px;
    }
    input[type="number"] {
        width: 100px;
    }
    button {
        cursor: pointer;
        margin: 15px 0;
        background: #1B5E20;
        color: white;
        border: none;
        padding: 12px 24px;
        font-size: 1.1em;
        border-radius: 4px;
        transition: background 0.2s;
    }
    button:hover {
        background: #145214;
    }
    .button-container {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 15px 0;
    }
    .button-container button {
        margin: 0;
        flex: 1;
        min-width: 200px;
    }
    .race-info {
        margin: 30px 0;
    }
    .race-name {
        font-size: 1.5em;
        font-weight: bold;
        margin-bottom: 15px;
        color: #1B5E20;
    }
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
        margin-bottom: 30px;
    }
    th, td {
        padding: 12px;
        border: 1px solid #ddd;
        text-align: center;
        font-size: 1em;
    }
    th {
        background: #f4f4f4;
        font-weight: bold;
        cursor: pointer;
        position: relative;
        user-select: none;
        padding-right: 25px;
    }
    th:hover {
        background: #e4e4e4;
    }
    th::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 8px;
        opacity: 0.5;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }
    th.asc::after {
        content: '▲';
        font-size: 12px;
        opacity: 1;
    }
    th.desc::after {
        content: '▼';
        font-size: 12px;
        opacity: 1;
    }
    td {
        background: white;
    }
    .forecast-table .input-group {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .forecast-table select {
        width: 80px;
        margin-right: 8px;
        flex-shrink: 0;
    }
    .forecast-table .slider-container {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
    }
    .forecast-table input[type="range"] {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .umaren-table, .umatan-table, .sanrenpuku-table {
        max-width: 100%;
    }
    .umaren-table td:nth-child(1),
    .umatan-table td:nth-child(1),
    .sanrenpuku-table td:nth-child(1) {
        font-size: 1.1em;
        font-weight: bold;
    }
    .sanrenpuku-table td:nth-child(2),
    .umaren-table td:nth-child(2),
    .umatan-table td:nth-child(2) {
        white-space: normal;
        word-break: break-all;
        max-width: 300px;
    }
    .error-message {
        color: #d32f2f;
        margin: 15px 0;
        padding: 12px;
        background: #ffebee;
        border: 1px solid #ef9a9a;
        text-align: center;
        font-size: 1em;
        border-radius: 4px;
    }
    .loader {
        display: none;
        margin: 30px auto;
        width: 50px;
        height: 50px;
        border: 6px solid #f3f3f3;
        border-top: 6px solid #1B5E20;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    #config-group-display {
        background: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
    }
    #config-group-display .form-group {
        display: grid;
        grid-template-columns: 120px 180px 1fr;
        align-items: center;
        gap: 15px;
        margin-bottom: 15px;
    }
    #config-group-display .form-group label {
        width: auto;
        font-weight: 600;
        font-size: 1em;
    }
    #config-group-display .form-group select,
    #config-group-display .form-group span,
    #config-group-display .form-group .input-group {
        font-size: 1em;
    }
    #config-group-display .form-group .description {
        font-size: 0.85em;
        color: #666;
        line-height: 1.4;
    }
    #config-group-display .form-group button {
        padding: 8px 16px;
        font-size: 0.9em;
        background: #1B5E20;
        color: white;
        border: none;
        border-radius: 4px;
        margin-left: 10px;
        transition: background 0.2s;
    }
    #config-group-display .form-group button:hover {
        background: #145214;
    }
    #config-group-display .form-group .input-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    #config-group-display .form-group .input-group select {
        width: 100px;
    }
    .line-share-button {
        margin: 20px 0;
        text-align: center;
    }
    .line-share-button button {
        background: #00b833;
        color: white;
        border: none;
        padding: 12px 24px;
        font-size: 1.1em;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s;
        width: auto;
    }
    .line-share-button button:hover {
        background: #009933;
    }
    .instructions {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        margin: 20px 0;
        padding: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .instructions-header {
        background: #1B5E20;
        color: white;
        padding: 15px 20px;
        border-radius: 8px 8px 0 0;
        margin: 0;
    }
    .instructions-header h2 {
        margin: 0;
        font-size: 1.4em;
        font-weight: bold;
    }
    .instructions-content {
        padding: 20px;
    }
    .instruction-section {
        margin-bottom: 20px;
    }
    .instruction-section:last-child {
        margin-bottom: 0;
    }
    .instruction-section h3 {
        color: #1B5E20;
        font-size: 1.1em;
        font-weight: bold;
        margin: 0 0 8px 0;
        border-bottom: 2px solid #1B5E20;
        padding-bottom: 4px;
    }
    .instruction-section p {
        margin: 0 0 8px 0;
        line-height: 1.5;
        color: #333;
    }
    .instruction-section ul {
        margin: 0;
        padding-left: 20px;
    }
    .instruction-section li {
        margin-bottom: 4px;
        line-height: 1.4;
        color: #333;
    }
    .instruction-section.features {
        background: #e8f5e8;
        padding: 15px;
        border-radius: 6px;
        border-left: 4px solid #1B5E20;
    }
    .instruction-section.warning {
        background: #fff3cd;
        padding: 15px;
        border-radius: 6px;
        border-left: 4px solid #ffc107;
    }
    .instruction-section.warning h3 {
        color: #856404;
        border-bottom-color: #ffc107;
    }
    .instruction-section.warning li {
        color: #856404;
    }
    
    /* おすすめの買い方テーブルスタイル */
    .bet-suggestion-table {
        width: 100%;
        border-collapse: collapse;
        margin: 15px 0;
    }
    .bet-suggestion-table th,
    .bet-suggestion-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
        vertical-align: middle;
    }
    .bet-suggestion-table th {
        background-color: #f4f4f4;
        font-weight: bold;
    }
    .result-section {
        margin: 20px 0;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 8px;
        border: 1px solid #ddd;
    }
    .result-section h2 {
        color: #1B5E20;
        margin-bottom: 10px;
    }
    
    /* 効率バッジスタイル */
    .efficiency-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.8em;
        margin-left: 8px;
        color: white;
    }
    .efficiency-high {
        background: #4caf50;
    }
    .efficiency-medium {
        background: #ff9800;
    }
    .efficiency-low {
        background: #f44336;
    }
    
    /* 期待値情報スタイル */
    .expected-value-info {
        background: #e8f5e9;
        padding: 15px;
        border-radius: 8px;
        margin: 15px 0;
        border-left: 4px solid #1B5E20;
    }
    .expected-value-info p {
        margin: 5px 0;
        font-size: 0.95em;
    }
    
    /* フォームグループのスタイル調整 */
    .form-group .description {
        font-size: 12px;
        color: #666;
        margin-left: 10px;
    }
    
    @media (max-width: 768px) {
        body { padding: 10px; font-size: 14px; }
        h1 { font-size: 2em; }
        .form-group { flex-direction: column; align-items: flex-start; }
        label { width: 100%; margin-bottom: 5px; }
        input, select { width: 100%; max-width: 100%; }
        button { width: 100%; padding: 10px; }
        .button-container {
            flex-direction: column;
            gap: 10px;
        }
        .button-container button {
            width: 100%;
            min-width: auto;
        }
        th, td { padding: 8px; font-size: 0.9em; }
        .forecast-table .input-group {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        .forecast-table select { width: 60px; margin-right: 5px; flex-shrink: 0; }
        .forecast-table .slider-container {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 0;
            margin: 0;
        }
        .forecast-table input[type="range"] { width: 100%; margin: 0; padding: 0; }
        .umaren-table td:nth-child(1),
        .umatan-table td:nth-child(1),
        .sanrenpuku-table td:nth-child(1) {
            font-size: 1em; font-weight: bold;
        }
        .race-name { font-size: 1.3em; }
        .sanrenpuku-table td:nth-child(2),
        .umaren-table td:nth-child(2),
        .umatan-table td:nth-child(2) { max-width: 150px; }
        #config-group-display { padding: 15px; }
        #config-group-display .form-group { grid-template-columns: 1fr; gap: 10px; }
        #config-group-display .form-group select,
        #config-group-display .form-group span,
        #config-group-display .form-group .input-group { width: 100%; }
        .instructions-header h2 { font-size: 1.2em; }
        .instructions-content { padding: 15px; }
        .instruction-section h3 { font-size: 1em; }
        .instruction-section.features,
        .instruction-section.warning { padding: 10px; }
        
        /* おすすめの買い方モバイル対応 */
        .bet-suggestion-table th,
        .bet-suggestion-table td {
            padding: 6px;
            font-size: 0.8em;
        }
        .result-section {
            padding: 10px;
        }
        .form-group .description {
            margin-left: 0;
            margin-top: 5px;
            width: 100%;
        }
        .efficiency-badge {
            font-size: 0.7em;
            padding: 1px 6px;
        }
    }
    footer { margin-top: auto; text-align: center; font-size: 0.6em; padding: 0.5rem 0; }
    
    /* 開催レース一覧モーダル */
    .race-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }
    .race-modal-content {
        background-color: #fff;
        margin: 2% auto;
        padding: 20px;
        border: 1px solid #333;
        border-radius: 5px;
        width: 90%;
        max-width: 1200px;
        max-height: 90vh;
        overflow-y: auto;
    }
    .race-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #333;
    }
    .race-modal-header h2 {
        margin: 0;
        font-size: 1.5em;
        color: #1B5E20;
    }
    .race-close-button {
        color: #000;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        border: none;
        background: none;
        padding: 0;
        width: 30px;
        height: 30px;
        line-height: 28px;
    }
    .race-close-button:hover {
        color: #666;
    }
    .modal-date-input {
        text-align: center;
        margin-bottom: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
    .modal-date-input label {
        font-weight: bold;
        margin-right: 10px;
    }
    .modal-date-input input[type="date"] {
        padding: 8px;
        border: 1px solid #333;
        border-radius: 4px;
        background: #fff;
        color: #000;
    }
    .venue-section {
        margin-bottom: 20px;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 5px;
        background: #fff;
    }
    .venue-header {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid #333;
        color: #000;
    }
    .weather-info {
        font-size: 14px;
        color: #666;
        margin-bottom: 15px;
    }
    .modal-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 10px 0;
        border: 1px solid #ddd;
        border-radius: 5px;
        background: #fff;
    }
    .modal-table-container table {
        width: 100%;
        min-width: 600px;
        border-collapse: collapse;
        font-size: 14px;
    }
    .modal-table-container th,
    .modal-table-container td {
        padding: 8px 6px;
        text-align: left;
        border-bottom: 1px solid #eee;
        word-wrap: break-word;
        vertical-align: middle;
    }
    .modal-table-container tbody tr {
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .modal-table-container tbody tr:hover {
        background-color: #e8f5e9;
    }
    .modal-table-container th {
        font-weight: bold;
        background: #f4f4f4;
        border-bottom: 2px solid #ddd;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .modal-race-num {
        font-weight: bold;
        text-align: center;
        min-width: 60px;
    }
    .modal-race-time {
        font-size: 12px;
        color: #666;
    }
    .modal-race-name {
        font-weight: bold;
        color: #000;
        font-size: 16px;
    }
    .modal-race-details {
        font-size: 12px;
        color: #666;
        margin-top: 3px;
    }
    .modal-race-course {
        font-size: 12px;
        color: #444;
        margin-top: 3px;
    }
    .grade-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: bold;
        margin-left: 8px;
        border: 1px solid #333;
    }
    .grade-g1 {
        background: #000;
        color: #fff;
        border-color: #000;
    }
    .grade-g2 {
        background: #666;
        color: #fff;
        border-color: #666;
    }
    .grade-g3 {
        background: #999;
        color: #fff;
        border-color: #999;
    }
    .grade-listed {
        background: #fff;
        color: #000;
        border-color: #333;
    }
    
    @media (max-width: 768px) {
        .race-modal-content {
            width: 95%;
            margin: 5% auto;
            padding: 15px;
        }
        .race-modal-header h2 {
            font-size: 1.2em;
        }
        .modal-table-container table {
            font-size: 12px;
        }
        .modal-table-container th,
        .modal-table-container td {
            padding: 4px 3px;
        }
        .modal-race-name {
            font-size: 14px;
        }
    }