/* 裏方界隈 — 2回目A案「流出した機密資料」
   PCの寸法は採用PC原画（幅724px）の座標を --u（原画1px）で換算。
   スマホFVは採用スマホ原画（幅853px）の座標を --m（原画1px）で換算。 */

@font-face { font-family: 'Noto Sans JP'; src: url('./fonts/NotoSansJP-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('./fonts/Manrope-variable.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  /* 色（指定色） */
  --ink: #08090B;          /* 背景：墨黒 */
  --paper: #EAE5D9;        /* 主要文字・紙面：生成り */
  --cta: #FFE234;          /* CTA：黄色（参加導線だけに使う） */
  --rust: #9D4036;         /* 見出し強調・印刷の帯：錆赤（原画の実測値。大きい太字だけに使う） */
  --teal: #47716D;         /* 資料のタブ：青緑（指定値） */
  /* 原画から実測した面の色 */
  --paper-face: #FBF7F4;   /* 生成りの紙面（紙の地模様と乗算して原画の #E1D8CC 前後になる値） */
  --teal-face: #3B6973;    /* 06の青緑の面（乗算後に原画の #355C5E 前後） */
  --text-on-paper: #17181B;
  --num-dark: #4A4E55;     /* 暗い面の章番号 */
  --num-paper: #AEA79C;    /* 紙面の章番号 */
  --deco: #6F7379;         /* 欄外の英字（装飾） */
  --muted: #B9B6AE;

  --font-ja: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-num: 'Manrope', 'Noto Sans JP', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* 原画1pxの換算値：PCは原画724px → 最大1200px */
  --u: calc(min(100vw, 1200px) / 724);
  --wrap: min(100vw, 1200px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ink) url('./images/tex-dark.webp') 0 0 / 384px repeat;
  color: var(--paper); font-family: var(--font-ja); font-weight: 400; line-height: 1.8;
  font-synthesis: none; overflow-x: clip;
}
img { display: block; max-width: none; }
a { color: inherit; }
h1, h2, p, ul, ol { margin: 0; }
h2, p, li { word-break: auto-phrase; }
ul, ol { padding: 0; list-style: none; }
small { display: block; }
:focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--cta); color: var(--ink); padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }
.sp { display: none; }
.nb { display: inline-block; white-space: nowrap; }

.sec { position: relative; isolation: isolate; }
.sec__inner { position: relative; z-index: 2; width: var(--wrap); margin-inline: auto; }
.row { display: flex; align-items: center; }
.col { min-width: 0; }

/* 共通：章ラベル */
.label { display: flex; align-items: center; flex: none; }
.label__no {
  font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u) * 46); line-height: 1;
  letter-spacing: -0.04em; color: var(--num-dark); transform: scaleX(.8); transform-origin: left center;
  display: inline-block;
}
.label__name { font-weight: 700; font-size: calc(var(--u) * 21); line-height: 1.3; }
.label__name small, .members__title small, .steps__title small {
  font-family: var(--font-num); font-weight: 600; font-size: calc(var(--u) * 7.5); letter-spacing: .14em; margin-top: calc(var(--u) * 4); color: var(--muted);
}

/* 欄外の英字（装飾・採否確認中）。data-deco を消すか .deco-en{display:none} で一括非表示 */
.deco-en {
  position: absolute; z-index: 1; font-family: var(--font-num); font-weight: 500; text-transform: uppercase;
  color: var(--deco); letter-spacing: .08em; line-height: 1.45; font-size: calc(var(--u) * 9.5); pointer-events: none;
}

/* テープ（原画から切り出した独立素材） */
.tape { position: absolute; z-index: 1; height: auto; pointer-events: none; }

/* ============ 01 FV ============ */
.hero { min-height: calc(var(--u) * 510); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__bg > * { position: absolute; }
.hero__torn { left: 0; top: 0; width: calc(var(--u) * 52); height: auto; opacity: .95; }
.hero__envelope {
  /* 素材の実寸（幅423px）を超えて拡大しない。右端は画面外へ逃がし、原画と同じく封筒を画面端で切る */
  left: calc(50% - var(--wrap) / 2 + var(--u) * 396); top: calc(var(--u) * -30);
  width: min(calc(var(--u) * 360), 423px); height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 88%, transparent 100%);
}
.hero__shard { /* 同じスマホ原画の破れ紙片を左右反転して右端へ */
  right: 0; top: calc(var(--u) * 150); width: min(calc(var(--u) * 150), 240px); height: auto; transform: scaleX(-1); opacity: .9;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 80%, transparent);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 80%, transparent);
}
/* 2枚のテープは破れ紙の帯（torn-left）でテープを抜いた位置に重ねる */
.tape--hero1 { left: calc(var(--u) * -4); top: calc(var(--u) * 112); width: calc(var(--u) * 84); transform: rotate(-3deg); }
.tape--hero2 { left: calc(var(--u) * -6); top: calc(var(--u) * 432); width: calc(var(--u) * 52); }
.tape--hero3 { display: none; }

.hero__inner { position: relative; z-index: 2; width: var(--wrap); margin-inline: auto; padding: calc(var(--u) * 6) 0 calc(var(--u) * 20) calc(var(--u) * 60); min-height: calc(var(--u) * 510); }
.hero__title { display: grid; grid-template-columns: calc(var(--u) * 90) auto; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.hero__ura { grid-column: 1 / -1; font-size: calc(var(--u) * 134); color: var(--paper); }
.hero__en {
  align-self: start; margin-top: calc(var(--u) * 20); font-family: var(--font-num); font-weight: 700;
  font-size: calc(var(--u) * 12.5); line-height: 1.35; letter-spacing: .1em; color: var(--paper); text-align: center; width: max-content;
}
.hero__kai { font-size: calc(var(--u) * 121); color: var(--rust); margin-top: calc(var(--u) * 0); }
.hero__body { margin-left: calc(var(--u) * 50); width: calc(var(--u) * 352); text-align: left; }
.hero__lead { margin-top: calc(var(--u) * 20); font-weight: 700; font-size: calc(var(--u) * 27); line-height: 1.25; letter-spacing: -0.02em; white-space: nowrap; }
.hero__sub { margin-top: calc(var(--u) * 9); font-size: calc(var(--u) * 12.5); line-height: 1.6; }
.cta-wrap { margin-top: calc(var(--u) * 14); }
.cta {
  display: flex; align-items: center; justify-content: center; gap: .9em; min-height: 44px;
  width: calc(var(--u) * 350); height: calc(var(--u) * 52);
  background: var(--cta); color: var(--ink); text-decoration: none; font-weight: 700; font-size: calc(var(--u) * 18.5); line-height: 1.45;
  clip-path: var(--rough-cta); transition: background-color .18s, transform .18s;
}
.cta__arrow { font-family: var(--font-num); font-weight: 700; }
.cta:hover { background: #FFEA66; }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline-offset: 5px; }
.cta-note { margin-top: calc(var(--u) * 10); width: calc(var(--u) * 350); text-align: center; font-size: calc(var(--u) * 12); line-height: 1.6; }

.scroll-cue { position: absolute; left: calc(var(--u) * 342); top: calc(var(--u) * 458); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); width: calc(var(--u) * 40); min-height: 44px; text-decoration: none; color: var(--paper); }
.scroll-cue__dots { display: flex; flex-direction: column; gap: 5px; height: 32px; justify-content: center; }
.scroll-cue__dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.scroll-cue__label { font-family: var(--font-num); font-size: 9px; letter-spacing: .14em; color: var(--muted); }
.deco-en--hero-l { left: calc(var(--u) * 22); top: calc(var(--u) * 318); font-size: calc(var(--u) * 16.5); line-height: 1.65; color: #45484D; font-weight: 400; letter-spacing: .06em; }
.deco-en--hero-r { left: calc(var(--u) * 548); top: calc(var(--u) * 310); font-size: calc(var(--u) * 10.5); color: #8A8E95; }

/* ============ 生成りの紙面（02・07） ============ */
.paper { z-index: 2; }
.paper__sheet {
  position: relative; background: var(--paper-face) url('./images/tex-cream.webp') 0 0 / 192px repeat;
  background-blend-mode: multiply; color: var(--text-on-paper);
  clip-path: var(--torn-both); filter: drop-shadow(0 8px 14px rgba(0,0,0,.55));
}
.paper .label__no { color: var(--num-paper); }
.paper .label__name small, .paper .steps__title small { color: #6B6A66; }

.paper--band .paper__sheet { padding: calc(var(--u) * 48) 0 calc(var(--u) * 44); margin-top: calc(var(--u) * -12); }
.paper--band .label { padding-left: calc(var(--u) * 55); }
.paper--band .label__no { width: calc(var(--u) * 72); }
.paper--band .label__name { padding-left: calc(var(--u) * 16); border-left: 1px solid rgba(23,24,27,.55); }
.band__title { margin-left: calc(var(--u) * 28); padding-left: calc(var(--u) * 30); border-left: 1px solid rgba(23,24,27,.55); font-weight: 700; font-size: calc(var(--u) * 26.5); line-height: 1.45; }
.tape--r02 { right: calc(50% - var(--wrap) / 2 + var(--u) * 12); top: calc(var(--u) * 92); width: calc(var(--u) * 92); transform: rotate(-6deg); }

/* ============ 暗い面（03・04・05・08） ============ */
.dark { padding: calc(var(--u) * 42) 0 calc(var(--u) * 46); }
.label--stack { flex-direction: column; align-items: flex-start; width: calc(var(--u) * 132); padding-left: calc(var(--u) * 55); }
.label--stack .label__name { margin-top: calc(var(--u) * 8); }
#for-you .row, #gather .row { align-items: stretch; }
#for-you .col, #gather .col { border-left: 1px solid rgba(234,229,217,.35); padding-left: calc(var(--u) * 32); }
.rule-title { display: flex; align-items: center; gap: calc(var(--u) * 18); font-weight: 700; font-size: calc(var(--u) * 21); line-height: 1.45; }
.rule-title::after { content: ""; width: calc(var(--u) * 190); height: 1px; background: rgba(234,229,217,.6); }
.slashes { display: flex; margin-top: calc(var(--u) * 26); font-size: calc(var(--u) * 14.5); line-height: 1.9; }
.slashes li { position: relative; padding: 0 calc(var(--u) * 34) 0 calc(var(--u) * 22); }
.slashes li:first-child { padding-left: 0; }
.slashes li + li::before { content: ""; position: absolute; left: calc(var(--u) * -8); top: 8%; height: 84%; width: 1px; background: rgba(234,229,217,.55); transform: rotate(26deg); }
.deco-en--side { right: calc(50% - var(--wrap) / 2 + var(--u) * 18); top: calc(var(--u) * 26); padding-left: calc(var(--u) * 10); border-left: 1px solid rgba(234,229,217,.25); }

.dark--lifted { padding: 0; }
.lifted__sheet {
  position: relative; padding: calc(var(--u) * 58) 0 calc(var(--u) * 64);
  background: #111215 url('./images/tex-dark.webp') 120px 60px / 384px repeat;
  clip-path: var(--torn-top); filter: drop-shadow(0 -2px 0 rgba(200,196,188,.35));
}
.plain-title { font-weight: 700; font-size: calc(var(--u) * 25); line-height: 1.45; }
.plain-body { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 14.5); line-height: 1.8; }
.stamp-shard {
  position: absolute; z-index: 1; right: 0; top: calc(var(--u) * 6); width: max(calc(50% - var(--wrap) / 2 + var(--u) * 140), calc(var(--u) * 140)); height: calc(var(--u) * 196);
  background: url('./images/envelope.webp') 70% 64% / min(calc(var(--u) * 520), 423px) auto no-repeat; filter: brightness(1.55) contrast(.9) grayscale(1);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 78%, 12% 40%);
}
.stamp {
  position: absolute; left: calc(var(--u) * 46); top: calc(var(--u) * 84); padding: calc(var(--u) * 4) calc(var(--u) * 8);
  border: 2px solid rgba(234,229,217,.75); color: rgba(234,229,217,.8); font-family: var(--font-num); font-weight: 700;
  font-size: calc(var(--u) * 11.5); line-height: 1.25; letter-spacing: .1em; text-align: center; transform: rotate(-14deg); filter: brightness(.7);
}
.deco-en--low { left: calc(50% - var(--wrap) / 2 + var(--u) * 18); bottom: calc(var(--u) * 16); font-size: calc(var(--u) * 8.5); color: #4B4F55; }
.tape--r04 { left: calc(50% - var(--wrap) / 2 + var(--u) * 58); bottom: calc(var(--u) * 26); width: calc(var(--u) * 70); transform: rotate(-8deg); }

/* ============ 05 メンバー名鑑 ============ */
#members { padding-top: calc(var(--u) * 34); padding-bottom: calc(var(--u) * 58); }
.members__head { display: flex; align-items: center; padding-left: calc(var(--u) * 55); }
.members__head .label__no { width: calc(var(--u) * 62); }
.members__title { padding-left: calc(var(--u) * 14); border-left: 2px solid rgba(234,229,217,.7); font-weight: 900; font-size: calc(var(--u) * 32); line-height: 1.15; }
.members__hint { margin-left: calc(var(--u) * 34); font-size: calc(var(--u) * 15); line-height: 1.5; align-self: flex-start; margin-top: calc(var(--u) * 6); }
.members { display: grid; grid-template-columns: repeat(2, calc(var(--u) * 272)); column-gap: calc(var(--u) * 14); row-gap: calc(var(--u) * 16); margin: calc(var(--u) * 42) 0 0 calc(var(--u) * 64); }
.members li:nth-child(even) { transform: translateY(calc(var(--u) * -4)); }
.member {
  position: relative; display: grid; grid-template-columns: calc(var(--u) * 70) 1fr calc(var(--u) * 40); align-items: center;
  min-height: max(44px, calc(var(--u) * 68)); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 22);
  color: var(--text-on-paper); text-decoration: none;
  background: #EDE9E6 url('./images/tex-cream.webp') 0 0 / 192px repeat; background-blend-mode: multiply;
  clip-path: var(--rough-card); transition: background-color .18s, transform .18s;
  box-shadow: inset 0 0 calc(var(--u) * 18) rgba(90,70,40,.28);
}
.members li { position: relative; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); }
.members li::before { /* 青緑のタブ */
  content: ""; position: absolute; z-index: 2; left: calc(var(--u) * -6); top: calc(var(--u) * -4); width: calc(var(--u) * 16); height: calc(var(--u) * 32);
  background: #2F595C; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.members li::after { /* 折れた角 */
  content: ""; position: absolute; z-index: 2; right: calc(var(--u) * 3); top: calc(var(--u) * 1); width: calc(var(--u) * 14); height: calc(var(--u) * 14);
  background: linear-gradient(225deg, var(--ink) 50%, #BDB29F 50%); pointer-events: none;
}
.member__file { font-family: var(--font-mono); font-size: calc(var(--u) * 10.5); align-self: start; margin-top: calc(var(--u) * 14); color: #3A3A38; }
.member__name { font-weight: 900; font-size: calc(var(--u) * 19.5); line-height: 1.3; text-align: center; }
.member__arrow { font-family: var(--font-num); font-size: calc(var(--u) * 17); text-align: right; font-weight: 600; transition: transform .18s; }
.member:hover, .member:focus-visible { background-color: #FFFDF8; }
.member:hover .member__arrow { transform: translate(2px, -2px); }
.member:active { transform: translateY(1px); }
.member:focus-visible { outline-offset: -4px; outline-color: var(--rust); }
.deco-en--members { top: calc(var(--u) * 160); }
.tape--r05 { right: calc(50% - var(--wrap) / 2 + var(--u) * 12); top: calc(var(--u) * 222); width: calc(var(--u) * 74); }

/* ============ 06 青緑 ============ */
.teal { z-index: 2; }
.teal__sheet {
  position: relative; padding: calc(var(--u) * 44) 0 calc(var(--u) * 52);
  background: var(--teal-face) url('./images/tex-cream.webp') 0 0 / 192px repeat; background-blend-mode: multiply;
  clip-path: var(--torn-both-b); filter: drop-shadow(0 6px 12px rgba(0,0,0,.5));
}
.teal .row { padding-left: calc(var(--u) * 55); }
.teal .label__no { color: #6E8F8E; width: calc(var(--u) * 72); }
.teal .col { padding-left: calc(var(--u) * 24); border-left: 1px solid rgba(234,229,217,.45); }
.teal__title { font-weight: 700; font-size: calc(var(--u) * 19.5); line-height: 1.5; }
.line-link { display: inline-flex; align-items: center; gap: calc(var(--u) * 16); min-height: 44px; font-size: calc(var(--u) * 13); text-decoration: none; }
.line-link__arrow { position: relative; width: calc(var(--u) * 170); height: 1px; background: currentColor; transition: width .18s; }
.line-link__arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.line-link:hover .line-link__arrow { width: calc(var(--u) * 186); }
.deco-en--teal { right: calc(50% - var(--wrap) / 2 + var(--u) * 42); top: calc(var(--u) * 42); font-size: calc(var(--u) * 11); color: #1C2E2F; font-weight: 600; }
.tape--r06 { right: calc(50% - var(--wrap) / 2 + var(--u) * 34); bottom: calc(var(--u) * 20); width: calc(var(--u) * 72); transform: rotate(-6deg); }

/* ============ 07 参加方法 ============ */
.paper--steps .paper__sheet { padding: calc(var(--u) * 50) 0 calc(var(--u) * 56); clip-path: var(--torn-both-b); margin-top: calc(var(--u) * -14); }
.steps__head { display: flex; align-items: center; padding-left: calc(var(--u) * 55); }
.steps__head .label__no { width: calc(var(--u) * 64); }
.steps__title { padding-left: calc(var(--u) * 20); border-left: 1px solid rgba(23,24,27,.55); font-weight: 700; font-size: calc(var(--u) * 22); line-height: 1.3; }
.steps { display: grid; grid-template-columns: 1fr 1fr; margin: calc(var(--u) * 26) calc(var(--u) * 60) 0 calc(var(--u) * 64); padding-bottom: calc(var(--u) * 22); border-bottom: 1px solid rgba(23,24,27,.45); }
.steps li { display: flex; align-items: center; gap: calc(var(--u) * 20); font-weight: 700; font-size: calc(var(--u) * 15.5); line-height: 1.5; }
.steps li + li { border-left: 1px solid rgba(23,24,27,.45); padding-left: calc(var(--u) * 34); }
.steps__no { flex: none; display: grid; place-items: center; width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u) * 18); }
.steps__note { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 13); line-height: 1.6; }
.steps__mark { width: calc(var(--u) * 46); height: calc(var(--u) * 16); background: url('./images/tape-a.webp') center / cover; flex: none; }
.deco-en--steps { right: calc(50% - var(--wrap) / 2 + var(--u) * 18); top: calc(var(--u) * 42); font-size: calc(var(--u) * 9); color: #8E887C; }

/* ============ 08 最終案内 ============ */
.final { padding: calc(var(--u) * 40) 0 calc(var(--u) * 40); overflow: hidden; }
.final__shard { position: absolute; z-index: 0; left: 0; bottom: calc(var(--u) * -40); width: min(calc(var(--u) * 150), 240px); height: auto; opacity: .95; }
.final__head { display: grid; grid-template-columns: calc(var(--u) * 118) 1fr; align-items: start; padding-left: calc(var(--u) * 40); }
.final__head .label__no { padding-right: calc(var(--u) * 12); border-right: 1px solid rgba(234,229,217,.3); height: calc(var(--u) * 120); }
.final__title { margin-top: calc(var(--u) * 50); padding-left: calc(var(--u) * 45); font-weight: 900; font-size: calc(var(--u) * 42); line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; }
.final__title em { font-style: normal; color: #A8453A; }
.final .cta-wrap { margin-top: calc(var(--u) * 6); display: flex; justify-content: center; }
.final .cta { width: calc(var(--u) * 306); height: calc(var(--u) * 50); }
.final .cta-note { width: auto; text-align: center; }
.deco-en--final-l { left: calc(50% - var(--wrap) / 2 + var(--u) * 50); bottom: calc(var(--u) * 20); font-size: calc(var(--u) * 9.5); color: #6F7379; }
.deco-en--final-r { right: calc(50% - var(--wrap) / 2 + var(--u) * 50); bottom: calc(var(--u) * 30); font-size: calc(var(--u) * 9.5); color: #6F7379; }
.tape--r08 { right: calc(50% - var(--wrap) / 2 + var(--u) * 20); bottom: calc(var(--u) * 6); width: calc(var(--u) * 80); transform: rotate(-4deg); }

/* フッター（ロゴ＝先頭へ戻る） */
.footer { position: relative; padding: 0 0 calc(var(--u) * 48); text-align: center; }
.footer::before { content: ""; display: block; width: calc(var(--u) * 240); height: 1px; margin: 0 auto calc(var(--u) * 26); background: rgba(234,229,217,.3); }
.footer__logo { display: inline-flex; flex-direction: column; align-items: center; min-height: 44px; text-decoration: none; }
.footer__ja { font-weight: 400; font-size: calc(var(--u) * 21); letter-spacing: .5em; margin-right: -.5em; line-height: 1.4; }
.footer__en { font-family: var(--font-num); font-size: calc(var(--u) * 8.5); letter-spacing: .3em; color: var(--muted); }

/* 章の登場（JS有効時のみ隠す。reduced-motionでは動かさない） */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.scroll-cue.is-play .scroll-cue__dots i { animation: cue 2.1s ease-in-out 1 both; }
.scroll-cue.is-play .scroll-cue__dots i:nth-child(2) { animation-delay: .15s; }
.scroll-cue.is-play .scroll-cue__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cue { 0%, 100% { opacity: 1; transform: none; } 45% { opacity: .25; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .scroll-cue.is-play .scroll-cue__dots i { animation: none; }
}

/* ============ タブレット（701–1023px）：PC構図のまま文字を少し底上げ ============ */
@media (max-width: 1023px) and (min-width: 701px) {
  .slashes, .plain-body { font-size: 15px; }
  .hero__sub, .cta-note { font-size: 13px; }
  .steps__note, .line-link { font-size: 13px; }
}

/* ============ スマホ（〜700px） ============ */
@media (max-width: 700px) {
  :root { --m: calc(100vw / 853); --u: calc(100vw / 390); } /* --m：スマホ原画1px ／ --u：390px基準の1px */
  .sp { display: inline; }
  .sec__inner { width: auto; }

  /* FV：採用スマホ原画の文字なし背景＋HTML文字 */
  .hero { min-height: 0; background: var(--ink) url('./images/hero-mobile.webp') center top / 100% auto no-repeat; }
  .hero__bg { display: none; }
  .hero__inner { width: 100%; min-height: calc(var(--m) * 1844); padding: calc(var(--m) * 468) 0 calc(var(--m) * 60) calc(var(--m) * 64); }
  .hero__title { grid-template-columns: calc(var(--m) * 176) auto; }
  .hero__ura { font-size: calc(var(--m) * 278); letter-spacing: -0.01em; }
  .hero__en { font-size: calc(var(--m) * 29); margin-top: calc(var(--m) * 26); margin-left: calc(var(--m) * 8); text-align: left; }
  .hero__kai { font-size: calc(var(--m) * 242); margin-top: calc(var(--m) * 6); }
  .hero__body { margin-left: 0; width: calc(var(--m) * 725); }
  .hero__lead { margin-top: calc(var(--m) * 54); font-size: calc(var(--m) * 72); line-height: 1.27; white-space: normal; }
  .hero__sub { margin-top: calc(var(--m) * 10); font-size: max(13px, calc(var(--m) * 39)); }
  .cta-wrap { margin-top: calc(var(--m) * 42); }
  .cta { width: calc(var(--m) * 712); height: auto; min-height: max(52px, calc(var(--m) * 130)); font-size: max(16px, calc(var(--m) * 49)); }
  .cta-note { width: calc(var(--m) * 712); margin-top: calc(var(--m) * 22); font-size: max(13px, calc(var(--m) * 32)); }
  .scroll-cue { position: static; margin: calc(var(--m) * 56) 0 0 calc(var(--m) * 330); width: calc(var(--m) * 100); }
  .scroll-cue__dots { gap: calc(var(--m) * 14); height: auto; }
  .scroll-cue__dots i { width: calc(var(--m) * 16); height: calc(var(--m) * 16); }
  .scroll-cue__label { font-size: 10px; margin-top: calc(var(--m) * 16); }
  .hero .deco-en { display: none; }

  /* 下層：PCと同じ部品（紙面・暗い面・青緑・紙片）を1列に組み直す */
  .label__no { font-size: 40px; }
  .label__name { font-size: 18px; }
  .label__name small, .members__title small, .steps__title small { font-size: 9px; }
  .deco-en { font-size: 9px; }
  .deco-en--side, .deco-en--steps, .deco-en--teal, .deco-en--final-l, .deco-en--final-r { display: none; }

  .paper__sheet { clip-path: var(--torn-both-sp); }
  .paper--band .paper__sheet { padding: 52px 20px 48px; }
  .paper--band .row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .paper--band .label { padding-left: 0; }
  .paper--band .label__no { width: 62px; }
  .band__title { margin-left: 0; padding-left: 16px; font-size: 22px; }
  .tape--r02 { right: 8px; top: 30px; width: 70px; }

  .dark { padding: 44px 0 48px; }
  .dark .row { flex-direction: column; align-items: flex-start; gap: 16px; padding: 0 20px; }
  .label--stack { flex-direction: row; align-items: center; width: auto; padding-left: 0; gap: 14px; }
  .label--stack .label__name { margin-top: 0; }
  #for-you .col, #gather .col { padding-left: 16px; }
  .rule-title { font-size: 21px; }
  .rule-title::after { flex: 1; width: auto; min-width: 40px; }
  .slashes { flex-direction: column; gap: 6px; margin-top: 16px; font-size: 16px; }
  .slashes li, .slashes li:first-child { padding: 0 0 0 20px; }
  .slashes li br { display: none; }
  .slashes li::before, .slashes li + li::before { content: ""; position: absolute; left: 0; top: .55em; width: 1px; height: .9em; background: rgba(234,229,217,.6); transform: rotate(26deg); }

  .lifted__sheet { padding: 56px 0 118px; clip-path: var(--torn-top-sp); }
  .plain-title { font-size: 21px; }
  .plain-body { font-size: 15px; }
  .stamp-shard { width: 118px; height: 120px; top: auto; bottom: 0; background-size: 423px auto; }
  .stamp { left: 30px; top: 40px; font-size: 10px; }
  .deco-en--low { left: 20px; bottom: 14px; }
  .tape--r04 { left: 96px; bottom: 22px; width: 56px; }

  #members { padding: 40px 0 56px; }
  .members__head { flex-wrap: wrap; padding: 0 20px; row-gap: 6px; }
  .members__head .label__no { width: 58px; }
  .members__title { font-size: 26px; }
  .members__hint { flex-basis: 100%; margin: 6px 0 0; font-size: 14px; }
  .members { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 14px; margin: 26px 20px 0 22px; }
  .members li:nth-child(even) { transform: none; }
  .member { grid-template-columns: 1fr auto; grid-template-rows: auto auto; min-height: 72px; padding: 8px 10px 10px 16px; row-gap: 2px; }
  .member__file { grid-column: 1 / -1; margin-top: 0; font-size: 10px; }
  .member__name { text-align: left; font-size: 17px; white-space: nowrap; }
  .member__arrow { font-size: 15px; }
  .members li::before { left: -5px; top: -4px; width: 10px; height: 22px; }
  .members li::after { width: 10px; height: 10px; }
  .tape--r05 { display: none; }

  .teal__sheet { padding: 48px 20px 52px; clip-path: var(--torn-both-b-sp); }
  .teal .row { flex-direction: row; align-items: flex-start; gap: 14px; padding-left: 0; }
  .teal .label__no { width: auto; }
  .teal .col { padding-left: 14px; }
  .teal__title { font-size: 18px; }
  .line-link { font-size: min(14px, 3.6vw); gap: 8px; white-space: nowrap; }
  .line-link__arrow { width: min(36px, 8vw); }
  .line-link:hover .line-link__arrow { width: 42px; }
  .tape--r06 { right: 14px; bottom: 16px; width: 54px; }

  .paper--steps .paper__sheet { padding: 52px 20px 56px; clip-path: var(--torn-both-b-sp); }
  .steps__head { padding-left: 0; }
  .steps__head .label__no { width: 58px; }
  .steps__title { font-size: 20px; }
  .steps { grid-template-columns: 1fr; margin: 22px 0 0; row-gap: 14px; padding-bottom: 18px; }
  .steps li { font-size: 16px; gap: 14px; }
  .steps li + li { border-left: 0; padding-left: 0; }
  .steps__no { width: 36px; height: 36px; font-size: 16px; }
  .steps__note { justify-content: flex-start; align-items: flex-start; gap: 10px; font-size: 13px; margin-top: 14px; }
  .steps__mark { width: 34px; height: 12px; margin-top: .45em; }

  .final { padding: 48px 0 32px; }
  .final__head { grid-template-columns: 1fr; padding: 0 20px; }
  .final__head .label__no { height: auto; border: 0; }
  .final__title { margin-top: 10px; padding-left: 0; font-size: 34px; white-space: normal; }
  .final__title em { display: inline-block; }
  .final .cta-wrap { margin-top: 26px; padding: 0 20px; }
  .final .cta { width: 100%; min-height: 58px; font-size: 18px; }
  .final .cta-note { width: auto; font-size: 13px; margin-top: 10px; }
  .final__shard { width: 90px; bottom: -30px; opacity: .8; }
  .tape--r08 { display: none; }

  .footer { padding-bottom: 36px; }
  .footer::before { width: 160px; margin-bottom: 20px; }
  .footer__ja { font-size: 18px; }
  .footer__en { font-size: 9px; }
}