@charset "utf-8";
:root{
    --white: #ffffff;
    --black: #333333;
    --orange: #f46e45;
    --orangeOff: #ea8a59;
    --navy: #2a315b;
    --gray: #717070;
    --gray-b3: #b3b3b3;
    --warm-gray: #e1d8d1;
    --cream: #fdf5e8;
    --info-title: #f9ebd7;

    --Caslon: 'Libre Caslon Text',serif;
    --ZenKakuGothicNew: "Zen Kaku Gothic New","Yu Gothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
    --NotoSansJP: "Noto Sans JP","Yu Gothic","Meiryo","Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
}
#news-sp{
    display: none;
}

/* ファーストビューの動画の枠線を表示させない */
/* 右1pxを透明で上書き */
#mainvisual::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background: transparent;
    pointer-events: none;
    backdrop-filter: blur(1px);
}

#news{
    width: 100%;
    background: var(--cream);
    padding: 8rem 0 12rem;
    line-height: 0;
    position: relative;
    overflow: hidden;

    hgroup{
        width: fit-content;
        margin: 0 auto 4rem;
        text-align: center;
        line-height: 2;
        h2{
            width: 238px;
            aspect-ratio: 238/125;
            margin: 0 auto 1rem;
        }
        .wave-line-gray{
            width: 78%;
            margin: 0 auto;
        }
    }

    .news-posts{
        width: min(1280px,100%);
        aspect-ratio: 1280/660;
        margin: 0 auto 5rem;

        .inner-top{
            width: 80.6%;
            margin: 0 auto 2rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            .frame-left{
                width: 43.48%;
                align-self: 500/612;

                .news-post-01{
                    width: 100%;
                    height: 100%;
                    .news-post-link{
                        width: 100%;
                        height: 100%;
                        .news-post-img{
                            width: 100%;
                            aspect-ratio: 1;
                            line-height: 0;
                            margin-bottom: 1rem;
                            /* ※ */
                            background-color: #bcbcbc;
                        }
                        .news-post-content{
                            width: 100%;
                            min-height: 6rem;
                            aspect-ratio: 500/76;
                            line-height: 1.8;
                            overflow: hidden;
                            .news-post-text{
                                .tag{
                                    white-space: nowrap;
                                    padding: 0 0.5rem;
                                    background: var(--gray-b3);
                                }
                            }
                        }
                    }
                }
            }
            .frame-right{
                width: 48.7%;
                min-width: 317.2px;
                aspect-ratio: 560/500;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-self: flex-start;
                
                .news-post-02,
                .news-post-03{
                    width: 100%;
                    aspect-ratio: 560/223;
                    .news-post-link{
                        display: flex;
                        justify-content: space-between;

                        .news-post-img{
                            width: 40%;
                            aspect-ratio: 1;
                            line-height: 0;
                            /* ※ */
                            background-color: #bcbcbc;
                        }
                        .news-post-content{
                            width: 55.36%;
                            aspect-ratio: 310/223;
                            line-height: 1.8;
                            overflow: hidden;
                            .news-post-text{
                                .tag{
                                    white-space: nowrap;
                                    padding: 0 0.5rem;
                                    background: var(--gray-b3);
                                }
                            }
                        }
                    }
                }
            }
        }
        .inner-bottom{
            width: 80.6%;
            margin: 0 auto 4rem;
            display: flex;
            justify-content: space-between;

            .news-post-04,
            .news-post-05{
                width: 48.7%;
                min-width: 317.2px;
                aspect-ratio: 560/223;
                .news-post-link{
                    display: flex;
                    justify-content: space-between;

                    .news-post-img{
                        width: 40%;
                        aspect-ratio: 1;
                        line-height: 0;
                        /* ※ */
                        background-color: #bcbcbc;
                    }
                    .news-post-content{
                        width: 55.36%;
                        aspect-ratio: 310/223;
                        line-height: 1.8;
                        overflow: hidden;
                        .news-post-text{
                            .tag{
                                white-space: nowrap;
                                padding: 0 0.5rem;
                                background: var(--gray-b3);
                            }
                        }
                    }
                }
            }
        }
    }
}


#special-feature{
    width: 100%;
    background: var(--gray);
    padding: 8rem 0 0;
    color: var(--white);
    overflow: hidden;
    position: relative;

    hgroup{
        width: fit-content;
        margin: 0 auto 4rem;
        text-align: center;

        h2{
            width: 383px;
            aspect-ratio: 383/150;
            margin: 0 auto;
        }

        .wave-line-white{
            width: 100%;
            margin: 0 auto;
        }
    }

    .feature-posts{
        width: min(1179px, 100%);
        margin: 0 auto 4rem;
        overflow: hidden;
        position: relative;
    }

    .inner-top{
        width: max-content;
        margin: 0;
        display: flex;
        justify-content: flex-start;
        column-gap: 27px;
        position: relative;
        left: 0;
        transform: translateX(0);
        flex-shrink: 0;
        transition: transform 0.45s ease;
        will-change: transform;
    }

    .feature-post-01,
    .feature-post-02,
    .feature-post-03,
    .feature-post-04{
        width: 375px;
        flex: 0 0 375px;
        aspect-ratio: 1;

        .feature-post-link{
            width: 100%;
            height: 100%;

            .feature-post-img{
                width: 100%;
                aspect-ratio: 1;
                line-height: 0;
                margin-bottom: 1rem;
                background-color: #bcbcbc;
            }

            .feature-post-content{
                width: 100%;
                max-height: 136.7px;
                line-height: 1.8;
                color: var(--white);
                overflow: hidden;
            }
        }
    }

    .slider-dots{
        width: 140px;
        line-height: 20px;
        margin: 0 auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 2;

        .dot{
            display: block;
            font-size: 20px;
            font-weight: normal;
            color: var(--warm-gray);
            cursor: pointer;
            user-select: none;
        }

        .active{
            color: var(--orange);
        }
    }

    .btn-more{
        position: relative;
        top: 4rem;
        margin: 0 auto 5rem;
    }

}
/* ▼ 特集の投稿が1件の時のcss */
#special-feature .inner-top.is-single{
    margin: 0 auto;
}

#concept{
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    background: url(../img/top/concept-bg.webp) top/cover no-repeat;
    background-attachment: fixed;

    .concept-inner{
        width: 1920px;
        height: auto;
        padding: 20.5rem 0 1rem;
        position: relative;
        top: 0;
        left: 50%;
        transform: translateX(-50%);

        hgroup{
            width: fit-content;
            margin: 0 auto 12rem;
            text-align: center;
            color: var(--white);

            h2{
                width: 292px;
                aspect-ratio: 292/88;
                margin: 0 auto;
            }

            .wave-line-white{
                width: 55%;
                margin: 0 auto 5.5rem;
            }

            h4{
                margin-bottom: 2rem;
                br{
                    display: none;
                }
            }

            p{
                line-height: 3.1;
            }
        }

        .slider-concept{
            width: 2622px;
            aspect-ratio: 2622/319;
            overflow: hidden;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 14rem;
        }

        .slider-track{
            display: flex;
            gap: 62px;
            width: max-content;
            will-change: transform;
            transform: translateX(0);
        }

        .sl-item{
            width: 375px;
            aspect-ratio: 375/319;
            flex: 0 0 auto;
            display: flex;

            img{
                width: 100%;
                height: auto;
                aspect-ratio: 500/355;
                object-fit: cover;
                display: block;
            }
        }

        .sl-item:nth-child(odd){
            align-items: flex-end;
        }

        .sl-item:nth-child(even){
            align-items: flex-start;
        }
    }
}

#room{
    width: 100%;
    background: var(--gray);
    padding: 8rem 0 0;
    color: var(--white);
    overflow: hidden;
    position: relative;

    hgroup{
        width: fit-content;
        margin: 0 auto 10rem;
        text-align: center;
        color: var(--white);

        h2{
            width: 209px;
            aspect-ratio: 209/65;
            margin: 0 auto 1rem;
        }

        .wave-line-white{
            width: 90%;
            margin: 0 auto 5.5rem;
        }
        p{
            line-height: 3.1;
        }
    }
    
    .room-inner{
        background: var(--gray);
        overflow: visible;
        position: relative;
        left: 50%;
        transform: translateX(-50%);

        .slider-room{
            width: auto;
            height: 600px;
            display: block;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            overflow: visible;

            .sl-item{
                width: 407.62px;
                height: auto;
                aspect-ratio: 500/425;
                text-align: center;
                position: absolute;
                top: 0;
                left: 50%;
                margin: 0;
                transform-origin: center bottom;
                transition: transform 0.6s ease, opacity 0.6s ease;
                will-change: transform, opacity;
                
                .item-img{
                    width: 86.11%;
                    height: auto;
                    aspect-ratio: 1;
                    margin: 0 auto 0.5rem;
                    overflow: hidden;
                    a{
                        position: relative;
    
                        img{
                            object-fit: cover;
                        }
                        .label{
                            width: 22.8%;
                            height: auto;
                            align-self: 106/141;
                            position: absolute;
                            right: 0;
                        }
                    }
                }

                .item-text{
                    width: 93.9%;
                    margin: 0 auto;

                    span{
                        font-size: 1.36rem;
                        font-family: var(--Caslon);
                        font-weight: 500;
                    }

                    h4{
                        width: fit-content;
                        font-size: 1.36rem;
                        margin: 0 auto;
                    }

                    .wave-line-white{
                        width: 94%;
                        margin: 0 auto 1rem;
                    }

                    p{
                        font-size: 1.16rem;
                    }

                    small{
                        color: var(--orangeOff);
                    }
                }
            }
        }
    }

    .btn-room-sl{
        width: 100%;
        height: 40px;
        position: absolute;
        top: 46.7%;
        left: 0;
        z-index: 10;
        pointer-events: none;

        .btn-room-prev,
        .btn-room-next{
            width: 40px;
            aspect-ratio: 1;
            position: absolute;
            top: 0;
            pointer-events: auto;
        }
        .btn-room-prev{
            left: calc(50% - 250px);
        }
        .btn-room-next{
            right: calc(50% - 250px);
        }
    }
    .btn-white{
        margin: 0 auto 12rem;
    }
}

#location{
    width: 100%;
    height: auto;
    background: var(--cream);
    padding: 8rem 0 0;
    line-height: 0;
    position: relative;
    overflow: hidden;
    
    hgroup{
        width: fit-content;
        margin: 0 auto 4rem;
        text-align: center;
        line-height: 2;
        h2{
            width: 269px;
            aspect-ratio: 269/55;
            margin: 0 auto 1rem;
        }
        .wave-line-gray{
            width: 100%;
            margin: 0 auto;
        }
    }
    
    .location-inner{
        position: relative;

        picture{
            display: block;
            width: 1920px;
            height: auto;
            aspect-ratio: 1920/1239;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin: 0 0 5rem;
        }
        a{
            transition: all 0.3s ease;
        }
        a:hover{
            background-color: rgba(255,255,255,0.5);
        }
        .sa{
            width: 4.1rem;
            height: 2.5rem;
            position: absolute;
            top: 19.9%;
            left: clamp(374.05px, calc(374.05px + (693.11 - 374.05) * ((99dvw - 1281px) / (1920 - 1281))), 693.11px);
        }
        .va{
            width: 4.1rem;
            height: 2.5rem;
            position: absolute;
            top: 29.3%;
            left: clamp(374.05px, calc(374.05px + (693.11 - 374.05) * ((99dvw - 1281px) / (1920 - 1281))), 693.11px);
        }
        .ft{
            width: 4.1rem;
            height: 2.5rem;
            position: absolute;
            top: 34.5%;
            left: clamp(276.89px, calc(276.89px + (595.19 - 276.89) * ((99.2dvw - 1281px) / (1920 - 1281))), 595.19px);
        }
        .sft{
            width: 4.9rem;
            height: 2.56rem;
            position: absolute;
            top: 43.3%;
            left: clamp(260px, calc(260px + (577.91 - 260) * ((99.2dvw - 1281px) / (1920 - 1281))), 577.91px);
        }
        .doggy{
            width: 7.4rem;
            height: 2.5rem;
            position: absolute;
            top: 39.3%;
            left: clamp(869.8px, calc(869.8px + (1188.47 - 869.8) * ((99.3dvw - 1281px) / (1920 - 1281))), 1188.47px);
        }
        .st{
            width: 4.1rem;
            height: 2.5rem;
            position: absolute;
            top: 47.4%;
            left: clamp(954.34px, calc(954.34px + (1272.95 - 954.34) * ((99.2dvw - 1281px) / (1920 - 1281))), 1272.95px);
        }
    }
}

#points{
    width: 100%;
    background: var(--cream);
    padding: 3rem 0 0;
    position: relative;
    overflow: hidden;
    margin-top: -2px;
    
    hgroup{
        width: fit-content;
        margin: 0 auto;
        text-align: center;
        line-height: 2;
        h2{
            width: 185px;
            aspect-ratio: 185/56;
            margin: 0 auto 1rem;
        }
        .wave-line-gray{
            width: 100%;
            margin: 0 auto;
        }
    }
    .points-sl{
        width: 1920px;
        height: auto;
        aspect-ratio: 1920/911;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
        .sl-item{
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
            top: 0;
            opacity: 0;
            visibility: visible;
            transition: opacity 2.5s ease;
            pointer-events: none;
            picture{
                width: 100%;
                height: 100%;
                aspect-ratio: 1920/1652;
                margin: 0 auto 5rem;
                display: block;
            }
            .item-text{
                width: 23.5%;
                color: var(--white);
                line-height: 1.8;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                position: absolute;
                top: 23rem;
                left: 48.5%;
                .num{
                    font-size: 2.58rem;
                    font-family: var(--Caslon);
                    line-height: 1;
                }
                h4{
                    font-size: 1.25rem;
                    font-family: var(--NotoSansJP);
                    margin: 0.5rem 0 1rem;
                    .br-sp{
                        display: none;
                        line-height: 0;
                    }
                    .br-pc{
                        line-height: 0;
                    }
                }
                p{
                    font-family: var(--NotoSansJP);
                }
                .btn-more{
                    margin: 0 auto 0 0;
                }
            }
        }
        .sl-item.is-active{
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            z-index: 1;
        }
    }
    .btn-points-sl{
        width: min(1096px,90%);
        height: 40px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        top: 57rem;
        left: 50%;
        transform: translateX(-50%);
        .btn-points-inner{
            width: 112px;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 0;
            button{
                height: 100%;
                padding: 0;
                border: 0;
                background: none;
                line-height: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: opacity 0.3s ease;
                img{
                    display: block;
                    width: auto;
                    height: 99%;
                    aspect-ratio: 1;
                    transition: none;
                }
            }
            button:hover{
                opacity: 0.5;
            }
        }
    }
}
/* ▼スライダー中のテキストの表示演出 */
#points .points-sl .sl-item .item-text > *{
    opacity: 0;
    /* ▼テキストの上下の距離 */
    transform: translateY(20px);
    /* ▼テキストが消えるときの時間 */
    transition: opacity 1.2s ease, transform 1.2s ease;
}
/* アクティブ時に順番表示 */
#points .points-sl .sl-item.is-active .item-text .num{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
}
#points .points-sl .sl-item.is-active .item-text h4{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}
#points .points-sl .sl-item.is-active .item-text p{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}
#points .points-sl .sl-item.is-active .item-text .btn-more{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.05s;
}


#charm{
    width: 100%;
    background: var(--cream);
    padding: 10rem 0 10rem;
    line-height: 0;
    position: relative;
    overflow: hidden;

    hgroup{
        width: fit-content;
        margin: 0 auto 6rem;
        text-align: center;
        line-height: 2;
        h2{
            width: 213px;
            aspect-ratio: 213/59;
            margin: 0 auto 1rem;
        }
        .wave-line-gray{
            width: 100%;
            margin: 0 auto;
        }
    }
    
    .sl-item{
        .picture{
            width: calc(100% + 2px);
            aspect-ratio: 1920/1652;
            margin: 0 auto 5rem;
        }
    }
}

#sec-insta{
    width: 100%;
    padding: 8rem 0 10rem;
    position: relative;
    background: var(--gray);
    h2{
        display: block;
        width: 461px;
        aspect-ratio: 461/79;
        margin: 0 auto 4rem;
    }
    .insta-feed{
        width: min(1280px,80%);
        margin: 0 auto;
    }
}

#guest-reviews{
    width: 100%;
    background: var(--cream);
    padding: 8rem 0;
    line-height: 0;
    position: relative;
    overflow: hidden;

    hgroup{
        width: fit-content;
        margin: 0 auto 4rem;
        text-align: center;
        line-height: 2;
        h2{
            width: 444px;
            aspect-ratio: 444/55;
            margin: 0 auto 1rem;
        }
        .wave-line-gray{
            width: 100%;
            margin: 0 auto;
        }
    }

    .reviews-sl{
        width: min(1440px,100%);
        height: auto;
        overflow: hidden;
        margin: 0 auto 2rem;
        touch-action: pan-y;
        cursor: grab;

        &.is-dragging{
            cursor: grabbing;
        }

        .reviews-track{
            width: max-content;
            height: auto;
            display: flex;
            justify-content: flex-start;
            column-gap: 2rem;
            will-change: transform;
            transform: translate3d(0, 0, 0);
        }

        .reviews-item{
            width: 324px;

            a{
                display: block;
                color: inherit;
                text-decoration: none;
            }

            h5{
                font-size: 1rem;
                font-family: var(--ZenKakuGothicNew);
                display: flex;
                align-items: center;
                line-height: 1.6;

                img{
                    width: 32px;
                    height: auto;
                    aspect-ratio: 1;
                    flex: 0 0 auto;
                }
            }
            .size-set{
                aspect-ratio: 1170/1797;
            }

            .item-img{
                width: 100%;
                height: auto;
                display: block;
            }
        }
    }

    .slider-dots{
        width: min(220px,70dvw);
        line-height: 20px;
        margin: 0 auto 6rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .dot{
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
            position: relative;
            transition: opacity 0.3s ease;
        }

        .dot::before{
            content: "●";
            font-size: 20px;
            line-height: 20px;
            border-radius: 50%;
            /* background: var(--warm-gray); */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .dot.active::before{
            color: var(--orange);
        }

        .dot:hover{
            opacity: 0.5;
        }
    }
}

#access{
    width: 100%;
    background: var(--gray);
    padding: 8rem 0 0;
    color: var(--white);
    overflow: hidden;
    position: relative;

    hgroup{
        width: fit-content;
        margin: 0 auto -4rem;
        text-align: center;
        color: var(--white);

        h2{
            width: 200px;
            aspect-ratio: 200/57;
            margin: 0 auto 1rem;
        }

        .wave-line-white{
            width: 100%;
            margin: 0 auto 5.5rem;
        }
        p{
            line-height: 3.1;
        }
    }
    .access-inner{
        display: flex;
        justify-content: center;
        margin: 0 0 6.5rem 2.5rem;
        .left{
            width: fit-content;
            margin: 0 1.5rem 0 0;
            padding-top: 10rem;

            h4{
                font-size: 1.86rem;
                font-weight: normal;
                font-family: var(--ZenKakuGothicNew);
                color: var(--white);
                white-space: nowrap;
                .br-sp{
                    display: none;
                }
            }
            .btn-more{
                margin: 1rem auto 0 0;
            }

        }
        .access-map{
            width: 611px;
            aspect-ratio: 611/591;

        }
    }
    .map{
        width: 100%;
        height: 60.38rem;
        iframe{
            width: 100%;
            height: 100%;
        }
    }
    .frame-bottom{
        bottom: -1px;
    }
}

@media screen and (max-width:1280px){
    #location{
        .location-inner{
            picture{
                width: 100%;
                aspect-ratio: 1280/1219;
                position: static;
                transform: translateX(0);
            }
            .sa{
                width: 4.99dvw;
                height: 2.9dvw;
                position: absolute;
                top: 19.55%;
                left: 29.88%;
            }
            .va{
                width: 4.99dvw;
                height: 2.9dvw;
                position: absolute;
                top: 28.7%;
                left: 29.88%;
            }
            .ft{
                width: 4.99dvw;
                height: 2.9dvw;
                position: absolute;
                top: 33.8%;
                left: 22.66%;
            }
            .sft{
                width: 5.92dvw;
                height: 2.9dvw;
                position: absolute;
                top: 42.41%;
                left: 21.45%;
            }
            .doggy{
                width: 8.99dvw;
                height: 2.9dvw;
                position: absolute;
                top: 38.5%;
                left: 67.25%;
            }
            .st{
                width: 4.99dvw;
                height: 2.9dvw;
                position: absolute;
                top: 46.4%;
                left: 73.6%;
            }
        }
    }
}

@media screen and (max-width:1240px){
    #charm{
        padding: 10rem 0 0;
        .sl-item{
            .picture{
                width: calc(100% + 2px);
                aspect-ratio: 1920/1652;
                margin: 0 auto 5rem;
            }
        }
    }
}

@media screen and (max-width:1080px){
    #access{
        hgroup{
            .wave-line-white {
                margin: 0 auto;
            }
        }
        .access-inner{
            width: min(611px,80%);
            flex-direction: column;
            margin: 0 auto 2.5rem;
            .left{
                width: 100%;
                margin: 0 1.5rem 1rem 0;
                padding-top: 10rem;

                h4{
                    text-align: center;
                }
                .btn-more{
                    margin: 1rem auto 0;
                }

            }
            .access-map{
                width: 100%;
            }
        }
        .map{
            width: 100%;
            height: auto;
            aspect-ratio: 360/291;
            iframe{
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
}

@media screen and (max-width:880px){
    #points{
        .points-sl{
            width: 100%;
            height: auto;
            aspect-ratio: 1441/3876;
            position: relative;
            top: 92%;
            left: 0;
            transform: translateX(0);
            .sl-item{
                picture{
                    margin: 0 auto;
                    aspect-ratio: 1441/3420;
                }
                .item-text{
                    width: 76%;
                    text-align: center;
                    align-items: center;
                    position: absolute;
                    top: 50%;
                    left: 12%;
                    .num{
                        font-size: 2rem;
                    }
                    h4{
                        font-size: 1.13rem;
                        white-space: nowrap;
                        .br-pc{display: none;}
                        .br-sp{display: block;}
                    }
                    .btn-more{
                        margin: 1rem auto 0;
                    }
                }
            }
        }
        .btn-points-sl{
            width: 80%;
            position: absolute;
            top: clamp(632px, calc(632px + (1344 - 632) * ((100vw - 360px) / (880 - 360))), 1344px);
            transform: translateX(-50%);
            .btn-points-inner{
                width: 100%;
            }
        }
    }
}

@media screen and (max-width:820px){
    #news{display: none;}
    #news-sp{
        display: block;
        width: 100%;
        background: var(--cream);
        padding: 8rem 0 0;
        line-height: 0;
        position: relative;
        overflow: hidden;

        hgroup{
            margin: 0 auto 2rem;
            text-align: center;
            line-height: 2;
            h2{
                width: 110px;
                aspect-ratio: 237/124;
                margin: 0 auto;
            }
            .wave-line-gray{
                width: min(290.01px,80%);
                margin: 0 auto;
            }
        }

        .news-posts{
            width: 80.56%;
            aspect-ratio: 1427/612;
            margin: 0 auto 8rem;


            .inner-top{
                width: 100%;
                margin: 0 auto 2rem;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;

                .news-post-01{
                    width: 100%;
                    height: 100%;
                    .news-post-link{
                        width: 100%;
                        height: 100%;
                        .news-post-img{
                            width: 100%;
                            aspect-ratio: 1;
                            line-height: 0;
                            margin-bottom: 1rem;
                            /* ※ */
                            background-color: #bcbcbc;
                        }
                        .news-post-content{
                            width: 100%;
                            min-height: 6rem;
                            aspect-ratio: 500/76;
                            line-height: 1.8;
                            overflow: hidden;
                            .news-post-text{
                                .tag{
                                    white-space: nowrap;
                                    padding: 0 0.5rem;
                                    background: var(--gray-b3);
                                }
                            }
                        }
                    }
                }
            }
            .inner-bottom{
                width: 100%;
                aspect-ratio: 290/137;
                margin: 0 0 2rem;
                display: flex;
                justify-content: space-between;
                
                .news-post-02,
                .news-post-03{
                    width: 46.9%;
                    aspect-ratio: 1;
                    .news-post-link{
                        display: flex;
                        justify-content: space-between;

                        .news-post-img{
                            width: 100%;
                            aspect-ratio: 1;
                            line-height: 0;
                            /* ※ */
                            background-color: #bcbcbc;
                        }
                    }
                }
            }
            .btn-more{
                margin: 0 auto 5rem;
            }
        }
    }
    #special-feature{
        padding: 8rem 0 4rem;
        position: relative;

        hgroup{
            width: 100%;
            h2{
                width: 179px;
                margin: 0 auto;
            }

            .wave-line-white{
                width: min(290.01px, 80%);
                margin: 0 auto;
            }
        }

        .feature-posts{
            margin: 0 auto 4rem;
            overflow: hidden;
        }

        .inner-top{
            width: max-content;
            column-gap: 2rem;
            left: 0;
            transform: translateX(0);
        }

        .feature-post-01,
        .feature-post-02,
        .feature-post-03,
        .feature-post-04{
            width: 77.68dvw;
            flex: 0 0 77.68dvw;
            aspect-ratio: 508/505;

            .feature-post-link{
                width: 100%;
                height: 100%;

                .feature-post-img{
                    width: 100%;
                    aspect-ratio: 1;
                    line-height: 0;
                    margin-bottom: 1rem;
                    background-color: #bcbcbc;
                }

                .feature-post-content{
                    width: 100%;
                    line-height: 1.8;
                    color: var(--white);
                    overflow: hidden;
                }
            }
        }

        .slider-dots{
            width: 140px;
            line-height: 20px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 2;

            .dot{
                display: block;
                font-size: 20px;
                font-weight: normal;
                color: var(--warm-gray);
                cursor: pointer;
                user-select: none;
            }
            .active{
                color: var(--orange);
            }
        }
        .btn-more{
            top: 4rem;
            margin: 0 auto;
        }
    }

    #concept{
        .concept-inner{
            hgroup{
                width: 100%;
                margin: 0 auto 6rem;
                h2{
                    width: 179px;
                    margin: 0 auto;
                }
                .wave-line-white{
                    width: min(290.01px, 80dvw);
                    margin: 0 auto 3rem;
                }
                h4 br{
                    display: block;
                }
                p{
                    width: 74dvw;
                    margin: 0 auto;
                    line-height: 3.5;
                    br{display: none;}
                }
            }
        }
    }

    #room{
        hgroup{
            margin: 0 auto 6rem;
            h2{
                width: 86px;
                margin: 0 auto;
            }
            .wave-line-white{
                width: min(290.01px, 80%);
                margin: 0 auto 3rem;
            }
        }
        .btn-room-sl{
            top: 41%;
            .btn-room-prev{
                left: calc(50% - 230px);
            }
            .btn-room-next{
                right: calc(50% - 230px);
            }
        }
    }
    
    #location{
        hgroup{
            width: 100%;
            margin: 0 auto 4rem;
            h2{
                width: 126px;
            }
            .wave-line-gray{
                width: min(290.01px, 80%);
                margin: 0 auto 3rem;
            }
        }
    }

    #points{
        hgroup{
            width: 100%;
            margin: 0 auto;
            h2{
                width: 85px;
                margin: 0 auto;
            }
            .wave-line-gray{
                width: min(290.01px, 80%);
                margin: 0 auto 3rem;
            }
        }
    }
    
    #charm{
        padding: 8rem 0 0;
        hgroup{
            width: 100%;
            aspect-ratio: 214 / 59;
            margin: 0 auto;
            h2{
                width: 99px;
                aspect-ratio: 215 / 59;
                margin: 0 auto;
            }
            .wave-line-gray{
                width: min(290.01px, 80%);
                margin: 0 auto 3rem;
            }
        }
    }
    
    #sec-insta{
        h2{
            width: 64px;
            aspect-ratio: 1;
            margin: 0 auto 2rem;
        }
        .insta-feed{
            width: 80%;
            margin: 0 auto;
        }
    }
    
    #guest-reviews{
        padding: 8rem 0 6rem;
        hgroup{
            width: 100%;
            margin: 0 auto 4rem;
            h2{
                width: 113px;
                aspect-ratio: 113/61;
                margin: 0 auto;
            }
            .wave-line-gray{
                width: min(290.01px, 80%);
                margin: 0 auto;
            }
        }
        .reviews-sl{
            left: 42%;
        }
    }
    
    #access{
        padding: 8rem 0 0;
        top: 0;
        hgroup{
            width: 100%;
            margin: 0 auto 6rem;
            h2{
                width: 94px;
                margin: 0 auto;
            }
            .wave-line-white{
                width: min(290.01px, 80%);
                margin: 0 auto;
            }
        }
        .access-inner{
            padding: 0;
            .left{
                padding-top: 0;
                h4{
                    .br-sp{
                        display: block;
                        line-height: 0;
                    }
                }
            }
        }
    }
}

/* ▼#conceptの背景固定、スマホ時の処理 
js「main.js」内の背景画像消す処理と連動。
消したいbg画像があるセクション名(id名)を足していく */
@media screen and (max-width:767px){
    #concept{
        background: none;
        position: relative;
    }
    #concept::before{
        content: "";
        width: 100%;
        height: 100%;
        background: url(../img/top/concept-bg-sp.webp) center/cover no-repeat;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: -1;
    }
    #concept.is-active::before{
        opacity: 1;
    }
    #room{
        .btn-room-sl{
            top: 41%;
        }
    }
}

@media screen and (max-width:540px){
    #news-sp,#special-feature,#room,#location{
        padding: 6rem 0 0;
    }
    
    #special-feature{
        padding: 6rem 0 0;
        .slider-dots{
            width: 140px;
            line-height: 20px;
            .dot{
                font-size: 20px;
            }
        }
        .btn-more {
            top: 3rem;
            margin: 0 auto 6rem;
        }
    }
    #concept{
        .concept-inner{
            width: 1267px;
            aspect-ratio: 1;
            min-height: 100rem;
            padding: 10rem 0 0;

            .frame-top, .frame-bottom{
                width: 99dvw;
                height: auto;
                aspect-ratio: 540 / 66;
                left: 50%;
                transform: translateX(-50%);
            }
            
            .slider-concept{
                width: 100%;
                aspect-ratio: auto;
                margin-bottom: 6rem;
            }
            
            .slider-track{
                gap: 1.25%;
            }
            
            .sl-item{
                width: 80dvw;
            }
        }
    }
    #room{
        .btn-room-sl{
            top: 41%;
        }
    }
    #location .location-inner a{
        display: none;
    }
    #points{
        padding: 2rem 0 0;
        hgroup{
            margin: 0 auto;
        }
    }
    #charm{
        padding: 6rem 0 0;
        hgroup{
            width: 90%;
            margin: 0 auto 4rem;
            text-align: center;
            line-height: 2;
            h2{
                width: 99px;
                aspect-ratio: 99/27;
                margin: 0 auto;
            }
            .wave-line-gray{
                width: min(290.01px,80%);
                margin: 0 auto;
            }
        }
    }
    .sl-item{
        .picture{
            width: calc(100% + 2px);
            aspect-ratio: 1920/1652;
            margin: 0 auto 5rem;
        }
    }
    #sec-insta{
        padding: 6rem 0;
    }
    #guest-reviews{
        padding: 6rem 0;
    }

    #guest-reviews{
        .slider-dots{
            width: min(220px, 70dvw);
            line-height: 20px;
            .dot{
                width: 20px;
                height: 20px;
                &::before{
                    content: "";
                    width: 20px;
                    height: 20px;
                }
            }
            .dot::before{
                content: "●";
                font-size: 20px;
                line-height: 20px;
            }
        }
    }
    #access .access-inner .left h4{
        font-size: 20px;
    }
}

@media screen and (max-width:500px){
    #room{
        hgroup{
            width: 100%;
            margin: 0 auto 3rem;
        }
        .room-inner{
            .slider-room{
                width: 100%;
                height: calc(0.642857 * 100vw + 258.57px);
                
                .sl-item{
                    width: 100%;
                    .item-img{
                        width: 70%;
                    }
                    .item-text{
                        width: 100%;
                        span{
                            font-size: 1.36rem;
                            font-family: var(--Caslon);
                            font-weight: 500;
                        }
                        h4{
                            font-size: 1.2rem;
                            white-space: nowrap;
                        }
                        p{
                            font-size: 1rem;
                        }
                        small{
                            display: block;
                            width: 64dvw;
                            margin: 0 auto;
                        }
                    }
                }
            }
        }
        .btn-room-sl{
            /* top: 39.6%; */
            top: 39.6%;
            .btn-room-prev{
                left: 3%;
            }
            .btn-room-next{
                right: 3%;
            }
        }
        .btn-white{
            margin: 0 auto 8rem;
        }
    }
}
@media screen and (max-width: 441px){
    #room{
        .btn-room-sl{
            top: 39%;
        }
    }
}
@media screen and (max-width: 403px){
    #room{
        .btn-room-sl{
            top: 38.3%;
        }
    }
}