#booking-package .sun {
    
}

#booking-package .mon {
    
}

#booking-package .tue {
    
}

#booking-package .wed {
    
}

#booking-package .thu {
    
}

#booking-package .fri {
    
}

#booking-package .sat {
    
}

#booking-package .nationalHoliday {
    
}

#booking-package_calendarPage .dateField {
    /**
    background-color: #0f9b79;
    color: #fff;
    font-weight: 400;
    **/
}

#booking-package_calendarPage .startDateOfFullRoom {
    /**
    background-image: repeating-linear-gradient(270deg, #ff8989 0px 50%, transparent 0% 100%);
    **/
}

#booking-package_calendarPage .dateOfFullRoom {
    /**
    background: #ff8989;
    **/
}

#booking-package_calendarPage .endDateOfFullRoom {
    /**
    background-image: repeating-linear-gradient(90deg, #ff8989 0px 50%, transparent 0% 100%);
    **/
}

/* 1. フォームコンテナ全体をカード型に */
.calendarController {
    /* 背景を白、角丸を適用 */
    background-color: #ffffff;
    border-radius: 12px;
    padding: 30px; /* 内側の余白を広くとる */
    margin-bottom: 30px;
    /* 控えめな影をつけ、モダンで浮遊感のあるデザインに */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
}

/* 2. カレンダーヘッダー（月表示部分）のフォントと色調整 */
.calendarController .monthArea {
    font-weight: 600;
    font-size: 20px;
    color: #333; /* 文字を濃い色に */
}

/* 3. 月送りボタン（< >）の色をアクセントカラーに */
.calendarController .monthArea i {
    color: #FF8C00; /* サイトのアクセントカラー（オレンジ）を適用 */
    font-size: 22px;
    transition: color 0.3s;
}
.calendarController .monthArea i:hover {
    color: #cc6600; /* ホバーで少し濃く */
}

/* 4. カレンダーの曜日（日、月、火...）の文字色 */
.calendarController .dayOfTheWeek {
    color: #888;
    font-size: 14px;
}

/* 5. 予約可能な日付のスタイル */
.calendarController .calendarCell.selectable {
    /* 予約可能な日の背景をわずかに明るく */
    background-color: #f7f7f7; 
    border-radius: 4px;
    transition: background-color 0.2s;
}

/* 6. 予約可能な日付にマウスを乗せた時（ホバー） */
.calendarController .calendarCell.selectable:hover {
    background-color: #ffead8; /* アクセントカラーの薄い色 */
    cursor: pointer;
}

/* 7. 予約数と日付のフォント調整 */
.calendarController .calendarCell .dayOfMonth {
    font-weight: 600; /* 日付を強調 */
    color: #333;
}
.calendarController .calendarCell .availableSpot {
    font-size: 12px;
    color: #FF8C00; /* 予約可能数をアクセントカラーに */
    font-weight: 500;
}

/* 8. 送信ボタン（予約する、戻る）のスタイル統一 */
.booking-package-booking-form button.btn-success,
.booking-package-booking-form button.btn-danger {
    font-weight: bold;
    font-size: 16px;
    padding: 12px 30px;
    border-radius: 50px; /* 角丸にしてモダンなピル型ボタンに */
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* 9. 「予約する」ボタン（オレンジ） */
.booking-package-booking-form button.btn-success {
    background-color: #FF8C00 !important; /* アクセントカラー */
    color: #ffffff !important;
}
.booking-package-booking-form button.btn-success:hover {
    background-color: #cc6600 !important; /* ホバーで色を濃く */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 140, 0, 0.4); 
}

/* 10. 「戻る」ボタン（控えめなデザイン） */
.booking-package-booking-form button.btn-danger {
    background-color: #f0f0f0 !important;
    color: #555 !important;
}
.booking-package-booking-form button.btn-danger:hover {
    background-color: #e0e0e0 !important;
    transform: none;
}