@charset "utf-8";
/* CSS Document */
/*全体にかかるCSS*/
body{
    background:#ce5242 ;
    color:#fff;
}
body p{
	font-size: 12px;
}
@media screen and (min-width:751px){
	body p{
		font-size: 1em;
	}
}
body header nav{
    position: fixed;
    z-index: 10;
    left:100%;
    width:100%;
    height:100%;
    background:rgba(222,176,104,0.7);
}
body header .hero{
    width:100%;
    height:auto;
}
body main{
    margin:50px 10%;
    padding-top:50px;
    background: #deb068;
}
body .main-sns{
    width:100%;
    background: #ce5242;
}
body .sns-icons{
    margin: 0 auto;
    padding-top:50px;
    display:flex;
    justify-content: space-between;
    max-width:400px;
}
body main .sns-icons a{
    text-align: center;
}
body main .sns-icons .icons{
    width: 60%;
    height:auto;
}
body footer{
    height: 100px;
    line-height: 100px;
    background: #deb068;
}
body .drawer-hidden {
    display: none;
}
body .drawer-open {
    display: flex;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: center;
    position: fixed;
    top:4vh;
    right:7vw;
    z-index: 100; /* 重なり順を一番上に */
    cursor: pointer;
    transition:1.2s;
    background:rgba(222,176,104,0.7);
  }
  /* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #ce5242;
    transition: 0.5s;
    position: absolute;
  }
  /* 三本線のうち一番上の棒の位置調整 */
  .drawer-open span:before {
    bottom: 8px;
  }
  /* 三本線のうち一番下の棒の位置調整 */
  .drawer-open span:after {
    top: 8px;
  }
#drawer-check:checked ~ .drawer-open{
    background:rgba(222,176,104,0);
}
  /* アイコンがクリックされたら真ん中の線を透明にする */
  #drawer-check:checked ~ .drawer-open span {
    background: rgba(255, 255, 255, 0);
  }
  /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
  #drawer-check:checked ~ .drawer-open span::before {
    bottom: 0;
    transform: rotate(45deg);
  }
  #drawer-check:checked ~ .drawer-open span::after {
    top: 0;
    transform: rotate(-45deg);
  }
  /* メニューのデザイン*/
  .drawer-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top:0;
    left: 100%; /* メニューを画面の外に飛ばす */
    z-index: 5;
    padding:100px 0;
    background:rgba(222,176,104,0.7);
	transition: .5s;
  }
  /* アイコンがクリックされたらメニューを表示 */
  #drawer-check:checked ~ .drawer-content {
    left: 0; /* メニューを画面に入れる */
  }
  /*ハンバーガーメニューイメージ*/
  .drawer-item {
    height: 50px;
  }
  .drawer-item a {
    line-height: 50px;
    padding-left: 20px;
    font-size: 25px;
    text-decoration: none;
    display: block;
    color:#fff;
    opacity: 1.0;
  }
@media screen and (min-width:751px){
	.drawer-open{
		display:none!important;
	}
	.drawer-content{
		position: fixed!important;
		left:0%!important;
		width:100%!important;
		height:80px!important;
		padding:initial;
		transition: initial;
	}
	.drawer-list{
		width: inherit!important;
		height: inherit!important;
		display: flex!important;
		margin-top: auto!important;
		margin-bottom: auto!important;
		line-height: 80px!important;
	}
	.drawer-item{
		height: 80px!important;
		width:25%!important;
	}
	.drawer-item a{
		text-align: center!important;
		padding-left: initial;
		height: 80px!important;
		line-height: 80px;
	}
}
/*topのCSS始まり*/
#top main h2{
    text-align:center;
    margin-bottom:50px;
}
#top .topics{
    margin:0 5%;
    padding-bottom: 50px;
}
#top .topics .topic-item{
    height:50px;
    border:1px solid #fff;
    line-height:50px;
    font-size: 20px;
}

/*topのCSS終わり*/
/*lineupのCSS始まり*/
#lineup main .lineup-itemlist{
	width:90%;
	display:flex;
	flex-wrap: wrap;
	margin-right: auto;
	margin-left: auto;
}
#lineup main .lineup-itemlist .lineup-item{
	width:21%;
	margin-right: 2%;
	margin-left: 2%;
	margin-bottom: 60px;
}
#lineup main .lineup-itemlist .lineup-item img{
	width:100%;
	height:auto;
}
#lineup main .lineup-itemlist .lineup-item p{
	text-align: center;
}
#lineup main .lineup-itemlist .lineup-item .name{
	height:36px;
}
#lineup main .lineup-itemlist .lineup-item .price{
	margin-top: 5px;
	font-size:15px;
}

@media screen and (min-width:751px){
	#lineup main .lineup-itemlist .lineup-item{
		width:12%;
		margin-left:2%;
		margin-right: 2%;
	}
	#lineup main .lineup-itemlist .lineup-item:nth-child(1),
	#lineup main .lineup-itemlist .lineup-item:nth-child(7),
	#lineup main .lineup-itemlist .lineup-item:nth-child(13){
		margin-left:initial;
		margin-left: 4%;
	}
	#lineup main .lineup-itemlist .lineup-item:nth-child(6),
	#lineup main .lineup-itemlist .lineup-item:nth-child(12){
		margin-right: initial;
		margin-right: 4%;
	}
	#lineup main .lineup-itemlist .lineup-item .name{
		height:48px;
	}
	#lineup main .lineup-itemlist .lineup-item .price{
		margin-top: 5px;
		font-size:18px;
	}
}
/*lineupのCSS終わり*/
/*aboutのCSS始まり*/
#about main .about-box{
    width:90%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:50px;
}
#about main .about-box h3{
    font-size:17px;
    margin-left:auto;
	margin-right: auto;
    text-align: center;
    margin-bottom: 50px;
}
#about main .about-box img{
    width:50%;
    height: auto;
	display: block;
    margin-left:auto;
	margin-right: auto;
	padding-bottom: 50px;
}
#about main .about-box p{
    margin-left: auto;
	margin-right: auto;
    text-align: center;
    width:100%;
    font-size:12px;
}

@media screen and (min-width:751px){
	#about main{
		font-size: 1em!important;
	}
	#about main h3{
		font-size: inherit!important;
	}
	#about main .about-box .yoko{
		display:flex;
		flex-direction: row-reverse;
		padding-left: 5%;
		padding-right: 5%;
	}
	#about main .about-box .yoko img{
		width:30%;
		height: auto;
	}
	#about main .about-box .yoko p{
		width:60%!important;
		font-size: inherit;
		height:180px;
		margin-top:auto;
		margin-bottom: auto;
	}
}
/*aboutのCSS終わり*/
/*mapのCSS始まり*/
#map main h2{
	margin-bottom: 50px;
	text-align: center;
}
#map main .map-box{
	width:95%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 50px;
}
#map main .map-box h3{
	margin-bottom:50px;
	text-align: center;
}
#map main .map-box .map-yoko{
	display:flex;
		margin-bottom: 40px;
	flex-direction: row-reverse;
}
#map main .map-box .map-yoko p{
	margin-top: auto;
	margin-bottom: auto;
	font-size: 12px;
}
#map main .map-box img{
	width:50%;
	height: auto;
}
#map main .map-box .map-yoko .map-yoko-pc iframe{
	display:none;
}
#map main .map-box iframe{
	width:100%;
	height:200px;
}
@media screen and (min-width:751px){
	#map main .map-box h3{
		margin: initial;
	}
	#map main .map-box .map-yoko{
		width:100%!important;
		height:400px!important;
		flex-direction: initial;
	}
	#map main .map-box .map-yoko img{
		margin-top: auto;
		margin-bottom: auto;
		width: 35%!important;
		height: auto;
	}
	#map main .map-box .map-yoko .map-yoko-pc{
		width: 70%;
		padding-left:5%;
	}
	#map main .map-box .map-yoko .map-yoko-pc .map-info{
		width:100%!important;

	}
	#map main .map-box .map-yoko .map-yoko-pc .map-info p{
		font-size: 1em!important;
		margin:initial;
		padding: 63px 0;
	}
	#map main .map-box .map-yoko .map-yoko-pc iframe{
		display: initial;
		height:50%!important;
		width:100%!important;
	}
	#map main .map-box iframe{
		display:none;
	}
}
/*mapのCSS終わり*/