/* 足場道場 在庫売り出しページの「ヤードの場面」（2026-10-30 社長指示：道場クラブのように賑やかに、4〜5コマの物語のパラパラ漫画）
 * 5コマ：トラック到着 → 堀川（ゾロ役）と佐々木（コック役）が運ぶ → ナミとロビンが怒る → 社長が大放出を叫ぶ → 全員で決めポーズ。
 * 顔が見えるよう、1コマ2.6〜3.6秒とゆっくり切り替える。コマの中は少しずつ寄り、手書き風の吹き出し（AIで描いた絵）がポンと出る。 */
.butai{background:linear-gradient(180deg,#0f0e0c 0%,#1d1a12 100%);overflow:hidden}
.butai-stage{position:relative;aspect-ratio:3/2;margin-top:30px;border-radius:18px;overflow:hidden;border:4px solid var(--ki);background:#cfe8f7;box-shadow:0 30px 60px rgba(0,0,0,.5)}

.koma-e{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .5s ease}
.koma-e.on{opacity:1;z-index:1}
.koma-e .e{width:100%;height:100%;object-fit:cover;transform-origin:var(--o,50% 50%)}
.koma-e.on .e{animation:yoru-koma var(--t,3s) ease-out both}
@keyframes yoru-koma{from{transform:scale(1)}to{transform:scale(1.07)}}

/* 手書き風の吹き出し：ポンと出て、ふわふわ揺れる */
.koma-e .fk{position:absolute;height:auto;opacity:0;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));z-index:2}
.koma-e.on .fk{animation:fk-pon .6s var(--d,.4s) cubic-bezier(.3,1.6,.5,1) both,fk-yure 2.4s calc(var(--d,.4s) + .6s) ease-in-out infinite}
@keyframes fk-pon{from{opacity:0;transform:scale(.3) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes fk-yure{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -6px;rotate:-2deg}}

/* コマの切り替わりで一瞬光る */
.butai-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:3;pointer-events:none}
.butai-flash.pika{animation:pika .35s ease-out}
@keyframes pika{from{opacity:.55}to{opacity:0}}

/* 下のコマ番号 */
.koma-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px;z-index:4}
.koma-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);border:2px solid rgba(0,0,0,.4)}
.koma-dots i.on{background:var(--ki);transform:scale(1.25)}

/* 左上の数：踏板がどんどん増える */
.butai-kazu{position:absolute;left:14px;top:12px;z-index:5;background:rgba(0,0,0,.78);color:#fff;border-radius:12px;padding:6px 14px;font-weight:900;font-size:clamp(11px,1.4vw,16px)}
.butai-kazu .num{color:var(--ki);font-size:1.8em;margin:0 3px}
.butai-kazu i{font-style:normal;color:#7fff9e;margin-left:6px;font-size:.9em}
.butai-note{margin-top:10px;font-size:12px;color:var(--usui)}

@media (prefers-reduced-motion:reduce){
  .koma-e{transition:none}
  .koma-e .fk{opacity:1}
}