/* ACRIUS video player, v2.1 — proportions taken from the reference screen.
 * 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. */
.acr-vplayer{--ink:#3c4b53;--band:#222f38;--line:#d7dee1;--track:#d0d9dd;--dot:#3d5563;--muted:#9aa8ae;--idle:#dde4e7;--gold:#c9a86a;--press:#e8eef1;
  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}
.acr-vplayer *,.acr-vplayer *::before,.acr-vplayer *::after{box-sizing:border-box}
.acr-vplayer-cues{display:none}
.acr-vp-frame{position:relative;width:100%;aspect-ratio:16/9;background:#0e1418;border-radius:6px 6px 0 0;overflow:hidden;cursor:pointer}
.acr-vp-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#0e1418}
.acr-vp-frame video::cue{background:rgba(34,47,56,.92);color:#fff}

/* caption band: the whole line is laid out first and revealed from its left edge, so the start never moves */
.acr-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:#f2f4f5;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}
.acr-vp-line{display:inline;white-space:pre-wrap}
.acr-vp-rest{color:transparent}
.acr-vp-caret{display:inline-block;width:2px;height:1.2em;margin:0 1px;vertical-align:-.22em;background:var(--gold);animation:acr-vp-blink 1s steps(1) infinite}
.acr-vplayer.is-captions-off .acr-vp-cap{min-height:6px;padding-top:0;padding-bottom:0;font-size:0}
.acr-vplayer.is-captions-off .acr-vp-caret{display:none}
@keyframes acr-vp-blink{50%{opacity:0}}

/* seek bar: one even track, a ringed knob */
.acr-vp-seek{display:flex;align-items:center;gap:12px;gap:2cqw;margin:16px 0 18px;margin:2.7cqw 0 2.9cqw}
.acr-vp-bar{position:relative;flex:1;height:22px;height:3cqw;min-height:22px;cursor:pointer;touch-action:none;outline:none}
.acr-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)}
.acr-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}
.acr-vp-bar:focus-visible .acr-vp-knob{outline:2px solid var(--dot);outline-offset:3px}
.acr-vp-time{flex:none;font-size:12px;font-size:max(12px,1.8cqw);color:#6e7c83;font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap}

/* buttons */
.acr-vp-controls{display:flex;justify-content:flex-end;gap:9px;gap:1.5cqw}
.acr-vp-btn,.acr-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)}
.acr-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}
.acr-vp-btn:hover{background:#f6f8f9}
.acr-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 */
.acr-vp-btn[aria-pressed="true"]:not(.acr-vp-snd){background:var(--press);border-color:#8fa0a7;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)}
.acr-vp-btn:focus-visible,.acr-vp-vol:focus-visible{outline:none;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--dot)}
.acr-vp-sound{overflow:hidden}
.acr-vp-sound .acr-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}
.acr-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}
.acr-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)}
.acr-vp-vol i.on{background:var(--muted)}
.acr-vplayer.is-sound-on .acr-vp-vol i.on{background:var(--dot)}

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

.acr-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}
.acr-vplayer.is-full .acr-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){
  .acr-vp-btn{gap:1.8cqw;padding:0 2.2cqw}
  .acr-vp-sound .acr-vp-btn{gap:1.65cqw;padding:0 1.4cqw 0 2.2cqw}
  .acr-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){
  .acr-vp-cap{min-height:56px;padding:10px 16px;font-size:15px;letter-spacing:.04em}
  .acr-vp-seek{gap:12px;margin:16px 0 14px}
  .acr-vp-bar{height:26px}
  .acr-vp-knob{width:22px;box-shadow:inset 0 0 0 3px #fff}
  .acr-vp-time{font-size:14px}
  .acr-vp-controls{justify-content:space-between;gap:6px;gap:1.75cqw}
  .acr-vp-btn,.acr-vp-sound{height:44px;flex:1 1 auto;min-width:0}
  .acr-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}
  .acr-vp-btn svg{width:16px;width:clamp(14px,4.6cqw,18px)}
  .acr-vp-btn[aria-pressed="true"]:not(.acr-vp-snd){box-shadow:0 0 0 3px #fff,0 0 0 5px var(--dot)}
  .acr-vp-sound .acr-vp-btn{width:100%;gap:4px;gap:1.3cqw;padding:0 6px;padding:0 2.1cqw}
  .acr-vp-vol{display:none}
}
@media (prefers-reduced-motion:reduce){.acr-vp-caret{animation:none}}
