@charset "utf-8";

/*----------------------------------------------
	common
---------------------------------------------*/
@keyframes fadeBlur {
	0% {
		opacity: 0;
		filter: blur(30px);
	}
	100% {
		opacity: 1;
		filter: blur(0);
	}
}
@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/*----------------------------------------------
	logo
---------------------------------------------*/
@keyframes logoMove {
	0% {
		width: 20%;
		max-width: 200px;
	}
	20% {
		width: 20%;
		max-width: 200px;
		transform: translateY(-150%);
	}
	40% {
		width: 15%;
		max-width: 150px;
		transform: translateY(-150%);
	}
	100% {
		width: 15%;
		max-width: 150px;
		transform: translateY(0);
	}
}
@keyframes logoMoveSP {
	0% {
		width: 45%;
		max-width: 115px;
	}
	20% {
		width: 45%;
		max-width: 115px;
		transform: translateY(-150%);
	}
	40% {
		width: 30%;
		max-width: 100px;
		transform: translateY(-150%);
	}
	100% {
		width: 30%;
		max-width: 100px;
		transform: translateY(0);
	}
}

/*----------------------------------------------
	menu
---------------------------------------------*/
@keyframes menuTopMove {
	0% {
		transform: translateY(0);
	}
	10% {
		transform: translateY(2px);
	}
	15% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(2px);
	}
	25% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes menuBtmMove {
	0% {
		transform: translateY(0);
	}
	10% {
		transform: translateY(-2px);
	}
	15% {
		transform: translateY(0);
	}
	20% {
		transform: translateY(-2px);
	}
	25% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}

/*----------------------------------------------
	mv
---------------------------------------------*/
@keyframes fadeRight {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes fadeLeft {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes fadeRightSkew {
	0% {
		opacity: 0;
		transform: translateX(-50px) skewX(12deg);
	}
	100% {
		opacity: 1;
		transform: translateX(0) skewX(12deg);
	}
}
@keyframes fadeLeftSkew {
	0% {
		opacity: 0;
		transform: translateX(50px) skewX(12deg);
	}
	100% {
		opacity: 1;
		transform: translateX(0) skewX(12deg);
	}
}