@charset "utf-8";



/*PC*/
@media print, screen and (min-width: 769px) {

/* header
--------------------------------------------*/
header {
position: fixed;
top: 0;
background: #eceae0;
padding: 20px 0;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
transition: 0.5s;
z-index: 50;
}

header .header .logo_Hed { max-width: 300px; width: 25%; display: block; }
header .header .logo_Hed_w { display: none; }

header .hed_wrap .menu ul li a { color: #2c2321; }

header .hed_wrap .hed_button_w { display: none; }
header .hed_wrap .hed_button { display: flex; flex-wrap: wrap; align-items: center; }
header .hed_wrap .hed_button .x { width: 20px; margin-right: 25px; }
header .hed_wrap .hed_button .insta { width: 20px; }

header .insta_banner { display: none; }



/* cafe
--------------------------------------------*/
.cafe { position: relative; background: #7f474b; }
.cafe .w1200 { position: relative; padding: 0px 0 100px; }
.cafe .illust { position: absolute; left: 0; bottom: 0; width: 100%; }



.title { position: relative; padding: 150px 10% 250px; background: #eceae0; color: #2c2321; }
.title .txtbox h2 { font-size: 3rem; color: #7f474b; }
.title .txtbox h2 span { display: block; font-size: 2rem; }
.title .txtbox .tit { width: 400px; margin-top: 20px; }



.read { text-align: center; color: #eeeee9; }
.read h3 { font-size: 3.6rem; margin-bottom: 20px; }
.read p { font-size: 1.8rem; margin-bottom: 50px; }



.mokuji { text-align: center; color: #eeeee9; }
.mokuji p { font-size: 2.6rem; margin-bottom: 40px; }

.mokuji ul { display: flex; flex-wrap: wrap; justify-content: space-around; }
.mokuji ul li { width: 23%; }
.mokuji ul li a {
position: relative;
display: block;
padding: 20px;
background: #eeeeea;
border-radius: 15px 50px 50px 0;
font-weight: 600;
text-align: center;
color: #c03f28;
}


#morning { background: #eeeee9; padding: 100px 0 0; color: #2c2321; }
#morning .tit { width: 60%; margin: 0 auto; }
#morning p.time { font-size: 2.6rem; margin-bottom: 30px; text-align: center; }

#morning .txtbox { margin: 40px 0 0; text-align: center; }
#morning .txtbox h3 { font-size: 3rem; margin-bottom: 20px; }
#morning .txtbox h3 span { display: block; font-size: 1.6rem; padding-bottom: 5px; }

#morning .menu_img { width: 70%; margin: 0 auto; }

#morning ul.menu_ul {
display: flex;
flex-wrap: wrap;
justify-content:center;
}
#morning ul.menu_ul li { width: 32%;margin: 0 3%;}
#morning ul.menu_ul li h4 { font-size: 2rem; margin-bottom: 10px; text-align: center; }
#morning ul.menu_ul li p { font-size: 1.6rem; color: #7f474b; text-align: center;}

#morning .menu .btn a {
position: relative;
display: block;
width: 430px;
margin: 80px auto 0;
padding: 25px 0;
background: #7f474b;
border-radius: 15px 50px 50px 0;
font-weight: 600;
text-align: center;
color: #eeeeea;
}
#morning .menu .btn span.img { width: 40px; position: absolute; top: 20%; right: 35px; }




#lunch { background: #eeeee9; padding: 100px 0 0; color: #2c2321; }
#lunch p.time { font-size: 2.6rem; margin-bottom: 30px; text-align: center; }
#lunch .tit { width: 60%; margin: 0 auto; }
#lunch .flex_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-top: 40px;
}
#lunch .lunch_img { width: 55%; }
#lunch .set { width: 40%; }
#lunch .set p { font-size: 2rem; margin-bottom: 30px; text-align: center; }

#lunch .l-inner { overflow: hidden; }
#lunch .swiper { overflow: visible; padding: 0 0px 70px; }
#lunch .swiper-slide { width: 30rem; }
#lunch .swiper-slide h4 { font-size: 2rem; margin-bottom: 20px; }
#lunch .swiper-slide p { font-size: 1.4rem; color: #7f474b; }

#lunch .swiper-controller .swiper-pagination { bottom: 0; }
#lunch .swiper-controller .swiper-button-prev,
#lunch .swiper-controller .swiper-button-next { color: #7f474b; bottom: 0%; top: auto; }
#lunch .swiper-controller .swiper-button-prev { right: 120px; left: auto; }

#lunch ul.lunch_ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 80px;
}
#lunch ul.lunch_ul li { width: 40%; margin: 0 2%; }
#lunch ul.lunch_ul li p { font-size: 1.6rem; margin-top: 10px; }
#lunch ul.lunch_ul li p span { display: block; font-size: 1.4rem; }

#lunch .kids { background: #eeeee9; padding: 100px 0 0; color: #2c2321; }
#lunch .kids .tit { width: 100%; display: flex; align-items: end; }
#lunch .kids .tit img { width: 35%; margin: 0; }
#lunch .kids .tit span { font-size: 2.2rem; padding-left: 20px; }
#lunch .kids ul {
display: flex;
flex-wrap: wrap;
justify-content:space-between;
margin: 40px 0 20px;
}
#lunch .kids ul li { width: 30%;}
#lunch .kids ul li .img { width: 80%; margin: 0 auto; }
#lunch .kids ul li p { font-size: 1.8rem; color: #7f474b; }

#lunch .menu .btn a {
position: relative;
display: block;
width: 430px;
margin: 80px auto 0;
padding: 25px 0;
background: #7f474b;
border-radius: 15px 50px 50px 0;
font-weight: 600;
text-align: center;
color: #eeeeea;
}
#lunch .menu .btn span.img { width: 40px; position: absolute; top: 20%; right: 35px; }



#grand { background: #eeeee9; padding: 100px 0 0; color: #2c2321; }
#grand .tit { width: 60%; margin: 0 auto; }
#grand .txtbox { margin: 40px 0 0; text-align: center; }
#grand .txtbox h3 { font-size: 3rem; margin-bottom: 20px; }
#grand .txtbox h3 span { display: block; font-size: 1.6rem; padding-bottom: 5px; }

#grand .menu_img { width: 70%; margin: 0 auto; }

#grand ul.menu_ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#grand ul.menu_ul li { width: 30%; }
#grand ul.menu_ul li h4 { font-size: 2rem; margin-bottom: 20px; text-align: center; }
#grand ul.menu_ul li p { font-size: 1.4rem; color: #7f474b; }

#grand .menu .btn a {
position: relative;
display: block;
width: 430px;
margin: 80px auto 0;
padding: 25px 0;
background: #7f474b;
border-radius: 15px 50px 50px 0;
font-weight: 600;
text-align: center;
color: #eeeeea;
}
#grand .menu .btn span.img { width: 40px; position: absolute; top: 20%; right: 35px; }



#drink { background: #eeeee9; padding: 100px 0 0; color: #2c2321; }
#drink .tit { width: 60%; margin: 0 auto; }
#drink .txtbox { margin: 40px 0 0; text-align: center; }
#drink .txtbox h3 { width: 45%; margin: 0 auto 40px; }

#drink .menu_img { width: 70%; margin: 0 auto; }

#drink ul.drink_ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#drink ul.drink_ul li { width: 30%; }
#drink ul.drink_ul li h4 { font-size: 2rem; margin-bottom: 20px; text-align: center; }
#drink ul.drink_ul li p { font-size: 1.4rem; color: #7f474b; }

#drink .menu .btn a {
position: relative;
display: block;
width: 430px;
margin: 80px auto 0;
padding: 25px 0;
background: #7f474b;
border-radius: 15px 50px 50px 0;
font-weight: 600;
text-align: center;
color: #eeeeea;
}
#drink .menu .btn span.img { width: 40px; position: absolute; top: 20%; right: 35px; }



}













/*sp*/
@media only screen and (max-width: 768px) {

/* header
--------------------------------------------*/
header {
position: fixed;
top: 0;
background: #eceae0;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
transition: 0.5s;
z-index: 50;
}

header .header .logo_Hed_w { display: none; }
header .header .logo_Hed { width: 220px; position: absolute; left: 5%; display: block; z-index: 200; }

header .hed_wrap ul.hed_button_w { display: none; }
header .hed_wrap ul.hed_button { display: flex; flex-wrap: wrap; justify-content: end; align-items: end; position: relative; z-index: 100; }
header .hed_wrap ul.hed_button .x { width: 20px; margin-right: 15px; }
header .hed_wrap ul.hed_button .insta { width: 20px; margin-right: 15px; }

header .insta_banner { display: none; }

header .spbutton .menu-trigger span { background-color: #2c2321; }
header .spbutton .menu-trigger.active span { background-color: #eeeeea; }



/* cafe
--------------------------------------------*/
.cafe { position: relative; background: #7f474b; }
.cafe .w1200 { position: relative; padding: 0px 0 50px; }
.cafe .illust { position: absolute; left: 0; bottom: 0; width: 100%; }



.title { position: relative; padding: 100px 5% 120px; background: #eceae0; color: #2c2321; }
.title .txtbox h2 { font-size: 2rem; color: #7f474b; }
.title .txtbox h2 span { display: block; font-size: 2rem; }
.title .txtbox .tit { width: 250px; margin-top: 10px; }



.read { text-align: center; color: #eeeee9; }
.read h3 { font-size: 3rem; margin-bottom: 20px; }
.read p { font-size: 1.6rem; margin-bottom: 30px; }



.mokuji { text-align: center; color: #eeeee9; }
.mokuji p { font-size: 2rem; margin-bottom: 30px; }

.mokuji ul {  }
.mokuji ul li { width: 100%; margin-bottom: 20px; }
.mokuji ul li a {
position: relative;
display: block;
padding: 15px;
background: #eeeeea;
border-radius: 15px 50px 50px 0;
font-weight: 600;
text-align: center;
color: #c03f28;
}


#morning { background: #eeeee9; padding: 50px 0 0; color: #2c2321; }
#morning .tit { width: 80%; margin: 0 auto; }
#morning p.time { font-size: 2rem; margin-bottom: 10px; text-align: center; }

#morning .txtbox { margin: 40px 0 0; text-align: center; }
#morning .txtbox h3 { font-size: 3rem; margin-bottom: 20px; }
#morning .txtbox h3 span { display: block; font-size: 1.6rem; padding-bottom: 5px; }

#morning ul.menu_ul {  }
#morning ul.menu_ul li { margin-bottom: 20px; }
#morning ul.menu_ul li h4 { font-size: 1.8rem; margin-bottom: 10px; text-align: center; }
#morning ul.menu_ul li p { font-size: 1.6rem; color: #7f474b;text-align: center;}

#morning .menu .btn a {
position: relative;
display: block;
width: 80%;
margin: 40px auto 0;
padding: 20px 0;
background: #7f474b;
border-radius: 15px 50px 50px 0;
font-weight: 600;
text-align: center;
color: #eeeeea;
}
#morning .menu .btn span.img { width: 8%; position: absolute; top: 25%; right: 25px; }




#lunch { background: #eeeee9; padding: 50px 0 0; color: #2c2321; }
#lunch p.time { font-size: 2rem; margin-bottom: 10px; text-align: center; }
#lunch .tit { width: 80%; margin: 0 auto; }
#lunch .flex_wrap { margin-top: 10px; }
#lunch .lunch_img { width: 100%; }
#lunch .set { width: 100%; }
#lunch .set p { font-size: 1.8rem; margin-bottom: 20px; text-align: center; }

#lunch .l-inner { overflow: hidden; }
#lunch .swiper { overflow: visible; padding: 0 0px 70px; }
#lunch .swiper-slide { width: 18rem; }
#lunch .swiper-slide h4 { font-size: 1.8rem; margin-bottom: 20px; }
#lunch .swiper-slide p { font-size: 1.4rem; color: #7f474b; }

#lunch .swiper-controller .swiper-pagination { bottom: 0; }
#lunch .swiper-controller .swiper-button-prev,
#lunch .swiper-controller .swiper-button-next { color: #7f474b; bottom: 0%; top: auto; }
#lunch .swiper-controller .swiper-button-prev { right: 90px; left: auto; }

#lunch ul.lunch_ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 50px;
}
#lunch ul.lunch_ul li { width: 48%; }
#lunch ul.lunch_ul li p { font-size: 1.4rem; margin-top: 10px; }
#lunch ul.lunch_ul li p span { display: block; font-size: 1.2rem; }

#lunch .kids { background: #eeeee9; padding: 70px 0 0; color: #2c2321; }
#lunch .kids .tit { width: 100%; }
#lunch .kids .tit img { width: 60%; margin: 0 0 5px; }
#lunch .kids .tit span { display: block; font-size: 1.8rem; }
#lunch .kids ul { margin: 10px 0 20px; }
#lunch .kids ul li { margin: 0 0 20px; }
#lunch .kids ul li .img { width: 70%; margin: 0 auto; }
#lunch .kids ul li p { font-size: 1.6rem; color: #7f474b; }

#lunch .menu .btn a {
position: relative;
display: block;
width: 80%;
margin: 40px auto 0;
padding: 20px 0;
background: #7f474b;
border-radius: 15px 50px 50px 0;
font-weight: 600;
text-align: center;
color: #eeeeea;
}
#lunch .menu .btn span.img { width: 8%; position: absolute; top: 25%; right: 25px; }



#grand { background: #eeeee9; padding: 50px 0 0; color: #2c2321; }
#grand .tit { width: 80%; margin: 0 auto; }
#grand .txtbox { margin: 40px 0 0; text-align: center; }
#grand .txtbox h3 { font-size: 3rem; margin-bottom: 20px; }
#grand .txtbox h3 span { display: block; font-size: 1.6rem; padding-bottom: 5px; }

#grand ul.menu_ul {  }
#grand ul.menu_ul li { margin-bottom: 20px; }
#grand ul.menu_ul li h4 { font-size: 1.8rem; margin-bottom: 20px; text-align: center; }
#grand ul.menu_ul li p { font-size: 1.4rem; color: #7f474b; }

#grand .menu .btn a {
position: relative;
display: block;
width: 80%;
margin: 40px auto 0;
padding: 20px 0;
background: #7f474b;
border-radius: 15px 50px 50px 0;
font-weight: 600;
text-align: center;
color: #eeeeea;
}
#grand .menu .btn span.img { width: 8%; position: absolute; top: 25%; right: 25px; }



#drink { background: #eeeee9; padding: 50px 0 0; color: #2c2321; }
#drink .tit { width: 80%; margin: 0 auto; }
#drink .txtbox { margin: 40px 0 0; text-align: center; }
#drink .txtbox h3 { margin: 0 auto 20px; }

#drink ul.drink_ul {  }
#drink ul.drink_ul li { margin-bottom: 20px; }
#drink ul.drink_ul li h4 { font-size: 1.8rem; margin-bottom: 20px; text-align: center; }
#drink ul.drink_ul li p { font-size: 1.4rem; color: #7f474b; }

#drink .menu .btn a {
position: relative;
display: block;
width: 80%;
margin: 40px auto 0;
padding: 20px 0;
background: #7f474b;
border-radius: 15px 50px 50px 0;
font-weight: 600;
text-align: center;
color: #eeeeea;
}
#drink .menu .btn span.img { width: 8%; position: absolute; top: 25%; right: 25px; }



}