@charset "utf-8";

/* common */
@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes naname {
	0% {
		opacity: 0;
		transform: translateY(50px) rotate(5deg);
	}
	100% {
		opacity: 1;
		transform: translateY(0) rotate(0);
	}
}

@keyframes run {
	0% {
		opacity: 0;
		transform: translateX(50px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes swipe {
	0% {
		transform: translateX(0);
		opacity: 0;
	}
	20% {
		transform: translateX(0);
		opacity: 1;
	}
	40% {
		transform: translateX(0);
		opacity: 1;
	}
	80% {
		transform: translateX(-50px);
		opacity: 1;
	}
	90% {
		transform: translateX(-50px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 0;
	}
}
@media screen and (max-width: 768px) {
	@keyframes swipe {
		0% {
			transform: translateX(0);
			opacity: 0;
		}
		20% {
			transform: translateX(0);
			opacity: 1;
		}
		40% {
			transform: translateX(0);
			opacity: 1;
		}
		80% {
			transform: translateX(-20px);
			opacity: 1;
		}
		90% {
			transform: translateX(-20px);
			opacity: 0;
		}
		100% {
			transform: translateX(0);
			opacity: 0;
		}
	}
}