/* サイト共通の動画の枠（2026-11-09）。オーナー様ページの動画（page-owner.css の ow-video--real）と同じ形・動き。動きは public/js/video-player.js */
.vp { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 24px; background: #0b1b2b; box-shadow: 0 0 0 1px rgba(11,27,43,.08), 0 40px 80px -48px rgba(0,40,90,.45); }
.vp video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.vp:not(.is-play) { cursor: pointer; }
.vp__play { position: absolute; left: 16px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px 8px 8px; border: 0; border-radius: 99px; background: rgba(255,255,255,.96); color: #0b1b2b; font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.3; cursor: pointer; box-shadow: 0 18px 40px -16px rgba(0,30,70,.6); transition: transform .2s; }
.vp__play:hover { transform: scale(1.04); }
.vp__ic { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #0b1b2b; }
.vp__ic::after { content: ''; position: absolute; left: 16px; top: 12px; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #fff; }
.vp.is-play .vp__play { display: none; }

/* 大きく見る（ブラウザの中いっぱい） */
.vp__max { position: absolute; right: 14px; top: 14px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 99px; background: rgba(11,27,43,.72); color: #fff; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; transition: opacity .3s; }
.vp__max span { width: 14px; height: 14px; border: 2px solid #fff; border-radius: 3px; box-sizing: border-box; }
.vp__max b { font-weight: 700; }
.is-play.is-idle .vp__max { opacity: 0; pointer-events: none; }
.is-idle video { cursor: none; }
.vp.is-max, .tx-video.is-max { position: fixed; inset: 0; z-index: 10000; width: 100vw; max-width: none; height: 100vh; height: 100dvh; margin: 0; aspect-ratio: auto; border-radius: 0; background: #000; box-shadow: none; transform: none; }
.vp.is-max video, .tx-video.is-max video { width: 100%; height: 100%; object-fit: contain; }
.is-max .vp__max { top: 18px; right: 18px; padding: 10px 16px; font-size: 14px; background: rgba(255,255,255,.16); }
html.vp-noscroll, html.vp-noscroll body { overflow: hidden; }

/* 再生中は画面を押すと止める。下の操作の帯は押せるように、押す面は帯の上まで */
.vp__tap { position: absolute; left: 0; right: 0; top: 0; bottom: 64px; z-index: 2; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vp__tap[hidden] { display: none; }
.vp__flash { position: absolute; left: 50%; top: 45%; z-index: 4; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; }
.vp__flash.is-on { animation: vp-flash .7s ease-out both; }
.vp__flash.is-pause::before, .vp__flash.is-pause::after { content: ''; position: absolute; top: 22px; width: 7px; height: 24px; border-radius: 2px; background: #fff; }
.vp__flash.is-pause::before { left: 24px; } .vp__flash.is-pause::after { right: 24px; }
.vp__flash.is-play::before { content: ''; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
@keyframes vp-flash { 0% { opacity: 0; transform: scale(.85); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .vp__flash.is-on { animation-duration: .01s; } }

/* ご利用の流れの「次の動画」：画面の上の押せる場所は、再生の面より手前に。大きく見るときは出さない（位置がずれるため。全画面と同じ扱い） */
.vp .g3-vid__end { z-index: 3; }
.is-max .g3-vid__end { display: none; }

@media (max-width: 900px) {
  .vp { border-radius: 18px; }
  .vp__play { left: 10px; bottom: 10px; gap: 8px; padding: 6px 14px 6px 6px; font-size: 13px; }
  .vp__ic { width: 32px; height: 32px; }
  .vp__ic::after { left: 12px; top: 9px; border-width: 7px 0 7px 10px; }
}
@media (max-width: 359px) {
  .vp__play { left: 8px; bottom: 8px; gap: 6px; padding: 4px 12px 4px 4px; font-size: 12px; }
  .vp__ic { width: 26px; height: 26px; }
  .vp__ic::after { left: 10px; top: 7px; border-width: 6px 0 6px 9px; }
}