@charset "utf-8";
/*----------------
[1]common
[2]headerContainer
[3]sideContainer
[4]footerContainer
[5]Container
[6]topContainer
[7]subContainer
[8]other
------------------ */

/* **********************************************************************************************
[1]common
************************************************************************************************ */
html{
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
	margin: 0;
	padding: 0;
}
body{
	line-height: 1.5;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 1.4rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	color: #000;
	letter-spacing: 0.5px;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

header {
	width: 100%;
	height: 80vh;
	z-index: 99999999997;
	position: relative;
	top: 0px;
	left: 0;
}

#trns{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999999999999;
	background-image: url(images/logo.webp);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 160px 60px;
	background-color: #2d364b;
}
#wrapper {
	width: 100%;
	position: relative;
	overflow: hidden;
}

/* clear
----------------------------------------------- */
.clear { clear: both; }
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix { min-height: 1px; }
* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* a
----------------------------------------------- */
a,a:link { text-decoration: none; }
a img, img {
	border: none;
	line-height: normal;
	vertical-align: top;
}

/* img
----------------------------------------------- */
img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
}
.imgText {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.object-fit-img {
	object-fit: cover;
	object-position: 50% 50%;
	font-family: 'object-fit: cover; object-position: 50% 50%;'
}

/* slide
----------------------------------------------- */
#topContent,
.top000 {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	background-image: url(images/bg-wood.jpg);
	background-repeat: repeat;
	background-size: ;
	background-position: left top;
}

#topContent2 {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	width: 100%;
	background-image: url(images/bg-wood.jpg);
	background-repeat: repeat;
	background-size: ;
	background-position: left top;
}



.firstView {
	position: absolute;
	width: 100%;
	top:0;
	left:0;
}

#topContent2 .firstView{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}


.scroll {
	position: absolute;
	bottom: -80px;
	left: 50%;
	color: #fff;
	width: 90px;
	height: 90px;
	margin-left: -45px;
	font-size: 10px;
	z-index: 999999999;
	text-align: center;
	font-family: 'Lora', serif;
	display: none;
}
.scroll a{
	color: #fff;
	position: relative;
	width: 90px;
	height: 90px;
	display: block;
	box-sizing: border-box;
}
.scroll a:after {
	position: absolute;
	background-color: #FFF;
	width: 1px;
	height: 30px;
	left: 0px;
	right: 0;
	margin: 0 auto;
	bottom: 25px;
	content: "";
	transition:bottom .3s,height .3s;
}


/* **********************************************************************************************
[2]headerContainer
************************************************************************************************ */

.headerMain {
	position: absolute;
	width: 100%;
	height: 80vh;
	top:0;
	left: 50%;
	margin-left: -50%;
}

header h1 {
	position: relative;
	width: 100%;
	height: 80vh;
	top:0;
	left:0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: top .3s;

}
header h1 a {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	width: 472px;
	height: 731px;
	background-size: 65% auto;
	margin: 0 auto 0;
	box-sizing: border-box;
	background-image: url(images/topiamges_03plus.png);
	background-position: center center;
	transition: opacity .3s,width .3s,height .3s,background-image .3s;
}

#topContent2 .headerMain {
	position: absolute;
	width: 100%;
	height: 100vh;
	top:0;
	left: 0;
	margin-left: 0;
	margin-top: 0;

}

#topContent2 h1 {
	position: absolute;
	width: 119.5px;
	height: 154px;
	top:50%;
	left:50%;
	display: block;
	align-items: inherit;
	justify-content: inherit;
	margin-top: -160px;
	margin-left: -59.75px;
	text-align: center;
	transition: top .3s;
}
#topContent2 h1 a {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	width: 119.5px;
	height: 154px;
	background-size: cover;
	margin: 0 auto 0;
	box-sizing: border-box;
	background-image: url(images/firstviewTtl.png);
	background-position: center center;
	transition: opacity .3s,width .3s,height .3s,background-image .3s;
}

.shoplist {
	position: absolute;
	bottom: calc(10% + 20px);
	left: 50%;
	width: 94%;
	margin-left: -47%;
	text-align: center;
}

.shoplist li{ display: inline-block; margin: 3px 1px;}
.shoplist li a{
  display: block;
  margin: auto;
  padding: 5px;
  font-weight: 700;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 12px;
  text-decoration: none;
  text-shadow:
    -2px 4px 4px #091243,
    0 0 10px #00D0FF,
    inset 1px 1px 1px white;
  color: #0ae4fe;
  border: 1.5px solid;
  border-radius: 4px;
  background-color: rgba(0,0,0,0.60);
  box-shadow:
    2px 4px 3px rgba(1,118,140, 0.3),
    0 0 7px 2px rgba(0,208,255, 0.6),
    inset 2px 4px 3px rgba(1,118,140, 0.3),
    inset 0 0 7px 2px rgba(0,208,255, 0.6);
}

/* **********************************************************************************************
[3]priceContainer
************************************************************************************************ */

.priceMain {margin-top:1px;}

.priceMain {
	padding: 60px 10px;
	box-sizing: border-box;
	text-align: center;
	position: relative;
	width: 100%;
	color: #FFF;
	font-weight: 700;
}

.subPtxt {font-size: 15px; text-shadow: #0ae4fe 1px 1px 5px, #0ae4fe -1px 1px 5px, #0ae4fe 1px -1px 5px, #0ae4fe -1px -1px 5px;}
.subPtxt span{font-size: 25px;}

.yellowtxt{text-shadow: #fefc0aa8 1px 1px 5px, #fefc0aa8 -1px 1px 5px, #fefc0aa8 1px -1px 5px, #fefc0aa8 -1px -1px 5px;}

span.largetxt{font-size:30px;}

.mainPtxt {margin-bottom: 30px;}
.mainPtxt dt,
.mainPtxt dd {text-shadow: #0ae4fe 1px 1px 5px, #0ae4fe -1px 1px 5px, #0ae4fe 1px -1px 5px, #0ae4fe -1px -1px 5px;}
.mainPtxt dd {display: inline-block;}
.mainPtxt1 {font-size: 43px; line-height: 1.0;}
.mainPtxt1 span{font-size: 43px; }

.mainPtxt2 {font-size: 95px; line-height: 1.0;}
.mainPtxt2 span{font-size: 30px;}

.mainPtxt3 {font-size: 45px; line-height: 1.0;}
.mainPtxt3 span{font-size: 15px; display: block;}




/* **********************************************************************************************
[4]footerContainer
************************************************************************************************ */
footer {
	position: relative;
	width: 100%;
	padding: 40px 10px;
	box-sizing:  border-box;
	color: #fff;
	background-image: url(images/bg-footer.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}


.footerCompany { box-sizing: border-box; text-align: center; margin-bottom: 20px;}
.footerCompany h2 {
width: 200px;
height: 75px;
margin: 0px auto 0;
box-sizing: border-box;
}


/* copyright
----------------------------------------------- */
.copyright {
	font-size: 10px;
	text-align: center;
	padding: 10px 0;
	position: relative;
	box-sizing: border-box;
	font-family: 'Ubuntu', sans-serif;
	color: #fff;
}

/* pageTop
----------------------------------------------- */
#pageTop {
	position: fixed;
	bottom: 10px;
	right: 22px;
	color: #FFF;
	width: 48px;
	height: 48px;
	text-align: center;
	font-size: 10px;
	z-index: 999999999;
}
#pageTop a{
	color: #fff;
	position: relative;
	width: 48px;
	height: 48px;
	display: block;
	box-sizing: border-box;
	font-family: 'Lora', serif;
	border-radius: 50%;
	padding-top: 20px;
	border: 1px solid #fff;
	line-height: 1.1;
}
#pageTop a:after {
	position: absolute;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top: 10px;
	left: 0;
	right: 0;
	margin: 0 auto;
	content: "";
	transition: top .3s;
}

#pageTop a:hover:after {
	top: 7px;
	transition: top .3s;
}



/* **********************************************************************************************
[5]Container
************************************************************************************************ */
#container {
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	position: relative;
	z-index:99999999;
}

#container section{position: relative;}

/* Ttl
----------------------------------------------- */

.mainTtl {
	position: relative;
	margin-bottom: 40px;
	text-align: center;
}

.mainTtl .mainTtlBg {
	display: inline-block;
	position: relative;
	font-size: 30px;
	font-weight: 900;
	line-height: 1.0;
}


.mainTtl .ttlen {
	display: block;
	font-size: 15px;
	font-weight: 300;
	font-family: 'Ubuntu', sans-serif;
	opacity: 0.5;
	letter-spacing: 5px;
}

.mainTtl .mainTtlBg:after,
.mainTtl .mainTtlBg:before {
	position: absolute;
	top:0;
	bottom:0;
	margin: auto;
	font-size: 65px;
	font-weight: 100;
}

.mainTtl .mainTtlBg:before {
	left:-30px;
	content:"[";
}

.mainTtl .mainTtlBg:after {
	content:"]";
	right:-30px;
}

/* Btn
----------------------------------------------- */

.mainBtn {
	margin: 60px auto;
	text-align: center;
}

.mainBtn.mainBtn2 {
	margin-bottom: 0;
}
.mainBtn li {padding:2px; box-sizing: border-box;}

.mainBtn li a,
.shopBtn a {
  display: block;
  margin: auto;
  padding: 20px 40px 20px 20px;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 18px;
  text-decoration: none;
  text-shadow:
    -2px 4px 4px #091243,
    0 0 10px #00D0FF,
    inset 1px 1px 1px white;
  color: #0ae4fe;
  border: 2px solid;
  border-radius: 4px;
  background-color: rgba(0,0,0,0.15);
  box-shadow:
    2px 4px 3px rgba(1,118,140, 0.3),
    0 0 7px 2px rgba(0,208,255, 0.6),
    inset 2px 4px 3px rgba(1,118,140, 0.3),
    inset 0 0 7px 2px rgba(0,208,255, 0.6);
  animation: flickering 5s infinite;
}

.staffBtn a {
  display: block;
  margin: 60px 5% 0px 5%;
  padding: 20px 40px 20px 20px;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 18px;
  text-decoration: none;
  color: #fff;
  border: 2px solid;
  border-radius: 4px;
  background-color: rgba(0,0,0,0.15);
}

.mainBtn.mainBtn2 li a {
  display: block;
  margin: auto;
  box-sizing: border-box;
  font-family: sans-serif;
  text-decoration: none;
  text-shadow:none;;
  color: #fff;
  border: none;
  border-radius: 4px;
  background-color: #dc993a;
  box-shadow: none;
  animation: inherit;
  font-weight: 700;
}



.mainBtn li a:hover,
.shopBtn a:hover {
  background-color: rgba(255,255,255,0.15);
  text-shadow:
    -2px 4px 4px #000000,
    0 0 10px #000000,
    inset 1px 1px 1px #000000;
}

.mainBtn.mainBtn2 li a:hover {
  background-color: #fbb450;
  text-shadow:none;
}

.mainBtn li span,
.shopBtn span {position: relative;}
.mainBtn li span:after,
.shopBtn span:after {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
	right: -20px;
	width: 10px;
	height: 10px;
	border-top: 3px solid #0ae4fe;
	border-right: 3px solid #0ae4fe;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.mainBtn.mainBtn2 li span:after {
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
}

@keyframes flickering {
  0% {
    border-color: transparent;
    opacity: 0.2;
  }

  2% {
    border-color: #0ae4fe;
    opacity: 1;
  }

  4% {
    border-color: transparent;
    opacity: 0.2;
  }

  8% {
    border-color: #0ae4fe;
    opacity: 1;
  }

  28% {
    border-color: #0ae4fe;
    opacity: 1;
  }

  30% {
    border-color: transparent;
    opacity: 0.2;
  }

  36% {
    border-color: #0ae4fe;
    opacity: 1;
  }

  100% {
    border-color: #0ae4fe;
    opacity: 1;
  }
}


/* **********************************************************************************************
[6]Container
************************************************************************************************ */

/* common
---------------------------------------------- */
.commonText {font-size: 14px; margin-bottom: 30px; font-weight: 500; position: relative;}
.top000 .commonText,
.top003 .commonText {text-align: left;}
.top003 .commonText {padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
.conceptBg {
	position: absolute;
	width: 100%;
	opacity: 0.15;
	top:-80px;
	left:0;
}

.top000,
.top003 {color: #fff; text-align: center;}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}



.listTxt li{
	/* float: left;
	width: 33.333%; */
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}

.listTxt figure {
	position: relative;
	width: 100%;
}

.listTxt li dl {
	position: absolute;
	top: 50%;
	left:50%;
	height: 252px;
	width: 260px;
	margin-left: -130px;
	margin-top: -126px;

}

.listTxt li dt {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 40px;
	text-shadow: #0ae4fe 1px 1px 5px, #0ae4fe -1px 1px 5px, #0ae4fe 1px -1px 5px, #0ae4fe -1px -1px 5px;
	line-height: 1.1;
}

.listTxt.listTxt2 li dt {
	text-shadow: #c32ffc 1px 1px 5px, #c32ffc -1px 1px 5px, #c32ffc 1px -1px 5px, #c32ffc -1px -1px 5px;
}


.listTxt li:nth-of-type(1) dt {padding-top: 30px; box-sizing: border-box;}
.listTxt li:nth-of-type(3) dt {padding-top: 20px; box-sizing: border-box;}

.listTxt.listTxt2 li:nth-of-type(1) dt {padding-top: 0px; box-sizing: border-box;}
.listTxt.listTxt2 li:nth-of-type(3) dt {padding-top: 0px; box-sizing: border-box;}

.listTxt.listTxt2 li:nth-of-type(2),
.listTxt.listTxt2 li:nth-of-type(3) {margin-top: -60px;}

.listTxt li dd {
	font-size: 14px;
	font-weight: 500;
	text-align: left;
}

/* ------------------002----------------------- */
.top002 {
background-color: #2d364b;
text-align: center;
color: #FFF;
line-height: 1.1;
width: 100%;
font-weight: 700;
}

.top002 h3 {
	position: absolute;
	top: -50px;
	left:0;
	font-size: 30px;
	font-weight: 700;
	text-shadow: #0ae4fe 1px 1px 6px, #0ae4fe -1px 1px 6px, #0ae4fe 1px -1px 6px, #0ae4fe -1px -1px 6px;
	transform: rotate( -4deg );
	width: 100%;
}

.staffBox {
	margin-top: 80px;
}

.staffBox li {
	float: left;
	width: 33.33%;
}

.staffBox li:nth-of-type(7) {
	float: none;
	width: 100%;
	clear: both;
}
.staffBox li:nth-of-type(4),
.staffBox li:nth-of-type(8),
.staffBox li:nth-of-type(11) {
	clear: both;
}


/* ------------------003----------------------- */
.top003 {background-color: #2d364b;}

.dartsBg {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
}

.dartsBg img{
	position: relative;
}

.dartsBg:before {
position: absolute;
top:100px;
width: 100%;
height: 150vw;
content:"";
	background-color: #9d21fa;
}

.top003 h3 {
	position: relative;
	top: 20px;
	left:0;
	font-size: 30px;
	font-weight: 700;
	text-shadow: #c32ffc 1px 1px 6px, #c32ffc -1px 1px 6px, #c32ffc 1px -1px 6px, #c32ffc -1px -1px 6px;
	width: 100%;
	margin-bottom: 60px;
	line-height: 1.1;
}

.listTxt.listTxt2 {
background-image: url(images/bg-paper.jpg);
}

/* ------------------004----------------------- */
.top004 {
background-image: url(images/bg-paper.jpg);
background-repeat: repeat;
color: #603e0c;
border-bottom: 1px solid #FFF;
}

.top004 .mainTtl .ttlen {color: #FFF; opacity:1.0;}
.foodBg {
font-size: 15vw;
font-weight: 900;
opacity:0.5;
position: absolute;
top: 140px;
left:0;
width: 100%;
text-align: center;
color: #FFF;
}

.foodmenu {
	position: relative;
	margin-bottom: 3px;
}

.foodmenuImg {
	width: 100%;
	padding-top: 60%;
	position: relative;
	overflow: hidden;
}

.foodPrice {
	width: 100%;
}


.foodmenuImg2 {
	float: left;
	width: calc(50% - 3px);
	padding-top: 37.5%;
	position: relative;
	overflow: hidden;
	margin-left: 3px;
	box-sizing: border-box;
}

.foodmenu2 .foodmenuImg2 {
	margin-left: 0;
	margin-right: 3px;
	box-sizing: border-box;
}

.foodPrice ul {padding: 20px; box-sizing: border-box;}
.foodPrice ul li:first-child {border-top: 1px solid #603e0c;}
.foodPrice ul li {padding: 15px 0; box-sizing: border-box; border-bottom: 1px solid #603e0c;}
.foodPrice ul li span {
	display: inline-block;
	float: right;
}

.voicesubTtl {margin-bottom: 20px;}
.voicesubTtl,
.instTtl {text-align: center;}

.voicesubTtl span {
	display: inline-block;
	font-size: 18px;
	font-weight:700;
	position: relative;
	z-index:999;
	line-height: 1.1;
	width: calc( 100% - 40px);
}

.voicesubTtl span img {
width: 20px;
float: left;
padding-top: 20px;
box-sizing: border-box;
}

.voicesubTtl span img.voiceright {
float: right;
padding-top: 0px;
}


.voicesubTtl span:before {
	position: absolute;
	height: 10px;
	width: 100%;
	background-color: #ffcf00;
	content:"";
	bottom:-10px;
	left:0;
	right:0;
	margin:auto;
	z-index:1;

}

.instTtl {font-size: 30px; font-weight: 900; margin-bottom: 40px; position: relative; }
.instTtl span {position: relative; display: inline-block;}

.instTtl span:after {
	position: absolute;
	background-image: url(images/ttl-voice.png);
	background-size: cover;
	background-repeat: no-repeat;
	width: 188px;
	height: 20px;
	bottom:-15px;
	left: 50%;
	margin-left: -94px;
	content:"";
}

.voiceBox li{/* float: left; width: 33.333%; */ padding: 10px 20px; box-sizing: border-box;}
.voiceBox li div {
	border: 2px solid #000;
	padding: 30px;
	box-sizing: border-box;
	position: relative;
}

.voiceBox li span{
	position: absolute;
	background-color: rgba(255,207,0,0.12);
	top: 15px;
	left: 15px;
	display: block;
	width: 100%;
	height: 100%;
}


.voiceBox li div:before,
.voiceBox li div:after {
	position: absolute;
	content:"";
	width: 38px;
	height: 38px;
	background-repeat: no-repeat;
	background-size: 33px 27px;
	background-position: center center;
	background-color: #FFF;
}
.voiceBox li div:before {
	background-image: url(images/bg-voice001.jpg);
	left:-15px;
	top:-15px;
}
.voiceBox li div:after {
	background-image: url(images/bg-voice002.jpg);
	right:-15px;
	bottom:-15px;
}

.name {
	position: absolute;
	bottom:0;
	right:0;
	padding: 30px;
	box-sizing: border-box;

}

.voice {margin-bottom: 60px; line-height: 1.8; font-weight: 500;}
.top006 {
background-color: #2d364b;
text-align: center;
color: #FFF;
line-height: 1.1;
width: 100%;
font-weight: 700;
}

.top006 h3 {
	font-size: 30px;
	font-weight: 900;
	margin-bottom: 40px;
}

.top006 p {font-size: 14px;}
.top006 p.telephone span,
.top006 p.telephone a {font-size: 25px; color: #FFF;}
.top006 #map,
.top006 #loading {color: #000;}
.shopBtn {text-align: center; margin: 30px auto 0px; width: 300px;}
.shopBtn a{padding-left: 15px;}
.ggmap {
	position: relative;
	width: 100%;
	padding-top: 60%;
	height: 0;
	overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.shoptel dt{font-size: 20px;}
.shoptel dt span{display: inline-block; position: relative;}
.shoptel dt span:before,
.shoptel dt span:after {
	position: absolute;
	height: 1px;
	width: 50px;
	background-color: #FFF;
	content:"";
	top:0;
	bottom:0;
	margin: auto 0;
}
.shoptel dt span:before {left:-60px;}
.shoptel dt span:after {right:-60px;}
.shoptel dd{font-size: 40px; font-weight: 900;}
.shoptel dd a {color: #FFF;}
.snsBtn {display:none; margin: 40px auto 0; text-align: center;}
.snsBtn li {display: inline-block; padding: 1px; box-sizing: border-box;}
.snsBtn li img {width: 40px;}

/*youtubeで再生*/
.p-ams__yt {
  position: relative;
  z-index: 0;
	  width: 100%;
  aspect-ratio: 16 / 9;
  max-width: 1250px;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
}
.overlay {
  z-index: -1;
  transform:translate3d(0,0,0);
}
.p-ams__yt iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100% ;
  height: 100% ;
}

/*--------007----------*/
.top007 {
background-color: #d78e33;
text-align: center;
color: #FFF;
line-height: 1.1;
width: 100%;
font-weight: 700;
}

.top007 h3 {
	position: relative;
	top: 10px;
	left:-20px;
	font-size: 30px;
	font-weight: 700;
	line-height: 150%;
	/*
	text-shadow: #0ae4fe 1px 1px 6px, #0ae4fe -1px 1px 6px, #0ae4fe 1px -1px 6px, #0ae4fe -1px -1px 6px;
	*/
	transform: rotate( -4deg );
	width: 100%;
}

#gmap_info_window{
  text-align: center;
  font-size:16px;
  font-weight: bold;
}
.blink {
    color: red;
    animation: blinker 1s linear infinite;
  }

  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }

#map {
        margin:auto;
        height: 50vh;
        width: 100%;
        position: relative;
    }

.shopBtn2 {text-align: center; margin: 10px auto 0px;}


.shopBtn2 a {
	display: block;
	background-color: #0ae4fe;
	color: #FFF;
	font-size: 16px;
	font-weight: 900;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 5px;
}

/* **********************************************************************************************
[7]other
************************************************************************************************ */
/* common
----------------------------------------------- */

.foodmenuImg img,
.foodmenuImg2 img,
#topContent2 .firstView img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.firstView img {width: 100%;}

/* font
--------------------------------------------- */
.f10 { font-size: 1.0rem; }
.f11 { font-size: 1.1rem; }
.f12 { font-size: 1.2rem; }
.f13 { font-size: 1.3rem; }
.f14 { font-size: 1.4rem; }
.f15 { font-size: 1.5rem; }
.f16 { font-size: 1.5rem; }
.f17 { font-size: 1.5rem; }
.f18 { font-size: 1.6rem; }
.f19 { font-size: 1.6rem; }
.f20 { font-size: 1.8rem; }
.f25 { font-size: 2.0rem; }
.f30 { font-size: 2.5rem; }
.f35 { font-size: 3.0rem; }
.f40 { font-size: 3.5rem; }
.f45 { font-size: 4.0rem; }
.f50 { font-size: 4.5rem; }
.f55 { font-size: 5.0rem; }
.f60 { font-size: 5.5rem; }
.f65 { font-size: 6.0rem; }
.f70 { font-size: 6.5rem; }

.txtC,.alignC { text-align: center; }
.txtR,.alignR { text-align: right; }
.txtL,.alignL { text-align: left; }

a.txtD { text-decoration: underline; color: #000; }

.notoserifjp {font-family: 'Noto Serif JP', serif;}
.lora {font-family: 'Lora', serif;}
.notosansjp {font-family: 'Noto Sans JP', sans-serif;}
.asap {font-family: 'Asap', sans-serif;}
.ubuntu {font-family: 'Ubuntu', sans-serif;}
.bgBrown  {
	background-image: url(images/bg-matrix.png);
	background-repeat: repeat;
	background-position: left top;
}

.box10 {
	width: 100%;
	margin: 0 auto;
	padding: 60px 10px;
	box-sizing: border-box;
	position: relative;
}

.box10T {
	width: 100%;
	padding: 0px 10px 60px;
	box-sizing: border-box;
	position: relative;
}

.posiR {position: relative;}
.spno { display: none; }
.pcno.pcno3{ display: none; }
.dis {display: none;}

@media all and (min-width: 400px) {
	.listTxt.listTxt2 li:nth-of-type(2),
	.listTxt.listTxt2 li:nth-of-type(3) {margin-top: -80px;}

	@media all and (min-height: 120vw) {
	header {height: 50vh;}
	.headerMain {height: 50vh;}
	header h1 {	height: 50vh;}
	header h1 a {background-size: 45% auto;}
	}

}
@media all and (min-width: 480px) {
	br.pcno,
	br.spno2 { display: none;}
	br.pcno2,br.pcno.pcno2 { display: block;}
	br.pcno.pcno3 { display: block;}
	.txtC.txtLsp { text-align: center; }
	.txtC.txtSL { text-align: left; }
	.foodBg {top: 100px;}
	.scroll {display: none;}
	header {height: 100vh;}
	.headerMain {height: 100vh;}
	header h1 {	height: 100vh;}
	header h1 a {background-size: 45% auto;}
	.listTxt.listTxt2 li:nth-of-type(2),
	.listTxt.listTxt2 li:nth-of-type(3) {margin-top: -90px;}
	.mainTtl .mainTtlBg:after,
	.mainTtl .mainTtlBg:before {
		font-size: 45px;
	}

#topContent2 h1 {
	margin-top: -130px;
}

.shoplist {
	bottom: calc(10% + 0px);
	width: 460px;
	margin-left: -230px;
}

}

@media all and (min-width: 560px) {
	br.pcno.pcno3 { display: none;}
	.mainBtn li {display: inline-block; padding: 0 5px;}
	.listTxt.listTxt2 li:nth-of-type(2),
	.listTxt.listTxt2 li:nth-of-type(3) {margin-top: -100px;}
	.voicesubTtl {width: 530px;  margin: 0 auto 20px;}
	.voicesubTtl span img {padding-top: 0px;}
}

@media all and (min-width: 660px) {
	.listTxt.listTxt2 li img {width: 100%;}
	.listTxt.listTxt2 li:nth-of-type(2),
	.listTxt.listTxt2 li:nth-of-type(3) {margin-top: -120px;}
	.voiceBox li{float: left; width: 33.333%; padding: 10px; box-sizing: border-box;}
	.voiceBox li div {padding: 20px;}
}

@media all and (min-width: 730px) {
	.listTxt li{
		float: left;
		width: 33.333%;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
	}
	.staffBox li {width: 20%;}
	.staffBox li:nth-of-type(7) {
		float: left;
		width: 60%;
		clear:none;
	}
	.staffBox li:nth-of-type(9),
	.staffBox li:nth-of-type(6) {clear: both;}
	.staffBox li:nth-of-type(4),
	.staffBox li:nth-of-type(8),
	.staffBox li:nth-of-type(11) {clear: none;}
	.listTxt li dl {
		height: 252px;
		width: 240px;
		margin-left: -120px;
		margin-top: -126px;
	}
	.listTxt.listTxt2 li:nth-of-type(2),
	.listTxt.listTxt2 li:nth-of-type(3) {margin-top: 0px;}
	.dartsBg:before {height: auto;}
	.foodmenuImg {
		width: 60%;
		padding-top: 40%;
		float: left;
	}
	.foodPrice {
		width: 40%;
		float: left;
	}
	.foodPrice div {
		position: absolute;
		bottom:0;
		right:0;
		width: 40%;
	}
	.foodmenu2 .foodmenuImg {float: right;}
	.foodmenu2 .foodPrice div {
		right:inherit;
		bottom:inherit;
		left:0;
		top:0;
	}
	.foodPrice ul li {padding: 5px 0;}
	.foodmenu2 .foodPrice ul {padding-top: 45%;}

	@media all and (min-height: 100vw) {
	header {height: 50vh;}
	.headerMain {height: 50vh;}
	header h1 {	height: 50vh;}
	header h1 a {background-size: 45% auto;}
	}

}



@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}