/* ===========================================================================
   lp.css — CORE 総合適性検査 ランディングページ
   ---------------------------------------------------------------------------
   * CSP `default-src 'self'` 下で動く。外部フォント／外部画像／CDN は使わない。
     インライン style / インライン script も置かない（本ファイルだけで組む）。
   * 配色は report.css と同系（基調 #1F5FA8 ／ 良好 #0A8F86 ／ 注意 #B26B00）。
     グレーは中立灰ではなく、基調の青へわずかに寄せた寒色グレーを使う。
   * 書体は端末内蔵のみ。見出しの一部（ヒーロー・物語節）を明朝、
     それ以外をゴシックにして、二書体の役割分担で調子をつける。
   * 意味は色だけに載せない（ラベル語・罫線・配置で示す）。
   =========================================================================== */

:root {
  color-scheme: light;

  --ink:        #14181D;
  --ink-2:      #3E454E;
  --muted:      #6B727B;
  --line:       #D5DBE2;
  --line-soft:  #E7EBF0;
  --ground:     #F4F7FA;
  --surface:    #FFFFFF;
  --surface-2:  #EEF3F8;

  --base:       #1F5FA8;
  --base-deep:  #16457A;
  --base-tint:  #EAF1F9;
  --good:       #0A8F86;
  --warn:       #B26B00;
  --warn-tint:  #FBF3E4;

  --focus:      #16457A;
  --btn-bg:     #16457A;
  --btn-bg-h:   #1F5FA8;
  --btn-fg:     #FFFFFF;

  --gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
            "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo,
            system-ui, -apple-system, sans-serif;
  --mincho: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho",
            YuMincho, "Noto Serif JP", "MS PMincho", serif;

  --wrap: 1080px;
  --read: 34em;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink:       #E8EDF3;
    --ink-2:     #C0C8D2;
    --muted:     #99A2AD;
    --line:      #333C47;
    --line-soft: #262E38;
    --ground:    #11151A;
    --surface:   #181E25;
    --surface-2: #1E2731;
    --base:      #7FB2EA;
    --base-deep: #A8CBF4;
    --base-tint: #172434;
    --good:      #4FC3B8;
    --warn:      #D9A155;
    --warn-tint: #2A2317;
    --focus:     #A8CBF4;
    --btn-bg:    #A8CBF4;
    --btn-bg-h:  #C6DDF8;
    --btn-fg:    #0E1A28;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:       #E8EDF3;
  --ink-2:     #C0C8D2;
  --muted:     #99A2AD;
  --line:      #333C47;
  --line-soft: #262E38;
  --ground:    #11151A;
  --surface:   #181E25;
  --surface-2: #1E2731;
  --base:      #7FB2EA;
  --base-deep: #A8CBF4;
  --base-tint: #172434;
  --good:      #4FC3B8;
  --warn:      #D9A155;
  --warn-tint: #2A2317;
  --focus:     #A8CBF4;
  --btn-bg:    #A8CBF4;
  --btn-bg-h:  #C6DDF8;
  --btn-fg:    #0E1A28;
}

/* --- 土台 ---------------------------------------------------------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--base-deep); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 16px;
  z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* --- 上部の帯 ------------------------------------------------------------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand { margin: 0; font-size: 15px; line-height: 1.4; }
.brand-mark {
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--base-deep);
}
.brand-name { color: var(--ink-2); }
.topbar-note {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .08em;
  color: var(--warn);
  border: 1px solid var(--warn);
  background: var(--warn-tint);
  padding: 2px 10px;
  border-radius: 2px;
}

/* --- 節の共通形 ----------------------------------------------------------- */
section { padding: 68px 0; border-top: 1px solid var(--line-soft); }
section:first-of-type { border-top: 0; }

.sec-label {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--base);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--base);
  display: inline-block;
}

/* 見出しは語の途中で折り返さない。改行は .ph（句）の切れ目でだけ起こす。 */
h1, h2 {
  word-break: keep-all;
  overflow-wrap: normal;
}
/* 句の中では絶対に折り返さない。`word-break: keep-all` でも 』 や 、 の直後は改行が
   許されるため、列が狭いと「『似た人』｜を見つけて、」で割れていた（2026-09-22 オーナー指摘）。 */
.ph { display: inline-block; white-space: nowrap; }

h2 {
  font-size: clamp(21px, 3.4vw, 30px);
  line-height: 1.55;
  letter-spacing: .01em;
  margin: 0 0 20px;
  text-wrap: balance;
  font-weight: 700;
}

h3 {
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--base-deep);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.sec-lead {
  max-width: var(--read);
  color: var(--ink-2);
  margin-bottom: 28px;
}

.note {
  max-width: var(--read);
  margin-top: 26px;
  padding: 12px 16px;
  border-left: 3px solid var(--warn);
  background: var(--warn-tint);
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.8;
}

/* --- 1 ヒーロー ----------------------------------------------------------- */
.hero {
  background: var(--surface);
  padding: 64px 0 60px;
  border-bottom: 1px solid var(--line);
}
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "eyebrow"
    "title"
    "visual"
    "lead"
    "actions"
    "facts"
    "note";
}
.hero-layout > .eyebrow { grid-area: eyebrow; }
.hero-layout > h1 { grid-area: title; }
.hero-layout > .lead { grid-area: lead; }
.hero-layout > .hero-cta { grid-area: actions; }
.hero-layout > .hero-facts { grid-area: facts; }
.hero-layout > .hero-note { grid-area: note; margin-top: 0; }
.eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--muted);
}
.hero h1 {
  font-family: var(--mincho);
  font-size: clamp(26px, 5.6vw, 44px);
  line-height: 1.5;
  letter-spacing: .015em;
  font-weight: 600;
  margin: 0 0 26px;
  text-wrap: balance;
  max-width: 22em;
}
/* 確定見出しは10字・11字・8字の3行。句の中でも句どうしでも改行位置を変えない。 */
.hero h1 .ph { display: block; }
.hero-visual {
  grid-area: visual;
  width: min(100%, 620px);
  margin: 0 auto 28px;
  padding: 10px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #E6EAEF;
  border-radius: 18px;
}
.hero-art { width: 100%; height: auto; padding: 8px; object-fit: contain; }
.lead {
  max-width: var(--read);
  color: var(--ink-2);
  font-size: 16.5px;
  margin-bottom: 30px;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin: 0 0 30px;
}
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.5;
  padding: 14px 26px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.btn-main {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-color: var(--btn-bg);
}
.btn-main:hover { background: var(--btn-bg-h); border-color: var(--btn-bg-h); }
.btn-sub {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  opacity: .92;
}
.btn-quiet {
  background: transparent;
  color: var(--base-deep);
  border-color: var(--line);
  padding: 14px 20px;
}
.btn-quiet:hover { border-color: var(--base); }

.hero-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.hero-facts li {
  padding-left: 14px;
  border-left: 3px solid var(--good);
}
.hero-facts b { color: var(--ink); }

/* 外部SVGは <img> の境界を越えて color を継承しないため、SVG側にも基調色を持たせる。
   暗色時も同じ許可色を白い無影プレート上で表示し、線の視認性を保つ。 */
.visual-icon {
  width: 64px;
  height: 64px;
  padding: 7px;
  flex: none;
  color: var(--base);
  background: #FFFFFF;
  border: 1px solid #E6EAEF;
  border-radius: 14px;
  object-fit: contain;
}

/* --- 2 課題の共感 --------------------------------------------------------- */
.story h2 { font-family: var(--mincho); font-weight: 600; }
.story-body {
  max-width: var(--read);
  font-family: var(--mincho);
  font-size: 17px;
  line-height: 2;
  color: var(--ink-2);
  margin-bottom: 36px;
}
.cases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
.cases li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--base);
  padding: 20px 20px 22px;
  border-radius: 12px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "copy copy";
  gap: 14px;
}
.case-icon { grid-area: icon; width: 56px; height: 56px; }
.cases h3 { grid-area: title; align-self: center; margin: 0; }
.cases p { font-size: 15px; color: var(--ink-2); }
.cases li > p { grid-area: copy; }

/* --- 3 考え方 ------------------------------------------------------------- */
.idea { background: var(--surface); }
.cols {
  display: grid;
  gap: 26px 40px;
  grid-template-columns: 1fr;
}
.col p { color: var(--ink-2); }

/* --- 4 手順 --------------------------------------------------------------- */
.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
.step-list li {
  padding: 22px 0 22px 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 6px 16px;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas:
    "number number"
    "icon title"
    "copy copy";
}
.step-list li:last-child { border-bottom: 1px solid var(--line); }
.step-icon { grid-area: icon; }
.step-n {
  grid-area: number;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--base);
  font-variant-numeric: tabular-nums;
}
.step-list h3 { grid-area: title; align-self: center; margin: 0; }
.step-list p:not(.step-n) { color: var(--ink-2); }
.step-list li > p:not(.step-n) { grid-area: copy; }

/* --- 5 レポート ----------------------------------------------------------- */
.report { background: var(--surface); }
.shot {
  margin: 0 0 26px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 14px;
}
.shot img { border: 1px solid var(--line-soft); background: #FFFFFF; }
.shot figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
.shot figcaption b { color: var(--ink); }

.feat-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin: 30px 0;
}
.feat {
  border-left: 3px solid var(--good);
  padding: 2px 0 2px 16px;
}
.feat p { font-size: 15px; color: var(--ink-2); }

.shot-pair {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
.shot-pair .shot { margin: 0; }

/* --- 6 無料の条件 --------------------------------------------------------- */
.terms-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
.term {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 20px;
}
.term-n {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--warn);
}
.term p:not(.term-n) { font-size: 15px; color: var(--ink-2); }

.term-list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: var(--read);
}
.term-list li {
  font-size: 15px;
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
}
.term-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .82em;
  width: 8px;
  height: 1px;
  background: var(--base);
}
.term-list b { color: var(--ink); }

/* --- 7 つくりかた --------------------------------------------------------- */
.trust { background: var(--surface); }
.trust-grid {
  margin: 0;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
.trust-grid > div {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
dt {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  color: var(--base-deep);
  margin-bottom: 4px;
}
.safe-icon { width: 120px; height: 120px; }
dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
}

/* --- 8 よくある質問 ------------------------------------------------------- */
.faq-list {
  max-width: 46em;
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.faq-list summary {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  line-height: 1.7;
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before {
  content: "Q";
  color: var(--base);
  font-size: 14px;
  letter-spacing: .1em;
  flex: none;
  padding-top: .15em;
}
.faq-list details[open] summary { color: var(--base-deep); }
.faq-list details p {
  margin: 0;
  padding: 0 18px 18px 42px;
  color: var(--ink-2);
  font-size: 15px;
}

/* --- 9 申込 --------------------------------------------------------------- */
.cta {
  background: var(--base-tint);
  border-top: 1px solid var(--line);
}
.cta-in { max-width: 46em; }
.cta h2 { font-family: var(--mincho); font-weight: 600; }
.cta p { color: var(--ink-2); max-width: var(--read); }
.cta .hero-cta { margin-top: 26px; margin-bottom: 12px; }
.cta-note { font-size: 14px; color: var(--muted); }

/* --- フッター ------------------------------------------------------------- */
.foot {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 34px 0 46px;
}
.foot-name {
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--base-deep);
}
.foot-note {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  max-width: var(--read);
}

/* --- 画面幅の変化 --------------------------------------------------------- */
.br-lg { display: none; }

@media (min-width: 720px) {
  .cases { grid-template-columns: repeat(3, 1fr); }
  .cols { grid-template-columns: 1fr 1fr; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .terms-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .step-list li {
    grid-template-columns: 7em 64px minmax(0, 1fr);
    grid-template-areas:
      "number icon title"
      ". . copy";
    column-gap: 20px;
  }
  .step-n { padding-top: .2em; }
  .shot-pair { grid-template-columns: 1fr 1fr; }
  section { padding: 84px 0; }
}

@media (min-width: 1000px) {
  .br-lg { display: inline; }
  body { font-size: 16.5px; }
  .hero-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    grid-template-areas:
      "eyebrow visual"
      "title visual"
      "lead visual"
      "actions visual"
      "facts visual"
      "note visual";
    column-gap: 48px;
    align-items: start;
  }
  .hero-visual {
    width: 100%;
    margin: 10px 0 0;
    align-self: center;
  }
}

/* === ブロックの並べ方（lay-*） =====================================
   lp/content.toml の layout がそのままクラス名になる。
   既定の見え方は上の各セクションの指定どおりで、ここは上書き用。
   ================================================================= */
.lay-2col, .lay-3col, .lay-4col, .lay-list { grid-template-columns: minmax(0, 1fr); }

.cols.lay-full { grid-template-columns: minmax(0, 1fr); }
.cta-in.lay-full { max-width: none; }

.hero-layout.lay-image-below {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "eyebrow"
    "title"
    "visual"
    "lead"
    "actions"
    "facts"
    "note";
}

@media (min-width: 720px) {
  .lay-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lay-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lay-4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lay-list { grid-template-columns: minmax(0, 1fr); }
  .faq-list.lay-2col { display: grid; column-gap: 24px; align-items: start; }
  .cols.lay-full { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1000px) {
  .hero-layout.lay-image-left {
    grid-template-columns: minmax(360px, .75fr) minmax(0, 1.25fr);
    grid-template-areas:
      "visual eyebrow"
      "visual title"
      "visual lead"
      "visual actions"
      "visual facts"
      "visual note";
  }
  .hero-layout.lay-image-below {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "visual"
      "lead"
      "actions"
      "facts"
      "note";
  }
  .hero-layout.lay-image-below .hero-visual {
    width: min(100%, 620px);
    margin: 0 auto 28px;
  }
}

/* =========================================================================
   v4：構造で見せるための追加。帯の交互・数字・タブ・料金表・固定CTAなど。
   既存のセクション指定は残したまま、ここで上書きする。
   ========================================================================= */

/* --- 帯の交互（並び替えても自動で互い違いになる） ------------------------ */
main > section:nth-of-type(odd) { background: var(--surface); }
main > section:nth-of-type(even) { background: var(--ground); }

/* 薄い帯には45度の細いストライプを敷く（不透明度は素材側で 0.05） */
main > section:nth-of-type(odd),
main > section:nth-of-type(even) {
  background-image: url(img/band-lines.svg);
  background-repeat: repeat;
  background-size: 160px 160px;
}

/* --- 濃い帯（数字・最終CTA） -------------------------------------------- */
main > section.numbers,
main > section.final-cta {
  background: var(--base-deep);
  color: #FFFFFF;
  border-top: 0;
}

/* 濃い帯（数字・POINT・最終CTA）にはごく薄い点を敷く（不透明度は素材側で 0.10） */
main > section.numbers,
main > section.points,
main > section.final-cta {
  background-image: url(img/band-dots.svg);
  background-repeat: repeat;
  background-size: 160px 160px;
}
.numbers h2, .final-cta h2 { color: #FFFFFF; }
.numbers .sec-label, .final-cta .sec-label { color: #BFD6EF; border-bottom-color: #4C7FBB; }
.numbers .note {
  background: rgba(255, 255, 255, .08);
  border-left-color: #E0B173;
  color: #DCE7F3;
}
.final-cta p { color: #DCE7F3; }
.final-cta .cta-note { color: #AFC5DC; }
/* 濃い帯の上のボタンは白地・濃紺文字にする（帯に沈まないように） */
.numbers .btn-main, .final-cta .btn-main {
  background: #FFFFFF; border-color: #FFFFFF; color: var(--base-deep);
}
.numbers .btn-main:hover, .final-cta .btn-main:hover { background: #DCE9F7; border-color: #DCE9F7; }
.numbers .btn-main .btn-sub, .final-cta .btn-main .btn-sub { color: #3C6DA8; }

/* --- 薄い基調の帯（強み） ----------------------------------------------- */
main > section.points { background-color: var(--base-tint); }

/* --- 固定ヘッダ ---------------------------------------------------------- */
.topbar.lay-fixed {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: padding .18s ease, box-shadow .18s ease;
}
.topbar.lay-fixed.small {
  box-shadow: 0 1px 10px rgba(20, 24, 29, .10);
}
.topbar.lay-fixed.small .topbar-in { padding-top: 6px; padding-bottom: 6px; }
.topbar.lay-fixed.small .brand-name { display: none; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.btn-sm { padding: 8px 16px; font-size: 13px; border-radius: 3px; }
.btn-lg { padding: 18px 40px; font-size: 17px; }
.hero-cta.center { justify-content: center; }

/* --- 出現アニメーション ---------------------------------------------------
   隠す指定は `html.js`（＝lp.js が動いたとき）にだけ効かせる。
   JSが読み込めない・失敗したときは最初から全部見える。 */
html.anim .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
html.anim .reveal.shown { opacity: 1; transform: none; }

/* --- 数字の帯 ------------------------------------------------------------ */
.num-grid {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.num-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
  padding: 18px 14px 16px;
  text-align: center;
}
.num { margin: 0 0 4px; line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.num-v {
  font-size: clamp(34px, 7vw, 52px);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.num-u { font-size: 16px; font-weight: 700; color: #CFE0F2; }
.num-h { margin: 0; font-size: 13.5px; line-height: 1.6; color: #DCE7F3; }
.num-b { margin: 4px 0 0; font-size: 12.5px; color: #B9CEE4; }

/* --- 理由・強み・手順に共通の大きな番号 ---------------------------------- */
.reason-list, .point-list, .flow {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr);
}
.reason, .point, .flow-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px;
}
.reason-n, .point-n, .flow-n {
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--base);
}
.reason-n { font-size: clamp(28px, 5vw, 40px); line-height: 1; color: var(--line); }
.point-n { font-size: 14px; color: var(--warn); }
.flow-n { font-size: 13px; }
.reason p:not(.reason-n), .point p:not(.point-n), .flow-step p:not(.flow-n) {
  font-size: 15px; color: var(--ink-2);
}
.reason-icon, .flow-icon { width: 80px; height: 80px; }
.point-icon { width: 96px; height: 96px; }
.point { border-top: 3px solid var(--base); }

/* 手順の矢印（横並びのとき） */
.flow.lay-3col > li { position: relative; }

/* 図版なしの通常カード。図版付き・stack は各レイアウトで定義する。 */
.benefit-grid:not(.lay-2col-illust) {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr);
}
.benefit-grid:not(.lay-2col-illust):not(.lay-stack) > .benefit {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
}
.benefit-icon { width: 80px; height: 80px; }
.benefit-grid:not(.lay-2col-illust):not(.lay-stack) p {
  font-size: 15px; color: var(--ink-2);
}

/* --- 比較の2列 ------------------------------------------------------------ */
.cmp { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
.cmp-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px 20px 20px;
}
.cmp-col h3 { color: var(--muted); }
.cmp-accent { border-color: var(--base); border-top: 3px solid var(--base); }
.cmp-accent h3 { color: var(--base-deep); }
.cmp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cmp-list li {
  font-size: 15px; color: var(--ink-2);
  padding-left: 24px; position: relative;
}
.cmp-list li::before {
  content: "―"; position: absolute; left: 0; color: var(--muted);
}
.cmp-accent .cmp-list li::before { content: "✓"; color: var(--good); font-weight: 700; }

/* --- レポートのタブ -------------------------------------------------------- */
.tabs { margin-top: 24px; }
.tab-btns {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 2px solid var(--line); margin-bottom: 18px;
}
.tab-btn {
  font: inherit; font-size: 14px; font-weight: 700;
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  color: var(--muted); padding: 10px 14px; cursor: pointer; margin-bottom: -2px;
}
.tab-btn:hover { color: var(--base-deep); }
.tab-btn[aria-selected="true"] { color: var(--base-deep); border-bottom-color: var(--base); }
.tab-panel { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
/* JSが動かないときはタブにせず、3枚とも縦に並べて全部読めるようにする。
   タブの見出しボタンも隠す（押しても切り替わらないため）。 */
.tab-panel[hidden] { display: grid; }
.tab-btns { display: none; }
.tab-panel + .tab-panel { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
html.js .tab-panel[hidden] { display: none; }
html.js .tab-btns { display: flex; }
html.js .tab-panel + .tab-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.tab-text h3 { font-size: 17px; }
.tab-text p { color: var(--ink-2); }

/* --- 料金表風の無料条件 ---------------------------------------------------- */
.price-card {
  background: var(--surface);
  border: 2px solid var(--base);
  border-radius: 10px;
  padding: 26px 22px;
  margin-top: 24px;
  display: grid;
  gap: 18px;
}
.price-badge {
  justify-self: start;
  margin: 0;
  background: var(--warn-tint);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  padding: 3px 12px; border-radius: 999px;
}
.price { margin: 0; line-height: 1; }
.price b {
  font-size: clamp(48px, 12vw, 84px);
  letter-spacing: -.03em;
  color: var(--base-deep);
  font-variant-numeric: tabular-nums;
}
.price-note { margin: 0; color: var(--ink-2); font-size: 15px; }
.promises { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.promise {
  border: 1px solid var(--line); border-radius: 6px; padding: 16px;
  background: var(--ground);
}
.promise-n {
  margin: 0 0 4px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; color: var(--warn);
}
.promise p:not(.promise-n) { font-size: 14.5px; color: var(--ink-2); }
.checks, .crosses { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.checks li, .crosses li {
  font-size: 14px; color: var(--ink-2); padding-left: 24px; position: relative;
}
.checks li::before {
  content: "✓"; position: absolute; left: 2px; color: var(--good); font-weight: 700;
}
.crosses li::before {
  content: "×"; position: absolute; left: 2px; color: var(--warn); font-weight: 700;
}
.target { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.target-col h3 { font-size: 15px; }
.target-no h3 { color: var(--warn); }

/* --- スマホ下部の固定ボタン ------------------------------------------------ */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  /* 隠れているあいだは Tab でも届かない（visibility）。下へ引っ込む動きが終わってから消す。 */
  visibility: hidden;
  transform: translateY(110%);
  transition: transform .22s ease, visibility 0s linear .22s;
}
.sticky-cta.on { visibility: visible; transform: none; transition: transform .22s ease, visibility 0s; }
/* 文字は12px台なので 4.5:1 以上の色（--warn は白地で 4.2:1、ダークで約 2.1:1 だった）。 */
.sticky-note {
  margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; color: var(--base-deep);
}
.sticky-cta .btn { padding: 12px 18px; }

@media (max-width: 719px) {
  .sticky-cta.lay-mobile { display: flex; }
  body { padding-bottom: 0; }
  main > section:last-of-type { padding-bottom: 96px; }
}

@media (min-width: 720px) {
  .num-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .num-grid.lay-4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .num-grid.lay-5col { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .reason-list.lay-3col, .point-list.lay-3col, .flow.lay-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .benefit-grid.lay-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .benefit-grid.lay-4col { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .benefit-grid.lay-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp.lay-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .target { grid-template-columns: 1.2fr .8fr; column-gap: 28px; }
  .tab-panel { grid-template-columns: 1.15fr .85fr; align-items: start; gap: 24px; }
  .price-card { padding: 32px 30px; }
  /* 手順のあいだに矢印を置く */
  .flow.lay-3col { column-gap: 34px; }
  .flow.lay-3col > li + li::before {
    content: "";
    position: absolute;
    left: -25px; top: 50%;
    width: 14px; height: 14px;
    border-top: 2px solid var(--line);
    border-right: 2px solid var(--line);
    transform: translateY(-50%) rotate(45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html.anim .reveal, .reveal { opacity: 1 !important; transform: none !important; }
  /* 固定ボタンの出し入れ（.on）は動きを減らす設定でも効かせる。動きだけを止める。 */
}

/* =========================================================================
   v5：参考画像の4つの型（2026-09-04 オーナー指示）
   ① STEPカード横並び（flow lay-cards）② 矢羽根ステップ帯（reasons lay-chevron）
   ③ 強調比較表（compare lay-table）④ 縦カード＋矢印（flow/benefits lay-stack）
   共通：アイコンは必ず淡色の面の上に置く。番号は本文の2〜3倍。余白は広め。
   ========================================================================= */

/* --- ① STEPカード横並び ---------------------------------------------------- */
.flow.lay-cards {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr);
}
.flow.lay-cards > li {
  position: relative;
  background: none; border: 0; border-radius: 0; padding: 0;
  text-align: center;
}
.flow.lay-cards .flow-n {
  margin: 0 0 14px;
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  color: var(--base);
}
.flow.lay-cards .flow-n-w {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.flow.lay-cards .flow-n-d {
  font-size: clamp(30px, 4.4vw, 42px); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.flow.lay-cards .flow-card {
  background: var(--base-tint);
  border-radius: 14px;
  padding: 34px 22px 26px;
  display: grid; justify-items: center; gap: 16px;
}
.flow.lay-cards .flow-icon { width: 132px; height: 132px; }
.flow.lay-cards .flow-card h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.flow.lay-cards .flow-body {
  margin: 18px auto 0; max-width: 30em;
  font-size: 15px; line-height: 1.9; color: var(--ink-2); text-align: center;
}

/* --- ② 矢羽根ステップ帯 ---------------------------------------------------- */
.reason-list.lay-chevron {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr);
}
.reason-list.lay-chevron > li {
  background: none; border: 0; border-radius: 0; padding: 0;
}
.reason-list.lay-chevron .reason-n { margin: 0 0 20px; font-size: inherit; color: inherit; }
.reason-list.lay-chevron .chev {
  display: block;
  background: var(--base-deep);
  color: #FFFFFF;
  font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; line-height: 1;
  letter-spacing: .1em; font-variant-numeric: tabular-nums;
  padding: 14px 34px 14px 20px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
}
.reason-list.lay-chevron .reason-ico {
  width: 104px; height: 104px; margin: 0 0 16px;
  border-radius: 14px; background: var(--base-tint);
  display: grid; place-items: center;
}
.reason-list.lay-chevron .reason-icon { width: 68px; height: 68px; }
.reason-list.lay-chevron h3 {
  margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--base-deep);
}
.reason-list.lay-chevron .reason-box {
  margin: 0;
  background: #F4F6F8;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 16px 18px;
  font-size: 15px; line-height: 1.9; color: var(--ink-2);
}

/* --- ③ 強調比較表 ---------------------------------------------------------- */
.cmp-scroll { margin-top: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table {
  width: 100%; min-width: 560px;
  border-collapse: collapse;
  border: 2px solid var(--base-deep);
  background: var(--surface);
}
.cmp-table th, .cmp-table td {
  text-align: left; vertical-align: top;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px; line-height: 1.8; color: var(--ink-2);
}
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table th {
  font-size: 16px; font-weight: 700; color: var(--muted);
  background: var(--ground);
  border-bottom: 2px solid var(--base-deep);
}
.cmp-table th.is-accent {
  background: var(--base-deep); color: #FFFFFF;
}
.cmp-table td.is-accent {
  background: var(--base-tint); color: var(--ink); font-weight: 700;
}
.cmp-table td + td, .cmp-table th + th { border-left: 1px solid var(--line-soft); }

/* --- ④ 縦カード＋矢印 ------------------------------------------------------ */
.flow.lay-stack, .benefit-grid.lay-stack {
  list-style: none; padding: 0;
  margin: 36px auto 0; max-width: 760px;
  display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr);
}

.flow.lay-stack > li, .benefit-grid.lay-stack > li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  display: grid; grid-template-columns: 136px minmax(0, 1fr);
  align-items: center; gap: 20px;
}
.stack-ico {
  width: 136px; height: 136px;
  border-radius: 50%;
  background: var(--base-tint);
  display: grid; place-items: center;
}
.benefit-grid.lay-stack .stack-ico { border-radius: 16px; }
.stack-icon { width: 112px; height: 112px; }
.stack-body h3 {
  margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--ink);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
}
.stack-n {
  font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1;
  color: var(--base); font-variant-numeric: tabular-nums;
}
.stack-badge {
  align-self: center;
  background: var(--base); color: #FFFFFF;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  border-radius: 999px; padding: 4px 12px;
}
.stack-body p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.stack-body b { color: var(--ink); }
/* カードのあいだの下向き三角（基調色の薄いトーン） */
.flow.lay-stack > li + li::before {
  content: "";
  position: absolute; left: 50%; top: -20px;
  width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 14px solid #BFD6EF;
}

@media (min-width: 720px) {
  .flow.lay-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  /* 列と列を細い横線でつなぐ（STEP番号の高さ） */
  .flow.lay-cards > li + li::before {
    content: "";
    position: absolute;
    left: -40px; top: 24px;
    width: 40px; height: 1px;
    background: var(--line);
  }
  .reason-list.lay-chevron { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .benefit-grid.lay-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
  .benefit-grid.lay-stack > li + li::before { content: none; }
}

@media (max-width: 719px) {
  /* 狭い画面では縦積み・つなぎ線は出さない */
  .flow.lay-cards > li + li::before { content: none; }
  .flow.lay-stack > li, .benefit-grid.lay-stack > li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .flow.lay-stack .stack-body h3, .benefit-grid.lay-stack .stack-body h3 { justify-content: center; }
}

/* =========================================================================
   v5b：課題カードの場面イラスト・「3つのゼロ」チップ（2026-09-04 オーナー指摘）
   ========================================================================= */

/* --- 課題カード（イラストをカード上部に大きく） ---------------------------- */
.cases.lay-3col-illust {
  display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr);
}
.cases.lay-3col-illust li {
  display: block;
  padding: 0 0 22px;
  overflow: hidden;
}
.case-figure {
  display: grid; place-items: center;
  background: var(--base-tint);
  border-radius: 12px;
  margin: 0 0 18px;
  padding: 14px;
  min-height: 200px;
}
.case-illust {
  width: 100%; max-width: 300px; height: auto;
  max-height: 190px; object-fit: contain;
}
.cases.lay-3col-illust h3 {
  margin: 0 20px 10px; font-size: 17px; font-weight: 700;
}
.cases.lay-3col-illust li > p { margin: 0 20px; }

/* --- 「3つのゼロ」チップ ---------------------------------------------------- */
.zeros { margin: 22px 0 30px; }
.zeros-label {
  margin: 0 0 12px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; color: var(--base);
}
.zero-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.zero-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--base-tint);
  border-radius: 999px;
  padding: 8px 18px 8px 8px;
}
.zero-mark {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  background: var(--base-deep); color: #FFFFFF;
  display: flex; align-items: baseline; justify-content: center; gap: 1px;
  padding-top: 11px;
}
.zero-mark b { font-size: 21px; font-weight: 700; line-height: 1; }
.zero-u { font-size: 11px; font-weight: 700; }
.zero-l { font-size: 13.5px; font-weight: 700; color: var(--ink); }

@media (min-width: 720px) {
  .cases.lay-3col-illust { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px; }
}


/* =========================================================================
   v5c：小アイコン横並びの廃止（2026-09-04 オーナー指摘）
   図解は淡色プレートいっぱいに。56px未満・72px枠の画像は置かない。
   ========================================================================= */
.fig-plate {
  display: block;
  width: 100%;
  height: auto;
  background: var(--base-tint);
  border-radius: 12px;
  overflow: hidden;
  padding: 6px;
}
.fig-art {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.fig-lg { margin: 0 0 18px; }

/* 課題（issue）：図解→見出し→本文 */
.cases.lay-3col-illust .fig-plate { border-radius: 12px 12px 0 0; margin-bottom: 18px; }

/* 理由（reasons）：矢羽根帯の下に大判図解 */
.reason-list.lay-chevron .fig-plate { margin: 0 0 16px; }

/* 強み（points）：POINT番号→大判図解→見出し→本文 */
.point-list.lay-3col-illust {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr);
}
.point-list.lay-3col-illust > li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--base);
  border-radius: 12px;
  padding: 20px 20px 24px;
}
.point-list.lay-3col-illust .point-n { font-size: 15px; margin-bottom: 12px; }
.point-list.lay-3col-illust h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }

/* メリット：課題カードと同じ、図版の面が上辺につながるカード。 */
.benefits .sec-label { font-size: 12.5px; font-weight: 700; letter-spacing: .2em; }
.benefits h2 { font-size: clamp(21px, 3.4vw, 30px); line-height: 1.55; }
.benefit-grid.lay-2col-illust {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr);
}
.benefit-grid.lay-2col-illust > li {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--base);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}
.benefit-grid.lay-2col-illust .fig-plate {
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 12px 12px 0 0;
}
.benefit-grid.lay-2col-illust .fig-art {
  max-width: 288px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
.benefit-grid.lay-2col-illust .benefit-copy { padding: 20px 20px 24px; }
.benefit-grid.lay-2col-illust h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}
.benefit-grid.lay-2col-illust p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
}

@media (min-width: 720px) {
  .point-list.lay-3col-illust { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px; }
  .benefit-grid.lay-2col-illust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 26px;
    margin-top: 32px;
  }
}
@media (max-width: 719px) {
  .benefit-grid.lay-2col-illust .fig-plate { padding: 16px; }
  .benefit-grid.lay-2col-illust .benefit-copy { padding: 16px 16px 20px; }
  .benefit-grid.lay-2col-illust h3 { font-size: 17px; }
}

/* =========================================================================
   v5d：余白とCTA・注記・FAQ・横幅（2026-09-04 オーナー指摘 A〜G）
   8の倍数のリズム（見出し→本文→カード→注記→CTA）に統一する。
   ========================================================================= */

/* --- A：CTAは大きく、上下に間隔をとる ------------------------------------- */
.btn {
  min-height: 56px;
  justify-content: center;
  padding: 18px 44px;
  font-size: 17px;
}
.btn .btn-sub { font-size: 13px; }
.hero-cta { gap: 16px; margin: 40px 0 0; }
.hero-cta.center { margin: 40px 0 0; }
.numbers .hero-cta, .final-cta .hero-cta { margin-top: 48px; }
.cta .hero-cta { margin-top: 40px; margin-bottom: 16px; }
/* ヒーローだけは下に事実リストが続くので下側も空ける */
.hero-layout > .hero-cta { margin-bottom: 32px; }
/* 小さいボタン（ヘッダ・スマホ固定）は例外として従来の大きさを保つ */
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 13px; }
.sticky-cta .btn { min-height: 44px; padding: 12px 18px; font-size: 15px; }

/* --- E：注記は脚注へ格下げ（全幅・区切り線1本・※つき） -------------------- */
.note, .numbers .note {
  max-width: none;
  margin: 32px 0 0;
  padding: 12px 0 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-left: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.note::before { content: "※"; margin-right: .25em; }
.numbers .note { color: #AFC5DC; border-top-color: #3C6DA8; }

/* --- F：FAQは中央寄せ・最大960px・行を詰める ------------------------------ */
.faq-list {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.faq-list summary { padding: 16px 18px; gap: 14px; }
.faq-list summary::before {
  content: "Q";
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--base-tint);
  color: var(--base-deep);
  display: grid; place-items: center;
  font-size: 13px; letter-spacing: 0;
  padding-top: 0;
}
.faq-list details p { padding: 0 18px 18px 50px; }

/* --- G：左寄せで右が空く配置をなくす -------------------------------------- */
.sec-lead { max-width: 40em; margin-bottom: 32px; }
.story-body { max-width: 40em; }
.cta p { max-width: 40em; }
.cta-in { max-width: none; }

/* --- B：料金カードは左右2列で埋める --------------------------------------- */
.price-card { gap: 32px; padding: 32px 28px; margin-top: 32px; }
.price-head { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.price-main { display: grid; gap: 16px; justify-items: start; }
.price-main .price-badge { margin: 0; }
.price-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: center; }
.price-rows .zero-chip { justify-content: flex-start; }

/* --- C：対象／対象外は等幅2列の淡色ボックス ------------------------------- */
.target { gap: 24px; }
.target-col {
  background: var(--base-tint);
  border-radius: 12px;
  padding: 20px 22px;
}
.target-no { background: var(--warn-tint); }
.target-col h3 { font-size: 16px; margin: 0 0 12px; }
.target-col .checks li, .target-col .crosses li { font-size: 15px; line-height: 1.9; }
.target-col .checks, .target-col .crosses { gap: 8px; margin-top: 0; }

/* --- D：縦のリズム（最小32px） -------------------------------------------- */
.num-grid, .cases, .reason-list, .point-list, .cmp-scroll,
.flow, .trust-grid, .faq-list, .tabs, .promises { margin-top: 32px; }
.promises { gap: 24px; }
.zeros { margin: 24px 0 32px; }

@media (min-width: 720px) {
  .price-head { grid-template-columns: 1.15fr .85fr; column-gap: 40px; }
  .target { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}

@media (max-width: 719px) {
  /* 375ではCTAは全幅 */
  .hero-cta .btn, .cta .btn { width: 100%; }
  .sticky-cta .btn { width: auto; }
}

/* =========================================================================
   v5e：スマホ対応（2026-09-04 オーナー指示）
   375〜414px。読む文字は16px・行間1.7以上、タップは44px以上、
   横前提の要素（比較表・矢羽根・STEPのつなぎ線）は縦積みの見え方に組み替える。
   ========================================================================= */
@media (max-width: 719px) {
  /* --- 本文の大きさ（16px以上・行間1.7以上） --------------------------- */
  body { font-size: 16px; }
  .sec-lead, .story-body p, .cases p, .reason-box, .flow-body,
  .stack-body p, .benefit-grid:not(.lay-2col-illust) p, .point-list p:not(.point-n),
  .cmp-table td, .faq-list details p, .promise p:not(.promise-n),
  .checks li, .crosses li, .price-note, .num-h, .hero-facts li, .cta p, .lead {
    font-size: 16px;
    line-height: 1.8;
  }
  .note { font-size: 14px; line-height: 1.75; }
  .num-b, .btn-sub, .zero-u { font-size: 13px; }

  /* --- タップ領域（44px以上・間隔8px以上） ------------------------------ */
  .btn-sm { min-height: 44px; padding: 10px 16px; }
  .faq-list summary { min-height: 52px; align-items: center; padding: 14px 16px; }
  .tab-btn { min-height: 48px; padding: 12px 16px; }
  .tab-btns { gap: 8px; }
  .hero-cta { gap: 12px; }

  /* --- 大判図解の角丸 ------------------------------------------------- */
  .case-figure, .fig-plate { border-radius: 12px; }

  /* --- 矢羽根は内容幅（下向きの流れが分かるように） --------------------- */
  .reason-list.lay-chevron .chev {
    display: inline-block;
    padding: 12px 30px 12px 18px;
  }
  .reason-list.lay-chevron .reason-n { margin-bottom: 16px; }

  /* --- 比較表：横スクロールをやめ、行ごとのカード積みにする ------------- */
  .cmp-scroll { overflow-x: visible; }
  .cmp-table {
    min-width: 0; width: 100%;
    display: block; border: 0; background: none;
  }
  .cmp-table thead { display: none; }
  .cmp-table tbody { display: block; }
  .cmp-table tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
  }
  .cmp-table tr + tr { margin-top: 12px; }
  .cmp-table td {
    display: block;
    border: 0; border-left: 0;
    padding: 14px 16px;
  }
  .cmp-table td + td { border-top: 1px solid var(--line-soft); }
  /* どちらの側かを列見出しの言葉で示す（表のヘッダが隠れるため） */
  .cmp-table td::before {
    content: attr(data-col);
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    color: var(--muted);
  }
  .cmp-table td.is-accent::before { color: var(--base-deep); }
  .cmp-table td.is-accent { background: var(--base-tint); }

  /* --- 数字は2列×3行の縦積み（横スクロールはしない） ------------------- */
  .num-grid.lay-5col, .num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* --- 下部固定CTAの下に本文が隠れない余白 ------------------------------ */
  main > section:last-of-type { padding-bottom: 112px; }
}

@media (max-width: 719px) {
  /* 本文の大きさ：後ろのレイアウト別指定より強い形で16px/1.8に揃える */
  .reason-list.lay-chevron .reason-box,
  .benefit-grid.lay-stack .stack-body p,
  .flow.lay-cards .flow-body,
  .flow.lay-stack .stack-body p,
  .point-list.lay-3col-illust p:not(.point-n),
  .cases.lay-3col-illust li > p,
  .trust-grid dd,
  .cmp-table td {
    font-size: 16px;
    line-height: 1.8;
  }
  /* 注記は脚注のまま（14px・行間1.75） */
  .numbers .note, .note { font-size: 14px; line-height: 1.75; }
  .cta-note { font-size: 14px; line-height: 1.75; }
}

@media (max-width: 719px) {
  /* 固定ヘッダは56px以下（タップ領域44pxは確保したまま高さを詰める） */
  .topbar .topbar-in,
  .topbar.lay-fixed.small .topbar-in { padding-top: 4px; padding-bottom: 4px; }
  .topbar .btn-sm { min-height: 44px; padding: 8px 14px; font-size: 13px; }
  /* 帯の限定表示は幅が足りず2段になるのでスマホでは隠す（本文は下の節に残る） */
  .topbar .topbar-note { display: none; }
  .topbar .topbar-in { flex-wrap: nowrap; align-items: center; }
}

@media (max-width: 719px) {
  /* 3行以上になる本文は中央ぞろえだと読みにくいので左ぞろえに戻す
     （見出し・番号・アイコンは中央のまま） */
  .flow.lay-cards .flow-body,
  .flow.lay-stack .stack-body p,
  .benefit-grid.lay-stack .stack-body p { text-align: left; }
}

/* =========================================================================
   v6：揃え方と幅（2026-09-04 オーナー指摘）
   1ブロック1軸＝中央なら全部中央・左なら全部左。
   脚注は直上の主要要素の幅に左右端をそろえる。右が空く要素を残さない。
   ========================================================================= */

/* --- ① 料金カード：バッジ→0円→説明文をカード幅の中央に縦積み ------------- */
.pricing .price-head { display: block; }
.price-main {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
}
.price-main .price-badge { justify-self: center; }
.price {
  position: relative;
  display: inline-block;
  margin: 0 0 6px;
}
/* 「0円」の下に敷く筆の下線（文字幅の115%・文字の下端に重ねる） */
.price-brush {
  position: absolute;
  left: 50%;
  bottom: -.06em;
  width: 115%;
  transform: translateX(-50%);
  display: block;
  pointer-events: none;
}
/* 画像が出ないときの代替＝同色の角丸バー（高さ10px・不透明度0.5）。
   画像が出るときは筆の絵がこのバーの上に重なる。 */
.price-brush::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 10px;
  margin-top: -5px;
  border-radius: 999px;
  background: #E8B45C;
  opacity: .5;
}
.price-brush .brush-img {
  position: relative;
  width: 100%;
  height: auto;
}

/* 0円チップは横一列3等分・カード幅いっぱい */
.price-rows {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: center;
}
.price-rows .zero-chip { justify-content: flex-start; }

/* --- ② 「3つのゼロ」チップ：3等分で全幅（中身は左寄せ） ------------------- */
.zero-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* --- ③ FAQ：最大880px中央・質問行の左右padding 20px ---------------------- */
.faq-list { max-width: 880px; margin-left: auto; margin-right: auto; }
.faq-list summary { padding: 16px 20px; }
.faq-list details p { padding: 0 20px 18px 52px; }

/* --- ④ 脚注は直上の主要要素の幅にそろえる -------------------------------- */
.note { max-width: none; margin-left: 0; margin-right: 0; }
/* 760px中央のカード群（申込の流れ）の直下 */
.flow.lay-stack + .note {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
/* 880px中央のFAQの直下 */
.faq-list + .note {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* --- ⑤ 中央軸のブロック（数字・無料の条件・最終CTA） ---------------------- */
.numbers, .pricing, .final-cta { text-align: center; }
.numbers .sec-label, .pricing .sec-label, .final-cta .sec-label { display: inline-block; }
.numbers .sec-lead, .pricing .sec-lead, .final-cta .sec-lead,
.final-cta p:not(.hero-cta) {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
}
.numbers .note, .pricing .note, .final-cta .cta-note { text-align: center; }
.final-cta .cta-note { margin-top: 24px; }
/* 箇条書き・約束カードだけは読みやすさのため中身を左ぞろえに戻す */
.pricing .promise, .pricing .target-col { text-align: left; }

/* --- 左軸のブロックで中央寄せが混ざらないようにする ---------------------- */
.hero, .story, .flowsec, .faq, .trust, .tabsec,
.reasons, .benefits, .points, .compare { text-align: left; }
/* CTAだけは中央（.hero-cta.center） */

@media (max-width: 719px) {
  /* 375では3等分をやめて1列に */
  .zero-chips, .price-rows { grid-template-columns: minmax(0, 1fr); }
  .faq-list summary { padding: 14px 20px; }
  .faq-list details p { padding: 0 20px 18px 20px; }
}

/* =========================================================================
   v6b：ヒーローの絵を枠いっぱいに・図解プレートの余白を詰める・
        筆の下線を文字の背面へ（2026-09-04 オーナー指摘）
   ========================================================================= */

/* --- ① ヒーロー：枠の内側の余白と角丸枠をやめ、列幅いっぱいに ------------ */
.hero-visual {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.hero-art {
  width: 100%;
  height: auto;
  padding: 0;
  object-fit: contain;
}

@media (min-width: 1000px) {
  /* 文:絵＝56:44。1000pxでも文510.72pxを確保し、11字の句491.26pxを収める。 */
  .hero-layout {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  }
  .hero-layout.lay-image-left {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  }
  .hero-visual { margin: 0; }
}

/* --- ② 旧形式の課題図版 ----------------------------------------------- */
.case-figure { padding: 8px; min-height: 240px; }
.case-illust { width: 100%; max-width: none; max-height: 224px; }

/* --- ③ 筆の下線は「0円」の背面（マーカーで塗った見え方） ---------------- */
.price {
  position: relative;
  z-index: 0;            /* ここにスタッキングコンテキストを作る */
  display: inline-block;
}
.price-num {
  position: relative;
  z-index: 1;            /* 文字が前 */
}
.price-brush {
  position: absolute;
  z-index: 0;            /* 筆は背面 */
  left: 50%;
  bottom: 0;
  width: 120%;           /* 文字幅の120% */
  /* 文字の下端から、筆の高さの35%ぶんだけ上に重ねる */
  transform: translate(-50%, 65%);
  display: block;
  pointer-events: none;
}
.price-brush .brush-img { width: 100%; height: auto; }   /* 太い版で比率が変わるので高さは auto */
.price-brush::before {
  top: 50%;
  height: 10px;
  margin-top: -5px;
}

@media (max-width: 719px) {
  .case-figure { min-height: 200px; }
  .case-illust { max-height: 180px; }
}

/* =========================================================================
   v7：GPT製の透過PNG図解に合わせた表示（2026-09-04）
   プレートは絵の比率に合わせ、高さ固定をやめる。絵はプレート幅の95%以上。
   ========================================================================= */

/* --- ヒーロー：列幅いっぱい（3:2） -------------------------------------- */
.hero-visual { width: 100%; max-width: none; }
.hero-art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }

/* --- 手順（STEP）：正方形プレート・中央 --------------------------------- */
.flow .flow-icon,
.flow.lay-cards .flow-icon {
  display: block;
  width: 180px;
  height: 180px;
  aspect-ratio: 1 / 1;
  margin-left: auto;
  margin-right: auto;
  padding: 3px;
  object-fit: contain;
  box-sizing: border-box;
}

@media (max-width: 719px) {
  .flow .flow-icon,
  .flow.lay-cards .flow-icon { width: 160px; height: 160px; }
}

/* --- ヒーロー：3点訴求を外したぶんの余白を整える（2026-09-04 オーナー指示） --- */
.hero-layout > .hero-cta { margin-bottom: 16px; }   /* 下に続く要素が無くなったため 32px→16px */
.hero { padding-bottom: 88px; }                     /* 絵とのつり合いで節の高さを保つ */

/* --- フッター：控えめに・中央そろえ（2026-09-04 オーナー指摘） ------------- */
.foot {
  background: var(--surface);      /* 白のまま */
  border-top: 1px solid var(--line);   /* 上の細い区切り線1本 */
  padding: 16px 0 20px;            /* 高さを従来の半分ほどに */
  text-align: center;
}
.foot .wrap { max-width: 720px; }
.foot-name {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
}
.foot-links, .foot-copy {
  margin: 0;
  max-width: none;
  font-size: 12px;
  line-height: 1.7;
}
.foot-info {
  margin: 0 0 4px;
  max-width: none;
  font-size: 12px;
  line-height: 1.8;
  color: #6B727B;
}
.foot-links { margin-bottom: 4px; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.foot-sep { margin: 0 4px; color: #A7AEB6; }
.foot-copy { color: #6B727B; }

/* =========================================================================
   v8：スマホ専用の作り込み（375〜430px／2026-09-04 オーナー指示）
   ここから下は @media (max-width: 719px) の中だけ。PC（720px以上）の
   見え方には一切触れない。
   ねらい：① 縦1本の読み筋にそろえる（横並び前提の形は縦タイムラインへ）
           ② 見出し 30/22/17・本文16px・行間1.7 の階層を固定
           ③ 触るところは必ず44px以上、CTAは全幅
   ========================================================================= */
@media (max-width: 719px) {

  /* --- 共通：余白・文字の階層 ------------------------------------------ */
  .wrap { padding: 0 16px; }
  section { padding: 48px 0; }
  main > section.numbers,
  main > section.points,
  main > section.final-cta { padding: 56px 0; }

  body { font-size: 16px; line-height: 1.7; }

  /* 30px を上限に、いちばん長い句が1行に収まるところまでだけ落とす
     （句の途中では折り返さないので、ここで幅を合わせる） */
  .hero h1 { font-size: min(30px, 7.2vw); line-height: 1.35; margin: 0 0 20px; letter-spacing: 0; }
  h2 { font-size: 22px; line-height: 1.45; margin: 0 0 16px; }
  h3 { font-size: 17px; line-height: 1.55; }
  .sec-label { font-size: 11.5px; letter-spacing: .16em; margin-bottom: 12px; padding-bottom: 6px; }

  /* 本文は16px以上を保ち、行間を1.7にそろえる。 */
  .sec-lead, .story-body p, .cases p, .cases.lay-3col-illust li > p,
  .reason-list.lay-chevron .reason-box, .reason-box,
  .point-list.lay-3col-illust p:not(.point-n),
  .benefit-grid:not(.lay-2col-illust) p, .benefit-grid.lay-2col-illust p,
  .feat p:not(.eyebrow),
  .flow.lay-cards .flow-body, .flow.lay-stack .stack-body p,
  .stack-body p, .trust-grid dd, .cmp-table td, .faq-list details p,
  .promise p:not(.promise-n), .checks li, .crosses li, .price-note,
  .cta p, .tab-text p, .shot figcaption, .final-cta p {
    font-size: 16px;
    line-height: 1.7;
  }
  .sec-lead { margin-bottom: 24px; }
  .note, .numbers .note, .cta-note { font-size: 13px; line-height: 1.7; margin-top: 24px; }

  /* --- 触る面は44px以上 ------------------------------------------------- */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 12px; margin: 24px 0 0; }
  .hero-cta .btn, .cta .btn, .numbers .btn, .final-cta .btn, .pricing .btn {
    width: 100%;
    min-height: 56px;
    padding: 14px 20px;
    font-size: 16px;
  }
  .btn-lg { padding: 16px 20px; font-size: 17px; }
  /* 副CTAは白地に枠（主CTAの濃紺とはっきり分ける） */
  .btn-quiet {
    background: var(--surface);
    border-color: var(--base);
    color: var(--base-deep);
  }
  .numbers .btn-quiet, .final-cta .btn-quiet {
    background: transparent; border-color: #7FA8D6; color: #FFFFFF;
  }

  /* --- ① ヘッダ：52px・ロゴ＋主CTAだけ --------------------------------- */
  .topbar .topbar-in,
  .topbar.lay-fixed.small .topbar-in {
    min-height: 52px;
    padding-top: 4px;
    padding-bottom: 4px;
    gap: 12px;
  }
  .topbar .brand { font-size: 14px; }
  .topbar .btn-sm { min-height: 44px; padding: 10px 14px; font-size: 13px; }

  /* --- ① ヒーロー ------------------------------------------------------- */
  .hero { padding: 28px 0 48px; }
  .hero .eyebrow { font-size: 12px; letter-spacing: .14em; margin-bottom: 12px; }
  .hero-visual { width: 88%; margin: 4px auto 24px; }
  .hero-art { aspect-ratio: 3 / 2; }
  .lead { font-size: 16px; line-height: 1.8; margin-bottom: 0; }
  .hero-layout > .hero-cta { margin-bottom: 0; }

  /* --- ② 数字の帯：2列カード ------------------------------------------- */
  .num-grid, .num-grid.lay-5col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
  .num-card { padding: 12px 10px 14px; border-radius: 10px; }
  .num-v { font-size: 28px; }
  .num-u { font-size: 12px; }
  .num-h { font-size: 12px; line-height: 1.5; }
  .num-b { font-size: 11.5px; }

  /* --- ③ 課題・POINT：1列カード --------------------------------------- */
  .cases.lay-3col-illust,
  .point-list.lay-3col-illust { gap: 20px; margin-top: 24px; }
  .cases.lay-3col-illust h3 { margin: 0 16px 8px; }
  .cases.lay-3col-illust li > p { margin: 0 16px; }
  .point-list.lay-3col-illust > li { padding: 16px 16px 20px; }
  .fig-plate { padding: 4px; }
  /* 他セクションの図解は3:2。メリットの4:3は専用指定で保つ。 */
  .fig-art { aspect-ratio: 3 / 2; object-fit: cover; }

  /* --- ③ 理由：矢羽根帯 → 縦タイムライン ------------------------------- */
  .reason-list.lay-chevron { margin-top: 24px; gap: 24px; }
  .reason-list.lay-chevron > li {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 10px;
  }
  /* 番号バッジのあいだをつなぐ縦線 */
  .reason-list.lay-chevron > li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 38px;
    bottom: -30px;
    width: 2px;
    background: var(--line);
  }
  .reason-list.lay-chevron > li:last-child::before { content: none; }
  .reason-list.lay-chevron .reason-n {
    grid-area: 1 / 1 / 2 / 2;
    margin: 0;
    position: relative;
    z-index: 1;
  }
  .reason-list.lay-chevron .chev {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    clip-path: none;
    font-size: 14px;
    letter-spacing: .02em;
  }
  .reason-list.lay-chevron .fig-plate { grid-area: 1 / 2 / 2 / 3; margin: 0; }
  .reason-list.lay-chevron h3 { grid-area: 2 / 2 / 3 / 3; margin: 0; font-size: 17px; }
  .reason-list.lay-chevron .reason-box {
    grid-area: 3 / 2 / 4 / 3;
    padding: 12px 14px;
  }

  /* --- ③ POINT：番号バッジ → 図解 → 見出し ----------------------------- */
  .point-list.lay-3col-illust .point-n {
    display: inline-block;
    margin: 0 0 12px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--base-deep);
    color: #FFFFFF;
    font-size: 12px;
    letter-spacing: .1em;
  }
  .point-list.lay-3col-illust h3 { margin: 12px 0 8px; font-size: 17px; }

  /* --- ④ 比較表：色帯の見出しで対比を強める ---------------------------- */
  .cmp-scroll { margin-top: 24px; }
  .cmp-table tr + tr { margin-top: 12px; }
  .cmp-table td { padding: 0 16px 14px; }
  .cmp-table td::before {
    margin: 0 -16px 12px;
    padding: 9px 16px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .06em;
  }
  .cmp-table td.is-accent { background: var(--surface); font-weight: 700; color: var(--ink); }
  .cmp-table td.is-accent::before { background: var(--base-deep); color: #FFFFFF; }
  .cmp-table td + td { border-top: 1px solid var(--line-soft); padding-top: 0; }

  /* --- ⑤ レポート：タブは横スクロールのピル ---------------------------- */
  .tabs { margin-top: 24px; }
  html.js .tab-btns {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    border-bottom: 0;
    margin: 0 0 16px;
    padding-bottom: 2px;
  }
  html.js .tab-btns::-webkit-scrollbar { display: none; }
  .tab-btn {
    flex: none;
    white-space: nowrap;
    min-height: 44px;
    padding: 10px 16px;
    margin-bottom: 0;
    font-size: 13.5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
  }
  .tab-btn[aria-selected="true"] {
    background: var(--base-deep);
    border-color: var(--base-deep);
    color: #FFFFFF;
  }
  /* 見本の画像は幅いっぱい・角丸・キャプションは画像の下 */
  .shot {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    background: none;
  }
  .shot img {
    width: 100%;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
  }
  .shot figcaption { margin-top: 10px; }
  .shot-zoom {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .tab-panel { gap: 16px; }
  .tab-text h3 { font-size: 17px; }

  /* --- ⑥ STEP：カード → 縦タイムライン --------------------------------- */
  .flow.lay-cards { margin-top: 24px; gap: 24px; }
  .flow.lay-cards > li {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 8px;
    text-align: left;
  }
  .flow.lay-cards > li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 38px;
    bottom: -30px;
    width: 2px;
    background: var(--line);
  }
  .flow.lay-cards > li:last-child::before { content: none; }
  .flow.lay-cards .flow-n {
    grid-area: 1 / 1 / 2 / 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 50%;
    background: var(--base-deep);
    color: #FFFFFF;
    position: relative;
    z-index: 1;
  }
  .flow.lay-cards .flow-n-w { display: none; }
  .flow.lay-cards .flow-n-d { font-size: 14px; }
  .flow.lay-cards .flow-card {
    grid-area: 1 / 2 / 2 / 3;
    background: none;
    padding: 0;
    justify-items: start;
    gap: 10px;
  }
  .flow.lay-cards .flow-icon,
  .flow .flow-icon {
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 12px;
    background: var(--base-tint);
    padding: 4px;
  }
  .flow.lay-cards .flow-card h3 { text-align: left; font-size: 17px; }
  .flow.lay-cards .flow-body {
    grid-area: 2 / 2 / 3 / 3;
    margin: 0;
    max-width: none;
    text-align: left;
  }

  /* --- ⑥ 申込の流れ：カード → 縦タイムライン --------------------------- */
  .flow.lay-stack { margin-top: 24px; gap: 24px; }
  .flow.lay-stack > li {
    position: relative;
    display: block;
    padding: 0 0 0 46px;
    background: none;
    border: 0;
    border-radius: 0;
    text-align: left;
    justify-items: start;
  }
  .flow.lay-stack > li::before,
  .flow.lay-stack > li + li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 38px;
    bottom: -30px;
    width: 2px;
    height: auto;
    border: 0;
    background: var(--line);
    transform: none;
  }
  .flow.lay-stack > li:last-child::before { content: none; }
  .flow.lay-stack .stack-ico {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    margin: 0 0 10px;
  }
  .flow.lay-stack .stack-icon { width: 44px; height: 44px; }
  .flow.lay-stack .stack-body h3 {
    justify-content: flex-start;
    margin: 0 0 6px;
    font-size: 17px;
  }
  .flow.lay-stack .stack-n {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--base-deep);
    color: #FFFFFF;
    font-size: 14px;
    z-index: 1;
  }

  /* --- ⑦ 料金カード ----------------------------------------------------- */
  .price-card { margin-top: 24px; padding: 20px 16px; gap: 24px; border-radius: 12px; }
  .price-main { gap: 10px; }
  .price b { font-size: 64px; }
  .price-badge { font-size: 12px; padding: 4px 12px; }
  .price-rows { gap: 10px; }
  .price-rows .zero-chip { width: 100%; }
  .promises { gap: 16px; margin-top: 0; }
  .promise { padding: 14px; }
  .target { gap: 16px; }
  .target-col { padding: 16px; }
  .target-col h3 { font-size: 15px; }
  .target-col .checks li, .target-col .crosses li { font-size: 16px; line-height: 1.7; }

  /* --- ⑧ 3つのゼロは横3等分／安心はアイコン左・テキスト右 -------------- */
  .zeros { margin: 24px 0 28px; }
  .zero-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .zeros .zero-chip {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 4px;
    padding: 12px 6px;
    border-radius: 12px;
  }
  .zeros .zero-mark {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--base-deep);
    align-items: baseline;
  }
  .zeros .zero-mark b { font-size: 22px; color: var(--base-deep); }
  .zeros .zero-u { font-size: 11px; color: var(--base-deep); }
  .zeros .zero-l { font-size: 12px; line-height: 1.4; }

  .trust-grid { gap: 12px; margin-top: 24px; }
  .trust-grid > div { padding: 16px; }
  .safe-icon { width: 48px; height: 48px; }
  .trust-grid dt { align-items: center; gap: 12px; margin-bottom: 8px; font-size: 16px; }
  .trust-grid dd { padding-left: 60px; }

  /* --- ⑨ FAQ ------------------------------------------------------------ */
  .faq-list { margin-top: 24px; }
  .faq-list summary {
    position: relative;
    min-height: 52px;
    padding: 14px 44px 14px 16px;
    font-size: 16px;
    line-height: 1.5;
    gap: 12px;
  }
  .faq-list summary::before { width: 24px; height: 24px; font-size: 12px; }
  /* 開閉の矢印 */
  .faq-list summary::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .18s ease;
  }
  .faq-list details[open] summary::after {
    transform: translateY(-20%) rotate(-135deg);
    border-color: var(--base-deep);
  }
  .faq-list details p { padding: 0 16px 16px 16px; }

  /* --- ⑩ 最終CTA帯・フッター ------------------------------------------- */
  .final-cta .hero-cta, .numbers .hero-cta { margin-top: 24px; }
  .foot { padding: 16px 0 24px; }
  .foot-links, .foot-copy, .foot-info { font-size: 12px; }
  /* リンクは指で押せる高さ（44px）にする */
  .foot-links a { display: inline-block; padding: 15px 8px; }
  .foot-links .foot-sep { display: inline-block; vertical-align: middle; }

  /* --- ⑪ 下部固定CTA：56px・本文の末尾に余白 --------------------------- */
  .sticky-cta {
    min-height: 55px;
    gap: 10px;
    padding: 6px 14px calc(6px + env(safe-area-inset-bottom));
  }
  .sticky-cta .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; width: auto; }
  .sticky-note { font-size: 12px; }
  main > section:last-of-type { padding-bottom: 104px; }

  /* --- ⑫ 横スクロールを出さない ---------------------------------------- */
  html, body { overflow-x: hidden; }
}

/* --- レポート見本の追加枠（2026-09-10 Codex B 文言の採用にあわせて最小限） ----
   読む順の3枠・見本の帯（架空データ／拡大リンク）・引用・注記の見出しだけ。
   既存の .feat / .shot / .note の見た目をそのまま使う。 */
.tabsec .report-guide { margin: 26px 0 30px; }
.tabsec .report-guide .eyebrow { margin-bottom: 6px; }
.tabsec .report-guide h3 { font-size: 16px; margin: 0 0 6px; }
.shot figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.shot-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: 3px;
  padding: 1px 8px;
}
.shot-zoom { margin-left: auto; font-size: 13px; }
.tab-text .eyebrow { margin-bottom: 8px; }
.tab-quote {
  margin: 12px 0;
  padding: 12px 16px;
  background: var(--surface-2);
  border-left: 3px solid var(--base);
}
.tab-quote .quote-src { font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.tab-quote .quote-line { font-size: 16px; color: var(--ink); margin: 0; }
.tab-text .tab-note { margin-top: 10px; font-size: 14px; color: var(--muted); }
.note .note-h { font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.note .note-h + p { margin: 0; }

@media (min-width: 720px) {
  .tabsec .report-guide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- ヒーロー主/副CTA：PCでは横並びを保つ（2026-09-10 副CTA文言が12px伸びた対策） ----
   文言・主ボタンは触らず、副ボタンの左右余白だけ 44px→32px にして列幅（約476px）に収める。 */
@media (min-width: 1000px) {
  .hero-layout > .hero-cta { flex-wrap: nowrap; }
  .hero-layout > .hero-cta .btn { flex-shrink: 0; }
  .hero-layout > .hero-cta .btn-quiet { padding-left: 32px; padding-right: 32px; }
}

/* --- フッター「お問い合わせ：メール」は途中で改行しない（2026-09-10 オーナー指示） ----
   運営者情報の各項目を span で包み、メールを含む項目だけ1行に固定する。 */
.foot-info .foot-contact { white-space: nowrap; word-break: keep-all; }

/* =========================================================================
   v8：ヒーロー右側＝見本レポート5面（大きな1面＋サムネイル）
   2026-09-23 オーナー採用（Codex 案B-10）。content.toml の layout = "viewer" のときだけ効く。
   見本は白い紙のまま見せる（ダーク表示でも反転しない）。動きは lp.js の 5 番。
   DOM の順は「停止操作 → サムネイル → 本文」（APG）。見た目の順はここの grid-area で作る。
   ========================================================================= */
.hero-layout.lay-viewer {
  grid-template-areas:
    "eyebrow"
    "title"
    "lead"
    "visual"
    "actions"
    "facts"
    "note";
}
.hero-layout.lay-viewer > .hero-viewer {
  grid-area: visual;
  min-width: 0;
  margin: 8px 0 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label" "track" "thumbs" "controls";
}
.hero-viewer .hv-label {
  grid-area: label;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--base-deep);
}
.hv-track { grid-area: track; min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.hv-slide { margin: 0; min-width: 0; }
.hv-fig { margin: 0; }
.hv-slide[hidden] { display: none !important; }
.hv-paper { background: #FFFFFF; }
.hv-paper img { display: block; width: 100%; height: auto; }
.hv-slide figcaption {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--ground);
}

/* 操作部は JS の準備ができたとき（.viewer-ready）だけ。JSなしでは1面目と名前だけが見える。 */
.hv-thumbs, .hv-controls { display: none; }
.hero-viewer.viewer-ready .hv-thumbs {
  grid-area: thumbs;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.hero-viewer.viewer-ready .hv-controls {
  grid-area: controls;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.hv-controls .hv-prev  { order: 1; }
.hv-controls .hv-count { order: 2; }
.hv-controls .hv-next  { order: 3; }
.hv-controls .hv-pause { order: 4; min-width: 6em; }
.hv-thumb, .hv-btn {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--base-deep);
  font: inherit;
  cursor: pointer;
}
.hv-thumb {
  min-width: 0;
  padding: 4px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  border-bottom: 3px solid var(--line);
}
.hv-thumb img { display: block; width: 100%; height: auto; background: #FFFFFF; }
.hv-thumb span { display: block; padding-top: 4px; }
.hv-thumb[aria-selected="true"] { border-color: var(--base); background: var(--base-tint); }
.hv-btn { padding: 8px 12px; font-size: 14px; }
.hv-btn[data-paused="true"] { border-color: var(--base); background: var(--base-tint); }
.hv-btn:disabled, .hv-btn[aria-disabled="true"] { cursor: default; color: var(--ink-2); }
.hv-count { min-width: 48px; text-align: center; font-size: 13px; color: var(--ink-2); }
.hv-thumb:focus-visible, .hv-btn:focus-visible, .hv-slide:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* 面を替えたときだけ、ふっと出す（display:none から戻ると CSS アニメーションが頭から走る） */
html.anim .hero-viewer.is-moved .hv-slide:not([hidden]) .hv-paper { animation: hv-in .3s ease; }
@keyframes hv-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hv-paper { animation: none !important; }
}

@media (min-width: 1000px) {
  .hero-layout.lay-viewer {
    grid-template-areas:
      "eyebrow visual"
      "title visual"
      "lead visual"
      "actions visual"
      "facts visual"
      "note visual";
    align-items: start;
  }
  /* 見本（全行にまたがる）が左の列より高くなっても、上の行（アイキャッチ・見出し）を引き伸ばさない。
     余りは最後の行（注記）が受ける＝上端そろえが崩れない。 */
  .hero-layout.lay-viewer { grid-template-rows: repeat(5, auto) 1fr; }
  .hero-layout.lay-viewer > .hero-viewer { margin: 0; align-self: start; }
  /* 右の枠（.hv-track）の上端を、見出し1行目の字面の上端にそろえる（2026-09-22 オーナー指示）。
     小見出しはアイキャッチと同じ級数・行の高さでその横に並び、下余白は
     アイキャッチの下余白 18px ＋ 見出しの半行送り（(1.5 − 1) ÷ 2 × 見出しの級数）。 */
  .hero-viewer .hv-label { margin-bottom: calc(18px + 0.25 * clamp(26px, 5.6vw, 44px)); }
}

@media (max-width: 719px) {
  .hero-layout.lay-viewer > .hero-viewer { margin: 24px 0 28px; }
  .hero-viewer.viewer-ready .hv-thumbs { gap: 6px; }
  .hv-thumb { padding: 3px; font-size: 11px; }
  .hv-slide figcaption { padding: 10px 12px; font-size: 13.5px; }
}

/* 強制カラー（Windows のハイコントラスト）では枠色・背景色が上書きされ、選択中のサムネイルが
   見分けられなくなる。システム色で示す。 */
@media (forced-colors: active) {
  .hv-thumb[aria-selected="true"] { border-color: Highlight; }
  .hv-thumb[aria-selected="true"] span { background: Highlight; color: HighlightText; forced-color-adjust: none; }
}

/* 印刷：紙では使えない操作部を出さず、「模擬結果（架空データ）」と面を同じページに置く。 */
@media print {
  .hv-thumbs, .hv-controls { display: none !important; }
  .hero-viewer { break-inside: avoid; }
  .hv-label { break-after: avoid; }
}


/* =========================================================================
   ヒーロー：アニメーション「採用の指標を、ひとつ増やす。」（layout = "story"・2026-09-23 オーナー採用）
   動きは story.js（正本 lp/story/plus1.js）。構造・操作は絵本ヘッダーの試作（Codex 確認済み）と同じ。
   ・13 場面の後に最終場面（キャッチコピーを絵の中に描く・2026-09-27 オーナー指摘・Codex 設計）。完成形は全幅で
     「舞台 → 操作（最初から）→ 主副 CTA → 小さな補足（目安・注記）」。eyebrow・h1・導入文は読み上げ用に残して clip（節の末尾）。
   ・パソコン（1100px 以上）: 再生中は枠全体が 16:9 の舞台。文章（.sb-t）を隠し、申込ボタンは枠のすぐ下（.p1-under）。
     完成形は舞台を通常の grid item にして、その下に .hero-cta → 補足（.p1-under は隠す）。
   ・1099px 以下: 絵→字幕→操作→主副CTA→終了後の補足。絵はタブレット16:9、スマホ5:6（完成形も同じ）。
     1000〜1099px は LP 全体ではパソコンの幅だが、このヘッダーの文章が 16:9 の枠に収まらないため縦に積む。
   ・JSなしの完成形の画像は <noscript> の中＝JS が使える人には読み込ませない。
   ========================================================================= */
.sb-hero {
  color-scheme: light;
  --ink: #14181D; --ink-2: #3E454E; --muted: #6B727B; --line: #D5DBE2; --line-soft: #E7EBF0;
  --surface: #FFFFFF; --surface-2: #EEF3F8; --base: #1F5FA8; --base-deep: #16457A; --base-tint: #EAF1F9;
  --focus: #16457A; --btn-bg: #16457A; --btn-bg-h: #1F5FA8; --btn-fg: #FFFFFF;
  background: #FFFDF8;
}
.sb-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lay-story .ph { display: block; }
.lay-story > .hero-note { margin-bottom: 0; }   /* DOM 順を文章→CTA→舞台にしたので p:last-child が外れる＝従来の下余白 0 を保つ */

/* --- 舞台（共通） ------------------------------------------------------------ */
.sb-stage {
  --sb-css: 1;   /* story.js はこの印があるときだけ描く（古い CSS・読み込み失敗でキャンバスが伸び続けるのを防ぐ） */
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #FFF8EC;
  box-shadow: 0 1px 0 rgba(58, 63, 75, .06), 0 16px 40px rgba(58, 63, 75, .10);
}
.sb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.sb-live .sb-canvas { opacity: 1; }
.p1-nojs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }

/* --- 絵の下の字幕（スマホだけ） ------------------------------------------------ */
.p1-cap { display: none; }
/* .p1-line（スマホで字幕を重ねるための包み）は 720px 以上では箱を作らない＝タブレットの字幕の描画が第1版（8e15af46）と画素まで同じになる
   （inline の span が small を包むと、文字の縁の6画素が違って描かれた）。719px 以下では下の @media で block に戻す。
   予約行（hidden 属性）には触れない＝.sb-ready が無いとき（動きを減らす設定）は display:none のまま。 */
.p1-cap > .p1-line:not([hidden]) { display: contents; }

/* --- アニメーションのすぐ下の申込ボタン（パソコンだけ） ------------------------------ */
.p1-under { display: none; }

/* --- 操作部 ----------------------------------------------------------------- */
.sb-ctrl { display: none; align-items: center; gap: 8px; }
.sb-ready .sb-ctrl { display: flex; }
.sb-btn {
  min-height: 44px; padding: 6px 14px; border: 1px solid rgba(58, 63, 75, .22); border-radius: 999px;
  white-space: nowrap;
  background: rgba(255, 255, 255, .92); color: var(--base-deep); font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer;
}
.sb-btn[data-paused="true"] { border-color: var(--base); background: var(--base-tint); }
.sb-btn[data-sb-pause] { min-width: 84px; }   /* 「一時停止／再生」で幅を変えない（字幕の枠の幅＝折り返しが止めた瞬間に変わらない） */
.sb-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sb-bar {
  appearance: none; -webkit-appearance: none;
  display: block; flex: 1; width: 0; min-width: 24px; height: 4px;
  padding: 0; border: 0; border-radius: 4px; overflow: hidden;
  background: rgba(58, 63, 75, .12);
}
.sb-bar::-webkit-progress-bar { background: rgba(58, 63, 75, .12); border-radius: 4px; }
.sb-bar::-webkit-progress-value { background: #F2B866; border-radius: 4px; }
.sb-bar::-moz-progress-bar { background: #F2B866; border-radius: 4px; }

/* --- スマホ・タブレット（1099px 以下）：16:9 の絵が上、字幕、操作、文章は下 -------------
   1000〜1099px は LP 全体ではパソコンの幅だが、このヘッダーの文章が 16:9 の枠に収まらないため、ここまで縦に積む。 */
@media (max-width: 1099px) {
  .hero-layout.lay-story {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "cap" "ctrl" "eyebrow" "title" "actions" "facts" "note" "lead";
  }
  .lay-story > .sb-stage { grid-area: stage; aspect-ratio: 16 / 9; margin: 0 0 10px; }
  .lay-story > .p1-cap {
    grid-area: cap; display: block; margin: 0 0 10px; min-height: calc(1.7em * 3 + 20px); padding: 10px 14px;
    border-left: 4px solid #F2B866; border-radius: 10px; background: #FFFFFF;
    font-size: 15px; line-height: 1.7; color: var(--ink);
  }
  .p1-cap small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
  .p1-cap small:empty { display: none; }
  .lay-story > .sb-ctrl { grid-area: ctrl; margin: 0 0 16px; }
  .lay-story > .eyebrow { grid-area: eyebrow; }
  .lay-story > .hero-cta { margin: 4px 0 14px; gap: 8px; }
  .lay-story > .hero-facts { margin-bottom: 12px; }
  .lay-story > .hero-note { margin-top: 0; }
  .lay-story > .lead { margin: 20px 0 0; }
}

/* タブレット：16:9の舞台を保ち、文章はCTAの下へ終了後に出す。 */
@media (min-width: 720px) and (max-width: 1099px) {
  .hero-layout.lay-story {
    position: relative; gap: 0;
    grid-template-areas: "stage" "cap" "ctrl" "actions" "eyebrow" "title" "lead" "facts" "note";
  }
  .sb-playing .lay-story > .sb-t {
    position: absolute; grid-area: auto; top: 0; left: 20px;
    width: 1px; height: 1px; min-width: 0; margin: 0; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; opacity: 0; pointer-events: none;
  }
  .lay-story > .hero-cta { flex-wrap: wrap; margin: 0 0 16px; }
  .lay-story > .hero-cta .btn { min-width: 0; max-width: 100%; }
  .lay-story > h1 { min-width: 0; margin-bottom: 12px; }
  .sb-hero h1 .ph { white-space: normal; overflow-wrap: anywhere; }
  .lay-story > .lead { margin: 0 0 16px; }
  .sb-hero:not(.sb-live) .p1-cap { display: none; }
}

/* --- パソコン（1100px 以上）：ヘッダーの枠全体が舞台 ------------------------------ */
@media (min-width: 1100px) {
  .hero.sb-hero { padding: 20px 0 24px; }
  .hero-layout.lay-story {
    position: relative;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    grid-template-areas: "eyebrow ." "title ." "lead ." "actions ." "facts ." "note .";
    align-content: center;
    aspect-ratio: 16 / 9;
    padding-top: 24px; padding-bottom: 24px;
  }
  .lay-story > .eyebrow { margin-bottom: 12px; }
  .lay-story > h1 { font-size: 38px; line-height: 1.4; margin-bottom: 14px; }
  .lay-story > .lead { font-size: 15px; line-height: 1.75; margin-top: 0; margin-bottom: 18px; }
  .lay-story > .hero-cta { margin-top: 0; margin-bottom: 12px; }
  .lay-story > .sb-stage { position: absolute; inset: 0 20px; z-index: 0; }
  .lay-story > .sb-t { position: relative; z-index: 1; padding-left: 36px; }
  .lay-story > .sb-ctrl { position: absolute; right: 40px; bottom: 18px; z-index: 2; width: auto; }   /* 横に詰める（字幕の枠と重ならないよう右下にまとめる） */
  /* 申込ボタンは枠の中ではなく、アニメーションのすぐ下に常に出す（2026-09-23 オーナー指示） */
  .lay-story > .hero-cta { display: none; }
  .p1-under { display: block; }
  .p1-cta { display: flex; justify-content: center; align-items: stretch; gap: 14px; margin: 18px 0 0; }
  .lay-story > .sb-ctrl .sb-bar { flex: 0 0 96px; }

  /* 物語のあいだは文章を隠す（読み上げには残す。フォーカスが来たら JS が最後へ飛ぶ） */
  .sb-playing .lay-story > .sb-t { opacity: 0; transform: translateY(10px); pointer-events: none; }
  .sb-done .lay-story > .sb-t { opacity: 1; transform: none; transition: opacity .25s ease; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-done .lay-story > .sb-t { transition: none; }
}
@media (max-width: 380px) {
  .sb-ctrl { gap: 6px; }
  .sb-btn { padding: 6px 10px; font-size: 13px; }
}

/* 終わったら操作は「最初から」だけ */
.sb-complete [data-sb-pause],
.sb-complete [data-sb-skip],
.sb-complete .sb-bar { display: none; }
.sb-complete .sb-ctrl { width: auto; justify-content: flex-end; }

/* スマホ専用：絵・字幕・操作を全幅の一枚の紙にまとめる。 */
@media (max-width: 719px) {
  .hero.sb-hero { padding: 0 0 16px; }
  /* 全状態で舞台（5:6）→ 字幕 → 操作 → 主副 CTA → 補足。完成形は字幕を畳む（最終場面はキャッチコピーを絵の中に描く）。 */
  .hero-layout.lay-story {
    position: relative; padding: 0; gap: 0;
    grid-template-areas: "stage" "cap" "ctrl" "actions" "eyebrow" "title" "lead" "facts" "note";
  }
  /* フローから外しても読み上げには残す。フォーカス時はJSが最後へ進める。 */
  .sb-playing .lay-story > .sb-t {
    position: absolute; grid-area: auto; top: 0; left: 16px;
    width: 1px; height: 1px; min-width: 0; margin: 0; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; opacity: 0; pointer-events: none;
  }
  .lay-story::before { content: ""; grid-area: stage; aspect-ratio: 5 / 6; }
  .lay-story > .sb-stage {
    --sb-phone: 1;
    grid-area: 1 / 1 / 4 / 2;
    aspect-ratio: auto; min-height: 0; margin: 0;
    border-radius: 0; box-shadow: none; z-index: 0;
  }
  .sb-hero .sb-canvas, .sb-hero .p1-nojs {
    inset: 0 auto auto 0; width: 100%; height: auto; aspect-ratio: 5 / 6;
  }
  .sb-hero .p1-nojs { object-fit: contain; object-position: center top; }
  .lay-story > .p1-cap {
    display: grid; z-index: 1; min-width: 0; min-height: calc(8px + 3em);   /* 絵→字幕 8px ＋ 本文 2 行（1.5 × 2）。1 行の字幕でも帯は 2 行分＝操作部の位置が動かない */
    margin: 0 16px; padding: 8px 0 0;
    border: 0; border-radius: 0; background: transparent;
    font-size: 14px; line-height: 1.5; overflow-wrap: anywhere;
  }
  /* 字幕は上にそろえ、13場面の最長本文（2 行）を予約する。注記はスマホでは出さない。拡大時は自然に伸ばす。 */
  .p1-cap > .p1-line { grid-area: 1 / 1; align-self: start; min-width: 0; }
  .sb-hero .p1-line > span { display: block; }
  .p1-cap > .p1-line:not([hidden]) { display: block; }
  .sb-ready .p1-cap > [data-p1-reserve] { display: block; visibility: hidden; }
  .sb-hero:not(.sb-live) .p1-cap { display: none; }
  .sb-hero .p1-cap small { display: none; }
  .lay-story > .sb-ctrl { z-index: 1; margin: 10px 16px 16px; gap: 8px; flex-wrap: nowrap; }
  .sb-hero .sb-btn {
    flex: 0 1 auto; min-width: 44px; min-height: 44px;
    padding: 4px 6px; border-radius: 6px; font-size: 12px; line-height: 1.35;
    white-space: normal; overflow-wrap: anywhere;
    background: transparent;
  }
  .sb-hero .sb-btn[data-sb-pause] { min-width: 62px; }
  .sb-hero .sb-btn[data-paused="true"] { background: var(--base-tint); }
  .sb-hero .sb-bar { order: -1; margin-right: 8px; }
  .lay-story > .eyebrow { margin: 8px 16px 4px; line-height: 1.4; letter-spacing: .04em; }
  .lay-story > h1 { min-width: 0; margin: 0 16px 8px; }
  .sb-hero h1 .ph { white-space: normal; overflow-wrap: anywhere; }
  .lay-story > .hero-cta { margin: 8px 16px; gap: 8px; }
  .lay-story > .hero-cta .btn { min-height: 64px; padding: 8px 16px; }
  .lay-story > .hero-cta .btn-quiet { min-height: 44px; }
  .lay-story > .hero-facts { margin: 0 16px 8px; gap: 4px 16px; }
  .lay-story > .hero-note { margin: 0 16px; padding-top: 6px; }
  .lay-story > .lead { margin: 12px 16px 16px; }

  /* 完成形（.sb-playing 以外）: 縦長の絵のまま・字幕なし。舞台は絵の行だけ（字幕・操作の行の紙は要らない）。 */
  .sb-hero:not(.sb-playing) .lay-story > .sb-stage { grid-area: stage; }
  .sb-hero:not(.sb-playing) .p1-cap { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .sb-done .lay-story > .sb-t { transition: opacity .25s ease; }
  }
}


/* --- 完成形（全幅）: キャッチコピーは絵の中に描くので eyebrow・h1・導入文は読み上げ用に残して clip（絵の下に説明は出さない・2026-09-27）。
   描けないとき（古い CSS・JSなし以外の失敗）は通常表示 ------ */
.sb-live:not(.sb-playing) .lay-story > .eyebrow,
.sb-live:not(.sb-playing) .lay-story > h1,
.sb-live:not(.sb-playing) .lay-story > .lead,
.sb-hero:has(.p1-nojs) .lay-story > .eyebrow,
.sb-hero:has(.p1-nojs) .lay-story > h1,
.sb-hero:has(.p1-nojs) .lay-story > .lead {
  position: absolute; grid-area: auto; inset: 0 auto auto 0;
  width: 1px; height: 1px; min-width: 0; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sb-hero:not(.sb-playing) .p1-cap { display: none; }
.sb-hero:not(.sb-playing) .hero-facts,
.sb-hero:not(.sb-playing) .hero-facts li { font-size: 14px; }
.sb-hero:not(.sb-playing) .lay-story > .hero-note { font-size: 13px; }

@media (min-width: 1100px) {
  .sb-hero:not(.sb-playing) .hero-layout.lay-story {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "actions" "eyebrow" "title" "lead" "facts" "note";
    aspect-ratio: auto; align-content: start; gap: 0;
    padding-top: 0; padding-bottom: 0;
  }
  /* 舞台の高さは再生中と同じ＝wrap 全幅 1080 の 16:9（607.5px）を ::before で予約する（1040×585 にしない）。 */
  .sb-hero:not(.sb-playing) .lay-story::before {
    content: ""; grid-area: stage; aspect-ratio: 16 / 9;
    margin: 0 -20px; align-self: start; pointer-events: none;
  }
  .sb-hero:not(.sb-playing) .lay-story > .sb-stage {
    grid-area: stage; position: relative; inset: auto; align-self: stretch;
    height: auto; min-height: 0; aspect-ratio: auto;
  }
  .sb-hero:not(.sb-playing) .lay-story > .sb-ctrl {
    grid-area: stage; position: relative; right: auto; bottom: auto;
    justify-self: end; align-self: end; margin: 0 20px 18px;
  }
  .sb-hero:not(.sb-playing) .lay-story > .hero-cta {
    display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;
    gap: 14px; margin: 18px 0 24px;
  }
  .sb-hero:not(.sb-playing) .p1-under { display: none; }
  .sb-hero:not(.sb-playing) .lay-story > .hero-facts,
  .sb-hero:not(.sb-playing) .lay-story > .hero-note {
    min-width: 0; padding-left: 0; max-width: 72ch;
    justify-self: center; width: 100%;
  }
  .sb-hero:not(.sb-playing) .lay-story > .hero-facts { margin-bottom: 12px; }
  .sb-hero:not(.sb-playing) .lay-story > .hero-note { margin-top: 0; }
  .sb-hero:not(.sb-playing) .hero-cta .btn {
    min-width: 0; max-width: 100%; overflow-wrap: anywhere;
  }
}

/* === science === */
/* 科学的な土台・LP訴求。配色は既存変数のみ。 */

.science-page { font-size:16px; line-height:1.8; }
.science-page main { color:var(--ink); }
.science-page main a:not(.btn),
.credibility a:not(.btn),
.trust-science a:not(.btn) {
  color:var(--base-deep);
  text-decoration:underline;
  text-underline-offset:.2em;
}
.science-page main a:hover,
.credibility a:hover,
.trust-science a:hover { text-decoration-thickness:2px; }
.science-page main [id] { scroll-margin-top:24px; }
.credibility [id], .trust-science [id] { scroll-margin-top:96px; }

.science-page h1, .science-page h2, .science-page h3, .science-page h4,
.credibility h2, .credibility h3, .credibility h2 .ph {
  word-break:normal;
  overflow-wrap:anywhere;
  white-space:normal;
}
.science-page h1 {
  margin:12px 0 20px;
  font-family:var(--mincho);
  font-size:clamp(32px,5vw,44px);
  font-weight:600;
  line-height:1.5;
}
.science-page h2, .credibility h2 {
  margin:0 0 24px;
  font-size:clamp(23px,3vw,30px);
  line-height:1.55;
}
.science-page h3 {
  margin:0 0 24px;
  color:var(--base-deep);
  font-size:21px;
  line-height:1.6;
}
.science-page h4 {
  margin:0 0 12px;
  color:var(--base-deep);
  font-size:16px;
  line-height:1.65;
}
.science-page .sec-label, .credibility .sec-label {
  margin:0 0 16px;
  padding-bottom:8px;
  color:var(--base-deep);
  border-bottom-color:var(--base);
  font-size:14px;
  letter-spacing:.1em;
}
.science-hero { padding:40px 0; background:var(--surface); }
.science-page main > .science-chapter {
  padding:48px 0;
  background:var(--ground);
  background-image:none;
  border-top:0;
  border-bottom:1px solid var(--line);
}
.science-page main > .science-chapter:nth-of-type(even) {
  background:var(--surface);
}
.science-page main > .science-chapter:last-of-type { padding-bottom:48px; }
.science-field + .science-field { margin-top:24px; }
.science-field > p, .science-field > ul, .science-field > ol { max-width:44em; }
.science-page main ul, .science-page main ol {
  margin-top:12px;
  margin-bottom:20px;
  padding-left:1.5em;
}
.science-page main li + li { margin-top:8px; }

.science-page .note.science-note {
  margin:24px 0 0;
  padding:16px 0 0;
  border:0;
  border-top:1px solid var(--line);
  background:none;
  color:var(--ink-2);
  font-size:14px;
  line-height:1.8;
}
.science-page .note::before, .credibility .note::before { content:none; }
.science-page .note.science-notice,
.credibility .note.credibility-disclaimer {
  padding:20px 16px;
  border:1px solid var(--line);
  border-left:4px solid var(--warn);
  background:var(--warn-tint);
  color:var(--ink);
  font-size:inherit;
  line-height:1.85;
}
.science-notice p:last-child,
.credibility-disclaimer p:last-child { margin-bottom:0; }

.science-toc {
  padding:32px 0;
  background:var(--base-tint);
  border-block:1px solid var(--line);
}
.science-page .science-toc h2 { margin-bottom:12px; font-size:20px; }
.science-toc details {
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
}
.science-toc summary {
  min-height:44px;
  color:var(--base-deep);
  font-weight:700;
  cursor:pointer;
}
.science-page .science-toc ol {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px 36px;
  margin-bottom:0;
}
.science-page .science-toc ol > li { margin-top:0; }
.science-toc ul { font-size:16px; }
.science-toc a { display:inline-block; min-height:44px; padding:6px 0; }

.science-part {
  min-width:0;
  margin-top:32px;
  padding:20px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--base);
  border-radius:12px;
}
.science-contrast {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}
.science-contrast > div {
  min-width:0;
  padding:16px;
  background:var(--base-tint);
  border-top:3px solid var(--base);
}
.science-contrast > .science-limit {
  background:var(--warn-tint);
  border-top:3px dashed var(--warn);
}
.science-page .science-contrast ul { margin-bottom:0; }
.science-reference-mark {
  display:inline-block;
  margin:0 0 16px;
  padding:4px 12px;
  color:var(--ink);
  background:var(--warn-tint);
  border:1px solid var(--warn);
  border-radius:3px;
  font-size:16px;
  font-weight:700;
}

.science-table {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:var(--surface);
}
.science-table caption {
  margin-bottom:16px;
  color:var(--base-deep);
  font-size:16px;
  font-weight:700;
  text-align:left;
}
.science-table th, .science-table td {
  padding:14px;
  border:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  overflow-wrap:anywhere;
}
.science-table thead th { background:var(--base-tint); color:var(--base-deep); }
.science-table tbody th { font-weight:600; }
.science-table-mapping col:nth-child(1) { width:20%; }
.science-table-mapping col:nth-child(2) { width:21%; }
.science-table-mapping col:nth-child(3) { width:32%; }
.science-table-mapping col:nth-child(4) { width:27%; }
.science-table-audit col:nth-child(1) { width:6%; }
.science-table-audit col:nth-child(2) { width:33%; }
.science-table-audit col:nth-child(3) { width:17%; }
.science-table-audit col:nth-child(4) { width:44%; }
.science-table-future col:first-child { width:32%; }
.science-status {
  display:inline-block;
  padding:4px 8px;
  border:1px solid var(--ink-2);
  border-radius:3px;
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
}
.science-status-mid { border-style:dashed; }
.science-status-no { border-style:double; border-width:3px; }

@media (max-width:719px) {
  .science-table, .science-table tbody, .science-table tr {
    display:block;
    width:100%;
  }
  .science-table { background:none; }
  .science-table thead {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .science-table colgroup { display:none; }
  .science-table tr {
    margin-bottom:16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface);
  }
  .science-table td, .science-table tbody th {
    display:block;
    width:auto;
    padding:12px 16px;
    border:0;
  }
  .science-table td + td, .science-table th + td {
    border-top:1px solid var(--line);
  }
  .science-table td::before {
    content:attr(data-label);
    display:block;
    margin-bottom:4px;
    color:var(--base-deep);
    font-size:14px;
    font-weight:700;
  }
  .science-table tbody th {
    background:var(--base-tint);
    border-radius:11px 11px 0 0;
  }
}

.science-page .science-references h3 {
  margin:40px 0 16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  font-size:20px;
}
.science-ref-count { padding:16px 20px; background:var(--base-tint); font-size:18px; }
.science-page main .science-bibliography { margin:0; padding:0; list-style:none; }
.science-page main .science-bibliography > li {
  position:relative;
  margin:0;
  padding:18px 0 18px 3em;
  border-bottom:1px solid var(--line);
  font-size:14px;
  line-height:1.8;
}
.science-ref-number {
  position:absolute;
  top:18px;
  left:0;
  color:var(--base-deep);
  font-weight:700;
}
.science-bibliography p { margin:0 0 8px; }
.science-bibliography p:last-child { margin-bottom:0; }
.science-bibliography a { overflow-wrap:anywhere; word-break:normal; }
.science-ref-description { color:var(--ink); }
.science-affiliation { color:var(--ink-2); }
.science-back { margin-top:32px; }
.science-back .btn { width:100%; }

main > section.credibility {
  padding:48px 0;
  background:var(--surface);
  background-image:none;
  border-block:1px solid var(--line);
  text-align:left;
  font-size:16px;
  line-height:1.8;
}
main > section.credibility-method { background:var(--ground); }
.credibility-cards {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
  margin-top:32px;
}
.credibility-card {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:20px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--base);
  border-radius:12px;
}
.credibility-card h3 {
  margin:0 0 16px;
  color:var(--base-deep);
  font-size:20px;
  line-height:1.65;
}
.credibility-subtitle {
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
}
.credibility-body, .credibility-subtitle, .credibility-source p {
  font-size:inherit;
  font-weight:400;
}
.credibility-source {
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--ink-2);
}
.credibility-source .credibility-source-label,
.trust-science .credibility-source-label {
  margin-bottom:8px;
  color:var(--base-deep);
  font-size:14px;
}
.credibility-path { margin:20px 0 0; }
.credibility-path a {
  display:inline-block;
  min-height:44px;
  padding:8px 0;
  font-size:inherit;
  font-weight:400;
}
.credibility .note.credibility-disclaimer { margin-top:32px; }
.credibility-actions {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:32px;
}
.credibility-actions .btn { width:100%; max-width:100%; }

.trust-grid > .trust-science {
  grid-column:1 / -1;
  padding:20px 16px;
  border-top:3px solid var(--base);
}
.trust-grid .trust-science dt { margin-bottom:16px; font-size:21px; line-height:1.6; }
.trust-grid .trust-science dd {
  padding-left:0;
  color:var(--ink);
  font-size:16px;
  line-height:1.8;
}
.trust-science-subtitle { color:var(--ink-2); }
.trust-science-columns {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
.trust-science-source {
  padding-top:20px;
  border-top:1px solid var(--line);
  color:var(--ink-2);
}

@media (min-width:720px) {
  .science-hero { padding:64px 0 48px; }
  .science-page main > .science-chapter { padding:72px 0; }
  .science-page main > .science-chapter:last-of-type { padding-bottom:72px; }
  .science-page h3 { font-size:23px; }
  .science-page h4 { font-size:17px; }
  .science-page .note.science-notice,
  .credibility .note.credibility-disclaimer { padding:24px; }
  .science-toc details { padding:16px 20px; }
  .science-page .science-toc ol,
  .science-contrast { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .science-part { padding:28px; }
  .science-contrast > div { padding:20px; }
  .science-page main .science-bibliography > li { padding-left:3.5em; }
  .science-back .btn, .credibility-actions .btn { width:auto; }
  main > section.credibility { padding:64px 0; }
  .credibility-cards { gap:24px; }
  .credibility-card { padding:24px; }
  .trust-grid > .trust-science { padding:24px; }
  .trust-grid .trust-science dt { font-size:23px; }
  .trust-science-columns {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px;
  }
  .trust-science-source { padding-top:0; border-top:0; }
}

@media (min-width:1000px) {
  .science-page, main > section.credibility { font-size:16.5px; line-height:1.85; }
  .credibility-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .credibility-card { padding:24px 20px; }
}

@media print {
  @page { margin:15mm; }
  .science-page {
    background:var(--surface);
    color:var(--ink);
    font-size:12pt;
    line-height:1.65;
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact;
  }
  .science-page .wrap { max-width:none; padding:0; }
  .science-page .topbar, .science-page .skip,
  .science-toc, .science-back, .credibility-actions { display:none; }
  .science-hero, .science-page main > .science-chapter,
  .science-page main > .science-chapter:last-of-type,
  main > section.credibility {
    padding:18pt 0;
    background:var(--surface);
    background-image:none;
  }
  .science-page h1 { font-size:26pt; }
  .science-page h2 { font-size:20pt; }
  .science-page h3 { font-size:16pt; }
  .science-page h4 { font-size:12pt; }
  .science-page h1, .science-page h2, .science-page h3, .science-page h4,
  .credibility h2, .credibility h3, .trust-science dt { break-after:avoid; }
  .science-part { padding:14pt; border-radius:0; break-inside:auto; }
  .science-contrast, .credibility-cards, .trust-science-columns { display:block; }
  .science-contrast > div { margin-bottom:12pt; }
  .science-page .note.science-notice,
  .credibility .note.credibility-disclaimer {
    padding:12pt;
    border:2px solid var(--ink-2);
  }
  .science-table { display:table; table-layout:fixed; background:var(--surface); }
  .science-table thead {
    display:table-header-group;
    position:static;
    width:auto;
    height:auto;
    margin:0;
    overflow:visible;
    clip-path:none;
    white-space:normal;
  }
  .science-table tbody { display:table-row-group; }
  .science-table tr { display:table-row; break-inside:avoid; }
  .science-table td, .science-table tbody th {
    display:table-cell;
    width:auto;
    padding:7pt;
    border:1px solid var(--line);
    border-radius:0;
  }
  .science-table td::before { display:none; }
  .science-table colgroup { display:table-column-group; }
  .science-page main .science-bibliography > li {
    break-inside:avoid;
    font-size:10.5pt;
    line-height:1.7;
  }
  .science-page .note.science-note,
  .science-affiliation, .science-ref-number { font-size:10.5pt; }
  .credibility-card { margin-bottom:16pt; border-radius:0; break-inside:auto; }
  .credibility-source, .credibility-path, .trust-science-source { break-inside:avoid; }
}