/* すべて #vsx-player 配下に限定。WordPressテーマに影響しません */
#vsx-player{
  --vsx-panel:#171a21; --vsx-panel2:#1f2430; --vsx-line:#2a3040;
  --vsx-text:#eef1f6; --vsx-muted:#9aa3b2; --vsx-accent:#ff5a3c; --vsx-gold:#ffc24b; --vsx-green:#39d98a;
  max-width:1040px; margin:0 auto; background:transparent;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Segoe UI",system-ui,sans-serif;
}
#vsx-player *{box-sizing:border-box}

#vsx-player .vsx-slider{position:relative;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--vsx-line)}
#vsx-player .vsx-viewport{overflow:hidden;width:100%}
#vsx-player .vsx-track{display:flex;transition:transform .6s cubic-bezier(.7,0,.2,1)}
#vsx-player .vsx-slide{flex:0 0 100%;position:relative}
#vsx-player .vsx-stage{position:relative;aspect-ratio:16/9;background:#000}
#vsx-player .vsx-stage canvas,#vsx-player .vsx-video{width:100%;height:100%;display:block}
#vsx-player .vsx-video{object-fit:contain;background:#000;cursor:pointer}

#vsx-player .vsx-badge-num{position:absolute;top:14px;left:14px;z-index:3;background:#000a;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid #ffffff22;color:#fff}
#vsx-player .vsx-badge-auto{position:absolute;top:14px;right:14px;z-index:3;background:#000a;font-size:11px;padding:5px 11px;border-radius:999px;border:1px solid #ffffff22;display:flex;align-items:center;gap:6px;color:var(--vsx-green)}
#vsx-player .vsx-badge-auto .d{width:7px;height:7px;border-radius:50%;background:var(--vsx-green);box-shadow:0 0 8px var(--vsx-green)}

#vsx-player .vsx-big{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:radial-gradient(ellipse at center,#0006,#000a);cursor:pointer;transition:opacity .25s}
#vsx-player .vsx-big.hidden{opacity:0;pointer-events:none}
#vsx-player .vsx-big button{width:78px;height:78px;border-radius:50%;border:none;cursor:pointer;background:#1a4fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(26,79,255,.4);transition:transform .15s}
#vsx-player .vsx-big button:hover{transform:scale(1.06)}
#vsx-player .vsx-big svg{width:30px;height:30px;fill:#fff;margin-left:4px}

#vsx-player .vsx-topbar{position:absolute;top:0;left:0;right:0;height:4px;background:#ffffff1a;z-index:5}
#vsx-player .vsx-topfill{height:100%;width:0;background:linear-gradient(90deg,var(--vsx-accent),var(--vsx-gold))}

#vsx-player .vsx-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:none;background:#000a;cursor:pointer;display:grid;place-items:center;transition:background .15s,opacity .3s}
#vsx-player .vsx-nav.hide{opacity:0;pointer-events:none}
#vsx-player .vsx-nav:hover{background:#000d}
#vsx-player .vsx-nav svg{width:22px;height:22px;fill:#fff}
#vsx-player .vsx-nav.prev{left:12px}
#vsx-player .vsx-nav.next{right:12px}

#vsx-player .vsx-unmute{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;display:none;align-items:center;gap:7px;background:#000c;color:#fff;border:1px solid #ffffff33;border-radius:999px;padding:8px 15px;font-size:12px;font-weight:700;cursor:pointer}
#vsx-player .vsx-unmute.show{display:flex}
#vsx-player .vsx-unmute svg{width:16px;height:16px;fill:#fff}

#vsx-player .vsx-aff{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:14px;padding:16px 18px;background:linear-gradient(to top,#000e 30%,#0000);pointer-events:none}
#vsx-player .vsx-aff .info{flex:1;min-width:0}
#vsx-player .vsx-aff .info .name{font-size:15px;font-weight:700;color:#fff;text-shadow:0 1px 4px #000}
#vsx-player .vsx-aff a.buy{flex:0 0 auto;text-decoration:none;background:var(--vsx-accent);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:10px;display:flex;align-items:center;gap:8px;box-shadow:0 6px 18px #ff5a3c55;transition:transform .12s;pointer-events:auto}
#vsx-player .vsx-aff a.buy:hover{transform:translateY(-1px)}
#vsx-player .vsx-aff a.buy svg{width:16px;height:16px;fill:#fff}

#vsx-player .vsx-popup{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#000b;opacity:0;pointer-events:none;transition:opacity .3s}
#vsx-player .vsx-popup.show{opacity:1;pointer-events:auto}
#vsx-player .vsx-pcard{width:min(86%,440px);background:var(--vsx-panel);border:1px solid var(--vsx-line);border-radius:18px;padding:22px;text-align:center;transform:translateY(14px) scale(.97);transition:transform .3s}
#vsx-player .vsx-popup.show .vsx-pcard{transform:translateY(0) scale(1)}
#vsx-player .vsx-ptitle{font-size:13px;color:var(--vsx-muted);margin-bottom:14px}
#vsx-player .vsx-pnext{display:flex;align-items:center;gap:13px;background:var(--vsx-panel2);border:1px solid var(--vsx-line);border-radius:13px;padding:12px;text-align:left;margin-bottom:18px}
#vsx-player .vsx-tn{width:104px;height:60px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;font-size:26px;position:relative;background-size:cover;background-position:center;background-color:#000}
#vsx-player .vsx-tn .vsx-len{position:absolute;right:4px;bottom:4px;background:#000c;font-size:10px;padding:1px 5px;border-radius:4px;color:#fff}
#vsx-player .vsx-pi{min-width:0}
#vsx-player .vsx-pn{font-size:14px;font-weight:700;line-height:1.35;color:var(--vsx-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#vsx-player .vsx-pbtns{display:flex;gap:10px}
#vsx-player .vsx-pbtns button{border:none;cursor:pointer;font-size:14px;font-weight:700;padding:13px;border-radius:11px;transition:transform .12s}
#vsx-player .vsx-pbtns button:hover{transform:translateY(-1px)}
#vsx-player .vsx-watch{flex:1;background:var(--vsx-accent);color:#fff;box-shadow:0 6px 18px #ff5a3c55;position:relative;overflow:hidden}
#vsx-player .vsx-watch .vsx-cd{position:absolute;left:0;bottom:0;height:3px;background:#ffffff99;width:100%}
#vsx-player .vsx-stay{background:none;border:1px solid var(--vsx-line);color:var(--vsx-muted);flex:0 0 auto;padding:13px 16px}

#vsx-player .vsx-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:16px}#vsx-player .vsx-dot{width:9px;height:9px;border-radius:50%;background:#9aa3b2;border:none;cursor:pointer;padding:0;transition:transform .15s,background .15s,width .15s}
#vsx-player .vsx-dot:hover{transform:scale(1.3)}
#vsx-player .vsx-dot.active{background:var(--vsx-accent);width:22px;border-radius:99px}

#vsx-player .vsx-ctrlrow{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:14px}
#vsx-player .vsx-ctrlrow button{background:var(--vsx-panel);border:1px solid var(--vsx-line);color:var(--vsx-text);cursor:pointer;font-size:13px;padding:9px 16px;border-radius:10px;display:flex;align-items:center;gap:7px}
#vsx-player .vsx-ctrlrow button svg{width:16px;height:16px;fill:currentColor}
#vsx-player .vsx-ctrlrow button.vsx-auto.on{color:var(--vsx-green);border-color:#39d98a55;background:#39d98a12}
#vsx-player .vsx-below{margin-top:14px;text-align:left;word-break:break-all}
#vsx-player .vsx-afflink{font-size:18px;color:#0000ee;text-decoration:underline;line-height:1.6}
#vsx-player .vsx-afflink:hover{opacity:.8}
#vsx-player .vsx-related-slot{margin-top:18px}

/* シークバー（再生中に表示・ドラッグ可） */
#vsx-player .vsx-seek{position:absolute;left:0;right:0;bottom:0;height:18px;z-index:6;display:none;cursor:pointer;touch-action:none}
#vsx-player .vsx-seek.show{display:block}
#vsx-player .vsx-seek-track{position:absolute;left:0;right:0;bottom:0;height:6px;background:#ffffff40}
#vsx-player .vsx-seek-fill{position:absolute;left:0;bottom:0;height:6px;width:0;background:#1a4fff}
#vsx-player .vsx-seek-knob{position:absolute;bottom:-2px;left:0;width:12px;height:12px;border-radius:50%;background:#1a4fff;transform:translateX(-50%);box-shadow:0 0 0 3px rgba(26,79,255,.3)}

/* 拡大ボタン（動画の右上） */
#vsx-player .vsx-expand{position:absolute;top:12px;right:12px;z-index:6;width:38px;height:38px;border-radius:9px;border:1px solid #ffffff22;background:#000a;cursor:pointer;display:grid;place-items:center;transition:background .15s}
#vsx-player .vsx-expand:hover{background:#000d}
#vsx-player .vsx-expand svg{width:20px;height:20px;fill:#fff}

/* 全画面ポップアップ（上=ボタン / 中=動画 / 下=リンク の縦並びで必ず収まる） */
.vsx-fs-modal{position:fixed;inset:0;z-index:99999;background:#000;display:none;flex-direction:column;justify-content:center}
.vsx-fs-modal.show{display:flex}
.vsx-fs-stage{flex:0 0 auto;width:100%;display:flex;align-items:center;justify-content:center;position:relative}
.vsx-fs-stage video{max-width:100%;max-height:calc(100vh - 170px);max-height:calc(100svh - 170px);width:auto;height:auto;background:#000;cursor:pointer}
.vsx-fs-bar{position:static;flex:0 0 auto;z-index:2;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 12px;background:#000}
.vsx-fs-btn{border:1px solid #ffffff33;background:#0008;color:#fff;font-size:14px;font-weight:700;padding:9px 14px;border-radius:9px;cursor:pointer}
.vsx-fs-btn:hover{background:#000c}
.vsx-fs-btn.close{background:#ff3b3b33;border-color:#ff6b6b88}
.vsx-fs-below{position:static;flex:0 0 auto;padding:11px 16px;background:rgba(255,255,255,.95);text-align:left;word-break:break-all}
.vsx-fs-afflink{color:#0000ee;text-decoration:underline;font-size:18px;line-height:1.6}
.vsx-fs-afflink:hover{opacity:.8}
.vsx-fs-nav{border:1px solid #ffffff44;background:#0008;color:#fff;font-size:14px;font-weight:700;padding:9px 14px;border-radius:9px;cursor:pointer}
.vsx-fs-nav:hover{background:#000c}
.vsx-fs-close{border:1px solid #ff6b6b88;background:#ff3b3b33;color:#fff;font-size:16px;font-weight:700;line-height:1;padding:8px 14px;border-radius:9px;cursor:pointer}
.vsx-fs-close:hover{background:#ff3b3b55}

/* 全画面の中央再生ボタン（青） */
.vsx-fs-big{position:absolute;inset:0;display:grid;place-items:center;z-index:5;cursor:pointer;transition:opacity .2s}
.vsx-fs-big.hidden{opacity:0;pointer-events:none}
.vsx-fs-big button{width:84px;height:84px;border-radius:50%;border:none;cursor:pointer;background:#1a4fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(26,79,255,.45)}
.vsx-fs-big button:hover{transform:scale(1.06)}
.vsx-fs-big svg{width:32px;height:32px;fill:#fff;margin-left:4px}
#vsx-player .vsx-badge-num{display:none}

/* 動画枠の外（すぐ下）の操作バー（4ボタン・小さめ） */
#vsx-player .vsx-ctrlbar{margin-top:10px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
#vsx-player .vsx-cbtn{border:1px solid var(--vsx-line);background:var(--vsx-panel);color:var(--vsx-text);font-size:12px;font-weight:700;padding:7px 12px;border-radius:8px;cursor:pointer;line-height:1.2}
#vsx-player .vsx-cbtn:hover{background:var(--vsx-panel2)}

/* 旧UI（三角ボタン・ドット・下の操作列）は非表示にして動画上に集約 */
#vsx-player .vsx-nav{display:none}
#vsx-player .vsx-dots{display:none}
#vsx-player .vsx-ctrlrow{display:none}

/* スマホ：全画面ポップアップだけ詰めて動画を大きく（通常時には影響しません） */
@media (max-width:600px){
  .vsx-fs-bar{padding:8px 10px;gap:6px}
  .vsx-fs-below{padding:9px 12px}
  .vsx-fs-afflink{font-size:14px}
  .vsx-fs-nav{font-size:12px;padding:8px 11px}
  .vsx-fs-close{font-size:15px;padding:7px 12px}
}

/* PC：ポップアップの動画を大きく（元が小さい動画も高さを指定して引き伸ばす） */
@media (min-width:601px){
  .vsx-fs-stage video{height:calc(100vh - 130px);height:calc(100svh - 130px);max-height:none;width:auto;max-width:100%}
}

/* 全画面ポップアップのシークバー（動画の下端・ドラッグ可） */
.vsx-fs-seek{position:absolute;left:0;right:0;bottom:0;height:18px;z-index:6;cursor:pointer;touch-action:none}
.vsx-fs-seek-track{position:absolute;left:0;right:0;bottom:0;height:6px;background:#ffffff40}
.vsx-fs-seek-fill{position:absolute;left:0;bottom:0;height:6px;width:0;background:#1a4fff}
.vsx-fs-seek-knob{position:absolute;bottom:-2px;left:0;width:12px;height:12px;border-radius:50%;background:#1a4fff;transform:translateX(-50%);box-shadow:0 0 0 3px rgba(26,79,255,.3)}