@charset "UTF-8";

/* =========================================================
 * FV（ファーストビュー）
 * ========================================================= */

.fv-section {
	position: relative;
	overflow: hidden;
	max-height: 100vh;
	margin-top: 3rem !important;
	padding-top: 15vh !important;
	box-sizing: border-box;
}

.fv-maratang {
	position: relative;
	overflow: visible;
	opacity: 0;
	transform: scale(1.28);
	transform-origin: center center;
	will-change: opacity, transform;
}

.fv-maratang.is-in {
	animation: swell-child-fv-maratang-in 4.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fv-logo {
	opacity: 0;
	will-change: opacity;
}

.fv-logo.is-in {
	animation: swell-child-fv-logo-in 1s ease-out forwards;
}

.fv-maratang img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

.fv-logo img {
	display: block;
	width: 80%;
	max-width: 80%;
	height: auto;
	vertical-align: bottom;
	margin: 0 auto;
}

/* =========================================================
 * 固定煙オーバーレイ（白色だけの透過PNG）
 * ========================================================= */
.sc-steam-cloud {
	display: block;
	position: absolute;
	left: 50%;
	top: 0;
	/* transform は animation keyframe で管理（translateX + scale） */
	width: 90%;
	max-width: 1300px;
	height: auto;
	pointer-events: none;
	z-index: 100;
	opacity: 0;
	transform: translateX(-50%) scale(1.28);
}

.sc-steam-cloud.is-in {
	animation: sc-steam-cloud-in 4.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes sc-steam-cloud-in {
	from {
		opacity: 0;
		transform: translateX(-50%) scale(1.28);
	}
	to {
		opacity: 0.6;
		transform: translateX(-50%) scale(1);
	}
}

/* =========================================================
 * 湯気（麻辣湯と同じ出現。下端はセクションの上から70%）
 * ========================================================= */
.fv-steam {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 101;
	overflow: visible;
}

.fv-steam__layer {
	position: absolute;
	top: auto;
	bottom: 30%;
	left: 0;
	right: 0;
	width: 827px;
	height: min(68vw, 700px);
	margin-inline: auto;
	background: url("../img/fv-steam.png?v=smoke-2") no-repeat center bottom / contain;
	transform: scale(1.28);
	transform-origin: center bottom;
	opacity: 0;
	pointer-events: none;
}

.fv-section.is-steam-on .fv-steam__layer {
	animation: fv-steam-in 4.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fv-steam-in {
	from { opacity: 0; transform: scale(1.28); }
	to   { opacity: 0.8; transform: scale(1); }
}

/* =========================================================
 * FVアニメーション（麻辣湯・ロゴ）
 * ========================================================= */

@keyframes swell-child-fv-maratang-in {
	from { opacity: 0; transform: scale(1.28); }
	to   { opacity: 1; transform: scale(1); }
}

/* PC：湯気の大きさ（SPには干渉しない） */
@media (min-width: 1000px) {
	.fv-steam {
		top: 0;
		bottom: 0;
	}

	.fv-steam__layer {
		width: 827px;
		height: min(110vh, 1080px);
		background-size: contain;
	}
}

@keyframes swell-child-fv-logo-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes swell-child-fv-maratang-in-sp {
	0% { opacity: 0; transform: translate(-50%, 0) scale(1.28); }
	100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* スマホ（1000px未満） */
@media (max-width: 999px) {
	.fv-section {
		height: 100vh;
	}

	.fv-section > .swell-block-fullWide__inner {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: min(100%, var(--article_size, 900px));
		height: auto;
		margin-inline: auto;
		padding-top: 15vh;
		box-sizing: border-box;
	}

	.fv-logo {
		width: 262.6px !important;
		max-width: 100%;
		margin-inline: auto;
	}

	.fv-logo img {
		margin-top: 1rem !important;
	}

	.fv-maratang {
		position: absolute;
		top: 40%;
		left: 50%;
		width: 190% !important;
		max-width: none;
		margin: 0;
		transform: translate(-50%, 0) scale(1.28);
	}

	.fv-maratang.is-in {
		animation-name: swell-child-fv-maratang-in-sp;
	}

	.sc-steam-cloud {
		top: auto;
		bottom: 3rem;
		width: 279% !important;
		max-width: none;
	}

	.fv-steam__layer {
		left: 0;
		right: 0;
		bottom: 40%;
		width: 100%;
		max-width: none;
		height: auto;
		aspect-ratio: 511 / 712;
		margin-inline: auto;
		background-image: url("../img/fv-steam-sp.png?v=sp-1");
	}
}

/* アクセシビリティ */
@media (prefers-reduced-motion: reduce) {
	.fv-maratang,
	.fv-logo {
		opacity: 1;
		transform: none;
		animation: none;
		will-change: auto;
	}

	.sc-steam-cloud {
		opacity: 0.6;
		transform: translateX(-50%) scale(1);
		animation: none;
	}

	.fv-steam,
	.fv-steam__layer {
		animation: none;
	}

	.fv-section.is-steam-on .fv-steam__layer {
		opacity: 0.8;
		transform: scale(1);
	}
}

@media (max-width: 999px) and (prefers-reduced-motion: reduce) {
	.fv-maratang {
		transform: translate(-50%, 0);
	}
}