/* =========================================
   calendar-range.js 共通スタイル（PC・SP共通）
   ========================================= */
.daterangepicker .calendar-table table {
    border-collapse: separate;
}

.daterangepicker .calendar-table th {
    font-weight: bold;
    color: #555;
    text-align: center;
    padding: 4px 0;
}

.daterangepicker .calendar-table th:first-child {
    color: #c00;
}

.daterangepicker .calendar-table th:last-child {
    color: #06c;
}

.daterangepicker td.in-range {
    background-color: #E0EEF9 !important;
    color: #222 !important;
}

.daterangepicker td.active,
.daterangepicker td.active.in-range,
.daterangepicker td.active:hover {
    background-color: #338CD5 !important;
    color: #fff !important;
}

.daterangepicker td.off,
.daterangepicker td.off:hover {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

.daterangepicker td.disabled,
.daterangepicker td.disabled:hover {
    text-decoration: none;
}

.daterangepicker td.off.start-date:not(.ends),
.daterangepicker td.off.start-date:not(.ends):hover {
    background-color: #338CD5 !important;
    color: #fff !important;
    opacity: 1 !important;
    pointer-events: none !important;
    cursor: default !important;
}

.daterangepicker .calendar-table th.next span,
.daterangepicker .calendar-table th.prev span {
    display: inline-block !important;
}

.daterangepicker .calendar-table th.available span {
    pointer-events: auto;
}

.daterangepicker .drp-calendar .ym-text {
    display: inline-block;
    font-weight: bold;
    font-size: 15px;
    margin: 0 4px;
}

.daterangepicker .monthselect,
.daterangepicker .yearselect {
    display: none !important;
}

.daterangepicker .drp-buttons {
    display: none !important;
}

@media (max-width: 767px) {
    #calendarModal .daterangepicker {
        width: 100% !important;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border: none;
        box-shadow: none;
    }
}

.sp-sub-modal__header {
    position: sticky;
    top: 0;
    z-index: 10;
}

.sp-month-block {
    padding: 12px 0 24px;
    border-bottom: 1px solid #eee;
}

.sp-month-title {
    font-weight: bold;
    color: #000;
    margin-bottom: 8px;
    text-align: left;
    padding-left: 8px;
}

.sp-month-block table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.sp-month-block td {
    width: 14.2%;
    padding: 4px 0;
    border-radius: 0;
}

/* マウス端末専用のホバー効果 */
@media (hover: hover) and (pointer: fine) {
    .sp-month-block td.available:hover {
        background-color: #E0EEF9;
    }
}

.sp-month-block td.active {
    background-color: #338CD5 !important;
    color: #fff !important;
}

.sp-month-block td.in-range {
    background-color: #E0EEF9 !important;
    color: #222 !important;
}

.sp-month-block td.active,
.sp-month-block td.in-range {
    border-radius: 0;
}

.sp-month-block td.start-date.active {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.sp-month-block td.end-date.active {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.sp-month-block td.off {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

.sp-month-block td.empty {
    background: none;
    pointer-events: none;
}

.sp-calendar-container {
    padding-bottom: 120px;
}

.sp-calendar-selected {
    text-align: left;
    color: var(--color-white);
    margin-bottom: 12px;
}

.sp-calendar-selected__range {
    margin-bottom: 4px;
    color: var(--color-white);
}

.sp-calendar-selected__note {
    font-size: 11px;
    color: var(--color-white);
}

.sp-weekdays th {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 4px 0;
    color: #666;
    border-bottom: 1px solid #ddd;
}

.sp-weekdays th:first-child { color: #c00; }
.sp-weekdays th:last-child  { color: #06c; }

/* 吹き出しの崩れ修正 */
.daterangepicker:after {
    top: -6px;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    border-left: 7px solid transparent;
}