/* brain-growth-sales — 採用 A (最初の画面は B の形)。連続型: 白い地と同じ光がページ全体に続く。
   編集の入口は :root の変数 (色・書体・文字サイズ・余白)。詳しくは HANDOFF.md。 */

@font-face { font-family: "Zen Kaku Gothic New"; src: url("fonts/ZenKakuGothicNew-Medium-subset.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("fonts/ZenKakuGothicNew-Bold-subset.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("fonts/ZenKakuGothicNew-Black-subset.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  /* 色 */
  --bg: #ffffff;
  --ink: #14233f;          /* 文字 */
  --sub: #33415c;          /* 本文の副 */
  --muted: #5b6474;        /* 注記 */
  --teal: #0e7c76;         /* 小見出し・罫 (補助の有彩色) */
  --line: #14a39a;         /* 点・細い線 */
  --rule: #d8dee6;         /* 区切りの細線 */
  --gold: #f2b33d;         /* 購入ボタン専用 */
  --gold-deep: #dd9a1e;
  --card-shadow: 0 6px 22px rgba(20, 35, 63, .08), 0 1px 3px rgba(20, 35, 63, .06);
  /* 書体 */
  --font: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  /* 幅: 原画 A は幅 1024。写真の画素を保つため中身の幅は 1024 まで (design-map.md) */
  --page: 1024px;
  --pad: 56px;
  /* 文字サイズ */
  --fs-body: 18px;
  --fs-small: 15px;
  --fs-h2: 36px;
  --fs-h2-big: 46px;
  --fs-h1: 52px;
  /* 余白 */
  --sec-y: 84px;            /* 節の上下 */
  --gap-head: 30px;         /* 見出し→本文 */
  --gap-block: 56px;        /* ブロック間 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-weight: 500; font-size: var(--fs-body); line-height: 1.8;
  font-synthesis: none; -webkit-font-smoothing: antialiased;
  line-break: strict; word-break: auto-phrase; overflow-wrap: break-word;
}
/* 写真の端を白い地へ溶かす (連続型: 写真の台の面がページの白へつながる) */
.fade-x { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); }
/* .fade-xy (デモの舞台の溶かし) は外した: 舞台の台を白 (縁 255) にしたため (LP-04・11/10) */
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 700; }

.wrap { width: min(100%, var(--page)); margin-inline: auto; padding-inline: var(--pad); }
.wrap--wide { padding-inline: 0; }
.l { display: block; }
.sp-br { display: none; }
.sp-sp { display: none; }
.s { display: block; }

h2 { font-weight: 900; font-size: var(--fs-h2); line-height: 1.35; letter-spacing: .01em; margin-bottom: var(--gap-head); }
.h2--big { font-size: var(--fs-h2-big); line-height: 1.3; }
.h2--flow { font-size: 30px; }
.h2--flow .l { display: inline; }
h3 { font-weight: 900; }

.sec { padding-block: var(--sec-y) 0; }
.sec:last-of-type { padding-bottom: 8px; }
.sec__lead { font-size: var(--fs-body); color: var(--ink); margin-top: calc(var(--gap-head) * -0.55); margin-bottom: 32px; }
.sec__close { margin-top: 36px; text-align: center; font-weight: 700; font-size: 22px; }
.sec__close--left { text-align: left; font-weight: 500; font-size: var(--fs-body); margin-top: 18px; }
.note { margin-top: 14px; font-size: var(--fs-small); color: var(--muted); line-height: 1.7; }

/* 購入ボタン: ページで一番目立つ (本人 14:47「cta目立たないのでそこは修正」) */
.cta-wrap { margin-top: 36px; }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-width: 340px; padding: 20px 40px; border-radius: 12px;
  background: var(--gold); color: var(--ink); text-decoration: none;
  font-weight: 900; font-size: 24px; line-height: 1.2; letter-spacing: .02em;
  box-shadow: 0 10px 24px rgba(221, 154, 30, .35), 0 2px 0 var(--gold-deep);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cta:hover { background: #f5bd52; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(221, 154, 30, .42), 0 2px 0 var(--gold-deep); }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.cta__arrow { font-size: 1.1em; line-height: 1; }

/* ---------- S01 最初の画面 (B の形) ---------- */
.hero { padding-top: 64px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 352px; column-gap: 40px; align-items: start; }
.hero__text { padding-top: 40px; min-width: 0; }
.eyebrow { color: var(--teal); font-weight: 700; font-size: 19px; line-height: 1.5; }
.eyebrow__num { font-weight: 900; font-size: 1.9em; line-height: 1; vertical-align: -0.12em; margin-right: .04em; }
.hero__title { margin-top: 22px; font-weight: 900; font-size: var(--fs-h1); line-height: 1.28; letter-spacing: .005em; }
.hero__body { margin-top: 30px; }
.hero__lead { font-size: var(--fs-body); line-height: 1.9; color: var(--ink); }
.hero__photo--pc img { width: 352px; height: auto; }
.hero__photo--sp { display: none; }
.hero .note { margin-top: 12px; }

/* ---------- S02 課題 ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card__btn {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; text-align: left;
  border: 0; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; cursor: pointer;
  box-shadow: var(--card-shadow); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease;
}
.card__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20, 35, 63, .12); }
.card__btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.card__img { width: 100%; aspect-ratio: 328 / 188; object-fit: cover; }
.card__front, .card__back { display: block; padding: 18px 22px 26px; font-weight: 700; font-size: 18px; line-height: 1.6; }
.card__back { display: none; color: var(--teal); }
.card__btn[aria-pressed="true"] .card__front { display: none; }
.card__btn[aria-pressed="true"] .card__back { display: block; }
.card__front, .card__back { padding-right: 40px !important; }
.card__turn { position: absolute; right: 12px; bottom: 10px; font-size: 16px; color: var(--teal); opacity: .75; }

/* ---------- S03 デモ ---------- */
.stage { position: relative; container-type: inline-size; }
.stage__img { width: 100%; aspect-ratio: 1199 / 456; }
.lbl {
  position: absolute; background: #fff; color: var(--ink); font-weight: 700;
  font-size: calc(17 / 1024 * 100cqi); line-height: 1.35; padding: .5em .8em; border-radius: 4px;
  box-shadow: 0 3px 12px rgba(20, 35, 63, .1);
}
.stage__notes .lbl { right: calc(100% - 18.2%); }
.lbl--l1 { top: 14.9%; } .lbl--l2 { top: 39.5%; } .lbl--l3 { top: 65.8%; }
.stage__points .lbl { left: 82%; white-space: nowrap; }
.lbl--r1 { top: 18.5%; } .lbl--r2 { top: 43%; } .lbl--r3 { top: 70%; }
.stage__pick { position: absolute; left: 50.3%; top: 18.4%; height: 70%; transform: translateX(-50%); width: 30%; }
.tag {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap;
  background: var(--teal); color: #fff; font-weight: 700; font-size: calc(18 / 1024 * 100cqi); line-height: 1.3;
  padding: .35em .8em; border-radius: 4px;
}
.tag::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 0; border-top-color: var(--teal); }
.lbl--pick { left: 0; right: 0; bottom: 0; text-align: center; font-size: calc(19 / 1024 * 100cqi); padding: .6em .7em; }
.note--demo { margin-top: 10px; }

/* ---------- S04 返事 ---------- */
.reply__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 48px; align-items: end; }
.replies { display: grid; gap: 14px; }
.reply-btn {
  display: block; width: 100%; text-align: left; font: inherit; font-weight: 700; font-size: 17px; line-height: 1.5;
  color: var(--ink); background: #fff; border: 1.5px solid var(--ink); border-radius: 8px; padding: 12px 18px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.reply-btn:hover { background: #f3f6f9; }
.reply-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.reply-btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.answer { background: #fff; border-radius: 12px; box-shadow: var(--card-shadow); padding: 26px 28px 28px; min-height: 290px; }
.answer__label { font-size: 13px; color: var(--teal); font-weight: 700; margin-bottom: 12px; }
.answer__body { font-size: 16px; line-height: 1.8; color: var(--sub); }
.answer__body p + p, .answer__body p + ol { margin-top: .8em; }
.answer__body ol { list-style: decimal; padding-left: 1.4em; }
.answer__body li + li { margin-top: .4em; }
.answer__body strong { color: var(--ink); }
.js .answer__body[hidden] { display: none; }

/* ---------- S05 流れ ---------- */
.flow__photo { position: relative; max-width: 944px; margin-inline: auto; }
.flow__photo img { width: 100%; aspect-ratio: 944 / 144; }
.flow__steps { position: relative; height: 40px; margin-top: 4px; font-weight: 900; font-size: 20px; }
.flow__steps li { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.flow__steps li:nth-child(1) { left: 14.8%; } .flow__steps li:nth-child(2) { left: 38.1%; }
.flow__steps li:nth-child(3) { left: 62%; }  .flow__steps li:nth-child(4) { left: 85.6%; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin-top: 22px; }
.col__title { color: var(--teal); font-size: 20px; font-weight: 900; padding-bottom: 8px; border-bottom: 2px solid var(--teal); margin-bottom: 14px; }
.dots li { position: relative; padding-left: 1.2em; line-height: 1.7; }
.dots li + li { margin-top: 2px; }
.dots li::before { content: ""; position: absolute; left: .15em; top: .72em; width: .45em; height: .45em; border-radius: 50%; background: var(--teal); }
.dots--no li::before { background: transparent; border: 1.5px solid var(--muted); }

/* ---------- S06 安心 ---------- */
.safe { display: grid; gap: 22px; }
.safe__row { display: grid; grid-template-columns: 377px minmax(0, 1fr); column-gap: 36px; align-items: center; }
.safe__row img { width: 377px; max-width: 100%; border-radius: 6px; }
.safe__row h3 { font-size: 23px; line-height: 1.45; }
.safe__row p { margin-top: 8px; color: var(--sub); }

/* ---------- S07 再開 ---------- */
.resume__photo { width: 100%; max-width: 944px; margin-inline: auto; aspect-ratio: 944 / 164; }
.steps { margin-top: 8px; display: grid; gap: 2px; font-size: 19px; }
.steps li { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); }
.steps__n { color: var(--teal); font-weight: 900; }

/* ---------- S08 手に入るもの ---------- */
.offer__cols { margin-top: 0; }
.rows li { padding: 12px 2px; border-bottom: 1px solid var(--rule); }
.rows__big { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; }
.big7 { color: var(--teal); font-weight: 900; font-size: 64px; line-height: 1; }
.offer__notes { margin-top: 24px; font-size: 16px; color: var(--sub); }
.offer__notes p + p { margin-top: 4px; }
.offer .cta-wrap { margin-top: 28px; }

/* ---------- S09 合う人 ---------- */
.fit .cols { margin-top: 0; }
.col__title--no { color: var(--sub); border-bottom-color: var(--muted); }

/* ---------- S10 問い ---------- */
.faq h2 { margin-bottom: 20px; }
.faq__list { border-top: 1px solid var(--rule); }
.faq__list details { border-bottom: 1px solid var(--rule); }
.faq__list summary {
  list-style: none; cursor: pointer; position: relative; padding: 8px 48px 8px 4px; font-weight: 700; font-size: 17px; line-height: 1.5;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-weight: 500; font-size: 26px; color: var(--ink); }
.faq__list details[open] summary::after { content: "−"; }
.faq__list summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.faq__list details p { padding: 0 48px 18px 4px; color: var(--sub); font-size: 17px; }
.provisional { color: #8a6d1f !important; background: #fff8e6; border: 1px dashed #e6c46a; padding: 8px 12px !important; border-radius: 6px; font-size: 15px !important; }

/* ---------- S11 最後 ---------- */
.final__grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; column-gap: 32px; align-items: center; }
.final .h2--big { font-size: 42px; margin-bottom: 0; }
.final__text .cta-wrap { margin-top: 28px; }
.final__photo img { width: 480px; }
.foot { padding-block: 16px 12px; }
.foot__link { color: var(--muted); font-size: 14px; }

/* スマホの追尾ボタン (JS が表示を切り替える) */
.sticky { display: none; }

/* ---------- 中くらいの幅 (768〜1023) ---------- */
@media (max-width: 1023px) {
  :root { --pad: 40px; --fs-h1: clamp(34px, 4.9vw, 52px); --fs-h2-big: 40px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) clamp(240px, 33vw, 352px); column-gap: 28px; }
  .hero__photo--pc img { width: 100%; }
  .final__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 48%); }
  .final__photo img { width: 100%; }
  .safe__row { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .safe__row img { width: 100%; max-width: 377px; }
}

/* ---------- スマホ (〜767) ---------- */
@media (max-width: 767px) {
  :root { --pad: 22px; --fs-body: 16px; --fs-small: 13px; --fs-h2: 26px; --fs-h2-big: 30px; --fs-h1: clamp(30px, 9.4vw, 38px); --sec-y: 76px; --gap-head: 24px; }
  body { line-height: 1.75; padding-bottom: 88px; }
  .hero { padding-top: 28px; }
  .hero__grid { display: block; }
  .hero__text { padding-top: 0; }
  .eyebrow { font-size: 15px; }
  .eyebrow__num { font-size: 1.8em; }
  .hero__title { margin-top: 14px; line-height: 1.3; }
  .sp-br { display: inline; }
  .hero__body { display: grid; grid-template-columns: minmax(0, 1fr) 42%; column-gap: 12px; align-items: start; margin-top: 20px; }
  .hero__lead { font-size: 15px; line-height: 1.85; }
  .hero__lead .s + .s { margin-top: .9em; }
  .hero__photo--sp { display: block; }
  .hero__photo--sp img { width: 100%; }
  .hero__photo--pc { display: none; }
  .hero .cta-wrap { margin-top: 18px; }
  .cta { min-width: 0; width: 100%; font-size: 22px; padding: 17px 20px; }

  .cards { grid-template-columns: 1fr; gap: 14px; }
  .card__btn { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; }
  .card__img { height: 100%; aspect-ratio: auto; min-height: 96px; }
  .card__front, .card__back { font-size: 15px; padding: 12px 14px 12px; }
  .sec__close { font-size: 18px; margin-top: 32px; }

  .stage__img { aspect-ratio: auto; }
  .stage__notes, .stage__points, .stage__pick { position: static; }
  .stage { display: grid; gap: 10px; padding-inline: var(--pad); }
  .stage__img { margin-inline: calc(var(--pad) * -1); width: calc(100% + var(--pad) * 2); max-width: none; }
  .lbl, .stage__notes .lbl, .stage__points .lbl { position: static; display: block; font-size: 15px; box-shadow: none; border: 1px solid var(--rule); white-space: normal; }
  .lbl br { display: none; }
  .stage__notes, .stage__points { display: grid; gap: 8px; }
  .stage__pick { width: auto; height: auto; transform: none; display: grid; gap: 8px; border: 2px solid var(--gold); border-radius: 8px; padding: 10px; background: #fffaf0; }
  .tag { position: static; transform: none; justify-self: start; font-size: 14px; }
  .tag::after { display: none; }
  .lbl--pick { text-align: left; border: 0; padding: 0; font-size: 16px; background: transparent; }

  .reply__grid { display: block; }
  .reply-btn { font-size: 15px; }
  .answer { margin-top: 22px; min-height: 0; padding: 20px; }

  .flow__steps { font-size: 15px; height: 32px; }
  .h2--flow { font-size: 24px; }
  .h2--flow .l { display: block; }
  .sp-sp { display: inline; }
  .cols { grid-template-columns: 1fr; row-gap: 28px; }

  .safe__row { grid-template-columns: 1fr; row-gap: 12px; }
  .safe__row h3 { font-size: 19px; }

  .steps { font-size: 16px; gap: 10px; }
  .big7 { font-size: 48px; }

  .faq__list summary { font-size: 16px; padding-right: 40px; }
  .faq__list details p { padding-right: 8px; font-size: 15px; }

  .final__grid { display: block; }
  .final__photo { margin-top: 28px; }
  .final__photo img { max-width: 554px; margin-inline: auto; }

  .sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94);
    box-shadow: 0 -4px 16px rgba(20, 35, 63, .08); transform: translateY(110%); transition: transform .2s ease;
  }
  .sticky.is-on { transform: translateY(0); }
  .cta--sticky { font-size: 18px; padding: 14px 16px; box-shadow: 0 6px 16px rgba(221, 154, 30, .35), 0 2px 0 var(--gold-deep); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- PC (1024〜): 最初の画面を採用原画 B の座標に合わせる (design-map.md・qa/reference-landmarks.json)
   1024 幅の中身の中で: 小見出し y84 / 見出し 2 行 y160 / 説明 3 行 y320 / CTA 503x88 y460 / 写真の面 x631 幅364 (B の切り出し位置と同じ) ---------- */
@media (min-width: 1024px) {
  .hero { padding-top: 0; }
  .hero .wrap.hero__grid { display: block; position: relative; min-height: 640px; padding: 0; }
  .hero__text { width: 590px; padding: 82px 0 0 54px; }
  .eyebrow { display: inline-block; font-size: 22.5px; line-height: 1.3; letter-spacing: .01em; }
  .hero__title { margin-top: 30px; font-size: 54px; line-height: 1.14; }
  .hero__title .l { display: block; white-space: nowrap; }
  .hero__body { margin-top: 26px; }
  .hero__lead { font-size: 19px; line-height: 1.5; }
  .hero .cta-wrap { margin-top: 30px; }
  .hero .cta { width: 503px; height: 88px; min-width: 0; padding: 0 24px; font-size: 31px; }
  .hero .note { margin-top: 12px; }
  .hero__photo--pc { position: absolute; left: 631px; top: 0; width: 364px; }
  .hero__photo--pc img { width: 364px; }

  /* デモの節: A の見出し (2 行・大) → すぐ下に舞台 → 舞台の直下に小さな注記 */
  .demo .h2--big { font-size: 56px; line-height: 1.08; margin-bottom: 10px; }
  .demo .note--demo { margin-top: 0; font-size: 18px; line-height: 1.2; }
}

/* ---------- スマホ (〜767): 最初の画面を採用原画 B のスマホの座標に合わせる (幅 W = 852 を基準にした比率・cqi)
   写真の面 = 右 55.4% を画面の最上部から CTA の直前まで (B-mobile から文字を除去して切り出し)。文字は B と同じ位置・改行。
   玉や線が文字の下に入らないことは qa (文字を透明にした撮影の画素) で確かめる。 ---------- */
@media (max-width: 767px) {
  .hero { padding-top: 0; }
  .hero .wrap.hero__grid { position: relative; container-type: inline-size; width: min(100%, 520px); padding: 0; }
  .hero__photo--sp { position: absolute; top: 0; right: 0; width: 55.4cqi; z-index: 0; pointer-events: none; }
  .hero__photo--sp img { width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
    mask-composite: intersect; }
  .hero__text { position: relative; z-index: 1; padding: 22.6cqi 3.9cqi 0 5.3cqi; }
  .eyebrow { font-size: 4cqi; line-height: 1.75; }
  .hero__title { margin-top: 9.4cqi; font-size: 8.45cqi; line-height: 1.555; }
  .hero__body { display: block; margin-top: 10.7cqi; }
  .hero__lead { font-size: 3.75cqi; line-height: 1.72; }
  .hero__lead .s + .s { margin-top: 4.1cqi; }
  .hero .cta-wrap { margin-top: 23.5cqi; margin-left: -1.4cqi; margin-right: -1.4cqi; }
  .hero .cta { height: 16.4cqi; padding: 0 4cqi; font-size: 6.4cqi; }
  .hero .note { margin-top: 3cqi; font-size: 3.3cqi; }
}

/* ---------- 最初の画面の網をサムネ案A の密度に (本人 2026-11-08 17:59「fvの画像、このぐらいの密度にならん？」)
   PC/タブレット: 網の写真を節の背面に、文字の列の右 (16px 空け) からページの右端まで cover・右寄せで敷く。
   幅の上限 792px = 元の画素 (DPR1)。文字の列とは箱が重ならない。
   スマホ: 縦長の網の写真を右へ 16% ずらして敷き (網の左端が説明の右端より右へ)、CTA の手前で切る。 ---------- */
.hero { position: relative; overflow: hidden; }
.hero__bg { display: none; margin: 0; }
@media (min-width: 768px) {
  .hero__bg { display: block; position: absolute; top: 0; bottom: 0; right: 0; z-index: 0; pointer-events: none; }
  .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 6%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, transparent 0, #000 6%, #000 90%, transparent 100%);
    mask-composite: intersect; }
  .hero .wrap.hero__grid { position: relative; z-index: 1; }
}
@media (min-width: 1024px) {
  .hero__bg { width: min(792px, calc(50% - 94px)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero .wrap.hero__grid { display: block; }
  .hero__text { max-width: 56%; padding-top: 48px; padding-bottom: 8px; }
  .hero__bg { width: calc(44% - 12px); }
}
@media (max-width: 767px) {
  .hero__photo--sp { left: 16cqi; right: auto; width: 100cqi; }
  .hero__photo--sp img {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 88%, transparent 100%); }
}
@media (max-width: 767px) {
  /* 生成の写真の地はごく淡い灰色。左の端だけ白へ溶かし、写真の四角い縁を見せない */
  .hero__photo--sp img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to bottom, #000 0, #000 88%, transparent 100%);
    mask-composite: intersect; }
}

/* ---------- 網をサムネ案A と同じ小さな玉の密度へ (2026-11-08 窓口の 2 回目の依頼)
   PC: 横長 1536x1024 を高さ 640 に合わせて 0.625 倍 (玉は 20〜30px)、右寄せ cover。箱は文字の列の右 16px からページの右端まで (上限 960 = 画像の表示幅)。
   スマホ: 縦長の網を画面幅いっぱいに左 0 から敷く (網は生成の時点で文字の無い右側にある)。 ---------- */
@media (min-width: 1024px) {
  .hero__bg { width: min(960px, calc(50% - 94px)); }
}
@media (min-width: 768px) {
  .hero__bg img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 4%, #000 92%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 9%), linear-gradient(to bottom, transparent 0, #000 4%, #000 92%, transparent 100%);
    mask-composite: intersect; }
}
@media (max-width: 767px) {
  .hero__photo--sp { left: 0; right: auto; width: 100cqi; }
  .hero__photo--sp img {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 90%, transparent 100%); }
}

/* ---------- PC/タブレット: 最初の画面は真っ白な台の写真 1 枚を背景に (本人 18:22「スマホの方みたいに背景として機能させて。pc案みたいなブラーで適当に境界置いてあるのは許容できません」)
   マスク・ぼかし・グラデーションで縁を隠さない。写真の上・下・左の縁は #FFFFFF (白点を合わせた・qa で縁の画素を測る) なのでページの白と継ぎ目が出ない。
   写真は右端に合わせ、網 (写真の幅の 51.5% から右) が文字の列に入らない高さにする:
   写真の高さ = min(最初の画面の高さ, (文字の列の右から右端までの幅) / (0.485 x 2))。 ---------- */
@media (min-width: 768px) {
  .hero { container-type: inline-size; }
  .hero__bg { position: absolute; inset: 0; width: 100%; height: auto; }
  .hero__bg img { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: auto; max-width: none;
    height: min(100%, calc((44cqi - 12px) / 0.97));
    -webkit-mask-image: none; mask-image: none; object-fit: fill; }
}
@media (min-width: 1024px) {
  .hero__bg { width: 100%; }
  .hero .wrap.hero__grid { min-height: clamp(640px, 50cqi, 760px); }
  .hero__bg img { height: min(100%, calc((50cqi - 94px) / 0.97)); }
}

/* ---------- PC: 本人 18:43「荒くするなよ。参照画像変えます。このぐらい細かくして / pcだけでいい」→ W5 (細かい光の点の網) を背景に。
   網 (散った点を含む) の左端 = 写真の幅の約 42〜45%。網が文字の列の右に来る高さ: (文字の列の右から右端までの幅) / (2 x (1 - 0.45))。 ---------- */
@media (min-width: 768px) {
  .hero__bg img { height: min(100%, calc((44cqi - 12px) / 1.10)); }
}
@media (min-width: 1024px) {
  .hero__bg img { height: min(100%, calc((50cqi - 94px) / 1.10)); }
}

/* ---------- PC: 本人 18:49「世界観はガラス玉でいいです。デザイン・設計や背景としての存在感は2枚目のカタチです」→ 小さなガラスの玉が数百の網 (W5 の配置と細かさ)。
   網 (散った玉を含む) の左端 = 写真の幅の約 50%。高さ = (文字の列の右から右端までの幅) / (2 x (1 - 0.50))。 ---------- */
@media (min-width: 768px) {
  .hero__bg img { height: min(100%, calc((44cqi - 12px) / 1.0)); }
}
@media (min-width: 1024px) {
  .hero__bg img { height: min(100%, calc((50cqi - 94px) / 1.0)); }
}
/* 作り直し版: 網の左端 = 写真の幅の約 46% → 係数 2 x (1 - 0.46) = 1.08 */
@media (min-width: 768px) { .hero__bg img { height: min(100%, calc((44cqi - 12px) / 1.08)); } }
@media (min-width: 1024px) { .hero__bg img { height: min(100%, calc((50cqi - 94px) / 1.08)); } }
/* 採用は 1 回目 (pc-hero-fine-glass-white・網の左端 約 50%) → 係数 1.0 に戻す */
@media (min-width: 768px) { .hero__bg img { height: min(100%, calc((44cqi - 12px) / 1.0)); } }
@media (min-width: 1024px) { .hero__bg img { height: min(100%, calc((50cqi - 94px) / 1.0)); } }

/* ---------- PC: 背景としての存在感 (窓口: 網を右側の上から下まで・帯を残さない)。1280 以上は写真を最初の画面の高さいっぱいに敷く。
   網の左の縁 = 写真の幅の約 53〜57% (文字の列の右端は 1280/1440 で約 54〜56%)。文字の下に玉が無いことは qa の画素で確かめる。
   1024〜1279 と 768〜1023 は文字の列が相対的に広いので、網が文字に入らない高さに縮める (係数 2 x (1 - 0.534) = 0.93)。 ---------- */
@media (min-width: 768px) { .hero__bg img { height: min(100%, calc((44cqi - 12px) / 0.93)); } }
@media (min-width: 1024px) { .hero__bg img { height: min(100%, calc((50cqi - 94px) / 0.93)); } }
@media (min-width: 1280px) { .hero__bg img { height: 100%; } }
/* 文字の列と網の間を 48px 以上空ける (本人 11:12「少し文字に被ってる右端を調整できれば」)。網は右端の外へ流れているので、写真を右へ 12px ずらす */
@media (min-width: 1280px) { .hero__bg img { right: -12px; } }

/* ---------- 最初の画面 PC: W5 (本人 19:15「２枚目って呼んでる方に寄せます。lpはガラス玉やめてくれ」)
   W5 (1536x1024・左 40% の点を除き下端を消した版) を最初の画面の高さいっぱいに置く (縮小のみ・拡大なし = 1920 でも粗くならない)。
   網の左の縁 = 画像の幅の 38.5% (実測)。文字の列の右端 + 48px より右に網が来るよう、右寄せを基本に、足りない時だけ右へ押し出す:
   left = max(右寄せの位置, 文字の列の右端 + 48px - 0.385 x 画像の幅)。画像の幅 = 1.5 x 最初の画面の高さ。
   マスク・ぼかし・グラデーションなし。左端と下端は #FFFFFF。 ---------- */
@media (min-width: 768px) {
  .hero__bg img { top: 0; bottom: auto; transform: none; height: 100%; width: auto; max-width: none; right: auto;
    -webkit-mask-image: none; mask-image: none;
    left: max(calc(100cqi - 1.5 * 664px), calc(40px + 0.56 * (100cqi - 80px) + 48px - 0.385 * 1.5 * 664px)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero .wrap.hero__grid { min-height: 600px; }
}
@media (min-width: 1024px) {
  .hero__bg img { right: auto;
    left: max(calc(100cqi - 1.5 * clamp(640px, 50cqi, 760px)), calc(50cqi + 78px + 48px - 0.385 * 1.5 * clamp(640px, 50cqi, 760px))); }
}
@media (max-width: 767px) {
  /* W5 の世界のスマホの背景: 画像の下端は白なのでマスクは使わない */
  .hero__photo--sp img { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 767px) {
  /* 一番長い説明の行 (使い方の記事のセットです。) と網の外側の点が接するので、網を右へ 7% ずらす (網は右端の外へ流れている) */
  .hero__photo--sp { left: 7cqi; }
}

/* ---------- 最初の画面 PC: lp-forge の見本 (本人が見た参照) と同じく、画面の高さいっぱい (100vh・720〜1000px) にし、
   文字の列はその中で上下中央に。W5 は最初の画面の高さいっぱいに置き、網が右側を上から下まで埋める。
   位置: 右寄せを基本に、網の左の縁 (画像の幅の 38.5%) が文字の列の右端 + 48px より右に来るところまでだけ右へ押し出す。
   1920 でも高さ 1000 = 0.98 倍の縮小なので拡大はしない。 ---------- */
@media (min-width: 1024px) {
  .hero .wrap.hero__grid { display: flex; align-items: center; min-height: clamp(720px, 100vh, 1000px); }
  .hero__text { padding-top: 40px; padding-bottom: 40px; }
  .hero__bg img { left: max(calc(100cqi - 1.5 * clamp(720px, 100vh, 1000px)), calc(50cqi + 78px + 48px - 0.385 * 1.5 * clamp(720px, 100vh, 1000px))); }
}

/* ---------- 最初の画面 PC: 本人 19:37「勝手に右側だけに収めないでもらえますか？左端まで伸びてたのはどこいったの？」
   編集していない元の W5 を、lp-forge の見本と同じく最初の画面いっぱいに cover・右寄せ・上下中央で敷く
   (散った点が左端まで、網が下端まで。下端は見本と同じく最初の画面の下で切れる)。
   --hero-shift: 網の密な部分を文字の右端から離すために右へずらす量 (0 = 見本どおり)。 ---------- */
@media (min-width: 1024px) {
  .hero { --hero-shift: 0px; }
  .hero__bg img { --w: max(100cqi, calc(1.5 * clamp(720px, 100vh, 1000px)));
    width: var(--w); height: auto; max-width: none; top: 50%; bottom: auto; transform: translateY(-50%);
    right: auto; left: calc(100cqi - var(--w) + var(--hero-shift)); -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* タブレット: 元の W5 を最初の画面の高さいっぱいに。網の密な部分 (画像の幅の約 40% から) が文字の列の右端 + 48px より右へ来る位置 */
  .hero__bg img { left: max(calc(100cqi - 1.5 * 664px), calc(40px + 0.56 * (100cqi - 80px) + 48px - 0.40 * 1.5 * 664px)); }
}
@media (min-width: 1024px) {
  /* 実測: 見本どおり (ずらし 0) だと網の密な部分が説明の行の右側と CTA にかかる (1440 で CTA に 239px)。
     密な部分を全部の行の右端・CTA から 24px 以上離す最小のずらし = 1440 で 263px・1920 で 327px・1280 で 199px → 17cqi + 24px */
  .hero { --hero-shift: calc(17cqi + 24px); }
}
@media (min-width: 1024px) {
  /* 実測で決めたずらし (密な部分を全部の行の右端・CTA から 24px 以上離す): 1440 で 290px 必要 → 20cqi + 10px */
  .hero { --hero-shift: calc(20cqi + 10px); }
}
@media (min-width: 1600px) {
  /* 1920 は W5 が 1.25 倍に拡大され網が大きいので 511px 必要 → 27cqi */
  .hero { --hero-shift: 27cqi; }
}
@media (min-width: 1024px) {
  /* 較正した窓 (64x64・散った点 1 つでは届かない) で測り直した結果、小さいずらしで足りる */
  .hero { --hero-shift: calc(17cqi + 24px); }
}
@media (min-width: 1024px) {
  /* 最小のずらし (密な部分を行の右端・CTA から 24px 以上): 1280 で 219px・1440 で 228px 必要 → 16cqi + 22px */
  .hero { --hero-shift: calc(16cqi + 22px); }
}
@media (min-width: 1600px) {
  /* 1920 は W5 が 1.25 倍なので 467px 必要 → 25cqi */
  .hero { --hero-shift: 25cqi; }
}

/* ---------- 案 C (窓口の決定): 見本どおり、文字の列を左へ (画面の左端から 6%)、W5 を左へ広げた 2:1 の絵を cover で全面に。
   画像の縁は見せない: 位置は object-position (cover の余りの範囲) だけで調整し、網の密な部分を文字から 24px 以上離す。
   マスク・ぼかしなし。下端は見本と同じく最初の画面の下で切れる。 ---------- */
@media (min-width: 768px) {
  .hero__bg img { left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100%; max-width: none; transform: none;
    object-fit: cover; object-position: var(--hero-pos, 100%) 50%; }
  .hero { --hero-shift: 0px; }
}
@media (min-width: 1024px) {
  .hero .wrap.hero__grid { width: 100%; max-width: none; padding-left: calc(6cqi - 54px); }
  .hero__bg img { --w: auto; left: 0; width: 100%; height: 100%; top: 0; transform: none; }
}
@media (min-width: 768px) and (max-width: 1599px) {
  /* 実測: 網の密な部分を行の右端・CTA から 24px 以上離すのに 1440 で 139px・1280 で 155px・1023 で 147px・768 で 256px 右へ必要。
     cover の余り (1440 で 360px・1280 で 320px・1023 で 305px・768 で 606px) の中で動かす = object-position 48% (画像の縁は出ない) */
  .hero { --hero-pos: 48%; }
}
@media (min-width: 1600px) {
  .hero { --hero-pos: 100%; }  /* 1920 は右寄せのままで 233px 離れている */
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero { --hero-pos: 25%; }  /* タブレットは文字の列が広いので、cover の余りの中でもう少し右へ (1023 で +62px・768 で +74px 必要) */
}
@media (min-width: 1024px) {
  /* 1920x1080 で最初の画面 (上限 1000) が画面より短いと、網の切れ目が 1 画面目の中に横一直線で見える。見本と同じく画面の下端で切れるよう上限を 1200px に */
  .hero .wrap.hero__grid { min-height: clamp(720px, 100vh, 1200px); }
}

/* =====================================================================
   構成 v2 (本人 2026-11-08 20:52「lpの構成自体を見直してください。場当たりに組み替えるのではなく。…デザインは維持で」・20:56「やってみましょう」)
   変えるのは節の並びと見出し・文言だけ。色・書体・最初の画面の形と絵・W5 の絵・金の CTA はそのまま。節の間の飾りなし。
   ===================================================================== */
.pc-br { display: inline; }
.sec__label { color: var(--teal); font-weight: 900; font-size: 17px; line-height: 1.4; letter-spacing: .03em; margin-bottom: 10px; }

/* ---------- S01 最初の画面: サムネと同じ言葉と階層 (題の前半 → 大きな「7つのスキル」→ 中身 3 つを細い青緑の線で区切る) ---------- */
.hero__title { margin-top: 0; }
.hero__kicker { display: block; font-size: 30px; line-height: 1.35; letter-spacing: .005em; }
.hero__main { display: block; margin-top: 4px; font-size: 88px; line-height: 1.1; letter-spacing: 0; }
.hero__promises { display: flex; margin-top: 24px; color: var(--teal); font-weight: 900; font-size: 18px; line-height: 1.45; }
.hero__promises li { padding: 1px 15px; border-left: 2px solid var(--teal); }
.hero__promises li:first-child { padding-left: 0; border-left: 0; }
.hero__body { margin-top: 24px; }
@media (min-width: 1024px) {
  .hero__title { margin-top: 0; font-size: inherit; line-height: inherit; }
  .hero__kicker { font-size: 30px; }
  .hero__main { font-size: 88px; }
  .hero__body { margin-top: 24px; }
  .hero__lead { font-size: 19px; line-height: 1.6; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__kicker { font-size: clamp(21px, 2.9vw, 30px); }
  .hero__main { font-size: clamp(62px, 8.4vw, 86px); }
  .hero__promises { font-size: clamp(14px, 1.75vw, 18px); }
  .hero__promises li { padding-inline: 11px; }
}
@media (max-width: 767px) {
  .pc-br { display: none; }
  .hero__title { margin-top: 0; font-size: inherit; line-height: inherit; }
  .hero__kicker { font-size: 6.2cqi; line-height: 1.45; }
  .hero__main { margin-top: 1cqi; font-size: 13.4cqi; line-height: 1.12; }
  /* スマホは網が右にあるので、中身 3 つは縦に積んで左の列に収める (区切りは細い青緑の横線) */
  .hero__promises { display: block; margin-top: 5.5cqi; font-size: 3.8cqi; line-height: 1.5; }
  .hero__promises li { padding: 1.6cqi 0; border-left: 0; border-top: 1.5px solid var(--teal); width: fit-content; }
  .hero__promises li:first-child { padding-top: 0; border-top: 0; }
  .hero__body { margin-top: 5.5cqi; }
}

/* ---------- S05 導入から2回目の振り返りまで: 記事の 10 章を道のりに (2 列・番号の丸を細い線でつなぐ) ---------- */
.route__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 56px; margin-top: 4px; }
.rt { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding: 9px 0 11px; }
.rt::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 0; width: 1.5px; background: rgba(20, 163, 154, .45); }
.rt:nth-child(1)::before, .rt:nth-child(6)::before { top: 26px; }
.rt:nth-child(5)::before, .rt:nth-child(10)::before { bottom: calc(100% - 26px); }
.rt__n { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); color: var(--teal); font-weight: 900; font-size: 15px; line-height: 1; }
.rt--mark .rt__n { background: var(--teal); border-color: var(--teal); color: #fff; }
.rt__body { min-width: 0; padding-top: 2px; }
.rt__name { display: block; font-weight: 900; font-size: 19px; line-height: 1.45; }
.rt__sub { display: block; font-size: 15px; line-height: 1.55; color: var(--sub); }
.rt__tag { display: inline-block; margin-left: 10px; padding: 0 7px; border: 1px solid var(--teal); border-radius: 4px; color: var(--teal); font-weight: 700; font-size: 12.5px; line-height: 1.6; vertical-align: 2px; }
@media (max-width: 767px) {
  .route__list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .rt:nth-child(6)::before { top: 0; }
  .rt:nth-child(5)::before { bottom: 0; }
  .rt { grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding: 7px 0 9px; }
  .rt::before { left: 14px; }
  .rt__n { width: 30px; height: 30px; font-size: 14px; }
  .rt__name { font-size: 17px; }
  .rt__sub { font-size: 14px; }
  .sec__label { font-size: 15px; margin-bottom: 8px; }
}

/* スマホの最初の画面: 文字が減って CTA が網の下端 (画像の高さの 94.5% = 172.8cqi・実測) にかかったため、
   CTA の上端を 176cqi (網の点の一番下より下) に固定し、文字を少し大きく・間を広げて左の列の空きを埋める (_measure_sp_fv.py で実測) */
@media (max-width: 767px) {
  .hero__text { display: flex; flex-direction: column; min-height: calc(176cqi + 16.4cqi + 3cqi + 5.61cqi); }
  .hero__kicker { font-size: 6.4cqi; }
  .hero__main { font-size: 13.8cqi; }
  .hero__promises { margin-top: 5.5cqi; font-size: 3.8cqi; }
  .hero__promises li { padding: 1.8cqi 0; }
  .hero__promises li:first-child { padding-top: 0; }
  .hero__body { margin-top: 5.5cqi; margin-bottom: 8cqi; }
  .hero__lead { line-height: 1.72; }
  .hero .cta-wrap { margin-top: auto; }
}

/* 最初の画面 PC: 文字が変わって CTA の高さに網の密な部分が来た (1280 で 1px)。文字の列を 24px 下げる (上下の余白の差で中央を 24px 下へ)。
   _cta_shift_probe.py の見積もり: 1280 で 33〜49px・1440 で 73〜89px・1920 で 123px 空く */
@media (min-width: 1024px) {
  .hero__text { padding-top: 88px; padding-bottom: 40px; }
}

/* スマホ: 網の写真の下 3% は真っ白 (行の最小値 255・実測) なので、画像の箱をそこで切り (cover・上合わせ = 下の白だけ落ちる・拡大なし)、
   CTA を画像の箱の下 (178cqi) から始める。文字の下にも CTA の下にも網が来ない */
@media (max-width: 767px) {
  .hero__photo--sp img { height: calc(100cqi * 1560 / 853 * .97); object-fit: cover; object-position: 50% 0; }
  .hero__text { min-height: calc(178cqi + 16.4cqi + 3cqi + 5.61cqi); }
}

/* =====================================================================
   本人 2026-11-08 22:38「図を作り直さなくていいです。FVもさっき作ったやつで、セクションはガラス玉のほうをデザインとして維持。
   セクションの並びだけ作り替えて、ガラス玉のほうの世界観で必要な図を追加」
   節のデザインは上の 17:27 のまま。ここは足した 2 つの物 (S04 の段の下の対応・S05 のガラスの道) の段だけ。
   ===================================================================== */
/* S04: 17:27 の流れの写真の 4 段の下に、段ごとの担当 (HTML)。PC は写真の玉の下に 4 列、スマホは 1 列 */
.skills__line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; font-size: 16px; line-height: 1.6; color: var(--sub); }
.skills__line--apply { margin-top: 10px; }
.skill__name { display: inline-block; font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--ink); background: #eef6f5; border-radius: 4px; padding: 1px 8px; letter-spacing: .01em; }
.skill__role { color: var(--teal); font-weight: 900; font-size: 17px; }
.flow__map { max-width: 944px; margin: 4px auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; text-align: center; }
.flow__map-stage { display: none; }
.flow__map-who { color: var(--teal); font-weight: 700; font-size: 15px; line-height: 1.5; }
.flow__map-text { margin-top: 6px; font-size: 15px; line-height: 1.65; color: var(--sub); }
.flow__map-text--sub { font-size: 14px; color: var(--muted); }
.skill-list { margin-top: 8px; display: grid; gap: 6px; justify-items: center; font-size: 15px; line-height: 1.5; }
.skill-list li { display: flex; align-items: baseline; gap: 8px; }
.skills .sec__close--left { margin-top: 30px; }
.skills__reply { margin-top: 64px; }
.h3--reply { font-weight: 900; font-size: var(--fs-h2); line-height: 1.35; letter-spacing: .01em; margin-bottom: var(--gap-head); }
/* S05: ガラスの道の写真 (17:27 の写真と同じく白へ溶かす。1 つ目の金の玉が端に近いので左右の溶けは 3%) */
.route__photo { width: 100%; max-width: 944px; margin-inline: auto; aspect-ratio: 1536 / 250; }
.fade-route {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.route .route__list { margin-top: 24px; }
@media (max-width: 767px) {
  .flow__map { grid-template-columns: 1fr; text-align: left; row-gap: 18px; padding-inline: var(--pad); margin-top: 14px; }
  .flow__map-stage { display: block; font-weight: 900; font-size: 18px; line-height: 1.4; }
  .skill-list { justify-items: start; }
  .skills__reply { margin-top: 48px; }
  .h3--reply { font-size: var(--fs-h2); }
}

/* =====================================================================
   図の直し (本人 2026-11-08 23:28「ごちゃごちゃ書かんでよろしい。詳細は記事を読めばいいい。記事購入につながる視点で必要な、図の修正をレビュー結果を受けて実行せよ」・
   23:30 のゲート「作る前にまず構成としてわかるか？をレビューし直した上で…」→ _audit_2317/fix_plan_v2.md)。短い札と線だけ。写真の画素には描き込まない
   ===================================================================== */
/* #1 デモ: 列の札・線の向き・中央→右の線に「あなたが一言返す」 */
.stage__pic { position: relative; }
.stage__col {
  position: absolute; top: 2%; transform: translateX(-50%); white-space: nowrap; margin: 0;
  background: var(--teal); color: #fff; font-weight: 700; font-size: calc(18 / 1024 * 100cqi); line-height: 1.3; padding: .35em .8em; border-radius: 4px;
}
.stage__col--l { left: 16%; }
.stage__col--r { left: 84%; }
.stage__n { display: none; }
.stage__down { display: none; }
.arw {
  position: absolute; width: 0; height: 0; transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  border-left: calc(13 / 1024 * 100cqi) solid #1f9e8f; border-top: calc(7 / 1024 * 100cqi) solid transparent; border-bottom: calc(7 / 1024 * 100cqi) solid transparent;
}
.arw--1 { left: 42.1%; top: 41.2%; --r: 19.7deg; }
.arw--2 { left: 42.1%; top: 47.8%; --r: 0deg; }
.arw--3 { left: 42.5%; top: 53.9%; --r: -23deg; }
.arw--4 { left: 70.5%; top: 28.3%; --r: -22deg; }
.arw--5 { left: 71.6%; top: 48%; --r: 0deg; }
.arw--6 { left: 70.5%; top: 69.1%; --r: 23deg; }
.stage__say {
  position: absolute; left: 62.4%; top: 48%; transform: translate(-50%, -50%); white-space: nowrap; margin: 0;
  background: #fff; color: var(--teal); font-weight: 700; font-size: calc(13.5 / 1024 * 100cqi); line-height: 1.3; padding: .3em .6em;
  border: 1px solid var(--line); border-radius: 999px;
}
@media (max-width: 767px) {
  .stage__pic { margin-inline: calc(var(--pad) * -1); }
  .stage__pic .stage__img { margin-inline: 0; width: 100%; max-width: none; }
  .stage__say { display: none; }
  .stage__col { position: static; transform: none; justify-self: start; display: flex; align-items: center; gap: 8px; background: none; color: var(--teal); font-weight: 900; font-size: 16px; padding: 0; margin-top: 6px; }
  .stage__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 13px; font-weight: 900; line-height: 1; }
  .tag .stage__n { background: #fff; color: var(--teal); margin-right: 6px; width: 20px; height: 20px; font-size: 12px; vertical-align: 1px; }
  .stage__down { display: block; margin: -2px 0; text-align: center; color: var(--teal); font-weight: 900; font-size: 20px; line-height: 1.1; }
  .stage__down--say { font-size: 14px; }
}

/* #2 地図: 「スキル = AIに渡す手順書」・数字の札・入口の帯 (4 段にまたがる)・右端の反映・残す→振り返るの戻りの線 (文字なし) */
.sec__label-note { margin-left: 12px; color: var(--sub); font-weight: 700; font-size: 14px; letter-spacing: 0; }
.skills__count { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -10px; }
.skills__count li { border: 1.5px solid var(--teal); border-radius: 999px; color: var(--teal); font-weight: 900; font-size: 14px; line-height: 1.5; padding: 1px 12px; }
.flow__entry { max-width: 944px; margin: 26px auto 4px; padding-inline: 13.3%; }
.flow__entry-band {
  position: relative; display: flex; justify-content: center; align-items: baseline; gap: 10px;
  padding: 4px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: #eef6f5;
}
.flow__entry-band::before, .flow__entry-band::after { content: ""; position: absolute; top: 100%; width: 1.5px; height: 10px; background: var(--line); }
.flow__entry-band::before { left: 1.6%; } .flow__entry-band::after { right: 1.6%; }
.flow__entry-role { color: var(--teal); font-weight: 900; font-size: 16px; }
.flow__entry-name { color: var(--ink); font-weight: 700; font-size: 13px; }
.flow__pic { position: relative; }
.flow__apply {
  display: flex; flex-direction: column; align-items: center; margin: 0; padding: 4px 9px; line-height: 1.3;
  border: 1.5px dashed var(--teal); border-radius: 8px; background: #fff;
}
.flow__pic .flow__apply { position: absolute; left: 92%; top: 54%; transform: translateY(-50%); }
.flow__apply-role { color: var(--teal); font-weight: 900; font-size: 15px; }
.flow__apply-name { color: var(--ink); font-weight: 700; font-size: 12px; }
.flow__apply--row { display: none; }
.flow__loop { position: relative; max-width: 944px; height: 16px; margin: 14px auto 0; }
.flow__loop::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 0; height: 14px; border: 1.5px solid rgba(20, 163, 154, .75); border-top: 0; border-radius: 0 0 8px 8px; }
.flow__loop::after { content: ""; position: absolute; left: calc(12.5% - 5px); top: -7px; border: 5.5px solid transparent; border-top: 0; border-bottom: 8px solid rgba(20, 163, 154, .9); }
@media (max-width: 1023px) {
  .flow__pic .flow__apply { display: none; }
  .flow__apply--row { display: inline-flex; flex-direction: row; gap: 8px; align-items: baseline; margin: 16px 0 0 calc(50% - 50px); }
}
@media (max-width: 767px) {
  .sec__label-note { display: inline-block; margin-left: 8px; font-size: 13px; }
  .skills__count { margin-top: -8px; }
  .skills__count li { font-size: 13px; padding: 1px 10px; }
  .flow__entry { margin-top: 20px; padding-inline: 8%; }
  .flow__entry-role { font-size: 15px; }
  .flow__loop { display: none; }
  .flow__apply--row { margin: 14px 0 0 var(--pad); }
}

/* #5 10 章の帯: 玉の下に数字 1〜10 (1 と 8 は一覧の札と同じ印) */
.route__fig { max-width: 944px; margin-inline: auto; }
.route__nums { position: relative; height: 26px; margin-top: 2px; }
.route__nums li {
  position: absolute; top: 0; transform: translateX(-50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--line); color: var(--teal); font-weight: 900; font-size: 13px; line-height: 1;
}
.route__nums li.is-mark { background: var(--teal); border-color: var(--teal); color: #fff; }
.route__nums li:nth-child(1) { left: 6.6%; } .route__nums li:nth-child(2) { left: 16.8%; } .route__nums li:nth-child(3) { left: 26.7%; }
.route__nums li:nth-child(4) { left: 35.9%; } .route__nums li:nth-child(5) { left: 45.4%; } .route__nums li:nth-child(6) { left: 55%; }
.route__nums li:nth-child(7) { left: 64%; } .route__nums li:nth-child(8) { left: 73.4%; } .route__nums li:nth-child(9) { left: 83.5%; }
.route__nums li:nth-child(10) { left: 93.2%; }
@media (max-width: 767px) {
  .route__nums { height: 22px; }
  .route__nums li { width: 20px; height: 20px; font-size: 11px; }
}

/* #3 再開: 3 つの玉の下に短い札 */
.resume__fig { max-width: 944px; margin-inline: auto; }
.resume__beads { position: relative; height: 30px; margin-top: 2px; font-weight: 900; font-size: 16px; line-height: 1.4; }
.resume__beads li { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.resume__beads li:nth-child(1) { left: 17.5%; } .resume__beads li:nth-child(2) { left: 49.3%; } .resume__beads li:nth-child(3) { left: 86%; }
@media (max-width: 767px) {
  .resume__beads { height: 24px; font-size: 13px; }
}

/* #6 安心の写真: 写真の中の物に 2 語ほどの札 */
.safe__fig { position: relative; width: 377px; max-width: 100%; }
.safe__fig img { width: 100%; max-width: none; }
.obj--s1a { left: 36.7%; top: 74%; } .obj--s1b { left: 67.9%; top: 78%; }
.obj--s2a { left: 86.2%; top: 79%; }
.obj--s3a { left: 38.2%; top: 76%; } .obj--s3b { left: 78%; top: 79%; }
@media (max-width: 1023px) {
  .safe__fig { width: 100%; max-width: 377px; }
}
.flow__apply { white-space: nowrap; }

/* ---------- 図の直しの仕上げ (作った後のレビュー 2 席「通す」+ 小さな直し・_audit_2317/*_post_review.md) ---------- */
/* デモ: 「あなたが一言返す」は右へ出る 3 本の根元 (金の玉のすぐ右) */
.stage__say { left: 61%; top: 47%; }
/* 地図: 数字の札の「= 7」/ 小見出しの横の定義は小見出しと同じ大きさで濃く */
.skills__count li.is-sum { background: var(--teal); border-color: var(--teal); color: #fff; }
.sec__label-note { color: var(--ink); font-size: inherit; font-weight: 700; }
/* 地図: 反映の札に 2 行目、入口の帯から反映の札へ細い点線 (PC)。戻りの線は段の名前のすぐ下で、矢じりが「振り返る」を指す */
.flow__apply-note { color: var(--sub); font-weight: 700; font-size: 11.5px; line-height: 1.35; text-align: center; }
.flow__pic .flow__apply { left: 91.5%; }
.flow__entry { position: relative; }
@media (min-width: 1024px) {
  .flow__entry::after {
    content: ""; position: absolute; left: 86.7%; width: 10.4%; top: 50%; height: calc(50% + 4px + 40px);
    border-top: 1.5px dashed var(--teal); border-right: 1.5px dashed var(--teal); border-radius: 0 8px 0 0;
  }
}
.flow__loop { height: 14px; margin: 0 auto 6px; }
.flow__loop::before { left: 14.8%; right: 14.4%; height: 12px; }
.flow__loop::after { left: calc(14.8% - 5px); }
@media (max-width: 1023px) {
  .flow__apply--row { display: inline-flex; flex-wrap: wrap; flex-direction: row; gap: 4px 8px; align-items: baseline; margin: 12px 0 0; }
}
/* 再開: 玉 2 と玉 3 の間の線に「再開文」 */
.resume__pic { position: relative; }
.resume__chip {
  position: absolute; left: 68%; top: 46%; transform: translate(-50%, -50%); white-space: nowrap;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--teal); font-weight: 700; font-size: 13px; line-height: 1.4; padding: 1px 9px;
}
@media (max-width: 767px) {
  .resume__chip { font-size: 12px; padding: 0 7px; }
  /* 課題の札 2: 写真の左寄せ (線の終わりを枠の内側に) */
  .cards .card:nth-child(2) .card__img { object-position: 0% 50%; }
  .route__nums li { font-size: 12px; }
}
@media (max-width: 767px) { .flow__apply-note { font-size: 12px; } }

/* =====================================================================
   図の作り直し v4 (本人 11/09 09:17「わかる、ってのは図の意味が図だけでわかるってことだよね？」・10:06「当然作り直せよ / 指示を実行しろよ」
   → _audit_1006/fix_plan_v4.md)。本文を隠しても図だけで意味が言えるよう、写真の中の物に短い札。最初の画面・デモ・再開の図は触らない
   ===================================================================== */
.pobj {
  position: absolute; transform: translateX(-50%); white-space: nowrap; z-index: 1;
  background: rgba(255, 255, 255, .94); color: var(--ink); font-weight: 700; font-size: 13px; line-height: 1.3; padding: 2px 8px; border-radius: 4px;
  box-shadow: 0 2px 8px rgba(20, 35, 63, .14);
}
/* 課題の札 3 枚 */
.card__pic { position: relative; display: block; }
.pobj { font-size: 12.5px; padding: 1px 7px; }
.pobj--c1a { left: 14.5%; top: 72%; } .pobj--c1b { left: 68%; top: 77%; } .pobj--c1c { left: 74%; top: 26%; }
.pobj--c2a { left: 23%; top: 78%; } .pobj--c2b { left: 62.5%; top: 50%; transform: translateY(-50%); }
.pobj--c3a { left: 50%; top: 13%; } .pobj--c3b { left: 31%; top: 67%; transform: translateY(-50%); }
@media (max-width: 767px) {
  .card__btn { display: block; }
  .card__img { height: auto; aspect-ratio: 328 / 188; min-height: 0; }
  .cards .card:nth-child(2) .card__img { object-position: 50% 50%; }
  .card__front, .card__back { padding: 12px 40px 14px 14px; }
  .pobj { font-size: 12px; }
}

/* 地図: 段の役目を日本語で大きく先に、英語のスキル名は小さく後ろ / 反映の札 / スマホは段の間の矢印・戻りの矢印・反映の札を段の直後に */
.flow__map-role { font-weight: 900; font-size: 17px; line-height: 1.45; color: var(--ink); }
.flow__map-en { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.flow__pic .flow__apply .flow__apply-role { font-size: 13px; line-height: 1.35; text-align: center; }
.flow__apply-name { font-size: 11.5px; }
.flow__steps li.flow__arw { display: none; }
.flow__apply--row { flex-direction: row; gap: 8px; align-items: baseline; }
@media (max-width: 1023px) {
  .flow__apply--row { display: flex; width: fit-content; margin: 8px auto 0; }
}
@media (max-width: 767px) {
  .flow__steps li.flow__arw { display: block; color: var(--teal); font-weight: 900; }
  .flow__steps li.flow__arw:nth-child(5) { left: 26.5%; } .flow__steps li.flow__arw:nth-child(6) { left: 50%; } .flow__steps li.flow__arw:nth-child(7) { left: 73.8%; }
  .flow__loop { display: block; margin-bottom: 4px; }
  .flow__map-role { font-size: 16px; }
  .flow__apply--row .flow__apply-role { font-size: 14px; }
  .flow__apply-name { font-size: 12px; }
}

/* 10 章の帯: 玉 1 と玉 8 の上に札、左端と右端に章 */
.route__top { position: relative; height: 42px; margin: 0; }
.route__top li, .route__bot li { position: absolute; transform: translateX(-50%); white-space: nowrap; text-align: center; color: var(--teal); font-weight: 900; }
.route__top li { bottom: 8px; font-size: 14px; line-height: 1.25; }
.route__top li::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 7px; background: var(--teal); }
.route__top .at-1, .route__bot .at-1 { left: 6.6%; } .route__top .at-8 { left: 73.4%; } .route__bot .at-10 { left: 93.2%; }
.route__bot { position: relative; height: 24px; margin-top: 2px; }
.route__bot li { top: 0; font-size: 13px; }
@media (max-width: 767px) {
  .route__top { height: 38px; }
  .route__top li { font-size: 12px; bottom: 7px; }
  .route__bot li { font-size: 12px; }
}

/* 安心の写真 */
.obj--s1a { left: 36.7%; top: 74%; } .obj--s1b { left: 67.9%; top: 78%; } .obj--s1c { left: 58%; top: 8%; }
.obj--s2b { left: 30%; top: 79%; } .obj--s2a { left: 86.2%; top: 79%; }
.obj--s3a { left: 38.2%; top: 76%; } .obj--s3b { left: 78%; top: 79%; } .obj--s3c { left: 60%; top: 26%; }
.back { position: absolute; left: 53%; top: 50%; width: 14%; height: 0; border-top: 1.5px solid var(--teal); }
.back::after { content: ""; position: absolute; right: -2px; top: -5.5px; border: 5px solid transparent; border-right: 0; border-left: 8px solid var(--teal); }

/* 最後の写真 (11/09 23:27 から文字なしの写真・札なし・溶かしなし) */
.final__pic { display: block; }
.flow__map-en span { white-space: nowrap; }
.pobj--c3b { left: 32.5%; }
.obj--s1c { left: 62%; top: 6%; }

/* v4 の図だけのテストを受けた札の小さな直し: 反映の札は 3 行 (反映：メモを / 書き換えるのは / ここだけ)・安心 1 の札は長くなったので少し右へ・スマホの再開の札に余白 */
.flow__pic .flow__apply { left: 91%; }
.obj--s1c { left: 64%; }
@media (max-width: 767px) { .resume__beads { height: 30px; margin-top: 6px; } .resume__beads li { font-size: 13px; } }

/* ---------- §4 の図の差し替え (本人 11/09 10:45・10:48・18:49「進めて」): 文字の無い 1 枚の写真 (_design_1045/s04/map_v3.png) を中身の幅で置き、
   文は図の下の普通の一覧に。前の流れの写真と札の段 (.flow__*・.skills__count) は使わない ---------- */
.map__photo { width: 100%; max-width: 944px; margin: 6px auto 0; aspect-ratio: 1774 / 680; }
/* .fade-map (地図の写真の溶かし) は外した: 写真の台を白 (縁 255) にしたため (LP-04・11/10) */
.skills__stages { margin-top: 20px; }
.skills__apply { margin-top: 10px; }
.skills .sec__close--left { margin-top: 10px; }

/* ---------- §5 の図の差し替え (本人 11/09 10:45・10:48・19:11「ok」): 文字の無いらせん階段の写真 (_design_1045/s05/route_v1.png)。
   前の帯の写真と札の段 (.route__fig .route__top .route__bot) は使わない ---------- */
.route__stairs { width: 100%; max-width: 820px; margin: 4px auto 0; aspect-ratio: 1555 / 793; }
.fade-stairs {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}

/* §5 の階段の写真は白い地の版 (縁は 255) に替えたので溶かしなし (本人の却下「ブラーで適当に境界置いてある」・LP-04) */
.route__stairs { -webkit-mask-image: none; mask-image: none; }

/* ---------- §6 の図の差し替え (本人 11/09 10:45・10:48・19:31「ok」): 白い地の写真 (縁は 255) を中身の幅で。溶かしなし ---------- */
.resume__box { width: 100%; max-width: 944px; margin: 4px auto 0; aspect-ratio: 1983 / 560; -webkit-mask-image: none; mask-image: none; }

/* ---------- §7 の写真は前と後の 2 場面 (本人 23:18): PC は写真の列を 377 → 480px に広げて細部を読めるように (文字は右のまま)。768〜1023 は 48%。スマホは全幅のまま。溶かしなし ---------- */
@media (min-width: 1024px) { .safe__row { grid-template-columns: 480px minmax(0, 1fr); } .safe__fig { width: 480px; } }
@media (min-width: 768px) and (max-width: 1023px) { .safe__row { grid-template-columns: minmax(0, 48%) minmax(0, 1fr); } .safe__fig { width: 100%; max-width: 480px; } }
@media (max-width: 767px) { .safe__fig { width: 100%; max-width: none; } }
.safe__fig img { border-radius: 0; -webkit-mask-image: none; mask-image: none; }

/* ---------- §11 最後の節 = 最初の画面の絵 (W5 の光の点の網) の組み直し (本人 11/10 00:28「あり得ん．、無しです / fvの画像を調整する形にしてください」・00:29「気持ち悪すぎる」)
   絵は最初の画面と同じファイル (fv-pc.webp / fv-sp.webp・新しい生成なし・色はそのまま)。変えるのは見せる所・位置・倍率だけ。溶かし・ぼかし・覆い・白い幕なし。
   PC と 768〜1023: 最初の画面と同じ作り (絵は節の幅いっぱいの背景・見出しと金のボタンは左の白い所・左の始まりは最初の画面と同じ・フッターも同じ左)。
     倍率 --s は最初の画面と同じ高さの式 (PC = clamp(720px, 100vh, 1200px) / 887・768〜1023 = 664px / 887) = 最初の画面より拡大しない。
     位置: 右の縁で見せる所を元の x=1352 までにする (= 絵の上の縁の見える所が白 (250 以上)・いちばん明るい金の光は右の縁で見出しの高さ。最初の画面と同じく光が右の縁の外へ続く)。
     網の密な所 (元の x≈760 から) が文字の列の右から 48px 以上離れるよう、必要なら右へずらす。絵の下の縁 = 節の下の縁 = ページの終わり。
   スマホ (本人 11/10 07:47「スマホは無駄な余白いらないですね / 画像をそれ用に作り替えてください」 / 11:38「末尾CTAはわざわざスペース開けて画像挟む意味ないような。キャプション、CTA.下部に画像　でも良いと思うんですが」): 見出し (大きな 2 行) → 金のボタン → スマホ用の横長の網 (final-sp.webp・W5 の世界で生成し
     最初の画面のスマホと同じ式で明るさを合わせた物) を画面の幅いっぱい (左右は画面の縁の外へ続く・上下は白の行で切ってある) → フッター。 ---------- */
.final__bg, .final__photo--sp { margin: 0; }
.final__bg { display: none; }
@media (min-width: 768px) {
  .final { container-type: inline-size; position: relative; overflow: hidden; display: flex; flex-direction: column;
    padding: 0; margin-top: 56px; --s: calc(664px / 887); --L: 40px; --C: 356px; }
  .final__bg { display: block; position: absolute; top: 0; z-index: 0; pointer-events: none; width: calc(1774 * var(--s));
    left: max(calc(100cqi - 1352 * var(--s)), calc(var(--L) + var(--C) + 48px - 760 * var(--s))); }
  .final__bg img { display: block; width: 100%; height: auto; max-width: none; }
  .sec.final:last-of-type { padding-bottom: 0; }  /* 絵の下の縁 = 節の下の縁 = ページの終わり (最後の節の 8px の下の余白を消す) */
  .final__grid { position: relative; z-index: 1; flex: 1 0 auto; display: flex; align-items: center; width: 100%; max-width: none; margin: 0; padding: 0 0 40px var(--L);
    min-height: calc(887 * var(--s)); }
  .final__text { width: var(--C); flex: none; }
  .final__photo--sp { display: none; }
  .final .foot { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; width: auto; max-width: none; margin: 0; padding: 16px var(--pad) 12px var(--L); }
}
@media (min-width: 1024px) {
  .final { --s: calc(clamp(720px, 100vh, 1200px) / 887); --L: 6cqi; --C: clamp(360px, 39cqi, 503px); }
  .final .h2--big { font-size: calc(var(--C) / 8.2); line-height: 1.25; }
  .final__text .cta-wrap { margin-top: calc(var(--C) * .07); }
  .final__text .cta { width: var(--C); height: calc(var(--C) * 88 / 503); min-width: 0; padding: 0 24px; font-size: calc(var(--C) * 31 / 503); }
}
@media (max-width: 767px) {
  .final { container-type: inline-size; }
  .final #final-title { font-size: clamp(34px, 9.5cqi, 52px); line-height: 1.25; }
  /* 点の細かさは最初の画面のスマホと同じ倍率 (元の 853px が min(100cqi, 520px))。左右は画面の縁で切れ、金の光 (元の x=705) は幅の 55% */
  .final__photo--sp { --s: max(calc(min(100cqi, 520px) / 853), calc(100cqi / 1254)); display: block; position: relative; overflow: hidden;
    width: 100cqi; height: calc(937 * var(--s)); margin: 20px 0 0 calc(50% - 50cqi); }
  .final__photo--sp img { position: absolute; top: 0; width: calc(1254 * var(--s)); max-width: none; height: auto;
    left: clamp(calc(100cqi - 1254 * var(--s)), calc(55cqi - 705 * var(--s)), 0px); }
  .final__text .cta-wrap { margin-top: 20px; position: relative; z-index: 1; }  /* ボタンの影は下の絵の上に描く (影を切らない) */
}