@charset "UTF-8";

/****************************************



*****************************************/
/* base.cssに追記したい */
    .pc-only ul {
        margin-top: 10px;
    }

    .sp-only .translate {
        padding-left: 1rem;
        padding-top: 1rem;
        margin: auto;
    }

    #index .sp-only .sns-logo {
        width: 90%;
    }
    .translate {
        width: 90%;
        margin-top: 0;
        padding-left: 90px;
    }
    .translate li {
        padding-left: 1rem;
    }
    .translate li:first-child {
        padding-left: 0;
    }

    .sp-only .booking {
        width: 90%;
        margin: auto;
        /* padding-left: 1rem; */
    }
    .sp-only .booking img {
        width: 20%;
    }


#index article {
    /* background-color: #EEF9FC; */
}

header.sp-only,
main>.first-view,
section {
    margin-bottom: clamp(3.75rem, 1.549rem + 9.39vw, 10rem);
}

a:visited,
a {
    color: #fff;
}

.grantivity .desc,
.theme .desc,
.access .desc,
.plan .desc {
    line-height: 2rem;
}

/******************
    ファーストビュー
*******************/
.first-view .main-bg {
    background: url(../images/index/first-view-index.webp) no-repeat center/cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 90vh;
}



/******************
    　ニュース
*******************/
.news>div {
    flex-direction: column;
}

.news h2 {
    font-size: clamp(1.5rem, 0.646rem + 3.642vw, 3rem);
    border-bottom: 1px solid #DAC380;
    padding-bottom: 0.5rem;
    margin-bottom: 1.42857142rem;
}

.news ul {
    line-height: 2rem;
    color: #000;
}

.news ul li a,
.news ul li a:visited {
    color: #000;
}




/******************
    　コンセプト
*******************/
.concept {
    color: #fff;
    /* position: relative; */
}

.concept .text-area {
    mix-blend-mode: difference;
    line-height: initial;
    z-index: 1;
}

.concept h2 {
    font-size: clamp(2.5rem, -0.630rem + 13.354vw, 8rem);
    line-height: initial;
}

.concept strong {
    display: block;
    margin-bottom: clamp(0.5rem, -0.354rem + 3.642vw, 2rem);
    line-height: initial;
}

.concept {
    background: url(../images/index/concept-bg.webp) no-repeat;
    height: clamp(15rem, 8.314rem + 28.528vw, 25.75rem);
    margin-right: calc(50% - 50vw);
    background-size: 60%;
    background-position: right;
}

.concept p {
    line-height: initial;
}



/******************
    　テーマ
*******************/
.theme {
    position: relative;
    height: clamp(8.125rem, -1.778rem + 42.254vw, 36.25rem);
    margin-bottom: 0;
}

.theme .bg-area {
    background: url(../images/index/top-yuki.webp) no-repeat;
    background-size: cover;
    background-position: bottom;
    position: absolute;
    height: clamp(8.125rem, -1.778rem + 42.254vw, 36.25rem);
    width: 100vw;
    right: -5.5%;
    /* right: 0; */
}

.theme .text-area {
    position: absolute;
    display: block;
    max-height: 12rem;
    left: 0;
    width: clamp(21.438rem, 16.178rem + 22.441vw, 36.375rem);
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

.theme strong {
    font-size: clamp(0.875rem, 0.655rem + 0.939vw, 1.5rem);
}

.theme .text-area p {
    font-size: clamp(0.625rem, 0.537rem + 0.376vw, 0.875rem);
    line-height: clamp(1rem, 0.824rem + 0.751vw, 1.5rem);
}





/******************
    　グランティビティ
*******************/
.grantivty {
    position: relative;
    background-color: #fff;
}

.grantivity .bg-area {
    position: absolute;
    background-color: #DAC380;
    width: 70%;
    height: clamp(13.75rem, 7.588rem + 26.291vw, 31.25rem);
    margin-left: -25%;
    /* z-index: -1; */
}

.grantivity .text-area {
    position: absolute;
    /* z-index: -1; */
}

.grantivity>section {
    margin-bottom: clamp(2.5rem, 0.827rem + 7.136vw, 7.25rem);
}

.grantivity .dog {
    padding-top: clamp(10.625rem, 7.324rem + 14.085vw, 20rem);
}

.grantivity h2 {
    font-size: clamp(2.5rem, -0.630rem + 13.354vw, 8rem);
    line-height: initial;
    text-align: center;
    mix-blend-mode: difference;
    color: #fff;
}

.grantivity p {
    font-size: clamp(0.625rem, 0.537rem + 0.376vw, 0.875rem);
}

.grantivity div.slider,
.grantivity section strong {
    margin-bottom: clamp(0.5rem, 0.126rem + 1.596vw, 1.563rem);
}

.grantivity section:last-child {
    margin-bottom: 2rem;
}

.link-btn {
    display: flex;
    border-radius: 2rem 0 2rem 0;
    background-color: #587858;
    color: #fff;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 18.57142846rem;
    height: 3.57142855rem;
    font-size: 1.142857136rem;
    margin: auto;
}



/******************
    　アトラクティブ
*******************/

.attractive {
    position: relative;
    background-color: #CEC4BB;
    height: 57.1428568rem;
    padding-bottom: 5.142857112rem;
    margin: 0 -6%;
}

.attractive .bg-area {
    position: absolute;
    background-color: #CEC4BB;
    height: 100%;
    z-index: -1;
    right: 0;
    width: 100vw;
}

.attractive .text-area {
    position: absolute;
    display: block;
    width: clamp(21.438rem, 16.178rem + 22.441vw, 36.375rem);
    /* height: clamp(9.375rem, 7.174rem + 9.39vw, 15.625rem); */
    top: 4rem;
    right: 0;
    left: 0;
    /* bottom: 0; */
    margin: auto;
    text-align: center;
}

.attractive h2 {
    font-size: clamp(2.5rem, 2.324rem + 0.751vw, 3rem);
    line-height: initial;
    text-align: center;
}

.attractive h3 {
    font-size: 1.142857136rem;
    padding-top: 1.142857136rem;
    vertical-align: middle;
}

.attractive>h3 {
    font-size: clamp(1.25rem, 0.986rem + 1.127vw, 2rem);
    text-align: center;
}

.attractive div.scroll {
    width: 100%;
    height: 38.071428343rem;
    height: 57.1428568rem;
    /* padding-top: clamp(9.375rem, 7.174rem + 9.39vw, 15.625rem); */
}

.attractive div.scroll {
    overflow-x: auto;
    padding-bottom: 10px;
    padding-top: clamp(9.375rem, 7.174rem + 9.39vw, 15.625rem);
    -webkit-overflow-scrolling: touch;
}


.attractive .scroll li>div {
    width: 25.928571273rem;
    background-color: #F5F5F5;
    padding: 1.857142846rem;
    border-radius: 1.142857136rem;
    margin-right: 3.142857124rem;
}

.attractive .scroll span {
    padding-right: 1rem;
    font-size: 3.428571408rem;
    line-height: initial;
    font-family: "Bodoni Moda", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    color: #DAC380;
}

.attractive img {
    width: 100%;
    padding-bottom: 1.857142846rem;
    margin-bottom: 1.857142846rem;
    border-bottom: 1px solid #000;
}

.attractive p {
    line-height: 2.428571414rem;
}



/******************
    　movie
*******************/
.movie {
    position: relative;
    /* height: 100vh; */
    width: auto;
    aspect-ratio: 16/9;
}

.movie h2 {
    position: absolute;
    width: 100vw;
    right: 0;
}

.youtube {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    margin-left: 5%;
    margin-right: -5%;
}

iframe.youtube {
    pointer-events: none;
}





/******************
    　プラン
*******************/
.plan {
    position: relative;
    /* background: #687C62; */
}

.plan .bg-area {
    position: absolute;
    background: #687C62;
    height: clamp(9.375rem, -4.930rem + 61.033vw, 50rem);
    z-index: -1;
    right: 0;
    width: 100vw;
    margin: 0 -6%;
}

.plan li {
    position: relative;
    width: 40%;
    /* transform: scale(1.1); */
    transform-origin: center center;

}

.plan h2 {
    text-align: left;
    font-size: clamp(2.5rem, -0.630rem + 13.354vw, 8rem);
    line-height: normal;
}

.plan h3 {
    font-size: clamp(1.25rem, 0.634rem + 2.629vw, 3rem);
    margin: 2.571428556rem 0;
}

/* .plan #item3 {
    display: flex;
    align-items: center;
    justify-content: center;
} */

.plan p {
    text-align: center;
    width: 300px;
    margin: auto;
}

.plan .link-area img {
    width: 100%;
    vertical-align: bottom;
}

.plan #text-slider {
    text-align: center;
}

.plan .link-area img:hover {
    width: 100%;
    transform: translateY(-50%) scale(0.91);
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.plan #main-slider img {
    /* width: 100% !important; */
}

.plan #img-slider img {
    width: 100px;
}

.plan .grid {
    grid-template-rows: 10rem 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
}

/* .plan .grid {
    grid-template-rows: clamp(15.813rem, 1.134rem + 62.629vw, 57.5rem) 1fr 1fr;
    grid-template-columns: clamp(10rem, 0.977rem + 38.498vw, 35.625rem) 1fr 1fr 1fr;
    gap: 1rem;
} */


.plan #item1 {
    grid-row: 2/4;
    grid-column: 1/3;
}

.plan #item2 {
    grid-row: 2/4;
    grid-column: 3/5;
}

.plan #item2 img {
    filter: brightness(30%);
}

.plan #item2 img:hover {
    filter: brightness(100%);
}

.plan #item3 {
    grid-row: 1/2;
    grid-column: 1/5;
}

/* .plan #item3 .slick-track p {
    width: 100% !important;
} */

.plan #item2 .slick-list .slick-track {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    transform: unset !important;
    gap: 1rem;
}

.plan #item2 #list-item1 {
    grid-row: 1/2;
    grid-column: 1/2;
    width: 100% !important;
}

.plan #item2 #list-item2 {
    grid-row: 2/3;
    grid-column: 1/2;
    width: 100% !important;
}

.plan #item2 #list-item3 {
    grid-row: 1/2;
    grid-column: 2/3;
    width: 100% !important;
}

.plan #item2 #list-item4 {
    grid-row: 2/3;
    grid-column: 2/3;
    width: 100% !important;
}




/******************
        ゲストルーム
*******************/

/* .guestroom {
} */

.guestroom .title-area {
    background-color: #fff;
}

.guestroom h2 {
    font-size: clamp(2.5rem, -0.630rem + 13.354vw, 8rem);
    line-height: normal;
}

.guestroom .room-area {
    background: #CEC4BB;
    padding-top: clamp(2.5rem, 0.960rem + 6.573vw, 6.875rem);
}

.guestroom .room-area:last-child {
    padding-bottom: 4rem;
}

.guestroom .detail {
    width: clamp(17rem, 4.280rem + 54.272vw, 53.125rem);
    margin: auto;
    aspect-ratio: 16/9;
}

.guestroom .room-slide {
    margin-bottom: clamp(0.875rem, -0.225rem + 4.695vw, 4rem);
}

.guestroom .room-slide img {
    width: 100%;
}

.guestroom .text-area h3 {
    border-bottom: 3px solid #687C62;
    margin-bottom: 1rem;
    width: fit-content;
    font-size: clamp(1rem, 0.472rem + 2.254vw, 2.5rem);
}

.guestroom .slick-num {
    text-align: right;
}

.guestroom .text-area p {
    font-size: clamp(0.625rem, 0.493rem + 0.563vw, 1rem);
}

.slide-dots {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    width: 50%;
    margin-right: 0;
    margin-left: auto;
}

.slide-dots li {
    width: 1rem;
    height: 2px;
    margin: 0 5px;
    background: #000;
    cursor: pointer;
    border-radius: 2px;
}

.slide-dots li:hover,
.slide-dots li.slick-active {
    height: 4px;
    background: #000;
}

.slide-dots li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}






/******************
        CUISINE
*******************/
.cuisine {
    background-color: #fff;
    position: relative;
}

.cuisine .title-area {
    position: relative;
    z-index: 0;
    /* background: #fff; */
}

.cuisine h2 {
    font-size: clamp(2.5rem, -0.630rem + 13.354vw, 8rem);
    line-height: normal;
    text-align: right;
    width: 60%;
    /* mix-blend-mode: difference; */
    height: fit-content;
    color: #fff;
    background: #DAC380;
    margin-right: 0;
    margin-left: auto;
    /* border-bottom: 1rem solid;*/
}

/* .cuisine .bg-area {
    position: absolute;
    background-color: #DAC380;
    width: 55%;
    height: clamp(1.563rem, 0.352rem + 5.164vw, 5rem);
    margin-left: -25%;
    bottom: 0;
    right: 0;
    z-index: -1;
} */

.cuisine .stair-slider {
    position: relative;
    width: 100vw;
    height: clamp(15.625rem, 1.320rem + 61.033vw, 56.25rem);
    aspect-ratio: 16/9;
    margin-left: -5%;
    margin-right: 5%;
    clip-path: polygon(0% 0%, 32% 0%, 32% 90%, 0% 90%, 0% 0%,
            34% 3%, 66% 3%, 66% 95%, 34% 95%, 34% 3%,
            68% 6%, 100% 6%, 100% 100%, 68% 100%, 68% 6%);
    overflow: hidden;
    /* はみ出しカット */
}

.cuisine .link-btn {
    left: 0;
    right: 0;
    position: absolute;
    margin-top: clamp(0.875rem, 0.215rem + 2.817vw, 2.75rem);
}

.stair-wrapper {
    display: flex;
    width: 100%;
    /* スライド数 × 100% */
    height: 100%;
    transition: transform 0.8s ease-in-out;
}

.stair-slide {
    flex: 0 0 100%;
    /* 横に並べる */
    background-size: cover;
    background-position: center;
}



/******************
        ACCESS
*******************/
.access {
    background-color: #fff;
}

.access .title-area {
    position: relative;
    z-index: 0;
    background: #fff;
}

.access h2 {
    font-size: clamp(2.5rem, -0.630rem + 13.354vw, 8rem);
    line-height: normal;
    text-align: left;
    mix-blend-mode: difference;
    color: #fff;
    /* border-bottom: 1rem solid #DAC380; */
}

.access .bg-area {
    position: absolute;
    background-color: #DAC380;
    width: 45%;
    height: clamp(1.563rem, 0.352rem + 5.164vw, 5rem);
    /* margin-left: -25%; */
    bottom: 0;
    left: 0;
    z-index: -1;
}



/******************
googleMAP
*******************/
.map-grayscale {
    height: clamp(8.125rem, 3.283rem + 20.657vw, 21.875rem);
    width: 100%;
    filter: grayscale(100%);
}

.g-mapcancel {
    /* margin-left: -5%; */
    /* margin-right: -5%; */
    margin-top: clamp(2.063rem, 0.522rem + 6.573vw, 6.438rem);
}




/******************
SNS
*******************/
.sns .flex {
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.sns img {
    width: 26.785714125rem;
}



@media screen and (min-width:768px) {

    /****************************************

    PCサイズはこちらに記述してください。

    *****************************************/
    /******************
    全体への設定
    *******************/

    .first-view .main-bg {
        background: url(../images/index/first-view-index.webp) no-repeat center/cover;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;

    }



    /******************
        　ニュース
    *******************/
    .news .flex {
        flex-wrap: nowrap;
        flex-direction: row;
    }

    .news h2 {
        display: flex;
        align-items: center;
        border-right: 1px solid #DAC380;
        border-bottom: none;
        padding-right: 3.57142855rem;
        margin-right: 3.57142855rem;
    }

    .news ul li {
        margin-bottom: 1.714285704rem;
    }





    /******************
        　グランティビチィ
    *******************/
    .link-btn {
        display: flex;
        border-radius: 2rem 0 2rem 0;
        background-color: #587858;
        color: #fff;
        text-align: center;
        align-items: center;
        justify-content: center;
        width: 18.57142846rem;
        height: 3.57142855rem;
        font-size: 1.142857136rem;
        margin: 0 4rem 0 auto;
    }

    #index .grantivity strong {
        font-size: 22px;
        line-height: 2.3rem;
    }

    #index .grantivity p.desc {
        font-size: 1rem;
    }



    /******************
        　コンセプト
    *******************/
    .concept .text-area {
        width: 60%;
        margin-left: 0;
    }

    .concept p {
        line-height: 2.428571414rem;
    }

    .concept {
        background: url(../images/index/concept-bg.webp) no-repeat;
        height: clamp(15rem, 8.314rem + 28.528vw, 25.75rem);
        margin-right: 0;
        background-size: 60%;
        background-position: right;
    }

    .concept .background {
        margin-right: auto;
    }





    /******************
         アトラクティブ
    *******************/
    .attractive {
        position: relative;
        background-color: #CEC4BB;
        padding-bottom: 5.142857112rem;
        margin: auto;
    }

    .attractive .text-area {
        left: 33%;
        right: auto;
        transform: translate(-50%, 0);
    }




    /******************
         テーマ
    *******************/
    .theme .text-area {
        left: -35%;
    }

    .theme .bg-area {
        right: 0;
    }







    /******************
         movie
    *******************/
    .movie {
        width: 100vw;
        margin-left: -33.3%;
    }

    .youtube {
        margin: auto;
    }


    .plan h2 {
        margin-right: 4rem;
    }



    .guestroom {
        margin-right: 4rem;
    }




    /******************
         CUISINE
    *******************/
    .cuisine {
        margin-right: 4rem;
        margin-left: -33.3%;
        width: 100vw;
    }

    .cuisine .title-area {
        margin-right: 4rem;
    }

    .cuisine .stair-slider {
        margin-left: 0%;
        margin-right: 0%;
    }

    .cuisine .link-btn {
        left: 50%;
        right: auto;
        transform: translate(-50%, 0);
        position: absolute;
    }

    .g-mapcancel {
        /* margin-left: -5%; */
        /* margin-right: -5%; */
        margin-top: clamp(2.063rem, 0.522rem + 6.573vw, 6.438rem);
    }

    .plan {
        padding-right: 4rem;
    }

    .plan .bg-area {
        margin: auto;
    }

    /* 
    .plan #item1 {
        grid-row: 1/4;
        grid-column: 1/3;
    }

    .plan #item2 {
        grid-row: 2/4;
        grid-column: 3/5;
    }

    .plan #item3 {
        grid-row: 1/2;
        grid-column: 3/5;
    } */





}