@charset "utf-8";
/* -------------------------------- *\
    スクロールをしたら要素を動かす
\* -------------------------------- */
/* スクロールをしたら出現する要素にはじめに透過0を指定 */
.fadeLeftTrigger,
.fadeRightTrigger {
	opacity: 0;
}

/* 左からふわっ */
.fadeLeft {
	animation-name: fadeLeftAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeLeftAnime {
	from {
		opacity: 0;
		transform: translateX(-100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 右からふわっ */
.fadeRight {
	animation-name: fadeRightAnime;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeRightAnime {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* -------------------------------- *\
    アニメーション設定
\* -------------------------------- */
/* アニメーション自体が変化する時間を決めるCSS*/
.change-time1 {
	animation-duration: 1s;
}
.change-time15 {
	animation-duration: 1.5s;
}
.change-time2 {
	animation-duration: 2s;
}
.change-time25 {
	animation-duration: 2.5s;
}

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05 {
	animation-delay: 0.5s;
}
.delay-time1 {
	animation-delay: 1s;
}
.delay-time15 {
	animation-delay: 1.5s;
}
.delay-time2 {
	animation-delay: 2s;
}
.delay-time25 {
	animation-delay: 2.5s;
}