@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

:root {
    --hover: all .3s ease;
    --opacity: 0.55;
    --lightgray: #F0EFF0;
    --base: #DDDCDD;
    --base02: #473D48;
    --lh-S: 1.35;
    --lh-M: 1.66;
    --lh-L: 1.95;
}

#main {
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    min-height: 100vh;
    position: relative;
    font-size: 16px;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%; 
    margin: 0;
    padding: 0;
    background: var(--base);
    box-sizing: border-box;
    letter-spacing: 0.07em;
    font-feature-settings: "palt";
    color: var(--base02);
}

.notosans {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

#RthCustomizeW #main img{width: 100%;}

a{
    transition: all .3s ease;
    text-decoration: none!important;
}

.bg_base{
    background: var(--base);
}
.bg_base02{
    background: var(--base02);
    color: var(--lightgray);
}
.lh-M{line-height: var(--lh-M);}
.lh-S{line-height: var(--lh-S);}
.lh-L{line-height: var(--lh-L);}

/* =========================
　　　　　　clear
============================ */
html{overflow-x: hidden;}
div#RthCustomizeW {
    clear: both;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 3;
}
div#htlContents{
    min-width: auto;
    margin: 0 auto;
}
#htlMainContent {
    width: 100%;
    float: none;
    margin-left: auto;
    margin-right: auto;
    min-width: 1250px;
}
@media (max-width: 1300px){
    .single-column #htlMainContent.GOLDTemplate {
        width: 100%;
        min-width: unset;
    }
    div#htlContents.single-column {
        z-index: 2;
    }
    #htlContents.single-column {
        margin: auto;
        width: 100%;
    }
    div#htlContents {
        min-width: auto;
        margin: 0 auto;
    }
    div#htlContents {
        position: relative;
    }
    #htlContents {
        margin-left: unset;
        min-width: unset;
        max-width: unset;
        position: relative;
        z-index: 1;
    }
}
/* ========================
　　　　　　common
==========================*/
.rt_Container{
    width: 100%;
    margin: 0 auto;
}
/* =========================
　　　　　　header
===========================*/
#header{
    background: #F0EFF0;
    padding: 0 2.5rem;
}
#header_inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 30px 0;
    max-width: 1360px;
    gap: 0 1.75rem;
    font-weight: 600;
}
#header_inner .header_logo{
    width: 335px;
}
ul.headermenu{
    display: flex;
    align-items: center;
    gap: 3rem;
}
ul.headermenu li a{
    color: var(--base02)!important;
    letter-spacing: 0.05rem;
    font-size: 18px;
}

#header_inner .btn a {
    display: block;
    font-size: 17px;
    color: var(--lightgray);
    background: var(--base02);
    padding: 8px 21px;
    border-radius: 50px;
    border: 1px solid var(--base02);
}

@media (any-hover: hover){
    ul.headermenu li a:hover{opacity: var(--opacity);}
    #header_inner .btn a:hover{
        background: #473d48a2;
    }
}
@media (max-width:1300px){
    #header_inner {
        flex-direction: column;
        gap: 2rem;
    }
}
/* ================================ 
　　　　　　　footer
==================================*/
#footer{
    background: var(--base02);
    color: var(--lightgray);
}
#footer.not_home{
    padding-top: 3rem;
}
.footer_inner{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 0;
    gap: 3rem;
}
.footer_inner .footer_logo {
    width: 66vw;
    max-width: 438px;
}
.footer_inner .footer_address{
    line-height: 1.75;
    font-size: 17px;
    font-weight: 500;
}
@media (max-width:1300px){
    /* -------------- footer --------------- */
    .footer_inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .footer_inner .footer_address{
        text-align: center;
    }
}
/* ============================
            contents
==============================*/
/* home */
#MainContents{
    background: var(--base);
}
#homeMv {
    width: 92vw;
    margin: 0 0 0 auto;
    padding: 7rem 0;
}
.homeConcept {
    padding: 8rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    align-items: center;
    justify-content: center;
}
.homeConcept .conceptblk {
    width: 90%;
    max-width: 1200px;
}
.homeConcept .aboutbtn{
    width: 88%;
    max-width: 1152px;
}
.homePagelinks {
    padding: 8rem 0;
}
.homepagelink_blk {
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    transition: var(--hover);
}
.homepagelink_blk a{
    display: block;
    width: 100%;
    height: 100%;
}
.homepagelink_blk:nth-of-type(n+2){
    margin-top: 7rem;
}
@media (any-hover: hover){
    .homepagelink_blk:hover{
        opacity: var(--opacity);
    }
    .homepagelink_blk.not_hover:hover{opacity: 1;}
}
@media (max-width:1300px){
    #homeMv {width: calc(100% - 8rem);}
}
/* concept */
#concept{
    width: 92vw;
    margin: 0 0 0 auto;
    padding: 7rem 0;
    display: flex;
    align-items: flex-start;
}
#concept .concepttxt,#concept .conceptimg{width: 50%;}
.ttl{
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 2rem;
    border-bottom: 1px solid var(--base);
    margin-bottom: 2rem;
    font-size: 23px;
}
#concept .concepttxt .txtblk{
    width: 93%;
    padding-left: 4rem;
    padding-right: 2.5rem;
    margin-right: 0;
    margin-left: auto;
    line-height: 2.25;
    font-size: 17px;
    letter-spacing: 0.03rem;
}
#concept .concepttxt .txtblk .imgs{
    margin-top: 2.5rem;
}
@media (max-width:1300px){
    #concept {
        width: 87%;
        margin: 0 auto;
        flex-direction: column-reverse;
        gap: 4rem;
    }
    #concept .concepttxt,#concept .conceptimg{width: 100%;}
    #concept .concepttxt .txtblk {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        font-size: 16px;
    }
}
/* room */
.cstpage-topouter{
    background: #DDDCDD;
    background: linear-gradient(180deg, rgba(221, 220, 221, 1) 0%, rgba(221, 220, 221, 1) 72%, rgba(71, 61, 72, 1) 72%);
}
.cstpage-topwrapper{
    width: 92vw;
    margin: 0 0 0 auto;
    padding: 7rem 0 5.5rem;
}
.cstpage-contents{
    width: 90%;
    max-width: 1440px;
    margin: 0 auto;
}
.roomserta{
    max-width: 950px;
    margin: 0 auto;
}
.roomserta .item{font-size: 24px;}
.roomserta p{margin: 1.5rem 0 2rem;}
.item-je{
    display: grid;
    gap: 0.65rem 2rem;
    margin-bottom: 3rem;
}
.item-je p{
    font-size: 24px;
}
.rooms{padding-top: 4rem;}
#detail01{padding-top: 6rem;}
.roomblk:nth-of-type(n+2){
    padding-top: 7.5rem;
}
.roomexp{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    gap: 1.5rem 7rem;
    max-width: 880px;
    margin-bottom: 3rem;
}
.roomexp .item-je{margin-bottom: 0;}
.roomdatas{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.roomdatas .img{
    width: 50%;
}
.roomdatas .table{
    width: 44%;
}
.roomdatas .table .datatable{
    margin: 1.5rem 0 2.5rem;
}
.roomdatas .table p:first-of-type{
    font-size: 18px;
    line-height: var(--lh-M);
}
.roomdatas .table p.kome{
    font-size: 21px;
    line-height: var(--lh-M);
}
.kome{
    padding-left: 1em;
    text-indent: -1em;
}
.roomdatas .table .link{
    width: 56vw;
    min-width: 150px;
    max-width: 280px;
    margin-bottom: 2rem;
    transition: var(--hover);
}
.roominfo,.commoninfo {
    max-width: 1195px;
}
.commoninfo {
    padding-top: 7rem;
}
@media (any-hover: hover){
    .roomdatas .table .link:hover{opacity: var(--opacity);}
}
@media (max-width:1300px){
    .cstpage-topwrapper {width: calc(100% - 3rem);}
}
@media (max-width:1160px){
    .roomexp{
        max-width: 100%;
        display: block;
    }
    .roomexp .item-je {
        margin-bottom: 1.5rem;
    }
    .roomdatas {display: block;}
    .roomdatas .img,.roomdatas .table{width: 100%;}
    .roomdatas .table{margin-top: 2.5rem;}
}
/* facility */
.roofterrace .item{
    font-size: 20px;
    padding: 1.5rem 0 1.6rem;
}
.facilities {
    padding-top: 6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem 5rem;
}
.facilities .facilityblk{
    width: 44%;
}
.facilities .facilityblk .facilityitem{
    padding: 1.45rem 0 1.35rem;
    font-size: 20px;
}
/* service */
.serviceflexblk{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 3.75rem;
}
.serviceflexblk.rv{
    flex-direction: row-reverse;
}
.serviceflexblk .txt{
    width: 34%;
}
.serviceflexblk .img{
    text-align: center;
    width: 56%;
}
.serviceflexblk:nth-of-type(n+2){
    margin-top: 7.5rem;
}
.servicebottom {
    padding-top: 9rem;
}
.servicebottom .servicebottomblk:nth-of-type(n+2){
    padding-top: 6rem;
}
.servicebottom .servicebottomblk > div{
    font-size: 24px;
    margin-bottom: 1.35rem;
}
.serviceaboutbtn{
    margin-top: 2.5rem;
    transition: var(--hover);
}
.serviceflexblk .ld-link {
    width: 53vw;
    min-width: 150px;
    max-width: 229px;
    margin-top: 4rem;
}
@media (any-hover: hover){
    .serviceaboutbtn:hover{opacity: var(--opacity);}
}
/* breakfast */
.bf-top-txt{
    display: grid;
    grid-template-columns: 5.75em auto;
    align-items: flex-start;
    gap: 1.75rem 4rem;
    letter-spacing: 0.035rem;
}
.bf-info {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3.85rem 0 7.85rem;
}
.bf-info .info{width: 44%;}
.bf-info .img{width: 48%;}
.bf-info .info .item{
    display: grid;
    grid-template-columns: 185px auto;
    align-items: center;
    gap: 3rem;
    margin-bottom: 2rem;
    font-weight: 500;
    font-size: 24px;
}
.bf-abc{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem 5rem;
}
.bf-abc > div p.bf-series{
    font-size: 24px;
    margin-bottom:1.5rem;
}
.bf-abc > div .bf-exp{
    margin-top: 1.65rem;
}
.bf-abc > div .bf-exp > div{
    font-size: 19px;
    margin-bottom: 1rem;
    font-weight: 500;
    letter-spacing: 0.05rem;
}
.bf-bottom{
    margin-top: 6rem;
}
.bf-flexblk{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 3rem;
}
.bf-flexblk.rv{
    flex-direction: row-reverse;
}
.bf-flexblk:nth-of-type(n+2){
    margin-top: 10rem;
}
.bf-flexblk > .explain{
    width: 30%;
}
.bf-flexblk > .img{
    width: 65%;
}
@media (max-width: 1024px){
    .bf-abc{gap: 2rem 3.75rem;}
}