@charset "UTF-8";

#fv-area {
    height: 100vh;
}
#fv-area img {
	width: 20vw;
	position: absolute;
	top: 30vh;
	left: 15vw;
}

#fv-icon-1 {
	z-index: 3;
	animation: fv-anime-icon1 3s linear 0s 1;
}
#fv-icon-2 {
	z-index: 2;
	animation: fv-anime-icon2 3s linear 0s 1;
}
#fv-icon-3 {
	z-index: 1;
	animation: fv-anime-icon3 3s linear 0s 1;
}
@keyframes fv-anime-icon1 {
	0% {
		top: -400px;
		left: 40vw;
		opacity: 0;
		transform : rotate3d(0.3,0.8,0.2,260deg);
	}
	60% {
		opacity: 1;
		transform : rotate3d(0,0,0,0);
		top: 30vh;
		left: 40vw;
		filter: drop-shadow(0 0 0px #fff);
	}
	70% {
		filter: drop-shadow(0 0 20px #fff);
	}
	80% {
		top: 30vh;
		left: 40vw;
		filter: drop-shadow(0 0 0px #fff);
	}
	90% {
		left: 40vw;
	}
	100% {
		left: 15vw;
	}
}
@keyframes fv-anime-icon2 {
	0% {
		top: -200px;
		left: 40vw;
		opacity: 0;
		transform : rotate3d(0.8,0.6,0.1,480deg);
	}
	60% {
		opacity: 1;
		transform : rotate3d(0,0,0,0);
		top: 30vh;
		left: 40vw;
		filter: drop-shadow(0 0 0px #fff);
	}
	70% {
		filter: drop-shadow(0 0 20px #fff);
	}
	80% {
		top: 30vh;
		left: 40vw;
		filter: drop-shadow(0 0 0px #fff);
	}
	90% {
		left: 40vw;
	}
	100% {
		left: 15vw;
	}
}
@keyframes fv-anime-icon3 {
	0% {
		top: -600px;
		left: 40vw;
		opacity: 0;
		transform : rotate3d(0.5,0.2,0.9,240deg);
	}
	60% {
		opacity: 1;
		transform : rotate3d(0,0,0,0);
		top: 30vh;
		left: 40vw;
		filter: drop-shadow(0 0 0px #fff);
	}
	70% {
		filter: drop-shadow(0 0 20px #f00);
	}
	80% {
		top: 30vh;
		left: 40vw;
		filter: drop-shadow(0 0 0px #fff);
	}
	90% {
		left: 40vw;
	}
	100% {
		left: 15vw;
	}
}

#fv-name {
	color: #fff;
	font-size: 8vw;
	position: absolute;
	top: 30vh;
	right: 15vw;
	letter-spacing: .3em;
	animation: fv-anime-name 3s ease-out 0s 1;
}

@keyframes fv-anime-name {
	0% {
		opacity: 0;
		right: 30vw;
	}
	95% {
		opacity: 0;
		right: 20vw;
	}
	100% {
		opacity: 1;
		right: 15vw;
	}
}