.alert-banner {
    background-color: #ffcccc; /* 薄い赤背景 */
    color: #d32f2f;           /* 濃い赤文字 */
    border: 2px solid #d32f2f;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 20px;
    border-radius: 5px;
}

.reservation-system {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.calendar-sidebar {
    flex: 1;
    min-width: 250px;
}

.timetable-area {
    flex: 3;
    overflow-x: auto;
    max-height: 600px;
    border: 1px solid #ccc;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    font-size: 0.9em;
}

th {
    background-color: #f4f4f4;
    position: sticky;
    top: 0;
}

.booked {
    background-color: #ffebee;
    color: #c62828;
    font-weight: bold;
}

.free {
    color: #4caf50;
}

.reserve-button {
    display: block;
    margin-top: 20px;
    padding: 15px;
    background: #d32f2f;
    color: white;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
}

/* スマホ表示（画面幅768px以下）のレイアウト調整 */
@media screen and (max-width: 768px) {
    .reservation-system {
        display: flex;
        flex-direction: column; /* 要素を縦並びにする */
    }

    .calendar-sidebar {
        order: 1; /* サイドバー（ボタン類）を上に */
        margin-bottom: 20px;
    }

    .timetable-area {
        order: 2; /* タイムテーブルを下に */
        width: 100%;
        overflow-x: auto; /* テーブルが潰れないよう横スクロールを許可 */
    }

    /* テーブル自体の最小幅を確保して、文字が潰れるのを防ぐ */
    #timetable-container table {
        min-width: 500px; 
    }
}