@charset "UTF-8";
/* カスタムビデオプレーヤー CSS */
/* パス: /css/custom-video-player.css */
/* 特定のクラスを持つビデオブロックのみに適用 */
.wp-block-video.custom-video-player .video-container {
 position: relative;
/*  display: inline-block; */
 display:block;
 width: 100%;
}
.wp-block-video.custom-video-player video {
/*  width: 100%; */
 max-width: 100%;
 height: auto;
 box-sizing: border-box;
}
/* コントロールを常に表示 */
.wp-block-video.custom-video-player video::-webkit-media-controls {
 opacity: 1 !important;
}
.wp-block-video.custom-video-player video::-webkit-media-controls-panel {
 opacity: 1 !important;
 background: transparent !important;
 background-image: none !important;
}
/* ピクチャーインピクチャーボタンを非表示 */
.wp-block-video.custom-video-player video::-webkit-media-controls-picture-in-picture-button {
 display: none !important;
}
/* 再生オーバーレイ */
.wp-block-video.custom-video-player .play-overlay {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 80px;
 height: 80px;
 background: rgba(0, 0, 0, 0.7);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: all 0.3s ease;
 pointer-events: auto;
 z-index: 10;
}
.wp-block-video.custom-video-player .play-overlay:hover {
 background: rgba(0, 0, 0, 0.8);
 transform: translate(-50%, -50%) scale(1.1);
}
.wp-block-video.custom-video-player .play-overlay.hidden {
 opacity: 0;
 pointer-events: none;
}
/* 三角形の再生ボタン */
.wp-block-video.custom-video-player .play-button {
 width: 0;
 height: 0;
 border-left: 20px solid white;
 border-top: 12px solid transparent;
 border-bottom: 12px solid transparent;
 margin-left: 4px;
 /* 中央寄せ調整 */
}
/* レスポンシブ対応 */
@media (max-width: 768px) { /* ← JSのブレークポイントと合わせる */
 /* モバイルではカスタム再生ボタンを非表示にする */
 .wp-block-video.custom-video-player .play-overlay {
  display: none !important;
 }
 /* モバイルでは非表示にしていたブラウザ標準のPiPボタンを元に戻す（必要に応じて） */
 .wp-block-video.custom-video-player video::-webkit-media-controls-picture-in-picture-button {
  display: initial !important;
 }
}