@charset "UTF-8";

/* ====================================
	utility
 ==================================== */

/* フォント */
.font-bold {
	font-weight: bold;
}

/* マージン */
.ma {
	margin-left: auto;
	margin-right: auto;
}

/* スクロール連動アニメ */
.scroll-in {
	transition-property: all;
	transition-duration: 1.0s;
	transition-delay: 0s;
	transition-timing-function: ease;
}

.scroll-in.fade {
	opacity: 1;
}

.scroll-in.fade:not(.passed) {
	opacity: 0;
}

.scroll-in.move-lr:not(.passed) {
	transform: translate(-80px, 0);
}

.scroll-in.move-rl:not(.passed) {
	transform: translate(80px);
}

.scroll-in.move-tb:not(.passed) {
	transform: translate(0, 80px);
}

.scroll-in.move-bt:not(.passed) {
	transform: translate(0, -80px);
}

.scroll-in.scale-up:not(.passed) {
	transform: scale(0.8);
}

.scroll-in.scale-down:not(.passed) {
	transform: scale(1.2);
}


/* ループアニメ */
.loop-anime {
	animation-duration: 2.4s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-fill-mode: none;
	animation-play-state: running;
}

.loop-anime.updown {
	animation-name: updown;
}

@keyframes updown {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(0, -10px);
	}
}

.loop-anime.rotate_l {
	animation-name: rotate_l;
}

@keyframes rotate_l {
	0% {
		transform: rotate(-3deg);
	}

	100% {
		transform: rotate(3deg);
	}
}

.loop-anime.rotate_r {
	animation-name: rotate_r;
}

@keyframes rotate_r {
	0% {
		transform: rotate(3deg);
	}

	100% {
		transform: rotate(-3deg);
	}
}

/* パラパラアニメーション */
.koma-img {
	padding-top: 80%;
}

.koma2 {
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 200% 100%;
	animation: parapara-2koma 1.4s steps(2) infinite;
}

@keyframes parapara-2koma {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 200% 0;
	}
}

.koma3 {
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 300% 100%;
	animation: parapara-3koma 1.2s steps(3) infinite;
}

@keyframes parapara-3koma {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 150% 0;
	}
}

.koma4 {
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 400% 100%;
	animation: parapara-4koma 1.6s steps(4) infinite;
}

@keyframes parapara-4koma {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 133.3333333% 0;
	}
}

.koma5 {
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 500% 100%;
	animation: parapara-4koma 1.6s steps(5) infinite;
}

@keyframes parapara-5koma {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 125% 0;
	}
}

.koma6 {
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 600% 100%;
	animation: parapara-4koma 1.6s steps(6) infinite;
}

@keyframes parapara-6koma {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 120% 0;
	}
}