@charset "utf-8";


/* +++++++++++++++++++++++++　アニメーション */

.effect-b{
	position:relative;
	transform: translateY(7%);
	opacity:0;
	-webkit-transition: all .9s; transition: all .9s;
}
.effect-b.active{
	position:relative;
	transform: translateY(0);
	opacity:1;
}

/* +++++++++++++++++++++++++　features */


.features-list.ori-anime li{
	position: relative;
	transform: translateY(7%);
	opacity: 0;
	transition: all .9s;
}

.features-list.ori-anime.active li{
	position: relative;
	transform: translateY(0);
	opacity: 1;
}

.features-list.ori-anime.active li:nth-child(1){ transition-delay: .1s; }
.features-list.ori-anime.active li:nth-child(2){ transition-delay: .3s; }
.features-list.ori-anime.active li:nth-child(3){ transition-delay: .5s; }
.features-list.ori-anime.active li:nth-child(4){ transition-delay: .7s; }





/* +++++++++++++++++++++++++　MV */

#mv .bg-images{
	opacity:0;
	transform:scale(1.12);
}
@media screen and (min-width:768px){
/*PC*/
	#page-inner-navi{
		transform:translateY(-100%);
	}

	#page-inner-navi.is-loaded{
		animation:page-navi-in 1.4s cubic-bezier(.16,1,.3,1) 3.6s forwards;
	}

}

#mv .mv-cover{
	position:absolute;
	inset:0;
	z-index:200;
	transform:translateX(0);
	pointer-events:none;
}
#mv .cover01{
	z-index:201;
	background:url(../img/anime_logo.png) no-repeat center center / 20% auto #1A0620;
}
#mv .cover02{
	background:url(../img/anime_cover_bg.jpg) no-repeat center center / cover #A01FD1;
}


#mv.is-loaded .bg-images{
	animation:mv-image-in 2.6s cubic-bezier(.16,1,.3,1) 2.3s forwards;
}

#mv.is-loaded .cover01{
	animation:mv-cover01 1.2s cubic-bezier(.77,0,.18,1) 0.5s forwards;
}

#mv.is-loaded .cover02{
	animation:mv-cover02 1.2s cubic-bezier(.77,0,.18,1) 1s forwards;
}


@media screen and (max-width:768px){
/*SP*/
	#mv .mv-cover{
		position: fixed;
		height:100dvh;
	}
	#mv .cover01{
		background:url(../img/anime_logo.png) no-repeat center center / 50% auto #1A0620;
	}
	
}

/* ++++++++++++ */

@keyframes mv-cover01{
	0%{
		transform:translateX(0);
	}
	50%{
		transform:translateX(0);
	}
	100%{
		transform:translateX(100%);
	}
}
@keyframes mv-cover02{
	0%{
		transform:translateX(0);
	}
	55%{
		transform:translateX(0);
	}
	100%{
		transform:translateX(100%);
	}
}

/* ++++++++++++ */

@keyframes mv-image-in{
	0%{
		opacity:0;
		transform:scale(1.4);
		filter:blur(10px);
	}
	15%{
		opacity:1;
	}
	40%{
		transform:scale(1.2);
		filter:blur(0);
	}

	100%{
		opacity:1;
		transform:scale(1);
		filter:blur(0);
	}
}

/* ++++++++++++ */

@keyframes page-navi-in{
	0%{
		transform:translateY(-100%);
	}
	100%{
		transform:translateY(0);
	}

}