/**
 * トップページ・メインビジュアル用CSS
 * 対応機能：
 * - 動画終了後画像
 * - PC表示幅制限
 * - 動画再生前のSWELL標準ポスター表示
 */

/* =========================================================
 * 動画再生前のポスター画像
 * ========================================================= */

#main_visual .p-mainVisual__imgLayer,
.p-mainVisual .p-mainVisual__imgLayer {
	position: relative;
}

#main_visual .meri-mv-loading-poster,
.p-mainVisual .meri-mv-loading-poster {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	transition:
		opacity 0.18s ease,
		visibility 0s linear 0.18s;
	z-index: 3;
}

#main_visual .meri-mv-loading-poster.is-hidden,
.p-mainVisual .meri-mv-loading-poster.is-hidden {
	opacity: 0;
	visibility: hidden;
}

#main_visual .meri-mv-loading-poster img,
.p-mainVisual .meri-mv-loading-poster img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}


/* =========================================================
 * 動画終了後画像
 * ========================================================= */

#main_visual .meri-mv-end-image,
.p-mainVisual .meri-mv-end-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.5s ease;
	z-index: 4;
}

#main_visual .meri-mv-end-image.is-visible,
.p-mainVisual .meri-mv-end-image.is-visible {
	opacity: 1;
	visibility: visible;
}

#main_visual .meri-mv-end-image img,
.p-mainVisual .meri-mv-end-image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center;
}

#main_visual video,
.p-mainVisual video {
	transition: opacity 0.5s ease;
}

#main_visual video.meri-mv-is-finished,
.p-mainVisual video.meri-mv-is-finished {
	opacity: 0 !important;
	visibility: hidden !important;
}


/* =========================================================
 * PC表示幅制限
 * ========================================================= */

@media screen and (min-width: 960px) {

	/*
	 * JavaScriptの実測前も、SWELLのコンテナ変数を利用して
	 * 最終形に近い幅で表示する。
	 * FV全体を透明にする旧pending方式は使用しない。
	 */
	html.meri-mv-content-width-enabled
		#main_visual:not(.meri-mv-content-width-limited),
	html.meri-mv-content-width-enabled
		.p-mainVisual:not(.meri-mv-content-width-limited) {
		box-sizing: border-box !important;
		width: calc(
			100%
			- var(--swl-pad_container, 32px)
			- var(--swl-pad_container, 32px)
		) !important;
		max-width: var(--container_size, 1200px) !important;
		margin-right: auto !important;
		margin-left: auto !important;
		margin-inline: auto !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	#main_visual.meri-mv-content-width-limited,
	.p-mainVisual.meri-mv-content-width-limited {
		box-sizing: border-box !important;
		width:
			var(
				--meri-mv-aligned-width,
				100%
			)
			!important;
		max-width:
			var(
				--meri-mv-aligned-width,
				100%
			)
			!important;
		margin-right: 0 !important;
		margin-left:
			var(
				--meri-mv-left-offset,
				0px
			)
			!important;
		margin-inline-start:
			var(
				--meri-mv-left-offset,
				0px
			)
			!important;
		margin-inline-end: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	/*
	 * 制限後のFV内部を横幅いっぱいに保つ。
	 */
	#main_visual.meri-mv-content-width-limited
		video,
	#main_visual.meri-mv-content-width-limited
		.p-mainVisual__video,
	#main_visual.meri-mv-content-width-limited
		.p-mainVisual__imgLayer,
	#main_visual.meri-mv-content-width-limited
		.meri-mv-loading-poster,
	#main_visual.meri-mv-content-width-limited
		.meri-mv-end-image,
	.p-mainVisual.meri-mv-content-width-limited
		video,
	.p-mainVisual.meri-mv-content-width-limited
		.p-mainVisual__video,
	.p-mainVisual.meri-mv-content-width-limited
		.p-mainVisual__imgLayer,
	.p-mainVisual.meri-mv-content-width-limited
		.meri-mv-loading-poster,
	.p-mainVisual.meri-mv-content-width-limited
		.meri-mv-end-image {
		width: 100% !important;
		max-width: 100% !important;
	}
}