@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;
    position: relative;
}
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 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;


}
.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_cafe{
    padding-top: 3%;
    padding-bottom: 3%;
    position: relative;
}
.about_cafe p{
    line-height: 3;
    text-align: center;
    font-size: 14px;
    margin-bottom: 1%;

}
h3{
    padding-left: 7%;
}
.about_cafe .coffee_panda{
    width: 400px;
    position: absolute;
    left: 15%;
    top: 59%;
}
.about_cafe .cupcake{
    width: 230px;
    position: absolute;
    right: 21%;
    top: 45%;
}
/* ここまでカフェ紹介 */

/* ここからcafemenu */
.cafe_menu1{
    margin: 0 auto;
    background-image: url(../img/base.jpg);
    padding-top: 3%;
    padding-bottom: 3%;
}
h3{
    font-family: "Julius Sans One", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.cafe_menu img{
    width: 170px;
    height: 270px;
} 
.momotarou{
    display: flex;
    justify-content: center;
    padding-bottom: 2%;
}
.momotarou_photo{
    text-align: center;
    
}
.momotarou_text3{
    font-size: 12px;
}
.cafemenu_sub{
    width: 60%;
    margin: 0 auto;
    display: flex;
    padding-bottom: 2%;
    /* justify-content: space-around; */
}
.afogard,
.bananalatte,
.melonsoda{
    padding-right: 10%;
}
.cafemenu_sub img{
    width: 180px;
    height: 200px;
    border-radius: 50%;
}
.name{
    font-size: 14px;
}
.instagram_button p{
    text-align: center;
}
.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;
   }
.instagram_button p{
    padding-bottom: 1%;
}
.momotarou_text{
    padding-left: 2%;
    padding-top: 2%;
}
.price{
    font-size: 12px;
}
.momotarou_text1{
    font-size: 14px;
    font-weight: bold;
}
.momotarou_text h4{
    padding-bottom: 2%;
}
.momotarou_text2{
    padding-bottom: 2%;
}
/* ここまでcafemenu */



.coffee_tea,
.softdrink_other{
    display: flex;
}
/* ここからordermenu */

.ordermenu_img img{
    width: 250px;
    height: 250px;
}
.order_menu{
    background-image: url(../img/base.jpg);
    padding-top: 3%;
    padding-bottom: 3%;
}
.tel_button{
    text-align: center;
}
.other_memo img{
    height: 375px;
}

.other_memo_photo{
    text-align: center;
}
.other_memo_photo p{
    padding-bottom: 3%;
}
.order_menu p{
    text-align: center;
    padding-bottom: 2%;
}
.order_text{
line-height: 2.5;
    padding-top: 2%;
    padding-bottom: 2%;
}
.ordermenu_img{
    text-align: center;
}
.other_memo{
    background-image: url(../img/base.jpg);
    padding-top: 3%;
    padding-bottom: 3%;
}

.tel_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;
   }
   
   .tel_button a:hover {
       background-color: #8B867D;
       color: #E6E3DF;
       font-weight: bold;
   }
.cookie_base{
    padding-left: 1%;
    padding-right: 1%;
}
/* ここまでordermenu */

/* ここからフッター */
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)
}