/* =======================================
   RESET
======================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Noto Serif JP',serif;

    background:#faf8f5;

    color:#3d342e;

    line-height:1.8;

    font-size:16px;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}


/* =======================================
Container
======================================= */

.container{

    width:min(1100px,90%);

    margin:auto;

}


/* =======================================
Header
======================================= */

.header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(10px);

    box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo{

    font-family:'Cormorant Garamond',serif;

    font-size:28px;

    color:#b58c4b;

    letter-spacing:1px;

}

.nav ul{

    display:flex;

    gap:35px;

}

.nav a{

    transition:.3s;

    font-size:15px;

}

.nav a:hover{

    color:#79c7be;

}


/* =======================================
Hero
======================================= */

.hero{

    position:relative;

    height:100vh;

    overflow:hidden;

}

.hero-image{

    width:100%;

    height:100%;

    object-fit:cover;

    animation:zoomHero 18s linear infinite alternate;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.25),

        rgba(0,0,0,.45)

    );

}

.hero-content{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

    color:#fff;

    width:min(800px,90%);

}

.sub-title{

    font-family:'Cormorant Garamond',serif;

    font-size:28px;

    letter-spacing:4px;

    color:#f3d89d;

}

.hero h1{

    margin-top:20px;

    font-size:46px;

    line-height:1.35;

    font-weight:700;

}

.hero p{

    margin-top:25px;

    font-size:18px;

    opacity:.95;

}


/* =======================================
Buttons
======================================= */

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}

.btn{

    padding:16px 42px;

    border-radius:50px;

    transition:.35s;

    font-weight:bold;

    letter-spacing:.05em;

}

.reserve{

    background:#79c7be;

    color:#fff;

}

.phone{

    background:#ffffff;

    color:#3d342e;

}

.btn:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 25px rgba(0,0,0,.18);

}


/* =======================================
Section
======================================= */

section{

    padding:110px 0;

}

.section-heading{

    text-align:center;

    margin-bottom:60px;

}

.section-heading span{

    display:block;

    color:#b58c4b;

    letter-spacing:3px;

    font-family:'Cormorant Garamond',serif;

    font-size:22px;

}

.section-heading h2{

    font-size:34px;

    margin-top:10px;

}


/* =======================================
Animation
======================================= */

@keyframes zoomHero{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.12);

    }

}

/* =======================================
   Concept
======================================= */

.concept{
    background:#ffffff;
}

.concept-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

.concept-image img{
    border-radius:20px;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.section-subtitle{
    display:block;
    color:#b58c4b;
    letter-spacing:3px;
    font-family:'Cormorant Garamond',serif;
    font-size:22px;
    margin-bottom:15px;
}

.concept-text h2{
    font-size:36px;
    line-height:1.4;
    margin-bottom:25px;
}

.concept-text p{
    margin-bottom:18px;
    color:#555;
    font-size:17px;
}


/* =======================================
   Features
======================================= */

.features{
    background:#faf8f5;
}

.feature-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.feature-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.feature-card img{

    height:260px;

    object-fit:cover;

}

.feature-card h3{

    padding:30px 30px 10px;

    font-size:24px;

    color:#3d342e;

}

.feature-card p{

    padding:0 30px 35px;

    color:#666;

}


/* =======================================
   Lineup
======================================= */

.lineup{

    background:#ffffff;

}




.cake-card:hover{

    transform:translateY(-10px);

}




.cake-info h3{

    font-size:28px;

    margin-bottom:15px;

}

.size{

    color:#666;

    margin-bottom:20px;

}

.price{

    font-size:22px;

    color:#b58c4b;

    font-weight:bold;

}

.caption{

    text-align:center;

    margin-top:35px;

    color:#777;

    font-size:15px;

}

/* ===========================
Lineup
=========================== */

.lineup{

    background:#fff;

}

.lineup-photo{

    max-width:700px;

    margin:0 auto 50px;

}

.lineup-photo img{

    border-radius:18px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.price-table{

    max-width:700px;

    margin:auto;

    border-top:1px solid #ddd;

}

.price-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:35px 10px;

    border-bottom:1px solid #ddd;

}

.price-row h3{

    font-size:28px;

    margin-bottom:8px;

}

.price-row p{

    color:#777;

}

.price{

    font-size:34px;

    color:#b58c4b;

    font-weight:bold;

    white-space:nowrap;

}

.price span{

    font-size:18px;

}

.caption{

    margin-top:30px;

    text-align:center;

    color:#777;

}


/* =======================================
   Flow（ご注文方法）
======================================= */

.flow{
    background:#faf8f5;
}

.flow-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.flow-item{
    background:#fff;
    padding:50px 35px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.3s;
}

.flow-item:hover{
    transform:translateY(-8px);
}

.number{
    width:70px;
    height:70px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#b58c4b;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    font-weight:bold;
}

.flow-item h3{
    margin-bottom:15px;
    font-size:26px;
}

.flow-item p{
    color:#666;
}


/* =======================================
   Notice
======================================= */

.notice{
    background:#ffffff;
}

.notice ul{
    max-width:850px;
    margin:auto;
}

.notice li{
    background:#faf8f5;
    padding:18px 25px;
    margin-bottom:15px;
    border-left:5px solid #79c7be;
    border-radius:8px;
    font-size:16px;
}


/* =======================================
   Shop
======================================= */

.shop{
    background:#faf8f5;
}

.shop-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

.shop-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.shop-card img{
    height:280px;
    object-fit:cover;
}

.shop-card h3{
    padding:30px 30px 15px;
    font-size:28px;
}

.shop-card p{
    padding:0 30px 15px;
    color:#555;
}

.shop-card a{
    display:inline-block;
    margin:10px 30px 35px;
    color:#b58c4b;
    font-weight:bold;
}

.shop-card a:hover{
    color:#79c7be;
}


/* =======================================
   Reserve
======================================= */

.reserve{
    background:#3d342e;
    color:#fff;
    text-align:center;
}

.reserve h2{
    font-size:42px;
    margin-bottom:20px;
}

.reserve p{
    max-width:650px;
    margin:0 auto 45px;
    line-height:2;
}

.reserve-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.reserve-btn{
    background:#79c7be;
    color:#fff;
}

.phone-btn{
    background:#b58c4b;
    color:#fff;
}


/* =======================================
   Footer
======================================= */

footer{
    background:#2d2622;
    color:#fff;
    text-align:center;
    padding:40px 20px;
}

footer p{
    margin-bottom:10px;
    opacity:.9;
}


/* =======================================
   Fixed Menu
======================================= */

.fixed-menu{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    display:flex;
    z-index:999;
}

.fixed-menu a{
    flex:1;
    text-align:center;
    padding:18px 10px;
    color:#fff;
    font-weight:bold;
    font-size:18px;
}

.fixed-menu a:first-child{
    background:#b58c4b;
}

.fixed-menu a:last-child{
    background:#79c7be;
}

.fixed-menu a:hover{
    opacity:.9;
}

/* =======================================
   Responsive
======================================= */

@media (max-width:1000px){

    .concept-grid,
    .feature-grid,
    .lineup-grid,
    .flow-grid,
    .shop-grid{

        grid-template-columns:1fr;

    }

    .concept-text{

        text-align:center;

    }

}



/* =======================================
   Tablet
======================================= */

@media (max-width:768px){

    .header .container{

        flex-direction:column;
        gap:15px;

    }

    .nav ul{

        gap:18px;
        flex-wrap:wrap;
        justify-content:center;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        font-size:16px;

    }

    .section-heading h2{

        font-size:34px;

    }

    .concept-text h2{

        font-size:34px;

    }

    .cake-card img{

        height:320px;

    }

}



/* =======================================
   Smartphone
======================================= */

@media (max-width:576px){

    body{

        font-size:15px;

    }

    section{

        padding:70px 0;

    }

    .logo{

        font-size:22px;

        text-align:center;

    }

    .nav{

        display:none;

    }

    .hero{

        height:90vh;

    }

    .hero h1{

        font-size:30px;

        line-height:1.5;

    }

    .sub-title{

        font-size:20px;

    }

    .hero p{

        font-size:15px;

        margin-top:18px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn{

        width:100%;

        text-align:center;

    }

    .section-heading h2{

        font-size:28px;

    }

    .feature-card h3{

        font-size:22px;

    }

    .cake-info h3{

        font-size:26px;

    }

    .price{

        font-size:28px;

    }

    .flow-item{

        padding:35px 20px;

    }

    .shop-card img{

        height:220px;

    }

    .reserve h2{

        font-size:30px;

    }

    .fixed-menu a{

        font-size:15px;

        padding:14px 5px;

    }

}



/* =======================================
   Scroll Animation
======================================= */

.fade{

    opacity:0;

    transform:translateY(50px);

    transition:1s;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}



/* =======================================
   Hover Effects
======================================= */

img{

    transition:.5s;

}

.feature-card:hover img,
.cake-card:hover img,
.shop-card:hover img{

    transform:scale(1.05);

}



/* =======================================
   Selection Color
======================================= */

::selection{

    background:#79c7be;
    color:#fff;

}



/* =======================================
   Scroll Bar
======================================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f3f3f3;

}

::-webkit-scrollbar-thumb{

    background:#b58c4b;
    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#8c6a34;

}