@charset "UTF-8";

/* inview設定 */
.inview {
	opacity: 0.2;
	transition: 0.8s ease-out;
	-webkit-transition: 0.8s ease-out;
	-moz-transition: 0.8s ease-out;
	-ms-transition: 0.8s ease-out;
	-o-transition: 0.8s ease-out;
}

.inview.inview-up {
	transform: translate(0, 40px);
	-webkit-transform: translate(0, 40px);
	-moz-transform: translate(0, 40px);
	-ms-transform: translate(0, 40px);
	-o-transform: translate(0, 40px);
}

.inview.inview-left {
	transform: translate(-160px, 0);
	-webkit-transform: translate(-160px, 0);
	-moz-transform: translate(-160px, 0);
	-ms-transform: translate(-160px, 0);
	-o-transform: translate(-160px, 0);
}

.inview.inview-right {
	transform: translate(160px, 0);
	-webkit-transform: translate(160px, 0);
	-moz-transform: translate(160px, 0);
	-ms-transform: translate(160px, 0);
	-o-transform: translate(160px, 0);
}

.inview:nth-child(1) {
	transition-delay: 0.0s;
}

.inview:nth-child(2) {
	transition-delay: 0.3s;
}

.inview:nth-child(3) {
	transition-delay: 0.6s;
}

.inview:nth-child(4) {
	transition-delay: 0.9s;
}

.inview:nth-child(5) {
	transition-delay: 1.1s;
}

.inview:nth-child(6) {
	transition-delay: 1.3s;
}

.inview.is-show {
	opacity: 1;
	transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
}


/* アニメーション inview-anime.js --------------------- */

.inview-anime {
	opacity: 0;
}

.inview-anime.is-show {
	opacity: 1;
}

.inview-anime.is-show.inview-grd * {
	-webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(180deg, var(--light-grey) 10%, var(--white) 20%, var(--light-grey) 30%);
    background-position: right center;
    background-size: 100% 400%;
    color: transparent !important;
	overflow: hidden;
	animation: txtGrd 0.5s ease-in-out forwards;
}

@keyframes txtGrd {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: center 100%;
	}
}

/* テキストアニメーション inview-le-scale-y-in.js */
.inview-anime.leScaleYIn {
	overflow: hidden;
	position: relative;
}
.inview-anime.leScaleYIn span {
	opacity: 0;
	display: inline-block;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}

/* テキストアニメーション inview-le-scale-y-in.js */
.inview-anime.is-show.leScaleYIn span { 
	animation-name: leScaleYIn;
}

/* @keyframes leScaleYIn {
    0% {
		color: var(--medium-grey);
        opacity: 1;
		transform: translateY(5%) rotate(30deg);
    }
	30% {
		color: var(--medium-grey);
	}
	30.0001% {
		color: var(--primary-color);
	}
	35% {
		color: var(--primary-color);
	}
	35.0001% {
		color: var(--medium-grey);
		transform: translateY(-2%) rotate(-10deg);
	}
	60% {
		color: var(--medium-grey);
	}
	60.0001% {
		color: inherit;
	}
    100% { 
		opacity: 1;
		color: inherit;
		transform: translateY(0) rotate(0);
	}
} */

@keyframes leScaleYIn {
    0% {
		color: var(--black);
        opacity: 1;
		transform: translateY(5%) rotate(30deg);
    }
	30% {
		color: var(--black);
	}
	30.0001% {
		color: var(--dark-grey);
	}
	35% {
		color: var(--dark-grey);
	}
	35.0001% {
		color: var(--dark-grey);
		transform: translateY(-2%) rotate(-10deg);
	}
	60% {
		color: var(--dark-grey);
	}
	60.0001% {
		color: inherit;
	}
    100% { 
		opacity: 1;
		color: inherit;
		transform: translateY(0) rotate(0);
	}
}