@charset "UTF-8";


/* +++++++++ delay +++++++++ */
.delay02 { animation-delay: .2s; }
.delay04 { animation-delay: .4s; }
.delay06 { animation-delay: .6s; }
.delay08 { animation-delay: .8s; }
.delay10 { animation-delay: 1s; }
.delay12 { animation-delay: 1.2s; }
.delay14 { animation-delay: 1.4s; }

/* +++++++++ animationLine +++++++++ */
.animationLine {
	position: relative;
	display: inline-block;
}
.animationLine::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 100%;
	transform: translateY(-50%);
	background-color: var(--main-color);
	border-radius: 9999px;
}
.animationLine.is-active::before {
	animation-name: line;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}
.en .animationLine::before {
	height: 90%;
}
.animationLine.lineBlue::before {
	background-color: var(--accent-color-blue);
}
.animationLine.lineYellow::before {
	background-color: var(--accent-color-yellow);
}
.animationLine.lineGreen::before {
	background-color: var(--accent-color-green);
}
.animationLine.lineMainColor::before {
	background-color: var(--main-color);
}
@keyframes line {
	0% { left: 0; width: 0; }
	50% { left: 0; width: 100%; }
	100% { left: 100%; width: 0; }
}

/* +++++++++ animationText +++++++++ */
.animationText {
	display: inline-block;
	opacity: 0;
}
.animationText.is-active,
.is-active .animationText {
	animation-name: text;
	animation-duration: .5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	animation-delay: .7s;
}
@keyframes text {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* +++++++++ animationFlipLeft +++++++++ */
.animationFlipLeft {
	perspective-origin: left center;
	opacity: 0;
}
.animationFlipLeft.is-active {
	animation-name: flipLeft;
	animation-duration: .5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
@keyframes flipLeft {
	from {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
		opacity: 0;
	}
	to {
		transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
		opacity: 1;
	}
}

/* +++++++++ animationFadeIn +++++++++ */
.animationFadeIn {
	opacity: 0;
}
.animationFadeIn.is-active {
	animation-name: fadeIn;
	animation-duration: .5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* +++++++++ animationFadeUp +++++++++ */
.animationFadeUp {
	opacity: 0;
}
.animationFadeUp.is-active {
	animation-name: fadeUp;
	animation-duration: .5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(50px); }
	to { opacity: 1; transform: translateY(0); }
}

/* +++++++++ animationFadeDown +++++++++ */
.animationFadeDown {
	opacity: 0;
}
.animationFadeDown.is-active {
	animation-name: fadeDown;
	animation-duration: .5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
@keyframes fadeDown {
	from { opacity: 0; transform: translateY(-50px); }
	to { opacity: 1; transform: translateY(0); }
}