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

/*common_animation*/

@keyframes twitter_bg {
	100% {
		background-position: 24px 0;
	}
}

/*~common_animation*/

/*top page animation*/

/*main_v*/

@keyframes scaleUp {
	0% {
		opacity: 0;
		-webkit-transform: scale(0,0) translateY(30vw);
		transform: scale(0,0) translateY(30vw);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(100%,100%) translateY(0);
		transform: scale(100%,100%) translateY(0);
	}
}
@keyframes scaleUpRight {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
		-webkit-transform: scale(0,0) translate(30vw,-30vw);
		transform: scale(0,0) translate(30vw,-30vw);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(100%,100%) translate(0,0);
		transform: scale(100%,100%) translate(0,0);
	}
}
@keyframes slideDown {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	27% {
		opacity: 1;
		transform: translateY(0);
	}
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes slideDown2 {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	27% {
		opacity: 0;
		transform: translateY(-10px);
	}
	54% {
		opacity: 1;
		transform: translateY(0);
	}
	86% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes slideDown3 {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	54% {
		opacity: 0;
		transform: translateY(-10px);
	}
	81% {
		opacity: 1;
		transform: translateY(0);
	}
	92% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes slideInLeft {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
		-webkit-transform: scale(0,0) translate(10vw,10vw);
		transform: scale(0,0) translate(10vw,10vw);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(100%, 100%) translate(0, 0);
		transform:  scale(100%, 100%) translate(0, 0);
	}	
}
@keyframes slideInRight {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
		-webkit-transform:  scale(0,0) translate(-10vw,10vw);
		transform:  scale(0,0) translate(-10vw,10vw);
	}
	100% {
		opacity: 1;
		-webkit-transform:  scale(100%,100%) translate(0,0);
		transform:  scale(100%,100%) translate(0,0);
	}
}
@keyframes slideInDown {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
		-webkit-transform:  scale(0,0) translateY(10vw);
		transform:  scale(0,0) translateY(10vw);
	}
	100% {
		opacity: 1;
		-webkit-transform:  scale(100%,100%) translateY(0);
		transform:  scale(100%,100%) translateY(0);
	}
}
/*~main_v*/

/*welcome_section*/

@keyframes slide1 {
	0% {
		left: 0;
		top: 0;	
		z-index: 1;
		transform: rotateZ(-12deg) scale(1);
	}
	33% {
		left: 123px;
		top: 60px;
		z-index: 2;
		transform: rotateZ(-12deg);
	}
	66% {
		left: 246px;
		top: 120px;
		z-index: 3;
		transform: rotateZ(0) scale(1);
	}
	82.5% {
		transform: scale(0.5);
		z-index: -1;
	}
	100% {
		left: 0;
		top: 0;
		z-index: 1;
		transform: rotateZ(-12deg) scale(1);
	}
}
@keyframes slide2 {
	0% {
		left: 123px;
		top: 60px;
		z-index: 2;	
		transform: rotateZ(-12deg) scale(1);
	}
	33% {
		left: 246px;
		top: 120px;
		z-index: 3;
		transform: rotateZ(0) scale(1);
		
	}
	49.5% {
		transform: rotateZ(-12deg) scale(0.5);
		z-index: -1;
	}
	66% {
		left: 0;
		top: 0;
		z-index: 1;
		transform: rotateZ(-12deg) scale(1);
	}
	100% {
		left: 123px;
		top: 60px;
		z-index: 2;
	}
}
@keyframes slide3 {
	0% {
		left: 246px;
		top: 120px;
		z-index: 3;	
		transform: rotateZ(0) scale(1);
	}
	16.5% {
		transform: scale(0.5);
		z-index: -1;
	}
	33% {
		left: 0;
		top: 0;
		z-index: 1;
		transform: rotateZ(-12deg) scale(1);
	}
	66% {
		left: 123px;
		top: 60px;
		z-index: 2;
		transform: rotateZ(-12deg);
	}
	100% {
		left: 246px;
		top: 120px;
		z-index: 3;
		transform: rotateZ(0);
	}
}

@keyframes welcome_bg {
	100% {
		background-position: 94px 0;
	}
}



/*~welcome_section*/

/*second_section*/

/*a_link*/
@keyframes aHover {
	16.5% {
		transform: scale(1.1);
	}
	33% {
		transform: scale(0.8);
	}
	66% {
		transform: scale(1.1);
	}
	82.5% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1);
	}
}
/*~a_link*/

/*guide_section*/
@keyframes circle_anime {
	50% {
		transform: translateY(100px);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes circle_anime_up {
	50% {
		transform: translateY(-100px);
	}
	100% {
		transform: translateY(0);
	}
}
/*~guide_section*/


/*~second_section*/

/*access_section*/
@keyframes g1_anime {
	0% {
		transform: translateX(-100%)
	}
	100%{
		transform: translateX(100%);
	}
}
/*~access_section*/

/*greeting_section*/
@keyframes greeting_bg {
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*~greeting_section*/



/*~top page animation*/