@charset "utf-8";
/* CSS Document */

	.moviePc {
  margin-bottom: 2em;
  text-align: center;
  /* 中央寄せのために、子要素がインラインブロックまたはブロック要素の場合は margin: 0 auto; も有効 */
}

/* iframe とファサード要素両方に共通のサイズとアスペクト比を適用 */
/* 既存の .moviePc iframe に加えて、.moviePc .youtube-facade も指定 */
.moviePc iframe,
.moviePc .youtube-facade {
  width: clamp(100px, 90%, 640px);
  /* height は aspect-ratio で自動計算されるため通常は不要 */
  aspect-ratio: 16 / 9;
  /* text-align: center の効果を受けさせるために、子要素をブロック要素にして中央に配置 */
  display: block;
  margin: 0 auto;
}

/* ファサード要素に特有のスタイル */
.moviePc .youtube-facade {
  position: relative; /* サムネイルとボタンを絶対配置するため */
  cursor: pointer;
  overflow: hidden; /* 子要素（サムネイル）がはみ出さないように */
  background-color: #000; /* ロード中の背景色など */
}

.moviePc .youtube-facade .youtube-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* サムネイル画像が要素を覆うように */
  display: block;
  transition: opacity 0.3s ease; /* ホバーエフェクトなど */
}

.moviePc .youtube-facade .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none; /* ボタン自体がクリックを捕捉しないように（親の.youtube-facadeでクリックを検出） */
}

/* （オプション）ホバー時のエフェクト */
.moviePc .youtube-facade:hover .youtube-thumbnail {
  opacity: 0.8;
}

/* iframe が追加された後にファサード要素が削除されるため、iframe には既存の .moviePc iframe スタイルが適用されます */