/* しろもん Interactive IP Site
   ここに書いた見た目が「動きなし（JS無し・動きOFF）」の完成形。
   動きのための初期状態は、すべて html.js.m の下にだけ書く。 */

@font-face {
  font-family: "Shiromon JP";
  src: url("../fonts/shiromon-ja.woff2") format("woff2");
  font-weight: 500 900;
  font-display: swap;
}
@font-face {
  font-family: "Shiromon Hand";
  src: url("../fonts/shiromon-hand.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Shiromon EN";
  src: url("../fonts/shiromon-en.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
}

:root {
  --paper: #FAF8F4;
  --ink: #111111;
  --yellow: #FBBF0F;
  --font-ja: "Shiromon JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --font-en: "Shiromon EN", "Shiromon JP", "Helvetica Neue", Arial, sans-serif;

  /* 動きの共通値（仕様のmotion tokens） */
  --shiromon-delay: 140ms;
  --shiromon-drag-max: 40px; /* 2026-10-07 リミッター解除（元は14px） */
  --motion-micro: 160ms;
  --motion-fast: 240ms;
  --motion-base: 360ms;
  --motion-bofu: 820ms;
  --motion-scene: 900ms;
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-heavy: cubic-bezier(.16, 1, .3, 1);
  --ease-slide: cubic-bezier(.65, 0, .35, 1);

  --gutter: 16px;
  --band-h: clamp(46px, 5vw, 84px);
  --band-fs: clamp(17px, 2.1vw, 34px);
  --vh: 1vh;
}
@supports (height: 1svh) { :root { --vh: 1svh; } }
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: clamp(32px, 3.4vw, 64px); } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ja);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { display: block; }
img { max-width: 100%; }
p, h1, h2, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.skip {
  position: fixed;
  left: 12px; top: 12px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font: 700 14px/1 var(--font-ja);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; outline-color: var(--yellow); }

/* ---------- 文字の型 ---------- */
.ja-giant {
  font-family: var(--font-ja);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.15;
  font-feature-settings: "palt" 1;
}
.en-giant {
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .8;
  white-space: nowrap;
}
.num-giant {
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .74;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 手書き風（Yusei Magic） */
.hand { font-family: "Shiromon Hand", var(--font-ja); font-weight: 400; letter-spacing: .02em; line-height: 1.3; }

.brand {
  position: absolute;
  top: calc(var(--gutter) + env(safe-area-inset-top, 0px));
  left: var(--gutter);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .75em;
  font: 800 12px/1 var(--font-en);
  letter-spacing: .28em;
}
.brand__dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--yellow);
}

/* ---------- 場面の器 ---------- */
.scene { position: relative; }
.stage {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  min-height: calc(var(--vh) * 100);
}

/* ---------- 帯 ---------- */
.band {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--band-h);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--band-fs);
  letter-spacing: .02em;
  line-height: 1;
}
.band--yellow { background: var(--yellow); color: var(--ink); }
.band--black { background: var(--ink); color: var(--paper); }
.band--outline { background: var(--paper); color: var(--ink); border-block: 1px solid var(--ink); }
.band__track { display: flex; flex: none; }
.band__item { flex: none; padding-inline: .9em; }
.band__item + .band__item::before {
  content: "";
  display: inline-block;
  width: .3em; height: .3em;
  margin-right: 1.8em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: .14em;
}

/* ---------- キャラ（入れ子4層: 配置 / ずるっ / むにっ / ぼふっ） ---------- */
.actor {
  position: absolute;
  aspect-ratio: 1;
  z-index: 3;
}
.actor__zuru, .actor__hit, .actor__muni, .actor__bofu { position: absolute; inset: 0; }
.actor__hit, .actor__muni, .actor__bofu { transform-origin: 50% 93%; }
.actor__img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.actor__img.is-on { opacity: 1; }
.actor__shadow {
  position: absolute;
  left: 50%; top: 93%;
  width: 54%; height: 7%;
  translate: -50% -48%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(17, 17, 17, .2), rgba(17, 17, 17, .08) 55%, rgba(17, 17, 17, 0));
  display: none;
}

/* ---------- 01 OPENING ---------- */
/* 背景は、OP動画（くろーんさん作）の紙の色に合わせる（ふちの色 → 真ん中ほど明るい紙のムラも近づける） */
.s-open { background: #f3eee3; }
.s-open__stage {
  min-height: calc(var(--vh) * 100);
  background: radial-gradient(ellipse 85% 48% at 50% 58%, #f7f3ec, #f2ece0 80%);
}
@media (min-width: 1024px) {
  .s-open__stage { background: radial-gradient(ellipse 40% 65% at calc(100% - 4vw - 28vh) 45%, #f6f2ea, #f2ece0 75%); }
}
/* 黄色い○は、動画より手前に */
.s-open .orbs { z-index: 2; }
/* OP動画: 縦長のまま切らずに置き、四辺をぼかして背景の紙に溶かす */
.s-open__film {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  height: min(100%, 177.78vw);
  aspect-ratio: 720 / 1280;
  translate: -50% 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent);
  mask-composite: intersect;
}
.s-open__video { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 動画の作者（ごく小さく） */
.s-open__credit {
  position: absolute;
  z-index: 6;
  right: var(--gutter);
  bottom: calc(var(--gutter) - 10px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  font: 600 10px/1 var(--font-en);
  letter-spacing: .04em;
  color: rgba(17, 17, 17, .66);
}
.s-open__credit a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; color: inherit; text-decoration: none; } /* 文字は小さく、押せる範囲は44px */
.s-open__credit a:hover { text-decoration: underline; }
.s-open__word {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  top: calc(var(--vh) * 8);
  mix-blend-mode: multiply;
  font-size: min(24vw, calc(var(--vh) * 13.5));
}
.s-open__word > span { display: block; }
/* 「AI MONSTER (?)」のロゴ1枚（動きありでは、最後に真ん中へ どん！！と落ちてくる） */
.s-open__don {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  top: calc(var(--vh) * 34);
  width: 56vw;
  pointer-events: none;
}
.s-open__donImg { display: block; width: 100%; height: auto; rotate: -3deg; }
.s-open__skip {
  position: absolute;
  z-index: 6;
  left: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  font: 700 13px/1 var(--font-ja);
  letter-spacing: .08em;
  cursor: pointer;
}
/* 名札（SHIROMONの下に貼られる） */
.s-open__tag {
  position: absolute;
  z-index: 5;
  left: calc(var(--gutter) - 4px);
  top: calc(var(--gutter) + env(safe-area-inset-top, 0px) + 26px);
  width: clamp(140px, 38vw, 230px);
  height: auto;
  rotate: -4deg;
}
.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 10px/1 var(--font-en);
  letter-spacing: .3em;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 36px;
  background: var(--ink);
}

/* ---------- 02 NORMAL ---------- */
.s-normal__stage {
  display: grid;
  align-content: center;
  gap: 0;
  min-height: calc(var(--vh) * 72);
  padding-block: calc(var(--vh) * 12) calc(var(--vh) * 8);
}
.s-normal__title {
  position: relative;
  z-index: 1;
  font-size: clamp(64px, 17vw, 220px);
  justify-self: center;
  text-align: center;
}
.s-normal__titleInner { display: inline-block; rotate: -3deg; }

/* 手描きの看板は、しろもんの後ろか近くに */
.char-sign { position: absolute; z-index: -1; height: auto; pointer-events: none; }
.char-sign--rush { left: -30%; top: 10%; width: 50%; rotate: -7deg; }
.char-sign--mofu { left: 56%; top: 4%; width: 68%; rotate: 7deg; }
.char-sign--good { left: -32%; top: 0; width: 60%; rotate: -8deg; }
@media (max-width: 1023px) {
  .char-sign--rush { left: -6%; top: -6%; width: 46%; }
  .char-sign--mofu { left: 46%; top: -6%; width: 58%; }
  .char-sign--good { left: -6%; top: -10%; width: 50%; }
}

/* ---------- 03 TASK RUSH ---------- */
.s-rush__stage { min-height: calc(var(--vh) * 100); }
.s-rush__bands { position: absolute; inset: 0; z-index: 2; }
.band--task {
  position: absolute;
  left: -6%;
  width: 112%;
  top: var(--row);
  rotate: var(--rot);
}
.band--task[data-task="1"] { --row: 24%; --rot: -3deg; }
.band--task[data-task="2"] { --row: 37%; --rot: 2deg; }
.band--task[data-task="3"] { --row: 50%; --rot: -1.5deg; }
.band--task[data-task="4"] { --row: 63%; --rot: 3deg; }
.band--task[data-task="5"] { --row: 76%; --rot: -2deg; }
.band--outline.band--task { border: 1px solid var(--ink); }
/* 帯の先に、タスクのメモを付ける（帯ごと食べられる） */
.band--task { overflow: visible; }
.band__clip { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; }
.band__cards {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  translate: 0 -50%;
  pointer-events: none;
}
.band--task[data-from="left"] .band__cards { right: 16%; flex-direction: row-reverse; }
.band--task[data-from="right"] .band__cards { left: 16%; }
.band__card { width: clamp(76px, 20vw, 150px); height: auto; rotate: -6deg; }
.band__card--2 { rotate: 5deg; margin-inline: -14px; }
.band--task[data-task="2"] .band__card { rotate: 5deg; }
/* やることリスト（食べるたびに ○ → ✓） */
.todo { position: absolute; z-index: 5; left: var(--gutter); top: calc(var(--vh) * 5); display: none; }
.todo__label { display: block; width: clamp(210px, 30vw, 420px); height: auto; rotate: -2deg; }
.todo__slots { display: flex; gap: 6px; margin: 10px 0 0 8px; }
.todo__slot { position: relative; width: clamp(24px, 2.6vw, 38px); aspect-ratio: 1; }
.todo__ring, .todo__check { position: absolute; inset: 0; width: 100%; height: 100%; }
.todo__check { opacity: 0; transform: scale(.3) rotate(-20deg); }
.todo__slot.is-done .todo__check { opacity: 1; transform: none; }
@media (max-width: 1023px) { .todo__slot:nth-child(n + 4) { display: none; } }
.s-rush__actor {
  width: min(82vw, calc(var(--vh) * 50));
  left: 50%;
  bottom: calc(var(--vh) * 4);
  translate: -50% 0;
}
@media (max-width: 1023px) {
  .band--pc-only { display: none; }
  .band--task[data-task="1"] { --row: 22%; }
  .band--task[data-task="2"] { --row: 36%; }
  .band--task[data-task="4"] { --row: 50%; }
}

/* ---------- 飾り（黄色い○・キラキラ・効果線・部屋の看板） ---------- */
.orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.orb {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
  background: var(--yellow);
}
.orb-img { position: absolute; height: auto; }
.orb--1 { width: 38vmin; right: -14vmin; top: -12vmin; }
.orb--2 { width: 15vmin; left: -6vmin; bottom: 26%; }
.orb-img--1 { width: clamp(30px, 4vw, 58px); left: 64%; top: 11%; }
.orb--3 { width: 26vmin; right: -9vmin; bottom: -9vmin; }
.orb-img--2 { width: clamp(44px, 6vw, 90px); left: 7%; top: 16%; }
.orb--4 { width: 28vmin; left: -12vmin; top: 44%; }
.orb--5 { width: 7vmin; right: 7%; top: 9%; }
.orb--6 { width: 32vmin; right: -12vmin; top: 34%; }
.orb-img--3 { width: clamp(40px, 5vw, 80px); left: 9%; bottom: 30%; }
.orb--7 { width: 26vmin; left: -10vmin; bottom: 12%; }
.orb-img--4 { width: clamp(28px, 3.6vw, 60px); right: 13%; top: 32%; }
.orb--8 { width: 44vmin; right: -15vmin; bottom: -15vmin; }
.orb--9 { width: 42vmin; left: -15vmin; top: -15vmin; }
.orb-img--5 { width: clamp(48px, 7vw, 110px); right: 9%; top: 40%; }
@media (min-width: 1024px) { .orb-img--5 { right: 34%; top: 14%; } }

.fx { position: absolute; z-index: 6; height: auto; opacity: 0; pointer-events: none; }
.fx--paku { width: 24%; left: 60%; top: 28%; }
.fx--spark { width: 10%; }
.fx--s1 { left: 6%; top: 24%; }
.fx--s2 { left: 84%; top: 14%; width: 12%; }
.fx--s3 { left: 88%; top: 56%; width: 7%; }
.fx--impact { width: 10%; top: 18%; }
.fx--i1 { left: 22%; rotate: -10deg; }
.fx--i2 { left: 68%; transform: scaleX(-1); }

.room-sign {
  position: absolute;
  z-index: 6;
  left: var(--gutter);
  top: calc(var(--vh) * 6);
  width: clamp(130px, 34vw, 220px);
  height: auto;
  rotate: -4deg;
}

/* ---------- 04 MOFU ---------- */
.s-mofu__stage { min-height: calc(var(--vh) * 100); }
.s-mofu__title {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(var(--vh) * 9);
  translate: -50% 0;
  font-size: min(36vw, calc(var(--vh) * 44));
  overflow: hidden;
  padding-bottom: .04em;
}
.s-mofu__titleInner { display: block; }
.s-mofu__band {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--vh) * 7);
  z-index: 2;
}
.s-mofu__actor {
  width: min(84vw, calc(var(--vh) * 50));
  left: 50%;
  bottom: calc(var(--vh) * 10);
  translate: -50% 0;
}
.s-mofu__circle {
  position: absolute;
  z-index: 6;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .14), inset 0 0 80px rgba(17, 17, 17, .035);
  transform: scale(0);
  pointer-events: none;
}

/* ---------- 05 70 ---------- */
.s-seventy__stage { min-height: calc(var(--vh) * 100); }
.s-seventy__num {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(var(--vh) * 6);
  translate: -50% 0;
  font-size: min(58vw, calc(var(--vh) * 40));
}
.s-seventy__numInner { display: block; }
.s-seventy__note {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(var(--vh) * 4 + min(64vw, var(--vh) * 40) * .95); /* キャラの頭のすぐ上 */
  translate: -50% 0;
  white-space: nowrap;
  font-size: clamp(24px, 6.4vw, 44px);
  rotate: -3deg;
}
.s-seventy__band {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--vh) * 40);
  z-index: 2;
}
.s-seventy__actor {
  width: min(64vw, calc(var(--vh) * 40));
  left: 50%;
  bottom: calc(var(--vh) * 4);
  translate: -50% 0;
}

/* ---------- 06 GOOD WORK / BOFU ---------- */
.s-good__stage { min-height: calc(var(--vh) * 100); }
.s-good__title {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(var(--vh) * 8);
  translate: -50% 0;
  font-size: min(30vw, calc(var(--vh) * 30));
  overflow: hidden;
  padding-bottom: .04em;
}
.s-good__titleInner { display: block; }
.s-good__band {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--vh) * 36);
  z-index: 2;
}
.s-good__actor {
  width: min(84vw, calc(var(--vh) * 48));
  left: 50%;
  bottom: calc(var(--vh) * 4);
  translate: -50% 0;
}
.marks { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: none; }
.mark {
  position: absolute;
  left: 0; top: 0;
  width: 14%;
  height: auto;
  margin: -7% 0 0 -7%;
}
.mark:nth-child(2n) { width: 12%; margin: -6% 0 0 -6%; }
.s-good__stamp {
  position: absolute;
  z-index: 6;
  left: 58%;
  top: 2%;
  width: 52%;
  height: auto;
  rotate: -9deg;
  pointer-events: none;
}

/* ---------- 作品（01/02/03は無加工・静止。画面幅いっぱいに出して、その世界に入る） ---------- */
.work {
  position: relative;
  background: var(--paper);
  container-type: inline-size;
}
#work-01 { --ratio: calc(1149 / 1369); }
#work-02 { --ratio: calc(1199 / 1312); }
#work-03 { --ratio: calc(1135 / 1386); }
.work__frame { width: 100%; }
.work__img { display: block; width: 100%; height: auto; }

/* ---------- 07 LINE ---------- */
.s-line {
  --wave-h: clamp(22px, 3.2vw, 46px);
  background: linear-gradient(to bottom, transparent var(--wave-h), var(--yellow) var(--wave-h));
  overflow: hidden;
  padding-bottom: calc(var(--vh) * 8);
}
.s-line:focus { outline: none; }
.s-line__wave {
  display: block;
  width: 100%;
  height: calc(var(--wave-h) + 1px);
  margin-bottom: -1px;
  fill: var(--yellow);
}
.s-line__band { position: relative; z-index: 2; }
.s-line__inner {
  position: relative;
  z-index: 3;
  padding: calc(var(--vh) * 9) var(--gutter) 0;
}
.s-line__title { font-size: min(17.5vw, 120px); }
.s-line__title > span { display: block; }
.s-line__product {
  margin-top: 22px;
  font-weight: 800;
  font-size: clamp(17px, 4.6vw, 24px);
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
}
.s-line__cta { margin-top: 28px; display: flex; align-items: center; gap: 10px; }
.s-line__arrow {
  width: clamp(64px, 7vw, 108px);
  height: auto;
  transform: scaleX(-1) rotate(-14deg);
  pointer-events: none;
}
.s-line__board { position: relative; z-index: 2; margin: 22px var(--gutter) 0; }
.s-line__chain {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin: 0 auto 6px;
  rotate: -1.5deg;
}
.s-line__note {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}
.stickers {
  position: relative;
  height: min(118vw, 520px);
}
.sticker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(118px, 34vw, 200px);
  transform: rotate(var(--r)) scale(var(--s));
}
.sticker__img { display: block; width: 100%; height: auto; }
/* スタンプをテープ・ピン・クリップで留める（スクラップ帳のように） */
.sticker__att { position: absolute; height: auto; pointer-events: none; }
.sticker__att--tape { width: 44%; left: 28%; top: -7%; rotate: -5deg; }
.sticker[data-sticker="06"] .sticker__att--tape { rotate: 4deg; }
.sticker__att--pin { width: 12%; left: 47%; top: -9%; }
.sticker__att--binder { width: 12%; left: 46%; top: -15%; }
.sticker__att--clip { width: 22%; left: 4%; top: -6%; rotate: -24deg; }
.sticker--pc { display: none; }
@media (max-width: 1023px) {
  .stickers { order: 2; }
  .sticker[data-sticker="13"] { --x: 0%; --y: 0%; }
  .sticker[data-sticker="14"] { --x: 54%; --y: 4%; }
  .sticker[data-sticker="10"] { --x: 4%; --y: 34%; }
  .sticker[data-sticker="09"] { --x: 56%; --y: 36%; }
  .sticker[data-sticker="01"] { --x: 2%; --y: 68%; }
  .sticker[data-sticker="06"] { --x: 54%; --y: 70%; }
}

/* ---------- CTA ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  min-height: 58px;
  padding: 0 30px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  font: 800 clamp(16px, 4.4vw, 20px)/1.2 var(--font-ja);
  letter-spacing: .04em;
  text-decoration: none;
  font-feature-settings: "palt" 1;
}
.cta__arrow { display: inline-block; margin-left: .3em; }
.cta:hover { background: var(--paper); color: var(--ink); }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.cta--small {
  min-height: 46px;
  padding: 0 20px;
  font-size: 15px;
}

/* ---------- ENDING ---------- */
.s-end {
  position: relative;
  min-height: calc(var(--vh) * 100);
  overflow: hidden;
  background: var(--paper);
}
.s-end__inner {
  position: relative;
  z-index: 4;
  padding: calc(var(--vh) * 16) var(--gutter) 0;
}
/* 「……」は、しろもんの考えごとの吹き出しに */
.s-end__think {
  --aw: min(66vw, calc(var(--vh) * 44));
  position: absolute;
  z-index: 5;
  right: calc(-4vw + var(--aw) * .62);
  bottom: calc(var(--vh) * 2 + var(--aw) * .8);
  width: clamp(96px, 26vw, 168px);
  aspect-ratio: 191 / 199;
}
.s-end__bubble { position: absolute; inset: 0; width: 100%; height: auto; transform: scaleX(-1); }
.s-end__dots {
  position: absolute;
  inset: 0 0 22% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: clamp(15px, 3.6vw, 22px);
  letter-spacing: .02em;
}
.s-end__title { margin-top: 14px; font-size: min(14vw, 150px); position: relative; display: inline-block; }
.s-end__titleText { position: relative; z-index: 1; }
.s-end__marker {
  position: absolute;
  z-index: 0;
  left: -3%;
  bottom: -2%;
  width: 106%;
  height: 34%;
  pointer-events: none;
}
.s-end__cta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}
.s-end__note { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.cta-img { display: inline-block; line-height: 0; border-radius: 40px; }
.cta-img__img { width: clamp(210px, 56vw, 280px); height: auto; }
.cta-img:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.s-end__actor {
  width: min(66vw, calc(var(--vh) * 44));
  right: -4vw;
  bottom: calc(var(--vh) * 2);
}
.s-end__crumple {
  position: absolute;
  z-index: 2;
  right: calc(-4vw + min(66vw, calc(var(--vh) * 44)) * .86);
  bottom: calc(var(--vh) * 3);
  width: clamp(56px, 13vw, 96px);
  height: auto;
  rotate: 14deg;
  pointer-events: none;
}
.s-end__sign {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  width: clamp(34px, 9vw, 52px);
  height: auto;
  rotate: -4deg;
}

/* ---------- 動きボタン ---------- */
.motion-toggle {
  position: fixed;
  right: 12px;
  top: calc(12px + env(safe-area-inset-top, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  font: 700 12px/1 var(--font-ja);
  letter-spacing: .08em;
  cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 1px var(--ink);
}
.motion-toggle[aria-pressed="false"] .motion-toggle__dot { background: transparent; }

/* ---------- 右下のバッジ（LINEスタンプのコーナーへ） ---------- */
.badge {
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  width: clamp(72px, 7vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 2px var(--ink);
  transition: opacity var(--motion-base) var(--ease-soft), visibility var(--motion-base);
}
.badge__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font: 800 8px/1 var(--font-en);
  fill: var(--ink);
}
.badge__face { position: absolute; left: 23%; top: 22%; width: 54%; height: auto; }
.badge:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
html.at-line .badge,
html.at-end .badge { opacity: 0; visibility: hidden; }
/* スマホは画面が狭く、しろもんの足元に重なるので出さない */
@media (max-width: 767px) { .badge { display: none; } }
/* 展示ポスター（01〜03）の上には何も重ねない: ポスターが見えている間は固定の部品を隠す */
html.on-work .badge { opacity: 0; visibility: hidden; }
/* 作品の上では見せないが、キーボードで届けば現れる */
html.on-work .motion-toggle { opacity: 0; pointer-events: none; }
html.on-work .motion-toggle:focus-visible { opacity: 1; pointer-events: auto; }
html:not(.js) .badge { display: none; }

/* ---------- PC（1024px以上）の配置 ---------- */
@media (min-width: 1024px) {
  .s-open__word {
    top: calc(var(--vh) * 20);
    font-size: min(13.4vw, calc(var(--vh) * 26));
  }
  .s-open__word > span { display: block; }
  .s-open__word { font-size: min(11vw, calc(var(--vh) * 19)); }
  .s-open__don { top: calc(var(--vh) * 66); width: min(34vw, 480px); }
  .s-open__film { left: auto; right: 4vw; translate: none; height: 100%; }
  .s-open__credit { right: calc(4vw + 28vh); translate: 50% 0; } /* 動画の真下・中央（右下のバッジと重ねない） */
  .s-open__tag { width: clamp(170px, 13vw, 230px); }
  .band__card { width: clamp(96px, 8.6vw, 150px); }
  .room-sign { width: clamp(150px, 13vw, 220px); }
  .s-normal__title { font-size: min(13vw, 220px); }
  .s-rush__actor { width: min(38vw, calc(var(--vh) * 60)); bottom: calc(var(--vh) * 6); }
  .s-mofu__actor { width: min(38vw, calc(var(--vh) * 60)); bottom: calc(var(--vh) * 6); }
  .s-mofu__title { font-size: min(40vw, calc(var(--vh) * 52)); top: calc(var(--vh) * 4); }
  .s-mofu__band { bottom: calc(var(--vh) * 4); }
  .s-seventy__num { font-size: min(54vw, calc(var(--vh) * 76)); top: calc(var(--vh) * 2); }
  .s-seventy__note { bottom: calc(var(--vh) * 4 + min(28vw, var(--vh) * 36) * .95); }
  .s-seventy__actor { width: min(28vw, calc(var(--vh) * 36)); }
  .s-good__actor { width: min(32vw, calc(var(--vh) * 44)); }
  .s-good__title { font-size: min(25vw, calc(var(--vh) * 34)); top: calc(var(--vh) * 5); }
  .s-good__band { top: calc(var(--vh) * 40); }

  .s-line {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 54%);
    grid-template-rows: auto auto 1fr;
    min-height: calc(var(--vh) * 100 + var(--wave-h));
    padding-bottom: 0;
  }
  .s-line__wave, .s-line__band { grid-column: 1 / -1; }
  .s-line__inner {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    padding: calc(var(--vh) * 6) 0 calc(var(--vh) * 10) var(--gutter);
  }
  .s-line__title { font-size: min(9.4vw, calc(var(--vh) * 17)); }
  .s-line__product { font-size: clamp(18px, 1.6vw, 24px); }
  .s-line__board {
    grid-column: 2;
    grid-row: 3;
    align-self: center;
    margin: calc(var(--vh) * 3) var(--gutter) calc(var(--vh) * 5) 0;
  }
  .stickers { height: calc(var(--vh) * 70); }
  .sticker { width: clamp(150px, 13.6vw, 236px); }
  .sticker--pc { display: block; }

  .s-end__inner { padding-top: calc(var(--vh) * 26); padding-left: calc(var(--gutter) * 2); }
  .s-end__title { font-size: min(8.4vw, calc(var(--vh) * 15)); }
  .s-end__actor { width: min(34vw, calc(var(--vh) * 60)); right: 6vw; }
  .s-end__think { --aw: min(34vw, calc(var(--vh) * 60)); right: calc(6vw + var(--aw) * .7); width: clamp(120px, 11vw, 176px); }
  .s-end__crumple { right: calc(6vw + min(34vw, calc(var(--vh) * 60)) * .9); }
  .cta-img__img { width: clamp(220px, 18vw, 280px); }
}

/* ======================================================================
   ここから下は「動きあり」の時だけ。html.js.m（JSが動き、動きONの時）
   ====================================================================== */
html.js.m .scroll-cue { opacity: 0; }
html.js.m .s-open__word .ch { display: inline-block; }
html.js.m .s-open__don { opacity: 0; z-index: 5; left: 50%; top: calc(var(--vh) * 22); width: min(90vw, 560px); translate: -50% -50%; }
@media (min-width: 1024px) { html.js.m .s-open__don { left: 36vw; top: calc(var(--vh) * 40); width: min(56vw, 800px); } } /* 「めんどくさい。」が食べられて空いた所へ */
/* 読み込み画面: 動きありの時だけ全画面で前に出し、開いたら上へ抜ける */
html.js.m .s-open { position: fixed; inset: 0; z-index: 150; transition: transform 900ms var(--ease-slide); }
html.js.m.is-loading { overflow: hidden; }
html.js.m.is-opened .s-open { transform: translateY(-102%); }
html.js.m.is-gone .s-open { visibility: hidden; }
html.js.m .s-seventy__note { opacity: 0; }

/* PCの舞台をsticky区間で固定（仕様: PCのみ） */
html.js.m.pc .zone[data-zone="rush"] { height: 200vh; }
html.js.m.pc .zone[data-zone="mofu"] { height: 150vh; }
html.js.m.pc .zone[data-zone="seventy"] { height: 200vh; }
html.js.m.pc .zone[data-zone="good"] { height: 180vh; }
html.js.m.pc .zone > .stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
}
html.js.m.pc .zone[data-handoff] > .stage { visibility: hidden; }
html.js.m.pc .s-seventy__num { font-size: min(56vw, calc(var(--vh) * 84)); top: calc(var(--vh) * -24); }
html.js.m.pc .s-seventy__note { top: calc(var(--vh) * 66); bottom: auto; left: 27%; }
html.js.m.pc .s-seventy__actor { width: min(32vw, calc(var(--vh) * 44)); }
html.js.m.pc .zone[data-handoff].is-live > .stage { visibility: visible; }
/* 受け渡しの場面は、前の場面（展示の上に重なる場面＝z-index 3）よりさらに上に */
html.js.m.pc .s-mofu { z-index: 4; }
html.js.m.pc .s-good { z-index: 4; }
/* PC: 作品を見終わる所で止め、次の場面がその上へ重なって入ってくる（作品は動かさない） */
html.js.m.pc .work::after { content: ""; display: block; height: 100vh; }
html.js.m.pc .work__frame { position: sticky; top: calc(100vh - 100cqw / var(--ratio)); }
html.js.m.pc .work + .scene { margin-top: -100vh; z-index: 3; }

/* 動きありの時の初期状態（JSが動かす） */
html.js.m .band--task { left: 0; width: auto; rotate: none; }

html.js.m .s-mofu__band,
html.js.m .s-good__band,
html.js.m .s-seventy__band { transform: translateX(101%); }
html.js.m .marks { display: block; }
html.js.m .mark { transform: scale(0); }
html.js.m .todo { display: block; }
html.js.m .todo__check { transition: opacity var(--motion-fast) var(--ease-soft), transform var(--motion-base) cubic-bezier(.34, 1.56, .64, 1); }
html.js.m .s-open__tag,
html.js.m .s-mofu__sign,
html.js.m .s-good__sign,
html.js.m .s-good__stamp { opacity: 0; }
html.js.m .s-end__marker { clip-path: inset(0 100% 0 0); }
html.js.m .s-end__think { opacity: 0; }
html.js.m .s-end__crumple { opacity: 0; } /* 飛んでくるまでは見せない */
/* 動きありの時、メモは帯の先（口に入る側）に付く */
html.js.m .band--task[data-from="left"] .band__cards { right: 1%; }
html.js.m .band--task[data-from="right"] .band__cards { left: 1%; }
html.js.m .badge__ring { animation: shiromon-spin 24s linear infinite; }
html.js.m.quiet .badge__ring { animation-play-state: paused; }
@keyframes shiromon-spin { to { transform: rotate(360deg); } }
html.js.m .cta-img { transition: transform var(--motion-fast) var(--ease-soft); }
html.js.m .cta-img:hover { transform: rotate(-2deg) translateY(-2px); }
html.js.m .s-end__dots span,
html.js.m .s-end__title { opacity: 0; }
html.js.m .band--loop .band__track { animation: shiromon-marquee 30s linear infinite; }
html.js.m .band--loop.is-paused .band__track,
html.js.m.quiet .band--loop .band__track { animation-play-state: paused; }
@keyframes shiromon-marquee { to { transform: translateX(-50%); } }
html.js.m .cta__arrow { transition: transform var(--motion-fast) var(--ease-soft); }
html.js.m .cta:hover .cta__arrow { transform: translateX(4px); }
html.js.m .cta { transition: background-color var(--motion-micro) var(--ease-soft), color var(--motion-micro) var(--ease-soft); }

/* 動きを減らす設定（OS）でJSが無い時も、念のため全部止める */
@media (prefers-reduced-motion: reduce) {
  html:not(.m) *, html:not(.m) *::before, html:not(.m) *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- ぷかぷか しろもん（動きありの時だけ。幕が開いてから出る） ---------- */
.floaty { display: none; }
html.js.m .floaty {
  display: block;
  position: fixed;
  left: 0; top: 0;
  z-index: 140;
  width: clamp(76px, 7.6vw, 116px);
  aspect-ratio: 384 / 493;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
  transition: opacity 420ms var(--ease-soft);
}
html.js.m .floaty.is-on { opacity: 1; pointer-events: auto; }
/* 作品01〜03の上では消える／ボタン・リンクの上ではクリックを通す */
html.js.m .floaty.is-on.is-hiding { opacity: 0; pointer-events: none; }
html.js.m .floaty.is-on.is-pass { pointer-events: none; }
html.js.m .floaty.is-drag { cursor: grabbing; }
.floaty__body { position: absolute; inset: 0; transform-origin: 50% 12%; /* 風船を支点に、ぶら下がって揺れる */ filter: drop-shadow(0 12px 12px rgba(17, 17, 17, .16)); }
.floaty__img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }