.movie-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 = 9/16 = 0.5625 */
    background: #000;
}
/* テーマカラーは通常表示・全画面表示の両方に適用する */
.movie-box .plyr {
    --plyr-color-main: var(--color-primary);
}
/* 通常表示時のみ .movie-box の16:9枠いっぱいに絶対配置する。
   iPhoneはElement.requestFullscreen非対応のためPlyrがフォールバック全画面
   （.plyr--fullscreen-fallback に position:fixed）を使うが、そのCSSには!importantが
   付いていない。ここで除外しておかないと下記の!importantが勝ち、全画面化できない。 */
.movie-box .plyr:not(.plyr--fullscreen-fallback) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
/* 注意：ここで .plyr--fullscreen-fallback の height を dvh / svh で上書きしないこと。
   header.php で viewport-fit=cover を宣言しているため、position:fixed の基準となる
   レイアウトビューポートは画面全体（top:0 = URLバーの裏＝物理的な画面最上端）になる。
   この状態で height を svh（ツールバーを除いた高さ）にすると下端がURLバーの高さ分
   足りなくなり、隙間から背後のページが見えてしまう。Plyr本来の height:100% が
   レイアウトビューポート＝画面全体を正しく覆うので、そのまま使う。 */

/* iOS Safari対策：コントロールバーを画面下端から離す。iOS Safariは下端付近のタップを
   ツールバー表示ジェスチャとして横取りするため、密着したままだと押しにくく、
   わずかに外れると同じ行のシークバーに当たって早送り操作になってしまう。
   safe-area-inset はノッチ・ホームインジケータ回避用。header.php で viewport-fit=cover を
   宣言しているため実際に非0の値が入る（ノッチなし端末では0）。 */
.plyr--fullscreen-fallback .plyr__controls {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: calc(10px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(10px + env(safe-area-inset-right, 0px)) !important;
}
/* 早送り防止時のトースト（「早送りはできません」）。
   render.php が .plyr コンテナ直下に <div class="seek-block-toast"> を生成する。
   スタイル未定義だと .plyr の flex-direction:column により最後のアイテムとして
   動画の下に積まれ、.plyr--video の overflow:hidden に切られて画面外になる。
   .plyr は position:relative（全画面時は fixed）なのでどの状態でも absolute の基準になり、
   通常表示・フォールバック全画面・ネイティブ全画面のいずれでも中央に重なる。
   表示/非表示は render.php が display をインラインで切り替えるため、ここでは指定しない。
   pointer-events:none：全画面時のタップ判定に一切干渉させないため（必須）。 */
.plyr .seek-block-toast {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    max-width: 86%;
    padding: 10px 18px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .82);
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    pointer-events: none;
}
.survey-area {
    margin-top: 40px;
}