@charset "UTF-8";
/* ----------------------------------------------

 * SPECIAL MOVIE（ボタン細部、ポップアップ関連）

---------------------------------------------- */
/* 全要素のアウトライン非表示（iPhoneタップ時の青線/白線防止） */
*, *:focus, *:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 動画ボタンの基本スタイル */
.prMovie_area_video-button {
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none; /* フォーカス時の青いアウトラインを非表示 */
  -webkit-tap-highlight-color: transparent; /* iOS Safariのタップハイライトを非表示 */
  transition: all 0.3s ease;
  /* 元々の動画ボタンエリア内のスタイル */
}
.prMovie_area_video-button.specialMovie__link {
  margin: 0;
  max-width: none;
}

/* 元々の動画ボタンのホバー効果：背景画像を拡大 */
.prMovie_area_video-button.specialMovie__link:hover .prMovie_area_video-thumbnail {
  transform: scale(1.1); /* より目立つ拡大効果 */
}

/* 全ての状態でアウトライン非表示 */
.prMovie_area_video-button:focus {
  outline: none !important;
}

/* 画像コンテナ */
.prMovie_area_image-container {
  position: relative;
  overflow: hidden; /* 拡大時の画像はみ出し防止 */
}

/* 元々の動画ボタンとの統合スタイル（簡素化） */
.specialMovie__link.prMovie_area_video-button {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  border: none;
  padding: 0;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  /* 既存のtransitionを保持 */
  transition: all 0.3s ease;
}

.specialMovie__link.prMovie_area_video-button:focus {
  outline: none !important;
}

.prMovie_area_video-thumbnail {
  width: 100%;
  display: block;
  transition: transform 0.3s ease; /* スムーズな拡大効果 */
  /* picture要素への対応 */
}
.prMovie_area_video-thumbnail img {
  width: 100%;
  display: block;
}

/* オーバーレイ */
.prMovie_area_overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  /* プレイボタンのスタイル調整 */
}
.prMovie_area_overlay .specialMovie__play_btn {
  width: auto;
  height: auto;
  max-width: 80px;
  max-height: 80px;
  transition: transform 0.3s ease; /* スムーズな拡大効果 */
}
@media screen and (max-width: 768px) {
  .prMovie_area_overlay .specialMovie__play_btn {
    max-width: 60px;
    max-height: 60px;
  }
}

/* 元々の動画ボタンエリア内では通常時オーバーレイ非表示 */
.specialMovie__link.prMovie_area_video-button .prMovie_area_overlay {
  background-color: transparent;
}

/* 元々の動画ボタンのホバー効果 */
.specialMovie__link.prMovie_area_video-button:hover .prMovie_area_overlay {
  background-color: rgba(0, 0, 0, 0.3);
}

/* 相対位置指定 */
.prMovie_area_relative {
  position: relative;
}

/* --- 方法1: <dialog>要素のスタイル --- */
.prMovie_area_video-dialog {
  /* サイズとレスポンシブ設定 */
  width: 90vw; /* 画面幅の90% */
  max-width: 800px; /* PCでの最大幅 */
  border: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  padding: 0;
  overflow: visible; /* ボタンを外側に表示するため visible に変更 */
  /* フェードイン + スケールアニメーション */
  -webkit-animation: modalFadeIn 0.3s ease-out;
          animation: modalFadeIn 0.3s ease-out;
  transform-origin: center center;
}

/* ダイアログ表示時の背景オーバーレイ */
.prMovie_area_video-dialog::-webkit-backdrop {
  background-color: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  /* 背景フェードインアニメーション */
  -webkit-animation: backdropFadeIn 0.3s ease-out;
          animation: backdropFadeIn 0.3s ease-out;
}
.prMovie_area_video-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  /* 背景フェードインアニメーション */
  -webkit-animation: backdropFadeIn 0.3s ease-out;
          animation: backdropFadeIn 0.3s ease-out;
}

/* iframeのレスポンシブ設定 */
.prMovie_area_video-iframe {
  width: 100%;
  aspect-ratio: 16/9; /* 縦横比を16:9に固定 */
  display: block; /* 余分な余白を削除 */
  border: none;
  outline: none; /* フォーカス時のアウトラインを非表示 */
}

/* 動画プレーヤーの全ての状態でアウトライン非表示 */
.prMovie_area_video-iframe:focus {
  outline: none !important;
}

/* 動画コントロールを強制的に隠すスタイル */
.prMovie_area_video-iframe.controls-hidden {
  cursor: pointer;
}

/* WebKit系ブラウザの動画コントロールを隠す */
.prMovie_area_video-iframe.controls-hidden::-webkit-media-controls {
  display: none !important;
}

.prMovie_area_video-iframe.controls-hidden::-webkit-media-controls-panel {
  display: none !important;
}

.prMovie_area_video-iframe.controls-hidden::-webkit-media-controls-play-button {
  display: none !important;
}

.prMovie_area_video-iframe.controls-hidden::-webkit-media-controls-timeline {
  display: none !important;
}

.prMovie_area_video-iframe.controls-hidden::-webkit-media-controls-current-time-display {
  display: none !important;
}

.prMovie_area_video-iframe.controls-hidden::-webkit-media-controls-time-remaining-display {
  display: none !important;
}

.prMovie_area_video-iframe.controls-hidden::-webkit-media-controls-volume-slider {
  display: none !important;
}

.prMovie_area_video-iframe.controls-hidden::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

/* その他のブラウザ用のコントロール非表示 */
.prMovie_area_video-iframe.controls-hidden::-moz-media-controls {
  display: none !important;
}

/* カスタムオーバーレイ（モバイル専用・タップ検出のみ） */
.prMovie_area_video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: none;
  cursor: pointer;
  z-index: 5;
  outline: none; /* フォーカス時の青いアウトラインを非表示 */
  -webkit-tap-highlight-color: transparent; /* iOS Safariのタップハイライトを非表示 */
}

/* 全ての状態でアウトライン非表示 */
.prMovie_area_video-overlay:focus {
  outline: none !important;
}

/* モバイルデバイスでのみオーバーレイを表示 */
@media (hover: none) and (pointer: coarse) {
  .prMovie_area_video-overlay.mobile-active {
    display: block;
  }
}
/* スマホでのダイアログサイズ調整 */
@media (max-width: 768px) {
  .prMovie_area_video-dialog {
    width: 95vw;
    max-width: none;
  }
}
/* 閉じるボタン */
.prMovie_area_close-button {
  position: absolute;
  top: -48px; /* ポップアップの外、上部に配置 */
  right: 0px; /* ポップアップの外、右側に配置 */
  z-index: 10; /* 動画より手前に表示 */
  background: transparent;
  border: none;
  color: white;
  font-size: 48px; /* ×を大きく見やすく */
  font-weight: 300; /* フォントを少し細くしてスタイリッシュに */
  line-height: 0.8; /* 垂直位置を微調整 */
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* 背景が明るくても見えるように影を追加 */
  outline: none; /* フォーカス時の青いアウトラインを非表示 */
  -webkit-tap-highlight-color: transparent; /* iOS Safariのタップハイライトを非表示 */
}

.prMovie_area_close-button:hover {
  color: #ccc; /* ホバー時の文字色 */
  transform: scale(1.1);
}

/* 全ての状態でアウトライン非表示 */
.prMovie_area_close-button:focus {
  outline: none !important;
}

/* モーダルアニメーション定義 */
@-webkit-keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*# sourceMappingURL=top_movie.css.map */