@charset "UTF-8";


/*-intro-*/
#intro{
	position:fixed;
	width:100%;
	height:100%;
	z-index:110;
}
#intro .bg{
	position:absolute;
	width:100%;
	height:100%;
	background-color:#dcdcdc;
	
}
#intro .bg img{
	position:absolute;
	width:100%;
	height:100%;
	
}
#intro .inner{
	position:absolute;
	width:800px;
	height:440px;
	left:50%;
	top:50%;
	margin-left:-400px;
	margin-top:-220px;
}

/*-skipBtn-*/
#intro .skip{
	position:absolute;
	bottom:10px;
	left:50%;
	width:126px;
	height:34px;
	margin-left:-64px;
}
#intro .skip img{
	position:absolute;
}


/*-phase1-*/
#introPhase1{
	position:absolute;
	width:800px;
	height:440px;
	top:0;
	left:0;
}
.sp #introPhase1{
	overflow:hidden;
	height:0px;
}
.sp #introPhase1.in{
	overflow:visible;
}
.pc #introPhase1.in{
	-moz-animation-name: phase1Zoom;
	-moz-animation-duration: 6s;
	-moz-animation-timing-function: cubic-bezier(0,0,0,0);
	-moz-animation-fill-mode: both;
	
	-webkit-animation-name: phase1Zoom;
	-webkit-animation-duration: 6s;
	-webkit-animation-timing-function: cubic-bezier(0,0,0,0);
	-webkit-animation-fill-mode: both;
	
	-o-animation-name: phase1Zoom;
	-o-animation-duration: 6s;
	-o-animation-timing-function: cubic-bezier(0,0,0,0);
	-o-animation-fill-mode: both;
	
	-ms-animation-name: phase1Zoom;
	-ms-animation-duration: 6s;
	-ms-animation-timing-function: cubic-bezier(0,0,0,0);
	-ms-animation-fill-mode: both;
}
#introPhase1.out{	
	-moz-animation-name: phase1Out;
	-moz-animation-duration: .2s;
	-moz-animation-timing-function: cubic-bezier(0,0,0,0);
	-moz-animation-fill-mode: both;
	
	-webkit-animation-name: phase1Out;
	-webkit-animation-duration: .2s;
	-webkit-animation-timing-function: cubic-bezier(0,0,0,0);
	-webkit-animation-fill-mode: both;
	
	-o-animation-name: phase1Out;
	-o-animation-duration: .2s;
	-o-animation-timing-function: cubic-bezier(0,0,0,0);
	-o-animation-fill-mode: both;
	
	-ms-animation-name: phase1Out;
	-ms-animation-duration: .2s;
	-ms-animation-timing-function: cubic-bezier(0,0,0,0);
	-ms-animation-fill-mode: both;
}

#introPhase1 img{
	position:absolute;
	display:none;
}
#introPhase1 img.in{
	display:block;
}
.sp #introPhase1 img{
	display:block;
}

#introPhase1 .char1{
	top:1px;
	left:0px;
}
#introPhase1 .char2{
	top:27px;
	left:279px;
}
#introPhase1 .char3{
	top:2px;
	left:543px;
}
#introPhase1 .char4{
	top:271px;
	left:0px;
}
#introPhase1 .wooser{
	top:119px;
	left:306px;
}
#introPhase1 .wooser.in{
	-moz-animation-name: wooserZoom;
	-moz-animation-duration: 4s;
	-moz-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-moz-animation-fill-mode: both;
	
	-webkit-animation-name: wooserZoom;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-webkit-animation-fill-mode: both;
	
	-o-animation-name: wooserZoom;
	-o-animation-duration: 4s;
	-o-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-o-animation-fill-mode: both;
	
	-ms-animation-name: wooserZoom;
	-ms-animation-duration: 4s;
	-ms-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-ms-animation-fill-mode: both;
}



/*-phase2-*/
#introPhase2{
	position:absolute;
	width:800px;
	height:440px;
	top:0;
	left:0;
}
.sp #introPhase2{
	overflow:hidden;
	height:0px;
}
.sp #introPhase2.in{
	overflow:visible;
}
#introPhase2 img{
	position:absolute;
	display:none;
}
#introPhase2 img.in{
	display:block;
}
.sp #introPhase2 img{
	display:block;
}
#introPhase2 .part1{
	top:21px;
	left:0px;
}
#introPhase2 .name1{
	top:16px;
	left:85px;
}
#introPhase2 .part2{
	top:100px;
	left:0px;
}
#introPhase2 .name2{
	top:97px;
	left:318px;
}
#introPhase2 .part3{
	top:172px;
	left:0px;
}
#introPhase2 .name3{
	top:154px;
	left:487px;
}
#introPhase2 .part4{
	top:261px;
	left:0px;
}
#introPhase2 .name4{
	top:254px;
	left:83px;
}
#introPhase2 .part5{
	top:342px;
	left:0px;
}
#introPhase2 .name5{
	top:335px;
	left:284px;
}
#introPhase2 .wooser{
	top:243px;
	left:496px;
}
#introPhase2 .name.in{
	-moz-animation-name: pase2NameIn;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-moz-animation-fill-mode: both;
	
	-webkit-animation-name: pase2NameIn;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-webkit-animation-fill-mode: both;
	
	-o-animation-name: pase2NameIn;
	-o-animation-duration: 1s;
	-o-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-o-animation-fill-mode: both;
}
#introPhase2 .wooser.in{
	-moz-animation-name: wooserZoom;
	-moz-animation-duration: 4s;
	-moz-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-moz-animation-fill-mode: both;
	
	-webkit-animation-name: wooserZoom;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-webkit-animation-fill-mode: both;
	
	-o-animation-name: wooserZoom;
	-o-animation-duration: 4s;
	-o-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-o-animation-fill-mode: both;
	
	-ms-animation-name: wooserZoom;
	-ms-animation-duration: 4s;
	-ms-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-ms-animation-fill-mode: both;
}



/*-phase3-*/
#introPhase3{
	position:absolute;
	width:800px;
	height:440px;
	top:0;
	left:0;
}
.sp #introPhase3{
	overflow:hidden;
	height:0px;
}
.sp #introPhase3.in{
	overflow:visible;
}
#introPhase3 img{
	position:absolute;
	display:none;
}
#introPhase3 img.in{
	display:block;
}
.sp #introPhase3 img{
	display:block;
}
#introPhase3 .txt1{
	top:18px;
	left:29px;
}
#introPhase3 .txt2{
	top:97px;
	left:239px;
}
#introPhase3 .txt3{
	top:324px;
	left:532px;
}
#introPhase3 .wooser{
	top:89px;
	left:2px;
}
#introPhase3 .wooser.in{
	-moz-animation-name: wooserZoom;
	-moz-animation-duration: 4s;
	-moz-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-moz-animation-fill-mode: both;
	
	-webkit-animation-name: wooserZoom;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-webkit-animation-fill-mode: both;
	
	-o-animation-name: wooserZoom;
	-o-animation-duration: 4s;
	-o-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-o-animation-fill-mode: both;
	
	-ms-animation-name: wooserZoom;
	-ms-animation-duration: 4s;
	-ms-animation-timing-function: cubic-bezier(0,.6,.3,1);
	-ms-animation-fill-mode: both;
}






/*アニメーション*/

/*wooserZoom*/
@-moz-keyframes wooserZoom {
	0% {
		-moz-transform: scale(0.5,0.5);
	}
	100% {
		-moz-transform: scale(1,1);
	}
}

@-webkit-keyframes wooserZoom {
	0% {
		-webkit-transform: scale(0.5,0.5);
	}
	100% {
		-webkit-transform: scale(1,1);
	}
}

@-o-keyframes wooserZoom {
	0% {
		-o-transform: scale(0.5,0.5);
	}
	100% {
		-o-transform: scale(1,1);
	}
}

@-ms-keyframes wooserZoom {
	0% {
		-ms-transform: scale(0.5,0.5);
	}
	100% {
		-ms-transform: scale(1,1);
	}
}

/*phase1Zoom*/
@-moz-keyframes phase1Zoom {
	0% {
		-moz-transform: scale(0.8,0.8);
	}
	100% {
		-moz-transform: scale(1,1);
	}
}

@-webkit-keyframes phase1Zoom {
	0% {
		-webkit-transform: scale(0.8,0.8);
	}
	100% {
		-webkit-transform: scale(1,1);
	}
}

@-o-keyframes phase1Zoom {
	0% {
		-o-transform: scale(0.8,0.8);
	}
	100% {
		-o-transform: scale(1,1);
	}
}

@-ms-keyframes phase1Zoom {
	0% {
		-ms-transform: scale(0.8,0.8);
	}
	100% {
		-ms-transform: scale(1,1);
	}
}

/*phase1Out*/
@-moz-keyframes phase1Out {
	0% {
		-moz-transform: scale(1,1);
		opacity:1;
	}
	100% {
		-moz-transform: scale(1.5,1.5);
		opacity:0;
	}
}

@-webkit-keyframes phase1Out {
	0% {
		-webkit-transform: scale(1,1);
		opacity:1;
	}
	100% {
		-webkit-transform: scale(1.5,1.5);
		opacity:0;
	}
}

@-o-keyframes phase1Out {
	0% {
		-o-transform: scale(1,1);
		opacity:1;
	}
	100% {
		-o-transform: scale(1.5,1.5);
		opacity:0;
	}
}

@-ms-keyframes phase1Out {
	0% {
		-ms-transform: scale(1,1);
		opacity:1;
	}
	100% {
		-ms-transform: scale(1.5,1.5);
		opacity:0;
	}
}


/*pase2NameIn*/
@-moz-keyframes pase2NameIn {
	0% {
		-moz-transform: translate3d(100px,0px,0px);
		opacity:0;
	}
	100% {
		-moz-transform: stranslate3d(0px,0px,0px);
		opacity:1;
	}
}

@-webkit-keyframes pase2NameIn {
	0% {
		-webkit-transform: translate3d(100px,0px,0px);
		opacity:0;
	}
	100% {
		-webkit-transform: translate3d(0px,0px,0px);
		opacity:1;
	}
}

@-o-keyframes pase2NameIn {
	0% {
		-o-transform: translate3d(100px,0px,0px);
		opacity:0;
	}
	100% {
		-o-transform: translate3d(0px,0px,0px);
		opacity:1;
	}
}