@charset "utf-8";
/* ここからリセットCSS */
*,
::before,
::after {
    padding: 0;
    margin: 0 ;
    box-sizing: border-box;
}
:root{
    --width:1200px
}
body{
    max-width: var(--width);
}
ul,
ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

body {
    /* font-family: sans-serif;
    font-size: 16px; */
    color: #000;
    line-height: 2;
    max-width: 100%;
}

/* img {
    max-width: 1200px;
} */

nav{
    font-family: "Julius Sans One", sans-serif;
    
    /* font-weight: 400;
    font-style: normal; */
  }
  
/* ここまでリセットCSS */
/* ここからヘッダー */

header{
    height: 100vh;
    background-image: url(../img/first_view.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
}
header nav ul{
    display: flex;
    justify-content: end;
    gap: 40px;
    /* background-color: #ffffff;
    border-radius: 50px;
    padding: 5px; */
    /* text-shadow: #737373; */
    

}
.header-nav{
    color: #fff;
    position: fixed;
    top: 10px;
    right: 10px;
    /* box-shadow: 10px 10px 10px #454545; */
    /* backdrop-filter: blur(30px); */
}
.header-nav.on{
    color: #3a1313;
}

header div img{
    width: 230px;
}
header img{
    padding-left:2% ;
}
header nav ul li{
    font-size: 18px;
    text-shadow: #737373;
}

header img{
    filter: drop-shadow(7px 10px 5px #b4a484);
}
header h1{
    width: 100%;
    text-align: center;
    font-size: 60px;
    font-family: "Julius Sans One", sans-serif;
    font-weight: bold;
    /* font-weight: 400;
    font-style: normal; */
}
.cake_nav{
    color: #fff;
    font-family: "Julius Sans One", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding-left: 3%;
    padding-bottom: 2%;
    /* line-height: 4; */
}
.cake_nav ul{
flex-direction: column;
}
/* ここまでヘッダー */






/* ここからケーキ紹介 */
h2{
    font-family: "Julius Sans One", sans-serif;
    /* font-weight: 400;
    font-style: normal; */
    padding-left: 7%;
}
.about_cake{
    padding-top: 3%;
    padding-bottom: 3%;
    position: relative;
}
.about_cake p{
    text-align: center;
    line-height: 3;
    font-size: 14px;
    margin-bottom: 1%;
}
.about_cake img{
    width: 250px;
    position: absolute;
    right: 15%;
    top: 35%;
}
/* .about_cake{
    background-image: url(../img/cake_bg.png);
background-size: contain;
background-repeat: no-repeat;
} */
/* ここまでケーキ紹介 */

/* ここからcakemenu */
h3{
    font-family: "Julius Sans One", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.cakemenu,
.pudding,
.option{
    padding-top: 2%;
    padding-bottom: 2%;
}
.mousse,
.bg_cutcake{
    padding-top: 2%;
}
.cakemenu h3,
.cutcake_memo{
    padding-left: 7%;
}
.cakemenu_inside{
    padding: 1% 10%;
}
.mousse_inside{
    padding: 1% 10%;
}
.pudding_inside{
    padding: 1% 10%;
}
.cakemenu img{
    width: 180px;
}
.cutcake{
    display: flex;
    justify-content: space-around;
    padding-bottom: 2%;
}
.cutcake_2{
    display: flex;
    justify-content: space-around;

}
.mousse_inside{
    display: flex;
    justify-content: space-around;

}
.pudding_inside{
    display: flex;
    justify-content: space-around;

}
.cakemenu_inside h4,p:not(.cutcake_memo){
    text-align: center;
}
.mousse_inside h4,p:not(.cutcake_memo){
    text-align: center;
}
.pudding_inside h4,p:not(.cutcake_memo){
    text-align: center;
}
.bg_cutcake{
    background-color: rgb(251, 250, 240);
}
.pudding{
    background-color: rgb(251, 250, 240);

}
.cakemenu section img,
.cakemenu h4{
    transition: transform 0.5s ease;

}
.cakemenu img:hover{
    opacity:0.6;
	transition:0.3s;
}
.cakemenu h4:hover{
    transform: scale(1.2)
}
/* ここまでcakemenu */

/* ここからoption */
.option img{
    width: 450px;
}
.option_inside{
    display: flex;
    justify-content: center;
    padding-bottom: 2%;
}
.option_text{
    font-size: 14px;
}
.option h3{
    padding-left: 7%;
}

.cutcake p{
    font-size: 12px;
}
.cutcake_2 p{
    font-size: 12px;
}
.mousse_inside p{
    font-size: 12px;
}
.pudding_inside p{
    font-size: 12px;
}




.button a{
     text-align: center;
     padding-top: 1%;
     padding-bottom: 2%;
     width: 1.25em;
     height: 1.25em;
     margin-left: 8px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853ZM18.827 6.1701C17.3279 4.66794 14.9076 4.60701 13.337 6.01687L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L11.9999 18.6543L19.0201 11.6232C20.3935 10.0467 20.319 7.66525 18.827 6.1701Z' fill='%23c28851'%3E%3C/path%3E%3C/svg%3E");
     background-repeat: no-repeat;
     content: '';

        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 250px;
        margin: 0 auto;
        padding: .9em 2em;
        border: 1px solid #8B867D;
        border-radius: 5px;
        background-color: #E6E3DF;
        color: #8B867D;
        font-size: 1em;
    }
    
    .button a:hover {
        background-color: #8B867D;
        color: #E6E3DF;
        font-weight: bold;
    }
    
    /* .button a::after {
        width: 1.25em;
        height: 1.25em;
        margin-left: 8px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853ZM18.827 6.1701C17.3279 4.66794 14.9076 4.60701 13.337 6.01687L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L11.9999 18.6543L19.0201 11.6232C20.3935 10.0467 20.319 7.66525 18.827 6.1701Z' fill='%23c28851'%3E%3C/path%3E%3C/svg%3E");
        content: '';
    } */

/* ここまでoption */







/* ここからフッター */
footer{
    width: 100%;
    /* height: 70vh; */
    background-image: url(../img/b.png);
    object-fit: cover;
    background-size: cover;
display: flex;
justify-content: flex-end;
text-align: right;
background-attachment: fixed;
padding-right: 2%;
padding-top: 1%;
font-size: 14px;

}
footer ul li .insta{
    width: 40px;
    height: 40px;
}
footer ul li .note{
    width: 30px;
    height: 30px;
}
.footer section {
    display: flex;
}
.footer_logo { 
padding-right: 24%;
}
.copyright{
    display: flex;
    justify-content: end;
    padding-top: 6%;
}
.sns_icon ul{
        display: flex;
    justify-content: end;
}
.footer_side{
    padding-right: 6%;
padding-top: 3%;
line-height: 3;

}
.footer_aboutshop{
    padding-right: 3%;
padding-top: 2%;
line-height: 3;

}

footer nav{
    flex-grow: 1;
    text-align: left;
    padding-left: 4%;
}
footer nav ul li{
   line-height: 5;
         transition: transform 0.5s ease;

}
.footer_logo img{
    width: 400px;
}
footer nav li:hover{
    font-weight: bold;
    transform: scale(1.2)
}

.footer_side ul li{
      transition: transform 0.5s ease;

}
.footer_side ul li:hover{
        font-weight: bold;
    transform: scale(1.2)
}
.sns_icon ul li{
      transition: transform 0.5s ease;
}
.sns_icon ul li:hover{
        transform: scale(1.2)
}