/* 動く漫画LP(縦読み)v2 — ページ画像はそのまま。吹き出しには何も重ねない。見せ場はページ単位の光・揺れ。ページの拡大縮小はしない */
:root { --navy:#1f2a44; --paper:#f7f3ec; --amber:#e8a33d; --teal:#2bb3a3; }
html, body { margin: 0; background: var(--navy); }
main { max-width: 480px; margin: 0 auto; background: var(--paper); overflow: hidden; }
img { display: block; width: 100%; height: auto; }
a { display: block; }
.pg { position: relative; }
.art { position: relative; overflow: hidden; }

/* 冒頭: 弾むように現れる */
.hero .art img { animation: heroIn .9s cubic-bezier(.2,1.2,.3,1) both; }
@keyframes heroIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* パーツのページ: 上から現れる */
.part .art img { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.3,.7,.2,1); }
.part.in .art img { clip-path: inset(0 0 0 0); }

/* 見せ場(文字なし) */
.fx { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.fx-dim { background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 35%, rgba(5,8,20,.55) 100%); transition: opacity 2.6s ease; }
.fx-warm { background: radial-gradient(ellipse at 80% 15%, rgba(255,214,140,.4) 0%, rgba(255,214,140,0) 60%); mix-blend-mode: screen; transition: opacity 2s ease; }
.fx-flash { background: #fff; }
.fx-glow { background: radial-gradient(circle at 70% 30%, rgba(43,179,163,.5) 0%, rgba(43,179,163,0) 55%); mix-blend-mode: screen; transition: opacity 1.2s ease; }
.fx-sweep { background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,236,200,.38) 48%, rgba(255,255,255,0) 66%); background-size: 250% 100%; mix-blend-mode: screen; }
.pg.fx-on .fx-dim, .pg.fx-on .fx-warm, .pg.fx-on .fx-glow { opacity: 1; }
.pg.fx-on .fx-sweep { opacity: 1; animation: sweep 3.4s ease-in-out 1 forwards; }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -30% 0; } }
.pg.fx-on .fx-flash { animation: flash .55s ease-out 1; }
@keyframes flash { 0% { opacity: 0; } 18% { opacity: .6; } 100% { opacity: 0; } }
.pg.shake .art { animation: shake .42s cubic-bezier(.36,.07,.19,.97) 1; }
@keyframes shake { 10%,90% { translate: -2px 0; } 20%,80% { translate: 4px 0; } 30%,50%,70% { translate: -6px 1px; } 40%,60% { translate: 6px -1px; } }

/* P14 の自己チェック */
.tick { position: absolute; display: block; cursor: pointer; border-radius: 8px; transition: background-color .25s; }
.tick.done { background: rgba(232,163,61,.12); }
.tick i { position: absolute; display: block; }
.tick i::after { content: ""; position: absolute; left: 33%; top: 2%; width: 30%; height: 66%; border: solid var(--amber); border-width: 0 clamp(3px,1.1vw,6px) clamp(3px,1.1vw,6px) 0;
  transform: rotate(42deg) scale(.2); opacity: 0; transition: transform .3s cubic-bezier(.2,1.6,.3,1), opacity .15s; }
.tick.done i::after { opacity: 1; transform: rotate(42deg) scale(1); }

/* P18 の申込ボタンの周りが脈打つ */
.ring { position: absolute; display: block; border-radius: 14px; pointer-events: none; }
.pg.in .ring { animation: ring 1.6s ease-out .8s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(232,163,61,.75); } 70% { box-shadow: 0 0 0 16px rgba(232,163,61,0); } 100% { box-shadow: 0 0 0 0 rgba(232,163,61,0); } }

/* 動きを減らす設定・JavaScriptが無い時: 最初から全部読める */
.no-js .part .art img { clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  .hero .art img, .pg.shake .art, .pg.fx-on .fx-sweep, .pg.fx-on .fx-flash, .pg.in .ring { animation: none !important; }
  .part .art img { clip-path: none; transition: none; }
}

/* v002: 人物が演技する動画のページ(最初は元の絵。画面に6割入ったら1回演じて最後の表情で止まる。押すともう一度) */
video.koma { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: var(--paper); cursor: pointer; }