/**
 * Movie セクション（[docodemo_movie]）
 * 既存セクションの見出し様式（Roboto Serif ラベル + BIZ UDPMincho 見出し）を踏襲。
 */

.dcdm-movie {
	background-color: #211a14;
	padding: 76px 20px;
	text-align: center;
}

.dcdm-movie__label {
	margin: 0 0 10px;
	font-family: "Roboto Serif", serif;
	font-size: 17px;
	font-weight: 300;
	letter-spacing: 0.14em;
	color: #ffffff;
}

.dcdm-movie__title {
	margin: 0 0 44px;
	font-family: "BIZ UDPMincho", serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.7;
	color: #ffffff;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* ---- ステージ（16:9・角丸・シネマティック枠） ---- */

.dcdm-movie__stage {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 16px;
	background-color: #000000;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.dcdm-movie__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/*
 * iframe を上下 60px ずつはみ出させ、YouTube のタイトルバー（上）と
 * 透かし（下）が描画されるレターボックス領域をクロップする。
 * 16:9 の映像自体は width 基準でフィットするため欠けない。
 */
.dcdm-movie__frame iframe {
	position: absolute;
	left: 0;
	top: -60px;
	width: 100%;
	height: calc(100% + 120px);
	border: 0;
	pointer-events: none; /* ホバーで YouTube UI を出さない。操作は自前オーバーレイで */
}

.dcdm-movie--no-crop .dcdm-movie__frame iframe {
	top: 0;
	height: 100%;
}

/* API 不通時のフォールバック（素の iframe・標準コントロール） */
.dcdm-movie__stage.is-fallback .dcdm-movie__frame iframe {
	top: 0;
	height: 100%;
	pointer-events: auto;
}

/* ---- ポスター（facade / 一時停止時のマスク） ---- */

.dcdm-movie__poster {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 1;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.dcdm-movie__stage.is-playing .dcdm-movie__poster {
	opacity: 0;
}

/* ---- クリックオーバーレイ + 再生アイコン ---- */

.dcdm-movie__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dcdm-movie__stage.is-fallback .dcdm-movie__overlay {
	display: none;
}

.dcdm-movie__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.82);
	color: #211a14;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.dcdm-movie__play svg {
	margin-left: 4px;
}

.dcdm-movie__overlay:hover .dcdm-movie__play,
.dcdm-movie__overlay:focus-visible .dcdm-movie__play {
	transform: scale(1.08);
}

.dcdm-movie__stage.is-playing .dcdm-movie__play {
	opacity: 0;
	transform: scale(0.85);
}

/* ---- サウンドトグル ---- */

.dcdm-movie__sound {
	position: absolute;
	right: 18px;
	bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.72);
	color: #211a14;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, background-color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.dcdm-movie__stage.is-playing .dcdm-movie__sound,
.dcdm-movie__stage.is-paused .dcdm-movie__sound {
	opacity: 1;
	pointer-events: auto;
}

.dcdm-movie__stage.is-fallback .dcdm-movie__sound {
	display: none;
}

.dcdm-movie__sound:hover,
.dcdm-movie__sound:focus-visible {
	background-color: rgba(255, 255, 255, 0.92);
}

.dcdm-movie__icon-sound {
	display: none;
}

.dcdm-movie__stage.is-muted .dcdm-movie__icon-muted {
	display: block;
}

.dcdm-movie__stage:not(.is-muted) .dcdm-movie__icon-muted {
	display: none;
}

.dcdm-movie__stage:not(.is-muted) .dcdm-movie__icon-sound {
	display: block;
}

/* ---- モバイル ---- */

@media (max-width: 767px) {
	.dcdm-movie {
		padding: 56px 16px;
	}

	.dcdm-movie__label {
		font-size: 15px;
	}

	.dcdm-movie__title {
		font-size: 21px;
		margin-bottom: 32px;
	}

	.dcdm-movie__stage {
		border-radius: 12px;
	}

	.dcdm-movie__play {
		width: 64px;
		height: 64px;
	}

	.dcdm-movie__sound {
		right: 12px;
		bottom: 12px;
		width: 42px;
		height: 42px;
	}
}