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

/*
font-family: 'Gloria Hallelujah', cursive;
font-family: 'Josefin Sans', sans-serif;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Yusei Magic', sans-serif;
*/

/*shimaenaga*/
#all-top{
background: url("/img/m-top.jpg") center center/cover;
height: 800px;
margin-top:-100px;
position: relative;
}
#all-top img{
width: 100%;
}
#all-top div{
width: 200px;
position: absolute;
right:20px;
}
#all-top .top01{
bottom:370px;
}
#all-top .top02{
bottom:190px;
}
#all-top .top03{
bottom:10px;
}
#all-top .title{
width: 450px;
position: absolute;
left:20px;
bottom:20px;
}
#all-top a{
display: block;
transition: 0.5s;
}
#all-top a:hover{
transform:rotate(10deg);
transition: 0.5s;
}
@media screen and (max-width: 768px) {
#all-top{background: url("/img/m-top_sp.jpg") center top 30px/cover;height: 350px;}
#all-top div{width: 100px;right:0;}
#all-top .top01{bottom:180px;}
#all-top .top02{bottom:95px;}
#all-top .top03{bottom:10px;}
#all-top .title{width: 250px;}
}

#m-menu{
position: relative;
background: url("/img/m_back.jpg") no-repeat top center/cover;
padding-bottom: 100px;
}
#m-menu h3{
margin: 0;
padding-top: 100px;
font-family: 'Gloria Hallelujah', cursive;
font-size: 8rem;
letter-spacing: 0.8rem;
text-align: center;
color: #fff;
transform: rotate( -5deg );
animation-duration: 2.5s;
}
#m-menu h2{
margin: -20px auto 0;
padding-bottom: 2rem;
color: #6B4D05;
text-align: center;
font-size: 3rem;
letter-spacing: 0.8rem;
max-width: 800px;
}
#m-menu .row > div{
margin-top: 30px;
}
#m-menu .animate__fadeInUp{
animation-duration: 3.5s;
}
#m-menu .menu-box{
box-shadow: 5px 5px 7px rgba(0,0,0,0.2);
}
#m-menu .box img{
width: 100%;
}
#m-menu .box a{
color: #543C1A;
}
#m-menu .white-box{
background: #fff;
padding: 15px 20px 10px;
color: #543C1A;
}
#m-menu .white-box h4{
font-size: 2rem;
}
#m-menu .white-box p{
font-size: 1.8rem;
}
#m-menu .white-box p span{
font-size: 1.6rem;
}
#m-menu .white-box .text{
font-size: 1.6rem;
border-top: 1px #B4A490 solid;
padding-top: 15px;
}

#m-menu .white-box .txt-hide1,
#m-menu .white-box .txt-hide2,
#m-menu .white-box .txt-hide3,
#m-menu .white-box .txt-hide4,
#m-menu .white-box .txt-hide5,
#m-menu .white-box .txt-hide6
{
display: none;
}
#m-menu th,#m-menu td {
border: solid 1px #ccc;
font-size: 1.3rem;
font-weight: 400;
padding: 3px;
}
#m-menu table {
border-collapse:  collapse;
}
#m-menu th {
white-space: nowrap;
}

#m-menu .white-box button.more {
width: 120px;
margin: 10px auto 5px;
display: block;
background-color: #ccc;
color: #fff;
font-size: 1.4rem;
padding:5px 10px;
border: none;
border-radius: 15px;
outline: 0;
transition: .5s;
-erbkit-transition: .5s;
}
#m-menu .white-box button.more::after {
content: "食品表示を見る";
transition: .2s;
-erbkit-transition: .2s;
}
#m-menu .white-box button.more.on-click::after{
content: "閉じる";
}


#m-menu h5{
margin: 50px auto 50px;
text-align: center;
font-size: 3rem;
letter-spacing: 0.3rem;
color: #543C1A;
}
#m-menu .menu-box2{
box-shadow: 5px 5px 7px rgba(0,0,0,0.2);
background: #fff;
color: #543C1A;
padding: 0;
}
#m-menu .menu-box2 .img-box{
display: inline-block;
padding: 0;
margin: 0;
}
#m-menu .menu-box2 img{
width: 100%;
}
#m-menu .menu-box2 .set-text-box{
padding: 20px 40px;
margin: 0;
text-align: center;
}
#m-menu .menu-box2 h4{
font-size: 2rem;
padding: 20px;
}
#m-menu .menu-box2 .text{
font-size: 2rem;
line-height: 4rem;
border-top: 1px #B4A490 solid;
padding-top: 20px;
text-align:left;
}
#m-menu .menu-box2 h4{
font-size: 3rem;
text-align: center;
}
#m-menu .menu-box2 .text{
font-size: 1.8rem;
padding-top: 15px;
}
#m-menu .set-text-box .shop-link{
display: inline-block;
margin-top: 20px;
margin-bottom: 10px;
background: #E1CE5F;
color: #5F4415;
padding: 20px 30px;
border: 9px solid #fff;
border-radius: 50px;
box-shadow:2px 2px 3px #999;
font-size: 2.5rem;
letter-spacing: 0.2rem;
font-weight: 500;
transition: 0.5s;
}
#m-menu .set-text-box .shop-link:hover{
background: #F0E9B7;
}

@media screen and (max-width: 768px) {
#m-menu{padding-bottom: 50px;}
#m-menu .text-box{padding: 0;}
#m-menu h3{font-size: 4rem;letter-spacing: 0.8rem;padding-top: 50px;}
#m-menu h2{font-size: 2rem;letter-spacing: 0.2rem;margin: 0 auto ;}
#m-menu .row > div:first-of-type{margin-top: 15px;}
#m-menu h5{font-size: 2rem;text-align: left;letter-spacing: 0.1rem;}
#m-menu .menu-box2{margin: 0;padding: 0}
#m-menu .menu-box2 .img-box{margin: 0!important;}
#m-menu .menu-box2 .set-text-box{padding: 15px 20px;}
#m-menu .menu-box2 h4{font-size: 2rem;}
#m-menu .menu-box2 .text{font-size: 1.6rem;letter-spacing: 0;line-height: 2.5rem;}
#m-menu .set-text-box a{font-size: 2rem;margin-bottom: 2rem;}
}

#m-gentei{
width: 100%;
background: url("/img/line-stripe.jpg") repeat;
padding: 40px 0;
color: #5F4415;
}
#m-gentei .line-cloud01{
width: 100%;
height: 130px;
background: url("/img/line-cloud01.png") repeat-x top center;
animation-duration: 3s;
}
#m-gentei .line-cloud02{
width: 100%;
height: 153px;
background: url("/img/line-cloud02.png") repeat-x bottom center;
animation-duration: 3s;
}
#m-gentei .box{
background: #fff;
padding: 50px 0;
}
#m-gentei h2{
margin: -20px auto 0;
padding-bottom: 2rem;
text-align: center;
font-size: 3rem;
letter-spacing: 0.8rem;
max-width: 800px;
line-height: 1.7em;
}
#m-gentei img{
width: 100%;
}
#m-gentei p{
margin-top: 50px;
font-size: 2rem;
line-height: 1.7em;
padding-left: 50px;
}
#m-gentei .sns-box{
padding-left: 50px;
margin: 50px 0 0;
text-align: center;
}
#m-gentei .sns-box a{
display: inline-block;
width: 72px;
margin: 0 10px;
}

@media screen and (max-width: 865px) {
#m-gentei .line-cloud01{background-size: 130%;height: 130px;}
#m-gentei .line-cloud02{height: 130px;background-size: 150%;}
}
@media screen and (max-width: 768px) {
#m-gentei {padding: 30px 0;}
#m-gentei .line-cloud01{background-size: 130%;height: 50px;}
#m-gentei .line-cloud02{height: 50px;background-size: 130%;}
#m-gentei .box{padding: 50px 0;}
#m-gentei  h2{font-size: 2rem;letter-spacing: 0.2rem;margin: 0 auto ;}
#m-gentei p{padding: 0 20px;}
#m-gentei .sns-box{padding-left: 0;}
}


#s-start{
margin-top: -11rem;
padding-bottom: 2rem;
z-index: 1;
position: relative;
}
#s-start .line-cloud01{
width: 100%;
height: 130px;
background: url("/img/line-cloud01.png") repeat-x top center;
animation-duration: 3s;
}
#s-start .line-cloud02{
width: 100%;
height: 153px;
background: url("/img/line-cloud02.png") repeat-x bottom center;
animation-duration: 3s;
}
#s-start .kirakira{
position: absolute;
top:100px;
right: 20px;
}
#s-start .text-box{
max-width: 840px;
margin: 50px auto 0;
text-align: center;
padding: 0 20px;
}
#s-start .text-box img:nth-of-type(2){
width: 100%;
}
#s-start h2{
margin-top: 30px;
padding-bottom: 2rem;
border-bottom: 1px solid #6B4D05;
color: #6B4D05;
font-size: 3rem;
letter-spacing: 0.8rem;
line-height: 4.5rem;
}
#s-start p{
margin: 2rem auto;
font-size: 1.8rem;
color: #6B4D05;
line-height: 4rem;
}
#s-start .text-box2{
background: #FCFFEA;
max-width: 100%;
margin: 0 auto 10px;
padding: 80px 20px 80px 0;
text-align: left;
}
#s-start .text-box2 .container{
padding-left: 0;
max-width: 840px;
}
#s-start .text-box2 .row img{
width: 100%;
}
#s-start .text-box2 h2{
margin-top: 0;
}
#s-start .text-box3{
max-width: 100%;
padding: 20px;
}
#s-start .text-box3 .container{
max-width: 840px;
}
#s-start .text-box3 .row img{
width: 100%;
}

@media screen and (max-width: 865px) {
#s-start .line-cloud01{background-size: 130%;height: 150px;}
#s-start .line-cloud02{height: 180px;background-size: 150%;}
}
@media screen and (max-width: 768px) {
#s-start{margin-top: -5rem;padding-bottom: 10rem;}
#s-start .kirakira{top:50px;width: 50px;}
#s-start .text-box{margin: 0 auto;}
#s-start .text-box img{width: 150px;}
#s-start h3{font-size: 5rem;letter-spacing: 0.8rem;}
#s-start h2{font-size: 2rem;letter-spacing: 0.2rem;line-height: 3rem;text-align: left;}
#s-start p{font-size: 1.6rem;line-height: 3rem;}
#s-start .text-box2{padding: 50px 20px 20px;}
#s-start .text-box2 .container{padding: 10px;}
#s-start .text-box2 .row img{width: 60%;display: block;margin: auto;}
#s-start .text-box2 h2{margin-top: 20px;}
#s-start .line-cloud01{background-size: 150%;height: 100px;}
#s-start .line-cloud02{height: 100px;background-size: 150%;}
#s-start .text-box3 .row img{width: 50%;display: block;margin: auto;}
}






#c-conce{}
#c-conce .c-conce1{
background: url("/img/c-conce_back.jpg") top center / cover;
padding: 50px 0 0;
}
#c-conce .title{
max-width: 840px;
min-height: 200px;
background: url("/img/c-conce01.png") no-repeat bottom left / cover;
background-size:100%;
margin: 0 auto;
padding: 0 15px;
}
#c-conce .title h2{
width: 100%;
max-width: none;
font-size: 4.5rem;
letter-spacing: 0.5rem;
border: none;
text-align: right;
margin: 0;
padding: 40px 0 0 200px;
color: #543C1A;
}
#c-conce .title span{
display: block;
font-size: 3.5rem;
text-align: right;
margin-bottom: 10px;
}
#c-conce .box{
position: relative;
margin: 50px;
}
#c-conce .box .image{
position: absolute;
display: block;
top: -110px;
right: 0;
animation-duration: 3s;
max-width: 600px;
z-index: 0;
}
#c-conce .c-conce_box-l{
margin-left: calc((100% - 800px) / 2);
margin-top: 120px;
}
#c-conce .c-conce_box-r{
margin-right: calc((100% - 800px) / 2);
margin-top: 120px;
}
#c-conce .text-box{
width: 40%;
padding-bottom: 20px;
margin-top: 0;
position: relative;
z-index: 1;
}
#c-conce .text-box h3{
margin: 0 0 0;
font-size: 3rem;
letter-spacing: 0.4rem;
border-left: 20px solid #543C1A;
border-bottom: 1px solid #543C1A;
color: #543C1A;
padding: 5px 15px 10px;
}
#c-conce p{
margin: 2rem auto;
font-size: 1.8rem;
max-width: 800px;
color: #6B4D05;
line-height: 4rem;
}
#c-conce .box2{
margin: 30px 50px 50px 0;
}
#c-conce .box2 .image{
top: -170px;
right: auto;
left: 0;
}
#c-conce .box2 .text-box{
width: 40%;
margin-left: auto;
margin-right: 0;
}
#c-conce .box3{
margin: 50px 0 30px 50px;
}
#c-conce .box3 .image{
top: -170px;
mix-blend-mode:multiply;
}
#c-conce .line{
width: 100%;
}
#c-conce .c-conce2{
background: url("/img/c-conce_back02.jpg") top center / cover;
padding: 40px 0 100px;
}
#c-conce .c-conce2 .title{
background: url("/img/c-conce_line.png") no-repeat bottom left / cover;
min-height: 150px;
background-size:100%;
margin: 0 auto;
padding: 0 30px;
}
#c-conce .c-conce2 .title h2{
text-align: left;
padding: 0 20px;
}
#c-conce .c-conce2 .c-conce_box-l{
margin-top: 50px;
}
#c-conce .c-conce2 .box2 .image{
top: -160px;
width: 500px;
}
#c-conce .c-conce2 .box3{
margin: 200px 0 30px 0;
}
#c-conce .c-conce2 .box3 .image{
top: -200px;
mix-blend-mode:normal;
width: 500px;
}
#c-conce .line-stripe{
width: 100%;
background: url("/img/line-stripe.jpg") repeat top center;
height: 95px;
}
@media screen and (max-width: 1250px) {
#c-conce .box{margin-right: 0;}
#c-conce .box .image{max-width: 500px;}
#c-conce .c-conce2 .box .image{max-width: 500px;}
#c-conce .box2 .image{top: -150px;}
#c-conce .box3 .image{top: -150px;}
}
@media screen and (max-width: 920px) {
#c-conce .box .image{max-width: 420px;}
#c-conce .c-conce2 .box .image{max-width: 420px;}
#c-conce .box2{margin-right: 50px;}
#c-conce .box2 .image{top: -130px;}
#c-conce .box3 .image{top: -130px;}
}
@media screen and (max-width: 865px) {
#c-conce{padding: 20px 0 0;}
#c-conce .title{min-height: 200px;background: url("/img/c-conce01.png") no-repeat bottom left / no-repeat;background-size:100%;}
#c-conce .title h2{font-size: 4rem;padding: 40px 0 0 150px;}
#c-conce .title span{font-size: 2.5rem;}
#c-conce .c-conce2 .box2{margin: 20px 0 0;}
}
@media screen and (max-width: 768px) {
#c-conce{padding: 0;}
#c-conce .title{min-height: 110px;}
#c-conce .title h2{font-size: 2rem;text-align: center;padding: 0 0 0 70px;}
#c-conce .title span{font-size: 1.8rem;letter-spacing: 0.2rem; text-align: center;}
#c-conce .box{margin: 0;}
#c-conce .box .image{top: -80px;max-width: 250px;}
#c-conce .c-conce_box-l,#c-conce .c-conce_box-r{margin:100px 20px 0;}
#c-conce .text-box{
width: 100%;
padding-bottom: 0;
margin-top: 0;
}
#c-conce .text-box h3{
font-size: 2rem;
letter-spacing: 0.4rem;
border-left: 10px solid #543C1A;
padding: 10px 15px;
background:rgba(255,255,255,0.7);
}
#c-conce p{
margin: 2rem auto;
font-size: 1.6rem;
line-height: 3rem;
}
#c-conce .box2{
margin: 0 0 50px 0;
}
#c-conce .box2 .image{
top: -80px;
right: auto;
left: 0;
}
#c-conce .box2 .text-box{
width: 100%;
margin: 0;
}
#c-conce .box3{
margin: 50px 0 30px 0;
}
#c-conce .box3 .image{
top: -100px;
}
#c-conce .c-conce2{padding: 20px 0 50px;}
#c-conce .c-conce2 .title{min-height: 80px;}
#c-conce .c-conce2 .box .image{
top: -130px;max-width: 130px;
}
#c-conce .c-conce2 .c-conce_box-l,#c-conce .c-conce2 .c-conce_box-r{
margin-top: 50px;
}
#c-conce .c-conce2 .box2 .image{
top: -80px;
right:0;
left: auto;
}
#c-conce .c-conce2 .box3{
margin: 0;
}
#c-conce .c-conce2 .box3 .image{
top: -60px;
mix-blend-mode:normal;
}
}