/*
 * 広告 LP `/ad/as3/` の CM 動画の区画（`section#pa-cm`）の見た目（Task #9890）。
 *
 * 🚨 **移行元の区画の中の `<style>` の写しである。値は 1 つも書き換えていない**（字下げだけ外した）。
 * 末尾の 1 規則（`.pa-cm__btn > p`）だけは写しではなく、dev の手当てである（Bug #10008・下の注釈）.
 *
 * | 元 | sha256 |
 * |---|---|
 * | `public/ad/as3/index.html` の `section.pa-cm` の中の `<style>`（写し `8b8c142bc`） | `9fe0cc6b86b72a63a8963b4ce76a16451246eb851b3b4029f49436374ba392f2` |
 *
 * 🚨 **`/ad/as2/` の写し（`ad-lp-cm-video-as2.css`）と 1 本にまとめない。**2 本は `.pa-cm` の外余白が 2 か所違う
 * （パソコン幅の下 40px と 10px・480px 以下の上下 20px / 25px と 35px / 30px）.
 *
 * ## なぜテーマから配るのか
 *
 * 投入の消毒は、本文の `<style>` を `.page-content__body` の下へ閉じて残す（`scripts/pa-cms/sanitize-allowlist.json` の
 * `scoped_style`）。**広告 LP の型紙は本文を `.page-content__body` で包まないので、閉じた規則は 1 本も当たらない**
 * （2026-10-09 の下見の走行 2 で、dev の 2 ページとも区画の祖先に `.page-content__body` が無かった）。
 * そこでこのファイルを `inc/ad-lp-assets.php` が、意匠の CSS の最後の 1 本の後ろに配る。移行元の `<style>` も
 * 本文の中、つまりどの CSS よりも後ろにある。当たり先はどれも `.pa-cm` で始まるので、ほかの区画には当たらない.
 */
.pa-cm{width:544px;margin:35px auto 10px;box-sizing:border-box;text-align:center}
.pa-cm *{box-sizing:border-box}
.pa-cm__label{display:inline-block;margin:0 0 8px;padding:4px 14px;background:#c8102e;color:#fff;font-size:13px;font-weight:700;letter-spacing:.1em;border-radius:2px}
.pa-cm__title{margin:0 0 20px;font-size:20px;font-weight:700;line-height:1.5;color:#333}
.pa-cm__player{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.pa-cm__btn{all:unset;position:absolute;inset:0;cursor:pointer;display:block}
.pa-cm__btn img{width:100%;height:100%;object-fit:cover;display:block}
.pa-cm__btn::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.35),rgba(0,0,0,0) 45%)}
.pa-cm__play{position:absolute;top:50%;left:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(200,16,46,.92);z-index:1;transition:transform .2s}
.pa-cm__play::before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff}
.pa-cm__btn:hover .pa-cm__play,.pa-cm__btn:focus-visible .pa-cm__play{transform:scale(1.08)}
.pa-cm__btn:focus-visible{outline:3px solid #c8102e;outline-offset:-3px}
.pa-cm__time{position:absolute;right:10px;bottom:10px;z-index:1;padding:2px 8px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;font-weight:700;border-radius:3px}
.pa-cm__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:480px){
  .pa-cm{width:100%;margin:35px auto 30px;padding:0 25px;box-sizing: border-box;}
  .pa-cm__title{font-size:17px}
  .pa-cm__play{width:60px;height:60px;margin:-30px 0 0 -30px}
}
    

/*
 * ここから下は移行元の写しではない（Bug #10008・事業部の指摘 NEW-20261009-02・03）.
 *
 * 投入した本文では、段落の自動整形がサムネイルの `<img>` を `<p>` で包み、押しボタン（`.pa-cm__btn`）の直下が
 * `<p>` になる（2026-10-09 の dev の実測・`pa-verify-assets/A/1009-事業部指摘-1009/`）。上の `.pa-cm__btn img` の
 * `height:100%` は、高さの決まらない `<p>` に対しては `auto` と同じになり、絵が元の比率（4:3）の高さで枠からはみ出す。
 * 包んだ `<p>` を描画の上で無いものとして扱い、移行元と同じく押しボタンの直下に絵を置く.
 */
.pa-cm__btn > p{display:contents}