/* ENTLA Video Player v2.1 — the same proportions and layout as the reference player v2.1.
 * Colours are ENTLA's own (焦茶 band and text, 琥珀 caret, グレージュ lines); the reference palette is not used.
 * Inner parts are written as `.ent-vplayer .ent-vp-…` so theme rules (e.g. `.entry-content video`) cannot override them.
 * Every size is a share of the player's width (cqw), so the band, bar and buttons keep the same balance at any width.
 * On a PC screen (768 px and wider) the player takes 2/3 of the article width, centred, and never less than 520 px.
 * Under 520 px wide the buttons switch to the phone layout: one row of four, no volume bar (the phone's own buttons set the volume).
 * Plain px values come first as a fallback for old browsers. */
.ent-vplayer{--ink:var(--ent-ink,#43342a);--band:var(--ent-ink,#43342a);--line:#cdbfae;--track:#e4d7c3;--dot:var(--ent-ink,#43342a);--muted:#b8a690;--idle:#ece3d6;--gold:var(--ent-accent,#e2a04a);--press:var(--ent-red-soft,#fbf0e3);
  container-type:inline-size;box-sizing:border-box;width:100%;max-width:1220px;margin:0 auto 24px;color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;line-height:1.5}
.ent-vplayer *,.ent-vplayer *::before,.ent-vplayer *::after{box-sizing:border-box}
.ent-vplayer-cues{display:none}
/* ENTLA: 描画前（JSの読み込み前）に動画枠の色で高さを確保して、表示の瞬間のずれ（CLS）を抑える。描画後（data-ready）は通常の高さ */
.ent-vplayer:not([data-ready]){aspect-ratio:520/438;background:#1d1611;border-radius:6px}
@media (max-width:559px){.ent-vplayer:not([data-ready]){aspect-ratio:350/353}}
/* JSの読み込みを操作まで遅らせる最適化（遅延読み込み系プラグイン）を使う場合は、ent-vplayer.jsを対象から外す（外さないと、操作まで動画枠が暗い箱のまま） */
/* ENTLA: 追加CSSのフォーカス枠（.ent-post [tabindex="0"]:focus-visible）より基準の見た目（つまみの輪・音量の枠）を優先 */
.ent-post .ent-vplayer [tabindex="0"]:focus-visible{outline:none}
.ent-vplayer .ent-vp-frame{position:relative;width:100%;aspect-ratio:16/9;background:#1d1611;border-radius:6px 6px 0 0;overflow:hidden;cursor:pointer}
.ent-vplayer .ent-vp-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#1d1611}
.ent-vplayer .ent-vp-frame video::cue{background:rgba(67,52,42,.92);color:#fff}

/* caption band: the whole line is laid out first and revealed from its left edge, so the start never moves */
.ent-vplayer .ent-vp-cap{display:flex;align-items:center;justify-content:center;min-height:54px;min-height:8.76cqw;padding:8px 24px;padding:.7cqw 2.5cqw;
  background:var(--band);color:#fbf6ef;border-radius:0 0 6px 6px;border-radius:0 0 .5cqw .5cqw;
  font-size:14px;font-size:max(14px,2.2cqw);font-weight:400;letter-spacing:.06em;text-align:center}
.ent-vplayer .ent-vp-line{display:inline;white-space:pre-wrap}
.ent-vplayer .ent-vp-rest{color:transparent}
.ent-vplayer .ent-vp-caret{display:inline-block;width:2px;height:1.2em;margin:0 1px;vertical-align:-.22em;background:var(--gold);animation:ent-vp-blink 1s steps(1) infinite}
.ent-vplayer.is-captions-off .ent-vp-cap{min-height:6px;padding-top:0;padding-bottom:0;font-size:0}
.ent-vplayer.is-captions-off .ent-vp-caret{display:none}
@keyframes ent-vp-blink{50%{opacity:0}}

/* seek bar: one even track, a ringed knob */
.ent-vplayer .ent-vp-seek{display:flex;align-items:center;gap:12px;gap:2cqw;margin:16px 0 18px;margin:2.7cqw 0 2.9cqw}
.ent-vplayer .ent-vp-bar{position:relative;flex:1;height:22px;height:3cqw;min-height:22px;cursor:pointer;touch-action:none;outline:none}
.ent-vplayer .ent-vp-track{position:absolute;left:0;right:0;top:50%;height:3px;height:max(3px,.5cqw);transform:translateY(-50%);border-radius:3px;background:var(--track)}
.ent-vplayer .ent-vp-knob{position:absolute;top:50%;left:0;width:18px;width:max(18px,2.6cqw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--dot);border:2px solid var(--dot);box-shadow:inset 0 0 0 3px #fff;box-shadow:inset 0 0 0 max(2px,.28cqw) #fff}
.ent-vplayer .ent-vp-bar:focus-visible .ent-vp-knob{outline:2px solid var(--dot);outline-offset:3px}
.ent-vplayer .ent-vp-time{flex:none;font-size:12px;font-size:max(12px,1.8cqw);color:#7a6a5c;font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap}

/* buttons */
.ent-vplayer .ent-vp-controls{display:flex;justify-content:flex-end;gap:9px;gap:1.5cqw}
.ent-vplayer .ent-vp-btn,.ent-vplayer .ent-vp-sound{display:inline-flex;align-items:center;height:43px;height:max(40px,7.04cqw);border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}
.ent-vplayer .ent-vp-btn{gap:16px;gap:2.6cqw;padding:0 19px;padding:0 2.9cqw 0 3.1cqw;margin:0;font:inherit;font-size:13px;font-size:max(13px,2.13cqw);letter-spacing:.08em;line-height:1;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none}
.ent-vplayer .ent-vp-btn:hover{background:var(--ent-ink-soft,#fdf6ec)}
.ent-vplayer .ent-vp-btn svg{flex:none;width:16px;width:max(16px,2.5cqw);aspect-ratio:1;height:auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* captions on: pale fill, darker edge and the outer ring of the reference */
.ent-vplayer .ent-vp-btn[aria-pressed="true"]:not(.ent-vp-snd){background:var(--press);border-color:#a8957f;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--dot);box-shadow:0 0 0 .45cqw #fff,0 0 0 .7cqw var(--dot)}
.ent-vplayer .ent-vp-btn:focus-visible,.ent-vplayer .ent-vp-vol:focus-visible{outline:none;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--dot)}
.ent-vplayer .ent-vp-sound{overflow:hidden}
.ent-vplayer .ent-vp-sound .ent-vp-btn{height:100%;border:0;border-radius:0;background:transparent;gap:12px;gap:1.65cqw;padding:0 14px 0 18px;padding:0 1.8cqw 0 2.45cqw}
.ent-vplayer .ent-vp-vol{display:flex;align-items:center;gap:6px;gap:.8cqw;height:100%;padding:0 17px 0 12px;padding:0 2.3cqw 0 1.65cqw;border-left:1.5px solid var(--line);cursor:pointer;touch-action:none;outline:none}
.ent-vplayer .ent-vp-vol i{display:block;width:5px;width:max(5px,.74cqw);height:calc(8px + var(--i) * 2.2px);height:calc(1.06cqw + var(--i) * .25cqw);min-height:6px;border-radius:99px;background:var(--idle)}
.ent-vplayer .ent-vp-vol i.on{background:var(--muted)}
.ent-vplayer.is-sound-on .ent-vp-vol i.on{background:var(--dot)}

@media (min-width:768px){.ent-vplayer{width:66.667%;min-width:min(100%,520px)}}

.ent-vplayer.is-full{max-width:none;min-width:0;width:100%;height:100%;margin:0;padding:2cqw 3cqw;background:#fff;display:flex;flex-direction:column}
.ent-vplayer.is-full .ent-vp-frame{flex:1;aspect-ratio:auto}

/* narrow PC (the 2/3 width): tighter spacing so the four buttons and the volume bar stay on one row */
@container (min-width:520px) and (max-width:719px){
  .ent-vplayer .ent-vp-btn{gap:1.8cqw;padding:0 2.2cqw}
  .ent-vplayer .ent-vp-sound .ent-vp-btn{gap:1.65cqw;padding:0 1.4cqw 0 2.2cqw}
  .ent-vplayer .ent-vp-vol{gap:.6cqw;padding:0 2cqw 0 1.4cqw}
}

/* phone: one row of four buttons; the volume bar is left out (iPhone does not let a page change the volume) */
@container (max-width:519px){
  .ent-vplayer .ent-vp-cap{min-height:56px;padding:10px 16px;font-size:15px;letter-spacing:.04em}
  .ent-vplayer .ent-vp-seek{gap:12px;margin:16px 0 14px}
  .ent-vplayer .ent-vp-bar{height:26px}
  .ent-vplayer .ent-vp-knob{width:22px;box-shadow:inset 0 0 0 3px #fff}
  .ent-vplayer .ent-vp-time{font-size:14px}
  .ent-vplayer .ent-vp-controls{justify-content:space-between;gap:6px;gap:1.75cqw}
  .ent-vplayer .ent-vp-btn,.ent-vplayer .ent-vp-sound{height:44px;flex:1 1 auto;min-width:0}
  .ent-vplayer .ent-vp-btn{justify-content:center;gap:4px;gap:1.3cqw;padding:0 6px;padding:0 2.1cqw;font-size:13px;font-size:clamp(11px,3.75cqw,14px);letter-spacing:.02em}
  .ent-vplayer .ent-vp-btn svg{width:16px;width:clamp(14px,4.6cqw,18px)}
  .ent-vplayer .ent-vp-btn[aria-pressed="true"]:not(.ent-vp-snd){box-shadow:0 0 0 3px #fff,0 0 0 5px var(--dot)}
  .ent-vplayer .ent-vp-sound .ent-vp-btn{width:100%;gap:4px;gap:1.3cqw;padding:0 6px;padding:0 2.1cqw}
  .ent-vplayer .ent-vp-vol{display:none}
}
@media (prefers-reduced-motion:reduce){.ent-vplayer .ent-vp-caret{animation:none}}