@charset "UTF-8";

/*===============================================================*/
/*


	style.css

	
*/
/*===============================================================*/


/*
==============================================
floating
==============================================
*/

.floating{
	-moz-animation-name: floating;
	-o-animation-name: floating;
	-webkit-animation-name: floating;

	-moz-animation-duration: 5s;
	-o-animation-duration: 5s;
	-webkit-animation-duration: 5s;

	-moz-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@-moz-keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(1%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}
@-o-keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(1%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(1%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}





#EarthImg ul li:nth-child(1) img {
	-o-animation: hatch 500s linear infinite;
	-moz-animation: hatch 500s linear infinite;
	-ms-animation: hatch 500s linear infinite;
	-webkit-animation: hatch 500s linear infinite;
	animation: hatch 500s linear infinite;	

	-o-transform-origin: 50% 50%; /* animationの軸を決める */
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

}

#EarthImg ul li:nth-child(2) img {
	-o-animation: hatch 350s linear infinite;
	-moz-animation: hatch 350s linear infinite;
	-ms-animation: hatch 350s linear infinite;
	-webkit-animation: hatch 350s linear infinite;
	animation: hatch 350s linear infinite;	

	-o-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

#EarthImg ul li:nth-child(3) img {
	-o-animation: hatch 200s linear infinite;
	-moz-animation: hatch 200s linear infinite;
	-ms-animation: hatch 200s linear infinite;
	-webkit-animation: hatch 200s linear infinite;
	animation: hatch 200s linear infinite;	

	-o-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

@keyframes hatch {
	0% {
		transform: rotate(0deg);
	}	
	100% {
		transform: rotate(359deg);
	}									
}

@-moz-keyframes hatch {
	0% {
		transform: rotate(0deg);
	}	
	100% {
		transform: rotate(359deg);
	}									
}

@-webkit-keyframes hatch {
	0% {
		-webkit-transform: rotate(0deg);
	}	
	100% {
		-webkit-transform: rotate(359deg);
	}									
}


@-o-keyframes hatch {
	0% {
		transform: rotate(0deg);
	}	
	100% {
		transform: rotate(359deg);
	}									
}

@-ms-keyframes hatch {
	0% {
		transform: rotate(0deg);
	}	
	100% {
		transform: rotate(359deg);
	}									
}



/* title 

#EarthImg ul li:nth-child(4) img {
	-o-animation-name: explode;
	-moz-animation-name: explode;
	-ms-animation-name: explode;
	-webkit-animation-name: explode;
	animation-name: explode;

	-o-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-ms-animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;	

	-o-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	-ms-animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;	

	-o-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%; 
	transform-origin: 50% 50%;
}
*/
@keyframes explode {
	0% {
		transform: scaleY(0.6) scaleX(0.6);
		opacity:0;
	}
	100% {
		transform: scaleY(1) scaleX(1);
		opacity:1;
	}									
}

@-webkit-keyframes explode {
	0% {
		-webkit-transform: scaleY(0.6) scaleX(0.6);
		-webkit-opacity:0;
	}
	100% {
		-webkit-transform: scaleY(1) scaleX(1);
		-webkit-opacity:1;
	}									
}
@-moz-keyframes explode {
	0% {
		transform: scaleY(0.6) scaleX(0.6);
	}
	100% {
		transform: scaleY(1) scaleX(1);
	}									
}
@-o-keyframes explode {
	0% {
		transform: scaleY(0.6) scaleX(0.6);
	}
	100% {
		transform: scaleY(1) scaleX(1);
	}									
}
@-ms-keyframes explode {
	0% {
		transform: scaleY(0.6) scaleX(0.6);
		opacity:0;
	}
	100% {
		transform: scaleY(1) scaleX(1);
		opacity:1;
	}									
}




/*
==============================================
pullUp
==============================================
*/

.pullUp{
	animation-name: pullUp;
	-webkit-animation-name: pullUp;	

	animation-duration: 1.1s;	
	-webkit-animation-duration: 1.1s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	
/*	animation-delay:3s;
	-moz-animation-delay:3s;	
	-webkit-animation-delay:3s;	
	-o-animation-delay:3s;	
	-ms-animation-delay:3s;	*/	
}

@keyframes pullUp {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(0.98);
	}				
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(1);
	}							
}

@-webkit-keyframes pullUp {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}				
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(1);
	}		
}