:root {
    --border-color: 2px solid rgb(87, 87, 87);
    --holiday: rgb(245, 169, 156);
    --no-day: rgb(211, 211, 211);
}



/* パソコン */
@media (1200px < width) {
    .cb87acf1-bf75-43ff-b9fd-0266e2872d30{
        display: grid;
        grid-template:
            " ....... ....... ......." 150px
            " ca_Area ca_Area ca_Area" auto
            " ....... ....... ......." 150px
            / 0.1fr 1fr  0.1fr;
    }
    
    .calendarArea {
        grid-area: ca_Area;
        display: grid;
        grid-template:
            " ...... ...... ...... ...... ...... ...... " 200px
            " ...... ca_ti1 ...... ...... ca_cal ...... " auto
            " ...... ca_ti1 ...... ...... ca_cal ...... " auto
            " ...... ca_ti1 ...... ...... ca_cal ...... " auto
            " ...... ca_ti1 ...... ...... ca_cal ...... " auto
            " ...... ...... ...... ...... ca_cal ...... " auto
            " ...... ca_res ca_res ...... ca_cal ...... " auto
            " ...... ...... ...... ...... ...... ...... " 200px
            / 0.1fr 0.6fr 0.5fr 0.1fr 1fr 0.1fr;
        background-image: var(--calendar-bgi);
        background-size: cover;
    }
    .business_day {
        grid-area: ca_ti1;
        /* 文字を縦にする */
        writing-mode: vertical-rl;
        align-items: center;
        text-align: left;
    }
}

/* タブレット */
@media (768px <=width <=1200px) {
    .cb87acf1-bf75-43ff-b9fd-0266e2872d30{
        display: grid;
        grid-template:
            " ....... ....... ......." 150px
            " ca_Area ca_Area ca_Area" auto
            " ....... ....... ......." 150px
            / 0.1fr 1fr  0.1fr;
    }
    
    .calendarArea {
        grid-area: ca_Area;
        display: grid;
        grid-template:
            " ...... ...... ...... ...... ...... ...... " 200px
            " ...... ca_ti1 ...... ...... ca_cal ...... " auto
            " ...... ca_ti1 ...... ...... ca_cal ...... " auto
            " ...... ca_ti1 ...... ...... ca_cal ...... " auto
            " ...... ca_ti1 ...... ...... ca_cal ...... " auto
            " ...... ...... ...... ...... ca_cal ...... " auto
            " ...... ca_res ca_res ...... ca_cal ...... " auto
            " ...... ...... ...... ...... ...... ...... " 200px
            / 0.1fr 0.7fr 0.5fr 0.1fr 1fr 0.1fr;
        background-image: var(--calendar-bgi);
        background-size: cover;
    }
    .business_day {
        grid-area: ca_ti1;
        /* 文字を縦にする */
        writing-mode: vertical-rl;
        align-items: center;
        text-align: left;
    }
}

/* スマホ */
@media (width < 768px) {
    .cb87acf1-bf75-43ff-b9fd-0266e2872d30{
        display: grid;
        grid-template:
            " ....... ....... ......." 150px
            " ca_Area ca_Area ca_Area" auto
            " ....... ....... ......." 150px
            / 0.1fr 1fr  0.1fr;
    }
    
    .calendarArea {
        grid-area: ca_Area;
        display: grid;
        grid-template:
            " ...... ...... ...... ...... ...... ...... " 50px
            " ...... ca_ti1 ca_ti1 ca_ti1 ca_ti1 ...... " auto
            " ...... ...... ...... ...... ...... ...... " 20px
            " ...... ca_cal ca_cal ca_cal ca_cal ...... " auto
            " ...... ...... ...... ...... ...... ...... " 50px
            " ...... ca_res ca_res ca_res ca_res ...... " auto
            " ...... ...... ...... ...... ...... ...... " 50px
            / 0.1fr 0.6fr 0.5fr 0.1fr 1fr 0.1fr;
        background-image: var(--calendar-bgi);
        background-size: cover;
    }
    .business_day {
        grid-area: ca_ti1;
        text-align: center;
    }
}







/* 日にちのクリック判定を消す */
.db_data {
    pointer-events: none;
}



.business_day_text {
    background-color: #FFFFFBB3;
    padding: 20px;
}
.business_day_text h2{
    font-size: clamp(20px, 3vw, 3vw);
}



.reservation_button {
    grid-area: ca_res;
    text-align: center;
}





.panel-area {
    grid-area: ca_cal;
}





.panel {
    text-align: center;
    background-color: #FFFFFB;
    filter: drop-shadow(6px 12px 10px #1C1C1C);
    max-width: 600px;
    display: grid;
    grid-template:
        "......... ......... ........." 50px
        "......... cal_month ........." auto
        "......... ......... ........." 10px
        "......... calendar0 ........." auto
        "......... ......... ........." 50px
        /0.1fr 1fr  0.1fr;
}



.calendar_month{
    grid-area: cal_month;
}
.calendar_month h2 {
    font-size: clamp(20px, 3vw, 3vw);
}

.calendar {
    grid-area: calendar0;
    display: grid;
    grid-template:
        "......... ......... ......... ......... ......... ......... ......... ......... ........." 50px
        "......... sunday    monday    tuesday   wednesday thursday  friday    saturday  ........." auto
        "......... ......... ......... ......... ......... ......... ......... ......... ........." 50px
        /0.1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.1fr;
}





.square_target a {
    display: block;
    width: 100%;
    height: 100%;
}

.square_target p {
    height: 100%;
    display: grid;
    place-items: center;
    writing-mode: horizontal-tb;
}


.sunday {
    grid-area: sunday;
}

.monday {
    grid-area: monday;

}

.tuesday {
    grid-area: tuesday;
}

.wednesday {
    grid-area: wednesday;
}

.thursday {
    grid-area: thursday;
}

.friday {
    grid-area: friday;
}

.saturday {
    grid-area: saturday;
}

.calendar_vertical {
    border-left: var(--border-color);
    display: grid;
    grid-template:
        "weeks    " 2rem
        "calendar1" 2.5rem
        "calendar2" 2.5rem
        "calendar3" 2.5rem
        "calendar4" 2.5rem
        "calendar5" 2.5rem
        "calendar6" 2.5rem
        /1fr;
}



.weeks {
    grid-area: weeks;
    border-bottom: var(--border-color);
    border-top: var(--border-color);
    background-color: rgb(189, 192, 186);
}

.calendar1 {
    grid-area: calendar1;
    border-bottom: var(--border-color);
    background-color: #FFFFFB;
}

.calendar2 {
    grid-area: calendar2;
    border-bottom: var(--border-color);
    background-color: #FFFFFB;
}

.calendar3 {
    grid-area: calendar3;
    border-bottom: var(--border-color);
    background-color: #FFFFFB;
}

.calendar4 {
    grid-area: calendar4;
    border-bottom: var(--border-color);
    background-color: #FFFFFB;
}

.calendar5 {
    grid-area: calendar5;
    border-bottom: var(--border-color);
    background-color: #FFFFFB;
}

.calendar6 {
    grid-area: calendar6;
    border-bottom: var(--border-color);
    background-color: #FFFFFB;
}

.calendar_vertical2 {
    border-right: var(--border-color);
    background-color: #FFFFFB;
}






.no_day {
    background-color: var(--no-day) !important;
}

.holiday_square {
    background-color: var(--holiday) !important;
}








/* ボタン */

/* パソコン */
@media (1200px < width) {
    .reservation_button a {
        cursor: pointer;
        font-weight: 700;
        transition: all 0.2s;
        padding: 30px 90px;
        border-radius: 100px;
        background-color: #FFFFFB;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        font-size: clamp(16px, 1.5vw, 2vw);
    }
}

/* タブレット */
@media (768px <=width <=1200px) {
    .reservation_button a {
        cursor: pointer;
        font-weight: 700;
        transition: all 0.2s;
        padding: 20px 25px;
        border-radius: 100px;
        background-color: #FFFFFB;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        font-size: clamp(16px, 1.5vw, 2vw);
    }
}

/* スマホ */
@media (width < 768px) {
    .reservation_button a {
        cursor: pointer;
        font-weight: 700;
        transition: all 0.2s;
        padding: 20px 30px;
        border-radius: 100px;
        background-color: #FFFFFB;
        border: 1px solid transparent;
        display: flex;
        align-items: center;
        font-size: clamp(16px, 1.5vw, 2vw);
    }
}



.reservation_button {
    filter: drop-shadow(6px 12px 10px #1C1C1C);
    display: flex;
    /* Flexbox for alignment */
    justify-content: center;
    /* Centers horizontally */
    align-items: center;
    /* Centers vertically */
}



.reservation_button a:hover {
    background-color: #FFFFFB;
}

.reservation_button a>svg {
    width: 34px;
    margin-left: 10px;
    transition: transform 0.3s ease-in-out;
}

.reservation_button a:hover svg {
    transform: translateX(5px);
}

.reservation_button a:active {
    transform: scale(0.95);
}

/* ボタン */