@charset "UTF-8";
/* CSS Document */
/*
	opening
-----------------------------------------------------------------------------------------------*/
@keyframes opening{
	0%{
		opacity: 1;
	}
	40%{
		opacity: 0;
	}
	100%{
		display: none;
		opacity: 0;
		z-index: -999;
	}
}
@keyframes opFade{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
/*
	kv
-----------------------------------------------------------------------------------------------*/
/* slick */
.slick-active img{
	animation: slick-img 4.7s ease-out 0s forwards;
}
@keyframes slick-img {
	0%{
		transform: scale(1.05);
	}
	98%{
		transform: scale(1.0);
	}
}
@media screen and (max-width:812px){
	.slick-active img{
		animation: slick-img-sp 4.7s ease-out 0s forwards;
		transform: scale(1.1);
	}
}
@keyframes slick-img-sp {
	0%{
		transform: scale(1.15);
	}
	98%{
		transform: scale(1.1);
	}
	100%{
		transform: scale(1.1);
	}
}
.slick-active button::after{
	animation: progress 4.9s linear forwards;
}
@keyframes progress{
	from{
		width: 0%;
	}
 
	to{
		width: 100%;
	}
}
/* copy */
.kv__copy{
	animation: copy-in .9s ease-out 3.7s forwards;
}
.is-active .kv__copy{
	animation: copy-in 1.6s linear .5s forwards;
}
@keyframes copy-in{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
/*
	page-top
-----------------------------------------------------------------------------------------------*/
#page-top.UpMove{
	animation: UpAnime 0.7s forwards;
}
@keyframes UpAnime{
	from {
		opacity: 0;
		transform: rotate(90deg) translateY(-80px);
	}
	to {
		opacity: 1;
		transform: rotate(90deg) translateY(0);
	}
}
#page-top.DownMove{
	animation: DownAnime 0.9s forwards;
}
@keyframes DownAnime{
	from {
		opacity: 1;
		transform: rotate(90deg) translateY(0);
	}
	to {
		opacity: 1;
		transform: rotate(90deg) translateY(-80px);
	}
}
/*
	common
-----------------------------------------------------------------------------------------------*/
/* 起点 */
.jsAnm{
	opacity: 0;
}
/* ふわっと */
.anmFadeIn.jsAnmStart{
	animation: anmFadeIn .6s ease 0.5s forwards;
}
@keyframes anmFadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
/* ふわっと消える */
.anmFadeOut.jsAnmStart{
	animation: anmFadeOut .8s ease 0.5s forwards;
}
@keyframes anmFadeOut{
	from{
		opacity: 1;
	}
	to{
		opacity: 0;
	}
}
/* 下からふわっと */
.anmFadeUp.jsAnmStart{
	animation: anmFadeUp .8s ease 0.5s forwards;
}
.anmFadeUp02.jsAnmStart{
	animation: anmFadeUp .8s ease 0.7s forwards;
}
@keyframes anmFadeUp{
	from{
		opacity: 0;
		transform: translateY(40px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* 上からふわっと */
.anmFadeDown.jsAnmStart{
	animation: anmFadeDown .8s ease 0.5s forwards;
}
@keyframes anmFadeDown{
	from{
		opacity: 0;
		transform: translateY(-40px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* 右からふわっと */
.anmFadeRight.jsAnmStart{
	animation: anmFadeRight .8s ease 0.5s forwards;
}
@keyframes anmFadeRight{
	from{
		opacity: 0;
		transform: translateX(20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
/* 左からふわっと */
.anmFadeLeft.jsAnmStart{
	animation: anmFadeLeft .8s ease 0.5s forwards;
}
@keyframes anmFadeLeft{
	from{
		opacity: 0;
		transform: translateX(-20px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
/* ページ全体 */
#wrapper{
	opacity: 0;
	animation: anmFadeIn 0.8s ease 0.2s forwards;
}