.about {
    .section-map {
        padding-bottom: clamp(141px, 20vw, 280px);

        .map-wrap {
            padding-inline: 0;
        }

        iframe {
            width: 100%;
            border: 0;
            aspect-ratio: 19/5;
        }

        .title {
            h3 {
                padding-block: 30px 15px;
                font-size: var(--f-size-20);
            }

            p {
                font-size: var(--f-size-14);
            }
        }
    }

    @media (width < 1400px) {
    }
    @media (width < 1024px) {
        .section-map {
            padding-top: 20px;

            .map-wrap {
                padding-inline: clamp(20px, 3vw, 50px);

                iframe {
                    aspect-ratio: 37/26;
                }
            }
        }
    }
    @media (width < 768px) {
    }
    @media (width < 576px) {
    }
}

/*************************************************/
.room-preview {
    main {
        padding-top: clamp(149px, 15vw, 270px);
        padding-bottom: clamp(141px, 15vw, 280px);
    }

    h2 {
        padding-bottom: 30px;
        border-bottom: 1px solid var(--color-black);
        font-size: 60px;
        font-family: var(--font-2), var(--font-3);
    }

    h3 {
        padding-top: clamp(30px, 9vw, 40px);
        padding-bottom: clamp(30px, 18vw, 80px);
    }

    .article-wrap {
        display: flex;
        flex-direction: column;
        gap: clamp(60px, 10vw, 180px);
    }

    .article {
        display: flex;
        gap: 40px
    }

    .room-item {
        width: 74%;
    }

    .room-text {
        .title {
            font-size: var(--f-size-20);
            padding-bottom: 22px;
        }

        .tag {
            font-size: 14px;
            color: #A6A6A6;
            transition: 0.5s;
        }
        .tag span{
            margin-right: 5px;
            transition: 0.5s;
        }
        .tag span:hover{
            color: var(--color-black);
        }
    }

    @media (width < 1400px) {
    }
    @media (width < 1024px) {
        h2 {
            font-size: 26px;
        }

        .article {
            flex-direction: column;
            gap: 30px
        }

        .room-item {
            width: 100%;
        }

        .room-text {
            .title {
                padding-bottom: 14px;
            }
        }
    }
    @media (width < 768px) {
    }
    @media (width < 576px) {
    }
}

/*************************************************/
.room {
    .section-room-10 {
        padding-bottom: clamp(110px, 10vw, 180px);

        h3 {
            padding-top: clamp(110px, 10vw, 130px);
            padding-bottom: clamp(30px, 5vw, 180px);
            font-size: 40px;
            font-family: var(--font-2), var(--font-3);
        }

        .wrap > div:nth-of-type(1) {
            display: flex;
            gap: 40px;
            padding-bottom: clamp(60px, 7.5vw, 140px);

            .img {
                width: 45%;
                aspect-ratio: 8/6;
            }

            .content {
                font-size: 14px;

                & > div:first-child {
                    padding-bottom: 80px;

                    p {
                        font-weight: 300;
                        line-height: 2;
                    }

                    b {
                        font-weight: 500;
                    }
                }

                a {
                    white-space: nowrap;
                    padding-left: 10px;
                    font-size: 20px;

                    i {
                        font-size: 14px;
                    }
                }

                & > div:last-child {
                    font-family: var(--font-2), var(--font-3);
                    font-size: var(--f-size-20);
                    height: 20px;
                    background: #D9D9D9;
                    width: 92px;
                    transition: 0.5s;
                }
                & > div:last-child:hover {
                    width: 150px;
                }
            }
        }

        .wrap > div:last-child {
            display: flex;
            justify-content: end;

            .img {
                width: 52%;
                aspect-ratio: 96/42;
            }
        }
    }

    .section-room-20 {
        padding-bottom: clamp(141px, 12vw, 220px);

        .wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 48px;
            row-gap: 40px;

            .img {
                aspect-ratio: 86/52;
            }
        }
    }

    @media (width < 1400px) {
    }
    @media (width < 1024px) {
        .section-room-10 {
            h3 {
                font-size: 20px;
                word-break: auto-phrase;
            }

            .wrap > div:nth-of-type(1) {
                flex-direction: column;
                gap: 60px;

                .img {
                    width: 100%;
                    aspect-ratio: 37/28;
                }
            }

            .wrap > div:last-child {
                .img {
                    width: 60%;
                    aspect-ratio: 24/27;
                }
            }
        }

        .section-room-20 {
            .wrap {
                column-gap: 12px;
                row-gap: 12px;

                img {
                    aspect-ratio: 1/1;
                }
            }
        }
    }
    @media (width < 768px) {
    }
    @media (width < 576px) {
    }
}

/************************************************/
.special {
    .section-special {
        padding-top: clamp(149px, 16vw, 292px);
        li a.active{
            text-decoration: none;
        }
        li a.active:before{
            content: '· ';
        }
    }

    .section-special-content {
        margin-top: clamp(30px, 8vw, 180px);
        padding-bottom: clamp(141px, 12vw, 220px);

        .content {
            border-top: 1px solid var(--color-black);
            padding-top: 83px;
            font-size: 20px;
            line-height: 1.7;
            font-weight: 300;

            & > div:last-child {
                padding-top: 40px;
                padding-bottom: clamp(30px, 8vw, 140px);
                font-size: 14px;
            }
        }

        .img-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 40px;
            padding-left: 390px;

            .img {
                width: 100%;
                aspect-ratio: 450/500;
            }
        }
    }

    @media (width < 1400px) {
    }
    @media (width < 1024px) {
        .section-special {
        }

        .section-special-content {
            .content {
                font-size: 14px;

                & > div:last-child {
                    padding-top: 30px;
                }
            }

            .img-wrap {
                padding-left: 0;
                grid-template-columns: 1fr;
                gap: 12px;
                .img{
                    aspect-ratio: unset;
                }
            }
        }
    }
    @media (width < 768px) {
    }
    @media (width < 576px) {
    }
}

/************************************************/
.reserve-info {
    main {
        overflow: hidden;

        .title {
            color: #C8C8C8;
            font-family: var(--font-3);
            font-size: var(--f-size-30);
        }

        .content {
            padding-top: clamp(30px, 2.5vw, 43px);
            padding-bottom: clamp(30px, 2vw, 40px);
            border-bottom: 1px solid #C1C1C1;
        }

        .content:last-child {
            border: none;
        }

        .content p {
            line-height: 2;
            font-family: var(--font-1);
            font-size: 14px;
        }

        :where(.info, .notice) .content p:first-child {
            font-size: 16px;
            padding-bottom: 21px;
            font-family: var(--font-3);
        }

        .refund{
            td p {
            font-size: var(--f-size-14);
            }
        }

        .section20 {
            height: 100vh;

            .wrap {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;

                & > div {
                    width: 100%;
                }
            }
        }


    }
}

.reserve-info .section30 .wrap {
    padding-bottom: clamp(171px, 15vw, 280px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(0px, 6.5vw, 124px);
    row-gap: clamp(0px, 10vw, 186px);
    grid-template-areas:
            "info notice"
            "refund refund";
}

.reserve-info .section30 .info {
    grid-area: info;
}

.reserve-info .section30 .notice {
    grid-area: notice;
}

.reserve-info .section30 .refund {
    grid-area: refund;
}

.reserve-info .section30 .refund table {
    width: 100%;
}

.reserve-info .section30 .refund td {
    text-align: center;
    padding-top: clamp(0px, 1.5vw, 29px);
    padding-bottom: clamp(0px, 1.5vw, 29px);
}

.reserve-info .section30 .refund td p {
    padding-bottom: 0;
}

.reserve-info .section30 .refund tr:nth-child(1) td {
    background-color: var(--color-main);
    border-right: white 1px solid;
    color: var(--color-text);
}

.reserve-info .section30 .refund tr:nth-child(2) td {
    border-right: 1px solid var(--color-main);
}

.reserve-info .section30 .refund tr:nth-child(2) td:last-child {
    border-right: none;
}

@media (width < 1400px) {
}

@media (width < 1024px) {
    .reserve-info .section30 .wrap {
        display: block;
    }

    .reserve-info .notice,
    .reserve-info .refund {
        padding-top: 100px;
    }

    .reserve-info .section30 .content {
        font-weight: 400;
    }

    .reserve-info .section30 .refund table {
        width: calc(100% + 60px);
        transform: translateX(-30px);
    }
}

@media (width < 768px) {
}

@media (width < 400px) {
    .rsv_cal_t {
        display: grid;
        grid-template-areas: "tit tit" "prv next";
    }

    .prv {
        grid-area: prv;
    }

    .next {
        grid-area: next;
        margin-left: auto;
    }

    #tit {
        grid-area: tit;
        font-size: 10px !important;
    }
}