/* flatpickr-innerContainer を中央寄せ */
.flatpickr-innerContainer {
    margin: 0 auto !important;
    width: 308px !important;
    min-width: 308px !important;
    max-width: 308px !important;
    display: block !important;
}

/* 今日の日付のhover時も文字色が消えないようにする */
.flatpickr-day.today:hover {
    background: #e0e0e0 !important;
    color: #222 !important;
    border: 2px solid #707070 !important;
}

/* --- flatpickrカレンダー日付セルの密着・枠線・背景色を徹底 --- */
.dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.flatpickr-days {
    background: #fff !important;
    border-radius: 0 !important;
    border: 1px solid #e0e0e0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 308px !important;
    min-width: 308px !important;
    max-width: 308px !important;
    display: flex !important;
    justify-content: center !important;
}

.flatpickr-day {
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.disabled {
    color: #bbb !important;
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    cursor: not-allowed !important;
}

/* 選択不可の日付にも枠を付け、枠色をグレーに */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.disabled {
    color: #bbb !important;
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    box-sizing: border-box !important;
    cursor: not-allowed !important;
}

/* 日付の横の隙間を完全になくす */
.flatpickr-day {
    margin: 0 !important;
    float: left !important;
    width: calc(100% / 7) !important;
    box-sizing: border-box !important;
}

.dayContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 日付間の隙間をなくし、日付に枠線をつける */
.flatpickr-day {
    margin: 0 !important;
    border: 1px solid #bbb !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

.flatpickr-day:not(.flatpickr-disabled):not(.selected):not(.today):hover {
    background: #e0e0e0 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #222 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.flatpickr-day.today {
    border: 2px solid #707070 !important;
    border-radius: 0 !important;
}

/* 月・年ドロップダウンの高さ・中央揃えを徹底 */
.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 38px !important;
    position: relative;
    z-index: 2;
    background: none !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #222 !important;
    border-radius: 0 !important;
}

.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    height: 32px !important;
    line-height: 32px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 0 8px !important;
    border-radius: 4px !important;
    border: 1px solid #bbb !important;
    background: #fff !important;
    margin: 0 2px !important;
    z-index: 2 !important;
    min-width: 90px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

.flatpickr-monthDropdown-months {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.flatpickr-current-month .numInputWrapper {
    display: flex !important;
    align-items: center !important;
    height: 32px !important;
}

/* 月ドロップダウンの初期margin埋もれを強制解消 */
.flatpickr-monthDropdown-months {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.flatpickr-monthDropdown-months {
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 32px !important;
    box-sizing: border-box !important;
}

/* 月・年ドロップダウンを正しく横並び・同じ高さ・同じデザインに */
.flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 38px !important;
    position: relative;
    z-index: 2;
    background: none !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #222 !important;
    border-radius: 0 !important;
}

.flatpickr-monthDropdown-months {
    height: 32px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 0 8px !important;
    border-radius: 4px !important;
    border: 1px solid #bbb !important;
    background: #fff !important;
    margin: 0 2px !important;
    z-index: 2 !important;
    min-width: 90px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    background-repeat: unset !important;
    background-position: unset !important;
    background-size: unset !important;
    padding-right: 0 !important;
    text-align: center !important;
}

.flatpickr-current-month input.cur-year,
.flatpickr-current-month select.cur-year {
    height: 32px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 0 8px !important;
    border-radius: 4px !important;
    border: 1px solid #bbb !important;
    background: #fff !important;
    margin: 0 2px !important;
    z-index: 2 !important;
    min-width: 90px !important;
    width: auto !important;
    text-align: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-sizing: border-box !important;
}

/* 年selectのデフォルト矢印をカスタム（cur-year/cur-year-jp両方に必ず適用） */
.flatpickr-current-month select.cur-year,
.flatpickr-current-month select.cur-year-jp {
    background-image: none !important;
    background-repeat: unset !important;
    background-position: unset !important;
    background-size: unset !important;
    padding-right: 0 !important;
    text-align: center !important;
    cursor: pointer !important;
}

/* 年input型の上下ボタンだけ非表示（select型は消さない） */
.flatpickr-current-month .numInputWrapper input.cur-year {
    display: none !important;
}

/* flatpickrカレンダーの月・年ドロップダウンを横並び・同じ高さに */
.flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    position: relative;
    z-index: 2;
}

.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    height: 32px;
    font-size: 18px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid #bbb;
    background: #fff;
    margin: 0 2px;
    z-index: 2;
}

/* 都道府県セレクトだけフォントサイズを16pxに固定 */
select.form-input-customer-select[name="address_2"] {
    font-size: 16px;
}

/* セレクトボックスのプレースホルダー色・選択時色を統一 */
select.form-input-customer-select {
    color: #bbb;
}

/* select.form-input-customer-select:valid {
    color: #000;
} */

select.form-input-customer-select option[value=""] {
    color: #bbb;
}

/* 時間セレクトボックスのプレースホルダー色を統一 */
select.form-input-customer-select option[value=""] {
    color: #bbb;
}

/* flatpickrカレンダー四角・日本語・グレー基調・区切り線も四角 */
.flatpickr-calendar {
    background: #fff;
    border: 1px solid #bbb;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
    color: #222;
    font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
    border-radius: 0;
    min-width: 320px;
}

.flatpickr-months,
.flatpickr-weekdays {
    background: #fff;
    color: #222;
    border-radius: 0;
}

.flatpickr-months {
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    font-size: 22px;
    color: #222;
    background: none;
    border: none;
    border-radius: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.flatpickr-prev-month:after {
    content: '◀';
}

.flatpickr-next-month:after {
    content: '▶';
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    display: none;
}

.flatpickr-current-month {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 18px;
    font-weight: 500;
    color: #222;
    background: none;
    border-radius: 0;
    position: relative;
    z-index: 1;
}

.flatpickr-current-month input.cur-year {
    color: #222;
    background: #fff;
    border: none;
    font-size: 18px;
    font-weight: 500;
    width: 3.5em;
    position: relative;
    z-index: 1;
}

.flatpickr-monthDropdown-months {
    font-size: 18px;
    font-weight: 500;
    background: #fff;
    border-radius: 0;
}

.flatpickr-weekdays {
    background: #f7f7f7;
    border-radius: 0;
}

.flatpickr-days {
    background: #f0f0f0;
    border-radius: 0;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
}

.flatpickr-day {
    color: #222;
    background: #f0f0f0;
    border-radius: 0 !important;
    transition: background 0.2s, color 0.2s;
    font-size: 16px;
    margin: 0;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: #e0e0e0;
    color: #111;
    border-radius: 0 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #222;
    color: #fff;
    border-radius: 0 !important;
}

.flatpickr-day.today {
    border: 2px solid #707070;
    border-radius: 0 !important;
}

.flatpickr-disabled,
.flatpickr-day.disabled {
    color: #888 !important;
    background: #bbb !important;
    cursor: not-allowed;
    border-radius: 0 !important;
}

.flatpickr-day:not(.flatpickr-disabled):not(.disabled):not(.selected):not(.today) {
    box-shadow: none !important;
}

.flatpickr-current-month .numInputWrapper {
    width: auto;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown {
    position: static;
    margin: 0 2px;
    width: 18px;
    height: 18px;
    z-index: 2;
}

.flatpickr-current-month .numInputWrapper input {
    padding-right: 0;
    padding-left: 0;
    text-align: center;
}

select.form-input-customer-select {
    display: block !important;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    z-index: 2;
}

#clear-date-btn:active {
    color: #222;
}