/* ===========================================================================
   ドパガキ問題集 — assets/dpg-t-cheer2.css（2026-10-29 区間T13 担当K1「おめでとう2」。本人だけに見える 't-intro'）
   合格体験記の書く画面の ② おめでとうを「演出2（ゲーム機を放り出す流れ）」にした分。部品は dpg-t-intro.js の runCheer2 が札の時だけ作る
   （札が無い時は、この CSS の物はどれも画面に無い＝今の画面のまま）。
   6コマ・約5.3秒: 1 夢中 0〜0.7秒 → 2 気づく 0.7〜1.3秒 → 3 驚く 1.3〜3.9秒 → 4 放り出す 3.9〜4.5秒 → 5 やる気 4.5〜5.3秒 → 6 選ぶ。
   カードの class: is-wait（絵を読む待ち）・is-f1〜is-f5（コマ）・is-done（6 選ぶ＝最後の形）・is-quiet（消音・効果音オフ・動きを減らす＝最後の形だけ）・
   is-now（押して飛ばした）。
   キャラは今の絵だけ（入れ替えと、傾き・小さく跳ぶ動き）。ゲーム機・クッション・ソファは CSS と小さな SVG（実在の製品に似せない・ロゴなし）。
   色は今のトークンだけ（var() の後ろの値は今のトークンの値を写した物。color-mix はトークンどうしを混ぜるだけで、新しい色は作っていない）。
   紙吹雪・飛び散る粒は使わない。動きを減らす設定では動かさない。
   2026-10-29 直し（検査役の中1〜3・小1〜8）: 待ちの形を最後の形に残さない／ゲーム機は 1 で両手の所、2・3 でひざの上／吹き出しを読める長さに・
   最後の形にも「すごいじゃん！！俺も頑張らないと」を残す／跳ぶ時に絵の上が切れない／札を小さく・狭い時は下の段に／放る弧を顔の下に／
   ボタン2つを横に並べる／狭い時の題 16px／最後の形は舞台を少し小さく。
   =========================================================================== */
.dpg-ti-c2 {
  --c2-room: var(--surface-2, #fff3e6);
  --c2-sofa: var(--accent-soft, #f3edff);
  --c2-sofa-2: var(--accent-soft, #f3edff);
  --c2-sofa-line: var(--separator, #e5cdb8);
  --c2-game: var(--accent-soft, #f3edff);
  --c2-game-line: var(--accent, #6535b5);
  --c2-cushion: var(--dpg-gold-soft, #fff0bf);
  --c2-cushion-line: var(--dpg-gold, #f6c744);
  --c2-cushion-shade: var(--dpg-gold-soft, #fff0bf);
  --c2-on-fill: var(--qz-on-accent, #ffffff);
  transition: background-color .3s ease;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .dpg-ti-c2 {
    --c2-sofa: color-mix(in srgb, var(--accent, #6535b5) 14%, var(--surface, #ffffff));
    --c2-sofa-2: color-mix(in srgb, var(--accent, #6535b5) 22%, var(--surface, #ffffff));
    --c2-sofa-line: color-mix(in srgb, var(--accent, #6535b5) 32%, var(--surface, #ffffff));
    --c2-game: color-mix(in srgb, var(--accent, #6535b5) 16%, var(--surface, #ffffff));
    --c2-cushion-shade: color-mix(in srgb, var(--dpg-gold, #f6c744) 45%, var(--dpg-gold-soft, #fff0bf));
  }
}
.dpg-ti-c2.is-f5, .dpg-ti-c2.is-done { background: var(--ti-gold); }

/* --- 舞台（部屋・ソファ・クッション・キャラ・ゲーム機・札）。中の場面は 340:200 の比のまま、幅 400px まで（狭い時は縮む）。
       最後の形では小さく（幅 230px・カードの 56% まで）し、間も少し詰めて、吹き出しを残してもカードを低く保つ
       （390px で規約のお知らせの帯が出ていても、［自分で書く］が下のナビにかからない。直し 小6） --- */
.dpg-ti-c2__stage { position: relative; display: block; align-self: stretch; overflow: hidden; border-radius: 12px; background-color: var(--c2-room); transition: background-color .3s ease; }
.dpg-ti-c2.is-f5 .dpg-ti-c2__stage, .dpg-ti-c2.is-done .dpg-ti-c2__stage { background-color: transparent; }
.dpg-ti-c2__scene { position: relative; display: block; width: min(400px, 100%); aspect-ratio: 340 / 200; margin: 0 auto; transition: width .3s ease; }
.dpg-ti-c2.is-done .dpg-ti-c2__scene { width: min(230px, 56%); }
.dpg-ti-c2.is-done .dpg-ti-ask__in { gap: 7px; }
.dpg-ti-c2.is-done .dpg-ti-c2__say { margin-top: 6px; }
.dpg-ti-c2.is-done .dpg-ti-c2__acts { margin-top: 0; }
.dpg-ti-c2__sofa, .dpg-ti-c2__arc { position: absolute; inset: 0; display: block; pointer-events: none; }
.dpg-ti-c2__sofa svg, .dpg-ti-c2__arc svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dpg-ti-c2__sofa-back, .dpg-ti-c2__sofa-seat { fill: var(--c2-sofa); stroke: var(--c2-sofa-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dpg-ti-c2__sofa-arm { fill: var(--c2-sofa-2); stroke: var(--c2-sofa-line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.dpg-ti-c2__cushion { position: absolute; left: 4%; top: 57%; width: 26%; height: 27%; box-sizing: border-box; border: 2px solid var(--c2-cushion-line); border-radius: 44% 48% 42% 50% / 52% 48% 54% 46%;
  background: var(--c2-cushion); box-shadow: inset 0 -5px 0 var(--c2-cushion-shade); transform: rotate(-8deg); }
/* クッションのまん中のくぼみ（ボタン留め） */
.dpg-ti-c2__cushion::after { content: ""; position: absolute; left: 50%; top: 46%; width: 9%; aspect-ratio: 1; margin: -4.5% 0 0 -4.5%; border-radius: 50%; border: 1.5px solid var(--c2-cushion-line); background: var(--c2-cushion); }

/* キャラ（5枚を重ね、コマの絵だけを出す）。座っている間（1〜3）は少し下＝ソファに沈む。立つ（4〜）と上がる。
   演出の間、出ていない絵は 0 ではなく 0.01（目では見えない）にしておく。0 だとブラウザが描くのを省き、入れ替えの瞬間に1コマ空になるため。
   どのコマでも、絵の上の端が舞台の上を越えない（越えると切れる）。 */
.dpg-ti-c2__chara { position: absolute; left: 22.6%; bottom: 0; width: 58.8%; height: 100%; object-fit: contain; opacity: .01; transform-origin: 50% 100%; }
.dpg-ti-c2.is-wait .dpg-ti-c2__chara--joy, .dpg-ti-c2.is-f1 .dpg-ti-c2__chara--joy, .dpg-ti-c2.is-f2 .dpg-ti-c2__chara--think, .dpg-ti-c2.is-f3 .dpg-ti-c2__chara--thumb,
.dpg-ti-c2.is-f4 .dpg-ti-c2__chara--wave, .dpg-ti-c2.is-f5 .dpg-ti-c2__chara--fist { opacity: 1; }
.dpg-ti-c2.is-wait .dpg-ti-c2__chara--joy { transform: translateY(4%); }
.dpg-ti-c2.is-f1 .dpg-ti-c2__chara--joy { transform: translateY(4%); animation: dpg-c2-play .7s ease-in-out both; }
.dpg-ti-c2.is-f2 .dpg-ti-c2__chara--think { transform: translateY(4%) rotate(3deg); animation: dpg-c2-notice .3s ease-out both; }
.dpg-ti-c2.is-f3 .dpg-ti-c2__chara--thumb { transform: translateY(4%); animation: dpg-c2-hop .36s cubic-bezier(.2, .8, .2, 1) both; }
.dpg-ti-c2.is-f4 .dpg-ti-c2__chara--wave { transform: translateY(2%); animation: dpg-c2-stand .4s cubic-bezier(.2, .8, .2, 1.1) both; }
.dpg-ti-c2.is-f5 .dpg-ti-c2__chara--fist { transform: none; animation: dpg-c2-jump .45s cubic-bezier(.2, .8, .2, 1) both; }
/* 最後の形はこぶしの絵だけ（待ちの間に押されても、待ちの絵を残さない＝直し 中1。JS でも is-wait を外す） */
.dpg-ti-c2.is-done .dpg-ti-c2__chara { opacity: 0; }
.dpg-ti-c2.is-done .dpg-ti-c2__chara--fist { opacity: 1; transform: none; }

/* ゲーム機（丸い小石の形・薄紫の1色・真ん中に画面・左に十字キー・右に丸いボタン2つを横に並べる。ロゴ・字・左右の色分けは無し）
   1 夢中: 大笑いの絵の両手（お腹の前）に重ねる＝両手で持つ（腕の先がゲーム機の左右の端に来る）。
   2 気づく・3 驚く: ひざの上に置く（少し寝かせて、下に影）。4 放り出す: ひざから弧を描いて左のクッションへ。5・6: クッションの上で無事。 */
.dpg-ti-c2__game { position: absolute; left: 52.5%; top: 86.5%; width: 26%; aspect-ratio: 1.9; box-sizing: border-box; border: 2px solid var(--c2-game-line); border-radius: 46% / 50%;
  background: var(--c2-game); box-shadow: inset 0 -3px 0 var(--c2-sofa-2); transform: translate(-50%, -50%) rotate(-3deg) scale(1, 1); }
.dpg-ti-c2__screen { position: absolute; left: 31%; right: 31%; top: 20%; bottom: 22%; border-radius: 22%; box-sizing: border-box; border: 1.5px solid var(--c2-game-line);
  background: linear-gradient(120deg, var(--dpg-fx-violet, #cfa0ff), var(--dpg-fx-blue, #6ec6ff) 35%, var(--dpg-fx-green, #71e2b1) 65%, var(--dpg-gold-soft, #fff0bf)); background-size: 220% 100%; background-position: 0 0; }
.dpg-ti-c2__pad { position: absolute; left: 9%; top: 33%; width: 15%; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(var(--ti-primary), var(--ti-primary)) center / 100% 34% no-repeat, linear-gradient(var(--ti-primary), var(--ti-primary)) center / 34% 100% no-repeat; }
.dpg-ti-c2__btn { position: absolute; top: 39%; width: 9.5%; aspect-ratio: 1; border-radius: 50%; background: var(--ti-primary); }
.dpg-ti-c2__btn--a { right: 8%; }
.dpg-ti-c2__btn--b { right: 19.5%; }
.dpg-ti-c2.is-f1 .dpg-ti-c2__game { animation: dpg-c2-tap .7s ease-in-out both; }
.dpg-ti-c2.is-f1 .dpg-ti-c2__screen { animation: dpg-c2-glow .7s linear both; }
.dpg-ti-c2.is-f2 .dpg-ti-c2__game, .dpg-ti-c2.is-f3 .dpg-ti-c2__game { left: 52%; top: 91%; transform: translate(-50%, -50%) rotate(-5deg) scale(.92, .62);
  box-shadow: inset 0 -3px 0 var(--c2-sofa-2), 0 5px 0 -1px var(--c2-sofa-line); }
.dpg-ti-c2.is-f4 .dpg-ti-c2__game, .dpg-ti-c2.is-f5 .dpg-ti-c2__game, .dpg-ti-c2.is-done .dpg-ti-c2__game { left: 17%; top: 63%; transform: translate(-50%, -50%) rotate(-14deg) scale(1, 1); }
.dpg-ti-c2.is-f4 .dpg-ti-c2__game { animation: dpg-c2-toss .5s linear both; }
/* 動きの跡（弧の線を1本だけ。4 の間だけ薄く出て消える。弧は顔の下・左を通る） */
.dpg-ti-c2__arc path { fill: none; stroke: var(--ti-accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 7 8; vector-effect: non-scaling-stroke; }
.dpg-ti-c2__arc { opacity: 0; transition: opacity .2s ease; }
.dpg-ti-c2.is-f4 .dpg-ti-c2__arc { animation: dpg-c2-arc .6s ease-out both; }

/* 2 気づく: 右上から「合格しました！」の札が入る（3 の間も出ている）。小さめにして角に寄せる */
.dpg-ti-c2__tag { position: absolute; top: 3%; right: 2%; max-width: 62%; box-sizing: border-box; padding: 3px 10px; border: 1px solid var(--ti-fill-border); border-radius: 999px;
  background: var(--ti-fill); box-shadow: var(--ti-fill-shadow); color: var(--c2-on-fill); font-size: clamp(11px, 3.4vw, 13px); line-height: 1.3; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: clip;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }
.dpg-ti-c2.is-f2 .dpg-ti-c2__tag, .dpg-ti-c2.is-f3 .dpg-ti-c2__tag { opacity: 1; visibility: visible; transition: none; }
.dpg-ti-c2.is-f2 .dpg-ti-c2__tag { animation: dpg-c2-slide .28s ease-out both; }
.dpg-ti-c2__tag--slot { display: none; }

/* 後で Fal の1場面を重ねる箱（今は空。is-video の間だけ見せ、場面は隠す） */
.dpg-ti-c2__video { position: absolute; inset: 0; display: block; opacity: 0; pointer-events: none; }
.dpg-ti-c2__video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.dpg-ti-c2.is-video .dpg-ti-c2__video { opacity: 1; }
.dpg-ti-c2.is-video .dpg-ti-c2__scene { visibility: hidden; }

/* --- 舞台の下の段（吹き出しを同じ所に重ねる）。最後の形では 2つ目の吹き出しだけ残す --- */
.dpg-ti-c2__slot { display: grid; align-self: stretch; justify-items: center; align-items: center; }
.dpg-ti-c2__slot > * { grid-area: 1 / 1; }
.dpg-ti-c2__say { position: relative; box-sizing: border-box; max-width: 100%; margin: 8px 0 0; padding: 8px 14px; border: 2px solid var(--ti-accent); border-radius: 16px;
  background: var(--ti-surface); color: var(--ti-ink); font-size: 17px; line-height: 1.45; font-weight: 900; font-feature-settings: "palt"; overflow-wrap: anywhere; opacity: 0; visibility: hidden; }
.dpg-ti-c2__say span, .dpg-ti-c2__title span { display: inline-block; }
/* 吹き出しの口（上のキャラを指す） */
.dpg-ti-c2__say::before, .dpg-ti-c2__say::after { content: ""; position: absolute; left: 50%; width: 0; height: 0; border-style: solid; border-color: transparent; border-top-width: 0; }
.dpg-ti-c2__say::before { top: -11px; margin-left: -10px; border-width: 0 10px 11px; border-bottom-color: var(--ti-accent); }
.dpg-ti-c2__say::after { top: -7px; margin-left: -7px; border-width: 0 7px 8px; border-bottom-color: var(--ti-surface); }
.dpg-ti-c2.is-f3 .dpg-ti-c2__say--1, .dpg-ti-c2.is-f4 .dpg-ti-c2__say--1, .dpg-ti-c2.is-f5 .dpg-ti-c2__say--2, .dpg-ti-c2.is-done .dpg-ti-c2__say--2 { opacity: 1; visibility: visible; }
.dpg-ti-c2.is-f3 .dpg-ti-c2__say--1, .dpg-ti-c2.is-f5 .dpg-ti-c2__say--2 { animation: dpg-c2-pop .3s cubic-bezier(.2, .8, .2, 1) both; }
.dpg-ti-c2.is-done .dpg-ti-c2__say--1, .dpg-ti-c2.is-done .dpg-ti-c2__tag--slot { display: none; }
.dpg-ti-c2__title { margin: 0; font-size: clamp(18px, 5.6vw, 22px); line-height: 1.4; font-weight: 900; font-feature-settings: "palt"; color: var(--ti-primary); overflow-wrap: anywhere; }
.dpg-ti-c2:not(.is-done) .dpg-ti-c2__title { display: none; }
.dpg-ti-c2.is-done .dpg-ti-c2__title { animation: dpg-c2-pop .3s cubic-bezier(.2, .8, .2, 1) both; }
.dpg-ti-ask .dpg-ti-c2__title:focus { outline: none; box-shadow: none; }
.dpg-ti-c2__lead { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 700; color: var(--ti-ink); text-wrap: pretty; }
.dpg-ti-c2:not(.is-done) .dpg-ti-c2__lead, .dpg-ti-c2:not(.is-done) .dpg-ti-c2__acts { display: none; }

@keyframes dpg-c2-play { 0%, 100% { transform: translateY(4%) rotate(0); } 25% { transform: translateY(4%) rotate(-2deg); } 50% { transform: translateY(3%) rotate(1.5deg); } 75% { transform: translateY(4%) rotate(-1.5deg); } }
@keyframes dpg-c2-tap { 0%, 100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1, 1); } 25% { transform: translate(-50%, -46%) rotate(-6deg) scale(1, 1); } 50% { transform: translate(-50%, -52%) rotate(-1deg) scale(1, 1); } 75% { transform: translate(-50%, -47%) rotate(-5deg) scale(1, 1); } }
@keyframes dpg-c2-glow { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes dpg-c2-notice { from { transform: translateY(4%) rotate(0); } to { transform: translateY(4%) rotate(3deg); } }
@keyframes dpg-c2-hop { 0% { transform: translateY(4%) scale(1); } 45% { transform: translateY(0) scale(1); } 100% { transform: translateY(4%) scale(1); } }
@keyframes dpg-c2-stand { 0% { transform: translateY(5%); } 60% { transform: translateY(0); } 100% { transform: translateY(2%); } }
@keyframes dpg-c2-jump { 0% { transform: translateY(9%) scale(.97); } 55% { transform: translateY(0) scale(1); } 75% { transform: translateY(2%) scale(1); } 100% { transform: none; } }
/* 放る弧（2次の曲線を 8つに分けた点。ひざ (52%, 91%) → 左へ低く弧 → クッション (17%, 63%)。顔の前は通らない） */
@keyframes dpg-c2-toss {
  0% { left: 52%; top: 91%; transform: translate(-50%, -50%) rotate(-5deg) scale(.92, .62); }
  12.5% { left: 40.1%; top: 72.8%; transform: translate(-50%, -50%) rotate(-50deg) scale(.96, .85); }
  25% { left: 30.3%; top: 58.9%; transform: translate(-50%, -50%) rotate(-95deg) scale(1, 1); }
  37.5% { left: 22.7%; top: 49.1%; transform: translate(-50%, -50%) rotate(-140deg) scale(1, 1); }
  50% { left: 17.3%; top: 43.5%; transform: translate(-50%, -50%) rotate(-185deg) scale(1, 1); }
  62.5% { left: 14%; top: 42.1%; transform: translate(-50%, -50%) rotate(-230deg) scale(1, 1); }
  75% { left: 12.8%; top: 44.9%; transform: translate(-50%, -50%) rotate(-275deg) scale(1, 1); }
  87.5% { left: 13.8%; top: 51.8%; transform: translate(-50%, -50%) rotate(-320deg) scale(1, 1); }
  100% { left: 17%; top: 63%; transform: translate(-50%, -50%) rotate(-374deg) scale(1, 1); }
}
@keyframes dpg-c2-arc { 0% { opacity: 0; } 30%, 75% { opacity: .55; } 100% { opacity: .3; } }
@keyframes dpg-c2-slide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes dpg-c2-pop { 0% { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }

/* 最後の形だけの時（消音・効果音オフ・押して飛ばした）は動かさない */
.dpg-ti-c2.is-quiet, .dpg-ti-c2.is-quiet *, .dpg-ti-c2.is-now, .dpg-ti-c2.is-now * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .dpg-ti-c2, .dpg-ti-c2 * { animation: none !important; transition: none !important; }
}
/* 200% 拡大（幅 300px 未満）: 吹き出しの字を少し小さく・余白を詰める（場面は幅に合わせて縮む）。札は舞台の下の段に出す（直し 小2）。
   題は 16px（句で折るので2行に収まる。直し 小5） */
@media (max-width: 299.98px) {
  .dpg-ti-c2__say { padding: 6px 10px; font-size: 16px; }
  .dpg-ti-c2__title { font-size: 16px; letter-spacing: -.08em; } /* 「ございます！！！」を1行に（字の間を少し詰める） */
  .dpg-ti-c2.is-done .dpg-ti-c2__scene { width: 100%; } /* 狭い時は最後の形でも舞台を縮めない（縮めると絵が小さくなりすぎる） */
  .dpg-ti-c2__scene .dpg-ti-c2__tag { display: none; }
  .dpg-ti-c2__tag--slot { position: relative; top: auto; right: auto; display: block; max-width: 100%; margin-top: 4px; font-size: 14px; }
  .dpg-ti-c2.is-f3 .dpg-ti-c2__tag--slot { opacity: 0; visibility: hidden; }
}

/* ===========================================================================
   ② 動画版（2026-10-30 区間T21 担当K1。dpg-t-intro.js の runCheer3）
   Fal の動画1本（声入り・8.1秒・540×540・無地のクリームの地）を流し、終わったら ③ 選ぶ（最後の形）へ。
   カードの class: is-play（流している）・is-done（最後の形）・is-quiet（消音・効果音オフ・動きを減らす・通信を節約＝最初から最後の形）・is-now（押して飛ばした・間に合わない）。
   つなぎ目: 流している間はカードの地を動画の地に寄せた色（--surface-2 に --text-2 を 2.5% 混ぜた色。動画の地を測ると #fbf2e3 前後）にし、
   さらに動画の四辺を 6% ずつぼかして（mask）カードの地へ溶かす（色の差 2〜5 は、ぼかしの中で見えなくなる）。
   =========================================================================== */
.dpg-ti-c3 { transition: background-color .3s ease; }
.dpg-ti-c3 { --c3-bg: var(--surface-2, #fff3e6); }
/* 動画の地（測ると #fbf2e3 前後）に、今の色どうしを混ぜて寄せる（--surface-2 に --text-2 を 2.5%。差は 0〜2）。color-mix が無い端末は --surface-2 のまま */
@supports (color: color-mix(in srgb, red 50%, blue)) { .dpg-ti-c3 { --c3-bg: color-mix(in srgb, var(--surface-2, #fff3e6) 97.5%, var(--text-2, #65594d)); } }
.dpg-ti-c3.is-play { background: var(--c3-bg); }
.dpg-ti-c3.is-done { background: var(--ti-gold); transition-duration: .8s; } /* 動画の地（クリーム）から 0.8秒でゆっくり金へ（直し 小2） */
.dpg-ti-c3__stage { position: relative; display: block; width: min(360px, 100%); aspect-ratio: 1; margin: -8px auto -4px; }
.dpg-ti-c3__video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--c3-bg);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect; }
.dpg-ti-c3.is-done .dpg-ti-c3__stage { display: none; }
/* 「声」がオフの人: 音を消して流し、セリフを動画の下の方に字で重ねる（字 17px 太字・白い吹き出し） */
.dpg-ti-c3__say { position: absolute; left: 50%; bottom: 7%; width: max-content; max-width: 92%; box-sizing: border-box; margin: 0; padding: 6px 14px; border: 2px solid var(--ti-accent); border-radius: 16px;
  background: var(--ti-surface); color: var(--ti-ink); font-size: 17px; line-height: 1.45; font-weight: 900; font-feature-settings: "palt"; text-align: center; overflow-wrap: anywhere;
  transform: translateX(-50%); opacity: 0; visibility: hidden; }
.dpg-ti-c3__say.is-on { opacity: 1; visibility: visible; }
.dpg-ti-c3__chara { display: block; width: 120px; height: 120px; object-fit: contain; }
.dpg-ti-c3__title { margin: 0; font-size: clamp(18px, 5.6vw, 22px); line-height: 1.4; font-weight: 900; font-feature-settings: "palt"; color: var(--ti-primary); overflow-wrap: anywhere; }
.dpg-ti-ask .dpg-ti-c3__title:focus { outline: none; box-shadow: none; }
.dpg-ti-c3__title span { display: inline-block; }
.dpg-ti-c3__lead { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 700; color: var(--ti-ink); text-wrap: pretty; }
.dpg-ti-c3:not(.is-done) .dpg-ti-c3__chara, .dpg-ti-c3:not(.is-done) .dpg-ti-c3__title, .dpg-ti-c3:not(.is-done) .dpg-ti-c3__lead, .dpg-ti-c3:not(.is-done) .dpg-ti-c3__acts { display: none; }
.dpg-ti-c3.is-done .dpg-ti-c3__chara, .dpg-ti-c3.is-done .dpg-ti-c3__title { animation: dpg-c2-pop .3s cubic-bezier(.2, .8, .2, 1) both; }
.dpg-ti-c3.is-quiet, .dpg-ti-c3.is-quiet *, .dpg-ti-c3.is-now, .dpg-ti-c3.is-now * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .dpg-ti-c3, .dpg-ti-c3 * { animation: none !important; transition: none !important; }
}
@media (max-width: 299.98px) {
  .dpg-ti-c3__title { font-size: 16px; letter-spacing: -.08em; }
  .dpg-ti-c3__say { padding: 4px 8px; font-size: 14px; }
  .dpg-ti-c3__stage { margin: -4px auto 0; }
}