@charset "utf-8";

/* =========================================================================
   ぽんのはら LP — styles.css
   設計書: .lp-workspace/04-design.md（6章 カラー / 5章 タイポ / 7章 演出）
   外部CDN・Webフォント配信への参照はゼロ。
   ========================================================================= */

/* ---------- 1. トークン ------------------------------------------------ */

:root {
  /* アプリと1:1のトークン */
  --canvas:     #FFF9E8;
  --paper:      #FFFDF5;
  --sky:        #E8F5FA;
  --grass-mist: #F0F7D6;
  --tea-green:  #DCE8B7;
  --sage:       #AFC59A;
  --butter:     #F5D173;
  --blush:      #E9A3B3;
  --drop:       #A8D1E3;
  --brand:      #AD4F61;
  --ink:        #45403B;
  --ink-2:      #736D63;

  /* LP固有の派生（この5つ以外を増やさない） */
  --butter-deep: #D9AE4E;
  --butter-lit:  #F8DA88;
  --butter-soft: #F7E3AC;
  --blush-soft:  #F5D3DB;
  --ink-a10:     rgba(69, 64, 59, .10);

  /* タイプスケール（375px → 1440px の線形補間） */
  --fs-display: clamp(2.5rem,    1.884rem + 2.629vw, 4.25rem);
  --fs-h2:      clamp(1.75rem,   1.486rem + 1.127vw, 2.5rem);
  --fs-h3:      clamp(1.1875rem, 1.121rem + 0.282vw, 1.375rem);
  --fs-lead:    clamp(1rem,      0.934rem + 0.282vw, 1.1875rem);
  --fs-body:    clamp(0.969rem,  0.936rem + 0.141vw, 1.0625rem);
  --fs-small:   clamp(0.8125rem, 0.791rem + 0.094vw, 0.875rem);
  --fs-cta:     clamp(1.125rem,  1.055rem + 0.282vw, 1.25rem);

  --ease: cubic-bezier(.22, .68, .32, 1);
  --ease-pop: cubic-bezier(.34, 1.32, .5, 1);

  /* セクションの縦パディング（SP 72px → PC 120px） */
  --sec-pad: 72px;
  /* fade-up の移動量と遅延（SP 10px / 60ms → PC 14px / 90ms） */
  --reveal-shift: 10px;
  --reveal-step: 60ms;

  --font-rounded:
    "Hiragino Maru Gothic ProN",
    "ヒラギノ丸ゴ ProN W4",
    "Zen Maru Gothic",
    "M PLUS Rounded 1c",
    "Hiragino Sans",
    "Noto Sans JP",
    "Yu Gothic Medium", "Meiryo",
    system-ui, -apple-system, sans-serif;
}

@media (min-width: 768px) {
  :root {
    --sec-pad: 120px;
    --reveal-shift: 14px;
    --reveal-step: 90ms;
  }
}

/* ---------- 2. リセットと土台 ------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-rounded);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.95;
  letter-spacing: .03em;
  overflow-x: hidden;
}

/* SP固定CTAバーぶんの逃げはフッターの内側で確保する（20章）。
   body 側の padding にすると、バーが退避するページ末尾で地色が帯として露出する。 */

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: .02em; }
h1, h2, h3, .sec__lead, .hero__sub { line-break: strict; overflow-wrap: anywhere; }
/* 文節で折る。h3・リード文・キャラ説明にも広げて、SPで末尾1文字だけの行が出るのを抑える */
h1, h2, h3, .sec__lead, .chara__desc, .faq__q { word-break: auto-phrase; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; }

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

/* ---------- 3. レイアウト ---------------------------------------------- */

.container {
  width: calc(100% - 40px);
  margin-inline: auto;
}
@media (min-width: 600px) { .container { width: calc(100% - 48px); } }
@media (min-width: 768px) { .container { width: min(720px, 100% - 64px); } }
@media (min-width: 1024px) { .container { width: min(960px, 100% - 64px); } }
@media (min-width: 1280px) { .container { width: min(1120px, 100% - 80px); } }

.container--narrow { max-width: 800px; }

.sec {
  position: relative;
  padding-block: var(--sec-pad);
  overflow: hidden;
}

.sec__title {
  font-size: var(--fs-h2);
  line-height: 1.42;
  text-align: center;
}
.sec__title--left { text-align: left; }

.sec__lead {
  margin: 24px auto 0;
  max-width: 32em;
  font-size: var(--fs-lead);
  line-height: 1.95;
  text-align: center;
}
.sec__lead--left { margin-inline: 0; text-align: left; }
.sec__lead p + p { margin-top: 1.2em; }

.note {
  margin-top: 20px;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-2);
  text-align: center;
}

/* カード（UnevenRoundedRectangle の再現） */
.card {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 16px 10px 18px 12px;
  box-shadow: 0 4px 0 var(--ink-a10);
}

/* 区切り */
.divider-stitched {
  height: 1.5px;
  margin: 64px 0 0;
  border: 0;
  background: url(assets/ui/decor/divider-stitched.svg) repeat-x left center / 10px 1.5px;
}
.divider-grass {
  height: 28px;
  margin-top: var(--sec-pad);
  background: url(assets/ui/decor/divider-grass.svg) repeat-x left bottom / 240px 28px;
}

/* ---------- 4. 共通パーツ ---------------------------------------------- */

/* CTA（SeedButtonShape の再現） */
.btn-seed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 56px;
  padding: 18px 34px;
  background: var(--butter);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--butter-deep), 0 10px 18px rgba(69, 64, 59, .12);
  font-size: var(--fs-cta);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  text-decoration: none;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s;
}
.btn-seed:hover {
  transform: translateY(-1px);
  background: var(--butter-lit);
  box-shadow: 0 5px 0 var(--butter-deep), 0 14px 22px rgba(69, 64, 59, .14);
}
/* 押した手応えは状態フィードバックなので reduced-motion でも残す */
.btn-seed:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--butter-deep), 0 4px 8px rgba(69, 64, 59, .10);
}
.btn-seed--sm {
  min-height: 48px;
  padding: 12px 24px;
  font-size: var(--fs-body);
}

/* テキストリンク（下線が伸びる） */
.link {
  color: var(--brand);
  text-decoration: none;
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size .25s var(--ease);
}
.link:hover, .link:focus-visible { background-size: 100% 1.5px; }

/* 紙チケット（PaperTicketShape） */
.paper-ticket {
  --notch: radial-gradient(circle 8px at 0 50%, transparent 98%, #000 100%),
           radial-gradient(circle 8px at 100% 50%, transparent 98%, #000 100%);
  display: inline-block;
  padding: 10px 26px;
  background: var(--paper);
  border: 1.4px solid rgba(69, 64, 59, .34);
  border-radius: 16px;
  -webkit-mask-image: var(--notch);
  mask-image: var(--notch);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  text-align: center;
}
.paper-ticket--label {
  padding: 6px 22px;
  font-size: var(--fs-small);
  font-weight: 700;
}

/* 紙チケット型のトグルボタン */
.ticket-btn {
  display: inline-block;
  padding: 12px 18px;
  min-height: 48px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 14px 9px 15px 10px;
  font-size: var(--fs-small);
  font-weight: 700;
  transition: background-color .2s var(--ease), transform .16s var(--ease);
}
.ticket-btn:hover { transform: translateY(-1px); }
.ticket-btn[aria-pressed="true"] { background: var(--butter); }

/* セグメント（ふとさ） */
.demo__seg {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: var(--paper);
}
.seg-btn {
  flex: 1 1 0;
  min-height: 48px;
  padding: 10px 6px;
  font-size: var(--fs-small);
  font-weight: 700;
  transition: background-color .2s var(--ease);
}
.seg-btn + .seg-btn { border-left: 1.5px solid var(--ink); }
.seg-btn[aria-pressed="true"] { background: var(--butter); }

/* 小石ボタン（PebbleShape） */
.pebble-btn {
  min-height: 48px;
  padding: 12px 22px;
  background: var(--paper);
  border: 1.6px solid rgba(69, 64, 59, .55);
  border-radius: 62% 38% 55% 45% / 48% 57% 43% 52%;
  font-size: var(--fs-small);
  font-weight: 700;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.pebble-btn:hover { transform: rotate(2deg); }
.pebble-btn[aria-pressed="true"] { background: var(--butter-soft); }

/* アイコン（スプライトの <use>。色はハードコード済みなので染めない） */
.icon {
  width: 32px;
  height: 32px;
  flex: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 40px; height: 40px; }
.icon--xl { width: 48px; height: 48px; }

/* チップ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  padding: 4px 14px;
  background: var(--grass-mist);
  border-radius: 999px;
  font-size: var(--fs-small);
  line-height: 1.7;
}

/* ---------- 5. 演出の土台（E3 / E5） ------------------------------------ */

.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: calc(var(--i, 0) * var(--reveal-step));
}
.js .is-in .reveal { opacity: 1; transform: none; }

/* ひょっこり（E7） */
.peek {
  position: absolute;
  bottom: 12%;
  width: clamp(96px, 11vw, 168px);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.peek--right { right: 0; transform: translateX(58%) rotate(6deg); }
.peek--left  { left: 0;  transform: translateX(-58%) rotate(-6deg); }
.js .peek { transition: transform .72s var(--ease-pop), opacity .3s ease; }
.js .is-in .peek--right { transform: translateX(14%) rotate(-2deg); opacity: 1; }
.js .is-in .peek--left  { transform: translateX(-14%) rotate(2deg); opacity: 1; }
/* SPは右端2箇所のみ */
@media (max-width: 767px) {
  .peek--left { display: none; }
}

/* ---------- 6. §0 ヘッダー ---------------------------------------------- */

.site-header {
  position: static;
  background: var(--canvas);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__icon { width: 36px; height: 36px; border-radius: 9px; }
.brand__name { font-size: 20px; font-weight: 700; letter-spacing: .04em; }
.site-header__cta { font-size: var(--fs-body); font-weight: 700; }
@media (max-width: 767px) {
  .site-header__cta { display: none; }
  .site-header__inner { min-height: 60px; }
}

/* ---------- 7. §1 Hero -------------------------------------------------- */

.hero {
  position: relative;
  padding-block: 40px 0;
  background: var(--canvas);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url(assets/ui/decor/texture-paper-grain.png) repeat left top / 256px 256px,
    url(assets/ui/decor/bg-meadow-hero.svg) no-repeat center bottom / cover;
  background-blend-mode: multiply, normal;
  opacity: .96;
  z-index: 0;
}
.hero__grid { position: relative; z-index: 1; padding-bottom: 64px; }

.hero__title { font-size: var(--fs-display); line-height: 1.28; }
.hero__brand {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .12em;
}
.hero__catch { display: block; }

.hero__sub {
  margin-top: 24px;
  max-width: 30em;
  font-size: var(--fs-lead);
  line-height: 1.95;
}
.hero__sub-line { display: block; }

.hero__action { margin-top: 32px; }
@media (max-width: 767px) {
  .hero__action .btn-seed { display: flex; width: 100%; }
}
.hero__note { margin-top: 14px; text-align: left; }

.hero__visual { position: relative; }

/* Hero シーン: 実機キャプチャを主役に、3匹がそれぞれ別レイヤーで浮かぶ。
   「動画らしさ」は周期・振幅・遅延をずらした浮遊アニメーションで出す（E2代替） */
.hero-scene {
  position: relative;
  width: min(340px, 82%);
  margin: 32px auto 12px;
}
.hero-scene img { display: block; pointer-events: none; }
.hero-scene__device {
  width: 66%;
  height: auto;
  margin-left: 20%;
  transform: rotate(4.5deg);
  animation: hero-float-device 6s ease-in-out infinite;
}
.hero-scene__chick,
.hero-scene__elephant,
.hero-scene__lamb {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 8px 8px rgba(69, 64, 59, 0.18));
}
.hero-scene__chick {
  width: 42%;
  top: 2%;
  left: -4%;
  animation: hero-float-a 5.2s ease-in-out 0.6s infinite;
}
.hero-scene__elephant {
  width: 44%;
  bottom: 12%;
  left: -6%;
  animation: hero-float-b 6.8s ease-in-out 1.4s infinite;
}
.hero-scene__lamb {
  width: 42%;
  bottom: 2%;
  right: -5%;
  animation: hero-float-a 6s ease-in-out 0.2s infinite;
}
@keyframes hero-float-device {
  0%, 100% { transform: rotate(4.5deg) translateY(0); }
  50%      { transform: rotate(3.5deg) translateY(-10px); }
}
@keyframes hero-float-a {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(-2.5deg); }
}
@keyframes hero-float-b {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene__device,
  .hero-scene__chick,
  .hero-scene__elephant,
  .hero-scene__lamb { animation: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-scene { width: min(400px, 62%); margin-top: 40px; }
}

@media (min-width: 1024px) {
  .hero { padding-block: 96px 0; }
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: center;
    padding-bottom: 96px;
  }
  .hero__brand { font-size: 16px; }
  .hero-scene { width: min(460px, 92%); margin: 0 auto; }
}

/* ---------- 8. §2 歩行入場バンド（E6） ---------------------------------- */

.walk-band {
  position: relative;
  min-height: 168px;
  background: var(--grass-mist);
  overflow: hidden;
}
.walk-band__art {
  position: absolute;
  inset: 0;
  background: url(assets/ui/bands/band-home-world.webp) no-repeat center bottom / cover;
}
/* band-home-world.webp（1600×348）には、文字を入れるための空の看板が描かれている
   （実測: 面が x450–1026 / y86–318。バンド中央より 62px ぶん左に寄っている）。
   紙札を看板の上端にだけ載せると看板の下側が無地の面のまま残り、読み込みに
   失敗した空箱に見えるので、紙札を看板の面そのものに重ねて埋める。

   バンドは cover / center bottom。拡大率 s = max(バンド幅 ÷ 1600, バンド高 ÷ 348) とすると
     看板の上端 = バンド高 − 262s ／ 下端からの余り = 30s
     看板の中心 = バンド中心の 62s 左 ／ 幅 = 576s ／ 高さ = 232s
   これを inset に落とし、margin: auto で面の中央に置く。左寄りぶんは right だけを
   124s（＝ 62s の2倍）にして作る。transform は .reveal のフェードアップと競合するため使わない。 */
.walk-band__ticket {
  position: absolute;
  z-index: 2;
  /* SP: s = 168 ÷ 348 = 0.4828 で固定 */
  left: 0;
  right: 60px;    /* 124 × 0.4828 */
  top: 41px;      /* 168 − 262 × 0.4828 */
  bottom: 15px;   /*        30 × 0.4828 */
  margin: auto;
  width: 260px;      /* 看板幅 278px の内側 */
  max-width: calc(100% - 32px);
  height: fit-content;
  min-height: 84px;  /* 看板高 112px */
  /* 看板の幅に収める代わりに左右の余白を詰め、「ちいさな写真おてつだい組」を1行に保つ */
  padding-inline: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.paper-ticket__main { display: block; font-size: 17px; font-weight: 700; line-height: 1.5; }
.paper-ticket__sub  { display: block; font-size: 13px; line-height: 1.6; color: var(--ink-2); }

.walkers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* §2 では紙札が看板の面を埋めているので、3匹は紙札の手前を横切らせる。
   看板の前を歩いて通り過ぎる見えになり、通過後も看板が空箱に見えない。
   （§14 の walkers--final は本文の下に置きたいので z-index はそのまま） */
.walk-band .walkers { z-index: 3; }
.walker {
  position: absolute;
  bottom: var(--lane);
  right: -22%;
  width: var(--w);
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position-x: 0;
}
.is-in .walker {
  animation:
    walk-across var(--cross) linear var(--delay) 1 both,
    walk-step   var(--step)  steps(2, end) var(--delay) infinite,
    walk-bob    var(--step)  ease-in-out   var(--delay) infinite alternate;
}
@keyframes walk-across { from { right: -22%; } to { right: 102%; } }
/* background-size: 200% で2コマ。steps(2, end) が保持するのは 0% と 100% の2値で、
   100% は「(要素幅 − 画像幅) × 1」= 左に1コマぶんのずれ = 2コマ目。
   符号を負にすると画像が要素の右外へ出て no-repeat で消えるので 200% を正で指定する。 */
@keyframes walk-step   { to { background-position-x: 200%; } }
@keyframes walk-bob    { to { transform: translateY(calc(var(--bob) * -1)); } }

.walker--elephant {
  --w: 132px; --cross: 2.34s; --delay: 0s;   --step: .25s; --bob: 3px; --lane: 8%;
  background-image: url(assets/ui/characters/walk-elephant.webp);
}
.walker--lamb {
  --w: 110px; --cross: 2.20s; --delay: .42s; --step: .22s; --bob: 4px; --lane: 5%;
  background-image: url(assets/ui/characters/walk-lamb.webp);
}
.walker--chick {
  --w: 92px;  --cross: 1.75s; --delay: .90s; --step: .17s; --bob: 5px; --lane: 2%;
  background-image: url(assets/ui/characters/walk-chick.webp);
}

@media (min-width: 768px) {
  .walk-band { min-height: 260px; }
  /* PC: s = max(バンド幅 ÷ 1600, 260 ÷ 348)。1196px 未満は高さ側が効いて s = 0.7471 で頭打ち */
  .walk-band__ticket {
    right: max(93px, 7.75%);
    top: clamp(0px, calc(260px - 16.375vw), 64px);
    bottom: max(22px, 1.875vw);
    width: max(387px, 32.4%);
    min-height: max(104px, 8.7vw);
    padding-inline: 26px;
  }
  .paper-ticket__main { font-size: 22px; }
  .paper-ticket__sub { font-size: 15px; }
  .walker--elephant { --w: 210px; }
  .walker--lamb     { --w: 176px; }
  .walker--chick    { --w: 146px; }
}

/* バンドの横流れ（E14・対応ブラウザのみ） */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .walk-band__art, .sec--final::before {
      animation: band-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes band-drift {
      from { transform: translateX(-3%); }
      to   { transform: translateX(3%); }
    }
  }
}

/* ---------- 9. §3 問題提起 ---------------------------------------------- */

.sec--problem { background: var(--canvas); }
.sec--problem::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/ui/decor/texture-paper-grain.png) repeat left top / 256px 256px;
  mix-blend-mode: multiply;
  opacity: .35;
  pointer-events: none;
}
.sec--problem > .container { position: relative; z-index: 1; }
.sec--problem .sec__lead { max-width: 34em; }

.compare {
  display: grid;
  gap: 24px;
  margin-top: 48px;
}
.compare__item { margin: 0; }
.compare__item .paper-ticket { display: block; width: max-content; margin: 0 auto 12px; }
.compare__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
}
.compare__caption {
  margin-top: 24px;
  font-size: var(--fs-body);
  text-align: center;
}
@media (min-width: 768px) {
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

/* ---------- 10. §4 なぞりデモ（E1） ------------------------------------- */

.sec--trydemo { background: var(--paper); }
.sec--trydemo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/ui/decor/pattern-picnic-grid.svg) repeat left top / 22px 22px;
  pointer-events: none;
}
.sec--trydemo > .container { position: relative; z-index: 1; }

.demo {
  display: grid;
  gap: 24px;
  margin-top: 48px;
}

.demo__stage {
  position: relative;
  touch-action: pan-y;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  background: var(--canvas);
}
.demo.is-armed .demo__stage { touch-action: none; }

.demo__base { width: 100%; height: auto; }
.demo__ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  cursor: crosshair;
}
.demo.is-armed .demo__ink { pointer-events: auto; }

.demo__done {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease);
}
.demo.is-revealed .demo__done { opacity: 1; }

.demo__hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 18px;
  background: rgba(255, 253, 245, .92);
  border: 1.4px solid rgba(69, 64, 59, .34);
  border-radius: 999px;
  font-size: var(--fs-small);
  white-space: nowrap;
  pointer-events: none;
}
.demo__hint[hidden] { display: none; }

.demo__panel { display: flex; flex-direction: column; gap: 12px; }
.demo__panel-title { font-size: var(--fs-small); font-weight: 700; }
.demo__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.demo__tools .ticket-btn { flex: 1 1 auto; }
.demo__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* SP: 「じぶんでなぞる」を押すまで操作パネルを出さない */
.demo__arm, .demo__disarm { display: none; }
@media (max-width: 767px) {
  .demo__arm { display: inline-flex; width: 100%; }
  .demo__controls { display: none; }
  .demo.is-armed .demo__arm { display: none; }
  .demo.is-armed .demo__controls { display: flex; flex-direction: column; gap: 12px; }
  .demo.is-armed .demo__disarm { display: block; width: 100%; border-radius: 999px; }
}

.demo__still { margin: 48px 0 0; }
.demo__still img {
  width: 100%;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
}
.demo__still figcaption {
  margin-top: 16px;
  font-size: var(--fs-body);
  text-align: center;
}

@media (min-width: 1024px) {
  .demo { grid-template-columns: minmax(0, 720px) 352px; gap: 48px; align-items: start; }
  .demo__still { max-width: 720px; }
}

/* ---------- 11. §5 つかいかた ------------------------------------------- */

.sec--howto { background: var(--canvas); }
.sec--howto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/ui/bands/band-editor-guide.webp) no-repeat center top / 1600px auto;
}
.sec--howto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--canvas);
  opacity: .88;
}
.sec--howto > .container { position: relative; z-index: 1; }

/* §5 は 1ステップずつ見せるカルーセル（scroll-snap ＋ 素の DOM API。外部ライブラリなし） */
.carousel {
  position: relative;
  margin-top: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "track track track"
    "prev  dots  next";
  row-gap: 16px;
}

.carousel__track {
  grid-area: track;
  /* --peek は左右にのぞく隣のスライドのぶん。padding と 100% 幅で first/last も中央に来る */
  --peek: 0px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 20px;
  margin: 0;
  padding: 4px var(--peek) 8px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { scroll-snap-align: center; scroll-snap-stop: always; }

.carousel__btn {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1.6px solid rgba(69, 64, 59, .55);
  border-radius: 62% 38% 55% 45% / 48% 57% 43% 52%;
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.carousel__btn--prev { grid-area: prev; }
.carousel__btn--next { grid-area: next; }
.carousel__btn:hover:not(:disabled) { background: var(--butter-soft); transform: rotate(2deg); }
.carousel__btn:disabled { opacity: .34; cursor: default; }
.carousel__chev { width: 28px; height: 28px; }

.carousel__dots {
  grid-area: dots;
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel__dot {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
}
.carousel__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.carousel__dot[aria-current="true"]::before { background: var(--butter); transform: scale(1.4); }

/* JS が無い環境ではカルーセルにならないので、操作パネルを出さない（触れないものを見せない）*/
html:not(.js) .carousel__btn,
html:not(.js) .carousel__dots { display: none; }

.steps { margin-top: 0; }
.step { position: relative; padding: 24px 20px 28px; }
.step__head {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 12px;
}
.step__chara {
  width: 76px;
  height: 76px;
  margin: 0;
}
.step__no {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 0;
  display: grid;
  place-items: center;
}
.step__badge {
  position: absolute;
  inset: 0;
  background: url(assets/ui/decor/shape-flower-pin-butter.svg) no-repeat center / contain;
}
.step__no-text { position: relative; font-size: 17px; font-weight: 700; }
.step__title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: var(--fs-h3);
  line-height: 1.55;
}
.step__body { margin-top: 0; }
.step__body + .chips { position: relative; padding-top: 20px; }
.step__body + .chips::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: url(assets/ui/decor/divider-stitched.svg) repeat-x left center / 10px 1.5px;
}

/* 実画面（iOSシミュレーターで撮った実機の画面を、原っぱの背景に額装したもの） */
.shot { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink-a10);
}
.shot__cap {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
  text-align: center;
}

/* 実画面はカルーセルの主役なので、1カラムのときは本文の下に大きく置く */
.step__shot { position: relative; margin-top: 24px; padding-top: 20px; }
.step__shot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: url(assets/ui/decor/divider-stitched.svg) repeat-x left center / 10px 1.5px;
}
.step__shot img { max-width: 248px; }

/* ステップ②に添える 9:16 動画は PC のみ（本文に重ねない） */
.step__video { display: none; }

@media (min-width: 768px) {
  /* 1スライドの中を「実画面 ｜ 見出し＋本文」の2カラムにして、実画面を主役に据える */
  .carousel__slide {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "shot head"
      "shot text";
    column-gap: 40px;
    align-items: start;
    padding: 28px 28px 32px;
  }
  .step__head { grid-area: head; }
  .step__shot {
    grid-area: shot;
    margin-top: 0;
    padding-top: 0;
  }
  .step__shot::before { content: none; }
  .step__shot img { max-width: 280px; }
  .step__text { grid-area: text; margin-top: 20px; }
  .step__chara { width: 88px; height: 88px; }
}

@media (min-width: 1024px) {
  .carousel__track { --peek: 84px; }
  .carousel__slide { padding: 32px 36px 36px; column-gap: 48px; }
  .step__shot img { max-width: 300px; }
  .step__chara { width: 104px; height: 104px; }

  /* PC は前後ボタンをスライドの左右に置く（絶対配置の包含ブロックは track のグリッド領域）*/
  .carousel { grid-template-areas: "track track track" "dots dots dots"; }
  .carousel__btn {
    grid-area: track;
    position: absolute;
    top: 50%;
    margin-top: -28px;
  }
  .carousel__btn--prev { left: -20px; }
  .carousel__btn--next { right: -20px; }

  .step__video {
    display: block;
    width: 208px;
    margin: 24px 0 0;
    padding: 0 0 0 3%;
    transform: rotate(2deg);
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 12px;
    box-shadow: 0 6px 0 var(--ink-a10);
  }
  .step__video video {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: contain;
    border-radius: 10px;
  }
}

/* ---------- 12. §6 かくしかた4つ ---------------------------------------- */

.sec--tools { background: var(--paper); }

.tools__head { display: grid; gap: 24px; }
.tools__video {
  margin: 0 auto;
  width: 60%;
  padding-left: 3%;
  background: var(--canvas);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 6px 0 var(--ink-a10);
}
.tools__video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: 10px;
}
.tools__headtext .sec__title { text-align: center; }
.tools__headtext .sec__lead { text-align: center; }

@media (min-width: 1024px) {
  .tools__head { grid-template-columns: 216px minmax(0, 1fr); gap: 40px; align-items: center; }
  .tools__video { width: 216px; }
  .tools__headtext .sec__title { text-align: left; }
  .tools__headtext .sec__lead { margin-inline: 0; text-align: left; max-width: 34em; }
}

.tool-shots__lead {
  margin-top: 48px;
  text-align: center;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.55;
}
.tool-shots {
  display: grid;
  gap: 32px;
  margin: 24px auto 0;
  max-width: 700px;
}
.tool-shots .shot img { max-width: 300px; }
@media (min-width: 768px) {
  .tool-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tool-grid { display: grid; gap: 24px; margin-top: 48px; }
.tool { padding: 16px 16px 24px; }
.tool__sample {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--canvas);
}
.tool__sample > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .35s var(--ease);
}
.tool__emoji {
  position: absolute;
  top: 26%;
  left: 22%;
  font-size: clamp(40px, 9vw, 76px);
  line-height: 1;
}
.tool__stamp {
  position: absolute;
  top: 18%;
  left: 16%;
  width: 30%;
  height: auto;
}
.tool__after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tool__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: var(--fs-h3);
  line-height: 1.55;
}
.tool__body { margin-top: 8px; }

/* SP・タッチ環境は加工後を初期表示（hoverで隠さない） */
.tool--blur .tool__sample > img:first-child { filter: blur(6px); }
.tool--emoji .tool__emoji,
.tool--stamp .tool__stamp { opacity: 1; transform: none; }
.tool--mosaic .tool__after { opacity: 1; }

@media (min-width: 1024px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  /* PC は hover で実演する */
  .tool--blur .tool__sample > img:first-child { filter: none; }
  .tool--blur:hover .tool__sample > img:first-child { filter: blur(6px); }
  .tool--emoji .tool__emoji { opacity: 0; transform: scale(.7) rotate(-14deg); transition: opacity .3s, transform .35s var(--ease-pop); }
  .tool--emoji:hover .tool__emoji { opacity: 1; transform: scale(1) rotate(-4deg); }
  .tool--stamp .tool__stamp { opacity: 0; transform: scale(.7) rotate(12deg); transition: opacity .3s, transform .35s var(--ease-pop); }
  .tool--stamp:hover .tool__stamp { opacity: 1; transform: scale(1) rotate(3deg); }
  .tool--mosaic .tool__after { opacity: 0; transition: opacity .35s var(--ease); }
  .tool--mosaic:hover .tool__after { opacity: 1; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.extras { display: grid; gap: 24px; margin-top: 40px; }
.extra__title { margin-top: 10px; font-size: var(--fs-lead); line-height: 1.6; }
.extra__body { margin-top: 6px; font-size: var(--fs-small); line-height: 1.8; }
@media (min-width: 600px) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .extras { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* ---------- 13. §7 なかまたち ＋ §8 中間CTA ----------------------------- */

.sec--friends { background: var(--grass-mist); }
.sec--friends::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/ui/decor/pattern-dots.svg) repeat left top / 24px 24px;
  pointer-events: none;
}
.sec--friends > .container { position: relative; z-index: 1; }

.charas { display: grid; gap: 24px; margin-top: 48px; }
.chara {
  display: block;
  width: 100%;
  padding: 24px 16px;
  text-align: center;
}
.chara__art {
  position: relative;
  display: block;
  width: 148px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.chara__pose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .22s, transform .3s var(--ease);
}
.chara__pose--on { opacity: 0; }
.chara:hover .chara__pose--idle,
.chara[aria-pressed="true"] .chara__pose--idle { opacity: 0; }
.chara:hover .chara__pose--on,
.chara[aria-pressed="true"] .chara__pose--on { opacity: 1; transform: rotate(-3deg) scale(1.04); }
.chara__name { display: block; margin-top: 12px; font-size: 24px; font-weight: 700; }
.chara__desc { display: block; margin-top: 8px; font-size: var(--fs-body); line-height: 1.95; }
.chara__desc .line { display: block; }

@media (min-width: 1024px) {
  .charas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .chara__art { width: 200px; }
  /* 2行の改行位置を固定したいので、カード幅に収まるサイズまで落とす */
  .chara__desc { font-size: 14px; letter-spacing: .01em; }
}
@media (min-width: 1280px) {
  .chara__desc { font-size: 16px; letter-spacing: .02em; }
}

.stamps__title { margin-top: 64px; font-size: 24px; line-height: 1.5; text-align: center; }
.stamps__lead { margin: 12px auto 0; max-width: 32em; font-size: var(--fs-body); text-align: center; }
.stamps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.stamp { width: 100%; height: auto; }
@media (min-width: 768px) {
  .stamps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .stamp { transition: transform .28s cubic-bezier(.34, 1.35, .5, 1); }
  .stamps li:hover .stamp, .stamp:focus-visible { transform: rotate(-7deg) scale(1.07); }
  .stamps li:nth-child(2n):hover .stamp { transform: rotate(7deg) scale(1.07); }
}

.cta-mid { margin-block: 64px 0; text-align: center; }
@media (max-width: 767px) {
  .cta-mid .btn-seed { display: flex; width: 100%; }
}

/* ---------- 14. §9 こんなときに ----------------------------------------- */

.sec--usecases { background: var(--canvas); }
.usecases { display: grid; gap: 24px; margin-top: 48px; }
.usecase { padding: 16px 16px 24px; }
.usecase__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
}
.usecase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.usecase__before {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.usecase[data-before="true"] .usecase__before { opacity: 1; }
.usecase__toggle { margin-top: 14px; }
.usecase__title { margin-top: 14px; font-size: var(--fs-lead); line-height: 1.6; }
.usecase__scenario { margin-top: 6px; font-size: var(--fs-small); line-height: 1.8; }
.usecase__caption { margin-top: 6px; font-size: var(--fs-small); line-height: 1.8; color: var(--brand); }

@media (min-width: 768px) {
  .usecases { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  /* 3列の高さを揃えるため、縦長カットも 3:2 の枠に収める */
  .usecase__media { aspect-ratio: 3 / 2; }
}

/* ---------- 15. §10 あんしん -------------------------------------------- */

.sec--trust { background: var(--paper); }
.sec--trust::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: url(assets/ui/decor/divider-stitched.svg) repeat-x left center / 10px 1.5px;
}
.trust-list { display: grid; gap: 24px; margin-top: 48px; }
.trust-item { padding: 24px 20px; }
.trust-item__title { margin-top: 12px; font-size: var(--fs-h3); line-height: 1.55; }
.trust-item__body { margin-top: 10px; }
@media (min-width: 600px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

/* ---------- 16. §11 料金 ------------------------------------------------ */

.sec--pricing { background: var(--sky); }
.prices { display: grid; gap: 24px; margin-top: 48px; }
.price { padding: 20px 20px 28px; text-align: center; }
.price--butter { background: var(--butter-soft); }
.price--sky { background: var(--sky); }
.price--blush { background: var(--blush-soft); }
.price__art {
  display: grid;
  place-items: center;
  min-height: 120px;
}
.price__art img { max-height: 140px; width: auto; }
.price__title { margin-top: 12px; font-size: var(--fs-h3); line-height: 1.55; }
.price__tag { margin-top: 12px; }
.price__body { margin-top: 12px; font-size: var(--fs-small); line-height: 1.8; }
.pricing__compare { margin-top: 32px; text-align: center; }
@media (min-width: 1024px) {
  .prices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .price__art { min-height: 168px; }
}

/* ---------- 17. §12 FAQ ------------------------------------------------- */

.sec--faq { background: var(--canvas); }
.faq { margin-top: 40px; }
.faq__item { border-bottom: 1.5px solid var(--ink-a10); }
.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 0;
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: .2em;
  background: url(assets/ui/decor/shape-flower-pin-blush.svg) no-repeat center / contain;
}
.faq__q::after {
  content: "＋";
  margin-left: auto;
  color: var(--brand);
  font-weight: 700;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding: 0 0 24px 36px; }
.faq__a .note { margin-top: 12px; text-align: left; }

/* ---------- 18. §13 できること ------------------------------------------ */

.sec--features { background: var(--paper); padding-bottom: 0; }
.features { display: grid; gap: 12px; margin-top: 40px; }
.features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-body);
  line-height: 1.9;
}
.features li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: .45em;
  background: url(assets/ui/decor/shape-flower-pin-sage.svg) no-repeat center / contain;
}
@media (min-width: 768px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; }
}

/* ---------- 19. §14 最終CTA --------------------------------------------- */

.sec--final {
  background: var(--grass-mist);
  text-align: center;
  /* 背景バンドのぶんだけ下に余白を作り、本文と重ねない */
  padding-bottom: calc(var(--sec-pad) + 150px);
}
.sec--final::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 170px;
  background: url(assets/ui/bands/band-completion.webp) no-repeat center bottom / cover;
}
@media (min-width: 768px) {
  .sec--final { padding-bottom: calc(var(--sec-pad) + 210px); }
  .sec--final::before { height: 240px; }
}
.final__inner { position: relative; z-index: 2; }
.sec--final .sec__lead { margin-inline: auto; }

/* 2回目の歩行入場は PC のみ */
.walkers--final { display: none; }
@media (min-width: 768px) {
  .walkers--final {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 180px;
    z-index: 1;
  }
}

.final__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}
.final__action { margin: 0; }
/* SP はボタンを1行占有させ、お見送りの2匹はその上の行に左右で立たせる */
@media (max-width: 767px) {
  .final__stage { flex-wrap: wrap; justify-content: space-between; gap: 12px 0; }
  .send-off { order: 1; }
  .final__action { order: 2; flex: 1 0 100%; }
  .final__action .btn-seed { display: flex; width: 100%; }
}
.send-off {
  width: clamp(72px, 12vw, 132px);
  height: auto;
  transform: translateY(40%);
  opacity: 0;
}
.js .send-off {
  transition: transform .8s var(--ease), opacity .5s;
  transition-delay: .6s;
}
.js .is-in .send-off { transform: none; opacity: 1; }
.send-off--right2 { display: none; }
@media (min-width: 768px) {
  .final__stage { gap: 24px; }
  .send-off--right2 { display: block; }
}

/* ---------- 20. §15 フッター -------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--canvas);
  padding-block: 48px 32px;
}
/* SP固定CTAバー（64px + セーフエリア）ぶんの逃げ。フッターの内側で持つので
   バーが退避しているページ末尾でも、地色ではなくフッターの濃茶が見える。 */
@media (max-width: 767px) {
  .site-footer { padding-bottom: calc(32px + 72px + env(safe-area-inset-bottom)); }
}
.site-footer__inner {
  display: grid;
  gap: 32px;
  justify-items: center;
  text-align: center;
}
.site-footer__brand img { border-radius: 10px; margin: 0 auto; }
.site-footer__name { margin-top: 10px; font-size: var(--fs-lead); font-weight: 700; }
.site-footer__meta { margin-top: 4px; font-size: var(--fs-small); }
.site-footer__nav ul { display: grid; gap: 10px; }
.site-footer .link {
  color: var(--butter);
  background-image: linear-gradient(var(--butter), var(--butter));
  font-size: var(--fs-small);
}
.site-footer__copy {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1.5px solid rgba(255, 249, 232, .18);
  font-size: var(--fs-small);
  text-align: center;
}
@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: auto 1fr;
    align-items: start;
    justify-items: start;
    text-align: left;
  }
  .site-footer__brand img { margin: 0; }
  .site-footer__nav { justify-self: end; text-align: right; }
  .site-footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 24px;
  }
}

/* ---------- 21. §16 SP固定CTAバー（E20） -------------------------------- */

.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--paper);
  border-top: 1.5px solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.cta-bar.is-shown { transform: none; }
.cta-bar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 16px;
}
.cta-bar__icon { width: 32px; height: 32px; border-radius: 8px; }
.cta-bar__text { display: flex; flex-direction: column; line-height: 1.4; }
.cta-bar__name { font-size: var(--fs-small); font-weight: 700; }
.cta-bar__price { font-size: 12px; color: var(--ink-2); }
.cta-bar .btn-seed { margin-left: auto; }
@media (min-width: 768px) {
  .cta-bar { display: none; }
}
/* なぞり操作中は親指の操作域が競合するので隠す */
.demo-armed .cta-bar { display: none; }

/* ---------- 22. reduced-motion / JS無効 --------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .peek { transition: none; }
  .js .is-in .peek { opacity: 1; }
  .js .send-off { transition: none; opacity: 1; transform: none; }
  .walker, .is-in .walker { animation: none; position: static; }
  .walkers, .walkers--final {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 16px;
    position: static;
  }
  /* §2 の紙札は、静止横並びに戻さず看板の面に載せたままにする。
     紙札を看板に重ねるのは「動き」ではなくレイアウトなので、reduced-motion で
     流し込みに戻す理由がない。戻すと看板の面が無地のまま残り、
     画像の読み込みに失敗した空箱に見える（06-test-report-2 N-1）。
     → .walk-band__ticket のリセットは置かない。

     §2 の歩行スプライト3匹は reduced-motion では出さない。
     band-home-world.webp 自体にこひつじ・こぞう・ひよこが原っぱに立った状態で
     描かれているので、静止画としての §2 は3匹が居る絵としてすでに完成している。
     ここにスプライトを重ねると、
       - 紙札の上（z-index 3）に置けば §2 唯一のコピーが恒久的に読めなくなる
       - 紙札の下（z-index 1）に置けば脚と頭だけがはみ出た千切れた絵になる
       - 紙札を避けた位置に置けば背景画に描かれた3匹と重なって二重になる
     のいずれかにしかならない（バンド 260px に対しこぞうだけで 210px あり、
     紙札が看板の面 = バンド幅の約1/3 を占めるため、逃げ場がない）。
     ※ §14 は背景にキャラが描かれていないので、そちらは静止横並びのまま。 */
  .walk-band .walkers { display: none; }
  .cta-bar { transition: none; }
  /* §5 カルーセルはスクロール自体は残し、スムーススクロールだけを切って瞬間切替にする
     （JS 側も scrollTo の behavior を 'auto' に落とす）*/
  .carousel__track { scroll-behavior: auto; }
  .carousel__dot::before, .carousel__btn { transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* JS が動かない環境ではデモの操作パネルを出さない（触れないものを見せない） */
html:not(.js) .demo__panel { display: none; }
html:not(.js) .demo__hint { display: none; }