@charset "utf-8";
/* CSS Document */
html,body{font-family: "Noto Sans Japanese", sans-serif;font-size: 16px;font-weight: bold;scroll-behavior: smooth;}
body{line-height: 1.8em;margin: 0;padding: 0;overflow-x: hidden;color: #fff;background-color: #000;}
a{color: #fff;text-decoration:none;}
a:hover{color: rgba(255,255,255,0.70);}
a.anchor {display: block; padding-top: 70px; margin-top: -70px;}
table {  border-collapse: collapse;  border-spacing: 0;}
.wrap{	overflow: hidden;position: relative;min-height: 100vh;box-sizing: border-box;padding: 0;margin: 0;}
.clearfix::after {  content: "";  display: block;  clear: both;}
a:hover img{opacity:0.6;filter: alpha(opacity=60);-ms-filter: "alpha( pacity=60 )";}
*, *:before, *:after {box-sizing: border-box;}
section{padding: 0;margin: 0;}

/* mainimage */
section.imagearea{width: 100%;height: 100vh;overflow-y: hidden;display: block;margin:auto;padding:0;position: relative;}
section.imagearea .mainimage {width: 100%;display:flex;align-items: center;height: 100vh;overflow-y: hidden;}
section.imagearea .mainimage img{width: 100%;display: block;vertical-align: middle;}
section.imagearea .mainimage img.burger{width: 30%;display: block;position: absolute;top:10%;left:15%;}
section.imagearea .mainimage img.name{width: 40%;display: block;position: absolute;top:40%;right:10%;}
@media screen and (max-width:1550px){
}
@media screen and (max-width:1370px){
}
@media screen and (max-width:1200px){
}
@media screen and (max-width:820px){
section.imagearea{width: 100%;height: auto;overflow-y: hidden;display: block;margin:auto;padding:0;position: relative;}
section.imagearea .mainimage {width: 100%;display: block; height: auto;overflow-y: hidden;}
section.imagearea .mainimage img.burger{width: 35%;display: block;position: absolute;top:20%;left:15%;}
}
@media screen and (max-width:600px){
html{font-size: 11px;padding: 0;margin: 0;}
section.imagearea .mainimage img.burger{width: 30%;display: block;position: absolute;top:20%;left:10%;}
}
@media screen and (max-width:380px){
section.imagearea .mainimage img.burger{width: 30%;display: block;position: absolute;top:20%;left:10%;}
section.imagearea .mainimage img.name{width: 35%;display: block;position: absolute;top:50%;right:10%;}
}
@media (orientation: landscape) and (max-width: 1100px){
section.imagearea{width: 100%;height: auto;overflow-y: hidden;display: block;margin:auto;padding:0;position: relative;}
section.imagearea .mainimage {width: 100%;display:flex;align-items: center;height: auto;overflow-y: hidden;}
	}

/* welcome */
section.welcome{padding: 90px 0;background-color: #000;}
section.welcome h2{margin: auto 0 .8em;padding: 0 50px; width: 100%; color: #ffc000;font-weight: bolder;font-size: 4rem;line-height: 1.1em;}
section.welcome .textbox{margin: auto auto 100px;padding: 0;text-align: center;}
section.welcome .comment{margin: auto auto 2em;padding: 0 50px;font-size: 2.5rem;line-height: 1.1em;}
section.welcome .lineup{margin: auto 0;width: 100%;}
@media screen and (max-width:860px){
section.welcome h2{margin: auto 0 .8em;padding: 0 50px; width: 100%; color: #ffc000;font-weight: bolder;font-size: 3.5rem;}
section.welcome .comment{margin: auto auto 2em;padding: 0 50px;font-size: 1.8rem;}
}
@media screen and (max-width:600px){
section.welcome{padding: 50px 0;background-color: #000;}
section.welcome .textbox{margin: auto auto 0;padding: 0 0 30px;text-align: center;}
}
@media screen and (max-width:414px){
section.welcome{padding: 50px 0;background-color: #000;}
section.welcome .textbox{margin: auto auto 0;padding: 0;text-align: center;}
}

/* passion */
/*section.passion{padding: 0;overflow-x: hidden;background-image:url("../images/passionimage.webp");background-attachment: fixed;background-size: cover;background-position: center;background-repeat: no-repeat;}*/
section.passion{padding: 0;overflow-x: hidden;}
section.passion::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url("../images/passionimage.webp") center/cover no-repeat;
  z-index:-1;
	border-bottom: 3px solid #000;
}
section.passion .contents{width: 100%;margin: 300px 0 0;padding: 0;background-color: #000;}
section.passion .contents h2{margin:2em 0 .8em;padding: 0 50px;width: 100%; color: #ffc000;font-weight: bolder;font-size: 3rem;}
section.passion .contents .comment{margin: auto;padding: 0 50px;font-size: 1.2rem;}
section.passion h2{margin: auto 0 .8em;padding: 0 50px; width: 100%; color: #ffc000;font-weight: bolder;font-size: 3rem;line-height: 1.1em;}
section.passion .textbox{margin: auto auto 100px;padding: 0;}
section.passion .comment{margin: auto auto 2em;padding: 0 50px;font-size: 1.2rem;}
section.passion .goribox{margin: auto auto 0;padding: 50px 0 0;background-color: #ffc000;}
section.passion .goribox::after {  content: "";  display: block;  clear: both;}
section.passion .goribox h2{margin: auto 0 .8em;padding: 0 50px; width: 100%; color: #c80000;font-weight: bolder;font-size: 3rem;}
section.passion .goribox .comment{margin: auto auto 2em;padding: 0 40px 50px 50px;font-size: 1.2rem;color: #000;width: 83%;float: left;}
section.passion .goribox .comment strong{font-weight: bolder;}
section.passion .goribox img{display: block;float: left;width: 13%;}
section.passion .yellowbox{margin: auto auto 0;padding: 50px 0;background-color: #ffc000;}
section.passion .yellowbox::after {  content: "";  display: block;  clear: both;}
section.passion .yellowbox h2{margin: auto 0 .8em;padding: 0 50px; width: 100%; color: #c80000;font-weight: bolder;font-size: 3rem;}
section.passion .yellowbox .comment{margin: auto auto 2em;padding: 0 50px;font-size: 1.2rem;color: #000;}
section.passion .yellowbox img{display: block;float: left;width: 13%;}
section.passion .burgerbox{margin: auto auto 0;padding: 50px 0;background-color: #ffc000;}
section.passion .burgerbox::after {  content: "";  display: block;  clear: both;}
section.passion .burgerbox h2{margin: auto 0 .8em;padding: 0 50px; width: 100%; color: #c80000;font-weight: bolder;font-size: 3rem;}
section.passion .burgerbox .comment{margin: auto auto 0;padding: 0 40px 0 50px;font-size: 1.2rem;width: 89%;float: left;color: #000;}
section.passion .burgerbox .comment strong{font-weight: bolder;}
section.passion .burgerbox img{display: block;float: left;width: 9%;}
section.passion .redbox{margin: auto auto 0;padding: 50px 0 0;background-color: #c80000;}
section.passion .redbox::after {  content: "";  display: block;  clear: both;}
section.passion .redbox h2{margin: auto 0 .8em;padding: 0 50px; width: 100%; color: #ffc000;font-weight: bolder;font-size: 3rem;}
section.passion .redbox .comment{margin: auto auto 2em;padding: 0 40px 50px 50px;font-size: 1.2rem;color: #fff;width: 80%;float: left;}
section.passion .redbox .comment strong{font-weight: bolder;color: #ffc000;}
section.passion .redbox img{display: block;float: left;width: 15%;}
@media screen and (max-width:860px){
section.passion .goribox{margin: auto auto 100px;padding: 50px 0;background-color: #ffc000;}
section.passion .goribox img{display: block;float: none;margin: 1em auto;width: auto;}
section.passion .goribox .comment{margin: auto auto 2em;padding: 0 50px;font-size: 1.2rem;color: #000;width: 100%;float: none;}
section.passion .yellowbox{margin: auto auto 100px;padding: 50px 0;background-color: #ffc000;}
section.passion .yellowbox img{display: block;float: none;margin: 1em auto;width: auto;}
section.passion .yellowbox .comment{margin: auto auto 2em;padding: 0 50px;font-size: 1.2rem;color: #000;width: 100%;float: none;}
section.passion .redbox{margin: auto auto 100px;padding: 50px 0;}
section.passion .redbox img{display: block;float: none;margin: 1em auto;width: auto;}
section.passion .redbox .comment{margin: auto auto 2em;padding: 0 50px;font-size: 1.2rem;width: 100%;float: none;}
section.passion .burgerbox{margin: auto auto 100px;padding: 50px 0;}
section.passion .burgerbox img{display: block;float: none;margin: 1em auto;width: auto;}
section.passion .burgerbox .comment{margin: auto auto 2em;padding: 0 50px;font-size: 1.2rem;width: 100%;float: none;}
}
@media screen and (max-width:420px){
section.passion .goribox img{display: block;float: none;margin: 1em auto;width:50%;}
section.passion .yellowbox img{display: block;float: none;margin: 1em auto;width:50%;}
section.passion .redbox img{display: block;float: none;margin: 1em auto;width:50%;}
section.passion .burgerbox img{display: block;float: none;margin: 1em auto;width:50%;}
}

/* pickup */
section.pickup{padding: 90px 0;background-color: #000;}
section.pickup table{width: 90%;margin: auto;}
section.pickup td {width: 50%;padding: 40px;vertical-align: top;}
section.pickup td img{width: 100%;}
section.pickup td h3 {font-size: 2.5rem;font-weight: bolder;line-height:1.2;}
section.pickup td .comment {}
@media screen and (max-width:860px){
section.pickup table{width: 80%;margin: auto;}
section.pickup td {width: 100%;padding: 40px 0;vertical-align: top;display: block;}
}

/* menu */
section.menu{background-color: #c80000;padding: 90px 0;}
section.menu .contents{max-width: 1900px;margin: auto;display: table;}
section.menu .contents .title{width: 20%;display: table-cell;vertical-align: middle;}
section.menu .contents .title h2{width: 100%;text-align: center;color: #ffc000;font-size: 2rem;font-weight: bolder;}
section.menu .contents .menuimage{width: 55%;display: table-cell;vertical-align: middle;}
section.menu .contents .menuimage img{display: inline-block;width: 30%;}
section.menu .contents .link{width: 23%;display: table-cell;vertical-align: middle;}
/*section.menu .contents .link a{display: inline-block;font-size: 1.5rem;background-color: #000;color: #fff;padding: 1em 4em;}*/
section.menu .contents .link a { display: inline-block;font-size: 1.5rem;background-color: #000;color: #fff;padding: 1em 4em;overflow: hidden;  position: relative;  z-index: 1;}
section.menu .contents .link a::after {  background: #fff;  position: absolute;  top: 0;  right: 0;  content: '';  width: 100%;  height: 100%;  transform: scale(0, 1);  transform-origin: right top;  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);  z-index: -1;}
section.menu .contents .link a:hover {  color: #000;}
section.menu .contents .link a:hover::after {  transform: scale(1, 1);}
@media screen and (max-width:860px){
section.menu .contents{width: 90%;margin: auto;display: block;}
section.menu .contents .title{width: 100%;display: block;vertical-align: middle;}
section.menu .contents .title h2{width: 100%;text-align: center;color: #ffc000;font-size: 4rem;font-weight: bolder;}
section.menu .contents .menuimage{width: 100%;display: block;vertical-align: middle;text-align: center;}
section.menu .contents .link{width: 50%;display: block;margin: 2em auto auto; vertical-align: middle;text-align: center;}
section.menu .contents .link a{display: block;font-size: 1.5rem;background-color: #000;color: #fff;padding: 1em 4em;}
}
@media screen and (max-width:380px){
section.menu .contents .link{width: 70%;display: block;margin: 2em auto auto; vertical-align: middle;text-align: center;}
section.menu .contents .link a{display: block;font-size: 1.5rem;background-color: #000;color: #fff;padding: 1em 2em;}
}

/* takeout */
section.takeout{background-color: #ffc000;padding: 90px 0;color: #000;}
section.takeout table{width: 100%;margin: auto;}
section.takeout td.img{width: 40%;text-align: center;}
section.takeout td.text{width: 60%;font-size: 3rem;line-height: 1.8em;}
section.takeout td image{display: block;margin: auto;}
section.takeout span{color:#c80000;}
@media screen and (max-width:860px){
section.takeout table{width: 90%;margin: auto;}
section.takeout td{width: 100%;display: block;padding: 30px;box-sizing: border-box;}
section.takeout td.img{width: 100%;text-align: center;}
section.takeout td.img img{width: 100%;display: block;margin: auto;}
section.takeout td.text{width: 100%;font-size: 2.5rem;line-height: 1.8em;}
}
@media screen and (max-width:600px){
section.takeout td.text{width: 100%;font-size: 2rem;line-height: 1.8em;}
}
@media screen and (max-width:420px){
section.takeout td{width: 100%;display: block;padding: 20px;box-sizing: border-box;}
section.takeout td.text{width: 100%;font-size: 1.6rem;line-height: 1.8em;}
section.takeout span{color:#c80000;font-size: 2rem;}

}

/* map */
section.map {width: 100%;line-height: 0;background-color: #000;}
section.map .gmap {width: 100%;margin: 0;padding: 0;}
section.map .gmap iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* aspect-ratio auto calculating 16/9 ratio */
}
section.map .adress {padding: 90px 0;text-align: center;font-size: 2rem;line-height: 2em;}
@media screen and (max-width:860px){
section.map .adress {padding: 90px 0;text-align: center;font-size: 1.5rem;line-height: 2em;}
}

#page_top{  width: 70px;  height: 70px;  position: fixed;  right: 0;  bottom:60px;  opacity: 1;z-index: 1;display: block;}
#page_top a{  position: relative;  display: block;  width: 70px;  height: 70px;  text-decoration: none;background-color: #000000;line-height: 0;}
#page_top a:hover{  position: relative;  display: block;  width: 70px;  height: 70px;  text-decoration: none;background-color: rgba(69,69,69,0.80);}
#page_top a::after{  content:url("../images/top.png");   position: absolute;  top: 0;  bottom: 0;  right: 0;  left: 0;  margin: auto;  text-align: center;}
@media screen and (max-width: 800px) {
#page_top{  width: 50px;  height: 50px;  position: fixed;  right: 0;  bottom:50px;  opacity: 1;z-index: 1;display: block;}
#page_top a{  position: relative;  display: block;  width: 50px;  height: 50px;  text-decoration: none;background-color: #000000;}
#page_top a:hover{  position: relative;  display: block;  width: 50px;  height: 50px;  text-decoration: none;background-color: rgba(69,69,69,0.80);}
#page_top a::after{  content:url("../images/top_sp.png");   position: absolute;  top:0px;  bottom: 0;  right: 0;  left: 0; margin: auto;  text-align: center;}
}
@media screen and (max-width: 414px) {
#page_top{  width: 50px;  height: 50px;  position: fixed;  right: 0;  bottom:50px;  opacity: 1;z-index: 1;display: block;}
}

/* footer */
footer{margin: 0;background-color: #000;}
footer .banner{padding: 0;text-align: center;box-sizing: border-box;}
footer .banner a{margin: 0 1em;width: 18%; display: inline-block;}
footer .banner a img{width: 100%;}
footer .sns{padding: 90px 0;text-align: center;box-sizing: border-box;}
footer .sns a{margin: 0 1em;display: inline-block;}
footer .copyright{text-align: center;padding: 1em 0;box-sizing: border-box;background-color: #000;}
@media screen and (max-width:860px){
footer{margin: 0;bottom: 0;}
footer .copyright{text-align: center;padding: 1em 0 2em;font-size: .9rem;margin: 0;}
}
@media screen and (max-width:420px){
footer .banner a{margin: 0 auto 1em;width: 80%; display: block;}
}