/* =========================================================
   First View
   ========================================================= */
.first-view {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--fv-height, 80vh);
	overflow: hidden;
}

.first-view__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.first-view__image,
.first-view__video,
.first-view__fallback {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* スマホ用画像が未設定の場合：767px以下では固定の vh 高さ・absolute配置
   ・object-fit をやめ、PC用画像を width:100%; height:auto の通常の
   img として表示する。画像自身の縦横比のぶんだけコンテナの高さが
   自動的に決まるため、上下左右に余白が出ることなく画像全体が
   幅いっぱいに表示される。
   オーバーレイ（.first-view__overlay）とブログパーツ
   （.first-view__content）は position: absolute のまま画像の上に
   重なるので、表示ロジックへの影響はない。
   ※ PC表示（768px以上）およびスマホ用画像が設定されている場合は
   従来どおり固定高さ＋object-fit: cover のままで、このブロックの
   影響を受けない。 */
@media (max-width: 767px) {
	.first-view:has(.is-sp-fit) {
		height: auto;
	}

	.first-view:has(.is-sp-fit) .first-view__media {
		position: static;
		height: auto;
	}

	.first-view:has(.is-sp-fit) .is-sp-fit {
		display: block;
		width: 100%;
		height: auto;
		object-fit: unset;
	}

	/* スライドショー：クロスフェードのため2枚目以降は絶対配置のまま
	   重ねるが、1枚目だけ通常フローに戻して高さの基準にする。
	   my-theme-fv画像サイズは全スライド共通のハードクロップのため、
	   どのスライドも縦横比が同じで高さがずれることはない。 */
	.first-view:has(.is-sp-fit) .first-view__slideshow {
		height: auto;
	}

	.first-view:has(.is-sp-fit) .first-view__slideshow > .first-view__slide:first-child,
	.first-view:has(.is-sp-fit) .first-view__slideshow > picture:first-child .first-view__slide {
		position: static;
	}
}

.first-view__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--fv-overlay-color, #000);
	opacity: var(--fv-overlay-opacity, .3);
	pointer-events: none;
}

.first-view__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container);
	padding: 0 var(--px);
	color: unset;
}

/* ブログパーツコンテナ：プラグイン等による color 上書きをリセット */
.first-view__content .blog-parts {
	color: revert;
}

/*
 * ブロックエディタのカラークラス優先度を確保
 * WordPress 6.4+ は :where(.has-*-color) で特異度 0 になるため、
 * .first-view__content を付けて (0,2,0) に引き上げる
 */
.first-view__content .has-white-color       { color: var(--wp--preset--color--white); }
.first-view__content .has-dark-color        { color: var(--wp--preset--color--dark); }
.first-view__content .has-navy-color        { color: var(--wp--preset--color--navy); }
.first-view__content .has-navy-dark-color   { color: var(--wp--preset--color--navy-dark); }
.first-view__content .has-navy-light-color  { color: var(--wp--preset--color--navy-light); }
.first-view__content .has-navy-pale-color   { color: var(--wp--preset--color--navy-pale); }
.first-view__content .has-bg-color          { color: var(--wp--preset--color--bg); }
.first-view__content .has-red-color         { color: var(--wp--preset--color--red); }
.first-view__content .has-pink-red-color    { color: var(--wp--preset--color--pink-red); }
.first-view__content .has-orange-color      { color: var(--wp--preset--color--orange); }
.first-view__content .has-yellow-color      { color: var(--wp--preset--color--yellow); }
.first-view__content .has-green-color       { color: var(--wp--preset--color--green); }
.first-view__content .has-light-green-color { color: var(--wp--preset--color--light-green); }

/* PC表示のみ：ブログパーツコンテナを左に寄せる（スマホは中央配置のまま） */
@media (min-width: 768px) {
	.first-view {
		justify-content: flex-start;
	}

	.first-view__content {
		margin-left: 100px;
	}
}

/* Slideshow */
.first-view__slideshow {
	position: relative;
	width: 100%;
	height: 100%;
}
.first-view__slideshow .first-view__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
}
.first-view__slideshow .first-view__slide.is-active {
	z-index: 1;
	opacity: 1;
}

/* =========================================================
   高さ：画像サイズに合わせる（auto）
   ・my-theme-fv画像サイズは全スライド共通のハードクロップ
   （1920x1080）のため、静止画・スライドショーいずれでも
   縦横比は常に同じになり、スライド切替時に高さがずれない。
   ・first-view__media を通常フローに戻して画像自身の高さを
   コンテナの高さとして採用し、overlayとcontentはコンテナに
   対してposition: absoluteで重ねる。
   ========================================================= */
.first-view--height-auto {
	height: auto;
}

.first-view--height-auto .first-view__media {
	position: static;
	height: auto;
}

.first-view--height-auto .first-view__image,
.first-view--height-auto .first-view__video,
.first-view--height-auto .first-view__fallback {
	display: block;
	width: 100%;
	height: auto;
	object-fit: unset;
}

.first-view--height-auto .first-view__slideshow {
	height: auto;
}

.first-view--height-auto .first-view__slideshow > .first-view__slide:first-child,
.first-view--height-auto .first-view__slideshow > picture:first-child .first-view__slide {
	position: static;
}

.first-view--height-auto .first-view__content {
	position: absolute;
	inset: 0;
	margin: auto;
	height: fit-content;
}

@media (min-width: 768px) {
	.first-view--height-auto .first-view__content {
		left: 100px;
		right: auto;
		margin-left: 0;
	}
}