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


*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html{
	font-family: "Jost", sans-serif;
	font-weight: 500;
	font-size: 12pt;
	scroll-behavior : smooth;
	color: white;
}
body{
	height: 100%;
	width: auto;
	margin: 0;
	padding:0;
	letter-spacing: 0.08em;
	text-align:left;/* Make box center for every browser (So put align LEFT to elements which must align left)*/
	background-image: url(../img/j/BG_Inside_JIDAIYA_Night@0,75x.jpg);
	background-color: #000;
	background-attachment: fixed;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
}
a, a:link{
	text-decoration: none;
	color: rgba(255,150,0,1.00);
}
a:hover{
	text-shadow: 0 0 5px #fff, 0 0 15px rgba(255,120,30,0.8);
}
a:visited{
	color: rgba(255,213,154,1.00);
}
ul,li{
	padding-left: 0;
	list-style: none;
}
.forceCancel{
	text-decoration: line-through;
}
.check:before{
	content: "\02192""\02714";
	text-shadow: 0 0 12px #a30000;
}
strong{
	font-weight: 700;
}
/* Wrapper */
div#Wrapper{
	display: block;
	position: relative;
	margin:0 auto;
	height:auto !important;
	background-color: rgba(10,0,255,0.00);
	min-height:100vh;
	width: 100%;
	padding: 0;
	padding-bottom: 248px;
	}
/* 404 Not Found*/
main.notFound{
	display: block;
	position: relative;
	margin:0 auto;
	width: 80%;
}
h1.notFound{
	text-align: center;
	font-size: 10vw;
	margin: 0;
}
h1.notFound span{
	font-weight: 500;
	font-size: 3vw;
	padding-left:.5em;
}
p.notFound{
	text-align: center;
	margin: 0 auto;
	font-size: 3vw;
}
img.emptyNotFound{
	width: 100%;
	display: block;
	margin: 0 auto;
}
/* Go Page Top */
.scroll-top{
	border-radius: 6px;
	padding: .5em;
	margin:0 auto;
	width: 80px;
	height: 80px;
	font-family: "Jost", sans-serif;
	font-weight: 600;
	background: rgba(127,0,2,1);
	box-shadow: 4px 4px 10px rgba(0,0,0,.5);
	display: flex;
	justify-content: center;
	align-items:center;
	position: fixed;
	bottom: 20px;
	right: 10px;
	z-index: 99;
}
.scroll-top *{
	text-align: center;
}
/* Header H100 */
header{
	background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,.1));
/*	background-color:rgba(220,213,23,0.33);*/
	display: block;
	height: 100px;
	width: 100%;
	position: relative;
	z-index: 1;
}
header *{
	display: inline-block
}
div#InnerHeader{
	position: relative;
	width: 100%;
	max-width: 1600px;
	height: 100%;
}
div#InnerHeader *{
	display: inline-block;
}
header a, header a:link, header a:visited{
	color:#FFFFFF;
	text-decoration: none;
}
header a:hover, header a:active{
	text-shadow: 0 0 5px #fff, 0 0 15px rgba(255,120,30,0.8);
}
/* Header Links */
div.HomeLink{
	height: 100px;
	font-family: "amerigo_btbold";
	margin-right: 24px;

}
a.HomeLink img{
	max-height: 90px;
	border-radius: 50%;
	transform: 0.8s ease-in-out;
}
a.HomeLink img:hover{
	border-radius: 50%;
	transform: rotate(360deg);
}
div.HomeLink h1.TitleJidaiya{
	font-size:24pt;
}
div.HomeLink p.Jidaiya{
	text-decoration: none;
	font-size: 11pt;
	position: absolute;
	left: 104px;
	top:  40px;
}
/* Menu Links */
div.MenuLinks{
	position: absolute;
	right: 20px;
	top:20%;
}
#menu li{
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}
ul#menu li a{
	text-align: center;
	min-width: 60px;
	margin: 0 10px;
	padding: 2 10px;
	text-decoration: none;
}
div#toggle{
	display: none;
}
/* Main Contents */
main#ContetntWrapper{
	margin: 0;
	padding: 0;
	position: relative;	
	display: block;
	width: 100%;
	min-height:600px;
}
@media only screen and (max-width:816px){
	main#ContetntWrapper{
		margin-top: 46px;/* for Main Menu Bar appears */
	}
}
/* Main Articles */
article.MainArticle{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	position: relative;
	background-color:rgba(163,0,0,.0);
	margin: 0;
	padding:1em 2em ;
	max-width: 100vw;
	height: auto;
	overflow: auto;
	width:100%;
}
article.MainArticleMap{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	position: relative;
	background-color:rgba(163,0,0,.0);
	margin: 0;
	padding:1em 2em ;
	max-width: 100vw;
	height: auto;
	overflow: auto;
	width:100%;
}
article.OrderOfChoice{
	display: block;
	flex-wrap: wrap;
	align-items: baseline;
	position: relative;
	background-color:rgba(163,0,0,0);
	margin: 0;
	padding:1em 2em ;
	max-width: 100vw;
	height: auto;
	overflow: auto;
	width:100%;
	min-height:600px;
}
article.OrderOfChoice h3{
	padding:0;
	display: block;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	font-family: "amerigo_btbold";
	color: white;
	font-size: 26pt;
}
div.OrderLinkHolder{
	display: flex;
	justify-content: space-around;
	width: 80%;
	margin: 0 auto;
	padding: 2em 0;
	flex-wrap: wrap;
	align-items: baseline;
}
div.OrderLinkHolder:after{
	content: "";
	display: block;
	margin: 0 auto;
	width: 100%;
	padding-top: 3em;
	border-bottom: 2px solid #fff;

}

ul.infoLocal{
	display: block;
	width:66%;
	margin: 0 auto;
}
iframe.localMap{
	display: block;
	width:66%;
	height:40vw;
	border:0;
	border-radius: 2px;
	margin: 0 auto;
}
article.MainArticle:after{
	content: "";
	display: block;
	margin: 0 auto;
	width: 80%;
	padding-top: 3em;
	border-bottom: 2px solid #fff;
}
article.MainArticle img{
	max-width: 80%;
	max-height: 80%;
	display: block;
	margin:0 auto;
}
article.MainArticle h2,article.MainArticle h3{
	padding:0;
	display: block;
	width: 80%;
	margin: 0 auto;
	font-family: "amerigo_btbold";
	color: white;
	font-size: 36pt;
}
article.MainArticle h3{
	font-family: 'Jost';
	font-size: 26pt;
}
article.MainArticle .left{
	text-align: left;
}
article.MainArticle .center{
	text-align: center;
}
article.MainArticle .right{
	text-align: right;
}
article.MainArticle p{
	display: block;
	width: 80%;
	margin: 0 auto;
	font-family: "Jost",sans-serif;
	font-weight: 400;
	font-size: 16pt;
	color:#fff;
	padding: .5em 1em;
}
div.pageTitle h2{
	color: #fff;
	text-align: left;
	font-size: 36pt;
	display: block;
	margin: 0 auto;
	padding: 0.2em 1em ;
	font-family: "amerigo_btbold";
}
/* Popup Window */
.popupTrigger{
	display: inline-flex;
	margin: .5vw;
	padding: 0;
	cursor: pointer;
	flex:0 0 auto;
	width:20vw;
	height:20vw;
}
.popup{
	position: relative;
	top:0;
	left:0;
	display: none;
	width: 20vw;
	height: 20vw;
	margin-left:-20.5vw;
	margin-right: .5vw;
	margin-bottom:.5vw;
	margin-top: .5vw;
	background: rgba(255,150,0,.70);
	color: rgba(0,0,0,1.00);
	padding: 1em;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	font-size: 14pt;
	line-height: 16pt;
}
.popup p{
	margin: .2em 0;
}
.popup .price{
	font-weight: 500;
}
.popup .price span{
	font-size:x-small; 
	padding-left: 1em;
}
.popup .ramenStyle{
	font-weight: 600;
	font-size:medium;
}
.popup .ingredients{
}
.popup h4{
	font-size: 18pt;
	line-height: 20pt;
	font-weight: 700;
	margin: 0;
}
@media only screen and (max-width:1476px){
	.popup{
		font-size: 14pt;
		line-height: 15pt;
	}
	.popup h4{
		font-size: 17pt;
		line-height: 18pt;
	}
}
@media only screen and (max-width:1296px){
	.popup{
		font-size: 12pt;
		line-height: 13pt;
	}
	.popup h4{
		font-size: 15pt;
	}
}
@media only screen and (max-width:1216px){
	.popup{
		width:28vw;
		height: 28vw;
		margin-left: -28.5vw;
		line-height: 12pt;
		font-size: 11pt;
		}
	.popup h4{
		font-size: 15pt;
	}
}
@media only screen and (max-width:816px){
	.popup{
		width: 38vw;
		height:38vw;
		margin-left: -38.5vw;
		font-size: 9pt;
	}
	.popup h4{
		font-size: 12pt;
	}
}
@media only screen and (max-width:520px){
	.popup{
		height: 76vw;
		width: 76vw;
		top: 0;
		left: 0;
		margin-top: -76.5vw;
		margin-left:.5vw;
		font-size:16pt;
		line-height: 16pt;
	}
	.popup h4{
		font-size: 18pt;
		margin-bottom: 10px;
	}
}
.popupMobile{
	position: relative;
	top: 0;
	left: 0;
	margin: 10px 0 0;
	width: 100%;
}
.popupCloseButton{
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 30pt;
	color:rgb(0,0,0);
	cursor: pointer;
}
/* Menu Tiles */
div.tileContainer{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: default;
	width: 85vw;
	margin: 0 auto;
	position: relative;
}
div.tileContainer h3{
	display: block;
	width: 100%;
	color:#fff;
	text-align: left;
	padding:0;
	margin: .25em;
	font-weight: 700;
	font-size: 18pt;
	font-family: "amerigo_btbold";
}

img.iconSpicy{
	width: 1.8em;
}
div.menuTile{
	width:20vw;
	height:20vw;
}
div.menuTile span{
	display: none;
	color: white;
}
div.menuTile:hover span{
	display: block;
	text-align: center;
	margin: 0 auto;
	font-family: "amerigo_btbold";
	font-size: 20pt;
	text-shadow:0 0 5px #000;
}
div.tonkotsu{
	background: url(../img/j/menu/Tonkotsu_01@0,1x.png);
	background-position: center;
	background-size: cover;
}
div.spicymiso{
	background: url(../img/j/menu/SpicyMiso_01@0,1x.png) center;
	background-size: cover;
}
div.tokyoyatai{
	background: url(../img/j/menu/TokyoYatai_01@0,1x.png) center;
	background-size: cover;
}
div.tsukimiyatai{
	background: url(../img/j/menu/TsukimiYatai@0,3x.png) center;
	background-size: cover;
}
div.garlictantan{
	background: url(../img/j/menu/GarlicTanTan@0,1x.png) center;
	background-size: cover;
}
div.shiotonkotsu{
	background: url(../img/j/menu/ShioTonkotsu@0,5x.png) center;
	background-size: cover;
}
div.tonkotsumiso{
	background: url(../img/j/menu/TonkotsuMiso.png) center;
	background-size: cover;
}
div.dipramen{
	background: url(../img/j/menu/DipNoodles@0,5x.png) center;
	background-size: cover;
}
div.kaishio{
	background: url( ../img/j/menu/Kaishio@0,25x.png) center;
	background-size: cover;
}
div.monja{
	background: url(../img/j/menu/Monja.png) center;
	background-size: cover;
}
div.vegetableramen{
	background: url(../img/j/menu/VegetableRamen.png) center;
	background-size: cover;
}
div.UFOgyoza{
	background: url(../img/j/menu/UFOGyoza@0,18x.png) center;
	background-size: cover;
}
div.friedgyoza{
	background: url(../img/j/menu/FriedGyoza@0,5x.png) center;
	background-size: cover;
}
div.KatsuCurry{
	background: url(../img/j/menu/KatsuCurry.jpg) center;
	background-size: cover;
}
div.takoyaki{
	background: url(../img/j/menu/TakoyakiTogo@0,5x.png) center;
	background-size: cover;
}
div.edamame{
	background: url(../img/j/menu/Edamame@0,75x.png) center;
	background-size: cover;
}
div.karaage{
	background: url(../img/j/menu/Karaage@0.5x.jpg) center;
	background-size: cover;
}
div.comboA{
	background: url( ../img/j/menu/ComboA@0,5x.png) center;
	background-size: cover;
}
div.comboB{
	background: url( ../img/j/menu/ComboB.jpg) center;
	background-size: cover;
}
div.comboC{
	background: url( ../img/j/menu/ComboC.jpg) center;
	background-size: cover;
}
div.comboD{
	background: url( ../img/j/menu/ComboD@0,5x.png) center;
	background-size: cover;
}
div.comboE{
	background: url( ../img/j/menu/ComboE@0,5x.png) center;
	background-size: cover;
}
div.comboF{
	background: url( ../img/j/menu/ComboF@0,5x.png) center;
	background-size: cover;
}
div.comboG{
	background: url( ../img/j/menu/ComboG@0,5x.png) center;
	background-size: cover;
}
div.comboH{
	background: url( ../img/j/menu/ComboH@0,5x.png) center;
	background-size: cover;
}
div.comboI{
	background: url( ../img/j/menu/ComboI@0,5x.png) center;
	background-size: cover;
}
div.MealA{
	background: url( ../img/j/menu/Meal_UFOGyoza@0.5x.png) center;
	background-size: cover;
}
div.MealB{
	background: url( ../img/j/menu/Meal_Karaage.jpg) center;
	background-size: cover;
}
div.MealC{
	background: url( ../img/j/menu/Meal_ChickenCutlet@0.5x.jpg) center;
	background-size: cover;}
div.MealD{
	background: url( ../img/j/menu/Meal_GingerPork@0.5x.jpg) center;
	background-size: cover;}
div.MealE{
	background: url( ../img/j/menu/KatsuCurry.jpg) center;
	background-size: cover;
}
div.MealF{
	background: url( ../img/j/menu/ComboE@0,5x.png) center;
	background-size: cover;
}
div.noPicYet{
	background: url(../img/j/menu/NoPicYet.png) center;
	background-size: cover;
}
@media only screen and (max-width:1216px){
	div.tileContainer{
		width:90vw;
	}
	.popupTrigger{
		width:28vw;
		height:28vw;
	}
	div.menuTile{
		width:28vw;
		height:28vw;
	}
}
@media only screen and (max-width:816px){
	div.tileContainer{
		width:80vw;
	}
	.popupTrigger{
		width:38vw;
		height:38vw;
	}
	div.menuTile{
		width:  38vw;
		height: 38vw;
	}
}
@media only screen and (max-width:520px){
	div.tileContainer{
		width: 80vw;
	}
	.popupTrigger{
		width: 76vw;
		height:76vw;
	}
	div.menuTile{
		width: 76vw;
		height: 76vw;
	}
}
/* Footer H248 */
footer{
	background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,1));
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: 248px;
	width: 100%;
	position: absolute;
	bottom: 0;
	color: #fff;
	font-size: 14pt;
	clear: both; 
	padding:0 10%;
}
footer a, footer a:link{
	color: rgba(255,150,0,1.00);
	text-decoration: none;
}
footer a:visited{
	color: rgba(255,213,154,1.00);
}
footer a:hover, footer a:active{
	text-shadow: 0 0 5px #fff;
}
.footerElement{
	display: inline-block;
	width:33%;
	height: 248px;
	padding:1em 1em;
	float: left ;
}
ul.socialButtons{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
table-layout: fixed;
}
ul.socialButtons li{
	vertical-align: middle;
	margin: 0;
	padding:0;
	max-width: 32%;
}
ul.socialButtons a.socialButton img{
	width: 100%;
}
/* Screen under 817 */
@media only screen and (max-width:816px){
	body{
		background-position: top 70px center;
	}
	div.MenuLinks{
		position: relative;
		right: auto;
		margin: 0;
		padding:0;
		display: none;
		top:0;
	}
	ul#menu{
		display: none;
		width: 100vw;
		margin: 0;
		padding: 0  0;
		text-align: center;
	}
	ul#menu li{
		display: block;
	}
	ul#menu li a{
		display: block;
		background: #222;
		border-bottom: solid #444 1px;
		height: 40px;
		width: 100vw;
		font-size: 12pt;
		line-height: 30pt;
		margin: 0;
		padding: 0;
	}
	div#toggle{
		display: block;
		position: relative;
		width: 100%;
		background: #222;
	}
	div#toggle a{
		display: block;
		position: relative;
		padding: 12px 0 10px;
		border-bottom: 1px solid #444;
		color: #fff;
		text-align: center;
		text-decoration: none;
	}
	div#toggle:before{
		display: block;
		content: "";
		position: absolute;
		top:50%;
		left: 10px;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		background: #fff;
	}
	div#toggle a:before, div#toggle a:after{
		display: block;
		content: "";
		position: absolute;
		top:50%;
		left: 10px;
		width: 20px;
		height: 4px;
		background: #222;
	}
	div#toggle a:before{
		margin-top: -6px;
	}
	div#toggle a:after{
		margin-top: 2px;
	}
	article.MainArticle h2{
		font-size: 22pt;
	}
	article.MainArticle p{
		font-size: 16pt;
	}
	iframe.localMap{
		width:80vw;
	}
	ul.infoLocal{
		width:80vw;
	}
	div.pageTitle h2{
		font-size: 22pt;
	}
	.footerElement{
		font-size: 10pt;
	}
}
@media only screen and (max-width:480px){
	div.MenuLinks{
		position: relative;
		right: auto;
		margin: 0;
		padding:0;
		width: 100vw;
		display: none;
	}
	ul#menu{
		display: none;
		width: 100%;
		margin: 0;
		padding: 0  0;
		text-align: center;
	}
	ul#menu li{
		display: block;
		width: 100%;
	}
	ul#menu li a{
		display: block;
		background: #222;
		border-bottom: solid #444 1px;
		height: 40px;
		width: 100%;
		font-size: 12pt;
		line-height: 30pt;
		margin: 0;
		padding: 0;
	}
	div#toggle{
		display: block;
		position: relative;
		width: 100%;
		background: #222;
	}
	div#toggle a{
		display: block;
		position: relative;
		padding: 12px 0 10px;
		border-bottom: 1px solid #444;
		color: #fff;
		text-align: center;
		text-decoration: none;
	}
	div#toggle:before{
		display: block;
		content: "";
		position: absolute;
		top:50%;
		left: 10px;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		background: #fff;
	}
	div#toggle a:before, div#toggle a:after{
		display: block;
		content: "";
		position: absolute;
		top:50%;
		left: 10px;
		width: 20px;
		height: 4px;
		background: #222;
	}
	div#toggle a:before{
		margin-top: -6px;
	}
	div#toggle a:after{
		margin-top: 2px;
	}
	article.MainArticle h2{
		font-size: 18pt;
	}
	article.MainArticle p{
		font-size: 12pt;
	}
	iframe.localMap{
		width: 90vw;
		height: 90vw;
	}
	ul.infoLocal{
		width: 90vw;
	}
	.footerElement{
		font-size: 8pt;
	}
	.footerElement h2{
		font-size: 10pt;
	}
}