@charset "utf-8";

/* =============== */
.who_ttl {
		opacity: 0;
		animation: fadeIn 0.5s linear forwards;
		animation-delay: 0.9s;
}
.who_figure {
		opacity: 0;
		transform: translateY(200px);
		animation: jumpTo 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.7s;
}
/* =============== */

/* =============== */
.whatwedo_ttl {
		opacity: 0;
		animation: fadeIn 0.5s linear forwards;
		animation-delay: 0.9s;
}
.whatwedo_figure {
		opacity: 0;
		transform: translateY(200px);
		animation: jumpTo 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.7s;
}
/* =============== */
.crew_ttl {
		opacity: 0;
		animation: fadeIn 0.5s linear forwards;
		animation-delay: 0.9s;
}

.crew_figure .shadow {
		opacity: 0;
		transform: translateY(200px);
		animation: jumpTo 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.7s;
}
.crew_figure .people {
		opacity: 0;
		transform: translateY(200px);
		animation: jumpTo 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.7s;
}

/* =============== */
.work_ttl {
		opacity: 0;
		animation: fadeIn 0.5s linear forwards;
		animation-delay: 0.9s;
}
.work_figure {
		opacity: 0;
		transform: rotate(-10deg);
		animation: astronaut 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.7s;
}
.astronaut {
		animation: astronaut 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes astronaut {
		0% {
				transform: rotate(-10deg);
				opacity: 0;
		}
		50% {
				opacity: 1;
		}
		100% {
				transform: rotate(0deg);
				opacity: 1;
		}
}
/* =============== */
.fadeIn {
		animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeIn {
		0% {
				opacity: 0;
		}
		100% {
				opacity: 1;
		}
}
.jumpTo {
		animation: jumpTo 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes jumpTo {
		0% {
				opacity: 0;
				transform: translateY(200px);
		}
		100% {
				opacity: 1;
				transform: translateY(0);
		}
}
.fadeInNml {
		opacity: 0;
		transition: opacity 0.2s linear;
		will-change: opacity;
}
.fadeInActive {
		opacity: 1;
		transform: scale(1);
}
.fadeInNmlActive {
		opacity: 1;
}
.fadeInDownActive {
		opacity: 1;
		transform: translateY(0);
}
.fadeInLeftActive {
		opacity: 1;
		transform: translateX(0);
}