/* about の「6つのアースサービス」紹介動画（音声同期のSVGアニメ）。テロップの設計は「テロップ設計メモ」（_docs/subdomains/top/about_動画_テロップ設計.md）に従う */
.av-wrap { max-width: 980px; margin: 0 auto 28px; }
.av-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 2px 10px; -webkit-overflow-scrolling: touch; }
.av-tab { flex: none; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 14px; padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--bh-ink, #102b3f); box-shadow: 0 0 0 1.5px rgba(16,43,63,.14) inset; }
.av-tab[aria-selected="true"] { background: var(--bh-blue, #0b72b9); color: #fff; box-shadow: none; }
.av-tab[disabled] { opacity: .45; cursor: default; }
.av-tab small { font-weight: 700; font-size: 11px; margin-left: 4px; opacity: .8; }
.av-panel[hidden] { display: none; }
.av-soon { aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 18px; background: #0a2238; color: #fff; text-align: center; font-weight: 800; padding: 20px; }
.av-soon span { display: block; font-size: 13px; font-weight: 600; opacity: .7; margin-top: 6px; }

.av { position: relative; border-radius: 18px; overflow: hidden; background: #0a2238; box-shadow: 0 18px 44px rgba(10,34,56,.35); color: #fff; user-select: none; }
.av-stage { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; background: #0a2238; }
.av:fullscreen { border-radius: 0; display: flex; flex-direction: column; justify-content: center; background: #000; }
.av:fullscreen .av-stage { width: min(100vw, 177.78vh); margin: 0 auto; }
.f-d { font-family: "Dela Gothic One", "Hiragino Sans", sans-serif; }
.f-m { font-family: "Mochiy Pop One", "Hiragino Sans", sans-serif; }
.f-z { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif; }

/* ===== 場面（SVG） ===== */
.av-sc { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.av-sc.on { opacity: 1; visibility: visible; transition: opacity .5s; }
.av-sc > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.av-sc svg * { transform-box: fill-box; transform-origin: center; }
.av-sc svg text { paint-order: stroke fill; stroke-linejoin: round; }
.tx { fill: #fff; stroke: #12284a; stroke-width: 14px; }
.tx2 { fill: #fff; stroke: #12284a; stroke-width: 9px; }
.bg { transition: transform 1s; }
.on .bg { animation: kb 16s linear forwards; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.07); } }

/* 1 */
.s-open .ttl { transition: opacity .5s, transform .7s; }
.s-open.st2 .ttl { opacity: 0; transform: translateY(-40px) scale(.92); }
.s-open .pp { opacity: 0; transform: translateY(-90px) rotate(-3deg); transition: opacity .4s, transform .7s cubic-bezier(.2,1.3,.4,1); }
.s-open.st2 .pp { opacity: 1; transform: none; }
.s-open .stk { transform: scale(0) rotate(-30deg); transition: transform .5s .45s cubic-bezier(.2,1.8,.4,1); }
.s-open.st2 .stk { transform: none; animation: wob 1.2s 1s ease-in-out infinite; }
@keyframes wob { 0%, 100% { rotate: 0deg; } 50% { rotate: 6deg; } }
/* 2 */
.s-papers .pw { opacity: 0; transform: translateY(-120px) rotate(-12deg); }
.s-papers.on .pw { opacity: 1; transform: none; transition: opacity .3s calc(var(--i) * .18s), transform .7s calc(var(--i) * .18s) cubic-bezier(.2,1.4,.4,1); }
.s-papers .num { opacity: 0; transform: translateX(60px) scale(.9); }
.s-papers.on .num { opacity: 1; transform: none; transition: opacity .4s .5s, transform .6s .5s cubic-bezier(.2,1.5,.4,1); }
/* 3 */
.s-write .hl { animation: hlp 1.4s ease-in-out infinite; }
@keyframes hlp { 0%, 100% { opacity: .25; } 50% { opacity: .6; } }
.s-write .arr, .s-write .card, .s-write .stamp { opacity: 0; }
.s-write .arr { transform: translateX(-40px); }
.s-write .card { transform: translateX(50px) scale(.9); }
.s-write.on .arr { opacity: 1; transform: none; transition: opacity .4s 1.2s, transform .5s 1.2s cubic-bezier(.2,1.5,.4,1); }
.s-write.on .card { opacity: 1; transform: none; transition: opacity .4s 2.2s, transform .6s 2.2s cubic-bezier(.2,1.4,.4,1); }
.s-write .stamp { transform: scale(3) rotate(10deg); }
.s-write.st1 .stamp { opacity: 1; transform: none; transition: opacity .15s .75s, transform .35s .75s cubic-bezier(.2,1.9,.4,1); }
/* 4 */
.s-topics .cd { opacity: 0; transform: translateY(40px) scale(.88); }
.s-topics.on .cd { opacity: 1; transform: none; transition: opacity .35s calc(var(--i) * .1s + .15s), transform .55s calc(var(--i) * .1s + .15s) cubic-bezier(.2,1.5,.4,1); }
.s-topics.st2 .cd:not(.hit) { opacity: .18; transition: opacity .4s; }
.s-topics.st2 .cd.hit { transform: translate(328px, 66px) scale(1.3); transition: transform .6s cubic-bezier(.2,1.4,.4,1); filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); }
.s-topics .badge { opacity: 0; transform: scale(0) rotate(-20deg); }
.s-topics.st2 .badge { opacity: 1; transform: none; transition: opacity .2s .7s, transform .5s .7s cubic-bezier(.2,1.9,.4,1); }
/* 5 */
.s-reach .cnt { opacity: 0; transform: translateX(-50px); }
.s-reach.on .cnt { opacity: 1; transform: none; transition: opacity .4s, transform .6s cubic-bezier(.2,1.4,.4,1); }
.s-reach .lg > g { opacity: 0; transform: translateY(20px) scale(.8); }
.s-reach.on .lg > g { opacity: 1; transform: none; transition: opacity .3s calc(.6s + var(--i) * .5s), transform .5s calc(.6s + var(--i) * .5s) cubic-bezier(.2,1.8,.4,1); }
.s-reach .bars { opacity: 0; transform: translateX(50px); }
.s-reach.st1 .bars { opacity: 1; transform: none; transition: opacity .4s, transform .6s cubic-bezier(.2,1.4,.4,1); }
.s-reach .b2 { transform: scaleY(0); transform-origin: 50% 100%; }
.s-reach.st1 .b2 { transform: scaleY(1); transition: transform 1.6s .6s cubic-bezier(.2,.9,.3,1); }
.s-reach .v2, .s-reach .x32 { opacity: 0; }
.s-reach.st1 .v2 { opacity: 1; transition: opacity .3s 2s; }
.s-reach .x32 { transform: scale(0) rotate(-20deg); }
.s-reach.st2 .x32 { opacity: 1; transform: none; transition: opacity .15s, transform .45s cubic-bezier(.2,1.9,.4,1); }
/* 6 */
.s-end .cta { animation: ctap 1.6s ease-in-out infinite; cursor: pointer; }
@keyframes ctap { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ===== アースフェス編（event_scenes.php） ===== */
.s-numbers .big { opacity: 0; transform: scale(.8); }
.s-numbers.on .big { opacity: 1; transform: none; transition: opacity .3s .1s, transform .6s .1s cubic-bezier(.2,1.5,.4,1); }
.s-numbers .sub1, .s-numbers .sub2 { opacity: 0; transform: translateX(70px); }
.s-numbers.st2 .sub1 { opacity: 1; transform: none; transition: opacity .3s .15s, transform .6s .15s cubic-bezier(.2,1.5,.4,1); }
.s-numbers.st2 .sub2 { opacity: 1; transform: none; transition: opacity .3s .65s, transform .6s .65s cubic-bezier(.2,1.5,.4,1); }
.s-calendar .win, .s-map .mapw, .s-map .chw, .s-stalls .stw { opacity: 0; transform: translateY(40px) scale(.94); }
.s-calendar.on .win, .s-map.on .mapw, .s-stalls.on .stw { opacity: 1; transform: none; transition: opacity .35s .1s, transform .6s .1s cubic-bezier(.2,1.4,.4,1); }
.s-map.on .chw { opacity: 1; transform: none; transition: opacity .35s .6s, transform .6s .6s cubic-bezier(.2,1.4,.4,1); }
.s-calendar .call, .s-map .nr { opacity: 0; transform: scale(.3); }
.s-calendar.st2 .c1 { opacity: 1; transform: none; transition: opacity .15s .1s, transform .5s .1s cubic-bezier(.2,1.9,.4,1); }
.s-calendar.st2 .c2 { opacity: 1; transform: none; transition: opacity .15s 1.1s, transform .5s 1.1s cubic-bezier(.2,1.9,.4,1); }
.s-map.st1 .nr { opacity: 1; transform: none; transition: opacity .2s, transform .5s cubic-bezier(.2,1.9,.4,1); }
.s-map .rg { opacity: 0; }
.s-map.st3 .rg { opacity: 1; animation: ringP 1s ease-in-out infinite; transition: opacity .3s; }
.s-map.st3 .r2 { animation-delay: .25s; }
@keyframes ringP { 0%, 100% { scale: 1; } 50% { scale: 1.35; } }
.s-stalls .sr, .s-stalls .sr2 { opacity: 0; }
.s-stalls.st2 .sr { opacity: 1; transition: opacity .2s calc(var(--i) * .55s + .3s); animation: ringP 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .55s + .3s); }
.s-stalls.st4 .sr2 { opacity: 1; transition: opacity .2s calc(var(--i) * .5s + .2s); animation: ringP 1.2s ease-in-out infinite; }
.s-stalls.st4 .sr { opacity: .35; animation: none; }
.s-words .sbox { opacity: 0; transform: translateY(-30px); }
.s-words.on .sbox { opacity: 1; transform: none; transition: opacity .3s, transform .5s cubic-bezier(.2,1.5,.4,1); }
.s-words .tclip { width: 0; }
.s-words.st1 .tclip { width: 560px; transition: width 2.2s .3s steps(12, end); }
.s-words .rc { opacity: 0; transform: translateY(40px) scale(.9); }
.s-words.st2 .rc { opacity: 1; transform: none; transition: opacity .3s calc(var(--i) * .15s + .1s), transform .5s calc(var(--i) * .15s + .1s) cubic-bezier(.2,1.5,.4,1); }
.s-words .ok { opacity: 0; transform: scale(0) rotate(-20deg); }
.s-words.st2 .ok { opacity: 1; transform: none; transition: opacity .15s 1.2s, transform .45s 1.2s cubic-bezier(.2,1.9,.4,1); }

/* ===== キャラクター ===== */
.av-chara { position: absolute; z-index: 6; width: 21cqw; aspect-ratio: 1; bottom: 11.5cqw; transition: transform .35s cubic-bezier(.2,1.4,.4,1), filter .35s, opacity .6s; transform-origin: 50% 100%; filter: brightness(.8); opacity: 0; }
.av.started .av-chara { opacity: 1; }
.av-chara i { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 300% 600%; background-position: 0 0; filter: drop-shadow(0 1cqw 1.2cqw rgba(0,0,0,.45)); }
.av-chara .rx { display: none; position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 1cqw 1.2cqw rgba(0,0,0,.45)); pointer-events: none; }
.av-chara.rx-on { transform: none; filter: none; z-index: 8; }
.av-chara[data-rx="sigh"] .rx { height: 86%; }
.av-chara.rx-on i { visibility: hidden; }
.av-chara.rx-on .rx { display: block; }
.av-chara.rx-on .rx { animation: rxIn .3s cubic-bezier(.2,1.8,.4,1); }
@keyframes rxIn { from { scale: .8; } to { scale: 1; } }
.av-chara.talk { transform: scale(1.08); filter: none; z-index: 7; }
.av-chara.talk i { animation: avBob 1.1s ease-in-out infinite; }
.av-chara.hop i { animation: avHop .42s cubic-bezier(.3,1.6,.5,1); }
@keyframes avBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.2%; } }
@keyframes avHop { 0% { translate: 0 0; } 40% { translate: 0 -6%; } 100% { translate: 0 0; } }
.av-chara[data-slot="l"] { left: .5cqw; }
.av-chara[data-slot="r"] { right: .5cqw; }
.av-chara[data-slot="c"] { left: 50%; margin-left: -7cqw; width: 14cqw; bottom: 12.5cqw; }
/* ビシッ：ホウ博士が駆け寄って叩き、ガジュじいがのけぞる */
.av-chara.dash .rx { animation: houDash .85s cubic-bezier(.3,.1,.3,1) both; }
@keyframes houDash { 0% { transform: translateX(-50%); } 28% { transform: translateX(calc(-50% - 56cqw)) rotate(-5deg); } 72% { transform: translateX(calc(-50% - 56cqw)) rotate(-5deg); } 100% { transform: translateX(-50%); } }
.av-chara.hit { animation: gajuHit .7s cubic-bezier(.2,.9,.3,1); }
@keyframes gajuHit { 0% { translate: 0 0; rotate: 0deg; } 15% { translate: -4cqw 0; rotate: -12deg; } 35% { translate: -2cqw 0; rotate: 8deg; } 55% { translate: -3cqw 0; rotate: -6deg; } 100% { translate: 0 0; rotate: 0deg; } }
.av-stage.shake { animation: stShake .32s steps(8); }
@keyframes stShake { 0% { translate: 0 0; } 20% { translate: -.7cqw .4cqw; } 40% { translate: .7cqw -.4cqw; } 60% { translate: -.5cqw -.3cqw; } 80% { translate: .4cqw .3cqw; } 100% { translate: 0 0; } }
.av-flash { position: absolute; inset: 0; z-index: 11; background: #fff; opacity: 0; pointer-events: none; }
.av-flash.on { animation: flash .22s ease-out; }
@keyframes flash { from { opacity: .55; } to { opacity: 0; } }

/* ===== テロップ ===== */
/* ② 見出しテロップ：左上。極太のDela Gothic、キーワードだけ黄色。左からワイプ。画面高さの約8% */
.av-telop { position: absolute; z-index: 9; left: 0; top: 2.2cqw; max-width: 96cqw; padding: .5cqw 3cqw .5cqw 2.6cqw; font-family: "Mochiy Pop One", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif; font-size: 4.4cqw; line-height: 1.25; color: #fff; letter-spacing: .02em; background: linear-gradient(90deg, rgba(8,28,50,.9), rgba(8,28,50,.82)); border-left: 1.1cqw solid #f2b134; border-radius: 0 3cqw 3cqw 0; box-shadow: 0 .6cqw 1.8cqw rgba(0,0,0,.45); clip-path: inset(0 100% 0 0); opacity: 0; paint-order: stroke fill; -webkit-text-stroke: .42cqw #08182b; text-shadow: 0 .3cqw 0 rgba(0,0,0,.5); }
.av-telop.long { font-size: 3.5cqw; }
.av-telop.on { opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path .38s cubic-bezier(.2,.9,.3,1); }
.av-telop em { font-style: normal; color: #ffe44d; font-size: 1.18em; }
/* ① 会話字幕：最下段・中央。話す人ごとに色（ガジュ=赤／ホウ=青／ちゅら=緑／みんな=ピンク）。白ふち→濃色ふち→影の三重。
   強調（<em>）は全員共通：黄色・1.3倍・少し傾ける。1かたまり19字以内で1行に収める */
.av-cap { position: absolute; z-index: 10; left: 50%; bottom: 1.8cqw; transform: translateX(-50%); width: max-content; text-align: center; font-family: "Mochiy Pop One", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif; font-size: 4.9cqw; line-height: 1.25; white-space: nowrap; pointer-events: none; --c: #ff4b3e; --d: #5b0b06; }
.av-cap[data-who="hou"] { --c: #3d9bff; --d: #08295f; }
.av-cap[data-who="chura"] { --c: #2fd283; --d: #06432a; }
.av-cap[data-who="watari"] { --c: #a56bff; --d: #2c0f66; }
.av-cap[data-who="kami"] { --c: #1fb8c9; --d: #05434c; }
.av-cap[data-who="amarin"] { --c: #ff9a1f; --d: #5a2c00; }
.av-cap[data-who="dongu"] { --c: #d9924a; --d: #4a2a0c; }
.av-cap[data-who="guest"] { --c: #fff6dc; --ring: #1d3a63; --d: #0a1630; }   /* インタビューの人：あたたかい白の文字＋濃い青のふち（薄い色×白ふちで読みにくかったため） */
.av-cap[data-who="all"] { --c: #ff7ac2; --d: #5a0f3a; }
.av-cap:empty { display: none; }
.av-cap .c { position: relative; display: inline-block; isolation: isolate; color: var(--c); -webkit-text-stroke: 1cqw var(--ring, #fff); paint-order: stroke fill; filter: drop-shadow(0 .6cqw 0 rgba(0,0,0,.5)); }
.av-cap .c::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; color: var(--d); -webkit-text-stroke: 2.3cqw var(--d); paint-order: stroke fill; }
.av-cap .c { margin: 0 .03em; }
.av-cap .c.em { font-size: 1.3em; color: #ffe44d; rotate: -3deg; margin: 0 .24em; z-index: 1; }
.av-cap .c.em:first-of-type, .av-cap .nm + .c.em { margin-left: .08em; }
.av-cap .c.em::before { color: #7a0d08; -webkit-text-stroke-color: #7a0d08; }
.av-cap[data-who="guest"] .nm { color: #14253f; }
.av-cap .nm { position: absolute; z-index: 5; left: 0; top: -4.6cqw; font-style: normal; font-size: 2.2cqw; padding: .1em .8em; border-radius: 999px; color: #fff; background: var(--c); border: .3cqw solid #fff; box-shadow: 0 .3cqw 0 var(--d); -webkit-text-stroke: 0; }
.av-cap.pop { animation: capPop .24s cubic-bezier(.2,1.7,.4,1); }
@keyframes capPop { from { opacity: .2; scale: .86; translate: 0 1cqw; } to { opacity: 1; scale: 1; translate: 0 0; } }
.av-cap .c.em { animation: emBounce .5s cubic-bezier(.2,1.9,.4,1) .12s both; }
@keyframes emBounce { from { scale: .6; } to { scale: 1; } }
/* ③ 効果テロップ（ビシッ！など）：中央寄り、斜め、巨大、バウンド。10秒に1回ほど */
.av-fxword { position: absolute; z-index: 12; left: 20cqw; top: 19cqw; padding: 1.2cqw 4cqw; font-family: "Mochiy Pop One", "Hiragino Sans", sans-serif; font-size: 11cqw; line-height: 1; color: #ffe14d; white-space: nowrap; paint-order: stroke fill; -webkit-text-stroke: 1.5cqw #c8261a; text-shadow: 0 1cqw 0 rgba(90,10,0,.6); opacity: 0; pointer-events: none; rotate: -9deg; }
.av-fxword::before { content: ""; position: absolute; inset: -2cqw -3cqw; z-index: -1; background: #fff; opacity: .92; clip-path: polygon(50% 0, 60% 22%, 82% 6%, 78% 32%, 100% 30%, 86% 50%, 100% 70%, 78% 68%, 84% 94%, 62% 78%, 50% 100%, 38% 78%, 16% 94%, 22% 68%, 0 70%, 14% 50%, 0 30%, 22% 32%, 18% 6%, 40% 22%); }
.av-fxword[data-k="ding"] { color: #fff; -webkit-text-stroke-color: #1b9a5f; left: 26cqw; top: 14cqw; font-size: 8cqw; }
.av-fxword[data-k="shock"] { color: #fff; -webkit-text-stroke-color: #5b3bb0; left: 30cqw; top: 22cqw; }
.av-fxword.on { animation: fxPop 1.15s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes fxPop { 0% { opacity: 0; scale: .2; } 14% { opacity: 1; scale: 1.25; } 28% { scale: .95; } 40% { scale: 1.04; } 78% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.1; } }

/* ===== 再生前の表紙・操作 ===== */
.av-cover { position: absolute; inset: 0; z-index: 14; display: grid; place-items: center; background: linear-gradient(180deg, rgba(5,20,34,.25), rgba(5,20,34,.72)); cursor: pointer; border: 0; width: 100%; color: #fff; font: inherit; transition: opacity .4s; }
.av.started .av-cover { opacity: 0; pointer-events: none; }
.av-cover .play { width: 11cqw; height: 11cqw; border-radius: 50%; background: #f2b134; display: grid; place-items: center; box-shadow: 0 0 0 1.2cqw rgba(242,177,52,.3), 0 1cqw 3cqw rgba(0,0,0,.5); }
.av-cover .play::after { content: ""; border-left: 3.6cqw solid #3a2800; border-top: 2.2cqw solid transparent; border-bottom: 2.2cqw solid transparent; margin-left: .8cqw; }
.av-cover .ttl { position: absolute; left: 0; right: 0; bottom: 3.4cqw; text-align: center; font-family: "Dela Gothic One", "Hiragino Sans", sans-serif; font-size: 4.6cqw; paint-order: stroke fill; -webkit-text-stroke: .6cqw #08182b; text-shadow: 0 .4cqw 0 rgba(0,0,0,.5); }
.av-cover .ttl small { display: block; font-family: "Zen Maru Gothic", sans-serif; font-size: .42em; color: #f2b134; letter-spacing: .2em; -webkit-text-stroke: .3cqw #08182b; }
.av-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #06182a; }
.av-bar button { border: 0; background: transparent; color: #fff; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }
.av-bar button:hover { background: rgba(255,255,255,.14); }
.av-bar svg { width: 18px; height: 18px; fill: currentColor; }
.av-seek { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.2); cursor: pointer; position: relative; }
.av-seek i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: #f2b134; }
.av-time { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; min-width: 82px; text-align: right; }
.av-credit { font-size: 11px; opacity: .6; padding: 0 12px 8px; background: #06182a; }
@media (max-width: 560px) { .av-cap { font-size: 5.2cqw; } .av-telop { font-size: 5cqw; } .av-telop.long { font-size: 4cqw; } }
@media (prefers-reduced-motion: reduce) { .av *, .av *::before { animation: none !important; } }
.av-chara[data-slot="r"] .rx { left: 44%; }

/* インタビュー映像の窓（アースヒーロー編）。下の焼き込み字幕は切り落とす */
.av-clip { position: absolute; z-index: 5; left: 30cqw; top: 11.2cqw; width: 40cqw; height: 18.8cqw; border-radius: 1.2cqw; overflow: hidden; border: .5cqw solid #fff; box-shadow: 0 1.4cqw 3cqw rgba(0,0,0,.55); background: #000; opacity: 0; transform: scale(.88) translateY(2cqw); transition: opacity .3s, transform .5s cubic-bezier(.2,1.5,.4,1); pointer-events: none; }
.av-clip.on { opacity: 1; transform: none; }
.av-clip video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
.av-clip::after { content: "インタビュー"; position: absolute; left: 0; top: 0; padding: .3cqw 1.2cqw; font-size: 1.5cqw; font-weight: 900; font-family: "Zen Maru Gothic", sans-serif; background: #e0452f; color: #fff; border-bottom-right-radius: 1cqw; }
/* 左の席の人が叩くときは、右へ駆け寄る */
.av-chara[data-slot="l"].dash .rx { animation-name: houDashR; }
@keyframes houDashR { 0% { transform: translateX(-50%); } 28% { transform: translateX(calc(-50% + 56cqw)) rotate(5deg); } 72% { transform: translateX(calc(-50% + 56cqw)) rotate(5deg); } 100% { transform: translateX(-50%); } }

/* ===== 共通の部品（窓・バッジ・リング）と、セッション／クエスト／アカデミー／ボラ／ヒーロー編 ===== */
.sw, .s-chatwin { opacity: 0; transform: translateY(40px) scale(.94); }
.on .sw { opacity: 1; transform: none; transition: opacity .35s .1s, transform .6s .1s cubic-bezier(.2,1.4,.4,1); }
.rg { opacity: 0; transform-box: fill-box; transform-origin: center; }
.pp .sw { opacity: 1; transform: none; }
/* 見出しのバッジ（出典つき！など） */
.badge { opacity: 0; transform: scale(0) rotate(-20deg); }
.s-answer.st2 .badge, .s-trust.st0 .badge { opacity: 1; transform: none; transition: opacity .2s .9s, transform .5s .9s cubic-bezier(.2,1.9,.4,1); }
.s-explain.st0 .badge { opacity: 1; transform: none; transition: opacity .2s 1.4s, transform .5s 1.4s cubic-bezier(.2,1.9,.4,1); }
.s-okinawa.st1 .badge { opacity: 1; transform: none; transition: opacity .2s .3s, transform .5s .3s cubic-bezier(.2,1.9,.4,1); }
.s-card.st1 .badge { opacity: 1; transform: none; transition: opacity .2s .2s, transform .5s .2s cubic-bezier(.2,1.9,.4,1); }
/* セッション */
.s-open .stk3 { opacity: 0; }
.s-ask .typed { opacity: 0; }
.s-ask.on .typed { opacity: 1; transition: opacity .2s .5s; }
.s-ask .aclip { width: 0; }
.s-ask.on .aclip { width: 470px; transition: width 3.4s .9s steps(19, end); }
.s-ask.st1 .send { opacity: 1; animation: ringP 1s ease-in-out infinite; transition: opacity .2s; }
.s-ask.st2 .chipsr { opacity: 1; animation: ringP 1.2s ease-in-out infinite; transition: opacity .2s; }
.s-ask.st2 .send { opacity: .3; animation: none; }
.s-answer.st0 .r1, .s-answer.st1 .r1 { opacity: 1; animation: ringP 1.2s ease-in-out infinite; }
.s-answer.st2 .r3, .s-answer.st3 .r3 { opacity: 1; animation: ringP 1.1s ease-in-out infinite; }
.s-trust .lens { opacity: 0; transform: translate(-60px, 40px); }
.s-trust.on .lens { opacity: 1; transform: none; transition: opacity .3s .3s, transform .7s .3s cubic-bezier(.2,1.3,.4,1); animation: lensMove 3s ease-in-out 1.2s infinite alternate; }
@keyframes lensMove { from { translate: 0 0; } to { translate: 90px 20px; } }
.s-lang .lg > g { opacity: 0; transform: translateY(24px) scale(.8); }
.s-lang.on .lg > g { opacity: 1; transform: none; transition: opacity .3s calc(.2s + var(--i) * .4s), transform .5s calc(.2s + var(--i) * .4s) cubic-bezier(.2,1.8,.4,1); }
.s-lang .guest { opacity: 0; transform: translateY(30px); }
.s-lang.st1 .guest { opacity: 1; transform: none; transition: opacity .3s, transform .5s cubic-bezier(.2,1.5,.4,1); }
/* クエスト */
.s-cats.st1 .r1 { opacity: 1; animation: ringP 1s ease-in-out infinite; transition: opacity .2s .2s; }
.s-play .q5 { opacity: 0; transform: scale(.3); }
.s-play.on .q5 { opacity: 1; transform: none; transition: opacity .2s .3s, transform .5s .3s cubic-bezier(.2,1.8,.4,1); }
.s-play .wrong { opacity: 0; transform: scale(2.4) rotate(10deg); }
.s-play.st2 .wrong, .s-play.st3 .wrong, .s-play.st4 .wrong { opacity: 1; transform: none; transition: opacity .15s, transform .4s cubic-bezier(.2,1.9,.4,1); }
/* アカデミー */
.s-dive .diver { transform: translateX(0); }
.s-dive.st1 .diver { transform: translateX(160px); transition: transform 1.6s cubic-bezier(.3,.7,.3,1); }
.s-dive.st2 .diver { transform: translateX(480px); transition: transform 5s cubic-bezier(.3,.7,.3,1); }
.s-dive .depth { opacity: 0; transform: translateY(20px) scale(.8); }
.s-dive.st1 .depth { opacity: 1; transform: none; transition: opacity .3s, transform .5s cubic-bezier(.2,1.6,.4,1); }
.s-level .lv { opacity: 0; transform: translateY(40px) scale(.85); }
.s-level.on .lv { opacity: 1; transform: none; transition: opacity .3s calc(var(--i) * .35s + .1s), transform .6s calc(var(--i) * .35s + .1s) cubic-bezier(.2,1.6,.4,1); }
.s-title .md { opacity: 0; transform: scale(.3) rotate(-30deg); }
.s-title.st1 .md { opacity: 1; transform: none; transition: opacity .2s calc(var(--i) * .5s), transform .6s calc(var(--i) * .5s) cubic-bezier(.2,1.9,.4,1); }
.s-title .ok { opacity: 0; transform: scale(0); }
.s-title.st0 .ok { opacity: 1; transform: none; transition: opacity .2s 1.6s, transform .5s 1.6s cubic-bezier(.2,1.9,.4,1); }
.s-card .cd2 { opacity: 0; transform: translateY(40px) rotate(-8deg) scale(.8); }
.s-card.st0 .cd2, .s-card.on .cd2 { opacity: 1; transform: none; transition: opacity .3s calc(var(--i) * .4s + .3s), transform .6s calc(var(--i) * .4s + .3s) cubic-bezier(.2,1.7,.4,1); }
/* ボラ */
.s-open .bin { opacity: 0; transform: translateY(40px) scale(.85); }
.s-open.st2 .bin { opacity: 1; transform: none; transition: opacity .3s calc(var(--i) * .3s + .1s), transform .6s calc(var(--i) * .3s + .1s) cubic-bezier(.2,1.6,.4,1); }
.s-flow .vn { opacity: .22; transform: scale(.85); }
.s-flow.st0 .n1, .s-flow.st2 .n2, .s-flow.st3 .n3, .s-flow.st3 .n4, .s-flow.st4 .n5, .s-flow.st5 .n6, .s-flow.st6 .n7 { opacity: 1; transform: none; transition: opacity .3s, transform .55s cubic-bezier(.2,1.9,.4,1); }
.s-flow.st1 .n1, .s-flow.st2 .n1, .s-flow.st3 .n1, .s-flow.st4 .n1, .s-flow.st5 .n1, .s-flow.st6 .n1, .s-flow.st3 .n2, .s-flow.st4 .n2, .s-flow.st5 .n2, .s-flow.st6 .n2, .s-flow.st4 .n3, .s-flow.st4 .n4, .s-flow.st5 .n3, .s-flow.st5 .n4, .s-flow.st5 .n5, .s-flow.st6 .n3, .s-flow.st6 .n4, .s-flow.st6 .n5, .s-flow.st6 .n6 { opacity: 1; transform: none; }
.s-flow .pt100, .s-flow .pinm { opacity: 0; transform: scale(2.2) rotate(8deg); }
.s-flow.st1 .pt100 { opacity: 1; transform: none; transition: opacity .15s .1s, transform .4s .1s cubic-bezier(.2,1.9,.4,1); }
.s-flow.st2 .pt100 { opacity: 0; transition: opacity .3s; }
.s-flow.st2 .pinm { opacity: 1; transform: none; transition: opacity .15s .2s, transform .45s .2s cubic-bezier(.2,1.9,.4,1); }
.s-flow.st3 .pinm { opacity: 0; transition: opacity .3s; }
.s-map .mpin { opacity: 0; transform: translateY(-30px) scale(.6); }
.s-map.on .mpin { opacity: 1; transform: none; transition: opacity .25s calc(var(--i) * .25s + .4s), transform .5s calc(var(--i) * .25s + .4s) cubic-bezier(.2,1.9,.4,1); }
.s-map .grow { opacity: 0; transform: scale(.3) translateX(40px); }
.s-map.st2 .g1 { opacity: 1; transform: none; transition: opacity .2s .9s, transform .55s .9s cubic-bezier(.2,1.9,.4,1); animation: growB 1.6s 1.6s ease-in-out infinite; }
.s-map.st2 .g2 { opacity: 1; transform: none; transition: opacity .2s 1.3s, transform .55s 1.3s cubic-bezier(.2,1.9,.4,1); animation: growB 1.6s 2s ease-in-out infinite; }
@keyframes growB { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }
.s-map .legend { opacity: 0; }
.s-map.st1 .legend { opacity: 1; transition: opacity .4s; }
/* ヒーロー */
.s-open .mic { opacity: 0; transform: translateY(20px); }
.s-open.st2 .mic { opacity: 1; transform: none; transition: opacity .3s, transform .5s cubic-bezier(.2,1.5,.4,1); }
.mic .w1, .mic .w2 { animation: micW 1.4s ease-in-out infinite; }
.mic .w2 { animation-delay: .35s; }
@keyframes micW { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.sq .mic { opacity: 1; }
.s-who .pp2 { opacity: 0; transform: translateY(40px) scale(.94); }
.s-who.on .pp2 { opacity: 1; transform: none; transition: opacity .3s .1s, transform .6s .1s cubic-bezier(.2,1.5,.4,1); }
.s-call .pp3 { opacity: 0; transform: translateY(40px) scale(.9) rotate(-4deg); }
.s-call.on .pp3 { opacity: 1; transform: none; transition: opacity .3s calc(var(--i) * .3s + .1s), transform .6s calc(var(--i) * .3s + .1s) cubic-bezier(.2,1.7,.4,1); }

/* キャラの動き（move）で画面を動き回っている間は、立ち位置の姿を消す */
.av.started .av-chara.mv-away { opacity: 0; transition: none; }