/*====== reset.css =====*/
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h3,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{
	margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:0 0;
}

/* 共通フォントサイズ フォントなど */
html,body,*:not(i){font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif !important; font-style: normal; color: #fff; font-weight: 400; line-height: 1em; letter-spacing: .05em;}
.txtDark, .txtDark a, .txtDark span, .txtDark i, .txtDark span i{color: rgba(255,255,255,.6) !important;}
body{position: relative; background-color: #1a1a1a;}

body.noScroll{overflow: hidden;}
/*
	font-family: 'BIZ UDGothic', sans-serif;
	font-family: 'din-2014', sans-serif;
	font-family: 'din-2014-narrow', sans-serif;
*/

article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}
ul{list-style:none} blockquote,q{quotes:none} blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;border:0;vertical-align:baseline;background:0 0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}


/*====== common assets =====*/
a{text-decoration: none;} a:hover{cursor: pointer;}
img:not(.imgbox):not(.imgBox){object-fit:cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%;}
.hide{opacity: 0;}

/*====== box-sizing =====*/
html { box-sizing: border-box; height: -webkit-fill-available;}
*, *:before, *:after { box-sizing: inherit; }

.flexbox{display: flex; align-items: center; height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content; overflow: hidden;}

/* header footerも含むcontents全体 */
#wrapper{overflow: hidden; position: relative;}
#wrapper, #keyvisual, nav#menu{opacity: 0; -webkit-opacity: 0;}

body.appear nav#menu, body.appear #wrapper{
	animation-name:PageAnimeAppear;
	animation-duration:0;
	animation-delay: .5s;
	animation-fill-mode:forwards;
	opacity: 0; -webkit-opacity: 0;
}

body.appear #keyvisual{
	position: relative;
	width: 100%; overflow: hidden;
	transition: all .1s ease-in;
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0; -webkit-opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
		opacity: 0; -webkit-opacity: 0;
	}
	100% {
		opacity: 1; -webkit-opacity: 1;
	}
}


#wrapper section{
	overflow: hidden; width: 100%; position: relative;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}



div#splash{
	position: fixed; width: 100%; height: 100vh;
	background: #000; z-index: 9999999;
}

div#splash div{
	display: block; position: absolute; width: 96px; height: 103px; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
	opacity: 0; -webkit-opacity:0; animation: blinks .6s ease 1s infinite;
}

@keyframes blinks {
	0% {
		opacity: .6; -webkit-opacity: .6;
	}
	50% {
		opacity: 1; -webkit-opacity: 1;
	}
	100% {
		opacity: .6; -webkit-opacity: .6;
	}
}


div#splashbg{
	display: none;
}

body.appear div#splashbg{
	display: block; width: 100%; height: 100vh; background-color: #000; z-index: 999;
	position: fixed; top: 0; left: 0;
	transform: scaleX(0);
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}