/**
 * サンプル動画のモーダル（設計 3-10 / 8-2）。
 *
 * **詳細ページ専用ではない。** 静的側のシリーズ特集ページも同じ器を使うので、
 * detail.css から切り出してある。**片方だけ直すと見た目が割れる**ので、
 * .ply* を触るときは必ずこのファイルだけを直すこと。
 *
 * 挙動は assets/js/player.js（こちらも1つを両方から読む）。
 */

.ply{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:16px;
  background:rgba(0,0,0,.86);opacity:0;transition:opacity .18s ease}
.ply.is-open{opacity:1}
/* **プレイヤーの実寸は 720×480。** 枠をそれより広げると、
   先方のページの地色（白）が上下に帯として出る */
.ply__box{width:100%;max-width:720px;
  transform:scale(.975);transition:transform .2s cubic-bezier(.2,.85,.3,1)}
.ply.is-open .ply__box{transform:none}
.ply__hd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.ply__t{font-size:12.5px;color:#f4f2ee;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ply__x{margin-left:auto;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.28);color:#fff;flex:0 0 auto}
.ply__x:hover{background:rgba(255,255,255,.12)}
/* **プレイヤーは 720×480 で来る。** 枠の比率をそれに合わせる（黒帯を出さない） */
.ply__stage{position:relative;width:100%;aspect-ratio:720/480;background:#000;overflow:hidden}
.ply__f{width:100%;height:100%;border:0;display:block}
/* **サンプルの真下の「FANZAで購入」。** 見終わった直後がいちばん押される位置。
   枠は 720px まで伸びるが、ボタンは押せる幅で止める（端から端まで伸ばすと
   帯に見えて、押すものだと分からなくなる） */
/* 塗りと角丸は詳細ページの .cta--main と同じトークンを使う。
   **同じ役目のボタンが2種類の色になっているのがいちばん分かりにくい** */
.ply__cta{display:flex;align-items:center;justify-content:center;gap:9px;
  width:min(320px,100%);height:50px;margin:14px auto 0;
  background:var(--signal-bg);color:var(--on-signal);border-radius:var(--r-exec);
  font-size:14px;font-weight:700;letter-spacing:.05em;text-decoration:none;
  transition:filter .18s}
.ply__cta:hover{filter:brightness(1.07);text-decoration:none;color:var(--on-signal)}
.ply__cta svg{flex:0 0 auto;opacity:.75}
.ply__note{margin:10px 0 0;text-align:center;color:#cfccc6;font-size:11.5px;line-height:2}
.ply__note a{color:var(--signal);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .ply,.ply__box{transition:none}
}