/* Googleフォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Playfair+Display:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Inter:wght@400;700&display=swap');

/* ローカルフォント定義（フォントファイルが利用可能な場合） */
@font-face {
    font-family: 'HarenosoraMincho';
    src: url('../fonts/harenosora-mincho.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Learning Curve';
    src: url('../fonts/LearningCurve.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* フォールバックフォントの定義 */
:root {
    --font-japanese: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --font-english: 'Learning Curve', serif;
    --font-harenosora: 'HarenosoraMincho', 'Noto Serif JP', serif;
    --font-learning-curve: 'Learning Curve', 'Noto Serif JP', serif;
}


/* 共通 */
body{
    margin: 0;
}
img{
    width: 100%;
}
h1{
    margin: 0;
}
h2{
    color: #232323;
    text-align: center;
    font-family: 'Noto Serif JP', serif;
    font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 57.6px */
    letter-spacing: 1.28px;
    margin: 0;
}
h3{
    color: #232323;
    font-family: var(--font-japanese);
    font-size: clamp(1.25rem, 1.068rem + 0.78vw, 2rem);
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 57.6px */
    letter-spacing: 1.28px;
    margin: 0;
}
p{
    color: #232323;
    font-family: var(--font-japanese);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 28.8px */
    letter-spacing: 0.64px;
    text-align: left;
    margin: 0;
}
._bold{
    font-weight: 700;
}
._inner{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

._title{
    color: #FFFDF2;
    font-family: var(--font-japanese);
    /* 32px */
    font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 57.6px */
    letter-spacing: 1.28px;
    margin-bottom: 28px;
}

._title span{
    text-align: center;
    font-family: var(--font-english);
    /* 104px */
    font-size: clamp(2rem, 0.908rem + 4.66vw, 6.5rem);
    font-style: normal;
    font-weight: 700;
}

._flex{
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 3%;
}
._reverse{
    flex-direction: row-reverse;
}
._flex img{
    width: 47%;
}
._flex-text{
    width: 50%;
}

._flex-auto{
    display: flex;
    justify-content: space-between;
    align-items: left;
    gap: 3%;
}
._flex-auto._reverse{
    align-items: right;
} 
._flex-auto img{
    width: 47%;
    margin-left: calc(50% - 50vw);
    object-fit: cover;
    flex: auto;
}
._flex-auto._reverse img{
    margin-right: calc(50% - 50vw);
    object-fit: cover;
    margin-left: 0;
}
._flex-auto .menu-item-text{
    width: 50%;
}
._flex-auto._reverse .menu-item-text{
    align-items: right;
}
._flex-auto._reverse .menu-item-text p{
    width: fit-content;
    margin-left: auto;
}
._flex-auto._reverse .menu-item-text ._title{
    text-align: right;
}
._btn{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #232323;
    padding: 4px 0;
    border-radius: 32px;
    color: #515151;
    text-decoration: none;
}
._btn p{
    text-decoration: none;
    color: #FFFDF2 !important;
    font-family: var(--font-harenosora);
    font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 57.6px */
    letter-spacing: 1.28px;
}
/* mv */
.mv{
    position: relative;
    background-image: url(../img/mv-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
}
.mv-header{
    width: 100%;
    height: 160px;
    z-index: 1;
    background-color:#000 ;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mv-header img{
    width: 30%;
    max-width: 200px;
    margin: 0 auto;
    display: block;
}
.mv-inner{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mv-inner img{
    width: 50%;
    margin: 0 auto;
    display: block;
}
.mv-inner h1{
    color:#FFFDF2;
    text-align: center;
    -webkit-text-stroke-width: 2.31px;
    -webkit-text-stroke-color: var(--, #FFFDF2);
    font-family: var(--font-harenosora);
    font-size: clamp(2.5rem, 1.772rem + 3.11vw, 5.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 180%; /* 160.112px */
    letter-spacing: 3.558px;
}
.mv-inner span{
    color: #FFFDF2;
    text-align: center;
    display: block;
    -webkit-text-stroke-width: 1.38px;
    -webkit-text-stroke-color: #FFFDF2;
    font-family: HarenosoraMincho;
    font-size: clamp(1.5rem, 1.075rem + 1.81vw, 3.25rem);
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 95.607px */
    letter-spacing: 3.718px;
}



/* about */
.about{
    position: relative;
    background-image: url(../img/about-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    padding: 140px 0;
}
.about::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(180deg, #121212 0%, rgba(18, 18, 18, 0.00) 100%);
}
.about-title span{
    color: #EFBB4C;
    text-align: center;
    font-family: "Learning Curve";
    font-size: clamp(2rem, 1.697rem + 1.29vw, 3.25rem);
    font-style: normal;
    font-weight: 700;
}
.about p{
    color: #fff;
    text-align: center;
}


/* spice */
.spice{
    background: #121212;
    padding: 140px 0 320px;
}
.spice-img{
    max-width: 1080px;
    margin: 0 auto;
}
.spice-list{
    display: flex;
    justify-content: space-between;
    align-items: start;
}


/* res */
.restaurant{
    position: relative;
}
.restaurant::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -80%);
    width: 20%;
    max-width: 300px;
    min-width: 200px;
    aspect-ratio: 372/310;
    background-image: url(../img/res-dec.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
}
.res-info{
    position: relative;
    background-image: url(../img/res-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    padding: 98px 10% 225px;
    box-sizing: border-box;
}
.restaurant .res-info::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url(../img/res-bottom.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.res-info p{
    color: #fff;
    text-align: center;
}
.res-info-time{
    margin:20px 0 ;
}
.res-btn{
    background: none;
    border: 2px solid #fff;
    color: #fff;
    max-width: 700px;
    margin: 40px auto 0;
}
.res-fee{
    background: #FFFDF2;
    padding:100px 0 140px ;
}
.res-fee-inner{
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 3%;
}
.res-fee img{
    width: 50%;
}
.res-fee-text{
    width: 50%;
}
.res-fee-list{
    margin: 26px 0;
}
.res-fee-flex{
    display: flex;
    justify-content: right;
    align-items: start;
    background-color:#F4F0DD ;
}
.res-fee-flex:nth-of-type(even){
    background-color: #D6D0AD;
}
.res-fee-flex p{
    width: 33%;
}

/* menu */
.menu{
    background: #121212;
    padding: 360px 0 0;
}
.menu p{
    color: #FFFDF2;
}
.menu-list{
    display: flex;
}
.menu-item{
    margin-bottom: 120px;
}
.menu-item:last-of-type{
    margin-bottom: 0;
}
/* week */
.week{
    background: #121212;
    padding: 230px 0 260px;
}

.week-title{
    color: #232323;
}
.week h3{
    color: #232323 ;
}
.week p{
    color: #232323 ;
}
._inner-bg{
    border-radius: 31px;
    background: rgba(255, 253, 242, 0.78);
    padding: 120px 80px;
    box-sizing: border-box;
}
.week-inner:first-of-type{
    margin-bottom: 260px;
}
.week-inner > p{
    text-align: center;
}
.week-time{
    margin: 20px 0;
}
.week-time p{
    text-align: center;
}
.week-fee{
    margin: 0 0  40px;
}
.week-fee p{
    text-align: center;
}
.week-fee-item{
    width: 40%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 3%;
    margin: 0 auto;
    min-width: 300px;
}
.week-menu-list{
    display: flex;
    flex-direction: column;
    gap: 78px;
}
.week-menu-item{}
.week-menu-attention{
    margin-bottom: 260px;
}
.week-offer > h3,
.week-offer > p{
    text-align: center;
}
.week-offer-flex{
    margin: 52px 0 80px;
}
.collabo-title{
    margin-top: 150px;
    margin-bottom: 80px;
}
.collabo-title p{
    text-align: center;
}
.week2-inner > p{
    text-align: center;
}
.week2-inner .week-menu-list{
    margin-bottom: 80px;
}

.cafe .res-info{
    position: relative;
}
.cafe .res-info::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -80%);
    width: 20%;
    max-width: 300px;
    min-width: 200px;
    aspect-ratio: 372/310;
    background-image: url(../img/res-dec.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
}
.cafe{
    background-color: #232323;
}
.cafe-menu-list{
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 80px 0;
    background-color: #FFFDF2;
    margin-bottom: 80px;
}
.cafe-menu-list:last-of-type{
    margin-bottom: 0;
}
.cafe-flex {
    width: 90%;
    margin: 0 auto;
    max-width: 1500px;
}
.cafe-flex-img{
    width: 50%;
}
.cafe-flex-img img{
    width: 80%;
    margin: 0 auto;
    display: block;
}
.cafe-flex-text{
    width: 60%;
}
.cafe-flex-text p{
    font-size: 18px;
}
.cafe-flex-text span{
    color: #EFBB4C;
    font-family: var(--font-learning-curve);
}
.cafe-btn{
    width: 50%;
    margin-top: 120px;
}

footer{
    background-color: #232323;
    padding: 120px 0 0;
}
footer ._inner-bg{
    background-color: #fff;
    padding-top :60px ;
    padding-bottom: 60px;
    margin-bottom: 120px;
}
footer h2{
    margin-bottom: 30px;
}
.copyright{
    background: #fff;
    font-size: 12px;
    text-align: center;
}

.top-btn{
    position: fixed;
    bottom: 32px;
    right: 5%;
    width: 130px;
    aspect-ratio: 1/1;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.top-btn.show{
    opacity: 1;
    visibility: visible;
} 
.sp-only{
    display: none;
}
@media screen and (min-width: 1200px) {
    .menu-item .menu-item-text{
        position: relative;
    }
    .menu-item .menu-item-text::after{
        content: "";
        position: absolute;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .menu-item:nth-of-type(1) .menu-item-text::after{
        bottom: 0;
        right: 0;
        background-image: url(../img/dec1.webp);
        width: 30%;
        aspect-ratio: 299/257;
    }
    .menu-item:nth-of-type(2) .menu-item-text::after{
        top: 0;
        left: 0;
        background-image: url(../img/dec2.webp);
        width: 25%;
        aspect-ratio: 381  /266;
    }
    .menu-item:nth-of-type(3) .menu-item-text::after{
        bottom: 50%;
        right: 0;
        background-image: url(../img/dec3.webp);
        width: 25%;
        aspect-ratio: 299/257;
    }
    .week-inner{
        position: relative;
    }
    .week-inner::before{
        content: "";
        position: absolute;
        top: 0;
        left: 20%;
        transform: translate(-50%, -40%);
        width: 20%;
        aspect-ratio: 406/558;
        background-image: url(../img/dec4.webp);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 2;
    }
    .week2-inner{
        position: relative;
    }
    .week2-inner::before{
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(0, -40%);
        width: 20%;
        aspect-ratio: 406/558;
        background-image: url(../img/dec5.webp);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 2;
    }
}
@media screen and (max-width: 900px) {
    .top-btn{
        width: 100px;
        bottom: 20px;
        right: 2%;
    }
}
@media (max-width: 768px) {
    .sp-only{
        display: block;
    }
    .pc-only{
        display: none;
    }

    ._flex{
        flex-direction: column;
    }
    ._flex img{
        width: 100%;
    }
    ._flex-text{
        width: 100%;
    }
    ._flex-auto{
        flex-direction: column;
    }
    ._flex-auto img{
        width: 100%;
    }
    ._flex-auto .menu-item-text{
        width: 100%;
    }
    ._flex-auto._reverse .menu-item-text ._title{
        text-align: left;
    }
    ._flex-auto img{
        margin-left: 0;
    }

    .mv-header{
        height: 100px;
    }

    .about{
        padding-bottom: 80px;
    }

    .spice{
        padding-top: 80px;
    }

    .res-fee-inner{
        flex-direction: column;
    }
    .res-fee-inner img{
        width: 100%;
    }
    .res-fee-inner .res-fee-text{
        width: 100%;
    }
    .spice-list-item p{
        color: #fff;
    }
    .spice-list-item span{
        color: #fff;
    }
    .spice-list-item:last-of-type img{
        display: block;
        width: 80%;
    }

    ._inner-bg{
        padding: 60px 16px;
    }
    .week-menu-attention{
        margin-bottom: 80px;
    }
    .res-info{
        padding-bottom: 100px;
    }

    .cafe-flex-img{
        width: 100%;
        margin-top: 8px;
    }
    .cafe-btn{
        width: 80%;
        margin: 0 auto;
    }
    ._btn p{
        text-align: center;
    }
    .restaurant .res-info::before {
        height: 80px;
    }

    .week-inner:first-of-type{
        margin-bottom: 80px;
    }
    .menu{
        padding-top: 120px;
    }
    .week{
        padding-top: 120px;
    }


}