@charset "UTF-8";

/* ====================================
	utility
 ==================================== */
/* フォント */
.font-light {
	font-weight: 200;
}

.font-bold {
	font-weight: bold;
}

.font-medium {
	font-weight: 500;
}

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

.mt05em {
	margin-top: .5em;
}

.mt1em {
	margin-top: 1em;
}

/* リンク */
a.a-block {
	display: block;
	width: 100%;
	text-decoration: none;
}

/* マウスオーバー：フェード */
.hover-fade a,
a.hover-fade {
	transition: 0.5s ease 0s;
	-webkit-transition: 0.5s ease 0s;
	-moz-transition: 0.5s ease 0s;
	-ms-transition: 0.5s ease 0s;
}

.hover-fade a.hovering,
a.hover-fade.hovering {
	opacity: 0.6;
}

/* マウスオーバー：テキストアンダーライン＆フェード */
a.hover-parent {
	display: block;
	pointer-events: none;
	text-decoration: none;
}

a.hover-parent .hover-trigger {
	pointer-events: auto;
}

a.hover-parent span.hover-trigger {
	display: inline-block;
	/* IE, Edge 対応 */
}

a.hover-parent.hovering .hover-trigger {
	text-decoration: underline;
}

a.hover-parent.hovering .hover-trigger.fade {
	transition: 0.5s ease 0s;
	-webkit-transition: 0.5s ease 0s;
	-moz-transition: 0.5s ease 0s;
	-ms-transition: 0.5s ease 0s;
}

a.hover-parent.hovering .hover-trigger.fade {
	opacity: 0.6;
}

/* スクロール連動アニメ */
.scroll-fade-in {
	transition: all 1s ease;
}

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

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

.scroll-in {
	transition-property: all;
	transition-duration: 1.0s;
	transition-delay: 0s;
	transition-timing-function: ease;
}

.scroll-in.trdur2 {
	transition-duration: 1.7s;
}

.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, 40px);
}

.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;
}

.loop-anime.duration2 {
	animation-duration: 2.7s;
}

.loop-anime.duration3 {
	animation-duration: 2.3s;
}

@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;
	}
}