[data-module=FadeIn] {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

[data-module=FadeIn].is-FadeIn {
  opacity: 1;
  transform: translateY(0);
}

.load {
	opacity: 1;
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: #fff;
	animation: 2s load ease-out forwards;
}
.load img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 81.5px;
	height: 48.5px;
	z-index: 10;
}
.load img.open1 {
	animation: 1s loadimg1 ease-out forwards;
	animation-iteration-count: 1.5;
}
.load img.open2 {
	animation: 1s loadimg2 ease-out forwards;
	animation-iteration-count: 1.5;
}
@keyframes load{
	0%{
		opacity: 1;
		z-index: 99999;
	}
	75% {
		opacity: 1;
	}
	100%{
		opacity: 0;
		z-index: -1;
	}
}
@keyframes loadimg1{
	0%{
		transform: translate(-50%,-50%);
	}
	50% {		
		transform: translate(-50%,-50%) rotate(-15deg);
	}
	100%{
		transform: translate(-50%,-50%);
	}
}
@keyframes loadimg2{
	0%{
		transform: translate(-50%,-50%);
	}
	50% {
		transform: translate(-50%,-50%) rotate(15deg);
	}
	100%{
		transform: translate(-50%,-50%);
	}
}
.top header {
	animation: 1s fade ease-out forwards;
	animation-delay: 3.5s;
	opacity: 0;
}
@keyframes fade{
	0%{
		transform: translatey(-30px);
		opacity: 0;
	}
	100%{
		transform: translatey(0);
		opacity: 1;
	}
}
.p-top__mv {
	animation: 2s mvfade ease-out forwards;
	animation-delay: 2.5s;
	opacity: 0;
}
@keyframes mvfade{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}