body{ background-color:#1A1A1A; }

.wrapper{margin: 0px 5px;}
.container{width:100%;background-color:#ffffff;margin:0 auto;margin-top:16px;}
.container {
	overflow-y: scroll;
	-ms-overflow-style: none;    /* IE, Edge 対応 */
	scrollbar-width: none;       /* Firefox 対応 */
}
.container::-webkit-scrollbar {  /* Chrome, Safari 対応 */
	display:none;
}
#startimage-area{width: 100vw;height:100%;transition: opacity 2s,visibility 2s;background-color:#1A1A1A;position: absolute;opacity: 1;visibility: visible;overflow: hidden;}
#startimage-area.is-hidden{transition: opacity 2s,visibility 2s;opacity: 0;visibility: hidden;}

.startimage{width: 96px;margin:0 auto;position: relative;top:40%;}

.wrapper,
#startimage-area {
	overflow-y: scroll;
	-ms-overflow-style: none;	/* IE, Edge 対応 */
	scrollbar-width: none;		/* Firefox 対応 */
}
.wrapper::-webkit-scrollbar,
#startimage-area::-webkit-scrollbar {	/* Chrome, Safari 対応 */
	display:none;
}

#load {
	position:absolute;
	width:600px;
	height:36px;
	left:50%;
	bottom:20%;
	margin-left:-300px;
	overflow:visible;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	cursor:default;
}

#load div {
	position:absolute;
	width:20px;
	height:36px;
	opacity:0;
	font-family:Helvetica, Arial, sans-serif;
	animation:move 2s linear infinite;
	-o-animation:move 2s linear infinite;
	-moz-animation:move 2s linear infinite;
	-webkit-animation:move 2s linear infinite;
	transform:rotate(180deg);
	-o-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	color:#35C4F0;
}

#load div:nth-child(2) {
	animation-delay:0.2s;
	-o-animation-delay:0.2s;
	-moz-animation-delay:0.2s;
	-webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
	animation-delay:0.4s;
	-o-animation-delay:0.4s;
	-webkit-animation-delay:0.4s;
	-webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
	animation-delay:0.6s;
	-o-animation-delay:0.6s;
	-moz-animation-delay:0.6s;
	-webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
	animation-delay:0.8s;
	-o-animation-delay:0.8s;
	-moz-animation-delay:0.8s;
	-webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
	animation-delay:1s;
	-o-animation-delay:1s;
	-moz-animation-delay:1s;
	-webkit-animation-delay:1s;
}
#load div:nth-child(7) {
	animation-delay:1.2s;
	-o-animation-delay:1.2s;
	-moz-animation-delay:1.2s;
	-webkit-animation-delay:1.2s;
}

@keyframes move {
	0% {
		left:0;
		opacity:0;
	}
	35% {
		left: 41%; 
		-moz-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-o-transform:rotate(0deg);
		transform:rotate(0deg);
		opacity:1;
	}
	65% {
		left:59%; 
		-moz-transform:rotate(0deg); 
		-webkit-transform:rotate(0deg); 
		-o-transform:rotate(0deg);
		transform:rotate(0deg); 
		opacity:1;
	}
	100% {
		left:100%; 
		-moz-transform:rotate(-180deg); 
		-webkit-transform:rotate(-180deg); 
		-o-transform:rotate(-180deg); 
		transform:rotate(-180deg);
		opacity:0;
	}
}

@-moz-keyframes move {
	0% {
		left:0; 
		opacity:0;
	}
	35% {
		left:41%; 
		-moz-transform:rotate(0deg); 
		transform:rotate(0deg);
		opacity:1;
	}
	65% {
		left:59%; 
		-moz-transform:rotate(0deg); 
		transform:rotate(0deg);
		opacity:1;
	}
	100% {
		left:100%; 
		-moz-transform:rotate(-180deg); 
		transform:rotate(-180deg);
		opacity:0;
	}
}

@-webkit-keyframes move {
	0% {
		left:0; 
		opacity:0;
	}
	35% {
		left:41%; 
		-webkit-transform:rotate(0deg); 
		transform:rotate(0deg); 
		opacity:1;
	}
	65% {
		left:59%; 
		-webkit-transform:rotate(0deg); 
		transform:rotate(0deg); 
		opacity:1;
	}
	100% {
		left:100%;
		-webkit-transform:rotate(-180deg); 
		transform:rotate(-180deg); 
		opacity:0;
	}
}

@-o-keyframes move {
	0% {
		left:0; 
		opacity:0;
	}
	35% {
		left:41%; 
		-o-transform:rotate(0deg); 
		transform:rotate(0deg); 
		opacity:1;
	}
	65% {
		left:59%; 
		-o-transform:rotate(0deg); 
		transform:rotate(0deg); 
		opacity:1;
	}
	100% {
		left:100%; 
		-o-transform:rotate(-180deg); 
		transform:rotate(-180deg); 
		opacity:0;
	}
}

@media screen and (min-width: 1025px) {
	.container{max-width: 1000px;min-height: calc(100vh - 32px);}
}
/* タブレット縦のみ */
@media screen and (max-width: 1024px) and (orientation: portrait) {
	#app{max-width:100%;}
}
/* タブレット縦から */
@media screen and (max-width: 1024px) {

}
/* スマホ横のみ */
@media screen and (max-width: 896px) and (orientation: landscape) {

}
/* スマホ横から */
@media screen and (max-width: 896px) {

}
/* スマホ縦から */
@media screen and (max-width: 480px) {
	.wrapper{margin: 0px 5px;background-color: #ffffff;}
	#load {width:480px;margin-left:-240px;}
}