/**
 * play-to-create スライドビューワー
 *
 * 重要: このCSSは「ビューワーの外枠」だけを担当する。
 * スライド本文の見た目は記事側の既存CSSに任せる。成立条件は
 * オーバーレイを #main-post の中に置くこと（下記 JS 参照）。
 * body 直下に置くと _play-to-create.scss / _main-article.scss の
 * 祖先セレクタが外れて本文がプレーンテキストになる（実測済み）。
 */

.ptc {
    position: fixed;
    /* inset は iOS 14.5+ なのでロングハンドで書く（テーマも inset を使っていない） */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* lity は 9990。クローンからは [data-lity] を剥がすので競合しない */
    z-index: 9995;
    display: flex;
    flex-direction: column;
    background: #1d1b26;
    color: #eee;
    font-size: 15px;
    line-height: 1.7;
}

.ptc[hidden] { display: none; }   /* display:flex に勝たせるため必須 */

/* iOS Safari はツールバーの伸縮で 100vh 相当がはみ出しフッターが隠れる。
   dvh が使える環境だけ実際の表示高に合わせる（iOS 16.4+ / 非対応は従来どおり）。 */
@supports (height: 100dvh) {
    .ptc { height: 100dvh; }
}

/* ---- ヘッダー ---- */
.ptc__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #252231;
    border-bottom: 1px solid #35314a;
}
.ptc__num {
    flex: 0 0 auto;
    background: #663EDF;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 99px;
    white-space: nowrap;
}
.ptc__num.is-cont { background: #4a4463; }
.ptc__title {
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ptc__counter {
    flex: 0 0 auto;
    font-size: 13px;
    color: #a49dc0;
    font-variant-numeric: tabular-nums;
}
.ptc__hbtn,
.ptc__nav,
.ptc__done,
.ptc__card,
.ptc-launch {
    /* iOS のダブルタップズーム待ち（約300ms）を切る */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(102, 62, 223, .25);
}

.ptc__hbtn {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid #4a4463;
    color: #cfc9e4;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.ptc__hbtn:hover { background: #33304a; color: #fff; }

/* ---- 本体: スクショ : 本文 = 1.618 : 1 ---- */
.ptc__body { flex: 1 1 auto; display: flex; min-height: 0; }

.ptc__stage {
    flex: 0 0 61.8%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #15141c;
    min-width: 0;
}
.ptc__stage picture {
    display: block;
    width: 100%;
    max-width: 900px;
    max-height: 100%;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    cursor: zoom-in;
}
/* 記事側の img は width 属性を持つので上書きしないと実寸の半分で出る */
.ptc__stage img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    background: #fff;
}

.ptc__text {
    flex: 1 1 38.2%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    color: #333;
    min-width: 0;
}
/* 本文の内側は記事CSSに任せる。ここでは器の余白だけ足す */
.ptc__text > .entry-content { padding: 20px 24px 60px; }
.ptc.is-noimg .ptc__stage { display: none; }
.ptc.is-noimg .ptc__text { flex-basis: 100%; }
.ptc.is-noimg .ptc__text > .entry-content { max-width: 860px; margin: 0 auto; }

/* ---- フッター ---- */
.ptc__foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    /* ホームインジケータにボタンが潜らないようにする（非対応環境では 0 と解釈される） */
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) 16px;
    background: #252231;
    border-top: 1px solid #35314a;
}
.ptc__nav {
    background: #3a3552;
    border: 0;
    color: #fff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.ptc__nav:disabled { opacity: .3; cursor: default; }
.ptc__nav--next { background: #663EDF; }
.ptc__bar { flex: 1 1 auto; height: 6px; border-radius: 99px; background: #3a3552; overflow: hidden; }
.ptc__bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #8a63f0, #663EDF); transition: width .2s; }
.ptc__done {
    background: transparent;
    border: 1px solid #663EDF;
    color: #b9a6ff;
    border-radius: 99px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.ptc__done.is-done { background: #663EDF; color: #fff; }
/* 最終スライドの「全部終わった！」＝記事末尾ボタンの代行。
   トグルではなく確定して閉じる操作なので、押す前から主役の見た目にする。 */
.ptc__done.is-finish { background: #663EDF; border-color: #8a63f0; color: #fff; }
.ptc__done[hidden] { display: none; }   /* 進捗機構が無い環境（Safari系）では出さない */

/* ---- 操作ガイド（1枚目だけ出る吹き出し）----
   「次へ」はフッター右端にあり、初見の読者が進み方に気づかず1枚目で止まる。
   フッターの上へはみ出させるので .ptc__foot に position が要る。
   .ptc 自体に overflow は掛かっていないのではみ出しても切れない（実測済み）。
   z-index は目次(5) / 拡大(6) より下。それらが開いているときは隠れてよい。 */
.ptc__foot { position: relative; }
.ptc__hint {
    position: absolute;
    right: 16px;                 /* フッターの padding-right と揃える */
    bottom: calc(100% + 10px);
    z-index: 4;
    max-width: 320px;
    background: #fff;
    color: #241f38;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    cursor: pointer;             /* 押すと消える（以後そのページでは出ない） */
    /* 出現 → そのままふわふわ上下。目を引かせるのが目的なので止めない。
       同じ transform を2つのアニメーションで触っているが、
       float は .28s 待ってから始まるので競合しない（後勝ちで float が効く）。 */
    animation:
        ptc-hint-in .28s ease-out both,
        ptc-hint-float 2.4s ease-in-out .28s infinite;
}
/* UA の [hidden]{display:none} は上の指定に負けないが、
   将来 display を足したときに黙って壊れないよう明示しておく */
.ptc__hint[hidden] { display: none; }
.ptc__hint::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 28px;                 /* 「次へ」ボタンの中心あたりを指す */
    border: 8px solid transparent;
    border-bottom: 0;
    border-top-color: #fff;
}
@keyframes ptc-hint-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
/* 振幅は 5px。これ以上大きいと矢印の先が「次へ」から離れて指していないように見える */
@keyframes ptc-hint-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}
/* 動きが苦手な人・乗り物酔いする人向け。OS 設定を尊重して完全に止める */
@media (prefers-reduced-motion: reduce) {
    .ptc__hint { animation: none; }
}

/* ---- 目次 ---- */
.ptc__toc {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 5;
    background: #100f16;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
}
.ptc__toc[hidden] { display: none; }
.ptc__toc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ptc__toc-head h3 { margin: 0; font-size: 17px; color: #fff; }
.ptc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.ptc__card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #262336;
    border: 1px solid #3a3552;
    border-radius: 10px;
    overflow: hidden;
    color: #ddd;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.ptc__card:hover { border-color: #663EDF; }
.ptc__card.is-current { border-color: #8a63f0; box-shadow: 0 0 0 2px rgba(138, 99, 240, .4); }
.ptc__card.is-done .ptc__card-num::after { content: " ✓"; color: #7ee08a; }
/* aspect-ratio は iOS 15+。テーマでも未使用なので padding-top 方式にする */
.ptc__card-thumb {
    position: relative;
    display: block;
    padding-top: 62.5%;            /* 16 : 10 */
    background: #15141c;
    color: #4a4463;
    font-size: 12px;
    text-align: center;
    line-height: 1;
}
.ptc__card-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: left top;
}
.ptc__card-body { padding: 8px 10px 10px; }
.ptc__card-num { font-size: 11px; font-weight: 700; color: #8a7fb5; }
.ptc__card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
}

/* ---- 拡大 ---- */
.ptc__zoom {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .92);
    cursor: zoom-out;
}
.ptc__zoom[hidden] { display: none; }
.ptc__zoom img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---- 起動ボタン（記事側） ---- */
.ptc-launch {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0 0 24px;
    padding: 16px 20px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(120deg, #663EDF, #8a63f0);
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(102, 62, 223, .28);
}
.ptc-launch:hover { filter: brightness(1.06); }
.ptc-launch__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.ptc-launch__main { flex: 1 1 auto; }
.ptc-launch__title { display: block; font-size: 16px; font-weight: 700; line-height: 1.4; }
.ptc-launch__sub { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }

/* ---- 再開導線（2026-08-22）----
   ビューワーを途中で閉じると記事の途中に着地する。そこから戻る手段。
   A: サイドバー（.sht-complete-bar の下・1200px 以上のみ）
   B: 各ステップの完了ボタンの横（幅を問わず出る＝狭い画面の答え） */

/* A: サイドバー版。291px のカラムに入るので本体より一回り小さく。
   .toc-sidebar が 1200px 未満で display:none なので、こちらでの幅分岐は不要。 */
.ptc-launch--side {
    margin: 0 0 1.5rem;
    padding: 12px 14px;
    gap: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(102, 62, 223, .22);
}
.ptc-launch--side .ptc-launch__icon { width: 26px; height: 26px; font-size: 11px; }
.ptc-launch--side .ptc-launch__title { font-size: 14px; }
/* 副題は「どこへ戻るか」＝記事の見出し。長いので1行で省略する。
   flex 子の縮小には min-width:0 が要る（既定の auto だと text-overflow が効かない） */
.ptc-launch--side .ptc-launch__main { min-width: 0; }
.ptc-launch--side .ptc-launch__sub {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* B: 完了ボタンの横。
   .sht-complete は元が `margin: 3rem 0 3rem auto` で右寄せされている。
   行の中では auto を殺し、余白は行側に持たせる（縦のリズムを変えない）。 */
.ptc-resume-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;               /* 狭い画面では2段に折る */
    gap: 12px;
    margin: 3rem 0;
}
.ptc-resume-row .sht-complete { margin: 0; }
.ptc-resume {
    flex: 0 0 auto;
    background: #fff;
    border: 2px solid #663EDF;
    color: #663EDF;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.ptc-resume::before { content: "▶"; margin-right: 6px; font-size: .85em; }
.ptc-resume:hover { background: #663EDF; color: #fff; }
/* ふりがなモードでは完了ボタンが消える（_complete-btn.scss）。
   そちらに合わせてこの行ごと引っ込める */
.furigana--on .ptc-resume-row { display: none; }

/* ---- 縦並び: 高さを 1.618 : 1 ----
   境界を 900px にしているのは iPad の縦向き（810 / 834 CSS px）を確実に縦積みへ倒すため。
   834px で左右分割にすると本文カラムが 319px しか取れずコードも本文も読めない。 */
@media (max-width: 900px) {
    .ptc__body { flex-direction: column; }
    .ptc__stage { flex: 0 0 61.8%; padding: 12px; }
    .ptc__text { flex: 1 1 38.2%; }
    .ptc__text > .entry-content { padding: 14px 14px 40px; }
    .ptc__title { font-size: 14px; }
    .ptc__nav { padding: 10px 14px; font-size: 13px; }
    .ptc__done { padding: 9px 12px; font-size: 0; }
    .ptc__done::after { content: "✓"; font-size: 15px; }
    /* ただし最終スライドの「全部終わった！」だけは文字を残す。
       ✓ に潰すと、押したら 100% 確定して閉じる操作だと分からない。 */
    .ptc__done.is-finish { font-size: 12px; }
    .ptc__done.is-finish::after { content: none; }
    /* 360px 幅でも左右 16px の余白を残す */
    .ptc__hint { max-width: calc(100% - 32px); font-size: 12px; }
}


/**
 * プレビューステップ（確認プレビューしておこう）の追加CSS
 *
 * 既存の .ptc__* の定義には手を入れず、必要な分だけを足している。
 *
 * 対象スライド: 記事DOMの `.entry-content.tutorial-content` の**直下**にある `div.voice`。
 * 10記事で実測して、直下の .voice は 100% が「確認プレビューしておこう」だった
 * （「プレイしておこう」は section の内側、「ブクマ」は root の外なので巻き込まない）。
 * タイトル文字列で判定しないので en / es でもそのまま効く。
 *
 * 状態は2つ。
 *   .ptc.is-preview             … 素材あり版（将来）。左=素材 / 右=吹き出し＋広告
 *   .ptc.is-preview.is-nomedia  … 素材なし版。素材が来ない記事はずっとこれ。
 *                                 左=吹き出し＋ひとこと / 右=縦長広告
 */

/* --- プレビュースライドであることを示す色替え -------------------------- */
.ptc__num.is-preview { background: #1f9d72; }
.ptc.is-preview .ptc__stage { background: #101a17; }

/* --- ステージに置く「こうなるはず」の素材（将来: 画像かミニ動画） -------- */
.ptc__media {
    display: block;
    width: 100%;
    max-width: 900px;
    max-height: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    background: #fff;
}
.ptc__media img,
.ptc__media video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

/* --- 素材なし版: 左右を入れ替える --------------------------------------
   DOM は触らず order だけで入れ替える。
   左（本文カラム・白）に吹き出し、右（ステージ・暗）に縦長広告。
   比率は 1.618 : 1 のまま。広い側が吹き出しになる。 */
.ptc.is-nomedia .ptc__text  { order: 0; flex: 0 0 61.8%; }
.ptc.is-nomedia .ptc__stage { order: 1; flex: 1 1 38.2%; }

/* 縦長広告の置き場。ステージの中央に縦に積む。
   ステージの内寸を超えたら縮める。超えたまま置くと下が欠ける
   （1440x900 のノートPCで実測: ステージ内寸 615px に対し 300x600 は 627px 必要で
   27px はみ出した。ウィンドウが低いほど欠ける量は増える）。
   → **本番の広告ユニットはレスポンシブを使うこと。** 固定 300x600 を貼ると
   画面高が足りない環境で下が切れる。CSS では iframe の中身を縮められない。 */
.ptc.is-nomedia .ptc__stage { padding: 12px; }
.ptc__stage-ad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 0;
    max-height: 100%;
    /* **幅の明示は必須。** .ptc__stage は row 方向の flex コンテナで、
       固有幅を持たない要素は 0 に潰れる。モックのダミーは <img width="300"> で
       固有幅を持つので 300px になるが、本物の <ins class="adsbygoogle"> は
       固有幅を持たないため **幅0・高さ0** になり、AdSense は
       availableWidth=0 と判断して広告を配信しない（2026-08-22 実測）。
       既存CSSが ptc-viewer.css で `.ptc__stage picture { width:100% }` を
       明示しているのと同じ理由。
       300px 固定にしているのは、承認済みモックの見た目（暗いパネルに縦長広告）を
       保つため。レスポンシブ枠はこの器の幅を見て 300x600 等を選ぶ。 */
    width: 300px;
    max-width: 100%;
}
/* UA の [hidden]{display:none} は上の display:flex に負ける。
   打ち消さないと step スライドでも広告が出っぱなしになる（2026-08-22 実測）。
   既存CSSも同じ対策を .ptc / .ptc__done / .ptc__toc / .ptc__zoom で入れている。 */
.ptc__stage-ad[hidden] { display: none; }

.ptc__stage-ad .ptc__ad {
    min-height: 0;
    max-height: 100%;
    width: 100%;
}
/* <ins> は固有幅を持たないので、器いっぱいに広げる指定を明示する */
.ptc__stage-ad .ptc__ad ins.adsbygoogle {
    display: block;
    width: 100%;
}
/* モックのダミー画像はここで縮む。実物のレスポンシブ枠は
   この器のサイズを見て自分で最適なサイズを選ぶ。 */
.ptc__stage-ad .ptc__ad img {
    max-height: 100%;
    width: auto;
}

/* --- 広告枠 ------------------------------------------------------------
   本番では中の <img> を __show_adsense() 相当の <ins class="adsbygoogle"> に
   差し替える。枠の余白と中央寄せはここが持つので、入れ替えても崩れない。
   ローカルは AdSense を読めないので placehold.jp のダミー画像を出す。 */
.ptc__ad {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
}
.ptc__ad img,
.ptc__ad ins {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
/* 本文カラム側の広告も、<ins> が固有幅を持たないぶんを器で与える。
   こちらは通常フロー（block）なので潰れはしないが、レスポンシブ枠に
   「使ってよい幅」を伝えるために明示しておく。 */
.ptc__pv .ptc__ad { width: 300px; max-width: 100%; }
.ptc__pv .ptc__ad ins.adsbygoogle { width: 100%; }

.ptc__ad-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: .12em;
    color: #6f6a86;
    text-align: center;
}
/* 白い本文カラムに置くときは地色が変わるので少し明るくする */
.ptc__pv .ptc__ad-label { color: #a9a3bd; }

/* --- 本文カラム側 ------------------------------------------------------
   通常スライドは `.ptc__text > .entry-content` に padding が付くが、
   プレビューは中身が短いので専用の器を用意して余白を持たせる。 */
.ptc__pv { padding: 24px 24px 60px; }
.ptc__pv .voice { margin-top: 0; }

/* 吹き出しの下の「動かしてみよう」のひとこと。**両方の版で出す**。
   一度は素材あり版から外していたが、縦型を「上=素材 / 下は左に文言・右に広告」へ
   組み替えて文言と広告が横に並んだので、「吹き出しが長いと広告が下へ押し出される」
   という外す理由が消えた（2026-08-22 に復活）。 */
.ptc__pv-cue {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #eafaf3;
    border: 1px solid #b7e6d2;
    color: #14684d;
    font-size: 13px;
    line-height: 1.6;
}
.ptc__pv-cue::before { content: "▶"; font-size: 15px; }

/* 素材あり版で本文カラム下に置く広告。区切り線を1本引いて本文と地続きに見せない */
.ptc__pv .ptc__ad {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e6e3ef;
}

/* --- 縦積み（900px 以下 = iPad縦） --------------------------------------
   境界は既存のビューワーと同じ 900px。
   縦型は「上=素材 / 下は左に文言・右に広告」。素材なし版は上段が無いので
   そのまま左右のままにする（縦積みにしない）。 */
@media (max-width: 900px) {
    /* 下余白は 40px だと iPad縦で広告が 4px はみ出してスクロールが要る（実測）。
       プレビューは中身が短くて下に余白が要らないので詰める。 */
    .ptc__pv { padding: 14px 14px 20px; }
    .ptc__pv-cue { margin-top: 14px; padding: 10px 12px; font-size: 12px; }

    /* 素材あり版: ステージ（素材）が上。その下を「文言 : 広告」の横並びにする。
       広告が .ptc__pv の中にあるのはこの版だけなので :not(.is-nomedia) で絞る。 */
    .ptc.is-preview:not(.is-nomedia) .ptc__pv {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }
    .ptc.is-preview:not(.is-nomedia) .ptc__pv-main { flex: 1 1 auto; min-width: 0; }
    .ptc.is-preview:not(.is-nomedia) .ptc__pv .ptc__ad {
        flex: 0 0 auto;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        /* 区切りは上ではなく左に引く */
        padding-left: 16px;
        border-left: 1px solid #e6e3ef;
    }

    /* 素材なし版: 上段に置くものが無いので縦積みにしない。
       左=文言 / 右=広告 のまま。order は縦積み用だったので効かせ直す必要はない。 */
    .ptc.is-nomedia .ptc__body { flex-direction: row; }
    .ptc.is-nomedia .ptc__text  { flex: 1 1 auto; }
    .ptc.is-nomedia .ptc__stage { flex: 0 0 340px; }

    /* 素材あり版の比率は 1.618:1 のまま（既存の .ptc__stage / .ptc__text に任せる）。
       縦積みで比率をいじる案は捨てた。iPad縦 834x1112 で実測したところ、
       ステージの高さは flex-basis ではなく**素材の実寸**で決まっていて
       （min-height:auto のため縮まない）、45% / 42% / 40% / 38% / 35% の
       どれを指定しても stageH=530px から動かなかった＝効果ゼロの死にCSSだった。

       **広告は画面に入ったときに初めて描画すること**（IntersectionObserver）。
       見えないまま <ins> を push するとインプレッションだけ立って可視率が落ちる。 */
}

/* --- スマホ（640px 以下） ----------------------------------------------
   横に並べる幅が無いので、どちらの版も素直に縦積みへ戻す。 */
@media (max-width: 640px) {
    .ptc.is-preview:not(.is-nomedia) .ptc__pv { display: block; }
    .ptc.is-preview:not(.is-nomedia) .ptc__pv .ptc__ad {
        margin-top: 18px;
        padding-top: 16px;
        padding-left: 0;
        border-top: 1px solid #e6e3ef;
        border-left: 0;
    }
    .ptc.is-nomedia .ptc__body { flex-direction: column; }
    .ptc.is-nomedia .ptc__text  { flex: 0 0 auto; }
    .ptc.is-nomedia .ptc__stage { flex: 1 1 auto; }
}