/* whats — What's your surprise? */
.sc-whats { background: #13173a; }
.sc-whats .wh-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 58% at 50% 45%, rgba(58, 66, 150, .55), rgba(19, 23, 58, 0) 70%), radial-gradient(ellipse 120% 100% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(4, 5, 20, .6)); }
.sc-whats .wh-cam, .sc-whats .wh-rig { position: absolute; inset: 0; }
.sc-whats .wh-cam { will-change: transform; transform-origin: 50% 50%; }
/* 印刷の細い横線（全体に） */
.sc-whats .wh-lines { position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, rgba(0, 0, 0, 0) 1px 4px); mix-blend-mode: multiply; }

.sc-whats .wh-top { --x: -3.05; --y: -10.2; --w: 74.4; z-index: 2; cursor: pointer; filter: drop-shadow(0 calc(1.2 * var(--u)) calc(1.6 * var(--u)) rgba(0, 0, 0, .5)); }
.sc-whats .wh-top img { display: block; width: 100%; transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); transform-origin: 50% 90%; }
.sc-whats .wh-top:hover img { transform: scale(1.015) rotate(-.6deg); }
.sc-whats .wh-top:active img { transform: scale(.97, 1.03); }
.sc-whats .wh-rib { --x: 0; --y: 0; --w: 53.5; translate: -50% -58.4%; transform-origin: 50% 58.4%; z-index: 3; opacity: 0; pointer-events: none; }
.sc-whats .wh-jaw { --x: 0; --y: 0; --w: 53.8; translate: -50% 0; transform-origin: 50% 0; z-index: 1; pointer-events: none; filter: drop-shadow(0 calc(1.2 * var(--u)) calc(1.6 * var(--u)) rgba(0, 0, 0, .55)); }

.sc-whats .wh-title { --w: 100; z-index: 8; pointer-events: none; }
.sc-whats .wh-title svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 calc(.3 * var(--u)) calc(.5 * var(--u)) rgba(0, 0, 0, .35)); }

.sc-whats .wh-cap {
  width: max-content; margin: 0; z-index: 6; color: #ea1a22; text-align: left; translate: 0 0;
  font: 700 calc(max(11px, 2.25 * var(--u)))/1.05 var(--f-sans); letter-spacing: 0; cursor: default; pointer-events: auto;
}
.sc-whats .wh-cap span { display: block; transition: transform .2s; }
.sc-whats .wh-cap[data-al="r"] { text-align: right; translate: -100% 0; }
.sc-whats .wh-cap[data-al="c"] { text-align: center; translate: -50% -100%; }
.sc-whats .wh-cap.wh-big { font-size: calc(max(17px, 4.3 * var(--u))); line-height: .96; letter-spacing: -.02em; }
.sc-whats .wh-cap:hover span:nth-child(odd) { transform: translateX(.5em) skewX(-8deg); }
.sc-whats .wh-cap:hover span:nth-child(even) { transform: translateX(-.5em) skewX(8deg); }
.sc-whats.wide .wh-cap { font-size: calc(2.9 * var(--u)); }
.sc-whats.wide .wh-cap.wh-big { font-size: calc(6 * var(--u)); }

.sc-whats .wh-count {
  --w: 22; z-index: 9; display: block; padding: calc(.9 * var(--u)) 0 calc(.8 * var(--u)); border-radius: 50%; aspect-ratio: 1;
  background: #ea1a22; color: #13173a; text-align: center; cursor: pointer;
  box-shadow: 0 calc(.5 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, .45);
}
.sc-whats .wh-count i { display: block; margin-top: calc(2.6 * var(--u)); font: 700 calc(1.7 * var(--u))/1 var(--f-sans); font-style: normal; letter-spacing: .14em; }
.sc-whats .wh-count b { display: block; font: 700 calc(9.4 * var(--u))/1 var(--f-sans); letter-spacing: -.04em; }
.sc-whats .wh-count span { display: block; font: 700 calc(1.35 * var(--u))/1 var(--f-sans); letter-spacing: .1em; }
.sc-whats .wh-count:active { filter: brightness(1.15); }
.sc-whats:not(.wide) .wh-count { --w: 26; }
.sc-whats:not(.wide) .wh-count i { font-size: calc(2 * var(--u)); margin-top: calc(3.2 * var(--u)); }
.sc-whats:not(.wide) .wh-count b { font-size: calc(11 * var(--u)); }
.sc-whats:not(.wide) .wh-count span { font-size: calc(1.6 * var(--u)); }

/* 上の世界にはみ出した帯 */
.scene-whats .over .wh-esc { position: absolute; width: calc(34 * var(--u)); max-width: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.scene-whats .over .wh-esc1 { left: 6%; top: calc(-13 * var(--u)); rotate: -11deg; }
.scene-whats .over .wh-esc2 { left: calc(50% - 10 * var(--u)); top: calc(-8 * var(--u)); rotate: 5deg; width: calc(28 * var(--u)); }
.scene-whats .over .wh-esc3 { right: 5%; top: calc(-15 * var(--u)); rotate: 14deg; }
.scene-whats .over .wh-escp { position: absolute; right: 9%; top: calc(-27 * var(--u)); margin: 0; color: #ea1a22; text-align: right; rotate: -4deg; font: 700 calc(max(12px, 2.6 * var(--u)))/1.05 var(--f-sans); }