@charset "UTF-8";
/* CSS Document */
/*
	opening
-----------------------------------------------------------------------------------------------*/
#opening{
	animation: fadeOut 1.4s ease-in 5s forwards;
}
#opening.is-active{
	animation: opening 1.3s ease-out 3.0s forwards;
}
.opInner::before,
.opInner::after{
	animation: blur-anm2 2s cubic-bezier(0, 0.55, 0, 1) 1s forwards, fadeIn 2s ease 1.4s forwards, fadeOut 1s ease-in 7.5s forwards;
}
.fade01{
	animation: blur-anm2 2s cubic-bezier(0, 0.55, 0, 1) .4s forwards, fadeIn 2s ease .4s forwards, fadeOut 1s ease-in 7.5s forwards;
}
.fade02{
	animation: blur-anm2 2s cubic-bezier(0, 0.55, 0, 1) 2.4s forwards, fadeIn 2s ease 2.4s forwards, fadeOut 1s ease-in 7.5s forwards;
}
@keyframes opening{
	0%{
		opacity: 1;
	}
	40%{
		opacity: 0;
	}
	100%{
		display: none;	
		opacity: 0;
		z-index: -999;
	}
}
/*
	common
-----------------------------------------------------------------------------------------------*/
.fadeIn01{
	animation: blur-anm2 2s cubic-bezier(0, 0.55, 0, 1) 0.3s forwards, fadeIn 2s ease 0.5s forwards;
}
.fadeIn02{
	animation: blur-anm2 2s cubic-bezier(0, 0.55, 0, 1) 1.3s forwards, fadeIn 2s ease 1.5s forwards;
}
.fadeIn03{
	animation: blur-anm2 2s cubic-bezier(0, 0.55, 0, 1) 2.3s forwards, fadeIn 2s ease 2.5s forwards;
}
/*フェードインアニメーション*/
@keyframes fadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
/*背景 円*/
#wrapper::before{
	content: '';
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: scale(1);
	animation: blur-anm 1.2s ease-out 5.5s forwards, fadeOut .8s ease-out 5.5s forwards;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 1) 10%, rgba(0, 0, 0, 1) 30%);
	position: absolute;
	z-index: 1;
}
@media screen and (max-width: 812px){
	#wrapper::before{
		animation: blur-anm 1.2s ease-out 5.5s forwards, fadeOut 1.2s ease-out 5.5s forwards;
	}
}
#wrapper.is-active::before{
	animation: blur-anm 0s ease-out 0s forwards, fadeOut 0s ease-out 0s forwards;
}
@keyframes blur-anm{
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(10);
	}
}
/*フェードアウトアニメーション*/
@keyframes fadeOut {
  0% {
	opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
/*背景画像 大→小*/
.kvInner{
	filter: blur(100px);
	transform: scale(2);
	opacity: 0;
	animation: blur-anm2 .6s ease-out 5.8s forwards, scale 2.5s cubic-bezier(0, 0.55, 0, 1) 5.8s forwards, fadeIn 1s ease-out 5.8s forwards;
}
#kv.is-active .kvInner{
	animation: blur-anm2 .6s ease-out .2s forwards, scale 1.6s cubic-bezier(0, 0.55, 0, 1) .2s forwards, fadeIn 1s ease-out .2s forwards;
}
/* 起点 */
.jsAnm{
	opacity: 0;
}
/*画面内入ったらblur jsAnm*/
.blur01.jsAnmStart{
	animation: blur-anm2 1.6s cubic-bezier(0, 0.55, 0, 1) .4s forwards;
	opacity: 0;
}
.blur02.jsAnmStart{
	animation: blur-anm2 1.6s cubic-bezier(0, 0.55, 0, 1) .6s forwards;
	opacity: 0;
}
.blur03.jsAnmStart{
	animation: blur-anm2 1.6s cubic-bezier(0, 0.55, 0, 1) .8s forwards;
	opacity: 0;
}
.blur04.jsAnmStart{
	animation: blur-anm2 1.6s cubic-bezier(0, 0.55, 0, 1) 1s forwards;
	opacity: 0;
}
.blur05.jsAnmStart{
	animation: blur-anm2 1.6s cubic-bezier(0, 0.55, 0, 1) 1.2s forwards;
	opacity: 0;
}
.blur06.jsAnmStart{
	animation: blur-anm2 2s cubic-bezier(0, 0.55, 0, 1) 6s forwards;
	opacity: 0;
}
@media screen and (max-width: 812px){
	.blur06.jsAnmStart{
		animation: blur-anm2 2s cubic-bezier(0, 0.55, 0, 1) 4s forwards;
	}
}
#kv.is-active .blur06.jsAnmStart{
	animation: blur-anm2 2s cubic-bezier(0, 0.55, 0, 1) .4s forwards;
}
@keyframes blur-anm2{
	0% {
		filter: blur(100px);
		opacity: 0;
	}
	100% {
		filter: blur(0);
		opacity: 1;
	}
}
@keyframes scale{
	from {
		transform: scale(2);
	}
	to {
		transform: scale(1);
	}
}
/*タイトル下線 jsAnm*/
.ttlLine01.jsAnmStart{
	max-width: 500px;
	animation: border_anm 1.8s ease-out .4s forwards;
	border-bottom: 1px solid var(--red);
	opacity: 0;
} 
.ttlLine02.jsAnmStart{
	max-width: 605px;
	animation: border_anm 2s ease-out .4s forwards;
	border-bottom: 1px solid var(--red);
	opacity: 0;
} 
@keyframes border_anm{
	0%{
		width: 0%;
		opacity: 1;
	}
	100%{
		width: 100%;
		opacity: 1;
	}
}
/*オーバーレイ*/
.kvInner::before{
	opacity: 1;
	animation: dodge 1.4s ease-out 6s forwards;
}
#kv.is-active .kvInner::before{
	animation: dodge 1.4s ease-out .4s forwards;
}
@keyframes dodge{
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* 下からふわっと */
.anmFadeUp01.jsAnmStart{
	animation: anmFadeUp 1.4s ease .4s forwards, blur-anm2 1.4s cubic-bezier(0, 0.55, 0, 1) .4s forwards;
	opacity: 0;
}
.anmFadeUp02.jsAnmStart{
	animation: anmFadeUp 1.4s ease .6s forwards, blur-anm2 1.4s cubic-bezier(0, 0.55, 0, 1) .6s forwards;
	opacity: 0;
}
.anmFadeUp03.jsAnmStart{
	animation: anmFadeUp 1.4s ease .8s forwards, blur-anm2 1.4s cubic-bezier(0, 0.55, 0, 1) .8s forwards;
	opacity: 0;
}
.anmFadeUp04.jsAnmStart{
	animation: anmFadeUp 1.4s ease 1s forwards, blur-anm2 1.4s cubic-bezier(0, 0.55, 0, 1) 1s forwards;
	opacity: 0;
}
/*下からふわっと nav用*/
.navFadeUp01.jsAnmStart{
	animation: anmFadeUp 1.2s ease .2s forwards, blur-anm2 1.2s cubic-bezier(0, 0.55, 0, 1) .2s forwards;
	opacity: 0;
}
.navFadeUp02.jsAnmStart{
	animation: anmFadeUp 1.2s ease .4s forwards, blur-anm2 1.2s cubic-bezier(0, 0.55, 0, 1) .4s forwards;
	opacity: 0;
}
.navFadeUp03.jsAnmStart{
	animation: anmFadeUp 1.2s ease .6s forwards, blur-anm2 1.2s cubic-bezier(0, 0.55, 0, 1) .6s forwards;
	opacity: 0;
}
.navFadeUp04.jsAnmStart{
	animation: anmFadeUp 1.2s ease .8s forwards, blur-anm2 1.2s cubic-bezier(0, 0.55, 0, 1) .8s forwards;
	opacity: 0;
}
@keyframes anmFadeUp{
	from{
		opacity: 0;
		transform: translateY(30px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}
/* 右からふわっと */
.anmFadeRight01.jsAnmStart{
	animation: anmFadeRight 1.4s ease .4s forwards, blur-anm2 1.4s cubic-bezier(0, 0.55, 0, 1) .4s forwards;
}
.anmFadeRight02.jsAnmStart{
	animation: anmFadeRight 1.4s ease .6s forwards, blur-anm2 1.4s cubic-bezier(0, 0.55, 0, 1) .6s forwards;
}
@keyframes anmFadeRight{
	from{
		opacity: 0;
		transform: translateX(30px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
/* 左からふわっと */
.anmFadeLeft01.jsAnmStart{
	animation: anmFadeLeft 1.4s ease .4s forwards, blur-anm2 1.4s cubic-bezier(0, 0.55, 0, 1) .4s forwards;
}
.anmFadeLeft02.jsAnmStart{
	animation: anmFadeLeft 1.4s ease .6s forwards, blur-anm2 1.4s cubic-bezier(0, 0.55, 0, 1) .6s forwards;
}
@keyframes anmFadeLeft{
	from{
		opacity: 0;
		transform: translateX(-30px);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}
/*ページトップ arrow*/
#pageTop.UpMove{
	animation: UpAnime 0.7s forwards;
}
@keyframes UpAnime{
	from {
		opacity: 0;
		transform: rotate(90deg) translateX(50px);
	}
	to {
		opacity: 1;
		transform: rotate(90deg) translateX(0);
	}
}
#pageTop.DownMove{
	animation: DownAnime 0.9s forwards;
}
@keyframes DownAnime{
	from {
		opacity: 1;
		transform: rotate(90deg) translateX(0);
	}
	to {
		opacity: 0;
		transform: rotate(90deg) translateX(50px);
	}
}