@charset "utf-8";

@keyframes fadeUp {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes ctaFadeup {
	0% {
		opacity: 0;
		transform: translateY(130px);
	}
	100% {
		opacity: 1;
		transform: translateY(80px);
	}
}
@keyframes ctaFadeupSP {
	0% {
		opacity: 0;
		transform: translateY(80px);
	}
	100% {
		opacity: 1;
		transform: translateY(40px);
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes slideIn {
	0% {
		left: -100%;
	}
	100% {
		left: 0;
	}
}
@keyframes slideOut {
	0% {
		left: 0;
	}
	100% {
		left: calc(100% + 10px);
	}
}
@keyframes flipIn {
	0% {
		transform: rotateY(90deg);
	}
	100% {
		transform: rotateY(0deg);
	}
}
@keyframes shine {
	0% {
		left: -180px;
	}
	20% {
		left: calc(100% + 180px);
	}
	100% {
		left: calc(100% + 180px);
	}
}
@keyframes bound {
	0% {
		opacity: 0;
		transform: scale(1.2);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
	60% {
		transform: scale(1.08);
	}
	80% {
		transform: scale(1);
	}
	90% {
		transform: scale(1.02);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes boundUp {
	0% {
		opacity: 0;
		transform: scale(1.2) translateY(-20px) translateX(-5px);
	}
	50% {
		opacity: 1;
		transform: scale(1) translateY(-20px) translateX(-5px);
	}
	60% {
		transform: scale(1.08) translateY(-20px) translateX(-5px);
	}
	80% {
		transform: scale(1) translateY(-20px) translateX(-5px);
	}
	90% {
		transform: scale(1.02) translateY(-20px) translateX(-5px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(-20px) translateX(-5px);
	}
}
@keyframes shadowView {
	0% {
		text-shadow: 0 0 0 var(--key-color);
	}
	100% {
		text-shadow: 7px 7px 0 var(--key-color);
	}
}
@keyframes shadowViewSP {
	0% {
		text-shadow: 0 0 0 var(--key-color);
	}
	100% {
		text-shadow: 4px 4px 0 var(--key-color);
	}
}
@keyframes moveIn {
	0% {
		transform: rotate(-15deg);
	}
	100% {
		transform: rotate(-0deg);
	}
}