@charset "utf-8";

body{
	z-index : -1;
}

#bgCenter{
	display:none;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	background:url(../img/bg.png) #000000 center top / cover no-repeat fixed;
	z-index : -1;
}

#bgLeft{
	display:none;
	width:100%;
	height:100%;;
	position:fixed;
	top:0;
	background:url(../img/bgLeft.png) #000000 center top / cover no-repeat fixed;
	z-index : -1;
}

#bgRight{
	display:none;
	width:100%;
	height:100%;;
	position:fixed;
	top:0;
	background:url(../img/bgRight.png) #000000 center top / cover no-repeat fixed;
	z-index : -1;
}

#contents{
	position:relative;
	display:none;
	height:100vh;
	min-height:250px;
}

/*-------------------------loading用 */

#loading{
	background:#000000 url(../img/icon_Loading.gif) center no-repeat;
	width:100vw;
	height:100vh;
	position:fixed;
}

/* ---------------------------------gengoBlock */

#gengoBlock{
	padding-top:20px;
}

#gengoBlock ul{
	display:table;
	margin:auto;
}

#gengoBlock ul > li{
	display:table-cell;
}

#gengoBlock ul > li span{
	position:relative;
	padding-bottom: 5px;
}

#gengoBlock ul > li.jpn{
	padding-left:10px;
}

#gengoBlock ul > li.jpn span{
	display:inline-block;
	background: url(../img/langnav_bg.gif) left bottom repeat-x;
}

#gengoBlock ul > li.eng{
	opacity:0.5;
	padding-right:10px;
}

#gengoBlock ul > li.eng:hover{
	opacity:1;
	transition: 0.5s;
}

#gengoBlock ul > li.eng:hover span{
	display:inline-block;
	background: url(../img/langnav_bg.gif) left bottom repeat-x;
}

/* ---------------------------------buttonBlock */


#buttonBlock{
	position:fixed;
	display:-webkit-flex;
	-webkit-align-items:center;
	-webkit-justify-content:center;
	display:flex;
	align-items:center;
	justify-content:center;
/*	height:100%;*/
/*	margin-top:-100px;*/
}

#buttonBlock .inner{
	position:relative;
}

#buttonBlock .xBox img{
	width:300px;
}

#buttonBlock .inner .switch{
	position:absolute;
	-webkit-transform:scale(0.72);
	transform:scale(0.72);
	transition: 0.5s;
}

#buttonBlock .inner #tech{
	top:-20px;
	left:-390px;
}

#buttonBlock .inner #tech:hover{
	opacity:1;
	-webkit-transform:scale(0.9);
	transform:scale(0.9);
	transition: 0.5s;
}

#buttonBlock .inner #angl{
	top:-20px;
	right:-390px;
}

#buttonBlock .inner #angl:hover{
	opacity:1;
	-webkit-transform:scale(0.9);
	transform:scale(0.9);
	transition: 0.5s;
}

.out{
	opacity:0.5;
}

/* ---------------------------------logoBlock */

#logoBlock{
	position:absolute;
	bottom:20px;
	left:calc(50% - 75px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━media */


	@media screen and (max-height:650px){
#buttonBlock .inner{transform:scale(0.75);}
#gengoBlock{transform:scale(0.8);padding-top:10px;}
#logoBlock{transform:scale(0.8);bottom:10px}
	}

	@media screen and (max-height:375px){
#buttonBlock{transform:scale(0.6);}
	}