/* ==========================================================================
   課金の軌跡 — Landing Page
   第一段階：Hero／Section title plate／Speech bubble／手書き装飾／Section 01
   方針：mock（references/kakin-no-kiseki-mock.png）への近さを最優先。
   各シーンは bespoke に組む（共通化は方向確認のあと）。
   ========================================================================== */

:root {
  --ink: #0C0C10;
  --ink2: #17171E;
  --navy: #0D1222;
  --navy2: #151B30;
  --paper: #F3F4F6;
  --paper2: #E6E8EC;
  --white: #FFFFFF;
  --cyan: #1ED2E8;
  --cyan-deep: #12A9C0;
  --pink: #FF2E63;
  --pink-deep: #D6174A;
  --lemon: #FCE44F;

  --font-display: "Dela Gothic One", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --font-head: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-hand: "Yusei Magic", "Hiragino Maru Gothic ProN", "Zen Kaku Gothic New", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-feature-settings: "palt";
  line-height: 1.8;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, figure { margin: 0; }

/* ==========================================================================
   共通の小物
   ========================================================================== */

/* 桃紅の CTA（平行四辺形＋黒のハードシャドウ） */
.btn-shock {
  display: inline-block;
  padding: 0.55em 2.1em;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  transform: skewX(-6deg);
  box-shadow: none;
  position: relative;
}
.btn-shock::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), transparent 40%);
  pointer-events: none;
}

/* iPhone フレーム（CSS のみ。Apple の device frame 画像は使わない） */
.phone {
  position: relative;
  width: 300px;
}
.phone-screen {
  position: relative;
  border-radius: 46px;
  border: 9px solid #1a1a1f;
  background: #000;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #3a3a42, 0 0 0 2px #0a0a0c, 14px 18px 0 rgba(12,12,16,0.85);
}
.phone-screen::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 34%;
  height: 22px;
  transform: translateX(-50%);
  background: #000;
  border-radius: 12px;
  z-index: 2;
}
.phone-screen img { width: 100%; }
.phone-note {
  position: absolute;
  left: 50%;
  bottom: -1.9em;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.7);
}

/* 光痕（楔形）。画面の縁から中心へ射す速度線：根元 --t が最も太く、先端は点。
   --x/--y は根元の中心（縁側）、--l は長さ、--r は射す向き（0deg=右、-90deg=上） */
.wedge {
  position: absolute;
  width: var(--l);
  height: var(--t);
  left: var(--x);
  top: calc(var(--y) - var(--t) / 2);
  transform: rotate(var(--r));
  transform-origin: 0 50%;
  background: var(--col, var(--cyan));
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  pointer-events: none;
}

/* 手書き装飾（graphic として扱う。本文ではない） */
.hand {
  font-family: var(--font-hand);
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
  -webkit-text-stroke: 0;
  paint-order: stroke fill;
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
    0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink),
    7px 8px 0 rgba(12,12,16,0.9);
  pointer-events: none;
  user-select: none;
}
.hand-v {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  gap: 0.15em;
}
.hand-v span {
  display: block;
  writing-mode: vertical-rl;
}
.hand-v span:nth-child(2) { margin-top: 1.3em; }
.hand-v span:nth-child(3) { margin-top: 0.3em; }
.hand-v span:nth-child(4) { margin-top: 1.6em; }

/* セクションのタイトル・プレート（web/site/dev/section-title で確定した SVG 幾何）
   単位は mock px（1 単位 = 1.78 css px）。--pw は viewBox の幅、--plate-bg は継ぎ目の色（セクション背景） */
.plate { display: block; width: calc(var(--pw) * 1.78px); max-width: 100%; margin: 0; }
.plate-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pl-strip { fill: var(--ink); }
.pl-gap { fill: var(--plate-bg, var(--paper)); }
.pl-shadow { fill: var(--ink); }
.pl-cyan { fill: var(--cyan); stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: miter; }
.pl-num { font-family: "Anton", "Zen Kaku Gothic New", sans-serif; font-size: 25.5px; fill: var(--ink); }
.pl-title { font-family: var(--font-head); font-weight: 900; font-size: 19.5px; fill: #fff; letter-spacing: -0.8px; }
.plate-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 巨大なグラフィック・コピー（黒プレートに白の極太、行ごとにずらす） */
.gquote { display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
.gquote-line {
  display: inline-block;
  padding: 0.08em 0.4em 0.14em;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  transform: skewX(-8deg);
  clip-path: polygon(0 4%, 100% 0, 99% 100%, 1% 96%);
}
.gquote-line + .gquote-line { margin-top: 0.12em; margin-left: 0.9em; }

/* 紙のパネル（白・ハードシャドウ・少し傾ける） */
.paper {
  position: relative;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 12px 14px 0 var(--ink);
  padding: 22px 26px 18px;
}
.paper-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 6px;
  font-family: var(--font-head);
}
.paper-title { font-weight: 900; font-size: 1.05rem; letter-spacing: 0.06em; }
.paper-total { font-weight: 700; font-size: 0.85rem; color: #55525E; letter-spacing: 0.04em; }
.paper-total b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin-left: 0.2em; }
.paper-foot { margin-top: 4px; font-size: 0.72rem; letter-spacing: 0.1em; color: #7a7884; text-align: right; }

.chart { width: 100%; height: auto; display: block; font-family: var(--font-head); }
.chart-grid { stroke: #dfe2e8; stroke-width: 1; }
.chart-ylab { font-size: 11px; fill: #8a8894; font-weight: 700; }
.chart-xlab { font-size: 13px; fill: #55525E; font-weight: 700; }
.chart-xlab-last { fill: var(--pink); }
.chart-bar { fill: var(--cyan); transform-box: fill-box; transform-origin: bottom; }
.chart-bar-last { fill: var(--pink); }
.chart-badge path { fill: var(--ink); }
.chart-badge text { font-size: 14px; font-weight: 900; fill: #fff; letter-spacing: 0.04em; }
.chart-badge-num { fill: var(--lemon); font-size: 17px; }

/* 漫画の吹き出し（inline SVG） */
.bubble svg { width: 100%; height: auto; overflow: visible; }
.bubble-shadow { fill: var(--ink); }
.bubble-body { fill: #fff; stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.bubble-text { font-family: var(--font-hand); font-size: 27px; fill: var(--ink); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding: 18px 40px 0 28px;
}
.nav-brand img { width: 214px; height: auto; }
.nav-links {
  display: flex;
  gap: 1.9rem;
  margin-left: auto;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  color: #fff;
}
.nav-links a { text-decoration: none; padding-bottom: 2px; }
.nav-links a:hover { color: var(--cyan); }
.nav-cta {
  display: inline-block;
  padding: 0.45em 1.5em;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  white-space: nowrap;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 900px;
  height: 100vh;
  max-height: 1040px;
  background: transparent;
  color: #fff;
  isolation: isolate;
  z-index: 2;
  padding-bottom: 96px;
}
/* 背景層だけを斜めに切る（要素は Section 01 の上へはみ出せる） */
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--navy);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 96px), 0 100%);
}

/* スクリーントーン（網点） */
.hero-tone {
  position: absolute;
  background-image: radial-gradient(circle, rgba(255,255,255,0.55) 1.3px, transparent 1.8px);
  background-size: 9px 9px;
  opacity: 0.5;
}
.hero-tone-l {
  left: -8%; top: 40%; width: 42%; height: 70%;
  -webkit-mask-image: linear-gradient(200deg, transparent 20%, #000 55%, transparent 90%);
  mask-image: linear-gradient(200deg, transparent 20%, #000 55%, transparent 90%);
}
.hero-tone-r {
  right: -6%; top: -10%; width: 44%; height: 62%;
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(ellipse at 80% 20%, #000 20%, transparent 68%);
  mask-image: radial-gradient(ellipse at 80% 20%, #000 20%, transparent 68%);
}

/* Hero の光痕（左縁・右縁・上縁・下縁から中心へ。タイトル・副題・CTA を横切らない） */
.w1  { --x: -10px;  --y: 520px; --l: 250px; --t: 26px; --r: -30deg;  --col: var(--cyan); }
.w2  { --x: -10px;  --y: 560px; --l: 200px; --t: 16px; --r: -30deg;  --col: var(--pink); }
.w3  { --x: -10px;  --y: 700px; --l: 240px; --t: 14px; --r: -40deg;  --col: var(--cyan); }
.w4  { --x: -10px;  --y: 745px; --l: 200px; --t: 18px; --r: -50deg;  --col: var(--pink); }
.w5  { --x: 1450px; --y: 60px;  --l: 700px; --t: 20px; --r: 166deg;  --col: var(--cyan); }
.w6  { --x: 1450px; --y: 250px; --l: 260px; --t: 22px; --r: 170deg;  --col: var(--pink); }
.w7  { --x: 1450px; --y: 640px; --l: 800px; --t: 30px; --r: 195deg;  --col: var(--cyan); }
.w8  { --x: 1450px; --y: 720px; --l: 460px; --t: 34px; --r: 200deg;  --col: var(--pink); }
.w9  { --x: 560px;  --y: 930px; --l: 300px; --t: 28px; --r: -120deg; --col: var(--cyan); }
.w10 { --x: 700px;  --y: 930px; --l: 260px; --t: 22px; --r: -110deg; --col: var(--pink); }
.w11 { --x: 300px;  --y: 910px; --l: 700px; --t: 8px;  --r: -20deg;  --col: #fff; opacity: 0.7; }
.w12 { --x: 840px;  --y: -10px; --l: 290px; --t: 20px; --r: 137deg;  --col: var(--cyan); }
.w13 { --x: -10px;  --y: 104px; --l: 270px; --t: 18px; --r: 24deg;   --col: var(--cyan); }
.w14 { --x: -10px;  --y: 138px; --l: 160px; --t: 10px; --r: 24deg;   --col: var(--pink); }

/* 細いストライプ帯（右上） */
.hero-stripes {
  position: absolute;
  right: -4%; top: 14%; width: 36%; height: 34%;
  background: repeating-linear-gradient(-32deg, rgba(255,255,255,0.14) 0 2px, transparent 2px 14px);
  clip-path: polygon(30% 0, 100% 0, 100% 40%, 0 100%);
}
/* 巨大な背景タイポ（切り抜かれる） */
.hero-bigtype {
  position: absolute;
  left: -2%; bottom: -6%;
  font-family: var(--font-display);
  font-size: clamp(200px, 30vw, 460px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,0.14);
  transform: skewX(-8deg);
}
.hero-bigyen {
  position: absolute;
  right: 4%; top: 8%;
  font-family: var(--font-display);
  font-size: clamp(300px, 36vw, 560px);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 3px rgba(30,210,232,0.22);
  transform: rotate(-8deg);
}

/* タイトル：不整形な黒プレートに載せた 2 行 */
.hero-title {
  position: absolute;
  left: 4.5%; top: 150px;
  z-index: 3;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(56px, 6.2vw, 104px);
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: rotate(-3deg);
}
.hero-line { display: block; }
.hero-line-2 { margin-left: 0.55em; margin-top: -0.06em; }
.hero-plate {
  display: inline-block;
  position: relative;
  padding: 0.12em 0.32em 0.16em 0.3em;
  background: var(--ink);
  color: #fff;
  clip-path: polygon(0 6%, 99% 0, 100% 90%, 97% 100%, 1% 96%, 0 20%);
  transform: skewX(-6deg);
  text-shadow: 0.03em 0.03em 0 rgba(0,0,0,0.6);
}
.hero-line-2 .hero-plate { clip-path: polygon(1% 0, 100% 4%, 99% 100%, 0 94%); }
.hero-plate em {
  font-style: normal;
  color: var(--cyan);
  text-shadow: 0.04em 0.04em 0 var(--pink);
}

.hero-sub {
  position: absolute;
  left: 8%; top: 470px;
  z-index: 3;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  transform: rotate(-2deg);
}
.hero-sub span {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  padding: 0.22em 0.7em;
  transform: skewX(-6deg);
}
.hero-sub span + span { margin-left: 0.15em; margin-top: 0.15em; }

.hero-cta {
  position: absolute;
  left: 8.5%; top: 570px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
.hero-cta .btn-shock { font-size: 1.3rem; padding: 0.6em 2.4em; box-shadow: 8px 8px 0 var(--ink); }
.hero-cta-note { font-size: 0.78rem; letter-spacing: 0.08em; color: #fff; font-weight: 700; margin-left: 0.4em; background: rgba(12,12,16,0.85); padding: 0.15em 0.7em; }

/* 巨大な金額（第二の主役） */
.hero-amount {
  position: absolute;
  left: 26%; bottom: -6px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  transform: rotate(-4deg);
}
.hero-amount-label {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.18em;
  background: #fff;
  color: var(--ink);
  padding: 0.15em 0.8em;
  align-self: flex-start;
  transform: skewX(-8deg);
  margin-left: 0.4em;
}
.hero-amount-label small { font-family: var(--font-display); font-size: 0.72em; margin-left: 1em; letter-spacing: 0.05em; color: var(--pink-deep); }
.hero-amount-num {
  font-family: var(--font-display);
  font-size: clamp(80px, 8vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--cyan);
  paint-order: stroke fill;
  -webkit-text-stroke: 0;
  text-shadow:
    -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink), 4px 4px 0 var(--ink),
    0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink),
    12px 12px 0 var(--pink);
  font-variant-numeric: tabular-nums;
}
.hero-amount-note {
  margin-top: 0.4rem;
  margin-left: 0.6em;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: #fff;
  background: var(--pink);
  padding: 0.1em 0.9em;
  align-self: flex-start;
  transform: skewX(-8deg);
}

.hero-phone {
  position: absolute;
  right: 17%; top: 78px;
  z-index: 4;
  width: 330px;
  transform: rotate(7deg);
}
.hero-phone .phone-note { transform: translateX(-50%) rotate(-7deg); bottom: -2.4em; }

.hero-hand-v {
  position: absolute;
  right: 4%; top: 100px;
  z-index: 3;
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  transform: rotate(6deg);
}
.hero-hand-l {
  position: absolute;
  left: 2.5%; bottom: 60px;
  z-index: 3;
  font-size: clamp(2rem, 2.8vw, 2.7rem);
  transform: rotate(-9deg);
}
.hero-kicker {
  position: absolute;
  right: 3%; bottom: 40px;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.3em;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
  text-align: right;
  transform: rotate(6deg);
}

/* ==========================================================================
   SECTION 01
   ========================================================================== */
.s01 {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  min-height: 1200px;
  margin-top: -96px;
  padding: 140px 0 150px;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 0 100%);
}
.s01-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s01-tone {
  position: absolute;
  background-image: radial-gradient(circle, rgba(12,12,16,0.5) 1.4px, transparent 1.9px);
  background-size: 8px 8px;
}
.s01-tone-a {
  left: -4%; top: 0; width: 46%; height: 70%;
  -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(160deg, #000 0%, transparent 60%);
  opacity: 0.55;
}
.s01-tone-b {
  right: -6%; bottom: -6%; width: 50%; height: 60%;
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(ellipse at 90% 100%, #000 10%, transparent 65%);
  mask-image: radial-gradient(ellipse at 90% 100%, #000 10%, transparent 65%);
  opacity: 0.45;
}
/* Section 01 の光痕 */
.s1 { --x: -10px;  --y: 560px;  --l: 260px; --t: 22px; --r: -30deg; --col: var(--cyan); }
.s2 { --x: -10px;  --y: 620px;  --l: 200px; --t: 14px; --r: -30deg; --col: var(--pink); }
.s3 { --x: -10px;  --y: 1150px; --l: 260px; --t: 20px; --r: -15deg; --col: var(--cyan); }
.s4 { --x: 1450px; --y: 120px;  --l: 520px; --t: 34px; --r: 160deg; --col: var(--pink); }
.s5 { --x: 1450px; --y: 220px;  --l: 380px; --t: 22px; --r: 165deg; --col: var(--cyan); }
.s6 { --x: 1450px; --y: 820px;  --l: 420px; --t: 30px; --r: 200deg; --col: var(--pink); }
.s7 { --x: 1450px; --y: 1000px; --l: 300px; --t: 16px; --r: 195deg; --col: var(--cyan); }
.s8 { --x: 600px;  --y: 1330px; --l: 700px; --t: 10px; --r: -20deg; --col: #fff; opacity: 0.8; }
.s01-slash { position: absolute; }
.s01-slash-ink {
  right: -2%; top: -2%; width: 40%; height: 40%;
  background: var(--ink);
  clip-path: polygon(74% 0, 100% 0, 100% 62%, 20% 100%, 0 100%);
  opacity: 1;
}
.s01-slash-ink::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.35) 1.2px, transparent 1.7px);
  background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(150deg, #000 30%, transparent 80%);
  mask-image: linear-gradient(150deg, #000 30%, transparent 80%);
}
.s01-bignum {
  position: absolute;
  right: 2%; bottom: -8%;
  font-family: var(--font-display);
  font-size: clamp(240px, 32vw, 520px);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 3px rgba(12,12,16,0.12);
  transform: skewX(-8deg);
}

.s01-plate {
  position: absolute;
  left: 3%; top: 150px;
  z-index: 6;
}
.s01-lead {
  position: absolute;
  left: calc(3% + 126px); top: 272px;
  z-index: 5;
  max-width: 560px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: #3a3944;
}

.s01-paper {
  position: absolute;
  left: 5%; top: 440px;
  z-index: 3;
  width: min(56%, 820px);
  transform: rotate(-1.6deg);
}

.s01-bubble {
  position: absolute;
  left: 0.5%; top: 810px;
  z-index: 7;
  width: 310px;
  transform: rotate(-7deg);
}

.s01-phone {
  position: absolute;
  right: 12%; top: 250px;
  z-index: 5;
  width: 322px;
  transform: rotate(4.5deg);
}
.s01-phone .phone-note { color: rgba(12,12,16,0.65); bottom: -2.2em; transform: translateX(-50%) rotate(-4.5deg); }

.s01-hand {
  position: absolute;
  right: 4%; top: 930px;
  z-index: 6;
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  color: var(--ink);
  text-shadow:
    -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff,
    0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff;
  transform: rotate(-6deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
}
.s01-hand .crown { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #fff); }

/* ==========================================================================
   動き（控えめ）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .chart-bar { animation: bar-rise 0.7s cubic-bezier(.2,.9,.2,1.05) both; animation-delay: calc(var(--i) * 45ms + 200ms); }
  @keyframes bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .btn-shock:active { transform: skewX(-6deg) scale(0.97); }
}

/* ==========================================================================
   RESPONSIVE — 1200px 以下：少し詰める
   ========================================================================== */
@media (max-width: 1200px) {
  .hero-phone { right: 18%; width: 290px; }
  .hero-amount { left: 24%; }
  .hero-hand-v { right: 3%; }
  .s01-paper { width: 58%; }
  .s01-phone { right: 6%; width: 290px; }
}

/* ==========================================================================
   RESPONSIVE — 900px 以下：フロー配置に組み替える
   Hero：タイトル → 金額 → 手機（＋縦書き）→ CTA
   ========================================================================== */
@media (max-width: 900px) {
  .nav { padding: 14px 16px 0; gap: 1rem; }
  .nav-brand img { width: 150px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; font-size: 0.74rem; padding: 0.4em 1.1em; }

  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 96px 16px 120px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-title, .hero-sub, .hero-cta, .hero-amount, .hero-phone, .hero-hand-v, .hero-hand-l, .hero-kicker {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
  }
  .hero-title { font-size: clamp(34px, 10vw, 60px); transform: rotate(-2deg); margin: 14px 0 0 2px; }
  .hero-line-2 { margin-left: 0.3em; }
  .hero-sub { margin: 26px 0 0 4px; font-size: 0.95rem; }
  .hero-sub span + span { margin-left: 0; margin-top: 0.3em; }
  .hero-sub span { display: table; }

  .hero-amount { margin: 34px 0 0 2px; transform: rotate(-3deg); order: 3; }
  .hero-amount-num { font-size: clamp(44px, 12.4vw, 80px); text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
    0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink),
    8px 8px 0 var(--pink); }

  /* 手機と縦書きコピーを横に並べる */
  .hero-phone { order: 4; width: 210px; margin: 44px 0 0 12px; transform: rotate(5deg); align-self: flex-start; }
  .hero-phone .phone-note { transform: translateX(-50%) rotate(-5deg); }
  .hero-hand-v { order: 4; align-self: flex-end; margin: -430px 6px 0 0; font-size: 1.6rem; transform: rotate(6deg); }
  .hero-hand-l { order: 5; margin: 40px 0 0 6px; font-size: 1.9rem; transform: rotate(-7deg); }
  .hero-cta { order: 6; margin: 34px 0 0 4px; }
  .hero-cta .btn-shock { font-size: 1.1rem; padding: 0.6em 1.8em; box-shadow: 6px 6px 0 var(--ink); }
  .hero-kicker { order: 7; margin: 30px 0 0 auto; font-size: 0.7rem; transform: none; }

  /* 手機版はテクスチャを 50〜70% 減らす */
  .hero-bg { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%); }
  .hero-tone-r, .hero-stripes { display: none; }
  .w2, .w3, .w5, .w6, .w10, .w11, .w12, .w14 { display: none; }
  .w13 { --x: -10px; --y: 80px; --l: 150px; --t: 12px; --r: 24deg; }
  .w1 { --x: -10px; --y: 62%; --l: 170px; --t: 18px; --r: -30deg; }
  .w4 { --x: -10px; --y: 66%; --l: 130px; --t: 12px; --r: -30deg; }
  .w7 { --x: calc(100% + 10px); --y: 52%; --l: 230px; --t: 22px; --r: 205deg; }
  .w8 { --x: calc(100% + 10px); --y: 57%; --l: 280px; --t: 26px; --r: 200deg; }
  .w9 { --x: 55%; --y: calc(100% + 10px); --l: 180px; --t: 20px; --r: -120deg; }
  .hero-tone-l { opacity: 0.3; }
  .hero-bigtype { font-size: 200px; bottom: 26%; left: -10%; -webkit-text-stroke-width: 1.5px; }
  .hero-bigyen { font-size: 280px; top: 20%; right: -14%; }

  /* Section 01 */
  .s01 {
    min-height: 0;
    margin-top: -48px;
    padding: 84px 16px 120px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%);
    display: flex;
    flex-direction: column;
  }
  .s01-plate, .s01-lead, .s01-paper, .s01-bubble, .s01-phone, .s01-hand {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
  }
  .s01-plate { margin: 0; align-self: flex-start; width: 100%; }
  .s01-lead { margin: 12px 0 0 6px; font-size: 0.9rem; max-width: none; }
  .s01-paper { width: auto; margin: 36px 4px 0 0; padding: 16px 12px 12px; transform: rotate(-1.2deg); box-shadow: 8px 10px 0 var(--ink); }
  .paper-total b { font-size: 1.2rem; }
  .s01-bubble { width: 220px; margin: -24px 0 0 -6px; transform: rotate(-6deg); align-self: flex-start; }
  .s01-phone { width: 220px; margin: 34px 0 0 20px; transform: rotate(4deg); }
  .s01-hand { margin: 60px 0 0 auto; font-size: 1.9rem; transform: rotate(-6deg); }

  .s01-tone-b, .s3, .s5, .s7, .s8 { display: none; }
  .s1 { --x: -10px; --y: 44%; --l: 150px; --t: 16px; --r: -30deg; }
  .s2 { --x: -10px; --y: 47%; --l: 110px; --t: 10px; --r: -30deg; }
  .s4 { --x: calc(100% + 10px); --y: 26%; --l: 260px; --t: 24px; --r: 160deg; }
  .s6 { --x: calc(100% + 10px); --y: 66%; --l: 260px; --t: 22px; --r: 200deg; }
  .s01-tone-a { opacity: 0.3; }
  .s01-slash-ink { width: 60%; height: 11%; }
  .s01-bignum { font-size: 220px; right: -6%; bottom: 2%; }

}

/* ==========================================================================
   SECTION 02 — ランキング（深い cyan/navy の演出段）
   ========================================================================== */
.s02 {
  position: relative;
  --plate-bg: #0F2A36;
  background: linear-gradient(160deg, #0F2A36 0%, #0C1F2C 55%, #0E1626 100%);
  color: #fff;
  min-height: 1160px;
  margin-top: -90px;
  padding: 150px 0 140px;
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 0 100%);
}
.s02-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s02-tone { position: absolute; background-image: radial-gradient(circle, rgba(255,255,255,0.5) 1.3px, transparent 1.8px); background-size: 9px 9px; }
.s02-tone-a { left: -4%; top: 0; width: 40%; height: 60%; opacity: .35; -webkit-mask-image: linear-gradient(160deg, #000, transparent 65%); mask-image: linear-gradient(160deg, #000, transparent 65%); }
.s02-tone-b { right: -4%; bottom: 0; width: 50%; height: 70%; opacity: .3; background-size: 7px 7px; -webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 100% 100%, #000 10%, transparent 65%); }
.s2w1 { --x: -10px;  --y: 420px;  --l: 300px; --t: 22px; --r: -30deg; --col: var(--cyan); }
.s2w2 { --x: -10px;  --y: 470px;  --l: 200px; --t: 12px; --r: -30deg; --col: var(--pink); }
.s2w3 { --x: 1450px; --y: 260px;  --l: 520px; --t: 30px; --r: 165deg; --col: var(--pink); }
.s2w4 { --x: 1450px; --y: 1020px; --l: 420px; --t: 24px; --r: 200deg; --col: var(--cyan); }
.s2w5 { --x: 700px;  --y: 1250px; --l: 760px; --t: 8px;  --r: -18deg; --col: #fff; opacity: .6; }
.s02-bignum {
  position: absolute; left: -2%; bottom: -6%;
  font-family: var(--font-display); font-size: clamp(240px, 32vw, 520px); line-height: .9;
  color: transparent; -webkit-text-stroke: 3px rgba(255,255,255,0.08); transform: skewX(-8deg);
}
.s02-plate { position: absolute; left: 3%; top: 150px; z-index: 6; }
.s02-lead {
  position: absolute; left: calc(3% + 126px); top: 262px; z-index: 5;
  max-width: 560px; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; line-height: 1.85; letter-spacing: .02em; color: rgba(255,255,255,0.85);
}
.s02-paper { position: absolute; left: 5%; top: 400px; z-index: 4; width: min(52%, 760px); transform: rotate(-1.4deg); color: var(--ink); }
.rank { list-style: none; margin: 8px 0 0; padding: 0; }
.rank-item {
  display: grid; grid-template-columns: 2.4em 40px 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 12px 6px 10px; border-bottom: 2px solid #E6E8EC;
}
.rank-item:last-child { border-bottom: 0; }
.rank-no { grid-column: 1; grid-row: 1 / span 2; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--pink); transform: skewX(-8deg); text-align: center; }
.rank-icon { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 40px; background: linear-gradient(135deg, #DCE0E6, #B9BFC9); clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }
.rank-name { grid-column: 3; grid-row: 1; font-family: var(--font-head); font-weight: 900; font-size: 1.05rem; line-height: 1.2; }
.rank-name small { display: block; font-weight: 700; font-size: .72rem; color: #7a7884; letter-spacing: .06em; margin-top: 2px; }
.rank-amt { grid-column: 4; grid-row: 1 / span 2; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rank-bar { grid-column: 3; grid-row: 2; height: 6px; width: var(--w); background: var(--cyan); margin-top: 6px; }
.rank-top .rank-no { font-size: 3rem; }
.rank-top .rank-name { font-size: 1.25rem; }
.rank-top .rank-amt { font-size: 1.7rem; color: var(--pink); }
.rank-top .rank-bar { background: var(--pink); height: 8px; }
.s02-quote { position: absolute; right: 4%; top: 700px; z-index: 6; transform: rotate(-4deg); }
.s02-phone { position: absolute; right: -2%; top: 200px; z-index: 5; width: 320px; transform: rotate(6deg); }
.s02-phone .phone-note { transform: translateX(-50%) rotate(-6deg); }
.s02-bubble { position: absolute; left: 1%; top: 870px; z-index: 7; width: 290px; transform: rotate(-6deg); }
.s02-subs {
  position: absolute; right: 6%; bottom: 150px; z-index: 6; max-width: 360px;
  border-left: 6px solid var(--violet); padding: 6px 0 6px 18px;
}
.s02-subs-tag { font-family: var(--font-display); font-size: .7rem; letter-spacing: .3em; color: var(--violet); }
.s02-subs-title { font-family: var(--font-head); font-weight: 900; font-size: 1.4rem; line-height: 1.3; margin: 4px 0 6px; }
.s02-subs-body { font-size: .9rem; line-height: 1.8; color: rgba(255,255,255,0.8); }

/* ==========================================================================
   SECTION 03 — シェアカード（墨底）
   ========================================================================== */
.s03 {
  position: relative;
  --plate-bg: #101018;
  background: #101018;
  color: #fff;
  min-height: 1120px;
  margin-top: -90px;
  padding: 150px 0 140px;
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 0 100%);
}
.s03-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s03-tone { position: absolute; background-image: radial-gradient(circle, rgba(255,255,255,0.5) 1.3px, transparent 1.8px); background-size: 8px 8px; }
.s03-tone-a { right: -6%; top: -4%; width: 48%; height: 60%; opacity: .35; -webkit-mask-image: radial-gradient(ellipse at 100% 0, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 100% 0, #000 10%, transparent 65%); }
.s03-tone-b { left: -6%; bottom: -4%; width: 44%; height: 50%; opacity: .3; -webkit-mask-image: linear-gradient(20deg, #000, transparent 70%); mask-image: linear-gradient(20deg, #000, transparent 70%); }
.s3w1 { --x: -10px;  --y: 600px; --l: 320px; --t: 24px; --r: -32deg; --col: var(--pink); }
.s3w2 { --x: -10px;  --y: 660px; --l: 220px; --t: 12px; --r: -32deg; --col: var(--cyan); }
.s3w3 { --x: 1450px; --y: 180px; --l: 520px; --t: 28px; --r: 162deg; --col: var(--cyan); }
.s3w4 { --x: 1450px; --y: 900px; --l: 460px; --t: 26px; --r: 200deg; --col: var(--pink); }
.s03-bigtype {
  position: absolute; right: -3%; bottom: -4%;
  font-family: var(--font-display); font-size: clamp(200px, 26vw, 420px); line-height: .9; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.1); transform: skewX(-8deg);
}
.s03-plate { position: absolute; left: 3%; top: 150px; z-index: 6; }
.s03-lead {
  position: absolute; left: calc(3% + 126px); top: 268px; z-index: 5;
  max-width: 600px; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; line-height: 1.85; letter-spacing: .02em; color: rgba(255,255,255,0.85);
}
.cards { position: absolute; left: 6%; top: 400px; z-index: 4; width: 62%; height: 560px; }
.card { position: absolute; margin: 0; box-shadow: 14px 16px 0 rgba(0,0,0,0.85); border: 3px solid var(--ink); background: var(--ink); }
.card img { display: block; width: 100%; height: auto; }
.card-1 { left: 0; top: 70px; width: 300px; transform: rotate(-6deg); z-index: 1; }
.card-2 { left: 250px; top: 0; width: 280px; transform: rotate(1deg); z-index: 2; }
.card-3 { left: 520px; top: 40px; width: 250px; transform: rotate(6deg); z-index: 3; }
.s03-note { position: absolute; left: 6%; top: 990px; z-index: 5; font-size: .74rem; letter-spacing: .12em; color: rgba(255,255,255,0.65); }
.s03-hand { position: absolute; right: 6%; top: 660px; z-index: 6; font-size: clamp(2.2rem, 3.4vw, 3.4rem); transform: rotate(-7deg); }
.s03-phone { position: absolute; right: 9%; top: 150px; z-index: 5; width: 250px; transform: rotate(8deg); }
.s03-phone .phone-note { transform: translateX(-50%) rotate(-8deg); }

/* ==========================================================================
   SECTION 04 — はじめかた（紙底）
   ========================================================================== */
.s04 {
  position: relative;
  --plate-bg: var(--paper);
  background: var(--paper);
  color: var(--ink);
  min-height: 1080px;
  margin-top: -90px;
  padding: 150px 0 140px;
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 0 100%);
}
.s04-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s04-tone { position: absolute; right: -6%; top: 0; width: 46%; height: 70%; background-image: radial-gradient(circle, rgba(12,12,16,0.45) 1.4px, transparent 1.9px); background-size: 8px 8px; opacity: .5; -webkit-mask-image: linear-gradient(200deg, #000, transparent 65%); mask-image: linear-gradient(200deg, #000, transparent 65%); }
.s4w1 { --x: -10px;  --y: 700px;  --l: 360px; --t: 26px; --r: -30deg; --col: var(--cyan); }
.s4w2 { --x: 1450px; --y: 320px;  --l: 480px; --t: 26px; --r: 165deg; --col: var(--pink); }
.s4w3 { --x: 1450px; --y: 900px;  --l: 380px; --t: 18px; --r: 200deg; --col: var(--cyan); }
.s04-bignum {
  position: absolute; right: 2%; bottom: -8%;
  font-family: var(--font-display); font-size: clamp(240px, 32vw, 520px); line-height: .9;
  color: transparent; -webkit-text-stroke: 3px rgba(12,12,16,0.1); transform: skewX(-8deg);
}
.s04-plate { position: absolute; left: 3%; top: 150px; z-index: 6; }
.s04-lead { position: absolute; left: calc(3% + 126px); top: 268px; z-index: 5; font-family: var(--font-head); font-weight: 700; font-size: .95rem; letter-spacing: .02em; color: #3a3944; }
.steps { position: absolute; left: 6%; top: 380px; z-index: 5; width: 58%; list-style: none; margin: 0; padding: 0; }
.step { display: flex; align-items: flex-start; gap: 26px; }
.step-no {
  flex: none; width: 1.1em; font-family: var(--font-display); font-size: clamp(4rem, 7vw, 7rem); line-height: .9;
  color: var(--pink); transform: skewX(-8deg);
  text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 8px 8px 0 var(--cyan);
}
.step-2 .step-no { color: var(--cyan); text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 8px 8px 0 var(--pink); }
.step-3 .step-no { color: #fff; }
.step-body { padding-top: .6em; }
.step-body h3 { margin: 0 0 .3em; font-family: var(--font-head); font-weight: 900; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.3; display: inline-block; background: var(--ink); color: #fff; padding: .12em .6em .16em; transform: skewX(-6deg); }
.step-body p { margin: 0; max-width: 520px; font-size: .98rem; line-height: 1.85; color: #3a3944; }
.step-2 { margin-left: 70px; }
.step-3 { margin-left: 140px; }
.step-arrow { color: var(--cyan); margin: 6px 0 6px 90px; }
.step-arrow svg { display: block; filter: drop-shadow(3px 3px 0 var(--ink)); }
.s04-note { position: absolute; left: 6%; bottom: 150px; z-index: 5; font-size: .86rem; line-height: 1.8; color: #55525E; }
.s04-hand { position: absolute; right: 6%; top: 560px; z-index: 6; font-size: clamp(1.8rem, 2.6vw, 2.6rem); transform: rotate(-8deg); text-align: right; }

/* ==========================================================================
   SECTION 05 — プライバシー（墨底の大きなシーン）
   ========================================================================== */
.s05 {
  position: relative;
  --plate-bg: #12141E;
  background: #12141E;
  color: #fff;
  min-height: 1000px;
  margin-top: -90px;
  padding: 150px 0 140px;
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 0 100%);
}
.s05-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s05-tone { position: absolute; background-image: radial-gradient(circle, rgba(255,255,255,0.5) 1.3px, transparent 1.8px); background-size: 8px 8px; }
.s05-tone-a { right: -6%; top: 0; width: 50%; height: 70%; opacity: .4; -webkit-mask-image: radial-gradient(ellipse at 100% 20%, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 100% 20%, #000 10%, transparent 65%); }
.s05-tone-b { left: -6%; bottom: -6%; width: 40%; height: 50%; opacity: .25; -webkit-mask-image: linear-gradient(30deg, #000, transparent 70%); mask-image: linear-gradient(30deg, #000, transparent 70%); }
.s5w1 { --x: -10px;  --y: 760px; --l: 340px; --t: 24px; --r: -30deg; --col: var(--pink); }
.s5w2 { --x: 1450px; --y: 220px; --l: 480px; --t: 26px; --r: 165deg; --col: var(--cyan); }
.s5w3 { --x: 1450px; --y: 860px; --l: 380px; --t: 20px; --r: 200deg; --col: var(--pink); }
.s05-bignum {
  position: absolute; left: -2%; bottom: -8%;
  font-family: var(--font-display); font-size: clamp(240px, 32vw, 520px); line-height: .9;
  color: transparent; -webkit-text-stroke: 3px rgba(255,255,255,0.07); transform: skewX(-8deg);
}
.s05-plate { position: absolute; left: 3%; top: 150px; z-index: 6; }
.s05-big {
  position: absolute; left: 6%; top: 300px; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--font-head); font-weight: 900; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.05; letter-spacing: -.02em;
  transform: rotate(-2deg);
}
.s05-big span { display: inline-block; padding: .06em .3em .1em; background: #fff; color: var(--ink); transform: skewX(-6deg); clip-path: polygon(0 5%, 100% 0, 99% 100%, 1% 95%); }
.s05-big span + span { margin-top: .1em; margin-left: .7em; }
.s05-body { position: absolute; left: 6.5%; top: 560px; z-index: 5; max-width: 520px; font-size: 1rem; line-height: 1.9; color: rgba(255,255,255,0.85); }
.lock { position: absolute; right: 8%; top: 240px; z-index: 4; width: 320px; }
.lock svg { display: block; width: 100%; height: auto; overflow: visible; }
.lock-chain ellipse { fill: none; stroke: #fff; stroke-width: 12; }
.lock-shackle { fill: none; stroke: #fff; stroke-width: 26; stroke-linecap: round; }
.lock-body { fill: var(--cyan); stroke: #fff; stroke-width: 10; }
.lock-hole { fill: var(--ink); }
.facts { position: absolute; left: 6.5%; bottom: 160px; z-index: 5; width: 86%; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.facts li { font-size: .82rem; line-height: 1.7; color: rgba(255,255,255,0.75); border-top: 3px solid var(--cyan); padding-top: 10px; }
.facts li b { display: block; font-family: var(--font-head); font-weight: 900; font-size: 1rem; color: #fff; margin-bottom: 4px; }
.s05-hand { position: absolute; right: 5%; top: 640px; z-index: 6; font-size: clamp(1.8rem, 2.6vw, 2.6rem); transform: rotate(-6deg); text-align: right; }

/* ==========================================================================
   SECTION 06 — FAQ（紙底）
   ========================================================================== */
.s06 {
  position: relative;
  --plate-bg: var(--paper);
  background: var(--paper);
  color: var(--ink);
  min-height: 960px;
  margin-top: -90px;
  padding: 150px 0 140px;
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 90px), 0 100%);
}
.s06-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.s06-tone { position: absolute; left: -6%; top: 10%; width: 46%; height: 80%; background-image: radial-gradient(circle, rgba(12,12,16,0.45) 1.4px, transparent 1.9px); background-size: 8px 8px; opacity: .45; -webkit-mask-image: linear-gradient(160deg, #000, transparent 65%); mask-image: linear-gradient(160deg, #000, transparent 65%); }
.s6w1 { --x: -10px;  --y: 640px; --l: 320px; --t: 22px; --r: -32deg; --col: var(--cyan); }
.s6w2 { --x: 1450px; --y: 260px; --l: 440px; --t: 24px; --r: 165deg; --col: var(--pink); }
.s6w3 { --x: 1450px; --y: 820px; --l: 320px; --t: 16px; --r: 200deg; --col: var(--cyan); }
.s06-plate { position: absolute; left: 3%; top: 150px; z-index: 6; }
.s06-big {
  position: absolute; left: 5%; top: 300px; z-index: 4;
  display: flex; flex-direction: column; line-height: .85;
  font-family: var(--font-display); font-size: clamp(120px, 15vw, 220px);
  color: transparent; -webkit-text-stroke: 3px var(--ink); transform: skewX(-8deg);
}
.s06-big span:last-child { color: var(--cyan); -webkit-text-stroke: 3px var(--ink); margin-left: .2em; text-shadow: 10px 10px 0 var(--ink); }
.faq { position: absolute; right: 8%; top: 300px; z-index: 5; width: 46%; max-width: 620px; }
.qa { border: 3px solid var(--ink); background: #fff; margin-bottom: 12px; box-shadow: 6px 6px 0 var(--ink); }
.qa summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 18px; font-family: var(--font-head); font-weight: 900; font-size: 1rem; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 1.3rem; color: var(--pink); }
.qa[open] summary::after { content: "−"; }
.qa p { margin: 0; padding: 0 18px 16px; font-size: .92rem; line-height: 1.8; color: #3a3944; }
.s06-hand { position: absolute; left: 6%; bottom: 190px; z-index: 6; font-size: clamp(1.8rem, 2.6vw, 2.6rem); color: var(--ink); transform: rotate(-6deg);
  text-shadow: -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff, 0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff; }

/* ==========================================================================
   FINAL CTA — 第二の山場
   ========================================================================== */
.cta {
  position: relative;
  background: var(--navy);
  color: #fff;
  min-height: 900px;
  margin-top: -90px;
  padding: 170px 0 120px;
  overflow: hidden;
  isolation: isolate;
}
.cta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta-tone { position: absolute; background-image: radial-gradient(circle, rgba(255,255,255,0.55) 1.3px, transparent 1.8px); background-size: 9px 9px; }
.cta-tone-a { left: -6%; top: -4%; width: 44%; height: 60%; opacity: .4; -webkit-mask-image: linear-gradient(160deg, #000, transparent 65%); mask-image: linear-gradient(160deg, #000, transparent 65%); }
.cta-tone-b { right: -6%; bottom: -4%; width: 50%; height: 70%; opacity: .35; background-size: 7px 7px; -webkit-mask-image: radial-gradient(ellipse at 100% 100%, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 100% 100%, #000 10%, transparent 65%); }
.cw1 { --x: -10px;  --y: 200px; --l: 420px; --t: 30px; --r: -28deg; --col: var(--cyan); }
.cw2 { --x: -10px;  --y: 260px; --l: 300px; --t: 16px; --r: -28deg; --col: var(--pink); }
.cw3 { --x: 1450px; --y: 160px; --l: 560px; --t: 32px; --r: 162deg; --col: var(--pink); }
.cw4 { --x: 1450px; --y: 240px; --l: 380px; --t: 14px; --r: 162deg; --col: var(--cyan); }
.cw5 { --x: 1450px; --y: 760px; --l: 520px; --t: 30px; --r: 200deg; --col: var(--cyan); }
.cw6 { --x: 500px;  --y: 930px; --l: 900px; --t: 8px;  --r: -18deg; --col: #fff; opacity: .6; }
.cta-bigyen {
  position: absolute; right: 6%; top: -4%;
  font-family: var(--font-display); font-size: clamp(320px, 40vw, 640px); line-height: .9;
  color: transparent; -webkit-text-stroke: 3px rgba(30,210,232,0.2); transform: rotate(-8deg);
}
.cta-title {
  position: relative; z-index: 3;
  margin: 0 0 0 6%;
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: clamp(2.6rem, 6vw, 5.6rem); line-height: 1.05;
  transform: rotate(-3deg);
}
.cta-l1 { margin-left: .2em; }
.cta-l2 { margin-left: 1.4em; }
.cta-l3 { margin-left: 3.2em; color: var(--cyan); }
.cta-sub {
  position: relative; z-index: 3; margin: 56px 0 0 12%;
  display: flex; flex-wrap: wrap; gap: .4em;
  font-family: var(--font-head); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.3rem);
}
.cta-sub span { display: inline-block; background: var(--ink); color: #fff; padding: .2em .7em; transform: skewX(-6deg); }
.cta-action { position: relative; z-index: 3; margin: 40px 0 0 12%; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.cta-action .btn-shock { font-size: 1.4rem; padding: .65em 2.6em; box-shadow: 8px 8px 0 var(--ink); }
.cta-note { font-size: .78rem; letter-spacing: .08em; font-weight: 700; color: #fff; background: rgba(12,12,16,0.85); padding: .15em .7em; margin-left: .4em; }
.cta-hand { position: absolute; right: 7%; bottom: 170px; z-index: 3; font-size: clamp(1.6rem, 2.4vw, 2.4rem); text-align: right; transform: rotate(6deg); }
.cta-wordmark { position: absolute; left: 6%; bottom: 60px; z-index: 3; width: 260px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; background: var(--ink); color: rgba(255,255,255,0.7); padding: 56px 6% 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; font-size: .82rem; letter-spacing: .06em; }
.footer-wordmark { width: 180px; height: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.4rem; font-family: var(--font-head); font-weight: 700; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--cyan); }
.footer-meta { flex-basis: 100%; margin: 0; line-height: 1.9; }

/* ==========================================================================
   RESPONSIVE（900px 以下）— 02〜06・CTA をフロー配置に
   ========================================================================== */
@media (max-width: 1200px) {
  .s02-paper { width: 56%; }
  .s02-phone { width: 280px; right: -4%; }
  .s02-quote { right: 2%; }
  .cards { width: 66%; }
  .card-3 { left: 470px; }
  .s03-phone { right: 3%; }
  .faq { width: 50%; right: 4%; }
}
@media (max-width: 900px) {
  .s02, .s03, .s04, .s05, .s06 {
    min-height: 0; margin-top: -44px; padding: 84px 16px 110px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%);
    display: flex; flex-direction: column;
  }
  .cta { min-height: 0; margin-top: -44px; padding: 110px 16px 90px; display: flex; flex-direction: column; }
  .s02-plate, .s02-lead, .s02-paper, .s02-quote, .s02-phone, .s02-bubble, .s02-subs,
  .s03-plate, .s03-lead, .cards, .s03-note, .s03-hand, .s03-phone,
  .s04-plate, .s04-lead, .steps, .s04-note, .s04-hand,
  .s05-plate, .s05-big, .s05-body, .lock, .facts, .s05-hand,
  .s06-plate, .s06-big, .faq, .s06-hand,
  .cta-title, .cta-sub, .cta-action, .cta-hand, .cta-wordmark {
    position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: none; margin: 0;
  }
  .s02-plate, .s03-plate, .s04-plate, .s05-plate, .s06-plate { width: 100%; }
  .s02-lead, .s03-lead, .s04-lead { margin: 12px 0 0 6px; font-size: .9rem; }
  .s02-paper { margin: 30px 4px 0 0; padding: 14px 12px 10px; transform: rotate(-1deg); box-shadow: 8px 10px 0 var(--ink); }
  .rank-item { grid-template-columns: 2em 32px 1fr auto; column-gap: 10px; }
  .rank-icon { width: 32px; height: 32px; }
  .rank-name { font-size: .95rem; } .rank-top .rank-name { font-size: 1.05rem; }
  .rank-amt { font-size: 1.1rem; } .rank-top .rank-amt { font-size: 1.35rem; }
  .s02-quote { margin: 40px 0 0 0; transform: rotate(-3deg); }
  .gquote-line { font-size: 1.6rem; }
  .s02-phone { width: 220px; margin: 40px 0 0 auto; transform: rotate(5deg); }
  .s02-bubble { width: 220px; margin: -20px 0 0 -6px; transform: rotate(-6deg); align-self: flex-start; }
  .s02-subs { margin: 40px 0 0 0; max-width: none; }
  .s2w2, .s2w5 { display: none; }
  .s2w1 { --x: -10px; --y: 30%; --l: 180px; --t: 16px; }
  .s2w3 { --x: calc(100% + 10px); --y: 20%; --l: 260px; --t: 20px; }
  .s2w4 { --x: calc(100% + 10px); --y: 70%; --l: 220px; --t: 16px; }
  .s02-bignum { font-size: 220px; }

  .cards { height: auto; display: flex; flex-direction: column; align-items: center; gap: 26px; margin: 36px 0 0; }
  .card { position: relative; left: auto; top: auto; width: 230px; }
  .card-1 { transform: rotate(-5deg); } .card-2 { transform: rotate(3deg); } .card-3 { transform: rotate(-4deg); width: 200px; }
  .s03-note { margin: 22px 0 0; text-align: center; }
  .s03-hand { margin: 34px 0 0 auto; font-size: 1.9rem; transform: rotate(-6deg); }
  .s03-phone { width: 220px; margin: 34px auto 0 12px; transform: rotate(6deg); }
  .s3w2 { display: none; }
  .s3w1 { --x: -10px; --y: 40%; --l: 200px; --t: 16px; }
  .s3w3 { --x: calc(100% + 10px); --y: 14%; --l: 260px; --t: 20px; }
  .s3w4 { --x: calc(100% + 10px); --y: 76%; --l: 220px; --t: 16px; }
  .s03-bigtype { font-size: 180px; }

  .steps { margin: 30px 0 0; }
  .step { gap: 14px; }
  .step-2, .step-3 { margin-left: 0; }
  .step-no { font-size: 3.4rem; }
  .step-body h3 { font-size: 1.15rem; }
  .step-body p { font-size: .92rem; }
  .step-arrow { margin: 4px 0 4px 10px; }
  .step-arrow svg { width: 40px; height: 40px; }
  .s04-note { margin: 30px 0 0; font-size: .82rem; }
  .s04-hand { margin: 30px 0 0 auto; font-size: 1.7rem; transform: rotate(-6deg); }
  .s4w1 { --x: -10px; --y: 60%; --l: 200px; --t: 16px; }
  .s4w2 { --x: calc(100% + 10px); --y: 18%; --l: 240px; --t: 18px; }
  .s4w3 { display: none; }
  .s04-bignum { font-size: 220px; }

  .s05-big { margin: 30px 0 0 4px; font-size: clamp(1.9rem, 8.6vw, 2.6rem); transform: rotate(-2deg); }
  .s05-body { margin: 26px 0 0 4px; font-size: .95rem; }
  .lock { width: 200px; margin: 30px auto 0; }
  .facts { grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 0 0; }
  .s05-hand { margin: 34px 0 0 auto; font-size: 1.7rem; transform: rotate(-5deg); }
  .s5w1 { --x: -10px; --y: 74%; --l: 200px; --t: 16px; }
  .s5w2 { --x: calc(100% + 10px); --y: 16%; --l: 240px; --t: 18px; }
  .s5w3 { display: none; }
  .s05-bignum { font-size: 220px; }

  .s06-big { margin: 24px 0 0 4px; font-size: clamp(52px, 17vw, 72px); flex-direction: row; gap: .25em; line-height: 1; }
  .s06-big span:last-child { margin-left: 0; text-shadow: 6px 6px 0 var(--ink); }
  .faq { margin: 26px 0 0; }
  .qa summary { font-size: .95rem; padding: 12px 40px 12px 14px; }
  .qa p { font-size: .88rem; padding: 0 14px 14px; }
  .s06-hand { margin: 30px 0 0 auto; font-size: 1.6rem; transform: rotate(-5deg); }
  .s6w1 { --x: -10px; --y: 30%; --l: 200px; --t: 16px; }
  .s6w2 { --x: calc(100% + 10px); --y: 60%; --l: 240px; --t: 18px; }
  .s6w3 { display: none; }

  .cta-title { margin: 0 0 0 2px; font-size: clamp(2rem, 9vw, 2.8rem); transform: rotate(-2deg); }
  .cta-l2 { margin-left: .6em; } .cta-l3 { margin-left: 1.4em; }
  .cta-sub { margin: 34px 0 0 2px; font-size: .95rem; }
  .cta-action { margin: 30px 0 0 2px; }
  .cta-action .btn-shock { font-size: 1.1rem; padding: .6em 1.8em; box-shadow: 6px 6px 0 var(--ink); }
  .cta-hand { margin: 40px 0 0 auto; font-size: 1.5rem; transform: rotate(4deg); }
  .cta-wordmark { width: 180px; margin: 40px 0 0; }
  .cw2, .cw4, .cw6 { display: none; }
  .cw1 { --x: -10px; --y: 12%; --l: 220px; --t: 18px; }
  .cw3 { --x: calc(100% + 10px); --y: 10%; --l: 260px; --t: 20px; }
  .cw5 { --x: calc(100% + 10px); --y: 70%; --l: 240px; --t: 18px; }
  .cta-bigyen { font-size: 300px; right: -20%; top: 30%; }

  .footer { padding: 40px 16px 36px; gap: 18px 24px; }
  .footer-wordmark { width: 150px; }
}

/* ==========================================================================
   Composition & Density Pass（2026-09-17）
   方針：art direction は維持。各シーンの比率・密度・重なりを Hero と同じ完成度へ。
   以降の宣言は上の各セクション定義を上書きする。
   ========================================================================== */

/* --- 共通：section title を約 18% 大きく（1.78 → 2.1 css px / unit） --- */
.plate { width: calc(var(--pw) * 2.1px); }
.s01-plate, .s02-plate, .s03-plate, .s04-plate, .s05-plate, .s06-plate { top: 140px; }
.s01-lead, .s02-lead, .s03-lead, .s04-lead { left: calc(3% + 150px); top: 300px; font-size: 1rem; }

/* --- Hero：金額の主張をやや抑え、CTA を大きく、縦書きを内側へ --- */
.hero-amount-num {
  font-size: clamp(76px, 7.2vw, 120px);
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
    0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink),
    8px 8px 0 var(--pink);
}
.hero-cta .btn-shock { font-size: 1.55rem; padding: 0.62em 2.6em; box-shadow: 9px 9px 0 var(--ink); }
.hero-hand-v { right: 7.5%; }

/* --- 01：グラフを主役に、手機をグラフへ食い込ませ、吹き出しが山を指す --- */
.s01 { min-height: 1180px; }
.s01-paper { left: 4%; top: 400px; width: min(68%, 980px); padding: 26px 30px 20px; transform: rotate(-1.4deg); }
.paper-title { font-size: 1.15rem; }
.paper-total b { font-size: 1.7rem; }
.s01-phone { right: 7%; top: 340px; width: 340px; transform: rotate(5deg); z-index: 5; }
.s01-bubble { left: 44%; top: 236px; width: 300px; transform: rotate(-4deg); z-index: 7; }
.s01-arrow { position: absolute; left: 63%; top: 372px; z-index: 7; width: 150px; height: auto; transform: rotate(8deg); }
.s01-hand { right: 5%; top: 960px; }
.s1, .s2, .s5 { display: none; }   /* 01 は光痕を減らす */

/* --- 02：ランキングを主役に。1 位を強調。コピーを 1.6 倍。手機は一部だけ見せる --- */
.s02 { min-height: 1120px; }
.s02-paper { left: 4%; top: 390px; width: min(62%, 900px); padding: 26px 30px 20px; }
.rank-item { padding: 14px 8px 12px; column-gap: 18px; grid-template-columns: 3em 44px 1fr auto; }
.rank-no { font-size: 2.6rem; }
.rank-name { font-size: 1.15rem; }
.rank-amt { font-size: 1.6rem; }
.rank-top { padding-top: 18px; padding-bottom: 16px; background: linear-gradient(90deg, rgba(255,46,99,0.08), transparent 70%); }
.rank-top .rank-no { font-size: 3.8rem; position: relative; }
.rank-top .rank-name { font-size: 1.4rem; }
.rank-top .rank-amt { font-size: 2.2rem; }
.rank-crown { position: absolute; left: 50%; top: -22px; transform: translateX(-50%) rotate(-10deg); }
.s02-quote { right: 3%; top: 700px; }
.s02 .gquote-line { font-size: clamp(2.6rem, 4.8vw, 4.6rem); }
.s02-phone { right: -9%; top: 200px; width: 320px; transform: rotate(7deg); z-index: 4; }
.s02-subs { right: 5%; bottom: 130px; }
.s2w1, .s2w2, .s2w4, .s2w5 { display: none; }   /* pink の主線だけ残す */

/* --- 03：シェアカードが主役（+35%・扇状・重ねる）。手機は脇役 --- */
.s03 { min-height: 1160px; }
.cards { left: 4%; top: 380px; width: 74%; height: 660px; }
.card-1 { left: 0; top: 90px; width: 410px; transform: rotate(-7deg); z-index: 1; }
.card-2 { left: 330px; top: 0; width: 380px; transform: rotate(1deg); z-index: 2; }
.card-3 { left: 690px; top: 70px; width: 340px; transform: rotate(7deg); z-index: 3; }
.s03-note { top: 1060px; }
.s03-phone { right: 3%; top: 170px; width: 190px; transform: rotate(9deg); z-index: 2; }
.s03-hand { right: 4%; top: 800px; font-size: clamp(2.6rem, 3.8vw, 3.8rem); }
.s3w3 { --x: 1450px; --y: 130px; --l: 380px; --t: 18px; --r: 160deg; --col: var(--cyan); }

/* --- 04：1→2→3 の旅路を大きく。矢印で斜めの経路 --- */
.s04 { min-height: 1060px; }
.steps { top: 390px; width: 64%; }
.step { gap: 18px; }
.step-no { font-size: clamp(5.6rem, 9.5vw, 9.6rem); width: 1em; }
.step-body { padding-top: .9em; }
.step-body h3 { font-size: clamp(1.5rem, 2.3vw, 2.1rem); }
.step-body p { font-size: 1.02rem; }
.step-2 { margin-left: 130px; }
.step-3 { margin-left: 260px; }
.step-arrow { margin: -6px 0 -2px 60px; width: 96px; transform: rotate(-38deg); }
.step-2 + .step-arrow { margin-left: 190px; }
.step-arrow svg { width: 96px; height: 96px; }
.s04-hand { right: 5%; top: 640px; font-size: clamp(2rem, 3vw, 3rem); }
.s04-bigarrow {
  position: absolute; right: -2%; bottom: -14%;
  font-family: var(--font-display); font-size: clamp(300px, 36vw, 560px); line-height: 1;
  color: transparent; -webkit-text-stroke: 3px rgba(12,12,16,0.1); transform: rotate(-38deg);
}

/* --- 05：メッセージ＋証拠 3 つ。文字を大きく --- */
.s05 { min-height: 960px; }
.s05-big { top: 290px; }
.s05-body { top: 570px; font-size: 1.06rem; max-width: 560px; }
.facts { grid-template-columns: repeat(3, 1fr); gap: 28px; width: 80%; bottom: 150px; }
.facts li { font-size: .98rem; line-height: 1.8; }
.facts li b { font-size: 1.25rem; }
.lock { right: 9%; top: 220px; width: 340px; }
.s05-hand { top: 640px; }

/* --- 06：左右の比率を 55:45 に。accordion を大きく。「?」のモチーフ --- */
.s06 { min-height: 980px; }
.s06-big { left: 4%; top: 290px; font-size: clamp(110px, 13vw, 190px); }
.faq { right: 4%; top: 290px; width: 54%; max-width: 720px; }
.qa { margin-bottom: 14px; }
.qa summary { font-size: 1.1rem; padding: 17px 48px 17px 20px; }
.qa p { font-size: 1rem; padding: 0 20px 18px; }
.s06-hand { bottom: 200px; }
.s06-bigq {
  position: absolute; left: 30%; bottom: -8%;
  font-family: var(--font-display); font-size: clamp(280px, 34vw, 520px); line-height: 1;
  color: transparent; -webkit-text-stroke: 3px rgba(12,12,16,0.09); transform: rotate(-10deg);
}

/* --- Final CTA：主標を 25% 大きく。「はじめよう。」を最強に --- */
.cta-title { font-size: clamp(3.2rem, 7.6vw, 7.2rem); }
.cta-l3 { font-size: 1.15em; margin-left: 2.8em; }
.cta-action .btn-shock { font-size: 1.65rem; padding: .66em 2.8em; }

/* ==========================================================================
   Mobile pass（900px 以下）：余白を詰め、文字は読める大きさを保ち、手機は 70vw 前後まで
   ========================================================================== */
@media (max-width: 900px) {
  .plate { width: 100%; }
  .s01-lead, .s02-lead, .s03-lead, .s04-lead { margin: 12px 0 0 6px; font-size: .95rem; }
  .hero { padding: 92px 16px 100px; }
  .hero-sub { font-size: 1rem; }
  .hero-amount-num { font-size: clamp(44px, 12.4vw, 80px); text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
    0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink),
    6px 6px 0 var(--pink); }
  .hero-phone { width: 66vw; max-width: 270px; }
  .hero-hand-v { margin-top: -520px; font-size: 1.6rem; right: auto; }
  .hero-cta .btn-shock { font-size: 1.2rem; }

  .s01, .s02, .s03, .s04, .s05, .s06 { padding: 64px 16px 84px; }
  .s01-paper, .s02-paper { width: auto; left: auto; top: auto; margin: 26px 4px 0 0; padding: 14px 12px 10px; }
  .s01-phone { width: 68vw; max-width: 280px; margin: 30px auto 0; transform: rotate(4deg); right: auto; top: auto; }
  .s01-bubble { left: auto; top: auto; width: 230px; margin: -18px 0 0 -4px; }
  .s01-arrow { display: none; }
  .s01-hand { margin: 40px 0 0 auto; right: auto; top: auto; }
  .s01-bignum { font-size: 180px; }

  .rank-item { grid-template-columns: 2.2em 34px 1fr auto; column-gap: 10px; padding: 12px 4px 10px; }
  .rank-no { font-size: 1.9rem; } .rank-top .rank-no { font-size: 2.6rem; }
  .rank-crown { width: 24px; height: 18px; top: -14px; }
  .rank-name { font-size: .95rem; } .rank-top .rank-name { font-size: 1.1rem; }
  .rank-amt { font-size: 1.15rem; } .rank-top .rank-amt { font-size: 1.5rem; }
  .s02-quote { margin: 36px 0 0; right: auto; top: auto; }
  .s02 .gquote-line { font-size: 1.75rem; }
  .s02-phone { width: 62vw; max-width: 250px; margin: 36px -30px 0 auto; right: auto; top: auto; }
  .s02-subs { margin: 36px 0 0; }
  .s2w3 { display: block; --x: calc(100% + 10px); --y: 18%; --l: 240px; --t: 18px; }

  .cards { left: auto; top: auto; width: auto; height: auto; margin: 32px 0 0; gap: 22px; }
  .card, .card-1, .card-2, .card-3 { left: auto; top: auto; width: 74vw; max-width: 290px; }
  .card-1 { transform: rotate(-6deg); } .card-2 { transform: rotate(3deg); margin-left: 30px; } .card-3 { transform: rotate(-5deg); width: 60vw; max-width: 240px; }
  .s03-note { top: auto; margin: 22px 0 0; }
  .s03-phone { width: 48vw; max-width: 190px; margin: 30px auto 0 10px; right: auto; top: auto; }
  .s03-hand { right: auto; top: auto; margin: 30px 0 0 auto; font-size: 2rem; }
  .s3w3 { --x: calc(100% + 10px); --y: 12%; --l: 220px; --t: 16px; }

  .steps { top: auto; width: auto; margin: 28px 0 0; }
  .step { gap: 14px; }
  .step-no { font-size: 4.4rem; }
  .step-body { padding-top: .5em; }
  .step-body h3 { font-size: 1.2rem; }
  .step-body p { font-size: .95rem; }
  .step-2, .step-3 { margin-left: 0; }
  .step-arrow, .step-2 + .step-arrow { margin: 2px 0 2px 14px; width: 48px; transform: none; }
  .step-arrow svg { width: 48px; height: 48px; }
  .s04-hand { right: auto; top: auto; margin: 30px 0 0 auto; font-size: 1.8rem; }
  .s04-bigarrow { font-size: 260px; right: -20%; bottom: 0; }

  .s05-big { top: auto; }
  .s05-body { top: auto; font-size: .98rem; }
  .lock { width: 56vw; max-width: 220px; margin: 30px auto 0; right: auto; top: auto; }
  .facts { grid-template-columns: 1fr; gap: 18px; width: auto; bottom: auto; margin: 32px 0 0; }
  .facts li { font-size: .95rem; } .facts li b { font-size: 1.1rem; }
  .s05-hand { top: auto; margin: 32px 0 0 auto; }

  .s06-big { left: auto; top: auto; font-size: clamp(52px, 17vw, 72px); }
  .faq { right: auto; top: auto; width: auto; max-width: none; margin: 24px 0 0; }
  .qa summary { font-size: 1rem; padding: 14px 42px 14px 14px; }
  .qa p { font-size: .92rem; padding: 0 14px 14px; }
  .s06-hand { bottom: auto; margin: 28px 0 0 auto; }
  .s06-bigq { font-size: 240px; left: 40%; bottom: -4%; }

  .cta { padding: 96px 16px 80px; }
  .cta-title { font-size: clamp(2.2rem, 9.6vw, 3rem); }
  .cta-l3 { margin-left: 1.2em; }
  .cta-action .btn-shock { font-size: 1.2rem; padding: .6em 1.9em; }
}

/* --- Composition pass の衝突修正 --- */
.s01-phone { right: 5%; top: 400px; width: 320px; }
.s01-hand { right: 6%; top: 880px; }
.s02-subs { right: auto; left: 5%; bottom: 96px; max-width: 420px; }
.s03 { min-height: 1200px; }
.s03-note { top: 1090px; }
.s04 { min-height: 1180px; }
.s04-note { bottom: 130px; }
.cta { min-height: 960px; }
.cta-wordmark { left: auto; right: 7%; bottom: 56px; }
.cta-hand { bottom: 190px; }
.s01-hand { right: auto; left: 44%; top: 985px; transform: rotate(-5deg); }

/* --- Mobile：composition pass で足した絶対座標を、フロー配置では無効にする --- */
@media (max-width: 900px) {
  .s01-plate, .s02-plate, .s03-plate, .s04-plate, .s05-plate, .s06-plate { top: auto; left: auto; }
  .s01-lead, .s02-lead, .s03-lead, .s04-lead { left: auto; top: auto; }
  .s01-hand { left: auto; top: auto; transform: rotate(-6deg); }
  .s01-phone { right: auto; top: auto; }
  .s02-subs { left: auto; bottom: auto; }
  .s03-note { top: auto; }
  .s04-note { bottom: auto; margin: 26px 0 0; }
  .cta-wordmark { right: auto; bottom: auto; }
  .cta-hand { bottom: auto; }
  .paper-head { flex-wrap: wrap; }
  .paper-title { font-size: 1rem; }
}
@media (max-width: 900px) { .cta-title { font-size: clamp(1.9rem, 8.4vw, 2.7rem); } }

/* --- 2026-09-17 夜：指摘対応 --- */
/* 1. グラフをアプリのホームカードと同じ様式に */
.paper-title { display: inline-flex; align-items: center; gap: .5em; font-size: 1.25rem; }
.paper-title small { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; font-size: .85rem; color: #55525E; letter-spacing: .02em; }
.paper-yen { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border: 2px solid #C9CBD2; border-radius: 50%; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-style: normal; font-weight: 700; font-size: .95rem; color: var(--ink); }
.paper-yoy { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--ink); }
.paper-yoy i { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--lemon); color: var(--ink); font-style: normal; font-weight: 900; }
.paper-yoy b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: 1.05rem; }
.chart-base { stroke: #E6E8EC; stroke-width: 2; }
.chart-xlab { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; font-size: 14px; fill: #55525E; }
.chart-xlab-last { fill: var(--pink); font-weight: 700; }
.chart-bar { fill: var(--cyan); }
.paper-band { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 10px; padding: 12px 18px; background: #F3EEE2; border-radius: 10px; font-family: var(--font-head); font-weight: 700; font-size: .9rem; line-height: 1.45; color: var(--ink); }
.paper-band b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: 1.9rem; color: var(--pink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.paper-foot { margin-top: 8px; }
/* 2. 02 の手機を画面内へ。コピーは手機の下端に重ねる */
.s02-phone { right: 3%; top: 200px; width: 320px; }
.s02-quote { right: 2%; top: 780px; }
/* 3. 03：同じ 1:1 の 3 枚を扇状に。つくる画面の手機を大きく */
.cards { width: 68%; height: 640px; }
.card-1 { left: 0; top: 90px; width: 380px; transform: rotate(-7deg); }
.card-2 { left: 300px; top: 0; width: 380px; transform: rotate(1deg); }
.card-3 { left: 600px; top: 70px; width: 380px; transform: rotate(7deg); }
.s03-phone { right: 3%; top: 150px; width: 290px; transform: rotate(8deg); z-index: 2; }
.s03-hand { right: 5%; top: 860px; }
/* 4. 06：FAQ を通常フローに置いてセクションの高さを追従させる（開くと下の項目が切れて押せなくなっていた） */
.s06 { min-height: 0; padding-top: 150px; padding-bottom: 170px; }
.faq { position: relative; right: auto; top: auto; margin: 130px 4% 0 auto; width: 54%; max-width: 720px; }
.s06-big { top: 330px; }
@media (max-width: 900px) {
  .paper-title { font-size: 1.05rem; }
  .paper-band b { font-size: 1.4rem; }
  .paper-band { padding: 10px 12px; font-size: .8rem; }
  .s02-phone { right: auto; top: auto; margin: 36px 0 0 auto; }
  .s02-quote { right: auto; top: auto; }
  .cards { width: auto; height: auto; }
  .card, .card-1, .card-2, .card-3 { left: auto; top: auto; width: 74vw; max-width: 290px; }
  .s03-phone { right: auto; top: auto; width: 60vw; max-width: 240px; }
  .s03-hand { right: auto; top: auto; }
  .s06 { padding-top: 64px; padding-bottom: 84px; }
  .faq { margin: 24px 0 0; width: auto; }
  .s06-big { top: auto; }
}
.s01-hand { top: 925px; }

/* --- 2026-09-17 夜 2：指摘対応 --- */
.s02-phone { right: 6%; }
.s03-phone { width: 300px; right: 4%; }
.s05 { min-height: 1040px; }
.facts { bottom: 140px; }
.s05-hand { top: 600px; right: 6%; }
.faq { margin-top: 10px; }
.s06-big { top: 330px; }
@media (max-width: 900px) { .faq { margin-top: 24px; } .s05-hand { top: auto; } }

/* --- 03：比率切り替え --- */
.cards-switch { position: absolute; left: calc(3% + 150px); top: 372px; z-index: 6; display: flex; gap: 8px; }
.cards-switch button {
  appearance: none; cursor: pointer; margin: 0; padding: .35em 1.1em;
  background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .04em; transform: skewX(-8deg);
}
.cards-switch button.is-on { background: var(--cyan); }
.cards-switch button:active { transform: skewX(-8deg) translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.cards[data-aspect="portrait"] .card-1 { width: 330px; top: 80px; }
.cards[data-aspect="portrait"] .card-2 { width: 330px; left: 290px; top: 0; }
.cards[data-aspect="portrait"] .card-3 { width: 330px; left: 580px; top: 60px; }
.cards[data-aspect="story"] .card-1 { width: 270px; top: 70px; }
.cards[data-aspect="story"] .card-2 { width: 270px; left: 270px; top: 0; }
.cards[data-aspect="story"] .card-3 { width: 270px; left: 540px; top: 50px; }
.cards[data-aspect="portrait"] { height: 700px; }
.cards[data-aspect="story"] { height: 760px; }
.s03[data-aspect="portrait"] { min-height: 1240px; }
@media (max-width: 900px) {
  .cards-switch { position: relative; left: auto; top: auto; margin: 22px 0 0 6px; }
  .cards[data-aspect="portrait"] .card, .cards[data-aspect="story"] .card { left: auto; top: auto; }
  .cards[data-aspect="portrait"] .card-1, .cards[data-aspect="portrait"] .card-2, .cards[data-aspect="portrait"] .card-3 { width: 66vw; max-width: 260px; }
  .cards[data-aspect="story"] .card-1, .cards[data-aspect="story"] .card-2, .cards[data-aspect="story"] .card-3 { width: 56vw; max-width: 220px; }
  .cards[data-aspect="portrait"], .cards[data-aspect="story"] { height: auto; }
}
.cards { top: 440px; }
.s03 { min-height: 1260px; }
.s03-note { top: 1150px; }
@media (max-width: 900px) { .cards { top: auto; } .s03-note { top: auto; } .s03 { min-height: 0; } }

/* ==========================================================================
   Mobile UX & Composition Refinement（2026-09-17 夜）
   PC は触らない。900px 以下だけ：文字を大きく、装飾を 4〜6 割減らし、各段の主役を 1 つに、
   セクションを短く。最後に置いて上のすべての mobile 指定を上書きする。
   ========================================================================== */
@media (max-width: 900px) {
  /* --- 共通：間隔と文字 --- */
  .s01, .s02, .s03, .s04, .s05, .s06 { padding: 56px 16px 72px; margin-top: -36px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%); }
  .s01-lead, .s02-lead, .s03-lead, .s04-lead { font-size: .95rem; line-height: 1.8; margin: 14px 0 0 4px; }
  .plate { width: 100%; }
  .phone-note { font-size: .74rem; }

  /* --- Hero：主標 → 手機 → 金額 → CTA。装飾は半分に --- */
  .hero { padding: 84px 16px 84px; }
  .hero-title { font-size: clamp(36px, 10.6vw, 60px); }
  .hero-sub { margin-top: 22px; font-size: 1rem; }
  .hero-phone { order: 3; width: 70vw; max-width: 280px; margin: 34px auto 0; transform: rotate(4deg); align-self: center; }
  .hero-phone .phone-note { transform: translateX(-50%) rotate(-4deg); }
  .hero-amount { order: 4; margin: -44px 0 0 2px; transform: rotate(-3deg); z-index: 6; }
  .hero-amount-num { font-size: clamp(40px, 10.8vw, 68px); text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink),
    0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink),
    5px 5px 0 var(--pink); }
  .hero-amount-label { font-size: .85rem; }
  .hero-cta { order: 5; margin: 30px 0 0 2px; }
  .hero-cta .btn-shock { font-size: 1.35rem; padding: .72em 2.1em; box-shadow: 7px 7px 0 var(--ink); }
  .hero-cta-note { font-size: .78rem; }
  .hero-hand-l { order: 6; margin: 34px 0 0 4px; font-size: 1.7rem; }
  .hero-hand-v, .hero-kicker, .hero-bigtype, .hero-tone-l, .w4, .w7, .w9, .w13 { display: none; }
  .hero-bigyen { font-size: 240px; top: 26%; right: -18%; }
  .w1 { --x: -10px; --y: 58%; --l: 190px; --t: 18px; }
  .w8 { --x: calc(100% + 10px); --y: 40%; --l: 260px; --t: 22px; }

  /* --- 01：グラフが主役。手機は上半分だけ、吹き出しは山を指す --- */
  .s01-paper { margin: 22px 0 0; padding: 14px 10px 10px; transform: rotate(-1deg); }
  .paper-title { font-size: 1.05rem; }
  .paper-title small { font-size: .78rem; }
  .paper-yoy { font-size: .9rem; }
  .chart-xlab { font-size: 15px; font-weight: 700; }
  .paper-band { font-size: .82rem; padding: 10px 12px; }
  .paper-band b { font-size: 1.6rem; }
  .s01-bubble { width: 190px; margin: -218px 4px 0 auto; transform: rotate(-3deg); }
  .bubble-text { font-size: 30px; }
  .s01-phone { width: 46vw; max-width: 190px; height: 250px; overflow: hidden; margin: 54px 6px 0 auto; transform: rotate(4deg); }
  .s01-phone .phone-note { display: none; }
  .s01-hand, .s01-bignum, .s01-tone-a, .s01-slash-ink { display: none; }

  /* --- 02：ランキングだけが主役。手機は出さない --- */
  .s02-paper { margin: 22px 0 0; padding: 14px 10px 8px; transform: rotate(-1deg); }
  .rank-item { grid-template-columns: 2.4em 30px 1fr auto; column-gap: 10px; padding: 13px 4px 11px; }
  .rank-icon { width: 30px; height: 30px; }
  .rank-no { font-size: 2.2rem; } .rank-top .rank-no { font-size: 3rem; }
  .rank-crown { width: 26px; height: 20px; top: -16px; }
  .rank-name { font-size: 1.02rem; } .rank-top .rank-name { font-size: 1.2rem; }
  .rank-name small { font-size: .75rem; }
  .rank-amt { font-size: 1.3rem; } .rank-top .rank-amt { font-size: 1.7rem; }
  .rank-bar { height: 8px; } .rank-top .rank-bar { height: 10px; }
  .paper-foot { font-size: .74rem; }
  .s02-quote { margin: 30px 0 0 -2px; transform: rotate(-3deg); }
  .s02 .gquote-line { font-size: clamp(1.7rem, 7.6vw, 2.4rem); }
  .s02-phone, .s02-bignum, .s02-tone-a { display: none; }
  .s02-subs { margin: 30px 0 0; }
  .s02-subs-title { font-size: 1.25rem; } .s02-subs-body { font-size: .92rem; }

  /* --- 03：シェアカードのカルーセル（横スクロール・snap）。手機は出さない --- */
  .cards-switch { margin: 18px 0 0 4px; }
  .cards-switch button { font-size: 1rem; padding: .4em 1.2em; }
  .cards, .cards[data-aspect="portrait"], .cards[data-aspect="story"] {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 16px;
    margin: 18px -16px 0; padding: 14px 40px 22px 24px; height: auto;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .cards::-webkit-scrollbar { display: none; }
  .card, .card-1, .card-2, .card-3 { position: relative; left: auto; top: auto; flex: 0 0 auto; scroll-snap-align: center; margin: 0; box-shadow: 8px 10px 0 rgba(0,0,0,0.85); }
  .cards[data-aspect="square"] .card { width: 80vw; max-width: 360px; }
  .cards[data-aspect="portrait"] .card, .cards[data-aspect="portrait"] .card-1, .cards[data-aspect="portrait"] .card-2, .cards[data-aspect="portrait"] .card-3 { width: 72vw; max-width: 320px; }
  .cards[data-aspect="story"] .card, .cards[data-aspect="story"] .card-1, .cards[data-aspect="story"] .card-2, .cards[data-aspect="story"] .card-3 { width: 60vw; max-width: 270px; }
  .card-1 { transform: rotate(-2deg); } .card-2 { transform: rotate(1.5deg); margin-left: 0; } .card-3 { transform: rotate(-1.5deg); }
  .cards-dots { display: flex; justify-content: center; gap: 10px; margin: 4px 0 0; }
  .cards-dots button { appearance: none; width: 10px; height: 10px; padding: 0; border: 2px solid #fff; background: transparent; transform: rotate(45deg); cursor: pointer; }
  .cards-dots button.is-on { background: var(--cyan); border-color: var(--cyan); }
  .s03-note { margin: 16px 0 0; font-size: .74rem; text-align: center; }
  .s03-hand { margin: 26px 0 0 auto; font-size: clamp(1.9rem, 8vw, 2.5rem); transform: rotate(-5deg); }
  .s03-phone, .s03-bigtype, .s03-tone-b { display: none; }

  /* --- 04：縦の流れ。数字を大きく、矢印で繋ぐ --- */
  .steps { margin: 22px 0 0; }
  .step { gap: 14px; align-items: flex-start; }
  .step-no { font-size: 5.4rem; width: .9em; }
  .step-body { padding-top: .35em; }
  .step-body h3 { font-size: 1.25rem; padding: .14em .55em .18em; }
  .step-body p { font-size: .95rem; line-height: 1.75; margin-top: 6px; }
  .step-arrow, .step-2 + .step-arrow { margin: 0 0 0 20px; }
  .step-arrow svg { width: 44px; height: 44px; }
  .s04-note { margin: 22px 0 0; font-size: .86rem; }
  .s04-hand, .s04-bigarrow, .s04-tone { display: none; }

  /* --- 05：メッセージ → 錠前 → 要点 3 つ --- */
  .s05-big { margin: 22px 0 0 2px; font-size: clamp(2rem, 9vw, 2.8rem); }
  .s05-body { margin: 22px 0 0 2px; font-size: 1rem; line-height: 1.85; }
  .lock { width: 52vw; max-width: 210px; margin: 26px auto 0; }
  .facts { grid-template-columns: 1fr; gap: 16px; margin: 26px 0 0; }
  .facts li { font-size: .98rem; line-height: 1.75; padding-top: 12px; border-top-width: 4px; }
  .facts li b { font-size: 1.2rem; margin-bottom: 6px; }
  .s05-hand, .s05-bignum, .s05-tone-b { display: none; }

  /* --- 06：FAQ が主役。行高 48px 以上、タップ領域を広く --- */
  .s06-big { margin: 16px 0 0 2px; font-size: clamp(48px, 15vw, 64px); }
  .faq { margin: 18px 0 0; }
  .qa { margin-bottom: 12px; box-shadow: 5px 5px 0 var(--ink); }
  .qa summary { min-height: 52px; padding: 14px 52px 14px 16px; font-size: 1.05rem; line-height: 1.5; display: flex; align-items: center; }
  .qa summary::after { right: 14px; width: 30px; height: 30px; display: grid; place-items: center; font-size: 1.5rem; }
  .qa p { font-size: .95rem; line-height: 1.8; padding: 0 16px 16px; }
  .s06-hand { margin: 24px 0 0 auto; font-size: 1.5rem; }
  .s06-bigq, .s06-tone { display: none; }

  /* --- Final CTA：第二の山場。footer とはっきり分ける --- */
  .cta { padding: 84px 16px 72px; }
  .cta-title { font-size: clamp(2.4rem, 11.2vw, 3.4rem); line-height: 1; transform: rotate(-2deg); }
  .cta-l1 { margin-left: 0; } .cta-l2 { margin-left: .5em; } .cta-l3 { margin-left: 1.2em; font-size: 1.22em; }
  .cta-sub { margin: 30px 0 0 2px; font-size: 1rem; }
  .cta-action { margin: 28px 0 0 2px; }
  .cta-action .btn-shock { font-size: 1.35rem; padding: .78em 2.4em; box-shadow: 7px 7px 0 var(--ink); }
  .cta-note { font-size: .78rem; }
  .cta-hand { margin: 34px 0 0 auto; font-size: 1.45rem; }
  .cta-wordmark, .cta-bigyen, .cw1, .cta-tone-a { display: none; }
  .cw3 { --x: calc(100% + 10px); --y: 8%; --l: 240px; --t: 20px; }
  .cw5 { --x: calc(100% + 10px); --y: 74%; --l: 220px; --t: 18px; }

  /* --- Footer：ロゴ・必要な連結・連絡先・© だけ --- */
  .footer { padding: 34px 16px 32px; gap: 16px 20px; border-top: 4px solid var(--cyan); font-size: .84rem; }
  .footer-wordmark { width: 140px; }
  .footer-links { gap: .9rem 1.2rem; font-size: .88rem; }
  .footer-meta { line-height: 1.8; }
}
@media (min-width: 901px) { .cards-dots { display: none; } }

/* --- Mobile pass：PC 側で後から足した絶対座標・高さの打ち消し、折り返しと重なりの修正 --- */
@media (max-width: 900px) {
  .s01, .s02, .s03, .s04, .s05, .s06, .cta { min-height: 0; }
  .facts { bottom: auto; }
  .s04-note { bottom: auto; }
  .s02-subs { left: auto; bottom: auto; }
  .s03-note { top: auto; }
  .s01-hand, .s05-hand, .s06-big { top: auto; }
  .cta-hand { bottom: auto; }
  .cta-wordmark { right: auto; bottom: auto; }
  .s02-phone, .s02-quote, .s03-phone, .s03-hand { right: auto; top: auto; }
  .faq { right: auto; top: auto; }

  .hero-title { font-size: clamp(34px, 9.8vw, 60px); }
  .hero-amount { margin-top: -28px; }

  /* 01：吹き出しをグラフの上（右寄せ）に置き、尻尾が山を指す */
  .s01 { display: flex; flex-direction: column; }
  .s01-plate { order: 1; } .s01-lead { order: 2; } .s01-bubble { order: 3; } .s01-paper { order: 4; } .s01-phone { order: 5; }
  .s01-bubble { width: 184px; margin: 16px 2px -26px auto; z-index: 7; transform: rotate(-3deg); }
  .s01-paper { margin-top: 0; }

  /* 02：アイコン欄を省き、名前の幅を確保 */
  .rank-icon { display: none; }
  .rank-item { grid-template-columns: 2.4em 1fr auto; }
  .rank-name { grid-column: 2; } .rank-bar { grid-column: 2; } .rank-amt { grid-column: 3; }
  .rank-amt { font-size: 1.2rem; } .rank-top .rank-amt { font-size: 1.55rem; }

  .cta-title { font-size: clamp(2.1rem, 9vw, 3rem); letter-spacing: -.02em; }
}
@media (max-width: 900px) { .hero-amount { margin-top: -16px; } .faq { margin-top: 28px; } }

/* ==========================================================================
   Mobile section title system（2026-09-18）
   900px 以下は SVG 版を隠し、同じ幾何言語の HTML 版を使う：
   固定 18px・最大 2 行・cyan 番号札（黒枠＋硬い影）・黒い帯（左右 skew、右端の短い斜め切り、上辺わずかに右上がり）。
   全セクション共通。文字は長さで縮めず、必要なときだけ意味の切れ目で折り返す。
   ========================================================================== */
.plate-m { display: none; }
@media (max-width: 900px) {
  .plate .plate-svg { display: none; }
  .plate { width: auto; max-width: 92%; }
  .plate-m {
    display: inline-flex; align-items: flex-start; gap: 4px;
    transform: rotate(-3deg); transform-origin: left center;
  }
  .pm-num {
    flex: none; display: grid; place-items: center;
    min-width: 54px; height: 46px; padding: 0 8px 2px;
    background: var(--cyan); color: var(--ink);
    border: 3px solid var(--ink); box-shadow: 2px 3px 0 var(--ink);
    font-family: "Anton", "Zen Kaku Gothic New", sans-serif; font-size: 27px; line-height: 1; letter-spacing: .02em;
    transform: skewX(-12deg); margin-top: 3px;
  }
  .pm-num, .pm-strip { position: relative; }
  .pm-num { z-index: 2; }
  .pm-strip {
    display: flex; flex-wrap: wrap; align-items: center; column-gap: 0;
    min-height: 46px; padding: 8px 18px 9px 14px; margin-top: 3px;
    background: var(--ink); color: #fff;
    font-family: var(--font-head); font-weight: 900; font-size: 18px; line-height: 1.15; letter-spacing: -.01em;
    transform: skewX(-6deg);
    clip-path: polygon(0 3px, 100% 0, calc(100% - 9px) calc(100% - 3px), 0 100%);
  }
  .pm-strip > span { display: inline-block; white-space: nowrap; transform: skewX(6deg); }
  /* 2 行になったときの行間 */
  .pm-strip > span + span { margin-top: 0; }
  /* 各セクションの plate 位置は共通：段の先頭、左揃え */
  .s01-plate, .s02-plate, .s03-plate, .s04-plate, .s05-plate, .s06-plate { margin: 0 0 0 2px; align-self: flex-start; }
  /* 06：見出しは共通系。大型の FAQ グラフィックは本文側に残す */
  .s06-big { margin: 18px 0 0 2px; }
}
@media (max-width: 340px) {
  .pm-strip { font-size: 17px; padding: 8px 14px 9px 12px; }
}
@media (max-width: 900px) { .plate { max-width: 100%; } }

/* --- サンプル表記は footer に一括（2026-09-18） --- */
.footer-note { flex-basis: 100%; margin: 0; font-size: .78rem; line-height: 1.8; color: rgba(255,255,255,0.55); }
.paper-band { margin-bottom: 4px; }

/* ==========================================================================
   Mobile pass 2（2026-10-14・使用者レビュー後）
   PC の版面を幅だけ詰めた結果の崩れを直す。番号は docs ではなく当日の提案番号
   ========================================================================== */
@media (max-width: 900px) {
  /* ① ランキング：名前は 2 列ぶち抜きで 1 行目、金額は 2 行目の右（縦に揃ったまま比べられる）。
     語の途中で折らない（「パズル＆ドラ／ゴンズ」になっていた） */
  .rank-item { grid-template-columns: 2.4em minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 4px; }
  .rank-name { grid-column: 2 / span 2; grid-row: 1; word-break: keep-all; overflow-wrap: anywhere; }
  .rank-bar { grid-column: 2; grid-row: 2; align-self: center; margin-top: 0; }
  .rank-amt { grid-column: 3; grid-row: 2; }

  /* ② 03 の cyan の斜線が本文「1:1・4:5・9:16」を横切っていた。狭い幅では逃がす場所が無いので出さない */
  .s3w3 { display: none; }
  .s01-lead, .s02-lead, .s03-lead, .s04-lead { position: relative; z-index: 5; }

  /* ③ 主 CTA を最初の画面へ（見出し・副題の直後。以前は手機の下で約 1,000px 地点） */
  .hero-cta { order: 1; margin: 24px 0 0 4px; }

  /* ④ 01 の手機は Hero と同じホーム画面の重複。グラフのカードが同じことを言っている */
  .s01-phone { display: none; }

  /* ⑤ 最終行に「す。」だけが残る折り返しを避ける（Safari 26・Chrome 117+。未対応は従来どおり） */
  p { text-wrap: pretty; }

  /* ⑥ 錠前は約 300px を占めて要点 3 つを押し下げていた */
  .lock { width: 34vw; max-width: 140px; margin: 16px auto 0; }

  /* ⑦ フッターの連結は指で押せる高さ（44px）に。2 列の表にする */
  .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; width: 100%; }
  .footer-links a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid rgba(255,255,255,0.12); }
}
/* ⑤' 日本語には語の切れ目が無く text-wrap: pretty がほぼ効かない（実測）。
   段落末の述語だけ割らずに送る（「わかり／ます。」「だけ／です。」を防ぐ） */
.nw { white-space: nowrap; }