@charset "UTF-8";

/*fadeUp（下からふわっと現れる）──────────────────────────────*/
.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*rotateY（Y軸でくるっと回転）──────────────────────────────*/
.rotateY {
	animation-name: rotateYAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}
@keyframes rotateYAnime {
	from {
		transform: rotateY(0);
		opacity: 0;
	}
	to {
		transform: rotateY(-360deg);
		opacity: 1;
	}
}

/* zoomIn（拡大しながら表示）──────────────────────────────*/
.zoomIn {
	animation-name: zoomInAnime;
	animation-duration: 4s;
	animation-fill-mode: forwards;
}
@keyframes zoomInAnime {
	from {
		transform: scale(0.5);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.rotateYTrigger,
.zoomInTrigger {
	opacity: 0;
}

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time02 {
	animation-delay: 0.2s;
}
.delay-time04 {
	animation-delay: 0.4s;
}
.delay-time06 {
	animation-delay: 0.6s;
}