.fade0 {
	animation-name: fade0;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fade0 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* head-anime ---------------------------------------------------------------------------------------------- */
.fade01{
	animation-name: mv01;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv01 {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
.fade02-1{
	animation-name: mv02-1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade02-2{
	animation-name: mv02-2;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade02-3{
	animation-name: mv02-1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv02-1 {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
@keyframes mv02-2 {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.line-1{
	animation-name: line-1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .6s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.line-2{
	animation-name: line-2;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .6s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes line-1 {
	from {
		clip-path: inset(0 100% 0% 0%);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}
@keyframes line-2 {
	from {
		clip-path: inset(0 0% 0% 100%);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}

.fade03-1{
	animation-name: mv02-1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade03-2{
	animation-name: mv03-1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade03-3{
	animation-name: mv03-1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
	z-index: 10;
}
@keyframes mv03-1 {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
.fade04-0{
	animation-name: mv04-1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade04-1{
	animation-name: mv02-1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv04-1 {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

/* body-anime ---------------------------------------------------------------------------------------------- */
.fadein-txt-w {
	opacity : 0;
}
.fadein-txt-w.active{
	opacity : 1;
	animation-name: fadein-txt-w;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadein-txt-w2 {
	opacity : 0;
}
.fadein-txt-w2.active{
	opacity : 1;
	animation-name: fadein-txt-w;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadein-txt-w3 {
	opacity : 0;
}
.fadein-txt-w3.active{
	opacity : 1;
	animation-name: fadein-txt-w;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .6s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-txt-w {
	from {
		clip-path: inset(0 100% 0% 0);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}

.fadein-up1 {
	opacity : 0;
}
.fadein-up1.active{
	opacity : 1;
	animation-name: fadein-up1;
	animation-duration: .2s;
	animation-timing-function: ease-out;
	animation-delay: .2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadein-up2 {
	opacity : 0;
}
.fadein-up2.active{
	opacity : 1;
	animation-name: fadein-up1;
	animation-duration: .2s;
	animation-timing-function: ease-out;
	animation-delay: .4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadein-up3 {
	opacity : 0;
}
.fadein-up3.active{
	opacity : 1;
	animation-name: fadein-up1;
	animation-duration: .2s;
	animation-timing-function: ease-out;
	animation-delay: .6s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-up1 {
	0% {
		opacity: 0;
		transform: translateY(15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}