@charset "UTF-8";

.fv-slide-down {
	animation-name: fv-slide-down;
	animation-duration: 2.0s;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-delay: 0.6s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	will-change: transform;
	opacity: 0;
}

@keyframes fv-slide-down {
	0% {
    opacity: 0;
    transform: translateY(-5%);
	}
	100% {
    opacity: 1;
    transform: translateY(0);
	}
}

.fv-fade {
	animation-name: fv-fade;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-delay: 1.4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	will-change: transform;
	opacity: 0;
}

@keyframes fv-fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fv-clippath-left{
	animation-name: fv-clippath-left;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-delay: 2.4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	will-change: transform;
	opacity: 0;
}

@keyframes fv-clippath-left {
	0% {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
	}
	100% {
		opacity: 1;
		clip-path: inset(0);
	}
}

.fv-slide-up {
	animation-name: fv-slide-up;
	animation-duration: 2.2s;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-delay: 2.2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	will-change: transform;
	opacity: 0;
}

@keyframes fv-slide-up {
	0% {
    opacity: 0;
    transform: translateY(6%);
	}
	100% {
    opacity: 1;
    transform: translateY(0);
	}
}

.fv-mask.is-active {
	animation-name: mask-fade;
	animation-duration: 1.6s;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 0.8);
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}

@keyframes mask-fade {
	0% {
    opacity: 0;
	}
	100% {
    opacity: 0.95;
	}
}

.slide-up,
.zoom-in,
.slide-left,
.fade,
.fade-label,
.clippath-left,
.mask-clippath-left,
.fv-clippath-left--cont {
	opacity: 0;
}

.slide-up.is-active {
	animation-name: slide-up;
	animation-duration: 0.8s;
	animation-timing-function: ease-in-out;
	animation-delay: 0.4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	will-change: transform;
}

@keyframes slide-up {
	0% {
    opacity: 0;
    transform: translateY(100%);
	}
	100% {
    opacity: 1;
    transform: translateY(0);
	}
}

.zoom-in.is-active {
	animation-name: zoom-in;
	animation-duration: 3s;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	will-change: transform;
}

@keyframes zoom-in {
	0% {
    opacity: 0;
    transform: scale(1.3);
	}
	100% {
    opacity: 1;
    transform: scale(1);
	}
}

.clippath-left.is-active {
	animation-name: clippath-left;
	animation-duration: 2s;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	will-change: transform;
}

.fv-clippath-left--cont.is-active,
.mask-clippath-left.is-active {
	animation-name: clippath-left;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-delay: .4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	will-change: transform;
}

.fv-clippath-left--cont.is-active {
	animation-delay: 2.4s;
}

@keyframes clippath-left {
	0% {
		opacity: 1;
		clip-path: inset(0 100% 0 0);
	}
	100% {
		opacity: 1;
		clip-path: inset(0);
	}
}

.slide-left.is-active {
	animation-name: slide-left;
	animation-duration: 2.4s;
	animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	will-change: transform;
}

@keyframes slide-left {
	0% {
    opacity: 0;
    transform: translateX(50%);
	}
	100% {
    opacity: 1;
    transform: translateX(0);
	}
}

.fade.is-active {
	animation-name: fade;
	animation-duration: .6s;
	animation-timing-function: ease-in-out;
	animation-delay: .2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	will-change: transform;
}

@keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fade-label.is-active {
	animation-name: fade-label;
	animation-duration: .6s;
	animation-timing-function: ease-in-out;
	animation-delay: .8s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	will-change: transform;
}

@keyframes fade-label {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.ttl-span span {
	display: inline-block;
	transform: translateY(-100%) rotate(90deg);
	transition: .8s ease-in-out;
}

.ttl-span.is-active span {
	transform: translateY(0) rotate(0);
}

.ttl-span span:nth-child(1) {
	transition-delay: 0s;
}.ttl-span span:nth-child(2) {
	transition-delay: .1s;
}.ttl-span span:nth-child(3) {
	transition-delay: .125s;
}.ttl-span span:nth-child(4) {
	transition-delay: .15s;
}.ttl-span span:nth-child(5) {
	transition-delay: .175s;
}.ttl-span span:nth-child(6) {
	transition-delay: .2s;
}.ttl-span span:nth-child(7) {
	transition-delay: .225s;
}.ttl-span span:nth-child(8) {
	transition-delay: .25s;
}.ttl-span span:nth-child(9) {
	transition-delay: .275s;
}.ttl-span span:nth-child(10) {
	transition-delay: .3s;
}.ttl-span span:nth-child(11) {
	transition-delay: .325s;
}.ttl-span span:nth-child(12) {
	transition-delay: .35s;
}.ttl-span span:nth-child(13) {
	transition-delay: .375s;
}