@charset "UTF-8";
/* CSS Document */


#top_wrapper{
	position:relative;
	width:100%;
	height:100%;
	overflow: hidden;
}

#top_inner{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
}

.bg_image{
	position:absolute;
	top:0px;
	left:0px;
}

/*.bg_color_anim{
	-webkit-animation: bg_color_anim 5.0s linear 2.5s 1 normal;
	        animation: bg_color_anim 5.0s linear 2.5s 1 normal;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

@-webkit-keyframes bg_color_anim {
	0% {opacity:1.0;}
	100% {left:0%;opacity:0.0;}
}

@keyframes bg_color_anim {
	0% {opacity:1.0;}
	100% {left:0%;opacity:0.0;}
}*/

/*.bg_monochrome_and_dot_anim{
	-webkit-animation: bg_monochrome_and_dot_anim 10.5s linear 2.5s 1 normal;
	        animation: bg_monochrome_and_dot_anim 10.5s linear 2.5s 1 normal;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

@-webkit-keyframes bg_monochrome_and_dot_anim {
	0% {opacity:1.0;}
	100% {left:0%;}
}

@keyframes bg_monochrome_and_dot_anim {
	0% {opacity:1.0;}
	100% {left:0%;}
}*/

#logo_first_bg{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-color: #262626;
	opacity:1.0;
}

.logo_first_bg_anim{
	-webkit-animation: logo_first_bg_anim 3.1s linear 0.0s 1 normal;
	        animation: logo_first_bg_anim 3.1s linear 0.0s 1 normal;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

@-webkit-keyframes logo_first_bg_anim {
	0% {opacity:1.0;}
	86% {opacity:1.0;}
	100% {opacity:0.0;}
}

@keyframes logo_first_bg_anim {
	0% {opacity:1.0;}
	86% {opacity:1.0;}
	100% {opacity:0.0;}
}

#logo_first{
	position: absolute;
	top:50%;
	left:50%;
	width:400px;
	height:200px;
	margin-left: -200px;
	margin-top: -85px;
	opacity:0.0;
}

.logo_first_anim{
	-webkit-animation: logo_first_anim 3.1s linear 0.0s 1 normal;
	        animation: logo_first_anim 3.1s linear 0.0s 1 normal;
}

@-webkit-keyframes logo_first_anim {
	0% {opacity:0.0;}
	14% {opacity:1.0;}
	86% {opacity:1.0;}
	100% {opacity:0.0;}
}

@keyframes logo_first_anim {
	0% {opacity:0.0;}
	14% {opacity:1.0;}
	86% {opacity:1.0;}
	100% {opacity:0.0;}
}

#logo_second_bg{
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	background-color: #262626;
	opacity:0.0;
}

.logo_second_bg_anim{
	-webkit-animation: logo_second_bg_anim 0.5s linear 16.0s 1 normal;
	        animation: logo_second_bg_anim 0.5s linear 16.0s 1 normal;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

@-webkit-keyframes logo_second_bg_anim {
	0% {opacity:0.0;}
	100% {opacity:1.0;}
}

@keyframes logo_second_bg_anim {
	0% {opacity:0.0;}
	100% {opacity:1.0;}
}

#logo_wrapper{
	position: absolute;
	width:auto;
	height:auto;
	top:50%;
	left:50%;
}

#logo_second{
	position: relative;
	width: 482px;
	height: 320px;
	display:block;
	margin:0px auto;
	opacity:0.0;
	margin-bottom:20px;
}

#text_lead{
	width:100%;
	height:auto;
	text-align:center;
	font-size:12px;
	color: #ffffff;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ",san-serif;
	line-height: 180%;
	margin-bottom:40px;
	opacity:0.0;
}

#arrow{
	position:relative;
	display:block;
	margin:0px auto;
	width: 68px;
	height: 23px;
	opacity:0.0;
}

.logo_second_and_credit_anim{
	-webkit-animation: logo_second_and_credit_anim 0.5s linear 16.5s 1 normal;
	        animation: logo_second_and_credit_anim 0.5s linear 16.5s 1 normal;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

@-webkit-keyframes logo_second_and_credit_anim {
	0% {opacity:0.0;}
	100% {opacity:1.0;}
}

@keyframes logo_second_and_credit_anim {
	0% {opacity:0.0;}
	100% {opacity:1.0;}
}

#top_credit{
	display:block;
	width:100%;
	height:auto;
	text-align:center;
	font-size: 13px;
	font-family: "Helvetica Neue";
	color: #ffffff;
	position:absolute;
	bottom:30px;
	opacity:0.0;
}

#photo_1{
	position: absolute;
	top:50%;
	left:50%;
	margin-top: -146px;
	margin-left: -158px;
	opacity: 0.0;
	-webkit-transform-origin: 50% 50%;
	        -ms-transform-origin: 50% 50%;
	    transform-origin: 50% 50%;
	-webkit-transform: rotate(-15deg);
	        -ms-transform: rotate(-15deg);
	    transform: rotate(-15deg);
}

.photo_1_anim{
	-webkit-animation: photo_1_anim 2.4s linear 6.3s 1 normal;
	        animation: photo_1_anim 2.4s linear 6.3s 1 normal;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

@-webkit-keyframes photo_1_anim {
	0% {opacity:0.0;
		-webkit-transform: translate(0%, 0%) rotate(-15deg);
	        transform: translate(0%, 0%) rotate(-15deg);
	}

	10% {
		opacity:0.6;
	}

	100% {
		opacity:0.6;
		-webkit-transform: translate(-10%, 0%) rotate(-15deg);
	        transform: translate(-10%, 0%) rotate(-15deg);
	}
}

@keyframes photo_1_anim {
	0% {opacity:0.0;
		-webkit-transform: translate(0%, 0%) rotate(-15deg);
	        transform: translate(0%, 0%) rotate(-15deg);
	}

	10% {
		opacity:0.6;
	}

	100% {
		opacity:0.6;
		-webkit-transform: translate(-10%, 0%) rotate(-15deg);
	        transform: translate(-10%, 0%) rotate(-15deg);
	}
}

#photo_2{
	position: absolute;
	top:45%;
	left:65%;
	margin-top: -247px;
	margin-left: -139px;
	opacity: 0.0;
	-webkit-transform-origin: 50% 50%;
	        -ms-transform-origin: 50% 50%;
	    transform-origin: 50% 50%;
	-webkit-transform: rotate(15deg);
	        -ms-transform: rotate(15deg);
	    transform: rotate(15deg);
}

.photo_2_anim{
	-webkit-animation: photo_2_anim 2s linear 8.5s 1 normal;
	        animation: photo_2_anim 2s linear 8.5s 1 normal;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

@-webkit-keyframes photo_2_anim {
	0% {opacity:0.0;
		-webkit-transform: translate(0%, 0%) rotate(15deg);
	        transform: translate(0%, 0%) rotate(15deg);
	}

	10% {
		opacity:0.6;
	}

	100% {
		opacity:0.6;
		-webkit-transform: translate(-10%, 10%) rotate(15deg);
	        transform: translate(-10%, 10%) rotate(15deg);
	}
}

@keyframes photo_2_anim {
	0% {opacity:0.0;
		-webkit-transform: translate(0%, 0%) rotate(15deg);
	        transform: translate(0%, 0%) rotate(15deg);
	}

	10% {
		opacity:0.6;
	}

	100% {
		opacity:0.6;
		-webkit-transform: translate(-10%, 10%) rotate(15deg);
	        transform: translate(-10%, 10%) rotate(15deg);
	}
}

#photo_3{
	position: absolute;
	top:75%;
	left:50%;
	margin-top: -242px;
	margin-left: -138px;
	opacity: 0.0;
	-webkit-transform-origin: 50% 50%;
	        -ms-transform-origin: 50% 50%;
	    transform-origin: 50% 50%;
	-webkit-transform: rotate(-15deg);
	        -ms-transform: rotate(-15deg);
	    transform: rotate(-15deg);
}

.photo_3_anim{
	-webkit-animation: photo_3_anim 2.1s linear 10.6s 1 normal;
	        animation: photo_3_anim 2.1s linear 10.6s 1 normal;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

@-webkit-keyframes photo_3_anim {
	0% {opacity:0.0;
		-webkit-transform: translate(0%, 0%) rotate(-15deg);
	        transform: translate(0%, 0%) rotate(-15deg);
	}

	20% {
		opacity:0.6;
	}

	100% {
		opacity:0.6;
		-webkit-transform: translate(5%, -15%) rotate(-15deg);
	        transform: translate(5%, -15%) rotate(-15deg);
	}
}

@keyframes photo_3_anim {
	0% {opacity:0.0;
		-webkit-transform: translate(0%, 0%) rotate(-15deg);
	        transform: translate(0%, 0%) rotate(-15deg);
	}

	20% {
		opacity:0.6;
	}

	100% {
		opacity:0.6;
		-webkit-transform: translate(5%, -15%) rotate(-15deg);
	        transform: translate(5%, -15%) rotate(-15deg);
	}
}

#photo_4{
	position: absolute;
	top:40%;
	left:40%;
	margin-top: -113px;
	margin-left: -164px;
	opacity: 0.0;
	-webkit-transform-origin: 50% 50%;
	        -ms-transform-origin: 50% 50%;
	    transform-origin: 50% 50%;
	-webkit-transform: rotate(15deg);
	        -ms-transform: rotate(15deg);
	    transform: rotate(15deg);
}

.photo_4_anim{
	-webkit-animation: photo_4_anim 2.5s linear 12.7s 1 normal;
	        animation: photo_4_anim 2.5s linear 12.7s 1 normal;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}

@-webkit-keyframes photo_4_anim {
	0% {opacity:0.0;
		-webkit-transform: translate(0%, 0%) rotate(15deg);
	        transform: translate(0%, 0%) rotate(15deg);
	}

	20% {
		opacity:0.6;
	}

	100% {
		opacity:0.6;
		-webkit-transform: translate(5%, 20%) rotate(15deg);
	        transform: translate(5%, 20%) rotate(15deg);
	}
}

@keyframes photo_4_anim {
	0% {opacity:0.0;
		-webkit-transform: translate(0%, 0%) rotate(15deg);
	        transform: translate(0%, 0%) rotate(15deg);
	}

	20% {
		opacity:0.6;
	}

	100% {
		opacity:0.6;
		-webkit-transform: translate(5%, 20%) rotate(15deg);
	        transform: translate(5%, 20%) rotate(15deg);
	}
}