@charset "UTF-8";
.reservation-day-empty{
    background-color: #f0f0f0;
    color: #999;
    border: 1px solid #ccc;
    text-align: center;
    padding: 10px;
}

.reservation-weekdays{
    background-color: white;
}

.reservation-holidays{
    background-color: rgb(255, 150, 150);
    color: rgb(255, 255, 255);
    padding: 0.1em;
}.reservation-holidays-caption{
    background-color: rgb(255, 255, 255);
    color: rgb(255, 150, 150);
    font-weight: bold;
    width: 100%;
    margin: auto;
    white-space: nowrap;
}

.reservation-select-holidays{
    background-color: rgb(255, 60, 60);
    color: rgb(255, 255, 255);
    padding: 0.1em;
}

.reservation-events-caption{
    background-color: rgb(255, 255, 255);
    color: rgb(255, 0, 0);
    font-weight: bold;
    width: 100%;
    margin: auto;
    white-space: nowrap;
}

.reservation-events-days{
    color: #fff;
    font-weight: bold;
    background: linear-gradient(
        180deg,
        #fff7b2 0%,
        #f1c40f 25%,
        #d4af37 100%
    );
    border: 1px solid #d4af37;
    box-shadow:
        0 0 6px rgba(212, 175, 55, 0.6),
        inset 0 0 4px rgba(255, 255, 255, 0.6);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    transition: transform 0.2s ease;
    padding: 0.1em;
}.day-event:hover {
    transform: scale(1.05);
    box-shadow:
        0 0 10px rgba(255, 215, 0, 0.8),
        inset 0 0 6px rgba(255, 255, 255, 0.7);
}

.reservation-sunday{
    background-color: rgb(255, 150, 150);
    color: white;
}.reservation-saturday{
    background-color: rgb(150, 150, 255);
    color: white;
}

.reservation-closed-days{
    background-color: rgb(121, 121, 121);
    padding: 0.1em;
}

.reservation-closed-caption{
    color: white;
    font-weight: bold;
    width: fit-content;
    height: fit-content;
    border: 1px solid white;
    border-radius: 15px;
    margin: auto;
    white-space: nowrap;
    padding: 0 10px;
    font-size: 0.8em;
}

.reservation-is-today{
    position: relative;
}.reservation-is-today::after {
    content: "本日";
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.75rem;
    font-weight: bold;
    color: #2ecc71;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #a7e9bf;
    border-radius: 999px;
    padding: 0 0.4em;
    line-height: 1.6;
}

.reservation-swiper {
    position: relative;
    margin: auto;
    padding: 0.5em 0;
}

.reservation-calendar-container {
    color: black;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.reservation-month-container{
    overflow: hidden;
    color: black;
}

.reservation-day-container{
    border-radius: 3px;
    height: 3em;
}.reservation-day-container > div{
    height: 50%;
}.reservation-day-container{
    border: 1px solid #ccc;
}

.reservation-grid-container{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 3em;
    gap: 0.5em;
}

.reservation-swiper-prev{
    left: 25%;
}

.reservation-swiper-next{
    right: 25%;
}

.swiper-button-prev, .swiper-button-next{
    color: black;
    width: fit-content;
    height: fit-content;
    top: 0.1em;
}   

.swiper-button-prev{
    transform: rotate(-90deg);
}

.swiper-button-next{
    transform: rotate(90deg);
}

.swiper-wrapper{
    width: 50%;
}

.reservation_events_container{
    width: 95%;
    gap: 1em;
    color: black;
    margin: 0.5em auto;
}

.reservation_events_box{
    width: 90%;
    margin: auto;
    padding: 1em;
    background-color: var(--body--block-color-2);
    border: solid 5px rgb(255 184 59);
    border-radius: 15px 15px 0px 0px;
}.reservation_events_box > div{
    width: fit-content;
    margin: auto;
    padding: 0 0 0.5em;
}.reservation_events_box > img{
    width: 100%;
    height: auto;
    margin: auto;
}

/* PC */
@media screen and (min-width: 769px) {
    .reservation-swiper {
        width: 90%;
    }

    .reservation-holidays-caption, .reservation-events-caption{
        font-size: 0.8em;
    }

}

/* SP */
@media screen and (max-width: 769px) {
    .reservation-swiper {
        width: 95%;
    }

    .reservation-holidays-caption, .reservation-events-caption{
        font-size: 0.5em;
    }

}