/****************************************
	==== RESETS
****************************************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,p,blockquote{margin:0;padding:0}

fieldset,img{border:0}

img{vertical-align: bottom;}

table{border-collapse:collapse; border-spacing:0}

address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}

ol,ul{list-style:none}

.separate,.floatingw,legend{display:none}

button{cursor:pointer}

html, body{
	font-family:"MS PGothic", "Osaka", Arial, sans-serif;
	line-height:1.22;
	font-size:75%;
	width: 100%;
	height: 100%;
	word-break:break-all;
	word-wrap:break-word;
	-webkit-text-size-adjust:100% ;
}

table{font-size:inherit;font:100%}

pre,code,kbd,samp,tt{font-family:monospace;line-height:99%}

h1,h2,h3,h4,h5{font-size:100%; font-weight: normal ;}

a:focus,
select,
input[type="text"],
input[type="submit"] { outline:none;}


/****************************************
	==== FONT
****************************************/

@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 100;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 200;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 300;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}
@font-face {
	font-family: "Helvetica Neue";
	src: local("Helvetica Neue Regular");
	font-weight: 100;
}
@font-face {
	font-family: "Helvetica Neue";
	src: local("Helvetica Neue Regular");
	font-weight: 200;
}

body {
	font-family: "-apple-system", "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

/* IE10以上 */
@media all and (-ms-high-contrast: none) {
	body {
	font-family: Verdana, Meiryo, sans-serif;
	}
}


/****************************************
	==== SETTING
****************************************/

body {
	  touch-callout:none;
	  user-select:none;
	  -webkit-touch-callout:none;
	  -webkit-user-select:none;
	  -moz-touch-callout:none;
	  -moz-user-select:none;
}


/****************************************
	==== LAYOUT
****************************************/

html,body {
	height: 100% ;
}

html {
	font-size: 20px ;
	background: #000;
}

body{
	font-size: 20px ;
	color: #fff ;
	line-height: 1.4 ;
	word-break:normal;
	background: #000 ;
}

a, a:link, a:visited, a:hover, a:active {
	color: #e98d7e ;
	font-weight: normal ;
	text-shadow: none ;
	text-decoration: underline ;
}
a:hover {
	text-decoration: none ;
}
a img:hover,
footer .footer_inner .right .fullscreen:hover {
	opacity: 0.8 ;
}

/*
.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.webgl-content {position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
*/

.webgl-content .params {
	color: #fff ;
	font-size: 1.2rem ;
	font-family: 'Roboto Slab', serif;
	text-shadow: 1px 1px 2px #0a2668, 1px 1px 2px #0a2668, 1px 1px 2px #0a2668 ;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin-top: 280px;
}
/* .webgl-content .params {width: 154px; height: 130px;} */
.webgl-content .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .progress {
	height: 33px;
	width: 342px;
	margin-top: 240px;
	background-image: url('progressEmpty.Dark.png');
}
/* .webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;} */
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

/* .webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}*/
/* .webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');} */
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}

/*
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;} 
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;} 
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
*/

.webgl-content .progress_bg {
	height: 100%;
	width: 99.4%;
	width : -webkit-calc(100% - 0.3rem) ;
	width : calc(100% - 0.3rem) ;
	background: #000 url('bg_0003_0001.png');
	background-size: cover ;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	box-sizing: border-box ;
}

.webgl-content {
	width: 100% ;
	max-width: 100rem ;
	background: url(bg_0001_0001.png) no-repeat center center ;
	background-size: cover ;
	margin: 0 auto ;
}
#container {
}
#gameContainer{
	margin: 0 auto !important ;
	padding: 0 0.15rem !important ;
	box-shadow: 0 0 0.4rem 0.2rem rgba(0,0,0,1);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#730000+0,e3800b+20,ffe75a+40,ffffff+50,ffe75a+60,e3800b+80,e3800b+80,730000+100 */
background: #730000 !important; /* Old browsers */
background: -moz-linear-gradient(top, #730000 0%, #e3800b 20%, #ffe75a 40%, #ffffff 50%, #ffe75a 60%, #e3800b 80%, #e3800b 80%, #730000 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(top, #730000 0%,#e3800b 20%,#ffe75a 40%,#ffffff 50%,#ffe75a 60%,#e3800b 80%,#e3800b 80%,#730000 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #730000 0%,#e3800b 20%,#ffe75a 40%,#ffffff 50%,#ffe75a 60%,#e3800b 80%,#e3800b 80%,#730000 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#730000', endColorstr='#730000',GradientType=0 ) !important; /* IE6-9 */
	position: relative ;
	z-index: 1 ;
}
#gameContainer canvas{
	background: #000 ;
}
footer {
	font-size: 0.8rem ;
	width: 100% ;
	background: url(bg_0002_0001.png) no-repeat center top ;
	background-size: 110% 3.5rem ;
	box-sizing: border-box ;
	position: relative ;
	z-index: 2 ;
	padding-bottom: 2rem ;
}
footer .footer_inner {
	width: 100% ;
	max-width: 60rem ;
	min-width: 40rem ;
	text-align: center ;
	margin: 0 auto ;
	position: relative ;
}
footer .logo {
	min-height: 2.5rem ;
	padding-top: 0.8rem ;
	display: inline-block ;
}
footer .footer_inner .left,
footer .footer_inner .right {
	position: absolute ;
	top: 0.5rem ;
}
footer .footer_inner .left {
	left: 0 ;
}
footer .footer_inner .right {
	right: 0 ;
}
footer .footer_inner .right .fullscreen {
	cursor: pointer ;
}
footer .footer_inner .left li {
	display: inline-block;
	margin-top: 0.2rem ;
}
footer .footer_inner nav ul li {
	color: #a35d52 ;
	display: inline-block;
}
footer .footer_inner nav ul li:after {
	content: ' | ' ;
}
footer .footer_inner nav ul li:last-child:after {
	content: '' ;
}