/* 商品ページ（index.html）のスタイル。法人LPと共有する。
   もとは index.html のインラインstyleだった。法人LPで見た目を揃えるために切り出した。

   ⚠ ここが商品ページの見た目の正本。触ると index.html と法人LPの両方が変わる。
   ⚠ 法人LP固有の差分は corp.css に置く（このファイルより後に読ませる）。 */
*, *::before, *::after { box-sizing: border-box; }
  :root {
    --ink: #f7f7f8;
    --ink-dim: #9a9aa2;
    --bg: #000;
    --line: #26262b;
  }
  html { scroll-behavior: auto; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  header {
    position: fixed; inset: 0 0 auto 0; z-index: 30;
    display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
    padding: 18px clamp(16px, 4vw, 48px);
    /* 透明でも枠線を置いておく。data-solid で色だけ変えれば高さが動かない */
    border-bottom: 1px solid transparent;
    background: rgba(0,0,0,0);
    transition: background .32s ease, border-color .32s ease;
  }
  /* ヒーロー最上部は浮かせたまま。スクロールしたら暗いガラスを敷く。
     「つくり」で木の図版（明るいベージュ）がヘッダーの下を通過すると
     白文字が沈むため。追従CTAと同じ rgba(0,0,0,.62) で揃えてある。 */
  header[data-solid="1"] {
    /* ガラスの厚みを出す: ぼかしを深く、彩度を上げ、上端に光の筋を1本入れる。
       下地は暗いままにして白文字のコントラストを落とさない。
       ⚠ page.css の header.top と同じ値にすること */
    background:
      linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.03)),
      rgba(8,8,10,.55);
    -webkit-backdrop-filter: blur(26px) saturate(1.9);
    backdrop-filter: blur(26px) saturate(1.9);
    border-bottom-color: rgba(255,255,255,.16);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 -1px 0 rgba(255,255,255,.05),
      0 10px 34px rgba(0,0,0,.45);
  }
  /* Akari の組み方を参照: 漢字を大きく、その下に字間を広げた小さいローマ字を敷く */
  .mark { display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:var(--ink); }
  .mark img { display:block; width:auto; height:26px; }
  .mark-en { font-size:8px; letter-spacing:.42em; color:var(--ink-dim); text-indent:.42em; line-height:1; }
  .brand { font-weight: 700; letter-spacing: .14em; font-size: 13px; }
  .nav { display: flex; gap: clamp(14px, 2.2vw, 34px); margin-left: auto; }
  .nav a {
    color: rgba(255,255,255,.82); text-decoration: none;
    font-size: 12px; letter-spacing: .18em; padding: 8px 2px;
    transition: color .2s ease;
  }
  .nav a:hover { color: #fff; }
  .nav a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }

  /* LUMA 参照のピル。ただし塗りを透明のままにせず、
     3Dの上に乗るので薄いガラスにして可読性を担保する */
  .pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 46px; padding: 0 26px;
    color: #fff; text-decoration: none;
    font-size: 12px; font-weight: 600; letter-spacing: .18em;
    border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
    background: rgba(255,255,255,.05);
    transition: background .25s ease, border-color .25s ease;
  }
  .pill:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.9); }
  .pill:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  .pill .arrow { width: 18px; height: 1px; background: currentColor; }
  @media (max-width: 720px) {
    .nav { display: none; }
    header .pill { margin-left: auto; padding: 0 18px; font-size: 11px; }
    /* トップ画面のボタン2つは出さない（本人指示 2026-08-11）。
       購入導線はヘッダーのピルと追従CTAが担う。
       ⚠ このブロックは .cta-row の基底ルールより前にあるので詳細度で勝たせる */
    .sticky .cta-row { display: none; }
  }

  #track { height: 800vh; position: relative; }
  .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  #stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  .copy {
    position: absolute; z-index: 10;
    left: clamp(16px, 6vw, 96px); top: 50%;
    width: min(46vw, 560px);
    transform: translateY(-50%);
    opacity: 0; transition: opacity .45s ease;
    pointer-events: none;
  }
  .copy[data-on="1"] { opacity: 1; pointer-events: auto; }
  /* 行ごとのマスク・ライズ。幕が点くたびに行が下から立ち上がる。
     隠す側の transform は html.js があるときだけ（JS無効なら常に表示） */
  .copy .ln { display: block; overflow: hidden; }
  .copy .ln > span { display: inline-block; }
  html.js .copy .ln > span {
    transform: translateY(112%);
    transition: transform .85s cubic-bezier(.19,.72,.2,1);
  }
  html.js .copy .ln:nth-child(2) > span { transition-delay: .09s; }
  html.js .copy[data-on="1"] .ln > span { transform: none; }
  html.js .copy p { opacity: 0; transform: translateY(14px);
                    transition: opacity .6s ease .2s, transform .6s ease .2s; }
  html.js .copy[data-on="1"] p { opacity: 1; transform: none; }
  .copy h1, .copy h2 {
    margin: 0 0 18px; font-size: clamp(27px, 4vw, 50px);
    line-height: 1.32; letter-spacing: .08em; font-weight: 600;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
    /* 日本語の不自然な折返しを避ける */
    line-break: strict; overflow-wrap: normal; word-break: normal;
  }
  .copy p { margin: 0; color: var(--ink-dim); font-size: clamp(13px, 1.4vw, 15px); line-height: 1.95; }
  .ph { color: #6f6f78; font-size: 11px; letter-spacing: .08em; display: block; margin-bottom: 12px; }

  .cta-row {
    position: absolute; z-index: 40;
    left: clamp(16px, 6vw, 96px); bottom: clamp(56px, 12vh, 116px);
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  .cta {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 0 30px;
    background: #fff; color: #000; text-decoration: none;
    font-weight: 700; font-size: 15px; border-radius: 999px;
  }
  .cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

  .hint {
    position: absolute; z-index: 10; left: 50%; transform: translateX(-50%);
    bottom: clamp(22px, 5vh, 46px);
    font-size: 10px; letter-spacing: .34em; color: #82828c;
  }

  /* 縦画面: 3Dを上、コピーを下に積む */
  @media (max-aspect-ratio: 105/100) {
    .copy { top: auto; bottom: clamp(118px, 22vh, 210px); width: min(88vw, 520px);
            transform: none; }
    .cta-row { left: 50%; transform: translateX(-50%); bottom: clamp(70px, 13vh, 110px); }
    .hint { bottom: clamp(18px, 4vh, 34px); }
  }
  .craft { padding: 14vh clamp(20px, 7vw, 120px) 8vh; border-top: 1px solid var(--line); }
  .craft-title { margin: 0 0 28px; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.4; font-weight: 600;
                 letter-spacing: .08em; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
  .craft-lead { margin: 0 0 10vh; color: var(--ink-dim); line-height: 2.1; font-size: 15px; max-width: 40em; }
  .craft-cols { display: grid; gap: clamp(40px, 6vw, 96px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .craft-cols h3 { margin: 0 0 26px; font-size: clamp(18px, 2vw, 24px); line-height: 1.5; display: flex; align-items: center; gap: 12px; }
  .chip { font-size: 26px; line-height: 1; color: var(--ink);
          font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 600; }
  .craft-cols dl { margin: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); row-gap: 22px; }
  .craft-cols dt { font-size: 12px; letter-spacing: .12em; color: #6f6f78; padding-top: 4px; }
  .craft-cols dd { margin: 0; color: var(--ink-dim); line-height: 2; font-size: 14px; }
  .craft-cols strong { color: var(--ink); font-weight: 600; }
  .ev { margin: 30px 0 0; font-size: 12px; color: #63636c; line-height: 1.9; }
  @media (max-width: 820px) { .craft-cols { grid-template-columns: minmax(0, 1fr); } }

  /* ---------- 実物の写真 ---------- */
  .real { padding: 12vh clamp(20px, 7vw, 120px) 6vh; border-top: 1px solid var(--line); }
  .real-grid { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .real figure { margin: 0; }
  /* ⚠ 写真は切らずに全体を出す。.figure（aspect-ratio 4/3 + cover）を使うと端が落ちる */
  .real figure img { display: block; width: 100%; height: auto;
                     border: 1px solid var(--line); border-radius: 10px; background: #000; }
  .real figcaption { margin-top: 14px; color: var(--ink-dim); font-size: 13.5px; line-height: 2; }
  @media (max-width: 820px) { .real-grid { grid-template-columns: minmax(0, 1fr); } }

  .steps { padding: 12vh clamp(20px, 7vw, 120px) 22vh; }
  .eyebrow { margin: 0 0 14px; font-size: 11px; letter-spacing: .3em; color: #6f6f78; }
  .steps-title { margin: 0 0 8vh; font-size: clamp(26px, 3.6vw, 46px); line-height: 1.4; font-weight: 600;
                 letter-spacing: .08em; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
  /* 罫線で区切るエディトリアル構成。囲みの黒カード + 白帯見出しは
     周囲の「つくり」「購入」と質感が揃わなかったため廃止し、
     ヘアライン + 明朝の大きな番号 + 明朝見出し に統一する */
  .step-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: clamp(28px, 3.4vw, 52px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .step-list li {
    display: flex; flex-direction: column;
    border-top: 1px solid rgba(255,255,255,.22);
    padding-top: 24px;
  }
  .num { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; }
  .num .w { font-size: 10px; letter-spacing: .32em; color: #6f6f78; }
  .num .n {
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(38px, 3.4vw, 52px); font-weight: 600; line-height: 1;
    color: var(--ink); font-variant-numeric: tabular-nums;
  }
  .step-list h3 {
    margin: 0 0 20px;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(17px, 1.7vw, 21px); font-weight: 600;
    letter-spacing: .06em; line-height: 1.5;
  }
  .step-list .body { padding: 20px 0 0; }
  .step-list p { margin: 0; color: var(--ink-dim); line-height: 2; font-size: 13.5px; }
  .step-list strong { color: var(--ink); font-weight: 600; }
  .figure {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
    object-fit: cover; background: #000;
  }
  .step-list .fig-wrap { margin: 0; }
  .step-list .figure { border: 1px solid var(--line); border-radius: 10px; }
  .craft .figure { border: 1px solid var(--line); border-radius: 10px; }
  .figure.wide { margin: 0; }
  .fig-wrap { position: relative; margin: 0 0 30px; }
  .fig-tag {
    position: absolute; left: 16px; bottom: 16px;
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 38px; padding: 0 18px;
    color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .16em;
    border: 1px solid rgba(255,255,255,.34); border-radius: 999px;
    /* 白文字の可読性を確保するため暗いガラス。木の上でも 6:1 以上を保つ */
    background: rgba(0,0,0,.60);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
  }
  .fig-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .note { margin: 8vh 0 0; font-size: 12px; color: #6f6f78; line-height: 1.9; }
  @media (max-width: 860px) {
    .step-list { grid-template-columns: minmax(0, 1fr); }
  }
  @media (prefers-reduced-motion: reduce) {
    .copy { transition: none; }
    html.js .copy .ln > span, html.js .copy p { transition: none; }
  }


  /* ---------- カーソル ---------- */
  html.has-cursor, html.has-cursor a, html.has-cursor button,
  html.has-cursor input, html.has-cursor select, html.has-cursor textarea,
  html.has-cursor label { cursor: none; }
  .cur-ring, .cur-dot, .cur-label {
    position: fixed; top: 0; left: 0; z-index: 200; pointer-events: none;
    opacity: 0; will-change: transform;
    /* 白いボタンの上では反転して黒くなる。どの面でも見える */
    mix-blend-mode: difference;
  }
  .cur-ring { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); }
  .cur-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; transition: opacity .2s ease; }
  .cur-label { color: #fff; font-size: 10px; letter-spacing: .18em; font-weight: 600; transition: opacity .22s ease; white-space: nowrap; }
  .cur-label[data-on="1"] { opacity: 1; }

  /* ---------- ホバー ---------- */
  .nav a { position: relative; }
  .nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform .38s cubic-bezier(.22,.8,.24,1);
  }
  .nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
  .pill { position: relative; overflow: hidden; isolation: isolate; }
  .pill::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: #fff; transform: translateY(101%);
    transition: transform .44s cubic-bezier(.22,.8,.24,1);
  }
  .pill:hover { color: #000; border-color: #fff; }
  .pill:hover::before { transform: translateY(0); }
  .pill .arrow { transition: width .38s cubic-bezier(.22,.8,.24,1); }
  .pill:hover .arrow { width: 30px; }
  .cta { transition: transform .3s cubic-bezier(.22,.8,.24,1), box-shadow .3s ease; }
  .cta:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(255,255,255,.18); }
  .fig-wrap { overflow: hidden; border-radius: 10px; }
  .fig-wrap .figure { transition: transform .7s cubic-bezier(.22,.8,.24,1); }
  .fig-tag { transition: transform .5s cubic-bezier(.22,.8,.24,1); }
  .fig-wrap:hover .fig-tag { transform: translateY(-4px); }

  /* ---------- スクロールできることの表示 ---------- */
  .hint .rail { position: relative; width: 1px; height: 56px; background: rgba(255,255,255,.16); overflow: hidden; }
  .hint .rail::after {
    content: ''; position: absolute; left: 0; width: 1px; height: 20px; background: #fff;
    animation: railRun 1.9s cubic-bezier(.6,0,.4,1) infinite;
  }
  @keyframes railRun {
    0% { transform: translateY(-24px); opacity: 0 }
    28% { opacity: 1 } 72% { opacity: 1 }
    100% { transform: translateY(56px); opacity: 0 }
  }
  /* SCROLLヒントはヒーローの間ずっと表示する（スクロールしても消さない）。
     ヒーローが終われば sticky ごと画面から抜けるので、明示的に消す処理は持たない */

  @media (prefers-reduced-motion: reduce) {
    .hint .rail::after { animation: none; opacity: .8; transform: translateY(18px); }
    .fig-wrap .figure, .pill::before, .nav a::after, .cta { transition: none; }
  }

  /* ---------- 試着 ---------- */
  .tryon { padding: 14vh clamp(20px,7vw,120px); border-top: 1px solid var(--line); }
  .tryon-grid { display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start; }
  .tryon canvas { width:100%; aspect-ratio:4/3; display:block;
                  /* スタジオの紙背景風。黒いカードの輪郭が沈まない明るさまで持ち上げる */
                  background: radial-gradient(ellipse 90% 70% at 50% 38%, #34343c 0%, #1c1c22 55%, #101014 100%);
                  border:1px solid var(--line); border-radius:12px; cursor:grab; touch-action:none; }
  .tryon canvas:active { cursor:grabbing; }
  .field { margin:0 0 22px; }
  .field label { display:block; font-size:12px; letter-spacing:.14em; color:var(--ink-dim); margin:0 0 10px; }
  .field input[type=text] {
    width:100%; min-height:46px; padding:0 16px; font-size:16px;
    color:var(--ink); background:#0c0c0e; border:1px solid var(--line); border-radius:10px;
  }
  .field input[type=text]:focus-visible { outline:2px solid #fff; outline-offset:2px; }
/* ---------- ファイル選択 ----------
   ブラウザ既定の input[type=file] は「選択されていません」を勝手に描き、
   狭い画面では「選択さ...いません」と省略されてしまう。
   ネイティブは隠してラベルをボタンに見せ、ファイル名は自前で出す。
   ⚠ 折り返せるようにしておくこと（省略が起きるのは1行に押し込むから） */
.filefield { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ⚠ `.field label { display:block }`（試着の項目ラベル）が詳細度で勝ってしまい、
   試着の中だけボタンがブロックになる。flex でなくなると align-items が効かず、
   文字が上に貼りついて見える。ラベルとしての指定に負けない形で書く。 */
.field label.file-btn, .filefield .file-btn, .file-btn {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.4);
  font-size: 12px; letter-spacing: .1em; font-family: inherit; white-space: nowrap;
  /* ⚠ letter-spacing は最後の文字の後ろにも入る。中央揃えだと、その1文字分だけ
     左に寄って見える。同じ量を text-indent で戻す */
  text-indent: .1em;
}
.file-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.8); }
.file-native:focus-visible + .file-btn { outline: 2px solid #fff; outline-offset: 2px; }
.file-name { font-size: 12.5px; line-height: 1.7; color: #9a9aa2; min-width: 0; overflow-wrap: anywhere; }
.file-name[data-has="1"] { color: #f7f7f8; }
  .field input[type=range] { width:100%; height:44px; accent-color:#fff; }
  /* 2つの選択肢で幅を分け合う。押せる面積が広いほうが迷わない */
  .seg { display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
  .seg button {
    flex:1; min-height:44px; padding:0 22px; cursor:pointer; font-size:12px; letter-spacing:.14em;
    color:var(--ink-dim); background:transparent; border:0;
    text-indent:.14em;   /* 末尾の字送りぶん、中央へ戻す */
  }
  .seg button[aria-pressed="true"] { background:#f2f2f4; color:#08080a; font-weight:700; }
  .tryon .note2 { margin:22px 0 0; font-size:12px; color:#63636c; line-height:1.9; }
  [data-tryon-status] { display:block; margin-top:10px; font-size:12px; color:var(--ink-dim); min-height:1.5em; }
  .tryon-clear {
    margin-top:12px; min-height:40px; padding:0 18px; cursor:pointer;
    color:var(--ink-dim); background:transparent;
    border:1px solid rgba(255,255,255,.3); border-radius:999px;
    font-size:12px; letter-spacing:.1em; font-family:inherit;
  }
  .tryon-clear:hover { color:#fff; border-color:rgba(255,255,255,.7); }
  .tryon-clear:focus-visible { outline:2px solid #fff; outline-offset:2px; }
  @media (max-width:860px){
    .tryon-grid { grid-template-columns:minmax(0,1fr); }
    /* 縦積みでは先にカードを見せる。操作より結果が先 */
    .tryon canvas { order:-1; }
  }


  /* ---------- 購入 ---------- */
  .buy { padding: 14vh clamp(20px,7vw,120px) 2vh; border-top: 1px solid var(--line); }
  .buy-title { margin: 0 0 24px; font-size: clamp(26px,3.6vw,46px); line-height: 1.4; font-weight: 600;
               letter-spacing: .08em; font-family: "Hiragino Mincho ProN","Yu Mincho",serif; }
  .buy-lead { margin: 0 0 7vh; color: var(--ink-dim); font-size: 15px; line-height: 2.1; max-width: 42em; }
  .buy-grid { display: grid; gap: clamp(16px,2vw,24px);
              grid-template-columns: repeat(auto-fit, minmax(min(100%,260px), 1fr)); }
  .buy-card { display: flex; flex-direction: column; gap: 14px;
              background: #0c0c0e; border: 1px solid var(--line); border-radius: 12px; padding: 30px 26px; }
  .buy-card h3 { margin: 0; display: flex; align-items: center; gap: 12px;
                 font-size: 15px; font-weight: 700; letter-spacing: .06em; }
  .buy-price { margin: 0; font-size: 34px; font-weight: 700; line-height: 1;
               font-variant-numeric: tabular-nums; }
  .buy-price span { font-size: 12px; font-weight: 400; color: var(--ink-dim); margin-left: 6px; }
  .buy-note { margin: 0 0 6px; color: var(--ink-dim); font-size: 13px; line-height: 1.9; flex: 1; }
  /* ⚠ static にすると .pill::before（ホバーの白塗り）の包含ブロックが外れ、
     リビール中にカード外へ白帯として漏れる。relative を維持する */
  .buy-card .cta, .buy-card .pill { position: relative; width: 100%; justify-content: center; }
  .buy-terms { margin: 7vh 0 0; border-top: 1px solid var(--line); }
  .buy-terms > div { display: grid; grid-template-columns: minmax(110px,160px) minmax(0,1fr);
                     gap: clamp(12px,3vw,32px); padding: 20px 0; border-bottom: 1px solid var(--line); }
  .buy-terms dt { color: var(--ink-dim); font-size: 13px; }
  .buy-terms dd { margin: 0; font-size: 13.5px; line-height: 1.95; }
  .buy-extra { padding: 5vh clamp(20px,7vw,120px) 14vh; }
  .buy-extra .buy-terms { margin-top: 0; }
  .buy-legal { margin: 30px 0 0; font-size: 13px; color: var(--ink-dim); line-height: 2; }
  .buy-legal a { color: #fff; }
  @media (max-width: 680px) { .buy-terms > div { grid-template-columns: minmax(0,1fr); gap: 4px; } }

  /* スマホは backdrop-filter が重い。固定ヘッダーの下を毎フレーム再合成するので、
     ぼかし半径をそのままスクロールの負荷になる。見た目を保てる範囲で軽くする */
  @media (max-width: 820px) {
    header[data-solid="1"], .sticky-buy {
      -webkit-backdrop-filter: blur(14px) saturate(1.6);
      backdrop-filter: blur(14px) saturate(1.6);
    }
  }

  /* ---------- 現在地（ヒーロー4幕のインジケータ） ----------
     main.js が li に --f（幕内の進捗 0-1）と data-on を書き込む。
     右端に明朝の縦書きで置く。縦画面と狭い画面ではコピーと重なるので出さない */
  .acts {
    position: absolute; z-index: 10; margin: 0; padding: 0; list-style: none;
    right: clamp(18px, 3vw, 42px); top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 30px;
  }
  .acts li { position: relative; padding-left: 12px; }
  .acts li::before, .acts li::after {
    content: ''; position: absolute; left: 0; top: calc(50% - 24px);
    width: 1px; height: 48px;
  }
  .acts li::before { background: rgba(255,255,255,.16); }
  .acts li::after { background: #fff; transform: scaleY(var(--f, 0)); transform-origin: top; }
  .acts .name {
    display: block; writing-mode: vertical-rl;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
    font-size: 11px; letter-spacing: .32em; color: #55555e;
    transition: color .35s ease;
  }
  .acts li[data-on="1"] .name { color: var(--ink); }
  /* 狭い画面・縦画面ではコンパクトにして出し続ける（本人指示 2026-08-11）。
     3Dが占める上半分の右端に寄せ、下段のコピーとは重ねない */
  @media (max-width: 720px), (max-aspect-ratio: 105/100) {
    .acts { right: 14px; top: 38%; gap: 18px; }
    .acts li { padding-left: 9px; }
    .acts li::before, .acts li::after { top: calc(50% - 17px); height: 34px; }
    .acts .name { font-size: 10px; letter-spacing: .24em; }
  }

  /* ---------- 追従購入CTA（狭い画面のみ） ----------
     chrome.js が data-on を出し入れする。ヒーローのCTAか購入セクションが
     画面内にある間は出ない（購入導線を二重に見せない） */
  .sticky-buy {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
    display: none; align-items: center; gap: 12px;
    padding: 12px 12px 12px 20px;
    background:
      linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.03)),
      rgba(8,8,10,.62);
    border: 1px solid rgba(255,255,255,.16); border-radius: 18px;
    -webkit-backdrop-filter: blur(26px) saturate(1.9);
    backdrop-filter: blur(26px) saturate(1.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 10px 34px rgba(0,0,0,.45);
    transform: translateY(calc(100% + 24px));
    transition: transform .45s cubic-bezier(.22,.8,.24,1);
  }
  .sticky-buy[data-on="1"] { transform: none; }
  .sticky-buy-label { margin: 0; flex: 1; font-size: 12.5px; font-weight: 600; line-height: 1.55; color: var(--ink); }
  .sticky-buy-label span { font-weight: 400; font-size: 11px; color: var(--ink-dim); }
  .sticky-buy-cta {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; padding: 0 26px; border-radius: 999px;
    background: #fff; color: #000; text-decoration: none; font-weight: 700; font-size: 14px;
  }
  .sticky-buy-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  @media (max-width: 720px) { .sticky-buy { display: flex; } }
  @media (prefers-reduced-motion: reduce) { .sticky-buy { transition: none; } }

  /* ---------- 決済準備中の案内（chrome.js が差し込む） ---------- */
  .buy-pending {
    margin: 22px 0 0; display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 10px 20px;
    font-size: 13px; line-height: 1.8; color: var(--ink);
    background: #141418; border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  }
  .buy-pending a { color: #fff; }

  /* ---------- FAQ ---------- */
  .faq { padding: 4vh clamp(20px,7vw,120px) 12vh; }
  .qa-list { display: grid; gap: clamp(20px,2.4vw,32px);
             grid-template-columns: repeat(auto-fit, minmax(min(100%,340px), 1fr)); }
  .qa { border-top: 1px solid var(--line); padding: 22px 0 0; }
  .qa h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; line-height: 1.6; }
  .qa p { margin: 0; color: var(--ink-dim); font-size: 13.5px; line-height: 2; }

  /* ---------- フッター ----------
     page.css の .foot 系と同じ構造・同じ値。変えるときは両方揃えること */
  .site-foot { padding: 8vh clamp(20px,7vw,120px) 9vh; border-top: 1px solid var(--line); }
  .foot-grid { display: flex; justify-content: space-between; gap: 40px clamp(32px,6vw,96px); flex-wrap: wrap; }
  .foot-brand { display: flex; flex-direction: column; gap: 14px; }
  .foot-brand .mark { align-items: flex-start; }
  .foot-tag { margin: 0; color: #63636c; font-size: 12px; letter-spacing: .06em;
              font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
  .foot-nav { display: flex; gap: clamp(28px,5vw,72px); flex-wrap: wrap; }
  .foot-nav h3 { margin: 0 0 14px; font-size: 10px; font-weight: 600; letter-spacing: .3em; color: #63636c; }
  .foot-nav ul { list-style: none; margin: 0; padding: 0; }
  .foot-nav li { margin: 0 0 10px; }
  .foot-nav a { color: var(--ink-dim); text-decoration: none; font-size: 13px; letter-spacing: .04em;
                transition: color .2s ease; }
  .foot-nav a:hover { color: #fff; }
  .foot-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
  .foot-bottom { margin-top: 6vh; padding: 22px 0 0; border-top: 1px solid var(--line);
                 display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
                 color: #63636c; font-size: 12px; line-height: 1.9; }
  .foot-bottom p { margin: 0; }
  .foot-bottom a { color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); }
  .foot-bottom a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
  .foot-bottom a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
  @media (max-width: 600px) { .foot-grid { flex-direction: column; } }

  /* ---------- セクションのリビール ----------
     chrome.js が html.js を立て、見えたら .in を付ける。
     JSが動かない環境では最初から見えている（html.js が無ければ透明化しない） */
  html.js [data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity .85s ease, transform .85s cubic-bezier(.22,.8,.24,1);
  }
  html.js [data-reveal].in { opacity: 1; transform: none; }
  html.js .step-list li[data-reveal]:nth-child(2), html.js .buy-card[data-reveal]:nth-child(2) { transition-delay: .12s; }
  html.js .step-list li[data-reveal]:nth-child(3), html.js .buy-card[data-reveal]:nth-child(3) { transition-delay: .24s; }
  @media (prefers-reduced-motion: reduce) {
    html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  }

  /* ---------- 見出しの行マスク・リビール ----------
     data-reveal="lines" はブロックのフェードではなく、行が下から立ち上がる */
  html.js [data-reveal="lines"] { opacity: 1; transform: none; transition: none; }
  html.js [data-reveal="lines"] .ln { display: block; overflow: hidden; }
  html.js [data-reveal="lines"] .ln > span {
    display: inline-block; transform: translateY(112%);
    transition: transform .95s cubic-bezier(.19,.72,.2,1);
  }
  html.js [data-reveal="lines"] .ln:nth-child(2) > span { transition-delay: .1s; }
  html.js [data-reveal="lines"].in .ln > span { transform: none; }

  /* ---------- ステップ図版: リビール時に引きで収まる ---------- */
  .figure { --fs: 1; }
  .fig-wrap .figure { transform: scale(var(--fs)); }
  .fig-wrap:hover .figure { --fs: 1.045; }
  html.js .step-list li[data-reveal]:not(.in) .figure { --fs: 1.09; }

  /* ---------- 初回ロード: CTAとヒントを遅れてフェードイン ---------- */
  @keyframes introFade { from { opacity: 0; } }
  html.js .cta-row { animation: introFade .9s ease .55s backwards; }
  html.js .hint { animation: introFade .9s ease .95s backwards; }
  #stage { opacity: 0; transition: opacity 1.1s ease; }
  #stage[data-ready="1"] { opacity: 1; }
  .no-webgl #stage { transition: none; }

  /* ---------- CTAのマグネット追従（chrome.js が inline transform を書く） ---------- */
  html.js .mag { transition: transform .35s cubic-bezier(.22,.8,.24,1); }

  /* ---------- 購入カードのホバーリフト ---------- */
  .buy-card { transition: transform .45s cubic-bezier(.22,.8,.24,1), border-color .45s ease; }
  .buy-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.28); }

  /* ---------- 図版のパララックス（chrome.js が --py を書く） ---------- */
  .craft .fig-wrap, .steps .fig-wrap { transform: translateY(var(--py, 0px)); }

  /* ---------- ページ間のクロスフェード（対応ブラウザのみ） ---------- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }

  @media (prefers-reduced-motion: reduce) {
    html.js [data-reveal="lines"] .ln > span { transform: none; transition: none; }
    html.js .step-list li[data-reveal]:not(.in) .figure { --fs: 1; }
    html.js .cta-row, html.js .hint { animation: none; }
    #stage { opacity: 1; transition: none; }
    html.js .mag { transition: none; }
    .buy-card, .buy-card:hover { transform: none; transition: none; }
    .craft .fig-wrap, .steps .fig-wrap { transform: none; }
    @view-transition { navigation: none; }
  }

  /* ---------- WebGLが使えない環境のフォールバック ----------
     main.js が初期化に失敗したら html.no-webgl を立てる。
     3Dの巻物をやめ、コピーを静的に積んで内容は全部読めるようにする */
  .no-webgl #track { height: auto; }
  .no-webgl .sticky { position: static; height: auto; overflow: visible; padding: 140px clamp(20px,7vw,120px) 60px; }
  .no-webgl #stage, .no-webgl .hint, .no-webgl .acts { display: none; }
  .no-webgl .copy { position: static; opacity: 1; transform: none; width: auto; max-width: 560px; margin: 0 0 44px; }
  html.no-webgl .copy .ln > span { transform: none; transition: none; }
  html.no-webgl .copy p { opacity: 1; transform: none; transition: none; }
  .no-webgl .cta-row { position: static; transform: none; margin: 8px 0 0; width: auto; }

  /* 文節単位の折返し。読点の途中で切れる不自然な改行を避ける */
  .nb { display: inline-block; }


  /* キーボード操作の最初の1手。普段は隠れていて、Tabで現れる */
  .skip {
    position: fixed; top: 8px; left: 8px; z-index: 100;
    padding: 12px 20px; border-radius: 999px;
    background: #fff; color: #000; font-size: 13px; font-weight: 700; text-decoration: none;
    transform: translateY(-160%); transition: transform .2s ease;
  }
  .skip:focus { transform: none; }

  ::selection { background: #fff; color: #000; }


/* ── ヘッダーの2タブ（お問い合わせ／ご注文）─────────────────────
   ⚠ どのページにも同じ形で出す。以前はページごとに .pill と .head-cta が
   別々にあり、行き先も文言も揃っていなかった。
   「相談したい人」と「買う人」で行き先が違うので、1つのボタンに畳まない。 */
.cta-tabs {
  margin-left: auto; display: inline-flex; align-items: stretch;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 3px; gap: 3px;
  background: rgba(255,255,255,.04);
}
.cta-tabs a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 18px; border-radius: 999px;
  color: var(--ink-dim, #b9b9c0); text-decoration: none; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-indent: .08em;
  transition: color .2s ease, background .2s ease;
}
.cta-tabs a:hover { color: #fff; background: rgba(255,255,255,.09); }
.cta-tabs a.on { background: #fff; color: #08080a; }
.cta-tabs a.on:hover { background: #f2f2f4; }
.cta-tabs a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cta-tabs .arrow { width: 14px; height: 1px; background: currentColor; flex: none; }
/* 現在地はリンクにしない。押しても何も起きないタブがあると迷う */
.cta-tabs a[aria-current] { pointer-events: none; }
@media (max-width: 860px) { .cta-tabs a { padding: 0 13px; font-size: 11px; letter-spacing: .04em; } }
@media (max-width: 620px) { .cta-tabs .arrow { display: none; } }