/* ───────────────────────────────────────────
     OneReel LP v3 — 「このLP自体が、一本のリール」
     ページの進行をタイムコードで刻み、実写真のクリップが
     最後に1本のフィルムストリップへ融合する。
     配色: 明るいオフホワイト × ライム #D2FF00（v2トーン踏襲）
     ─────────────────────────────────────────── */

  :root {
    --paper: #F6F5EC;
    --paper-2: #EFEEE2;
    --sand: #E9E7D5;
    --white: #FFFFFF;
    --ink: #191D10;
    --ink-2: #63685A;
    --line: rgba(25, 29, 16, 0.14);
    --lime: #D2FF00;
    --lime-soft: rgba(210, 255, 0, 0.16);
    --lime-deep: #5E7A00;
    --dark: #14170E;
    --dark-2: #1B1F12;
    --screen: #0A0B0D;
    --shadow: 0 1px 2px rgba(25,29,16,.05), 0 20px 48px rgba(25,29,16,.08);

    --display: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    --body: "Zen Kaku Gothic New", "Hiragino Sans", -apple-system, BlinkMacSystemFont, "Noto Sans JP", sans-serif;
    --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --mincho: "Shippori Mincho", "Hiragino Mincho ProN", serif;
    --max: 1120px;
  }
  /* 明るい面に決め打ち。端末のダーク設定でも配色は変えない */
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--body); font-weight: 500; line-height: 1.9;
    -webkit-font-smoothing: antialiased;
  }
  /* 粒子。リールの質感を全面にうっすら敷く */
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: .05; mix-blend-mode: multiply;
  }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
  img { display: block; max-width: 100%; }

  h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
  h1 { font-size: clamp(2.5rem, 1.3rem + 4.2vw, 4.6rem); line-height: 1.12; }
  h2 { font-size: clamp(1.9rem, 1.3rem + 2.7vw, 3.3rem); line-height: 1.18; }
  h3 { font-size: 1.14rem; line-height: 1.5; letter-spacing: -0.015em; }
  p { margin: 0; }

  /* タイムコード付きの小見出し。ページ全体を1本のリールとして刻む */
  .eyebrow {
    display: flex; align-items: baseline; gap: 12px;
    font-family: var(--mono); font-size: .85rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--lime-deep);
  }
  .eyebrow .tc {
    letter-spacing: .08em; color: var(--ink); background: var(--lime);
    padding: 1px 8px 0; border-radius: 4px;
  }
  .lead { color: var(--ink-2); font-size: clamp(1rem, .95rem + .3vw, 1.16rem); max-width: 60ch; }

  /* ライムのマーカー線。結論の一言にだけ引く */
  .hl { background: linear-gradient(transparent 66%, var(--lime) 66%, var(--lime) 94%, transparent 94%); }

  /* 行頭の「 は0.5emぶら下げて、視覚的な左端を揃える */
  .hang { margin-left: -.5em; }

  section { padding: clamp(84px, 9vw, 148px) 0; background: var(--ground, var(--paper)); }
  .hairline { border-top: 1px solid var(--line); }
  .g-white { --ground: var(--white); --surface: var(--paper); }
  .g-sand  { --ground: var(--sand); }
  .washed  { background: linear-gradient(180deg, rgba(210,255,0,.2), rgba(210,255,0,.05)); }
  .section-head { display: grid; gap: 18px; margin-bottom: clamp(38px, 4.5vw, 64px); }

  /* ── App Storeバッジ ──────────────────── */
  .store-badge { display: inline-flex; border-radius: 12px; transition: transform .25s cubic-bezier(.2,.6,.2,1); }
  .store-badge:hover { transform: translateY(-2px); }
  .store-badge img { display: block; height: 64px; width: auto; }
  header .store-badge img { height: 40px; }
  .final .store-badge img { height: 72px; }

  /* ── ヘッダー：REC表示がスクロールで進む ── */
  header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .head { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
  .brand { display: flex; align-items: center; text-decoration: none; color: inherit; }
  /* 1行のワードマーク（下段の camera が無い）ぶん、字面は同じ大きさでも背が低い */
  /* 狭い画面でflexに横だけ詰められても字面が歪まないようにする */
  .brand img { height: 40px; width: auto; display: block; object-fit: contain; }
  .head-right { display: flex; align-items: center; gap: 18px; }
  .rec-meter { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .82rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-2); }
  .rec-meter .dot { width: 8px; height: 8px; border-radius: 50%; background: #E94B2F; animation: blink 1.6s steps(2, start) infinite; }
  @keyframes blink { 50% { opacity: .25; } }
  @media (max-width: 640px) { .rec-meter { display: none; } }
  .progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--lime); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: .93rem;
    font-family: var(--display); text-decoration: none; border: 1px solid transparent;
    white-space: nowrap; transition: transform .25s cubic-bezier(.2,.6,.2,1), box-shadow .25s, filter .25s;
  }
  .btn-primary { background: var(--lime); color: var(--dark); box-shadow: 0 2px 0 rgba(25,29,16,.18); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(140,170,0,.35); }
  .btn-ghost { border-color: var(--line); color: var(--ink); }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn-dark { background: var(--dark); color: #F2F3EA; }
  .btn-dark:hover { transform: translateY(-2px); filter: brightness(1.2); }
  .btn-sm { padding: 9px 18px; font-size: .84rem; }
  a:focus-visible, summary:focus-visible { outline: 3px solid var(--lime-deep); outline-offset: 3px; border-radius: 8px; }

  /* ── ヒーロー ─────────────────────────── */
  .hero { padding-top: clamp(52px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 96px); position: relative; overflow: hidden; }
  .hero::before {
    content: ""; position: absolute; top: -280px; right: -220px; width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(210,255,0,.28), transparent 62%); pointer-events: none;
  }
  .hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
  .hero h1 { margin: 22px 0 26px; }
  .hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

  /* リード文は撮影ログとして刻む */
  .take-list { display: grid; gap: 2px; font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); }
  .take-list li { display: flex; align-items: baseline; gap: 14px; list-style: none; }
  .take-list .t { font-family: var(--mono); font-size: .82rem; font-weight: 700; letter-spacing: .08em; color: var(--lime-deep); }
  .take-list .take-end { margin-top: 10px; font-weight: 900; }
  .take-list ul, ul.take-list { margin: 0; padding: 0; }

  /* 端末モック（中身は実機の画面収録 hero_web.mp4。枠は動画の1:2から上を8px詰める） */
  /* 置き台：奥行きパースの基準。傾きは.phone側に付ける（floatと分離するため） */
  .phone-stage { perspective: 1400px; }
  .phone {
    --pw: min(320px, 80vw);
    width: var(--pw); margin: 0 auto;
    position: relative;
    background: linear-gradient(145deg, #3d4133, #191c11 42%, #0c0d08);
    border-radius: 44px; padding: 11px;
    box-shadow:
      inset 0 0 0 1.5px rgba(255,255,255,.09),
      0 2px 5px rgba(25,29,16,.18),
      0 24px 48px rgba(25,29,16,.24),
      0 56px 100px rgba(25,29,16,.28),
      0 0 0 1px rgba(25,29,16,.28);
  }
  /* サイドボタン（右＝電源、左＝音量2つ）。本体の角丸の外へ薄く覗かせる */
  .phone::before {
    content: ""; position: absolute; right: -2.5px; top: 27%;
    width: 3px; height: 62px; border-radius: 2px;
    background: linear-gradient(90deg, #34382a, #101208);
  }
  .phone::after {
    content: ""; position: absolute; left: -2.5px; top: 21%;
    width: 3px; height: 106px; border-radius: 2px;
    background:
      linear-gradient(90deg, #34382a, #101208) 0 0 / 3px 42px no-repeat,
      linear-gradient(90deg, #34382a, #101208) 0 100% / 3px 42px no-repeat;
  }
  .screen {
    height: calc((var(--pw) - 22px) * 2 - 8px);
    position: relative;
    border-radius: 34px; overflow: hidden; background: var(--screen);
  }
  /* 画面の艶（左上からの斜めグレア） */
  .screen::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(118deg, rgba(255,255,255,.10), rgba(255,255,255,.035) 28%, transparent 46%);
  }
  /* 下端を基準に、はみ出す上側だけ切る */
  .screen video { width: 100%; height: 100%; object-fit: cover; object-position: bottom; display: block; }
  /* 見せ方：2カラム時はわずかに内へ傾け、ゆったり浮遊させる */
  @media (min-width: 901px) {
    .phone-stage .phone { transform: rotateY(-7deg) rotateX(1.6deg) rotate(.6deg); }
    .phone-stage { animation: phone-float 7s ease-in-out infinite; }
  }
  @keyframes phone-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .phone-stage { animation: none; }
  }

  /* ── まとめ：作った動画を端末の中で見せる ──
     ヒーローと同じ端末モックだが、.phone-stageで包まない＝正面・静止 */
  .enjoy-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
  @media (max-width: 900px) { .enjoy-grid { grid-template-columns: 1fr; } }
  .phone-cap {
    margin-top: 18px; text-align: center;
    font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--ink-2);
  }
  /* YouTubeのファサード。クリックされて初めてiframeへ差し替える（main.js） */
  .yt-lite {
    position: absolute; inset: 0; display: block; padding: 0; border: 0;
    background: var(--screen); overflow: hidden; cursor: pointer;
  }
  .yt-lite img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .yt-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
    background: var(--lime); color: var(--dark);
    box-shadow: 0 8px 26px rgba(0,0,0,.42);
    transition: transform .25s cubic-bezier(.2,.6,.2,1);
  }
  .yt-play svg { width: 30px; height: 30px; margin-left: 3px; }
  .yt-lite:hover .yt-play, .yt-lite:focus-visible .yt-play { transform: translate(-50%, -50%) scale(1.09); }
  /* 再生中は9:16のまま画面を覆う（左右がわずかに切れる＝ヒーロー動画と同じ見え方） */
  .screen iframe {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    height: 100%; width: auto; aspect-ratio: 9 / 16; min-width: 100%; border: 0;
  }

  /* ───────────────────────────────────────────
     ヒーローの登場
     カメラが回り出し（REC）、見出しが1行ずつコマのように送り込まれ、
     ライムのマーカーが引かれ、テイクが順に記録されていく。
     ページ全体が一本のリールという見立ての、最初の1秒。
     ─────────────────────────────────────────── */
  /* 行を窓にして、下から送り込む。padding/marginは字の頭と
     マーカーの下端が窓に切られないための逃げ */
  .h1-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
  .h1-line > span { display: block; }

  @keyframes hero-frame-in { from { transform: translateY(106%); } to { transform: none; } }
  @keyframes hero-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes hero-chip-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
  @keyframes hero-mark { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
  @keyframes hero-shot-in { from { opacity: 0; transform: translateY(34px) scale(.97); } to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: no-preference) {
    .hero-copy .eyebrow { animation: hero-fade-up .55s both cubic-bezier(.2,.6,.2,1); }
    .hero-copy .eyebrow .tc { display: inline-block; animation: hero-chip-in .5s both cubic-bezier(.2,.8,.3,1); }

    .h1-line > span { animation: hero-frame-in .75s both cubic-bezier(.16,.84,.3,1); }
    .h1-line:nth-child(1) > span { animation-delay: .10s; }
    .h1-line:nth-child(2) > span { animation-delay: .22s; }
    /* マーカーは左から引かれる。見出しが着地しきる少し前に走らせて息をつなぐ */
    .hero h1 .hl {
      background-repeat: no-repeat; background-size: 0 100%;
      animation: hero-mark .45s .85s both cubic-bezier(.4,0,.2,1);
    }

    .hero .take-list li { animation: hero-fade-up .5s both cubic-bezier(.2,.6,.2,1); }
    .hero .take-list li:nth-child(1) { animation-delay: .70s; }
    .hero .take-list li:nth-child(2) { animation-delay: .79s; }
    .hero .take-list li:nth-child(3) { animation-delay: .88s; }
    .hero .take-list li:nth-child(4) { animation-delay: .99s; }
    .hero .actions { animation: hero-fade-up .55s 1.08s both cubic-bezier(.2,.6,.2,1); }

    /* 端末は文字と同時に立ち上がる（最後に置き去りにしない） */
    .hero-shot { animation: hero-shot-in .85s .28s both cubic-bezier(.16,.84,.3,1); }
  }

  /* ── フィルムの縁（スプロケット穴） ───── */
  .film-edge::before, .film-edge::after {
    content: ""; position: absolute; left: 12px; right: 12px; height: 8px;
    background-image: radial-gradient(circle at 4px 4px, color-mix(in srgb, var(--paper) 88%, transparent) 2.5px, transparent 3.1px);
    background-size: 15px 8px; background-repeat: repeat-x;
  }
  .film-edge::before { top: 6px; }
  .film-edge::after { bottom: 6px; }

  /* 1コマのクリップ */
  .frame {
    position: relative; background: var(--dark); border-radius: 12px;
    padding: 19px 8px; box-shadow: var(--shadow);
  }
  .frame .ph { border-radius: 4px; overflow: hidden; aspect-ratio: 4 / 3; }
  .frame .ph img, .frame .ph video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .frame .cap {
    position: absolute; left: 14px; bottom: 22px; display: flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    color: #fff; background: rgba(10,11,13,.62); padding: 2px 8px; border-radius: 5px; backdrop-filter: blur(4px);
  }
  .frame .cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }

  /* ── ヒーロー下：流れるリール ─────────── */
  .reel-band { padding: 0 0 clamp(64px, 7vw, 104px); overflow: hidden; }
  .marquee { display: flex; width: max-content; gap: 7px; animation: slide 20s linear infinite; padding: 6px 0; }
  @keyframes slide { to { transform: translateX(-50%); } }
  /* 狭い画面ではフレームが下限200pxに張り付いて総幅が約0.7倍になる。
     同じ秒数だと流れる速度まで落ちるので、秒数側で揃える */
  @media (max-width: 720px) { .marquee { animation-duration: 15s; } }
  .m-item { flex: none; display: flex; align-items: center; gap: 7px; }
  /* 一本になったリールはライムのフィルムで祝う */
  .frame.lime { background: var(--lime); }
  .frame.lime.film-edge::before, .frame.lime.film-edge::after {
    background-image: radial-gradient(circle at 4px 4px, rgba(20,23,14,.72) 2.5px, transparent 3.1px);
  }
  /* ロゴ前後は詰めて、フィルムのすぐ隣に置く（片側12px） */
  .m-brand { flex: none; display: grid; place-items: center; padding: 0; margin: 0 -10px; }
  .m-brand img { width: clamp(119px, 12.75vw, 161.5px); height: auto; display: block; }
  /* figureのデフォルト余白(1em 40px)を上書きし、フィルム間を左右25pxずつ（対で50px）詰める */
  .m-frame { width: clamp(200px, 24vw, 280px); margin: 0 15px; }
  /* 語ブロックは固定幅にして、フィルム間のマージンを一定に保つ */
  .m-word {
    font-family: var(--display); font-weight: 900; font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
    letter-spacing: -.03em; color: var(--ink);
    flex: none; width: 5.85em; text-align: center; line-height: 1.4;
  }
  .m-word.lime { color: var(--lime-deep); }

  /* ── ワークフロー比較 ─────────────────── */
  .grid { display: grid; gap: clamp(14px, 2vw, 22px); }
  .g2 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 900px) { .g3 { grid-template-columns: 1fr; } }
  @media (max-width: 720px) { .g2 { grid-template-columns: 1fr; } }

  .card {
    background: var(--surface, var(--white)); border: 1px solid var(--line); border-radius: 22px;
    padding: clamp(24px, 2.6vw, 34px); box-shadow: var(--shadow);
  }
  .card .muted { color: var(--ink-2); font-size: .93rem; }

  .flow-label { font-family: var(--display); font-size: 1.3rem; font-weight: 900; letter-spacing: -.01em; margin-bottom: 20px; }
  .shots { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
  .shot {
    flex: 1 1 120px; border-radius: 14px; padding: 14px 14px 12px;
    font-family: var(--display); font-weight: 700; font-size: .95rem; line-height: 1.5;
  }
  .shot .cap { display: block; font-family: var(--mono); font-size: .78rem; font-weight: 700; color: inherit; opacity: .55; letter-spacing: .14em; margin-bottom: 6px; }
  .arrow { align-self: center; font-family: var(--mono); font-size: 1.3rem; line-height: 1; flex: none; }
  /* これまで：灰色・破線。手数の多さを质感で見せる */
  .was .shot { background: var(--paper-2); border: 1.5px dashed rgba(25,29,16,.28); color: var(--ink-2); }
  .was .arrow { color: rgba(25,29,16,.3); }
  .was .flow-label { color: var(--ink-2); }
  /* OneReel：ライム・実線。つながっている */
  .now .shot { background: var(--lime-soft); border: 1.5px solid var(--lime-deep); color: var(--ink); }
  .now .arrow { color: var(--lime-deep); }
  .now .flow-label { color: var(--lime-deep); }
  .result {
    border-radius: 16px; padding: 20px 22px; background: var(--dark); color: var(--paper);
    font-family: var(--display); font-weight: 900; font-size: clamp(1.1rem, .95rem + .8vw, 1.5rem); letter-spacing: -.02em;
  }
  .result em { font-style: normal; color: var(--lime); }

  /* 縦のつなぎ矢印。左は途切れがち、右は続いていく */
  .flow-down { text-align: center; font-family: var(--mono); font-size: 1.25rem; font-weight: 700; line-height: 1; margin: 12px 0; }
  .was .flow-down { color: rgba(25,29,16,.3); }
  .flow-down.lime { color: var(--lime-deep); }

  /* これまでの結末：完成しなかったゴーストプレート（右の黒い完成プレートと対) */
  .ghost-result {
    border: 1.5px dashed rgba(25,29,16,.32); border-radius: 16px; padding: 18px 20px;
    display: flex; gap: 14px; align-items: flex-start; color: var(--ink-2); position: relative;
  }
  .ghost-result svg { flex: none; width: 26px; height: 26px; margin-top: 3px; opacity: .55; }
  .ghost-result p { font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.6; }
  .ghost-result small { display: block; font-family: var(--body); font-weight: 500; font-size: .9rem; margin-top: 4px; }
  .ghost-result .tag {
    position: absolute; top: -11px; right: 16px;
    font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .16em;
    color: var(--ink-2); background: var(--surface, var(--white)); border: 1.5px dashed rgba(25,29,16,.32);
    border-radius: 999px; padding: 1px 12px;
  }

  /* OneReel：1本につながったセグメントタイムライン（アプリのシグネチャーUI） */
  .reel-bar {
    display: flex; border: 1.5px solid var(--lime-deep); border-radius: 14px;
    background: var(--lime-soft); overflow: hidden;
  }
  .reel-bar .seg {
    flex: 1; padding: 14px 14px 12px;
    font-family: var(--display); font-weight: 700; font-size: .95rem; line-height: 1.5; color: var(--ink);
  }
  .reel-bar .seg + .seg { border-left: 1.5px solid var(--lime-deep); }
  .reel-bar .cap {
    display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
    font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--lime-deep);
  }
  .reel-bar .cap i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-deep); }
  @media (max-width: 560px) {
    .reel-bar { flex-direction: column; }
    .reel-bar .seg + .seg { border-left: 0; border-top: 1.5px solid var(--lime-deep); }
  }

  /* ── 編集しなくていい：実写クリップの連なり ── */
  .clip-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 26px; align-items: center; justify-items: center; margin: 40px 0 26px; }
  @media (max-width: 720px) {
    .clip-flow { grid-template-columns: 1fr; }
    .clip-flow .arrow { transform: rotate(90deg); }
  }
  .clip-flow .frame { width: 100%; max-width: 340px; }
  .clip-flow .arrow { color: var(--lime-deep); font-size: 1.6rem; }
  .clip-flow-end { display: flex; justify-content: flex-end; }

  /* ── 一本になる：融合したフィルムストリップ ── */
  .fused-scroll { overflow-x: auto; margin: 44px -24px 0; padding: 0 24px 10px; }
  /* スクロール連動の変身：バラバラに散らばった写真が、1本のフィルムに吸い付く。
     --fuse: 0=散らばり（枠も穴もない、ただの写真）→ 1=融合（ダークのフィルムが現れて一本に） */
  .fused {
    position: relative; min-width: 760px; border-radius: 14px;
    padding: 22px 12px;
    background: rgb(20 23 14 / calc(var(--fuse, 1) * 100%));
    box-shadow:
      0 1px 2px rgba(25, 29, 16, calc(.05 * var(--fuse, 1))),
      0 20px 48px rgba(25, 29, 16, calc(.08 * var(--fuse, 1)));
  }
  .fused.film-edge::before, .fused.film-edge::after { opacity: var(--fuse, 1); }
  .fused .row { display: flex; gap: 4px; border-radius: 5px; }
  .fused .row > div {
    flex: 1; aspect-ratio: 16 / 10; overflow: hidden; position: relative;
    border-radius: calc((1 - var(--fuse, 1)) * 10px);
    transform:
      translate(calc((1 - var(--fuse, 1)) * var(--tx, 0) * 1px),
                calc((1 - var(--fuse, 1)) * var(--ty, 0) * 1px))
      rotate(calc((1 - var(--fuse, 1)) * var(--rot, 0) * 1deg));
  }
  .fused .row > div:nth-child(1) { --tx: -144; --ty: -32; --rot: -6; }
  .fused .row > div:nth-child(2) { --tx: -48; --ty: 24; --rot: 4; }
  .fused .row > div:nth-child(3) { --tx: 48; --ty: -20; --rot: -4; }
  .fused .row > div:nth-child(4) { --tx: 144; --ty: 36; --rot: 6; }
  /* デスクトップは横スクロール不要なので、散らばったコマをそのまま見せる */
  @media (min-width: 820px) {
    .fused-scroll { overflow: visible; margin: 44px 0 0; padding: 0 0 10px; }
  }
  /* モバイルは横パンと共存するため、散らばりを控えめに */
  @media (max-width: 819px) {
    .fused .row > div:nth-child(1) { --tx: -44; --ty: -18; }
    .fused .row > div:nth-child(2) { --tx: -15; --ty: 14; }
    .fused .row > div:nth-child(3) { --tx: 15; --ty: -12; }
    .fused .row > div:nth-child(4) { --tx: 44; --ty: 20; }
  }
  .fused .row img { width: 100%; height: 100%; object-fit: cover; }
  .fused .row .more {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: var(--dark-2);
    color: var(--lime); font-family: var(--display); font-weight: 900; font-size: 1rem; text-align: center; line-height: 1.5;
  }
  .fused .row .more small { font-family: var(--mono); font-weight: 700; font-size: .78rem; letter-spacing: .16em; color: #9A9EA3; }
  .tc-ruler { display: flex; min-width: 760px; margin-top: 14px; opacity: var(--fuse, 1); }
  .tc-ruler span { flex: 1; font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-2); }
  .tc-ruler b { display: block; font-family: var(--display); font-size: .95rem; font-weight: 900; letter-spacing: -.01em; color: var(--ink); }
  .track-end { margin-top: 34px; font-family: var(--display); font-weight: 900; font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); letter-spacing: -.03em; }

  /* ── ビューファインダー枠（スクショ差し替えスロット） ── */
  .slot {
    margin: 0; position: relative; display: grid; place-items: center; text-align: center;
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    background: color-mix(in srgb, var(--ink) 4%, var(--white));
    color: var(--ink-2); padding: 26px 20px 40px;
  }
  .slot::before, .slot::after {
    content: ""; position: absolute; width: 14px; height: 14px;
    border: 0 solid color-mix(in srgb, var(--ink) 34%, transparent);
  }
  .slot::before { top: 10px; left: 10px; border-top-width: 1.5px; border-left-width: 1.5px; }
  .slot::after { bottom: 10px; right: 10px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
  .slot .what { font-size: .82rem; line-height: 1.8; }
  .slot .spec {
    position: absolute; left: 14px; bottom: 12px; display: flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  }
  .slot.mov .spec::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep); }
  .r-45 { aspect-ratio: 4 / 5; }
  .r-34 { aspect-ratio: 3 / 4; }

  /* ── 使い方 ───────────────────────────── */
  .step .no { font-family: var(--mono); font-size: .82rem; font-weight: 700; letter-spacing: .18em; color: var(--lime-deep); }
  .step .slot { margin: 18px 0 20px; }
  .step-shot {
    margin: 18px auto 20px; max-width: 240px;
    border-radius: 28px; overflow: hidden;
    border: 6px solid var(--dark); background: var(--dark); box-shadow: var(--shadow);
  }
  /* 3枚とも同じ端末比率に固定。浅い画像は上下黒のレターボックスで埋める */
  .step-shot img, .step-shot video { width: 100%; display: block; border-radius: 22px; aspect-ratio: 1290 / 2650; object-fit: contain; background: #000; }
  /* スクショの上に直接、手書き風の注釈と矢印を載せる */
  /* 端末の絵は幅が変わる（PC 240px / 横送り時 200px）。注釈をpxで持つと
     矢印の着地点が幅ごとにずれるので、寸法はすべて端末の絵の幅を基準にする。
     矢印の先端が高さの80%＝クリップ行の中央に来るよう top を逆算した値 */
  .step-shot.has-note { position: relative; container-type: inline-size; }
  .shot-note {
    position: absolute; left: 0; right: 16%; top: 59.3%; padding: 0 3cqi; text-align: center;
    font-family: var(--display); font-weight: 800; font-size: 6cqi; letter-spacing: .01em;
    line-height: 1.4;
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 14px rgba(0,0,0,.45);
    pointer-events: none;
  }
  .shot-note svg {
    display: block; width: 11cqi; height: 31.6cqi; margin: 2.5cqi auto 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.4));
  }
  .step .muted { margin-top: 6px; }

  /* ── 使いどころ：トラックリスト型 ─────── */
  .usecase h3 { font-size: 1.35rem; margin-top: 6px; }
  .uc-photo { margin: 0 0 20px; }
  .uc-photo .ph { aspect-ratio: 16 / 9; }
  .uc-photo.slot { aspect-ratio: 16 / 9; padding: 18px 14px 32px; }
  .uc-tag { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--lime-deep); }
  .uc-clips { font-size: .68rem; font-weight: 400; letter-spacing: .14em; color: var(--ink-2); }
  .tracks { list-style: none; margin: 22px 0 0; padding: 0; }
  .tracks li {
    display: flex; align-items: baseline; gap: 14px; padding: 11px 2px;
    border-top: 1px solid var(--line); font-family: var(--display); font-weight: 700; font-size: 1rem;
  }
  .tracks li:last-child { border-bottom: 1px solid var(--line); }
  .tracks .t { font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-2); }
  .uc-result { margin-top: 20px; font-family: var(--display); font-weight: 900; font-size: 1.06rem; }

  /* ── 道具（TOOLS） ────────────────────── */
  .tool-group { border-top: 1px solid var(--line); padding-top: clamp(36px, 4.5vw, 60px); margin-top: clamp(36px, 4.5vw, 60px); }
  .tool-group:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
  .tool-group > .slot { margin-bottom: 26px; max-width: 230px; }
  .tool-group > .tool-shot { margin: 0 0 26px; max-width: 230px; }
  @media (min-width: 900px) {
    .tool-group { display: grid; grid-template-columns: 280px 1fr; column-gap: clamp(32px, 4vw, 64px); }
    .tool-group > .slot { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-bottom: 0; max-width: none; }
    .tool-group > .tool-shot { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-bottom: 0; max-width: none; }
    .tool-head { grid-column: 2; grid-row: 1; }
    .tool-group > .grid { grid-column: 2; grid-row: 2; }
  }
  .tool-head { display: grid; gap: 12px; margin-bottom: 28px; max-width: 60ch; }
  .tool-head h3 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); }
  /* 機能はテキストの羅列ではなく、白いチップカードで塊として見せる */
  .tool-group .grid > div { display: grid; gap: 12px; align-content: start; }
  .feature {
    background: var(--white); border: 1px solid var(--line); border-radius: 14px;
    padding: 14px 16px 13px; display: grid; gap: 3px;
  }
  .feature b {
    font-family: var(--display); font-weight: 900; font-size: .98rem;
    display: flex; align-items: center; gap: 9px;
  }
  .feature b::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); }
  .feature span { color: var(--ink-2); font-size: .85rem; line-height: 1.7; }

  /* ── ストーリー：グレー本文＋黒太字の強調の2階層。サイズは全行同一 ── */
  .story-body {
    display: grid; gap: 12px; max-width: 68ch; color: var(--ink-2);
    font-size: clamp(.95rem, .93rem + .15vw, 1.02rem); line-height: 1.65;
  }
  .story-body .em { font-weight: 700; color: var(--ink); }
  .story-body h2 { color: var(--ink); }

  /* Before（写真アプリの実スクショ）→ After（OneReelの一本）*/
  .story-shot { max-width: 330px; margin: 0 auto; width: 100%; }
  .story-shot-label {
    font-family: var(--mono); font-size: .82rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px;
  }
  .story-phone {
    margin: 0; border-radius: 30px; overflow: hidden;
    border: 7px solid var(--dark); background: var(--dark);
    box-shadow: var(--shadow); position: relative;
  }
  .story-phone img { width: 100%; display: block; border-radius: 23px; }
  /* 下端をふわっと切って「まだ続く」感を出す */
  .story-phone::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
    background: linear-gradient(180deg, transparent, rgba(20,23,14,.85));
  }
  .story-shot-cap {
    margin-top: 14px; text-align: center;
    font-family: var(--mono); font-size: .8rem; font-weight: 700;
    letter-spacing: .1em; color: var(--ink-2);
  }

  /* ── FAQ ──────────────────────────────── */
  .faq { display: grid; margin-top: 8px; }
  .faq-cat {
    font-family: var(--display); font-weight: 900; font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.5;
    margin: clamp(36px, 4vw, 52px) 0 10px; padding-left: 18px; position: relative;
  }
  .faq-cat::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 9px; height: 9px; border-radius: 2px; background: var(--lime);
  }
  .faq-cat:first-child { margin-top: 0; }

  /* FAQで解決しなかった人の行き先。問い合わせ先を必ず1クリック先に置く */
  .faq-more {
    margin-top: clamp(28px, 3.5vw, 44px); padding-top: 22px;
    border-top: 1px solid var(--line); color: var(--ink-2); font-size: .96rem;
  }
  .faq-more a { color: var(--lime-deep); font-weight: 700; }
  .faq-more a:hover { color: var(--ink); }
  .faq-cat + details { border-top: 1px solid var(--line); }
  details { border-bottom: 1px solid var(--line); padding: 22px 4px; }
  summary { font-family: var(--display); font-weight: 900; font-size: 1.05rem; cursor: pointer; list-style: none; display: flex; gap: 16px; align-items: baseline; }
  summary::-webkit-details-marker { display: none; }
  summary::before { content: "Q"; font-family: var(--mono); font-weight: 700; font-size: .8rem; color: var(--lime-deep); flex: none; }
  summary::after { content: "＋"; margin-left: auto; color: var(--lime-deep); font-weight: 700; flex: none; transition: transform .3s; }
  details[open] summary::after { content: "－"; }
  details p { color: var(--ink-2); margin: 14px 0 0 30px; font-size: .95rem; max-width: 60ch; }

  /* ── 最終CTA：近黒で締める（アプリのUIへ着地） ── */
  .final {
    position: relative; overflow: hidden; background: var(--dark); color: #F2F3EA; text-align: center;
    padding: clamp(100px, 11vw, 170px) 0;
  }
  .final.film-edge::before, .final.film-edge::after {
    left: 0; right: 0;
    background-image: radial-gradient(circle at 4px 4px, rgba(246,245,236,.2) 2.5px, transparent 3.1px);
  }
  .final.film-edge::before { top: 18px; }
  .final.film-edge::after { bottom: 18px; }
  .final::after { pointer-events: none; }
  .final-logo { display: block; margin: 0 auto; width: 230px; height: auto; filter: drop-shadow(0 16px 36px rgba(0,0,0,.35)); }
  .final h2 { margin-top: 30px; color: #F6F5EC; }
  .final h2 em { font-style: normal; color: var(--lime); }
  .final .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
  .final .fin-note { margin-top: 26px; font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .22em; color: #9A9EA3; }
  .final .glow {
    position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
    width: 720px; height: 720px; pointer-events: none;
    background: radial-gradient(circle, rgba(210,255,0,.12), transparent 60%);
  }

  footer { padding: 44px 0 56px; background: var(--dark); color: #9A9EA3; border-top: 1px solid rgba(246,245,236,.1); }
  .foot-main { display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: space-between; align-items: center; }
  .foot-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #C9CCC2; }
  .foot-brand img { width: 46px; height: auto; display: block; }
  .foot-brand span { font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .06em; line-height: 1.6; }
  .foot-links { display: flex; gap: 26px; font-family: var(--mono); font-size: .82rem; }
  .foot-links a { color: #9A9EA3; text-decoration: none; }
  .foot-links a:hover { color: var(--lime); }
  .foot-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(246,245,236,.12); font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; }

  /* ───────────────────────────────────────────
     日本語の文字組み
     見出しは文節で折り（そのま／ま を防ぐ）、本文は最終行に
     1文字だけ取り残さない。auto-phrase / pretty 未対応の環境でも
     読めるよう、要となる見出しには <br> を直接入れてある。
     ─────────────────────────────────────────── */
  h1, h2, h3 { word-break: auto-phrase; line-break: strict; }
  .lead, .muted, .take-list li, .tracks li, .uc-result, .phone-cap,
  .feature span, .ghost-result p, .ghost-result small,
  .faq summary, .faq p, .story p, .final p {
    text-wrap: pretty; word-break: auto-phrase; line-break: strict;
  }
  /* 幅の広い画面向けに入れた改行は、モバイルでは自然な折り返しに任せる */
  @media (max-width: 700px) { .lead br { display: none; } }

  /* ───────────────────────────────────────────
     横スワイプの列（モバイル）
     縦に長く積むかわりに、リールを送るように横へ流す。
     位置は下のセグメント（アプリのタイムラインと同じ形）で示す。
     ─────────────────────────────────────────── */
  .rail-dots { display: none; }
  @media (max-width: 720px) {
    .rail {
      display: flex; gap: 14px;
      /* overflow-x だけ指定すると overflow-y は visible から auto に化け、
         斜めスワイプで縦にラバーバンドしてカードが見切れる。縦は殺す */
      overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      /* wrapの余白を食い破って画面端まで流し、次のカードを覗かせる */
      margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px;
      scrollbar-width: none;
    }
    .rail::-webkit-scrollbar { display: none; }
    .rail > * { flex: 0 0 84%; scroll-snap-align: start; }
    .rail:focus-visible { outline: 3px solid var(--lime-deep); outline-offset: 4px; border-radius: 22px; }
    /* 横に送るぶん、端末の絵は少し小さくして1枚に収める */
    .rail .step-shot { max-width: 200px; }

    .rail-dots { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
    .rail-dots span {
      width: 26px; height: 3px; border-radius: 2px;
      background: rgba(25, 29, 16, .16); transition: background .3s;
    }
    .rail-dots span.on { background: var(--lime-deep); }
  }

  /* ───────────────────────────────────────────
     一本になるフィルム（画面が狭いとき）
     指で送るのではなく、ページを送ると自分で流れていく。
     ページ＝一本のリールという見立てのまま、スクロールが送り装置になる。
     ─────────────────────────────────────────── */
  @media (max-width: 819px) {
    .fused-scroll { scrollbar-width: none; }
    .fused-scroll::-webkit-scrollbar { display: none; }
    /* 右端は「まだ続く」ことを示してフェード。最後まで流れると消える */
    .fused-scroll:not([data-end]) {
      -webkit-mask-image: linear-gradient(90deg, #000 0 82%, transparent);
              mask-image: linear-gradient(90deg, #000 0 82%, transparent);
    }
  }
  @media (max-width: 819px) and (prefers-reduced-motion: no-preference) {
    /* --pan はスクロール量から main.js が入れる送り幅 */
    .fused-scroll { overflow-x: hidden; }
    .fused-scroll > * { transform: translate3d(calc(var(--pan, 0px) * -1), 0, 0); will-change: transform; }
  }
  /* 動きを減らす設定のときだけ、指で送れる列として残す */
  @media (max-width: 819px) and (prefers-reduced-motion: reduce) {
    .fused-scroll { scroll-snap-type: x proximity; }
    .fused .row > div { scroll-snap-align: center; }
  }

  /* 案内は、フィルムが自分で流れない設定のときだけ出す */
  .swipe-hint { display: none; }
  @media (max-width: 819px) and (prefers-reduced-motion: reduce) {
    .swipe-hint {
      display: block; margin-top: 12px; text-align: right;
      font-size: .76rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-2);
    }
  }

  /* これまでの手順は「順番」そのものが情報。モバイルでも一列に保つ */
  @media (max-width: 720px) {
    .shots { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 6px; flex-wrap: nowrap; }
    .shot { padding: 12px 6px 10px; font-size: .88rem; text-align: center; }
    .shot .cap { font-size: .66rem; letter-spacing: .06em; margin-bottom: 4px; }
    .arrow { font-size: 1rem; }
  }

  /* 出現（控えめ・1回だけ） */
  .rise { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
  .rise.in { opacity: 1; transform: none; }
  .rise:nth-child(2) { transition-delay: .08s; }
  .rise:nth-child(3) { transition-delay: .16s; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rise { opacity: 1; transform: none; transition: none; }
    .marquee { animation: none; }
    .rec-meter .dot { animation: none; }
  }