/*
----------------------------------------

animation

----------------------------------------
*/


/* fade-in
---------------------------------------- */

.fade-in {
	opacity: 0;
	visibility: hidden;
	transition: all .8s .4s;
}

.inview.view .fade-in {
	opacity: 1;
	visibility: visible;
}

.bg-fade-in-before::before,
.bg-fade-in-after::after {
	opacity: 0;
	visibility: hidden;
	transition: all .8s .8s;
}

.bg-fade-in-before.inview.view::before,
.bg-fade-in-before:has( .inview.view )::before,
.bg-fade-in-after.inview.view::after,
.bg-fade-in-after:has( .inview.view )::after {
	opacity: 1;
	visibility: visible;
}


/* fade-in
---------------------------------------- */

.fade-in-list > * {
	opacity: 0;
	visibility: hidden;
	transition: all .6s .2s;
}

.inview.view .fade-in-list > * {
	opacity: 1;
	visibility: visible;
}

.inview.view .fade-in-list > *:nth-child( 1 ) {
	transition-delay: .2s;
}

.inview.view .fade-in-list > *:nth-child( 2 ) {
	transition-delay: .4s;
}

.inview.view .fade-in-list > *:nth-child( 3 ) {
	transition-delay: .6s;
}

.inview.view .fade-in-list > *:nth-child( 4 ) {
	transition-delay: .8s;
}

.inview.view .fade-in-list > *:nth-child( 5 ) {
	transition-delay: 1s;
}

.inview.view .fade-in-list > *:nth-child( 6 ) {
	transition-delay: 1.2s;
}

.inview.view .fade-in-list > *:nth-child( 7 ) {
	transition-delay: 1.4s;
}

.inview.view .fade-in-list > *:nth-child( 8 ) {
	transition-delay: 1.6s;
}

.inview.view .fade-in-list > *:nth-child( 9 ) {
	transition-delay: 1.8s;
}

.inview.view .fade-in-list > *:nth-child( 10 ) {
	transition-delay: 2s;
}


/* fade-up
---------------------------------------- */

.fade-up > * {
	opacity: 0;
	visibility: hidden;
	transform: translateY( 80px );
	transition: all .6s .2s;
}

.inview.view .fade-up > * {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.inview.view .fade-up > *:nth-child( 1 ) {
	transition-delay: .2s;
}

.inview.view .fade-up > *:nth-child( 2 ) {
	transition-delay: .4s;
}

.inview.view .fade-up > *:nth-child( 3 ) {
	transition-delay: .6s;
}

.inview.view .fade-up > *:nth-child( 4 ) {
	transition-delay: .8s;
}

.inview.view .fade-up > *:nth-child( 5 ) {
	transition-delay: 1s;
}

.inview.view .fade-up > *:nth-child( 6 ) {
	transition-delay: 1.2s;
}

.inview.view .fade-up > *:nth-child( 7 ) {
	transition-delay: 1.4s;
}

.inview.view .fade-up > *:nth-child( 8 ) {
	transition-delay: 1.6s;
}

.inview.view .fade-up > *:nth-child( 9 ) {
	transition-delay: 1.8s;
}

.inview.view .fade-up > *:nth-child( 10 ) {
	transition-delay: 2s;
}

.inview.view .fade-up > *:nth-child( 11 ) {
	transition-delay: 2.2s;
}

.inview.view .fade-up > *:nth-child( 12 ) {
	transition-delay: 2.4s;
}

.inview.view .fade-up > *:nth-child( 13 ) {
	transition-delay: 2.6s;
}

.inview.view .fade-up > *:nth-child( 14 ) {
	transition-delay: 2.8s;
}

.inview.view .fade-up > *:nth-child( 15 ) {
	transition-delay: 3s;
}

.inview.view .fade-up > *:nth-child( 16 ) {
	transition-delay: 3.2s;
}

.inview.view .fade-up > *:nth-child( 17 ) {
	transition-delay: 3.4s;
}

.inview.view .fade-up > *:nth-child( 18 ) {
	transition-delay: 3.6s;
}

.inview.view .fade-up > *:nth-child( 19 ) {
	transition-delay: 3.8s;
}

.inview.view .fade-up > *:nth-child( 20 ) {
	transition-delay: 4s;
}

/* zoom-out
---------------------------------------- */

.zoom-out {
	transform: scale( 1.2 );
	opacity: 0;
	visibility: hidden;
	transition: all .8s .2s;
}

.inview.view .zoom-out {
	transform: scale( 1 );
	opacity: 1;
	visibility: visible;
}


/* mov-ttl
---------------------------------------- */

@keyframes mov-box {
	0% {
		width: 0;
		left: 0;
		right: auto;
		transform: none;
	}
	35% {
		width: 100%;
		left: 0;
		right: 0;
	}
	36% {
		width: 100%;
		left: auto;
		right: 0;
	}
	100% {
		width: 0;
		left: auto;
		right: 0;
		transform: skewX( -45deg );
	}
}

@keyframes mov-ttl {
	0% {
		opacity: 0;
		transform: rotateX( 45deg );
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

.mov-ttl {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

.mov-ttl.center {
	align-items: center;
}

.mov-ttl.row {
	flex-direction: row;
}

.mov-ttl > * {
	display: inline-block !important;
	padding-right: .5em;
	position: relative;
	transform: rotateX( 45deg ) rotateY( -45deg );
	opacity: 0;
}

.mov-ttl.center > * {
	padding-left: .5em;
}

.mov-ttl > *::after {
	content: '';
	width: 0;
	background: #000;
	position: absolute;
	top: 10%;
	right: auto;
	bottom: 10%;
	left: 0;
}

.mov-ttl.color-mov-box > *::after {
	background: var( --main-color );
}

.view .mov-ttl > * {
	animation: mov-ttl .4s ease-in-out .2s 1 normal forwards;
}

.view .mov-ttl > * + * {
	animation: mov-ttl .4s ease-in-out .4s 1 normal forwards;
}

.view .mov-ttl > * + * + * {
	animation: mov-ttl .4s ease-in-out .6s 1 normal forwards;
}

.view .mov-ttl > *::after {
	animation: mov-box .6s ease-in-out .4s 1 normal forwards;
}

.view .mov-ttl > * + *::after {
	animation: mov-box .6s ease-in-out .8s 1 normal forwards;
}

.view .mov-ttl > * + * + *::after {
	animation: mov-box .6s ease-in-out 1.2s 1 normal forwards;
}


/*
----------------------------------------

768

----------------------------------------
*/

@media screen and ( max-width: 768px ) {

	.mov-ttl > *.sp-2l::after {
		display: none;
	}

}