@charset "UTF-8";
/*
 * sub_layout.css
 *
 */

/* ==========================================================
 * 下層ページ メインビジュアル
 * ========================================================== */
.c-sub-mv {
	position: relative;
	width: 100%;
	padding-top: 110px;
	overflow: hidden;
}
.c-sub-mv__inner {
	position: relative;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 350px;
}
.c-sub-mv__illust {
	position: absolute;
	left: 5%;
	bottom: 10%;
	width: 28%;
	max-width: 320px;
	z-index: 1;
}
.c-sub-mv__illust img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}
.c-sub-mv__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	z-index: 2;
	width: max-content;
}
.c-sub-mv__icon {
	width: 46px;
	height: auto;
	margin-bottom: 20px;
}
.c-sub-mv__icon img {
	width: 100%;
	height: auto;
	display: block;
}
.c-sub-mv__title {
	font-size: 50px;
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
	letter-spacing: 0.04em;
}
.c-sub-mv__en {
	font-family: var(--font-family-en);
	font-size: 28px;
	font-weight: 600;
	color: var(--color-blue);
	letter-spacing: 0.06em;
}
.c-sub-mv__character {
	position: absolute;
	right: 5%;
	top: 10%;
	z-index: 1;
}
.c-sub-mv__character img {
	width: 164px;
	height: auto;
	display: block;
	animation: floatSanmaruSub 6s ease-in-out infinite;
}

/* ==========================================================
 * アニメーション初期設定（PC）
 * ========================================================== */
.c-sub-mv__icon,
.c-sub-mv__title,
.c-sub-mv__en {
	opacity: 0;
	transform: translateY(35px);
	transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-sub-mv__illust {
	opacity: 0;
	transform: translateX(-45px);
	transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.c-sub-mv__character {
	opacity: 0;
	transform: scale(0.9) translateY(-15px);
	transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================
 * 各ページ固有配置（PC）
 * ========================================================== */
/* 製品情報 */
.c-sub-mv--products .c-sub-mv__character {
	right: auto;
	left: 5%;
	top: 10%;
}
.c-sub-mv--products .c-sub-mv__character img {
	width: 117px;
}
.c-sub-mv--products .c-sub-mv__character img.sunbio {
	width: 164px;
}
.c-sub-mv--products .c-sub-mv__illust {
	left: auto;
	right: 5%;
	bottom: 10%;
	transform: translateX(45px);
}

/* アクセスマップ */
.c-sub-mv--access .c-sub-mv__character {
	right: auto;
	left: 5%;
	top: 10%;
}
.c-sub-mv--access .c-sub-mv__character img {
	width: 175px;
}
.c-sub-mv--access .c-sub-mv__illust {
	left: auto;
	right: 5%;
	bottom: 10%;
	transform: translateX(45px);
}

/* お問い合わせ */
.c-sub-mv--contact .c-sub-mv__character img {
	width: 175px;
}

/* ==========================================================
 * is-active 付与時のアニメーション到達地点
 * ========================================================== */
.c-sub-mv.is-active .c-sub-mv__icon {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.15s;
}
.c-sub-mv.is-active .c-sub-mv__title {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.35s;
}
.c-sub-mv.is-active .c-sub-mv__en {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.55s;
}
.c-sub-mv.is-active .c-sub-mv__illust {
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0.4s;
}
.c-sub-mv.is-active .c-sub-mv__character {
	opacity: 1;
	transform: scale(1) translateY(0);
	transition-delay: 0.6s;
}

@media screen and (max-width: 1039px) {
	.c-sub-mv {
		padding-top: 90px;
	}
	.c-sub-mv__inner {
		padding: 0 24px;
		height: 280px;
	}
	.c-sub-mv__icon {
		width: 38px;
		margin-bottom: 16px;
	}
	.c-sub-mv__title {
		font-size: 40px;
	}
	.c-sub-mv__en {
		font-size: 22px;
	}
	.c-sub-mv__illust {
		left: 4%;
		width: 28%;
		max-width: 260px;
	}
	.c-sub-mv__character img {
		width: 140px;
	}

	.c-sub-mv__icon,
	.c-sub-mv__title,
	.c-sub-mv__en {
		transform: translateY(30px);
	}
	.c-sub-mv__illust {
		transform: translateX(-35px);
	}
	.c-sub-mv__character {
		transform: scale(0.9) translateY(-15px);
	}

	.c-sub-mv--products .c-sub-mv__character {
		left: 4%;
	}
	.c-sub-mv--products .c-sub-mv__character img {
		width: 102px;
	}
	.c-sub-mv--products .c-sub-mv__character img.sunbio {
		width: 144px;
	}
	.c-sub-mv--products .c-sub-mv__illust {
		right: 4%;
		transform: translateX(35px);
	}

	.c-sub-mv--access .c-sub-mv__character {
		left: 4%;
	}
	.c-sub-mv--access .c-sub-mv__character img {
		width: 150px;
	}
	.c-sub-mv--access .c-sub-mv__illust {
		right: 4%;
		transform: translateX(35px);
	}

	.c-sub-mv--contact .c-sub-mv__character img {
		width: 150px;
	}
}

@media screen and (max-width: 767px) {
	.c-sub-mv {
		padding-top: 70px;
	}
	.c-sub-mv__inner {
		padding: 0 16px;
		height: 180px;
	}
	.c-sub-mv__icon {
		width: 24px;
		margin-bottom: 10px;
	}
	.c-sub-mv__title {
		font-size: 24px;
	}
	.c-sub-mv__en {
		font-size: 14px;
	}
	.c-sub-mv__illust {
		left: 10px;
		bottom: 5%;
		width: 32%;
		max-width: 170px;
	}
	.c-sub-mv__character {
		right: 10px;
		top: 14%;
	}
	.c-sub-mv__character img {
		width: 80px;
	}

	.c-sub-mv__icon,
	.c-sub-mv__title,
	.c-sub-mv__en {
		transform: translateY(20px);
	}
	.c-sub-mv__illust {
		transform: translateX(-20px);
	}
	.c-sub-mv__character {
		transform: scale(0.9) translateY(-15px);
	}

	.c-sub-mv--products .c-sub-mv__character {
		left: 15px;
		top: 14%;
	}
	.c-sub-mv--products .c-sub-mv__character img {
		width: 60px;
	}
	.c-sub-mv--products .c-sub-mv__character img.sunbio {
		width: 90px;
	}
	.c-sub-mv--products .c-sub-mv__illust {
		right: 10px;
		bottom: 5%;
		transform: translateX(20px);
	}

	.c-sub-mv--access .c-sub-mv__character {
		left: 15px;
		top: 14%;
	}
	.c-sub-mv--access .c-sub-mv__character img {
		width: 88px;
	}
	.c-sub-mv--access .c-sub-mv__illust {
		right: 10px;
		bottom: 5%;
		transform: translateX(20px);
	}

	.c-sub-mv--contact .c-sub-mv__character img {
		width: 88px;
	}
}