@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* styles.css */
.schedule {
    font-size: 12px; /* フォントサイズを12pxに設定 */
    overflow-x: hidden; /* 横スクロールを防止 */
}

.schedule table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.schedule thead th {
    background-color: #ffce54;
    color: #fff;
    padding: 10px;
    text-align: center;
    border: 1px solid #D1D1D1;
}

.schedule tbody td {
    text-align: center;
    border: 1px solid #D1D1D1;
    padding: 10px;
}

.schedule th, .schedule td {
    width: 90px; /* 各列の幅を90pxに設定 */
    height: 25px; /* 行の高さを固定 */
}

.schedule tbody tr:nth-child(odd) td:not(.closed) {
    background-color: #fff; /* 奇数行の背景色を白に設定 */
}

.schedule tbody tr:nth-child(even) td:not(.closed) {
    background-color: #f9f9f9; /* 偶数行の背景色を#f9f9f9に設定 */
}

@media (max-width: 768px) {
    .schedule th, .schedule td {
        width: auto;
    }

    .schedule th:nth-child(3), .schedule td:nth-child(3) {
        width: 25px; /* SP表示時の3列目の幅を数値で指定 */
    }

    .schedule th:nth-child(5), .schedule td:nth-child(5) {
        width: 25px; /* SP表示時の5列目の幅を数値で指定 */
    }

    .schedule thead th {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px; /* 必要に応じて高さを調整 */
    }
}