/* =================================================
   予約カレンダーのデザイン
   ================================================= */

/* --- 1. カレンダー全体の基本スタイル --- */
#booking-package_calendarPage .dateField {
    background-color: #f5f5dc; /* 明るいベージュ */
    color: #333333;          /* はっきりした黒 */
    font-weight: 400;
}

/* --- 2. 曜日の文字色 --- */
#booking-package .sat {
    color: #8a9a5b; /* 土曜日: オリーブグリーン */
}

#booking-package .sun,
#booking-package .nationalHoliday {
    color: #c08552; /* 日曜日・祝日: 少し濃い茶色 */
}

/* --- 3. 満室日のスタイル --- */
#booking-package_calendarPage .dateOfFullRoom,
#booking-package_calendarPage .startDateOfFullRoom,
#booking-package_calendarPage .endDateOfFullRoom {
    color: #a9a9a9;      /* 文字をグレーアウト */
    cursor: not-allowed; /* カーソルを禁止マークに */
}

#booking-package_calendarPage .dateOfFullRoom {
    background-color: #e4d5b7; /* 満室日: 少し濃いベージュ */
}

#booking-package_calendarPage .startDateOfFullRoom {
    /* 満室期間の開始日 (右半分を通常色に) */
    background-image: repeating-linear-gradient(270deg, #e4d5b7 0px 50%, #f5f5dc 0% 100%);
}

#booking-package_calendarPage .endDateOfFullRoom {
    /* 満室期間の終了日 (左半分を通常色に) */
    background-image: repeating-linear-gradient(90deg, #e4d5b7 0px 50%, #f5f5dc 0% 100%);
}

/* --- 4. (推奨) 選択可能な日付のホバー効果 --- */
#booking-package_calendarPage .dateField:not(.dateOfFullRoom):hover {
    background-color: #e6e6ca; /* 通常色より少し濃いベージュ */
    cursor: pointer;
}