/* ------------------------------
* フェードインアイテム
------------------------------- */
/* フェードイン */
.fadeIn {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s, transform 0.6s;
}

.fadeIn.is-inview {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.4s;
}

/* フェードイン（一回のみ） */
.fadeIn_one {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s, transform 0.6s;
}

.fadeIn_one.is-inview {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.3s;
}

/* 左からフェードイン（一回のみ） */
.fadeLeft_one {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.8s, transform 0.6s;
}
.fadeLeft_one.is-inview {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.3s;
}

/* 右からフェードイン（一回のみ） */
.fadeRight_one {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.8s, transform 0.6s;
}
.fadeRight_one.is-inview {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.3s;
}

/* ------------------------------
* 画像をぼかしからくっきり表示アニメーション
------------------------------- */
.blurImg {
	opacity: 0;
	transition: transform 0.5s linear;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.blurImg.is-blur {
	-webkit-animation-name: imageBlur;
	animation-name: imageBlur;
	opacity: 1;
	transition: 0.8s;
}

@-webkit-keyframes imageBlur {
	from {
		opacity: 0;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-ms-filter: blur(15px);
		-o-filter: blur(15px);
		filter: blur(15px);
	}

	to {
		opacity: 1;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-ms-filter: blur(0px);
		-o-filter: blur(0px);
		filter: blur(0px);
	}
}
@keyframes imageBlur {
	from {
		opacity: 0;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-ms-filter: blur(15px);
		-o-filter: blur(15px);
		filter: blur(15px);
	}

	to {
		opacity: 1;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-ms-filter: blur(0px);
		-o-filter: blur(0px);
		filter: blur(0px);
	}
}

/* ------------------------------
* 1文字ずつ登場するテキストアニメーション（複数行対応）
------------------------------- */
[data-text-wrap] {
	display: inline-block;
}

[data-text-inner] {
	display: block;
	width: 0.001%;
	overflow-x: hidden;
	background-color: transparent;
}

@keyframes text {
	0% {
		width: 0.001%;
	}
	100% {
		width: 100%;
	}
}

/* ------------------------------
* 画像や文字を目隠ししてから表示アニメーション
------------------------------- */
.effect {
	position: relative;
	opacity: 0;
}

.effect.active {
	opacity: 1;
}

.effect::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0%;
	right: 100%;
	bottom: 0%;
	left: 0%;
	background: #e95544;
}

.effect.active {
	animation-name: kf_c01a;
	animation-duration: 2s;
	animation-delay: 1.5s;
	animation-fill-mode: forwards;
	opacity: 1;
}

.effect.active::before {
	animation-name: kf_c01b;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

@keyframes kf_c01a {
	100% {
		color: inherit;
	}
}
@keyframes kf_c01b {
	50% {
		left: 0%;
		right: 0%;
	}
	100% {
		left: 100%;
		right: 0%;
	}
}

/* ------------------------------
* ボトムトゥトップアニメーション
------------------------------- */
@keyframes showTextFromBottom {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0px);
	}
}
.bottom-to-top-animation span {
	animation: showText 3s backwards;
	display: inline-block;
}
.bottom-to-top-animation > span {
	overflow: hidden;
}
.bottom-to-top-animation > span > span {
	animation: showTextFromBottom 0.5s backwards;
}