/* =========================
   HERO 全体
   ========================= */

/* ヒーロー直後の要素の上マージンが中に食い込むのを防止 */
.hero + * {
	margin-top: 0 !important;
}

.hero {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #fff;
}

@media (max-width:767px) {
	.hero {
		width: 100vw;
		aspect-ratio: 7 / 5;
	}

}

/* 画像（フェードなし） */
.hero > .hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero > .hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 動画ラッパー */
.hero-video-wrap {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
}

.hero-video-wrap video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}

/* ポスター（クロスフェード用） */

/* ポスター（最初は白ボケ状態） */
.hero-poster {
	position: absolute;
	inset: 0;
	z-index: 3;
	opacity: 1;
}

/* 画像自体をぼかして少し明るく、わずかに拡大（切替時の揺れ軽減） */
.hero-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: blur(10px) brightness(1.1) saturate(0.9);
	transform: scale(1.02);
	transition: filter .35s ease, transform .35s ease, opacity .6s ease;     /* 最後にフェードで消える */
	will-change: filter, transform, opacity;
}

/* 白のベール（ほんのり白を足す） */
.hero-poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .80);     /* 濃すぎたら .25〜.35 に */
	transition: opacity .35s ease;
	pointer-events: none;
}

/* ① canplay 直後 → まずボケを解除（画像がシャキッとする） */
.hero-poster.is-smooth img {
	filter: blur(0) brightness(1) saturate(1);
	transform: none;
}

.hero-poster.is-smooth::after {
	opacity: 0;     /* 白ベールも外す */
}

/* ② 少し遅らせてフェードアウト（切替の“パッ”感を消す） */
.hero-poster.is-fading {
	opacity: 0;
	transition: opacity .6s ease .15s;     /* .15s 遅延してから消える */
}

/* ユーザーが動きを減らす設定のときは、ボケを使わず素直に即フェード */
@media (prefers-reduced-motion:reduce) {
	.hero-poster img {
		filter: none;
		transform: none;
	}

	.hero-poster::after {
		opacity: 0;
	}

	.hero-poster.is-fading {
		transition-delay: 0s;
	}

}

/* フェード（動画だけ） */

/* --- 既存：fallback（古いブラウザ用）。一旦そのまま残す --- */
.hero-video-wrap::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 25%;     /* PC用フェード（fallback） */
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%);
	z-index: 4;
	pointer-events: none;
}

/* --- マスク対応ブラウザでは「全デバイスでマスク」に切り替え --- */
@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))) {

	/* 下層の固定画像は透け先になるので隠す（初期表示は .hero-poster が担保） */
	.hero > .hero-img {
		display: none;
	}

	/* 透ける先は純白に（＝白フェードに見せる） */
	.hero {
		background: #fff;
	}

	/* ::after のオーバーレイは使わない */
	.hero-video-wrap::after {
		display: none;
	}

	/* PCもスマホもマスクで“下だけ”白に溶かす */
	.hero-video-wrap {
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}

	/* PC：下6〜8%だけフェード（お好みで調整） */
	@media (min-width:768px) {
		.hero-video-wrap {
			-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 92%,                     /* ←ここまで完全表示 */
			rgba(0, 0, 0, 0) 100%

			/* 下端だけフェード */);
			mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
		}

	}

	/* スマホ：下10%だけフェード（既に使っている設定） */
	@media (max-width:767px) {
		.hero-video-wrap {
			-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
			mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 100%);
		}

	}

}

/* SP/PC 切り替え */
.hero-video--desktop {
	display: none;
}

.hero-video--mobile {
	display: block;
}

@media (min-width:768px) {
	.hero-video--desktop {
		display: block;
	}

	.hero-video--mobile {
		display: none;
	}

}

@media (max-width:767px) {
	.hero-video-wrap::after {
		height: 80px;         /* または 12–15vw */
		bottom: -2px;         /* 隙間対策 */
	}

}