@charset "utf-8";

/*--------------------*/
/*--- animation.css --*/
/*--------------------*/

/* 120px下から下からフェードインしながらふわっと */
.box_1 {
	opacity: 0;
	transform: translateY(120px);
}
.box_1.active {
	opacity: 1;
	transform: translateY(0px);
	transition: all 0.7s;
}


/* その場でふわっと */
.box_2 {
	opacity: 0;
}
.box_2.active {
	opacity: 1;
	transition: all 1.3s;
	transition-delay: 0.2s;
}


/* 60px下からフェードインしながらふわっと */
.box_3 {
	opacity: 0;
	transform: translateY(60px);

}
.box_3.active {
	opacity: 1;
	transform: translateY(0px);
	transition: all 0.8s ease;
	transition-delay: 0.2s;
}


/* FAQのアニメーション */
.boxFaq {
	opacity: 0;
	transform: translateY(60px);
	transition: all 0.8s ease;
}
.boxFaq.active {
	opacity: 1;
	transform: translateY(0px);
}


/* レッスンページ 特徴 */
.characteristicBox {
	opacity: 0;
	transform: translateY(60px);
	transition: all 0.6s;
}
.characteristicBox.active:nth-child(1) {
	opacity: 1;
	transform: translateY(0px);
	transition-delay: 0ms;
}
.characteristicBox.active:nth-child(2) {
	opacity: 1;
	transform: translateY(0px);
	transition-delay: 100ms;
}
.characteristicBox.active:nth-child(3) {
	opacity: 1;
	transform: translateY(0px);
	transition-delay: 200ms;
}
.characteristicBox.active:nth-child(4) {
	opacity: 1;
	transform: translateY(0px);
	transition-delay: 300ms;
}
.characteristicBg.box_2.active {
	transition-delay: 380ms;
}


/* レッスンページ 受講生の声 */
.voiceBox.box_2.active {
	transition: all 1.0s;
	transition-delay: 0s;
}


/* レッスンページ ステップ */
.stepBox {
	opacity: 0;
	transform: translateY(-60px) scale(0.6);
	transition: all 0.6s;
}
.stepBox.active:nth-child(1) {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	transition-delay: 0ms;
}
.stepBox.active:nth-child(2) {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	transition-delay: 100ms;
}
.stepBox.active:nth-child(3) {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	transition-delay: 200ms;
}
.flowBtnBox {
	opacity: 0;
	transform: translateY(-60px);
	transition: all 0.6s;
}
.flowBtnBox.active {
	opacity: 1;
	transform: translate(0, 0);
	transition-delay: 200ms;
}


/* Firefox用のプレフィックス */
@-moz-document url-prefix() {
	/* body {
		position: relative;
	}
	body::before {
		content: "これはFirefoxです";
		position: fixed;
		top: 0px;
		left: 0;
		z-index: 999;
	} */

	* .active * {
		transform: rotate(0.0001deg);
	}
}