@charset "UTF-8";
/* CSS Document */


#menu .wrapper_s{
max-width: 1100px;
}

@media only screen and (max-width:768px){
#menu .wrapper_s{
max-width: 90%;
}
}
@media only screen and (max-width:480px){

}
/************************************

#main_menu

************************************/

/***** pan & cookie common ***/

#main_menu .list{
justify-content:center;
}
#main_menu .list article h4{
font-size:100%;
margin:0 0 10px;
}
#main_menu .list article p{
font-size:85%;
line-height: 1.8;
text-align: left;
margin:0 auto;
}
/**** pan ****/
#main_menu #pan{
margin: 50px 0 80px;
}

#main_menu #pan .list article{
width:29.3%;
margin:0 2% 30px;
}
#main_menu #pan .list article .image{
width:100%;
height:0;
padding-top:100%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#main_menu .list article#p1 .image{
background-image: url(../menu/images/p1_plane.png);
}
#main_menu .list article#p2 .image{
background-image: url(../menu/images/p2_anko.png);
}
#main_menu .list article#p3 .image{
background-image: url(../menu/images/p3_kurumimiso.png);
}
#main_menu .list article#p4 .image{
background-image: url(../menu/images/p4_epotol.png);
}
#main_menu .list article#p5 .image{
background-image: url(../menu/images/p5_ichijiku.png);
}
#main_menu .list article#p6 .image{
background-image: url(../menu/images/p6_choco.png);
}
#main_menu .list article#p7 .image{
background-image: url(../menu/images/p7_sinakuru.png);
}
#main_menu .list article#p8 .image{
background-image: url(../menu/images/p8_yamashoku.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#main_menu .list article#p1 .image{
background-image: url(../menu/images/p1_plane@2x.png);
}
#main_menu .list article#p2 .image{
background-image: url(../menu/images/p2_anko@2x.png);
}
#main_menu .list article#p3 .image{
background-image: url(../menu/images/p3_kurumimiso@2x.png);
}
#main_menu .list article#p4 .image{
background-image: url(../menu/images/p4_epotol@2x.png);
}
#main_menu .list article#p5 .image{
background-image: url(../menu/images/p5_ichijiku@2x.png);
}
#main_menu .list article#p6 .image{
background-image: url(../menu/images/p6_choco@2x.png);
}
#main_menu .list article#p7 .image{
background-image: url(../menu/images/p7_sinakuru@2x.png);
}
#main_menu .list article#p8 .image{
background-image: url(../menu/images/p8_yamashoku@2x.png);
}
}

#main_menu #pan .list article p{
max-width:240px;
}

#main_menu .bt a{
margin:15px auto;
font-size:80%;
padding:5px 30px 5px 40px;
background-position: 10px center;
background-size: 15px;
}
#main_menu .other p{
line-height: 1.7;
font-size:90%;

}
#main_menu .other p a{
display:inline-block;
position: relative;

}
#main_menu .other p a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #333;
	transition:.5s;
}
#main_menu .other p a:hover::after {
background: #54BECC;
}
@media only screen and (max-width:768px){
#main_menu #pan{
margin: 20px 0 50px;
}
#main_menu #pan .list article{
position:relative;
padding-bottom:40px;
}
#main_menu .list article#p1 .image{
background-image: url(../menu/images/p1_plane.png);
}
#main_menu .list article#p2 .image{
background-image: url(../menu/images/p2_anko.png);
}
#main_menu .list article#p3 .image{
background-image: url(../menu/images/p3_kurumimiso.png);
}
#main_menu .list article#p4 .image{
background-image: url(../menu/images/p4_epotol.png);
}
#main_menu .list article#p5 .image{
background-image: url(../menu/images/p5_ichijiku.png);
}
#main_menu .list article#p6 .image{
background-image: url(../menu/images/p6_choco.png);
}
#main_menu .list article#p7 .image{
background-image: url(../menu/images/p7_sinakuru.png);
}
#main_menu .list article#p8 .image{
background-image: url(../menu/images/p8_yamashoku.png);
}
#main_menu .list article p{
line-height: 1.6;
letter-spacing: 0;
}
#main_menu .bt a{
position:absolute;
bottom:0;
left:0;
right:0;
margin:auto;
margin:0 auto;
font-size:80%;
display:block;
padding:7px 0px 7px 0px;
background-position: 5px center;
background-size: 10px;
text-align: center;
max-width:150px;
}
#main_menu .other{
text-align: left;
}
}
@media only screen and (max-width:480px){
#main_menu #pan .list article{
width:46%;
margin:0 2% 30px;
}
}
/****** cookie *****/
#main_menu #cookie {
max-width:770px;
margin-left:auto;
margin-right:auto;
}
#main_menu #cookie .image{
margin:0 0 40px;
}
#main_menu #cookie .image img{
border-radius: 30px;
}
#main_menu #cookie article{
width:22%;
margin:0 4% 20px 0;
}
#main_menu #cookie article:last-child{
width:22%;
margin:0;
}
@media only screen and (max-width:480px){
#main_menu #cookie article{
width:46%;
margin:0 2% 30px;
}
#main_menu #cookie article:nth-child(3){
width:46%;
margin:0 2% 30px;
}
#main_menu #cookie article:last-child{
width:46%;
margin:0 2% 30px;
}
}
/************************************

howto

************************************/
#howto .wrapper_s{
max-width:770px;
}
#howto article{
margin:0 2%;
width:29.3%;
}
#howto article .no{
background: #54BECC;
color:#fff;
width:80px;
font-size:13px;
line-height: 1;
padding:30px 0;
border-radius: 50%;
margin:0 auto 10px;
font-weight: bold;
}
#howto article .no strong{
font-size:20px;
}
#howto article h3{
font-size:120%;
margin:0 0 20px;
padding:0 5px;
position:relative;
display:inline-block;
}
#howto article h3::before{
position: absolute;
top: 0;
left: -30px;
background: url(../images/fuki1.png) no-repeat left top;
background-size: contain ;
width:30px;
height:30px;
content: "";
}
#howto article h3::after{
position: absolute;
top: 0;
right: -30px;
background: url(../images/fuki2.png) no-repeat left top;
background-size: contain ;
width:30px;
height:30px;
content: "";
}
#howto article p{
font-size:85%;
line-height: 1.8;
text-align: left;
}
@media only screen and (max-width:768px){
#howto .wrapper_s{
max-width:90%;
}
#howto article h3{
font-size:100%;
margin:0 0 15px;
padding:0 0px;
letter-spacing: 0.1em;
}
}
@media only screen and (max-width:480px){
#howto article{
width:80%;
margin:0 auto 20px;
}
#howto article h3{
font-size:110%;
margin:0 0 15px;
padding:0 0px;
letter-spacing: 0.1em;
}
}
/************************************

#hozon

************************************/
#hozon .wrapper_s{
max-width:770px;
}
#hozon .image{
width:100%;
height:0;
padding-top:61%;
background-image: url(../menu/images/bagle_image.jpg) ;
background-repeat:  no-repeat ;
background-position:  center;
background-size: cover;
border-radius: 30px;
margin:0 auto 40px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
#hozon .image{
background-image: url(../menu/images/bagle_image@2x.jpg) ;
}
#hozon p{
text-align: left;
line-height: 2;
margin:0 5%;
}
@media only screen and (max-width:768px){
#hozon .wrapper_s{
max-width:90%;
}
#hozon .image{
background-image: url(../menu/images/bagle_image.jpg) ;
}
}