@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;
}


/* キャラクターが下から登場 */
.fv__visual img {
    animation: character-rise 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes character-rise {
    0% {
        transform: translate(-50%, 100%);
    }

    75% {
        transform: translate(-50%, 0);
    }

    88% {
        transform: translate(-50%, 3%);
    }

    100% {
        transform: translate(-50%, 0);
    }
}

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce) {
    .fv__visual img {
        animation: none;
    }
}

@media screen and (max-width: 767px) {
    .point__card.delay-time02,
    .point__card.delay-time04 {
        animation-delay: 0s;
    }
}