@charset "utf-8";
/******loadanime.css******/
.indexTop { display: block; }
#animeTop {
	background-color: #000000;
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	z-index: 11;
	min-height: 928px;
	max-height: 1140px;
}
#animeWrapper {
	width: 100%;
	height: 100%;
	min-height: 928px;
	max-height: 1140px;
	margin: 0 auto;
	position: relative;
	opacity: 1;
	overflow: hidden;
}
#animeContents {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}
#animeInner {
	/*width:1240px;*/
	width: 100%;
	min-width: 787px;
	height:auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#loadingBg {
	width: 100%;
	height: 100%;
	display: block;
	background-image: url(../img/anime/loading_smoke00.png);
	background-repeat: no-repeat;
	background-position: top center;
	-ms-background-size: 1920px auto;
	-moz-background-size: 1920px auto;
	-o-background-size: 1920px auto;
	-webkit-background-size: 1920px auto;
	background-size: 1920px auto;
	position: relative;
}
.vagana,.vaganaBlack {
	width: 848px;
	max-width: 848px;
	min-width: 605px;
	height: auto;
	display: block;
	opacity: 1;
	position: absolute;
	top: 0;
	top: -148px;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
}
.vaganaBlack {
	 opacity: 1;
}

/*テキストまわり*/
#loadingAnime {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	text-align: right;
}
#animationText {
	width: 100%;
	height: 100%;
	min-height: 640px;
	position: absolute;
}

#whiteAnime {
	background-color: #ffffff;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	opacity: 0;
	pointer-events:none;
	z-index: 11;
	display: none;
}

#animationText ul{
	display: block;
	overflow: hidden;
	height: 100%;
	position: relative;
	z-index: 10;
	pointer-events:none;
}

#animationText ul li{
	width: 224px;
	height: 224px;
	display: block;
	position: absolute;
	background-image: url(../img/anime/loading_text_bg.png);
	background-repeat: no-repeat;
	-ms-background-size: 1248px auto;
	-moz-background-size: 1248px auto;
	-o-background-size: 1248px auto;
	-webkit-background-size: 1248px auto;
	background-size: 1248px auto;
	-webkit-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	display: none;
	z-index: 1000;
	margin: auto;
}

/*1/4のとき(width1920px)*/
#animationText ul li:first-child {
	background-position:-20px -3px;
	top:523px;
	left: -760px;
	right: 0;
}
#animationText ul li:nth-child(2) {
	background-position:-256px -4px;
	top:472px;
	left: -386px;
	right: 0;
}
#animationText ul li:nth-child(3) {
	background-position: -512px -1px;
	left: 0;
	right: 0;
	top: 418px;
}
#animationText ul li:nth-child(4) {
	background-position:-762px -5px;
	top:365px;
	left: 0;
	right: -408px;
}
#animationText ul li:last-child {
	background-position:-1006px -8px;
	top:309px;
	left: 0;
	right: -810px;
}

/*nowloading数値*/
#nowNumber {
	position: absolute;
	display: block;
	top: inherit;
	bottom: 18%;
	right: 0;
	left: 0;
	margin:auto;
	height: 40px;
	display: block;
	text-align: center;
}
#loadingNum {
	display: inline-block;
	height: 40px;
}
#nowNumber span {
	text-indent: -9999px;
	width: 40px;
	height: 40px;
	padding: 0 3px;
	margin: 0 -5px;
	display: inline-block;
	background-image: url(../img/anime/number_per.png);
	background-repeat: no-repeat;
	-moz-background-size: 520px auto;
	-ms-background-size: 520px auto;
	-o-background-size: 520px auto;
	-webkit-background-size: 520px auto;
	background-size: 520px auto;
}
#nowNumber span.num { background-position: -7px -8px; }
#nowNumber span.num0 { background-position: -7px -8px; }
#nowNumber span.num1 { background-position: -53px -8px; }
#nowNumber span.num2 { background-position: -98px -8px; }
#nowNumber span.num3 { background-position: -146px -8px; }
#nowNumber span.num4 { background-position: -191px -8px; }
#nowNumber span.num5 { background-position: -239px -8px; }
#nowNumber span.num6 { background-position: -284px -8px; }
#nowNumber span.num7 { background-position: -329px -8px; }
#nowNumber span.num8 { background-position: -375px -8px; }
#nowNumber span.num9 { background-position: -422px -8px; }
#nowNumber span.numPer { background-position: -470px -8px; margin: 0;}

#nowLoadingText {
	display: inline-block;
	text-align: right;
	height: 40px;
}

#nowLoadingText img {
	width: auto;
	height: auto;
	display: block;
}
/*音楽セレクト*/
#musicSelect {
	display: none;
	text-align: center;
	position: absolute;
	top: 674px;
	margin: 0 auto;
	width: 60%;
	height: auto;
	/*bottom: 84px;*/
	right: 0;
	left: 0;
}
#musicSelect ul{
	display: inline-block;
}
#musicSelect ul li {
	float: left;
	width: 160px;
	height: 128px;
	display: block;
	margin: 0 20px 0px;
}
#musicSelect p {
	display: block;
	text-align: center;
}

/*@media screen and (max-width: 1366px) {
	#animeInner {
		width: 1366px;
	}
	#loadingBg {
		width: 1366px;
	}
	#loadingBg .vagana {
		width : 605px;
		top: 80px;
	}
	#animationText ul li{
		width: 160px;
		height: 160px;
		-ms-background-size: 892px auto;
		-moz-background-size: 892px auto;
		-o-background-size: 892px auto;
		-webkit-background-size: 892px auto;
		background-size: 892px auto;
	}
	#animationText ul li:first-child { background-position:-14px -3px; top:547px; left: 330px; }
	#animationText ul li:nth-child(2) { background-position:-185px 0px; top:510px; left: 466px; }
	#animationText ul li:nth-child(3) {
		background-position: -368px -1px;
		left: 0;
		right: 0;
		top: 478px;
		margin: auto;
	}
	#animationText ul li:nth-child(4) { background-position:-544px -5px; top:444px; left: 746px; }
	#animationText ul li:last-child { background-position:-716px -8px; top:407px; left: 884px; }
}
*/