/* CSS Document */


/*おそらく共通でいける。*/
.page-nav{
    max-width: 1300px;
    width: 96%;
    margin: 0 auto;
}

.section-title{
    font-size: var(--fs50);
    text-align: center;
    font-weight: bold;
    padding: 0;
    margin: 1% 0;
}

.page-nav-nav{
    padding-top: 10%;
}

.page-nav-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    width: 92%;
    margin: auto;
}

.page-nav-list li{
    text-align: center;
}

.page-nav-list img{
    display: block;
}

.page-nav-list .link-box{
    margin: 11% auto;
    width: 88%;
}


/*お料理ページのみのfv設定*/
.page-hero-label{
    padding: 40px 33px 22px 33px;
}

.page-hero-label.ls05{
    letter-spacing: 0;
}

.page-hero-label span{
    letter-spacing: 0;
    margin-left: 9%;
}

.page-hero-title{
    padding: 0 4.4%;
    margin-bottom: 9%;
    letter-spacing: 0.15em;
}

.page-hero-text{
    padding: 0 4.4%;
    margin-bottom: 2%;
    line-height: 1.8em;
    letter-spacing: 0.07em;
}

.page-hero-catch p{
    font-size: 46px;
    margin: -1% 0 0 20%;
}



/*dinner*/
#dinner{
    width: 100%;
    background-image: url("../img/meal/background-1-2.png");
    background-repeat: no-repeat;
    background-position: center 10%;
    padding-top: 10%;
}

.dinner-gallery{
    max-width: 1300px;
    margin: 0 auto;
    width: 89%;
}

.dinner-gallery-media{
    display: flex;
    width: 90%;
    margin: auto;
    max-width: 1300px;
    justify-content: space-between;
    align-items: flex-start;
}

.dinner-gallery-media-reverse{
    flex-direction: row-reverse;
}

.dinner-gallery-main{
    width: 69.3%;
    margin: 0;
    padding: 0;
}

/*styleに追加予定*/
.dinner-gallery-main img{
    aspect-ratio: 810 / 576;
    border-radius: 1.3vw;
    object-fit: cover;
}

.dinner-gallery-thumbs{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    width: 28%;
    margin: 0;
    padding: 0;
}

.dinner-gallery-thumb{
    width: 46%;
    margin: 0 2% 2%;
    aspect-ratio: 1 / 1;
}

.dinner-gallery-thumb-btn{
    border: none;
    background-color: transparent;
    margin: 0;
    padding: 0;
}

.dinner-gallery-body{
    max-width: 1300px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin: auto;
    padding-bottom: 4.5%;
}

.dinner-gallery-body-inner{
    width: 69.3%;
}

.dinner-gallery-spacer{}
.dinner-gallery-btn.link-box {
    width: 32%;
    margin: 6.2% 2%;
    font-size: 22px;
}

.dinner-gallery-head{
    display: flex;
    margin: 0.5% 0 0 0 ;
    align-items: center;
}

.dinner-gallery-name{
    font-size: 40px;
    letter-spacing:0.05em;
    margin: 0 0 0 2%;
    padding: 0;
    align-items: center;
}

.dinner-gallery-name.ls0{
    letter-spacing:0em;
}

.dinner-gallery-spec{
    font-size: 22px;
    margin: 0 0 0 5%;
    padding: 0;
    letter-spacing:0.1em;
}

.dinner-gallery-desc{
    font-size: 20px;
    margin: 1.5% 0 0 2%;
    line-height: 2em;
    letter-spacing:0.1em;
    text-align: justify;
}

.dinner-drink{
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-direction: row;
}

.dinner-drink-content{
    width: 50%;
    margin-top: 8.7%;
    background-image: url("../img/meal/dk.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 4 / 5.45;
}

.dinner-drink-content-inner{
    width: 57%;
    margin-bottom: 25%;
}

.dinner-drink-name{
    font-size: 40px;
    letter-spacing: 0.05em;
    align-items: center;
    margin: 0
}

.dinner-drink-spec{
    font-size: 22px;
    letter-spacing: 0.1em;
    margin: 0;
    width: 89%;
    line-height: 1.9em;
    text-align: justify;
}

.dinner-menu{
    width: 50%;
    padding-left: 5.5%;
    padding-right: 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
}

.dinner-menu-month{
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.dinner-menu-example{
    text-align: center;
    margin: 0 auto;
    background-color: var(--navy);
    padding: 4.6% 4%;
    border-radius: 30px;
    letter-spacing: 0.1em;
    width: 52%;
}

.dinner-menu-example-title{
    color: #fff;
    font-size: 20px;
    margin: 0;
}

.dinner-menu-example-name{
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    padding: 13.5% 7% 10%;
    position: absolute;
    top: 50%;
    z-index: -1;
}

.dinner-menu-example-name p{
    font-size: 20px;
    margin: 0;
    line-height: 2.1em;
    letter-spacing: 0.08em;
}

.dinner-menu-price{
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    line-height: 3em;
    margin-bottom: 55%;
    padding: 7%;
}

.dinner-menu-price-title{
    font-size: 24px;
    margin: 0;
    letter-spacing: 0.2em;
}

.dinner-menu-price-text{
    font-size: 20px;
    padding-left: 7%;
    margin: 0;
    line-height: 1.8em;
    letter-spacing: 0.1em;
}

.dinner-menu-price-note{
    font-size: 18px;
    padding-top: 5%;
    padding-left: 7%;
    line-height: 1;
    margin: 0;
    letter-spacing: 0.1em;
}

.dinner-menu-price-note-lst{
    padding-top: 3.5%;
}



/*morning*/
#morning{
    width: 100%;
    background-image: url("../img/meal/background-2-2.png");
    background-repeat: no-repeat;
    background-position: center 88%;
}

.morning-gallery{
    max-width: 1300px;
    margin: 0 auto;
    padding: 7.7% 0 20.5% 0;
    width: 89%;
}

.morning-gallery-media{
    display: flex;
    width: 90%;
    margin: auto;
    max-width: 1300px;
    justify-content: space-between;
    align-items: flex-start;
}

.morning-gallery-media-reverse{
    flex-direction: row-reverse;
}

.morning-gallery-main{
    width: 69.3%;
    margin: 0;
    padding: 0;
}

/*styleに追加予定*/
.morning-gallery-main img{
    aspect-ratio: 810 / 576;
    border-radius: 1.3vw;
    object-fit: cover;
}

.morning-gallery-thumbs{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    width: 28%;
    margin: 0;
    padding: 0;
}

.morning-gallery-thumb{
    width: 46%;
    margin: 0 2% 2%;
    aspect-ratio: 1 / 1;
}

.morning-gallery-thumb-btn{
    border: none;
    background-color: transparent;
    margin: 0;
    padding: 0;
}

.morning-gallery-body{
    max-width: 1300px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin: auto;
    padding-bottom: 3%;
}

.morning-gallery-body-inner{
    width: 69.3%;
}

.morning-gallery-spacer{}
.morning-gallery-btn.link-box {
    width: 32%;
    margin: 6.2% 2%;
    font-size: 22px;
}

.morning-gallery-head{
    display: flex;
    margin: 0.5% 0 0 0 ;
    align-items: center;
}

.morning-gallery-name{
    font-size: 40px;
    letter-spacing:0.05em;
    margin: 0 0 0 2%;
    padding: 0;
    align-items: center;
}

.morning-gallery-name.ls0{
    letter-spacing:0em;
}

.morning-gallery-spec{
    font-size: 22px;
    margin: 0 0 0 5%;
    padding: 0;
    letter-spacing:0.1em;
}

.morning-gallery-desc{
    font-size: 20px;
    margin: 1.5% 0 0 2%;
    line-height: 2em;
    letter-spacing:0.1em;
    text-align: justify;
}

.morning-drink{
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-direction: row;
}

.morning-drink-content{
    width: 50%;
    margin-top: 8.7%;
    background-image: url("../img/meal/dk.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 4 / 5.45;
}

.morning-drink-content-inner{
    width: 57%;
    margin-bottom: 25%;
}

.morning-drink-name{
    font-size: 40px;
    letter-spacing: 0.05em;
    align-items: center;
    margin: 0
}

.morning-drink-spec{
    font-size: 22px;
    letter-spacing: 0.1em;
    margin: 0;
    width: 89%;
    line-height: 1.9em;
    text-align: justify;
}

.morning-content{
    display: flex;
    width: 90%;
    margin: auto;
    max-width: 1300px;
    justify-content: space-between;
    align-items: flex-start;
}

.morning-content-inner{
    width: 69.3%;
}

.morning-note{
    background: #fff;
    border-radius: 30px;
    margin-bottom: 5%;
}

.morning-note p{
    font-size: 20px;
    text-align: center;
    margin: 0;
    padding: 4% 0;
    letter-spacing: 0.1em;
}

.morning-menu{
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.morning-menu-example{
    text-align: center;
    margin: 0 auto;
    background-color: var(--navy);
    padding: 3% 0;
    border-radius: 30px;
    letter-spacing: 0.1em;
    width: 35%;
}

.morning-menu-example-title{
    color: #fff;
    font-size: 20px;
    margin: 0;
}

.morning-menu-example-name{
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    padding: 7% 20% 4%;
    position: absolute;
    top: 50%;
    z-index: -1;
}

.morning-menu-example-name p{
    font-size: 20px;
    margin: 0;
    line-height: 2.1em;
    letter-spacing: 0.08em;
}



/*lunch*/
#lunch{
    width: 100%;
    background-image: url("../img/meal/background-3-2.png");
    background-repeat: no-repeat;
    background-position: center 47%;
}

.lunch-gallery{
    max-width: 1300px;
    margin: 0 auto;
    padding-bottom: 8%;
    width: 89%;
}

.lunch-gallery-media{
    display: flex;
    width: 90%;
    margin: auto;
    max-width: 1300px;
    justify-content: space-between;
    align-items: flex-start;
}

.lunch-gallery-media-reverse{
    flex-direction: row-reverse;
}

.lunch-gallery-main{
    width: 69.3%;
    margin: 0;
    padding: 0;
}

/*styleに追加予定*/
.lunch-gallery-main img{
    aspect-ratio: 810 / 576;
    border-radius: 1.3vw;
    object-fit: cover;
}

.lunch-gallery-thumbs{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    width: 28%;
    margin: 0;
    padding: 0;
}

.lunch-gallery-thumb{
    width: 46%;
    margin: 0 2% 2%;
    aspect-ratio: 1 / 1;
    margin-left: auto;
}

.lunch-gallery-thumb-btn{
    border: none;
    background-color: transparent;
    margin: 0;
    padding: 0;
}

.lunch-gallery-body{
    max-width: 1300px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin: auto;
    padding-bottom: 7%;
}

.lunch-gallery-body-inner{
    width: 69.3%;
}

.lunch-gallery-spacer{}
.lunch-gallery-btn.link-box {
    width: 32%;
    margin: 6.2% 2%;
    font-size: 22px;
}

.lunch-gallery-head{
    display: flex;
    margin: 0.5% 0 0 0 ;
    align-items: center;
}

.lunch-gallery-name{
    font-size: 40px;
    letter-spacing:0.05em;
    margin: 0 0 0 2%;
    padding: 0;
    align-items: center;
}

.lunch-gallery-name.ls0{
    letter-spacing:0em;
}

.lunch-gallery-spec{
    font-size: 22px;
    margin: 0 0 0 5%;
    padding: 0;
    letter-spacing:0.1em;
}

.lunch-gallery-desc{
    font-size: 20px;
    margin: 1.5% 0 0 2%;
    line-height: 2em;
    letter-spacing:0.1em;
    text-align: justify;
}

.lunch-inner{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.lunch-menu{
    width: 48%;
    position: relative;
    z-index: 1;
}

.lunch-menu-example{
    text-align: center;
    margin: 0 auto;
    background-color: var(--navy);
    padding: 4% 0;
    border-radius: 30px;
    letter-spacing: 0.1em;
    width: 50%;
}

.lunch-menu-example-title{
    color: #fff;
    font-size: 20px;
    margin: 0;
}

.lunch-menu-example-name{
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    padding: 10% 20% 4%;
    position: absolute;
    z-index: -1;
    top: 50%;
}

.lunch-menu-example-name p{
    font-size: 20px;
    margin: 0;
    line-height: 2.1em;
    letter-spacing: 0.08em;
}

.lunch-menu-price{
    background-color: #fff;
    border-radius: 20px;
    width: 48%;
    line-height: 3em;
    margin-top: 3.2%;
    padding: 2.4% 0 2.4% 4%;
}

.lunch-menu-price-title{
    font-size: 24px;
    margin: 0;
    letter-spacing: 0.2em;
    line-height: 1;
}

.lunch-menu-price-text{
    font-size: 20px;
    padding-left: 7%;
    padding-top: 3%;
    margin: 0;
    line-height: 1.6em;
    letter-spacing: 0.1em;
}

.lunch-menu-price-note{
    font-size: 18px;
    padding-top: 3%;
    padding-left: 7%;
    line-height: 1;
    margin: 0;
    letter-spacing: 0.1em;
}

.lunch-menu-price-note-lst{
    padding-top: 3%;
}



/*course-lunch*/
.course-lunch{
    max-width: 1300px;
    margin: 0 auto 8.5%;
    width: 89%;
}

.cl-wrap{
    display: flex;
    width: 90%;
    margin: auto;
    max-width: 1300px;
    justify-content: space-between;
    align-items: flex-start;
}

.cl-img-inner{
    width: 60%;
    margin: 0;
    padding: 0;
}

/*styleに追加予定*/
.cl-img-inner img{
    width: 100%;
}

.cl-txt-inner{
    width: 41%;
    padding: 5% 3% 0 3%;
}

.cl-gallery-name{
    font-size: 40px;
    letter-spacing:-0.04em;
    margin: 0 0 0 2%;
    padding: 0;
    align-items: center;
}

.cl-gallery-spec{
    font-size: 22px;
    margin: 0 0 0 5%;
    padding: 0;
    letter-spacing:0.1em;
}

.cl-gallery-desc{
    font-size: 20px;
    margin: 3% 0 0 2%;
    line-height: 2.1em;
    letter-spacing:0.05em;
    text-align: justify;
}

.cl-menu-wrap{
    display: flex;
    width: 90%;
    margin: auto;
    margin-top: 1%;
    max-width: 1300px;
    justify-content: space-between;
    align-items: flex-start;
}

.cl-menu-inner{
    width: 60%;
    background: #fff;
    padding-bottom: 3%;
    border-radius: 20px;
}

.cl-menu-spacer {
    width: 41%;
    padding-right: 3%;
}

.cl-menu-price-title{
    font-size: 24px;
    margin: 4.5% 0 3% 0;
    letter-spacing: 0.2em;
    padding-left: 5%;
    line-height: 1;
}

.cl-menu-price-text{
    font-size: 20px;
    padding-left: 7%;
    margin: 0;
    line-height: 1.6em;
    letter-spacing: 0.08em;
}

.cl-menu-price-note{
    font-size: 18px;
    padding-top: 1.5%;
    padding-left: 7%;
    line-height: 1;
    margin: 0;
    letter-spacing: 0.1em;
}

.cltbr{
    display: none;
}



/*Kids'-Meal*/
.kids-meal{
    max-width: 1300px;
    margin: 0 auto 7.5%;
    width: 89%;
}

.km-wrap{
    display: flex;
    width: 90%;
    margin: auto;
    max-width: 1300px;
    justify-content: space-between;
    align-items: flex-start;
}

.km-img-inner{
    width: 60%;
    margin: 0;
    padding: 0;
}

/*styleに追加予定*/
.km-img-inner img{
    width: 100%;
}

.km-txt-inner{
    width: 41%;
    padding: 3% 6.5% 0 0;
}

.km-gallery-name{
    font-size: 40px;
    letter-spacing:-0.04em;
    margin: 0 0 0 2%;
    padding: 0;
    align-items: center;
}

.km-gallery-spec{
    font-size: 22px;
    margin: 0 0 0 8%;
    padding: 0;
    letter-spacing:0.1em;
}

.km-gallery-desc{
    font-size: 20px;
    margin: 3% 0 0 2%;
    line-height: 2.1em;
    letter-spacing:0.03em;
    text-align: justify;
}



/*restaurant*/
.restaurant{
    max-width: 1300px;
    margin: 0 auto 9.5%;
    width: 89%;
}

.rest-name{
    font-size: 40px;
    letter-spacing:-0.04em;
    margin: 0;
    text-align: center;
}

.rest-spec{
    font-size: 22px;
    margin: 0;
    padding: 0;
    letter-spacing:0.1em;
    text-align: center;
}

.rest-wrap{
    display: flex;
    margin: auto;
    max-width: 1300px;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 3.5%;
}

.rest-img-inner{
    width: 48%;
    margin: 0;
    padding: 0;
}

/*styleに追加予定*/
.rest-img-inner img{
    width: 100%;
}

.rest-txt-inner{
    width: 45%;
    padding: 10% 8% 0 0;
}

.rest-gallery-name{
    font-size: 30px;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 0 0 3% 3%;
    align-items: center;
    border-bottom: 1px var(--usui-navy) solid;
}

.rest-gallery-desc{
    font-size: 20px;
    padding: 2% 6% 0 3%;
    margin: 0;
    line-height: 2em;
    letter-spacing:0.05em;
    text-align: justify;
}




@media(max-width:1420px){
    .page-hero-catch p{
        margin: 5% auto;
        text-align: center;
    }
    
    .page-hero-title{
        margin-bottom: 5%;
        letter-spacing: 0.1em;
    }
    
    #dinner{
        padding-top: 18%;
    }
    
    .dinner-gallery-head{
        margin: 3% 0 0 0;
    }
    
    .dinner-drink-name{
        font-size: 38px;
    }
    
    .dinner-drink-spec{
        font-size: 20px;
        line-height: 1.7em;
    }
    
    .dinner-menu{
        padding-left: 3%;
        padding-right: 3%;
    }
    
    .dinner-menu-example{
        padding: 4% 0;
        width: 55%;
    }
    
    .dinner-menu-example-name{
        padding: 12% 8% 8%;
    }
    
    .dinner-menu-price{
        margin-bottom: 40%;
    }
    
    .dinner-menu-price-text{
        padding-top: 2%;
    }
    
    .dinner-menu-price-note{
        padding-top: 4%;
    }
    
    .morning-gallery{
        padding: 15% 0 30% 0;
    }
    
    .morning-gallery-head{
        margin: 3% 0 0 0;
    }
    
    .lunch-gallery-head{
        margin: 3% 0 0 0;
    }
    
    .lunch-menu-example-name{
        padding: 10% 15% 4%;
    }
    
    .lunch-menu-price{
        padding: 3% 0 3% 4%;
    }
    
    .lunch-menu-price-text{
        padding-top: 2%;
    }
    
    .cl-txt-inner{
        padding: 5% 0 0 3%;
    }
    
    .cl-menu-wrap{
        margin-top: 4%;
    }
    
    .cl-menu-price-title{
        padding-left: 3%;
    }
    
    .cl-menu-price-text, .cl-menu-price-note{
        padding-left: 5%;
    }
    
    .kids-meal{
        margin: 0 auto 12%;
    }
}

@media(max-width:1300px){
    .page-hero-label{
        font-size: 36px;
        padding: 10px 0 20px 26px;   
    }
    
    .page-hero-label span{
        font-size: 30px;
    }
    
    .page-hero-title{
        font-size: 22px;
    }
    
    .page-hero-text{
        margin-top: 3%;
        font-size: 16px;
    }
    
    .page-nav-nav {
        padding-top: 7%;
    }
    
    .dinner-gallery-name, .morning-gallery-name, .lunch-gallery-name{
        line-height: 1;
    }
    
    .dinner-gallery-spec, .morning-gallery-spec, .lunch-gallery-spec, .cl-gallery-spec, .km-gallery-spec, .rest-spec{
        font-size: 18px;
    }
    
    .dinner-gallery-head, .morning-gallery-head, .lunch-gallery-head{
        align-items: baseline;
        margin: 5% 0 0 0;
    }
    
    .dinner-gallery-desc, .morning-gallery-desc, .lunch-gallery-desc, .cl-gallery-desc, .km-gallery-desc, .rest-gallery-desc{
        font-size: 18px;
    }
    
    .dinner-drink-spec{
        font-size: 18px;
    }
    
    .dinner-menu-example-name p{
        font-size: 18px;
    }
    
    .dinner-menu-price{
        margin-bottom: 35%;
    }
    
    .dinner-menu-price-text, .lunch-menu-price-text, .cl-menu-price-text{
        font-size: 18px;
    }
    
    .dinner-menu-price-note, .lunch-menu-price-note, .cl-menu-price-note{
        font-size: 16px;
    }
    
    .morning-note p{
        font-size: 18px;
    }
    
    .morning-menu-example{
        width: 45%;
    }
    
    .morning-menu-example-name{
        padding: 7% 18% 4%;
    }
    
    .morning-menu-example-name p{
        font-size: 18px;
    }
    
    .lunch-menu-example{
        width: 60%;
    }
    
    .lunch-menu-example-name {
        padding: 13% 15% 7%;
    }
    
    .lunch-menu-example-name p{
        font-size: 18px;
        line-height: 1.8em;
    }
    
    .lunch-menu-price-title {
        letter-spacing: 0.1em;
    }
    
    .cl-img-inner, .km-img-inner{
        width: 55%;
    }
    
    .cl-txt-inner {
        padding: 5% 0 0 0;
    }
    
    .cl-menu-inner{
        width: 55%;
        padding-bottom: 4%;
    }
    
    .cl-menu-price-title{
        font-size: 22px;
    }
    
    .cl-menu-price-title{
        margin: 7% 0 3% 0;
    }
    
    .km-txt-inner{
        padding: 3% 0 0 0;
    }
    
    .rest-txt-inner {
        padding: 8% 8% 0 0;
    }
}

@media(max-width:1220px){
    .dinner-menu-example-title, .morning-menu-example-title, .lunch-menu-example-title{
        font-size: 18px;
    }
    
    .dinner-menu-example-name{
        padding: 12% 5% 8%;
    }
    
    .dinner-menu-price-title, .lunch-menu-price-title, .cl-menu-price-title{
        font-size: 22px;
        letter-spacing: 0.05em;
    }
    
    .morning-menu-example-name{
        padding: 7% 14% 4%;
    }
    
    .cl-menu-price-text, .cl-menu-price-note{
        padding-right: 5%;
    }
}

@media(max-width:1080px){
    #dinner, #morning, #lunch{
        background-size: contain;
    }
    
    .page-hero-title {
        font-size: 20px;
    }
    
    .page-hero-text{
        font-size: 14px;
    }
    
    .dinner-gallery-name, .morning-gallery-name, .lunch-gallery-name, .cl-gallery-name, .km-gallery-name, .rest-name{
        font-size: 36px;
    }
    
    .dinner-menu-example-name {
        padding: 12% 4.5% 8%;
    }
    
    .dinner-gallery-spec, .morning-gallery-spec, .lunch-gallery-spec, .cl-gallery-spec, .km-gallery-spec, .rest-spec{
        font-size: 16px;
    }
    
    .dinner-drink-spec{
        font-size: 16px;
    }
    
    .dinner-gallery-desc, .morning-gallery-desc, .lunch-gallery-desc, .cl-gallery-desc, .km-gallery-desc, .rest-gallery-desc{
        font-size: 16px;
    }
    
    .dinner-menu-example{
        width: 75%;
    }
    
    .morning-note p {
        font-size: 16px;
    }
    
    .dinner-menu-example-name p, .morning-menu-example-name p, .lunch-menu-example-name p{
        font-size: 16px;
    }
    
    .dinner-drink-name{
        font-size: 34px;
    }
    
    .dinner-menu-price-text, .lunch-menu-price-text, .cl-menu-price-text{
        font-size: 16px;
    }
    
    .dinner-menu-price-note, .lunch-menu-price-note, .cl-menu-price-note{
        font-size: 14px;
    }
    
    .dinner-menu-price {
        margin-bottom: 28%;
    }
    
    .morning-menu-example {
        width: 65%;
    }
    
    .morning-menu-example-name {
        padding: 7% 10% 4%;
    }
    
    .lunch-menu-example {
        width: 75%;
    }
    
    .lunch-menu-example-name {
        padding: 13% 10% 7%;
    }
    
    .lunch-menu-price {
        padding: 2.9% 3%;
    }
    
    .lunch-menu-price-text, .lunch-menu-price-note{
        padding-left: 4%;
    }
    
    .cl-img-inner, .km-img-inner {
        width: 50%;
        margin-top: 2%;
    }
    
    .cl-txt-inner {
        padding: 0% 0 0 0;
        width: 47%;
    }
    
    .cl-gallery-spec{
        margin: 0 0 0 2%;
        letter-spacing: 0.05em;
    }
    
    .cl-menu-inner{
        width: 100%;
    }
    
    .cl-menu-price-text, .cl-menu-price-note{
        padding-right: 0;
        padding-left: 5%;
        letter-spacing: 0.02em;
    }
    
    .km-txt-inner{
        width: 46%
    }
    
    .rest-txt-inner{
        width: 48%;
        padding: 6% 6% 0 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 1079px){
    
    .page-hero-label {
        font-size: 28px;
        padding: 10px 0 16px 20px;
    }
    
    .page-hero-label span {
        font-size: 24px;
    }
    
    .page-hero-title {
        font-size: 16px;
        letter-spacing: 0.01em;
    }
    
    .page-hero-text {
        font-size: 12px;
    }

    .page-hero-catch p{
        font-size: 38px;
    }
    
    .page-nav-nav {
        padding-top: 0;
    }
    
    .page-nav-list{
        width: 100%;
    }
    
    .dinner-gallery, .morning-gallery, .lunch-gallery{
        width: 95%;
    }
    
    .dinner-gallery-name, .morning-gallery-name, .lunch-gallery-name, .cl-gallery-name, .km-gallery-name, .rest-name{
        font-size: 32px;
    }
    
    .dinner-gallery-desc, .morning-gallery-desc, .lunch-gallery-desc, .cl-gallery-desc, .km-gallery-desc, .rest-gallery-desc{
        font-size: 12px;
    }
    
    .dinner-gallery-spec, .morning-gallery-spec, .lunch-gallery-spec, .cl-gallery-spec, .km-gallery-spec, .rest-spec{
        font-size: 12px;
    }
    
    .dinner-drink-name {
        font-size: 28px;
    }
    
    .dinner-drink-spec {
        font-size: 12px;
    }
    
    .dinner-menu-example-name p, .morning-menu-example-name p, .lunch-menu-example-name p{
        font-size: 12px;
    }
    
    .dinner-menu-price-title, .lunch-menu-price-title, .cl-menu-price-title{
        font-size: 18px;
    }
    
    .dinner-menu-price-text, .lunch-menu-price-text, .cl-menu-price-text{
        font-size: 12px;
    }
    
    .dinner-menu-price-note, .lunch-menu-price-note, .cl-menu-price-note{
        font-size: 10px;
    }
    
    .dinner-menu-example-title, .morning-menu-example-title, .lunch-menu-example-title{
        font-size: 14px;
    }
    
    .dinner-menu-example-name {
        padding: 12% 10% 8%;
    }
    
    .morning-note p {
        font-size: 12px;
    }
    
    .morning-menu-example-name {
        padding: 9% 16% 4%;
    }
    
    .lunch-menu-example-name {
        padding: 14% 18% 7%;
    }
    
    .lunch-menu-price {
        padding: 2.8% 0 2.8% 6%;
    }
    
    .lunch-menu-price-text {
        padding-top: 4.2%;
    }
    
    .cl-img-inner, .km-img-inner {
        margin-top: 0;
    }
    
    .cl-menu-price-title {
        margin: 6% 0 3% 0;
    }
    
    .rest-gallery-name{
        font-size: 24px;
    }
    
    .rest-gallery-desc {
        padding: 5% 6% 0 3%;
    }
    
}


@media(max-width:768px){
    .page-hero-content {
        width: 95%;
    }
    
    .page-hero-content-inner {
        padding-top: 10%;
        margin: 10% 4% 0 8%;
        width: 80%;
    }
    
    .page-hero-label {
        padding: 10px 0 25px 26px;
        margin-bottom: 4%;
        font-size: 46px;
    }
    
    .page-hero-title {
        line-height: 1.8em;
        font-size: 24px;
        margin-bottom: 6%;
    }
    
    .page-hero-label span {
        font-size: 38px;
    }
    
    .page-hero-text {
        font-size: 20px;
        text-align: justify;
    }
    
    .page-hero-catch p{
        font-size: 30px;
        margin: 0 auto;
    }
    
    .page-nav {
        width: 85%;
    }
    
    .page-nav-nav {
        padding-top: 0;
    }
    
    .page-nav-list{
        flex-wrap: wrap;
        width: 100%;
    }
    
    .page-nav-list li{
        width: 48%;
    }
    
    .page-nav-list img{
        width: 100%;
    }
    
    .page-nav-list .link-box {
        margin: 8% auto 22%;
    }
    
    #dinner {
        padding-top: 28%;
        background-size: 250%;
        background-position: center 16%;
    }
    
    #morning{
        background-size: 250%;
        background-position: center 70%;
    }
    
    #lunch{
        background-size: 250%;
        background-position: center 62%;
    }
    
    .dinner-gallery, .morning-gallery, .lunch-gallery, .restaurant{
        width: 85%;
    }
    
    .dinner-gallery-body{
        width: 100%;
        padding-bottom: 10%;
    }
    
    .dinner-gallery-media, .morning-gallery-media, .lunch-gallery-media{
        width: 100%;
        flex-wrap: wrap;
    }
    
    .dinner-gallery-media-reverse {
        flex-direction: column;
    }
    
    .dinner-gallery-main, .morning-gallery-main, .lunch-gallery-main{
        width: 100%;
    }
    
    .dinner-gallery-thumbs, .morning-gallery-thumbs, .lunch-gallery-thumbs{
        width: 100%;
    }
    
    .dinner-gallery-thumb, .morning-gallery-thumb, .lunch-gallery-thumb {
        width: 23.5%;
        margin: 5% 2% 0 0;
    }
    
    .dinner-gallery-thumbs > :nth-child(4) {
        margin: 5% 0 0 0;
    }
    
    .morning-gallery-thumbs > :nth-child(4) {
        margin: 5% 0 0 0;
    }
    
    .lunch-gallery-thumbs > :nth-child(4) {
        margin: 5% 0 0 0;
    }
    
    .dinner-gallery-thumb-btn, .morning-gallery-thumb-btn, .lunch-gallery-thumb-btn{
        display: contents;
    }
    
    .dinner-gallery-thumb img {
        width: 100%;
        display: block;
    }
    
    .morning-gallery-thumb img {
        width: 100%;
        display: block;
    }
    
    .lunch-gallery-thumb img {
        width: 100%;
        display: block;
    }
    
    .dinner-gallery-body{
        width: 100%;
        padding-top: 7%;
        padding-bottom: 14%;
    }
    
    .dinner-gallery-head, .morning-gallery-head, .lunch-gallery-head {
        margin: 8% 0 0 0;
    }
    
    .dinner-gallery-name, .morning-gallery-name, .lunch-gallery-name, .cl-gallery-name, .km-gallery-name, .rest-name {
        font-size: 38px;
        margin: 0
    }
    
    .dinner-gallery-spec, .morning-gallery-spec, .lunch-gallery-spec, .cl-gallery-spec, .km-gallery-spec, .rest-spec {
        font-size: 22px;
        line-height: 1;
    }
    
    .dinner-gallery-body-inner, .morning-gallery-body-inner, .lunch-gallery-body-inner{
        width: 100%;
    }
    
    .dinner-gallery-desc, .morning-gallery-desc, .lunch-gallery-desc, .cl-gallery-desc, .km-gallery-desc, .rest-gallery-desc {
        font-size: 20px;
        margin: 4% 0 0 0%;
    }
    
    .dinner-drink{
        flex-direction: column-reverse;
    }
    
    .dinner-menu {
        padding: 0;
        width: 100%;
        margin-bottom: 5%;
    }
    
    .dinner-menu-example {
        width: 50%;
    }
    
    .dinner-menu-example-title, .morning-menu-example-title, .lunch-menu-example-title {
        font-size: 20px;
    }
    
    .dinner-menu-example-name {
        padding: 12% 0 8% 8%;
    }
    
    .dinner-menu-example-name p, .morning-menu-example-name p, .lunch-menu-example-name p {
        font-size: 18px;
    }
    
    .dinner-menu-price {
        margin-bottom: 0;
        margin-top: 55%;
        padding: 5% 0 6% 8%;
    }
    
    .dinner-menu-price-title, .lunch-menu-price-title, .cl-menu-price-title {
        font-size: 24px;
        letter-spacing: 0.2em;
    }
    
    .dinner-menu-price-text, .lunch-menu-price-text, .cl-menu-price-text {
        font-size: 20px;
    }
    
    .dinner-menu-price-note, .lunch-menu-price-note, .cl-menu-price-note {
        font-size: 18px;
    }
    
    .dinner-drink-content {
        width: 100%;
        aspect-ratio: 3.5 / 5.45;
    }
    
    .dinner-drink-content-inner {
        width: 60%;
        margin-bottom: 28%;
    }
    
    .dinner-drink-name {
        font-size: 38px;
    }
    
    .dinner-drink-spec {
        width: 90%;
        font-size: 18px;
        line-height: 2em;
    }
    
    .morning-gallery-media-reverse {
        flex-direction: column-reverse;
    }
    
    .morning-gallery-body{
        width: 100%;
        padding-top: 0;
        padding-bottom: 7%;
    }
    
    .morning-content{
        width: 100%;
    }
    
    .morning-content-inner{
        width: 100%;
    }
    
    .morning-note p{
        font-size: 18px;
        letter-spacing: 0.05em;
    }
    
    .morning-menu-example {
        width: 55%;
    }
    
    .morning-menu-example-name {
        padding: 9% 10% 4%;
    }
    
    .lunch-gallery{
        margin-top: 10%;
    }
    
    .lunch-gallery-media-reverse {
        flex-direction: column;
    }
    
    .lunch-gallery-body{
        width: 100%;
        padding-top: 0;
        padding-bottom: 7%;
    }
    
    .lunch-inner{
        width: 100%;
        flex-direction: column;
    }
    
    .lunch-menu-example-name {
        padding: 13% 0 7% 20%;
        line-height: 2em;
    }
    
    .lunch-menu-price {
        margin-top: 55%;
        margin-bottom: 10%;
        padding: 5% 0 7% 10%;
    }
    
    .lunch-menu-price-text {
        padding-top: 4.2%;
    }
    
    .lunch-menu, .lunch-menu-price{
        width: 100%;
    }
    
    .course-lunch, .kids-meal{
        width: 85%;
        margin: 0 auto 16%;
    }
    
    .cl-wrap, .km-wrap{
        width: 100%;
    }
    
    .cl-wrap{
        flex-direction: column;
    }
    
    .cl-img-inner, .km-img-inner {
        width: 100%;
        margin-top: 2%;
    }
    
    .cl-gallery-desc, .km-gallery-desc{
        margin: 2% 0 0 0%;
    }
    
    .cl-txt-inner, .km-txt-inner{
        width: 100%;
    }
    
    .cl-menu-wrap{
        margin-top: 8%;
        width: 100%;
        flex-direction: column;
    }
    
    .cl-menu-inner{
        padding: 7% 5% 7% 5%;
    }
    
    .cl-menu-price-title{
        letter-spacing: 0;
        margin: 0;
        padding: 0;
    }
    
    .cl-menu-price-text{
        padding-top: 4%;
    }
    
    .cl-menu-price-note{
        padding-top: 3%;
        line-height: 1.4em;
    }
    
    .km-wrap {
        width: 100%;
        flex-direction: column-reverse;
    }
    
    .km-txt-inner {
        padding: 0;
    }
    
    .restaurant{
        padding-top: 5%;
    }
    
    .rest-wrap {
        flex-direction: column;
        padding-top: 10%;
    }
    
    .rest-img-inner{
        width: 100%;
    }
    
    .rest-txt-inner {
        width: 100%;
        padding: 6% 0 0 0;
    }
}

@media(max-width:600px){
    #dinner {
        padding-top: 28%;
        background-size: 350%;
        background-position: center 16%;
    }
    
    #morning{
        background-size: 350%;
        background-position: center 70%;
    }
    
    #lunch{
        background-size: 350%;
        background-position: center 62%;
    }
    
    .page-hero-label {
        font-size: 33px;
        padding: 2% 0 4% 0;
    }
    
    .page-hero-label span {
        font-size: 22px;
    }
    
    .page-hero-inner{
        width: 100%;
    }
    
    .page-hero-image{
        width: 85%;
    }
    
    .page-hero-content {
        margin-top: 8%;
    }
    
    .page-hero-content-inner {
        padding-top: 12%;
        margin: 0 auto;
        width: 74%;
    }
    
    .page-hero-title {
        font-size: 16px;
        letter-spacing: 0.02em;
        margin-bottom: 6%;
        padding: 0;
        line-height: 1.6em;
    }
    
    .page-hero-text {
        padding: 0;
        font-size: 14px;
        margin: 0;
        line-height: 1.6em;
        letter-spacing: 0;
    }
    
    .page-hero-catch p {
        font-size: 25px;
        letter-spacing: 0.05em;
    }
    
    .page-nav-list .link-box {
        font-size: 14px;
    }
    
    #dinner {
        padding-top: 18%;
    }
    
    .dinner-gallery-name, .morning-gallery-name, .lunch-gallery-name, .cl-gallery-name, .km-gallery-name, .rest-name {
        font-size: 26px;
    }
    
    .dinner-gallery-spec, .morning-gallery-spec, .lunch-gallery-spec, .cl-gallery-spec, .km-gallery-spec, .rest-spec {
        font-size: 16px;
    }
    
    .dinner-gallery-desc, .morning-gallery-desc, .lunch-gallery-desc, .cl-gallery-desc, .km-gallery-desc, .rest-gallery-desc {
        font-size: 14px;
        line-height: 1.6em;
    }
    
    .dinner-menu-example-title, .morning-menu-example-title, .lunch-menu-example-title {
        font-size: 16px;
    }
    
    .dinner-menu-example {
        width: 82%;
        border-radius: 18px;
    }
    
    .dinner-menu-example-name p, .morning-menu-example-name p, .lunch-menu-example-name p {
        font-size: 14px;
        line-height: 1.8em;
        letter-spacing: 0.05em;
    }
    
    .dinner-menu-example-name {
        padding: 15% 4% 8% 5%;
    }
    
    .dinner-menu-price-title, .lunch-menu-price-title, .cl-menu-price-title {
        font-size: 16px;
        letter-spacing: 0.05em;
        line-height: 1;
        margin: 3% 0;
    }
    
    .dinner-menu-price-text, .lunch-menu-price-text, .cl-menu-price-text {
        font-size: 14px;
    }
    
    .dinner-menu-price-note, .lunch-menu-price-note, .cl-menu-price-note {
        font-size: 14px;
    }
    
    .dinner-drink-name {
        font-size: 24px;
        line-height: 1;
        margin-bottom: 7%;
    }
    
    .dinner-drink-spec {
        width: 96%;
        font-size: 14px;
        line-height: 1.6em;
        letter-spacing: 0;
    }
    
    .dinner-gallery-name, .morning-gallery-name, .lunch-gallery-name, .cl-gallery-name, .km-gallery-name, .rest-name {
        font-size: 30px;
    }
    
    .dinner-gallery-spec, .morning-gallery-spec, .lunch-gallery-spec, .cl-gallery-spec, .km-gallery-spec, .rest-spec {
        font-size: 14px;
    }
    
    .dinner-gallery-desc, .morning-gallery-desc, .lunch-gallery-desc, .cl-gallery-desc, .km-gallery-desc, .rest-gallery-desc {
        font-size: 16px;
        margin: 6% 0 5% 0%;
    }
    
    .morning-gallery{
        padding: 25% 0 30% 0;
    }
    
    .morning-note {
        border-radius: 18px;
    }
    
    .morning-note p {
        font-size: 15px;
        letter-spacing: 0;
    }
    
    .morning-menu-example {
        width: 75%;
        border-radius: 18px;
    }
    
    .morning-menu-example-name {
        padding: 10% 5% 5%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .morning-menu-example-name p {
        letter-spacing: 0;
    }
    
    .lunch-gallery {
        margin-top: 25%;
    }
    
    .lunch-menu-price {
        padding: 5% 0 7% 8%;
    }
    
    .lunch-menu-example {
        width: 75%;
        border-radius: 18px;
    }
    
    .lunch-menu-example-name {
		padding: 10% 5% 5%;
		display: flex;
		justify-content: center;
		align-items: center;
    }
    
    .lunch-menu-price {
        margin-top: 60%;
    }
    
    .cl-gallery-name, .km-gallery-name {
        letter-spacing: 0;
        line-height: 1;
    }
    
    .cl-gallery-spec {
        margin: 0 0 0 5%;
    }
    
    .cl-menu-wrap {
        margin-top: 4%;
    }
    
    .cltbr{
        display: block;
    }
    
    .dinner-menu-price-title, .lunch-menu-price-title, .cl-menu-price-title {
        line-height: 1.4em;
        margin: 3% 0 0 0;
    }
    
    .cl-menu-price-text, .cl-menu-price-note {
        padding-left: 3%;
    }
    
    .rest-gallery-name {
        font-size: 24px;
    }
}