@charset "UTF-8";

/* テーブル全体のスタイル */
table {
    width: 100%;
    /* テーブルをページ幅いっぱいに */
    border-collapse: collapse;
    /* セルの境界線をなくす */
    margin: 20px 0;
    /* テーブルの上下に余白を設定 */
    font-size: 14px;
    /* フォントサイズを調整 */
    text-align: center;
    /* テキストを左寄せ */
}



/* ボディのセルスタイル */
table tbody td {
    padding: 2px;
    /* セルの内側余白 */
    border: 1px solid black;
    /* セルの境界線 */
}

/* テーブルのホバー効果 */
table tbody tr:hover {
    background-color: #f1f1f1;
    /* マウスオーバー時の背景色 */
}


#result-table {
    width: 250px;
}

.result-label {
    width: 70px;
}

.result-data {
    width: 180px;
}

/* ヘッダーのスタイル */
.month-header,
.average-header,
.result-header {
    background-color: #CBCBCB;
    /* 背景色を薄いグレーに */
    color: black;
    /* テキスト色を濃いグレーに */
    font-weight: bold;
    /* 太字に */
    padding: 2px;
    /* セルの内側余白 */
    border: 1px solid black;
    /* 境界線 */
}

.month-header:hover,
.average-header:hover {
    background-color: #CBCBCB;
}



/* 土曜日用のスタイル */
.day-saturday {
    background-color: #F8FFCB;
}

.day-saturday:hover {
    background-color: #E4EBB5;
    /* 少し暗いトーン */
}

/* 日曜日用のスタイル */
.day-sunday {
    background-color: #CBE5FF;
}

.day-sunday:hover {
    background-color: #AACCE8;
    /* 少し暗いトーン */
}

/* 月曜日用のスタイル */
.day-monday {
    background-color: #FFCBCF;
}

.day-monday:hover {
    background-color: #E3B0B4;
    /* 少し暗いトーン */
}

/* 週末用のスタイル */
.day-weekends {
    background-color: #FFDCCB;
}

.day-weekends:hover {
    background-color: #E7C4B3;
    /* 少し暗いトーン */
}

/* 全曜日用のスタイル */
.day-all {
    background-color: #EBCBFF;
}

.day-all:hover {
    background-color: #D1AFE3;
    /* 少し暗いトーン */
}

.rank_radios div,
.rank_radios label {
    display: inline-block;
    margin-right: 5px;
}

.unregistered {
    font-size: 0.7em;
    color: red;
    /* 未登録の場合の色 */

}



.select-disabled {
    pointer-events: none;
    /* ユーザーの操作を無効化 */
    background-color: #e9ecef;
    /* 無効化されたように見せる */
    color: #6c757d;
    /* 無効化されたように見せる */
}

.day_column {
    white-space: nowrap;
    min-width: 55px;
}

.day_of_week_column {
    white-space: nowrap;
    min-width: 30px;

}

.value_column {
    white-space: nowrap;
    min-width: 60px;
}








@media (max-width:1024px) {
    table {
        font-size: 10px;
    }

    .day_column {
        white-space: nowrap;
        min-width: 40px;
    }

    .day_of_week_column {
        white-space: nowrap;
        min-width: 25px;

    }

    .value_column {
        white-space: nowrap;
        min-width: 50px;
    }


}


@media (max-width:600px) {

    table {
        font-size: 6px;
    }

    .day_column {
        white-space: nowrap;
        min-width: 30px;
    }

    .day_of_week_column {
        white-space: nowrap;
        min-width: 15px;

    }

    .value_column {
        white-space: nowrap;
        min-width: 30px;
    }

}