/* VISION24 | 24h.css — 24時間ジム 店舗ページ固有
 * values / FV / CTA 更新版を含む（旧24h2 を統合）
 * 平尾・六本松の両店で共通。店舗差は theme-{store}.css が吸収する。
 * ★ MACHINE / 24HOURS / APP はパーソナルページでは不要 */

    h1,
    h2,
    h3,
    h4 {
      margin: 0 0 .6em;
      font-weight: 900;
      line-height: 1.5
    }

    /* ── 背景固定（iOS対応版） ───────────────────────────────
       background-attachment:fixed は iOS Safari が非対応。
       scroll 扱いになるうえ、背景をドキュメント全高に合わせるため cover が極端に拡大される。
       そこで position:sticky で同じ見た目をつくる。iOS でも効き、合成も軽い。

       .vision-bg-sticky      … セクション全体を覆う層（padding部分まで含めて覆うため absolute inset:0）
       .vision-bg-sticky__img … 実際に貼り付く画像。100vh でビューポート上端に sticky する
       ※ overflow:clip は .vision-bg-sticky 側に付ける。セクションに付けると
         中の横スクロール（.vision-machine__grid）やアコーディオンに影響しうるため。
    ───────────────────────────────────────────────────── */
    .vision-bg-sticky {
      position: absolute;
      inset: 0;
      overflow: clip;
      /* 環境によって overflow:clip がスクロールコンテナ扱いになり
         sticky が効かない場合があるため、clip-path でも切り抜く */
      clip-path: inset(0);
      /* hidden にすると sticky が効かなくなる */
      z-index: 0;
      pointer-events: none;
    }

    .vision-bg-sticky__img {
      position: sticky;
      top: 0;
      height: 100vh;
      background-image: var(--img-sticky);
      /* 本番は実パスに差し替え */
      background-position: var(--img-sticky-pos);
      background-size: cover;
      background-repeat: no-repeat;
    }

    /* 中身を背景より前に出す */
    .vision-gallery>*:not(.vision-bg-sticky),
    .vision-machine>*:not(.vision-bg-sticky) {
      position: relative;
      z-index: 1;
    }

    /* ── CARDIO AREA：白背景の全幅帯 ─────────────────────────
       .vision-machine の石柄は全幅に敷いたまま、この帯だけ不透明な白で覆う。
       マシン／フリーウェイトは石柄のまま、カーディオだけ白になる。 */
    .vision-area--cardio {
      background: var(--bg-white);
      width: 100vw;
      margin-inline: calc(50% - 50vw);
      /* コンテナの外へ出して全幅に */
      padding-block: clamp(40px, 5.5vw, 64px);
      border-top: 1px solid var(--ink-line);
      border-bottom: 1px solid var(--ink-line);
    }

    .vision-area--cardio.vision-area+.vision-area {
      border-top: 0;
    }

    /* 中身はコンテナ幅に戻す */
    .vision-area__inner {
      max-width: var(--maxw);
      margin-inline: auto;
      padding-inline: var(--pad);
    }

    /* ── SPIRIT：トレッドミル動画（クリックで再生するファサード方式） ──────
       ページ表示時は poster 画像だけを読み込み、動画本体は 0 バイト。
       再生ボタンを押した時に初めて <video> を挿入して読み込む（初期表示を軽く保つ）。
       旧「窓越し（position:fixed＋clip-path）」の固定背景表現は廃止。 */
    .vision-tm-video {
      position: relative;
      aspect-ratio: 16 / 9;
      margin-block: clamp(28px, 4vw, 44px);
      background: var(--fill-black);
      overflow: hidden;
    }

    /* クリック領域（ポスター＋再生ボタン）。button でキーボード操作も標準対応 */
    .vision-tm-video__bg {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: var(--fill-black);
      color: inherit;
      font: inherit;
      cursor: pointer;
    }

    /* ポスター画像／再生後の <video> 共通（帯いっぱいにカバー表示） */
    .vision-tm-video__el {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* 再生ボタン（丸＋三角） */
    .vision-tm-video__play {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: rgba(0, 0, 0, .18);
      transition: background .2s ease;
    }

    .vision-tm-video__bg:hover .vision-tm-video__play,
    .vision-tm-video__bg:focus-visible .vision-tm-video__play {
      background: rgba(0, 0, 0, .32);
    }

    .vision-tm-video__play svg {
      width: clamp(56px, 8vw, 84px);
      height: auto;
      filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5));
      transition: transform .2s ease;
    }

    .vision-tm-video__bg:hover .vision-tm-video__play svg {
      transform: scale(1.06);
    }

    .vision-tm-video__bg:focus-visible {
      outline: 3px solid var(--ink-accent);
      outline-offset: -3px;
    }

    /* 動画は再生ボタンを押した時だけ読み込まれる（ユーザー操作起点）ため、
       prefers-reduced-motion でも自動再生は発生しない＝特別な抑制は不要。 */

    /* ── FACILITY：左のラベルカードから、右へ順に配るトランプ ──────
       一番左に見出しカード（設備／サービス／セキュリティ）を固定で置き、
       写真カードはその上に重ねてある。スクロールで到達すると、
       左から1枚ずつ右へ滑り出す。

       配りは transform だけ（レイアウトを動かさないので滑らか）。
         --i … 何枚目（0始まり）
         ラベルカードは列0、写真カードは列 i+1 にいるので、
         translateX を「-(i+1) 列ぶん」にすると全員がラベルカードの上に重なる。
         .is-dealt で transform:none ＝ 定位置へ配られる。

       ★ 初期非表示（.vision-deck.is-anim）はJSが付ける。JSが無い/未対応なら
         クラスが付かない＝最初から定位置に見えたまま（カードが消えない）。 */
    .vision-facility {
      overflow: clip;
    }


    /* ── 背景が未指定だったセクションの面 ── */
    .vision-compare,
    .vision-cafe,
    .vision-hours,
    .vision-trainers,
    .vision-price,
    .vision-faq {
      background: var(--bg-white);
    }




    /* ── FV ── */

    .vision-fv {
      position: relative;
      padding: 0;
      background: var(--bg-black);
      background-image: url("/wp-content/themes/my-custom-theme/assets/images/24h/common/24h-fv-men.webp?v=1785219707");
      background-size: cover;
      background-position: top center;
      background-repeat: no-repeat;

      overflow: hidden;
    }

    @media (max-width: 767px) {
      .vision-fv {
        background-image: url("/wp-content/themes/my-custom-theme/assets/images/24h/common/24h-fv-men-sp.webp?v=1785219696");
      }
    }


    .vision-fv .container {
      position: relative;
      padding-top: var(--header-h, 72px);
      padding-bottom: clamp(24px, 4.5vw, 52px);
    }

    .vision-fv__ribbon {
      text-align: right;
      width: fit-content;
      display: block;
      background: none;
      color: var(--ink-white);
      font-weight: 900;
      font-size: .76rem;
      padding: 0;
      margin: 0 0 12px auto;
      text-shadow:
        0 0 10px rgba(0, 0, 0, 0.9),
       
    }

    .vision-fv__copy {
      color: var(--ink-white);
      font-size: clamp(1.6rem, 4.4vw, 3rem);
      font-weight: 700;
      line-height: 1.42;
      margin: 160px 0 120px;
      text-align: right;
      text-shadow:
        0 0 10px rgba(0, 0, 0, 0.9),
       
    }

    .vision-fv__copy .vision-fv__mark {
      position: relative;
      display: inline-block;
      padding-bottom: .05em;
      z-index: 0;
    }

    .vision-fv__copy .vision-fv__mark::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: .16em;
      background: var(--fill-yellow);
      z-index: 1;
      pointer-events: none;
    }

    .vision-fv__sub-bar {
      width: 100%;
      background: var(--fill-black);
      padding: 14px 0;
      overflow: hidden;
    }

    .vision-fv__sub-marquee {
      overflow: hidden;
      width: 100%;
      line-height: 1.6;
      pointer-events: none;
      user-select: none;
    }

    .vision-fv__sub-marquee-track {
      display: flex;
      width: max-content;
      animation: vision-fv-sub-marquee 36s linear infinite;
    }

    .vision-fv__sub-marquee-track span {
      flex-shrink: 0;
      padding-right: 3rem;
      color: var(--ink-white);
      font-size: .92rem;
      white-space: nowrap;
    }

    @keyframes vision-fv-sub-marquee {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .vision-fv__sub-marquee-track {
        animation: none;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem 1.5rem;
      }

      .vision-fv__sub-marquee-track span {
        white-space: normal;
        padding-right: 0;
      }

      .vision-fv__sub-marquee-track span:nth-child(n + 4) {
        display: none;
      }
    }

    .vision-fv .btn-row {
      flex-wrap: nowrap;
      gap: 8px;
      margin-top: 0;
    }

    .vision-fv .btn-row .btn {
      flex: 1 1 0;
      text-align: center;
      white-space: nowrap;
    }

    @media (max-width: 767px) {
      .vision-fv .btn-row .btn,
      .vision-fv .btn-row .btn--lg {
        padding: 12px 10px;
        font-size: .78rem;
      }
      .vision-fv__copy{
        margin: 40px 0 60px;
      }
      
    }

    /* ── プロテインバナー（トップページ mv-banner 同様） ── */
    .vision-fv .container .vision-fv-protein {
      margin: clamp(22px, 30vw, 80px) 0 12px;
      width: 100%;
    }

    .vision-fv .container .vision-fv-protein__inner {
      width: 100%;
      max-width: none;
      margin-inline: 0;
    }

    .vision-fv-protein__inner {
      width: 100%;
    }

    .vision-fv-protein__picture {
      display: block;
      width: 100%;
      position: relative;
      overflow: hidden;
      border-radius: 0.8rem;
      aspect-ratio: 3 / 2;
    }

    .vision-fv-protein__picture::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -60%;
      width: 30%;
      height: 200%;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: rotate(30deg);
      pointer-events: none;
      animation: vision-fv-protein-shine 3s infinite ease-in-out;
    }

    @keyframes vision-fv-protein-shine {
      0% { left: -60%; }
      30% { left: 140%; }
      100% { left: 140%; }
    }

    .vision-fv-protein__img {
      display: block;
      width: 100%;
      height: auto;
    }

    @media (min-width: 768px) {
      .vision-fv .container .vision-fv-protein {
        margin-bottom: 16px;
      }

      .vision-fv-protein__picture {
        border-radius: 0;
        aspect-ratio: 6 / 1;
      }
    }

    /* ── 信頼バー ── */
    .vision-trust {
      background: var(--fill-yellow);
    }

    .vision-trust__list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      list-style: none;
      margin: 0 auto;
      padding: 0;
      max-width: 1100px;
    }

    .vision-trust__list li {
      text-align: center;
      padding: 8px 0;
      font-size: .72rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .vision-trust__list li:not(:first-child) {
      border-left: 1px solid rgba(0, 0, 0, .16);
    }

    /* スマホ・タブレット: 2行×2列 */
    @media (max-width: 1023px) {
      .vision-trust__list {
        grid-template-columns: repeat(2, 1fr);
      }

      .vision-trust__list li:nth-child(odd) {
        border-left: 0;
      }

      .vision-trust__list li:nth-child(n+3) {
        border-top: 1px solid rgba(0, 0, 0, .16);
      }
    }

    .vision-trust__list b {
      display: block;
      font-family: var(--f-en);
      font-weight: 700;
      font-size: 1.7rem;
      line-height: 1.2;
    }

    .vision-trust__list a {
      color: inherit;
      text-decoration: none;
    }

    .vision-trust__list a:hover {
      text-decoration: underline;
    }

    /* ============================================================
       INTRO
       ============================================================ */

    /* ── INTRODUCTION ── */
    .vision-intro {
      background: var(--bg-tint);
      background-image: url(/wp-content/themes/my-custom-theme/assets/images/24h/common/bg-intro.webp);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .vision-intro-price {
      text-align: center;
      margin: 0 0 clamp(24px, 3vw, 36px)
    }

    .vision-intro-price .sec-ttl {
      margin-bottom: 0
    }

    .vision-intro-price h2 {
      font-size: clamp(1.3rem, 3.4vw, 2.1rem);
      margin: 0;
      line-height: 1.6
    }

    .vision-intro-price .vision-intro-price__num {
      font-family: var(--f-en);
      font-weight: 700;
      font-size: clamp(2.6rem, 7vw, 4.6rem);
      line-height: 1;
      background: linear-gradient(var(--fill-yellow), var(--fill-yellow)) no-repeat left bottom / 100% .18em;
      padding: 0 .06em
    }

    .vision-intro-price .vision-intro-price__unit {
      font-size: .9rem;
      font-weight: 900
    }

    .vision-intro__body {
      max-width: 760px;
      margin-inline: auto;
      font-size: .9rem;
      line-height: 2.05
    }

    .vision-intro__body p {
      margin: 0 0 1.2em
    }

    .vision-intro__body p:last-child {
      margin: 0
    }

    /* ── 悩みチップ（INTRODUCTIONの長文圧縮） ── */
    .vision-intro__pain-chips {
      list-style: none;
      padding: 0;
      margin: 0 auto 34px;
      max-width: 760px;
      display: flex;
      flex-wrap: wrap;
      gap: 26px 40px;
      justify-content: center
    }

    .vision-intro__pain-chips li {
      position: relative;
      font-size: .82rem;
      font-weight: 700;
      color: var(--ink-gray);
      background: var(--fill-white);
      border: 1px solid var(--ink-line);
      border-radius: var(--r-chip);
      padding: 13px 20px;
      line-height: 1.5;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .05)
    }

    /* 吹き出しの「しっぽ」＝ふわふわ浮かぶ小さな丸を2つ、左下に添える（考え事の💭） */
    .vision-intro__pain-chips li::before,
    .vision-intro__pain-chips li::after {
      content: "";
      position: absolute;
      background: var(--fill-white);
      border: 1px solid var(--ink-line);
      border-radius: var(--r-dot)
    }

    .vision-intro__pain-chips li::before {
      width: 11px;
      height: 11px;
      left: 14px;
      bottom: -8px
    }

    .vision-intro__pain-chips li::after {
      width: 6px;
      height: 6px;
      left: 9px;
      bottom: -15px
    }

    /* しっぽを左・右・左・右に。偶数番目だけ右下に付け替える */
    .vision-intro__pain-chips li:nth-child(even)::before {
      left: auto;
      right: 14px
    }

    .vision-intro__pain-chips li:nth-child(even)::after {
      left: auto;
      right: 9px
    }

    /* ふわふわ上下に揺らす。1つずつ位相をずらす */
    .vision-intro__pain-chips li {
      animation: thought-float 4s ease-in-out infinite
    }

    .vision-intro__pain-chips li:nth-child(2) {
      animation-delay: .6s
    }

    .vision-intro__pain-chips li:nth-child(3) {
      animation-delay: 1.2s
    }

    .vision-intro__pain-chips li:nth-child(4) {
      animation-delay: 1.8s
    }

    @keyframes thought-float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-6px)
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .vision-intro__pain-chips li {
        animation: none
      }
    }

    .vision-intro__answer {
      text-align: center;
      font-size: .92rem;
      line-height: 2.05;
      margin: 0
    }

    @media (max-width: 767px) {
      .vision-intro__answer {
        text-align: left;
      }
    }

    /* ============================================================
       COMPARE
       ============================================================ */

    /* ── 比較表 ── */

    /* 視覚的に隠すがDOM・読み上げ・クローラには残す（AIO） */

    address {
      font-style: normal
    }

    /* ============================================================
       GALLERY
       ============================================================ */

    /* ── ③ GALLERY (非対称グリッドでリズム変化) ── */
    /* --- 行（ブロック）ごとの設定 --- */
    .vision-gallery__row {
      /* 行と行の間の余白（ここで広さを調整できます） */
      margin-bottom: 60px;
    }

    /* 最後の行の下余白は不要なので打ち消し */
    .vision-gallery__row:last-child {
      margin-bottom: 0;
    }

    /* --- 行ごとの見出しのスタイリング --- */
    .vision-gallery__row-ttl {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
      color: var(--ink-black);
      /* ジムのトーンに合わせて変更してください */
      margin-bottom: 20px;
      /* 見出しと画像の間の余白 */
      border-left: 4px solid var(--ink-black);
      /* アクセントの左線（不要なら削除してください） */
      padding-left: 12px;
      text-transform: uppercase;
      /* 小文字で書かれても大文字に変換 */
    }

    /* ギャラリー全体のグリッド設定（1行の中の並び） */

    /* ── GYM ATMOSPHERE：大きい1枚 ＋ 2×2（ずらし） ── */
    .vision-atmos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(18px, 2.6vw, 34px);
      align-items: start;
      /* 上端そろえ。4枚側だけ下げてリズムを作る */
    }

    /* 画像枠で 4:3 を固定（img 欠損時もセル高が変わらない → パララックス計測が安定） */
    .vision-atmos__main {
      margin: 0;
      display: grid;
    }

    .vision-atmos__main::before {
      content: "";
      grid-area: 1 / 1;
      aspect-ratio: 4 / 3;
      background-color: rgba(0, 0, 0, .16);
    }

    .vision-atmos__main>img {
      grid-area: 1 / 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* 左右交互：.vision-atmos--rev の行だけ大きい1枚を右へ */
    .vision-atmos--rev .vision-atmos__main {
      order: 2;
    }

    /* パララックス（PCのみJSが動かす） */

    .vision-atmos__thumbs {
      list-style: none;
      margin: 0;
      /* 上に余白を入れて4枚側を下へずらす（左右で高さを揃えない）
         左右26pxは、上の translate のはみ出しを吸収するための余白 */
      padding: clamp(72px, 9vw, 128px) 26px 16px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(12px, 1.6vw, 18px);
    }

    .vision-atmos__thumbs figure {
      margin: 0;
    }

    /* ランダム感：4枚をそれぞれずらす（transform なのでレイアウトは動かない）
       左右のずれを縦より大きくして、格子っぽさを崩す */
    /* 4枚のずらし。1枚目と3枚目（玄関・ロッカー/トレーニング系）は少し下げ、
       2枚目と4枚目（ラウンジ・アメニティ/ストレッチ系）は少し左へ寄せる。 */
    .vision-atmos__thumbs>li:nth-child(1) {
      transform: translate(-18px, 14px);
    }

    /* 少し下げる */
    .vision-atmos__thumbs>li:nth-child(2) {
      transform: translate(-14px, -8px);
    }

    /* 少し左へ */
    .vision-atmos__thumbs>li:nth-child(3) {
      transform: translate(16px, 16px);
    }

    /* 少し下げる */
    .vision-atmos__thumbs>li:nth-child(4) {
      transform: translate(16px, -6px);
    }

    /* さらに右へ（ラウンジ・アメニティ・ストレッチ） */
    /* 選択中の1枚：写真を黄色のボックス＋場所名に差し替える
       （その写真は大きい枠に出ているので、サムネ側で重複して見せない） */
    .vision-atmos__thumb-frame {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background-color: rgba(0, 0, 0, .16);
    }

    .vision-atmos__thumb-frame>img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: opacity .2s ease;
    }

    /* 4枚側のキャプションは出さない（大きい1枚のキャプションだけ見せる） */
    .vision-atmos__thumb .vision-gallery__caption {
      display: none;
    }

    .vision-atmos__thumb-label {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to left bottom, var(--fill-white), var(--fill-gray));
      color: var(--ink-black);
      font-size: clamp(.78rem, 1.5vw, .95rem);
      font-weight: 900;
      letter-spacing: .02em;
      line-height: 1.4;
      text-align: center;
      border: 1px solid var(--ink-yellow);
      padding: 8px;
    }

    .vision-atmos__thumb.is-active .vision-atmos__thumb-label {
      display: flex;
    }

    /* JSが有効化されるまではクリックできる見た目にしない（空振りを防ぐ） */
    .vision-atmos.is-ready .vision-atmos__thumb {
      cursor: pointer;
    }

    .vision-atmos.is-ready .vision-atmos__thumb:hover img {
      opacity: .82;
    }

    .vision-atmos.is-ready .vision-atmos__thumb:focus-visible img {
      outline: 3px solid var(--ink-accent);
      outline-offset: 3px;
    }

    /* スマホ：交互を解除し、常に「上に大きい1枚／下に2×2」 */
    @media (max-width: 767px) {
      .vision-atmos {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      /* スマホ：大きい1枚は隠し、サムネだけ並べる。タップでライトボックス全画面 */
      .vision-atmos__main {
        display: none;
      }

      .vision-atmos.is-ready .vision-atmos__thumb {
        cursor: zoom-in;
      }

      /* SP：選択中サムネの黄色背景＋日本語ラベルは不要（画面で見えないため） */
      .vision-atmos__thumb-label {
        display: none !important;
      }

      .vision-atmos--rev .vision-atmos__main {
        order: 0;
      }

      .vision-atmos__thumbs {
        padding: 14px 26px;
      }

      /* 縦積みなので下ずらしは不要。左右はずらし吸収ぶん残す */
    }

    /* キャプション */
    .vision-gallery__caption {
      margin-top: 10px;
      font-size: 14px;
      font-weight: bold;
      letter-spacing: 0.05em;
    }

    /* --- レスポンシブ対応 --- */
    @media (max-width: 1024px) {
      .vision-gallery__row {
        margin-bottom: 45px;
        /* タブレット時は行間を少し狭める */
      }
    }

    @media (max-width: 600px) {
      .vision-gallery__row {
        margin-bottom: 40px;
        /* スマホ時は行間をさらに調整 */
      }

      .vision-gallery__row-ttl {
        font-size: 18px;
        margin-bottom: 15px;
      }

    }

    /* ── GYM ATMOSPHERE の背景（石の質感を定位置に固定） ── */
    .vision-gallery {
      position: relative;
      /* .vision-bg-sticky の基準 */
      background-color: var(--bg-lightgray);
      /* 画像の平均色。読み込み前・失敗時の保険 */
    }

    /* background-attachment:fixed は iOS Safari が非対応。
       scroll 扱いになるうえ、背景をドキュメント全高に合わせるため cover が極端に拡大される。
       さらにスクロールのたびに再描画が走り、低スペック端末でカクつく。
       → 実ポインタのある環境（PC）に限定。スマホは通常の背景として同じ画像が出るので破綻しない。 */

    /* ── ギャラリー・ライトボックス（スマホでサムネタップ時の全画面表示） ── */
    .vision-atmos-lightbox {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, .6);
      -webkit-tap-highlight-color: transparent;
      padding: 0 20px;
    }

    .vision-atmos-lightbox.is-open {
      display: flex;
    }

    .vision-atmos-lightbox__inner {
      position: relative;
      width: 100vw;
      max-height: 100vh;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }

    .vision-atmos-lightbox__img {
      display: block;
      width: 100vw;
      height: auto;
    }

    .vision-atmos-lightbox__close {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 2001;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      background: rgba(255, 255, 255, .92);
      color: var(--ink-black);
      box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
    }

    .vision-atmos-lightbox__close::before {
      content: "";
      width: 22px;
      height: 22px;
      background:
        linear-gradient(currentColor, currentColor) center/2px 22px no-repeat,
        linear-gradient(currentColor, currentColor) center/22px 2px no-repeat;
      transform: rotate(45deg);
    }

    .vision-atmos-lightbox__cap {
      margin: 0;
      padding: 0 16px;
      color: var(--ink-white);
      font-weight: 900;
      font-size: 1rem;
      letter-spacing: .06em;
      text-align: center;
      text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    }

    @media (min-width:768px) {
      .vision-atmos-lightbox {
        display: none !important;
      }
    }

    /* 画像を囲む枠にもoverflow:hidden（拡大時のはみ出し防止） */
    .vision-cafe .vision-split {
      --_cafe: 1;
    }

    /* Googleマップの枠：iframe/画像が無くても場所を確保（16:12=4:3） */

    /* ギャラリー各行の「タップで拡大 / クリックで拡大」案内（全デバイス共通） */
    .vision-atmos {
      position: relative;
    }

    .vision-atmos__tap-hint {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      position: absolute;
      right: 0;
      top: -6px;
      z-index: 3;
      padding: 5px 12px;
      border-radius: var(--r-chip);
      background: var(--fill-white);
      color: var(--ink-gray);
      font-size: .7rem;
      font-weight: 900;
      letter-spacing: .04em;
      box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
      pointer-events: none;
    }

    /* 拡大アイコン */
    .vision-atmos__tap-hint::before {
      content: "";
      width: 13px;
      height: 13px;
      flex: none;
      background: currentColor;
      -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 4h7v2H6v5H4V4zm16 0v7h-2V6h-5V4h7zM4 13h2v5h5v2H4v-7zm14 5v-5h2v7h-7v-2h5z"/></svg>') center/contain no-repeat;
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 4h7v2H6v5H4V4zm16 0v7h-2V6h-5V4h7zM4 13h2v5h5v2H4v-7zm14 5v-5h2v7h-7v-2h5z"/></svg>') center/contain no-repeat;
    }

    /* デフォルト（PC版）：テキストを表示 */
    .vision-atmos__tap-hint::after {
      content: "クリックで拡大";
    }

    /* スマホ版（767px以下）：テキストを切り替え */
    @media (max-width: 767px) {
      .vision-atmos__tap-hint::after {
        content: "タップで拡大";
      }
    }

    [data-atmos-layer] {
      will-change: transform;
    }

    @media (max-width: 767px) {

      /* 料金プラン：スマホは 1行目=スタンダード / 2行目=エグゼクティブ・法人 */
      .vision-plan__tab:nth-child(1) {
        flex: 1 1 100%;
      }

      .vision-plan__tab:nth-child(2),
      .vision-plan__tab:nth-child(3) {
        flex: 1 1 50%;
      }
    }

    .vision-gallery__row-note {
      margin: 12px 0 0;
      font-size: .76rem;
      line-height: 1.9;
      color: var(--ink-gray);
    }

    /* サムネのホバー拡大（六本松で追加されていたものを共通化） */
    .vision-atmos__thumb {
      transform: scale(1);
      transition: transform .3s ease;
    }

    .vision-atmos__thumb:hover {
      transform: scale(1.02);
    }

    /* ============================================================
       VALUES
       ============================================================ */

    /* ── ④ VISION24が続けられる5つの理由 (案# 詳細スペックとの融合) ── */

    /* ── 1年継続率の比較 ── */
    .vision-values-retention {
      margin: clamp(40px, 5vw, 64px) auto;
      padding: clamp(20px, 3vw, 32px);
      background: var(--bg-lightgray);
      border: 1px solid var(--ink-line);
      border-radius: var(--r);
      max-width: var(--maxw);
    }


    .vision-values-retention__ttl {
      margin: 0 0 16px;
      padding-bottom: 8px;
      font-size: clamp(1.05rem, 2.2vw, 1.25rem);
      font-weight: 900;
      line-height: 1.5;
      border-bottom: 2px solid var(--ink-accent);
    }

    .vision-values-retention__lead {
      margin: 0 0 20px;
      font-size: .92rem;
      font-weight: 500;
      line-height: 1.9;
      color: var(--ink-gray);
    }

    .vision-values-retention__lead strong {
      font-weight: 900;
      color: var(--ink-black);
    }

    /* 自店の数値だけアクセント色で立たせる */
    .vision-values-retention .vision-table-compare td:last-child strong {
      font-size: 1.05rem;
      color: var(--ink-accent);
    }

    .vision-values-retention__note {
      margin: 12px 0 0;
      font-size: .72rem;
      line-height: 1.8;
      color: var(--ink-lightgray);
      text-align: right;
    }

    @media (max-width:767px) {
      .vision-values-retention__note {
        text-align: left;
      }
    }


    /* セクション自体の背景色アニメーション */
    .vision-values {
      transition: background-color 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* 黄色背景の英字ラベルを完全非表示 */
    .vision-values .vision-values__alpha {
      display: none;
    }

    /* 2カラムレイアウト（PC用） */
    .vision-values__container {
      display: flex;
      position: relative;
      align-items: flex-start;
      padding-bottom: 80px;
    }

    /* PC版 左カラム (3割) - sticky固定 */
    .vision-values__container .vision-values__nav {
      width: 30%;
      position: sticky;
      top: 120px;
      height: auto;
      padding-right: 30px;
      z-index: 10;
      opacity: 1;
      pointer-events: auto;
    }

    .vision-values__container .vision-values__nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin: 0;
      padding: 0;
    }

    .vision-values__container .vision-values__nav-item {
      display: flex;
      align-items: center;
      gap: 15px;
      cursor: pointer;
      opacity: 0.35;
      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      text-decoration: none;
      color: var(--ink-black);
    }

    /* PC版 アクティブ状態のスタイル（数字拡大） */
    .vision-values__container .vision-values__nav-item.is-active {
      opacity: 1;
      transform: translateX(10px);
    }

    .vision-values__container .vision-values__nav-num {
      font-family: 'Montserrat', sans-serif;
      font-size: 2.2rem;
      font-weight: 900;
      line-height: 1;
      transition: all 0.4s ease;
      color: var(--ink-black);
    }

    .vision-values__container .vision-values__nav-item.is-active .vision-values__nav-num {
      font-size: 3.5rem;
      color: var(--ink-black);
      text-shadow: 2px 2px 0px var(--fill-yellow);
    }

    .vision-values__container .vision-values__nav-label {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: var(--ink-lightgray);
      white-space: nowrap;
      transition: all 0.4s ease;
    }

    .vision-values__container .vision-values__nav-item.is-active .vision-values__nav-label {
      color: var(--ink-black);
      font-weight: 900;
    }

    /* 右カラム (7割) */
    .vision-values__container .vision-values__content {
      width: 70%;
      padding-left: 20px;
    }

    .vision-values__card {
      margin-bottom: 100px;
      padding-bottom: 50px;
      border-bottom: 2px solid var(--ink-black);
      scroll-margin-top: 120px;
    }

    .vision-values__card:last-child {
      margin-bottom: 0;
      border-bottom: none;
    }

    /* カード内バッジ（PCでは非表示） */
    .vision-values__badge {
      display: none;
    }

    .vision-values__header {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .vision-values__title {
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 1.4;
      color: var(--ink-black);
    }

    .vision-values__img-wrap {
      width: 100%;
      height: 320px;
      margin-bottom: 20px;
      overflow: hidden;
      background-color: var(--fill-gray);
      border: 1px solid var(--ink-line);
      position: relative;
    }

    .vision-values__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .vision-values__desc {
      font-size: 1rem;
      color: var(--ink-gray);
      font-weight: 500;
      line-height: 1.8;
      margin-bottom: 20px;
    }

    .vision-values__point-box {
      background-color: var(--fill-black);
      color: var(--ink-white);
      padding: 8px 20px;
      border-left: 5px solid var(--fill-yellow);
    }

    .vision-values__point-list {
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1.6;
    }

    .vision-values__point-list li {
      list-style: none;
    }

    .vision-values__point-list span {
      color: var(--ink-yellow);
      margin-right: 8px;
    }

    /* ★ スマホ版（767px以下） ★ */
    @media (max-width: 767px) {
      .vision-values__container {
        display: block;
        padding-bottom: 60px;
      }

      /* スマホでは左サイドナビを非表示 */
      .vision-values .vision-values__container .vision-values__nav {
        display: none;
      }

      .vision-values__container .vision-values__content {
        width: 100%;
        padding-left: 0;
      }

      /* スマホのみ枠内に表示されるバッジ */
      .vision-values__badge {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        width: 100%;
      }

      .vision-values__badge-num {
        font-family: 'Montserrat', sans-serif;
        font-size: 2.2rem;
        font-weight: 900;
        line-height: 1;
        color: var(--ink-black);
        text-shadow: 2px 2px 0px var(--fill-yellow);
      }

      .vision-values__badge-label {
        font-family: 'Montserrat', sans-serif;
        font-size: 0.75rem;
        font-weight: 900;
        letter-spacing: 0.05em;
        color: var(--ink-black);
      }

      .vision-values__card {
        margin-bottom: 60px;
        padding-bottom: 40px;
        scroll-margin-top: 80px;
      }

      .vision-values__title {
        font-size: 1.2rem;
      }

      .vision-values__img-wrap {
        height: 200px;
      }

      .vision-values__desc {
        font-size: 0.9rem;
      }

      .vision-values__point-box {
        padding: 8px 8px;
      }
    }
      




    /* ============================================================
       MACHINE
       ============================================================ */

    /* ── ⑥ エリア別マシン ── */
    .vision-machine {
      position: relative;
      /* .vision-bg-sticky の基準 */
      background-color: var(--bg-lightgray);
      /* 画像の平均色。読み込み前・失敗時の保険 */
    }

    .vision-area+.vision-area {
      margin-top: clamp(36px, 5vw, 56px);
      padding-top: clamp(36px, 5vw, 56px);
      border-top: 1px solid var(--ink-line)
    }

    .vision-area__head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 16px;
      margin-bottom: 16px
    }

    .vision-machine__qty {
      font-size: .58rem;
      font-weight: 900;
      color: var(--ink-accent);
      box-shadow: inset 0 0 0 1px var(--ink-accent);
      padding: 1px 7px;
      letter-spacing: .06em;
      flex: 0 0 auto
    }

    /* 4. 英語タイトル */
    .vision-area__en {
      font-family: var(--f-en);
      font-weight: 700;
      font-style: italic;
      font-size: clamp(1.3rem, 3vw, 1.9rem);
      margin: 0;
      line-height: 1.2;
      background: linear-gradient(110deg, var(--fill-black) 35%, var(--fill-white) 50%, var(--fill-black) 65%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      /* infiniteを消して、アニメーションが終わったら最後の状態を維持する forwards を追加 */
      animation: var(--anim-area-en);
    }

    /* 5. アニメーション定義 */
    @keyframes shine-once {

      /* 0% は光る前（右側） */
      0% {
        background-position: 150% 0;
      }
    }

    @keyframes shine-loop {
      0% {
        background-position: 200% 0;
      }

      20%,
      100% {
        background-position: -50% 0;
      }


      /* 80% で光り終わる（左側へ移動完了） */
      80%,
      100% {
        background-position: -20% 0;
      }
    }

    .vision-area__jp {
      background: var(--fill-black);
      color: var(--ink-white);
      font-size: .72rem;
      font-weight: 900;
      border-radius: var(--r-sm);
      padding: 4px 12px
    }

    .vision-area__brand {
      margin-left: auto;
      font-family: var(--f-en);
      font-weight: 700;
      font-size: 1rem;
      border: 2px solid var(--ink-black);
      border-radius: var(--r-sm);
      padding: 3px 12px;
      letter-spacing: .04em
    }

    .vision-area__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(18px, 3vw, 32px);
      align-items: center
    }

    .vision-area__grid .vision-area__img {
      width: 100%;
      height: auto;
      /* HTML属性の height を打ち消す */
      aspect-ratio: 16/10;
      /* .ph と同じ枠比率 */
      object-fit: cover;
      /* 4:3画像を枠に合わせてトリミング */
      border-radius: var(--r);
      display: block;
    }

    .vision-area__txt {
      font-size: .86rem;
      line-height: 2
    }

    /* ── トレッドミル（SPIRIT）詳細 ── */
    .vision-tm {
      margin-top: clamp(24px, 3.5vw, 36px)
    }

    .vision-tm__nums {
      list-style: none;
      padding: 0;
      margin: 0 0 clamp(24px, 3.5vw, 34px);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--fill-gray);
      border: 1px solid var(--ink-line)
    }

    .vision-tm__nums li {
      background: var(--fill-white);
      padding: 18px 12px;
      text-align: center;
      font-size: .62rem;
      font-weight: 700;
      color: var(--ink-gray);
      letter-spacing: .02em
    }

    .vision-tm__nums b {
      display: block;
      font-family: var(--f-dp);
      font-weight: 900;
      font-size: clamp(1.6rem, 3vw, 2.3rem);
      line-height: 1.15;
      letter-spacing: -.04em;
      color: var(--ink-black);
      margin-bottom: .2em
    }

    .vision-tm__nums b span {
      font-family: var(--f-go);
      font-size: .5em;
      font-weight: 900;
      margin-left: .15em;
      letter-spacing: 0
    }

    .vision-tm__heading {
      font-size: clamp(1rem, 2.2vw, 1.25rem);
      margin: 0 0 14px
    }

    .vision-tm__feats {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 1px;
      background: var(--fill-gray);
      border: 1px solid var(--ink-line)
    }

    .vision-tm__feats li {
      background: var(--fill-white);
      padding: 18px 20px
    }

    .vision-tm__feats h4 {
      display: flex;
      align-items: baseline;
      gap: 10px;
      font-size: .92rem;
      margin: 0 0 .4em;
      line-height: 1.5
    }

    .vision-tm__feats p {
      margin: 0;
      font-size: .76rem;
      line-height: 1.95;
      color: var(--ink-gray)
    }

    .vision-tm__more {
      margin-top: 14px;
      border: 1px solid var(--ink-line);
      border-radius: var(--r)
    }

    .vision-tm__more summary {
      cursor: pointer;
      list-style: none;
      position: relative;
      padding: 14px 42px 14px 16px;
      font-size: .78rem;
      font-weight: 900;
      color: var(--ink-black)
    }

    .vision-tm__more summary::-webkit-details-marker {
      display: none
    }

    .vision-tm__more[open] summary {
      border-bottom: 1px solid var(--ink-line)
    }

    .vision-tm__spec {
      margin: 0;
      padding: 14px 16px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px 16px;
      font-size: .74rem;
      line-height: 1.85
    }

    .vision-tm__spec dt {
      font-weight: 900;
      color: var(--ink-sub);
      white-space: nowrap
    }

    .vision-tm__spec dd {
      margin: 0;
      color: var(--ink-gray)
    }

    @media (max-width:767px) {
      .vision-tm__nums {
        grid-template-columns: repeat(2, 1fr)
      }

      .vision-tm__spec {
        grid-template-columns: 1fr;
        gap: 0
      }

      .vision-tm__spec dt {
        margin-top: 10px
      }

      .vision-tm__spec dt:first-child {
        margin-top: 0
      }
    }

    .vision-area .vision-tm__feats-no {
      font-family: var(--f-en);
      font-weight: 700;
      font-style: italic;
      color: var(--ink-sub);
      font-size: 1rem
    }

    .vision-area .vision-tm__more summary .vision-plus {
      position: absolute;
      right: 18px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-right: 2px solid var(--ink-black);
      border-bottom: 2px solid var(--ink-black);
      transform: translateY(-70%) rotate(45deg);
      transition: transform .2s
    }

    .vision-area .vision-tm__more[open] summary .vision-plus {
      transform: translateY(-30%) rotate(-135deg)
    }

    .vision-area .vision-tm__more .vision-table-scroll {
      margin: 14px 16px 16px
    }

    /* flex/grid の子は min-width:auto のため、内部の表の min-width が親を押し広げてしまう */
    .vision-area,
    .vision-area__grid>* {
      min-width: 0
    }

    .vision-machine__count {
      display: block;
      width: fit-content;
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .04em;
      border: 1px solid var(--ink-line);
      padding: 7px 16px;
      margin: 0 auto 6px;
    }

    @media (max-width:767px) {
      .vision-area__grid {
        grid-template-columns: 1fr
      }

      .vision-area__brand {
        margin-left: 0
      }
    }

    /* ── マシン：1機種1枚の写真グリッド ── */
    .vision-machine__grid {
      list-style: none;
      padding: 0;
      margin: 18px 0 0;
      display: flex;
      flex-wrap: nowrap;
      gap: 16px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
      padding-bottom: 14px;
      -webkit-overflow-scrolling: touch
    }

    .vision-machine__grid li {
      flex: 0 0 244px;
      scroll-snap-align: start
    }

    .vision-machine__grid::-webkit-scrollbar {
      height: 6px
    }

    .vision-machine__grid::-webkit-scrollbar-track {
      background: var(--fill-gray);
      border-radius: 99px
    }

    .vision-machine__grid::-webkit-scrollbar-thumb {
      background: var(--fill-sub);
      border-radius: 99px
    }

    .vision-machine__grid {
      scrollbar-width: thin;
      scrollbar-color: var(--ink-sub) var(--ink-line)
    }

    /* マシン画像用スタイル */
    .vision-machine__img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      /* 縦横比1:1(正方形) */
      object-fit: cover;
      /* 縦横比が微妙に違う写真でも引き伸ばさずに綺麗にトリミング */
      border-radius: var(--r);
      /* 元のphと同じ角丸を適用（もしあれば） */
    }

    /* SPは画面端まで流して「まだ続く」ことを示す */
    @media (max-width:767px) {
      .vision-machine__grid {
        margin-inline: calc(var(--pad) * -1);
        padding-inline: var(--pad)
      }

      .vision-machine__grid li {
        flex-basis: 210px
      }
    }

    .vision-machine__grid figure {
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: .76rem;
      font-weight: 700;
      line-height: 1.5
    }

    /* ── マシンカード：名称＋型番＋（アコーディオン）効果のある部位・特徴 ── */
    .vision-machine__group {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 28px 0 12px;
    }

    .vision-machine__group span {
      font-size: .62rem;
      font-weight: 700;
      color: var(--ink-lightgray);
      letter-spacing: .06em
    }

    .vision-machine__group::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--fill-gray)
    }

    .vision-machine__cap {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      text-align: left
    }

    .vision-machine__name {
      font-size: .9rem;
      font-weight: 900;
      line-height: 1.45;
      letter-spacing: -.02em;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap
    }

    .vision-machine__pop {
      font-size: .58rem;
      font-weight: 900;
      background: var(--fill-yellow);
      color: var(--ink-black);
      border-radius: var(--r-sm);
      padding: 1px 7px;
      letter-spacing: .06em;
      flex: 0 0 auto
    }

    .vision-machine__model {
      font-size: .6rem;
      font-weight: 700;
      color: var(--ink-lightgray);
      letter-spacing: .06em
    }

    /* フリーウェイト：3種の重量レンジを示すだけの簡素なリスト */
    .vision-machine__fw-list {
      margin: 16px 0 0;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px 18px;
      font-size: .78rem;
      line-height: 1.8;
      align-items: baseline
    }

    .vision-machine__fw-list dt {
      font-weight: 900;
      white-space: nowrap
    }

    .vision-machine__fw-list dd {
      margin: 0;
      font-weight: 700;
      color: var(--ink-gray)
    }

    .vision-machine__fw-list dd small {
      margin-left: .8em;
      font-size: .78em;
      font-weight: 700;
      color: var(--ink-lightgray);
      letter-spacing: .04em
    }

    @media (max-width:560px) {
      .vision-machine__fw-list {
        grid-template-columns: 1fr;
        gap: 0
      }

      .vision-machine__fw-list dt {
        margin-top: 12px
      }

      .vision-machine__fw-list dt:first-child {
        margin-top: 0
      }
    }

    /* AIO：閉じていても中のテキストはDOMに存在する（display:noneで消していない） */
    .vision-machine__more {
      margin-top: 7px;
      width: 100%
    }

    .vision-machine__more summary::-webkit-details-marker {
      display: none
    }

    .vision-machine__spec {
      margin: 9px 0 0
    }

    .vision-machine__spec dt {
      font-size: .58rem;
      font-weight: 900;
      color: var(--ink-sub);
      letter-spacing: .06em;
      margin-top: 7px
    }

    .vision-machine__spec dt:first-child {
      margin-top: 0
    }

    .vision-machine__spec dd {
      margin: 1px 0 0;
      font-size: .7rem;
      font-weight: 400;
      line-height: 1.75;
      color: var(--ink-gray)
    }

    .vision-machine__more summary {
      cursor: pointer;
      list-style: none;
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 5px 30px 5px 13px;
      border: 1px solid var(--ink-line);
      border-radius: 999px;
      font-size: .62rem;
      font-weight: 900;
      letter-spacing: .08em;
      color: var(--ink-gray);
      transition: .15s
    }

    .vision-machine__more summary:hover {
      border-color: var(--ink-black);
      color: var(--ink-black)
    }

    .vision-machine__more[open] summary {
      border-color: var(--ink-black);
      color: var(--ink-black)
    }

    .vision-machine__more summary .vision-plus {
      position: absolute;
      right: 12px;
      top: 50%;
      width: 6px;
      height: 6px;
      border-right: 2px solid var(--ink-sub);
      border-bottom: 2px solid var(--ink-sub);
      transform: translateY(-70%) rotate(45deg);
      transition: transform .2s
    }

    .vision-machine__more[open] summary .vision-plus {
      transform: translateY(-30%) rotate(-135deg)
    }

    /* ============================================================
       FACILITY
       ============================================================ */

    /* ── 設備：アイコン→写真カード ── */

    /* ── ⑦ FACILITY 3グループ ── */
    .vision-facility {
      background: var(--bg-tint)
    }

    .vision-deck {
      margin-top: clamp(28px, 3.6vw, 48px);
    }

    .vision-deck:first-of-type {
      margin-top: 0;
    }

    .vision-deck__card {
      flex: 0 0 var(--cw);
      border: 1px solid var(--ink-yellow);
    }

    .vision-deck__card--label {
      z-index: 20;
    }

    .vision-deck.is-anim .vision-deck__card:not(.vision-deck__card--label) {
      transform:
        translateX(calc((var(--i) + 1) * (var(--cw) + var(--cg)) * -1)) translateY(-6px) rotate(-2deg) scale(.97);
      opacity: 0;
      z-index: calc(10 - var(--i));
      /* 手前の1枚が上に来るように重ねる */
      transition: transform .68s cubic-bezier(.22, .75, .2, 1), opacity .34s ease;
      transition-delay: calc(var(--i) * 100ms);
      /* 左から1枚ずつ */
    }

    .vision-deck.is-anim.is-dealt .vision-deck__card:not(.vision-deck__card--label) {
      transform: none;
      opacity: 1;
    }

    @media (max-width: 767px) {
      .vision-deck__card {
        scroll-snap-align: start;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .vision-deck.is-anim .vision-deck__card:not(.vision-deck__card--label) {
        transform: none;
        opacity: 1;
      }
    }

    .vision-deck__cards {
      --cw: clamp(112px, 11.4vw, 150px);
      /* カード幅 */
      --cg: clamp(8px, 1vw, 14px);
      /* カード間 */
      list-style: none;
      margin: 0;
      padding: 10px 0 22px;
      display: flex;
      justify-content: center;
      gap: var(--cg);
    }

    .vision-deck__face {
      margin: 0;
      aspect-ratio: 5 / 7;
      /* トランプの比率 */
      background: linear-gradient(to right bottom, var(--fill-sub), var(--fill-black));
      border-radius: var(--r-sm);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .13);
      /* 枠線をやめた分、影で輪郭を出す */
    }

    .vision-deck__face--label {
      background: linear-gradient(to right bottom, var(--fill-sub), var(--fill-black));
      display: grid;
      place-items: center;
      padding: 10px;
      text-align: center;
    }

    .vision-deck__face--label h3 {
      margin: 0;
      font-size: clamp(.86rem, 1.7vw, 1.1rem);
      line-height: 1.4;
      color: var(--ink-accenttint);
    }

    .vision-deck__img {
      position: relative;
      flex: 1;
      border-radius: 0;
    }

    .vision-deck__photo {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 5:7枠にトリミングして収める */
      display: block;
    }

    .vision-deck__img {
      background: var(--fill-gray);
      overflow: hidden;
    }

    .vision-deck__name {
      border-top: 1px solid var(--ink-line);
      padding: 8px 5px;
      text-align: center;
      font-size: .66rem;
      font-weight: 900;
      line-height: 1.35;
      display: grid;
      place-items: center;
      min-height: 3.6em;
      color: var(--ink-accenttint);
    }

    @media (max-width: 767px) {
      .vision-deck__cards {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        margin-inline: calc(var(--pad) * -1);
        padding-inline: var(--pad);
        justify-content: flex-start;
      }

      .vision-deck__cards::-webkit-scrollbar {
        height: 5px
      }

      .vision-deck__cards::-webkit-scrollbar-track {
        background: var(--fill-gray);
        border-radius: 99px
      }

      .vision-deck__cards::-webkit-scrollbar-thumb {
        background: var(--fill-black);
        border-radius: 99px
      }
    }

    /* ============================================================
       VOICE
       ============================================================ */

    /* ── VOICE（会員様の声）：手動スクロール ── */
    .vision-voice {
      background: var(--bg-black);
      color: var(--ink-white);
      overflow: hidden;
    }

    .vision-voice .sec-ttl__jp {
      color: var(--ink-white);
    }

    .vision-voice .sec-ttl__en::after {
      background: var(--ink-yellow);
    }

    .vision-voice-summary {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(10px, 2vw, 18px);
      flex-wrap: wrap;
      margin-top: 18px;
    }

    .vision-voice-summary__score {
      font-family: var(--f-en);
      font-weight: 900;
      font-style: italic;
      font-size: clamp(2rem, 5vw, 2.8rem);
      line-height: 1;
      color: var(--ink-yellow);
    }

    .vision-voice-summary__stars {
      color: var(--ink-yellow);
      font-size: 1rem;
      letter-spacing: .1em;
    }

    .vision-voice-summary__meta {
      font-size: .74rem;
      color: var(--ink-muted);
      line-height: 1.7;
    }

    .vision-voice__track-wrap {
      position: relative;
      margin-top: clamp(22px, 4vw, 34px);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      padding-bottom: 10px;
    }

    .vision-voice__track-wrap::-webkit-scrollbar {
      height: 6px;
    }

    .vision-voice__track-wrap::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, .1);
      border-radius: 999px;
    }

    .vision-voice__track-wrap::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .35);
      border-radius: 999px;
    }

    .vision-voice__track {
      display: flex;
      width: max-content;
      gap: 10px;
      padding-inline: var(--pad);
    }

    .vision-voice-card {
      margin: 0;
      flex: 0 0 auto;
      width: clamp(250px, 74vw, 320px);
      scroll-snap-align: start;
      background: rgba(255, 255, 255, .06);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--r);
      padding: clamp(16px, 2.4vw, 22px);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .vision-voice-card__stars {
      color: var(--ink-yellow);
      font-size: .84rem;
      letter-spacing: .08em;
    }

    .vision-voice-card__text {
      margin: 0;
      font-size: .82rem;
      line-height: 1.9;
      color: var(--ink-white);
    }

    .vision-voice-card__who {
      margin: 0;
      font-size: .72rem;
      font-weight: 900;
      color: var(--ink-muted);
      border-top: 1px solid rgba(255, 255, 255, .16);
      padding-top: 10px;
    }

    .vision-voice__note {
      margin-top: 16px;
      font-size: .68rem;
      color: var(--ink-muted-2);
      text-align: center;
    }

    /* ── 横スクロールできることを一瞬だけ知らせるバッジ ── */
    .vision-scroll-hint {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 30;
      transform: translate(-50%, -50%) scale(.96);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 15px;
      border-radius: 999px;
      background: rgba(12, 12, 12, .55);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
      color: var(--ink-white);
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: .02em;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .4s ease, transform .4s ease;
    }

    .vision-scroll-hint::after {
      content: "";
      width: 14px;
      height: 14px;
      flex: none;
      background: currentColor;
      -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 5l-5 7 5 7v-4h4v-6H7V5zm10 0v4h-4v6h4v4l5-7-5-7z"/></svg>') center/contain no-repeat;
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 5l-5 7 5 7v-4h4v-6H7V5zm10 0v4h-4v6h4v4l5-7-5-7z"/></svg>') center/contain no-repeat;
    }

    .vision-scroll-hint.is-shown {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    /* バッジの基準になる包み（スクロール要素をぴったり囲む） */
    .vision-scroll-hint-wrap {
      position: relative;
    }

    @media (prefers-reduced-motion: reduce) {
      .vision-scroll-hint {
        transition: none;
      }
    }

    /* ギャラリー各行の補足文（見出し → 画像 → テキスト の順） */

    /* 会員様の声：平均評価をクチコミへのリンクに */
    .vision-voice-summary__link {
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      text-decoration: none;
    }

    .vision-voice-summary__link .vision-voice-summary__score {
      color: var(--ink-accenttint);
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-thickness: 2px;
    }

    .vision-voice-summary__link:hover .vision-voice-summary__score {
      text-decoration-thickness: 3px;
    }

    .vision-voice-summary__link:focus-visible {
      outline: 3px solid var(--ink-yellow);
      outline-offset: 4px;
    }

    /* ============================================================
       PRICE
       ============================================================ */

    /* ── ⑧ 料金（タブ切替） ── */
    .vision-plan__tabs {
      display: flex;
      gap: 0;
      flex-wrap: wrap;
      border: 2px solid var(--ink-black);
      border-radius: var(--r);
      overflow: hidden;
      margin: 0 0 22px
    }

    .vision-plan__tab {
      flex: 1 1 180px;
      padding: 14px 12px;
      border: 0;
      background: var(--fill-white);
      font: inherit;
      font-family: var(--f);
      font-weight: 900;
      font-size: .88rem;
      cursor: pointer;
      color: var(--ink-black);
      transition: .15s;
      text-align: center
    }

    .vision-plan__tab+.vision-plan__tab {
      border-left: 2px solid var(--ink-black)
    }

    .vision-plan__tab small {
      display: block;
      font-weight: 700;
      font-size: .68rem;
      color: var(--ink-lightgray);
      margin-top: 2px
    }

    .vision-plan__tab[aria-selected="true"] {
      background: var(--fill-black);
      color: var(--ink-white)
    }

    .vision-plan__tab[aria-selected="true"] small {
      color: var(--ink-yellow)
    }

    .vision-plan__panel[hidden] {
      display: none
    }

    .vision-plan-card {
      background: var(--fill-white);
      border: 1px solid var(--ink-line);
      border-radius: var(--r);
      padding: clamp(22px, 3.5vw, 34px);
      text-align: center
    }

    .vision-plan-card__price {
      font-family: var(--f-en);
      font-weight: 700;
      font-size: clamp(2.6rem, 6vw, 4rem);
      line-height: 1.15;
      margin: 6px 0 4px
    }

    .vision-plan-card__price span {
      font-family: var(--f);
      font-size: .9rem;
      font-weight: 900
    }

    .vision-plan-card__desc {
      font-size: .88rem;
      color: var(--ink-gray);
      margin: 0 0 16px
    }

    .vision-plan-card__feat {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center
    }

    .vision-plan-card__feat li {
      font-size: .76rem;
      font-weight: 700;
      background: var(--fill-tint-2);
      border-radius: var(--r-sm);
      padding: 5px 12px
    }

    .vision-price__note {
      margin: 16px 0 0
    }

    /* FLOW */

    /* ============================================================
       CAFE
       ============================================================ */

    /* ── カフェ／24時間 ── */
    .vision-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(20px, 3.5vw, 40px);
      align-items: center
    }

    .vision-split p {
      font-size: .88rem;
      line-height: 2
    }

    @media (max-width:767px) {
      .vision-split {
        grid-template-columns: 1fr
      }
    }

    .vision-cafe__photo {
      width: 100%;
      height: auto;
      aspect-ratio: 1280 / 661;
      /* 画像に合わせた横長比率 */
      object-fit: cover;
      display: block;
      border-radius: var(--r-lg);
      /* 上品な角丸 */
      background: var(--fill-gray);
      box-shadow: 0 18px 44px rgba(0, 0, 0, .14);
      /* 立体感 */
      transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
    }

    /* ============================================================
       HOURS
       ============================================================ */

    /* ── 24 HOURS 時間帯セクション ── */
    .vision-hours .vision-tz-pc {
      display: none;
    }

    .vision-hours .vision-tz-sp {
      display: none;
    }

    /* PC：5枚まとめ画像を自動で横スクロール */
    @media (min-width: 768px) {
      .vision-hours .vision-tz-pc {
        display: block;
        overflow: hidden;
        margin-top: clamp(20px, 3vw, 36px);
        border-radius: var(--r-lg);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
      }

      .vision-tz-pc__track {
        display: flex;
        width: max-content;
        animation: tz-scroll 40s linear infinite;
      }

      .vision-tz-pc__img {
        display: block;
        height: clamp(180px, 20vw, 280px);
        width: auto;
      }

      @keyframes tz-scroll {
        from {
          transform: translateX(0);
        }

        to {
          transform: translateX(-50%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .vision-tz-pc__track {
          animation: none;
        }
      }
    }

    /* SP：5枚を縦積み・全幅（左右余白0）、マスクで徐々にめくれる */
    @media (max-width: 767px) {
      .vision-hours .vision-tz-sp {
        display: block;
        /* container の左右パディングを打ち消して全画面幅に */
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
      }

      .vision-tz-sp__item {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .vision-tz-sp__item img {
        display: block;
        width: 100%;
        height: auto;
      }

      /* 基本設定：奇数列（1, 3, 5枚目...）は「左から右へ」 */
      .vision-tz-sp__item[data-tz-reveal] {
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 100%);
        -webkit-mask-size: 0% 100%;
        mask-size: 0% 100%;
        -cafe-webkit-mask-repeat: no-repeat;
        -webkit-mask-position: left;
        mask-position: left;
        transition: -webkit-mask-size 2s cubic-bezier(.2, .7, .2, 1), mask-size 2s cubic-bezier(.2, .7, .2, 1);
      }

      /* 偶数列（2, 4枚目...）は「右から左へ」 */
      .vision-tz-sp__item[data-tz-reveal]:nth-child(even) {
        -webkit-mask-position: right;
        mask-position: right;
      }

      /* 表示状態（全列共通） */
      .vision-tz-sp__item[data-tz-reveal].is-revealed {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
      }

      @media (prefers-reduced-motion: reduce) {
        .vision-tz-sp__item[data-tz-reveal] {
          -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
          transition: none;
        }
      }
    }

    /* SEO/AIO用テキスト：視覚的には隠すが、検索エンジン・AI・スクリーンリーダーには読ませる */
    .vision-tz-a11y {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* ============================================================
       TWO-LOCATIONS
       ============================================================ */

    /* ── 2 LOCATIONS ── */
    .vision-two {
      background: var(--bg-tint);
      /* メリットカードが上下左右に飛び出すため、パディングで余白をしっかり確保 */
      padding: 80px 0 140px;
      overflow: hidden;
    }

    /* 1段目：店舗カード（2列横並び・ずらし0） */
    .vision-two__stores {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(24px, 4vw, 48px);
      margin-top: clamp(36px, 5vw, 48px);
    }

    .vision-two-basic__store {
      position: relative;
      overflow: hidden;
      min-height: 300px;
      background: var(--fill-white);
      border: none;
      border-radius: var(--r-lg);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    }

    .vision-two-basic__bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform 0.6s ease;
      z-index: 1;
    }

    .vision-two-basic__store:hover .vision-two-basic__bg {
      transform: scale(1.05);
    }

    .vision-two-basic__bg--hirao {
      background-image: url("/wp-content/themes/my-custom-theme/assets/images/24h/common/two-locations-hirao.webp");
    }

    .vision-two-basic__bg--ropponmatsu {
      background-image: url("/wp-content/themes/my-custom-theme/assets/images/24h/common/two-locations-ropponmatsu.webp");
    }

    .vision-two-basic__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.4) 0%,
          rgba(255, 255, 255, 0.9) 60%,
          rgba(255, 255, 255, 0.4) 100%);
    }

    .vision-two-basic__content {
      position: relative;
      z-index: 2;
      padding: clamp(24px, 3.5vw, 36px);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .vision-two-basic__tag {
      display: inline-block;
      font-size: 0.68rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      color: var(--ink-sub);
      margin-bottom: 8px;
    }

    .vision-two-basic__store h3 {
      margin: 0 0 4px;
      font-size: 1.35rem;
      letter-spacing: 0.02em;
    }

    .vision-two-basic__ac {
      margin: 0 0 14px;
      font-size: .78rem;
      font-weight: 800;
      color: var(--ink-sub);
    }

    .vision-two-basic__store p {
      margin: 0;
      font-size: .86rem;
      line-height: 1.85;
      color: var(--ink-gray);
    }

    .vision-two-basic__link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 20px;
      align-self: flex-start;
      padding: 10px 20px;
      background: var(--fill-white);
      border: 1px solid var(--ink-sub);
      color: var(--ink-black);
      border-radius: var(--r);
      font-size: 0.82rem;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .vision-two-basic__link:hover {
      background: var(--fill-yellow);
      border: 1px solid var(--ink-yellow);
    }

    /* ── 2段目：巨大マップ ＋ 重ね配置コンテナ ── */
    .vision-two-map {
      position: relative;
      max-width: 760px;
      /* メリット1が上に飛び出す分の余白 */
      margin: 100px auto 60px;
    }

    .vision-two-map__img img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* メリットカード共通スタイル */
    .vision-merit-card {
      position: absolute;
      z-index: 3;
      width: clamp(260px, 32vw, 320px);
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(8px);
      padding: 18px 20px;
      border-radius: var(--r-lg);
      border: 1px solid var(--ink-line);
      border-left: 4px solid var(--ink-sub);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .vision-merit-card__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      background: var(--fill-sub);
      color: var(--ink-white);
      font-size: 0.72rem;
      font-weight: bold;
      border-radius: 50%;
      margin-top: 2px;
    }

    .vision-merit-card p {
      margin: 0;
      font-size: 0.82rem;
      line-height: 1.6;
      color: var(--ink-gray);
      font-weight: 500;
    }

    /* ── 位置のミリ単位指定（PC） ── */

    /* メリット1:
       - Y軸中央がマップ右上（マップ上端 0%）
       - X軸左端がマップX軸中央（50%） */
    .vision-merit-card--1 {
      top: 0;
      left: 60%;
      transform: translate(0, -50%);
    }

    /* メリット2:
       - Y軸上側がマップY軸中央（50%）
       - X軸中央がマップX軸左端（0%） */
    .vision-merit-card--2 {
      top: 80%;
      left: 10%;
      transform: translate(-50%, -110%);
    }

    /* メリット3:
       - Y軸中央がマップY軸下側（100%）
       - X軸中央がマップX軸右端（100%） */
    .vision-merit-card--3 {
      top: 90%;
      left: 90%;
      transform: translate(-50%, -100%);
    }

    /* ── スマホ（SP）の表示調整 ── */
    @media (max-width: 767px) {
      .vision-two {
        padding: 80px 0 40px;
        overflow: hidden;
      }

      .vision-two__stores {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .vision-two-basic__store--hirao {
        margin-right: calc(50% - 50vw);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
      }

      .vision-two-basic__store--ropponmatsu {
        margin-left: calc(50% - 50vw);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
      }

      /* スマホでは画面外へのはみ出しを防ぐため縦並びに復元 */
      .vision-two-map {
        margin-top: 40px;
      }

      .vision-merit-card {
        position: relative;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100%;
        margin-top: 16px;
      }
    }

    /* ============================================================
       TRAINERS
       ============================================================ */

    /* ── ④ トレーナー（監修者ブロックの型） ── */

    /* ── トレーナー：得意分野バンド（プロフィールはパーソナルのページへ委譲） ── */
    .vision-field-band {
      border: 1px solid var(--ink-line);
      border-radius: var(--r);
      padding: clamp(22px, 3.5vw, 36px);
      text-align: center;
      max-width: 860px;
      margin-inline: auto
    }

    .vision-field-band__lead {
      font-size: 1rem;
      font-weight: 900;
      margin: 0 0 16px
    }

    .vision-trainers__fields {
      list-style: none;
      padding: 0;
      margin: 0 0 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center
    }

    .vision-trainers__fields li {
      font-size: .78rem;
      font-weight: 900;
      background: var(--fill-black);
      color: var(--ink-yellow);
      border-radius: var(--r-sm);
      padding: 6px 14px
    }

    .vision-field-band__txt {
      font-size: .86rem;
      line-height: 2;
      margin: 0 0 10px;
      text-align: left
    }

    .vision-field-band .note {
      text-align: left
    }

    /* ============================================================
       ORIENTATION
       ============================================================ */

    /* ── オリエン ── */
    .vision-orient {
      background: var(--bg-tint);
      border-block: 1px solid var(--ink-line)
    }

    .vision-flow {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      counter-reset: f
    }

    .vision-flow li {
      position: relative;
      border: 1px solid var(--ink-line);
      border-radius: var(--r);
      padding: 40px 20px 32px;
      text-align: center
    }

    .vision-flow li::before {
      counter-increment: f;
      content: "STEP 0" counter(f);
      position: absolute;
      top: -11px;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--f-en);
      font-weight: 700;
      font-size: .74rem;
      letter-spacing: .08em;
      background: var(--fill-black);
      color: var(--ink-yellow);
      padding: 3px 12px;
      border-radius: var(--r-sm);
      white-space: nowrap
    }

    .vision-flow h3 {
      font-size: 1rem;
      margin: 0 0 .3em
    }

    .vision-flow p {
      margin: 0;
      font-size: .78rem;
      color: var(--ink-gray);
      line-height: 1.8
    }

    @media (max-width:767px) {
      .vision-flow {
        grid-template-columns: 1fr
      }
    }

    /* ============================================================
       APP
       ============================================================ */

    /* ── APP：スクロール連動（左のスマホ固定＋右のテキスト） ──────── */
    .vision-app-sync {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: clamp(24px, 4vw, 60px);
      position: relative
    }

    .vision-app-sync__phone {
      position: sticky;
      top: calc(var(--topbar) + 12vh);
      height: 76vh;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .vision-phone__frame {
      width: min(272px, 100%);
      aspect-ratio: 9/19;
      background: linear-gradient(to right bottom, var(--fill-phone), var(--ink-accent));
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 36px;
      padding: 10px;
      box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .6)
    }

    .vision-phone__screen {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 27px;
      overflow: hidden;
      background: var(--fill-phone-screen)
    }

    .vision-phone__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity .45s ease;
      z-index: 1;
      border-radius: 0;
      border: 0
    }

    .vision-phone__img.is-on {
      opacity: 1;
      z-index: 2
    }

    /* 実画像が入るまでの間、どの画面か分かるように番号を大きく出す */

    /* 最後の項目を読んでいる間もスマホを画面に残すため、下に余白を足す。
       これが無いと、コンテナが終わった時点で sticky が解放され、
       4つ目のテキストを読んでいる最中にスマホがヘッダーの裏へ抜けてしまう。
       必要量＝スマホ枠の下端(top+高さ) − 最後の項目が検知帯に来たときの下端。 */
    .vision-app__steps {
      list-style: none;
      margin: 0;
      padding: 0 0 25vh
    }

    .vision-app__step {
      min-height: 62vh;
      display: flex;
      gap: clamp(14px, 2vw, 22px);
      padding-block: clamp(28px, 5vh, 56px);
      align-items: center
    }

    .vision-app__step-num {
      flex: 0 0 auto;
      font-family: var(--f-en);
      font-weight: 700;
      font-style: italic;
      font-size: clamp(1.6rem, 3.4vw, 2.4rem);
      line-height: 1;
      color: var(--ink-yellow)
    }

    .vision-app__step-text h3 {
      color: var(--ink-white);
      font-size: clamp(1.05rem, 2.2vw, 1.35rem);
      margin: 0 0 .5em;
      line-height: 1.5
    }

    .vision-app__step-text p {
      margin: 0;
      font-size: .84rem;
      line-height: 1.95;
      color: rgba(255, 255, 255, .72)
    }

    /* JSが有効なときだけ「読んでいない項目を薄く」する */
    .vision-app-sync--ready .vision-app__step {
      opacity: .32;
      transition: opacity .4s ease
    }

    .vision-app-sync--ready .vision-app__step.is-on {
      opacity: 1
    }

    /* 899px以下：連動を解除。スマホ枠の中に全4画面を縦に積み、その下にテキストを並べる。
       （sticky連動はスクロール量が要るので、狭い画面では逆に使いづらい。
         全画面を最初から見せて、説明を下に読ませる形にする） */
    /* タブ（SPのみ表示）。PCでは連動があるので不要 */
    .vision-phone__tabs {
      display: none
    }

    @media (max-width:899px) {
      .vision-app-sync {
        grid-template-columns: 1fr;
        gap: 24px
      }

      .vision-app-sync__phone {
        position: static;
        height: auto;
        margin-bottom: 4px;
        display: block
      }

      .vision-app__steps {
        padding: 0;
      }

      /* スマホ枠を小さく。幅を絞れば aspect-ratio:9/19 で高さも決まる。
         枠の高さを .vision-phone__screen が 100% で受けられるよう、枠自体は PC の指定
         （aspect-ratio:9/19）をそのまま活かし、SPでは幅だけ 190px に絞る。 */
      .vision-phone__frame {
        width: 190px;
        margin-inline: auto
      }

      /* 画面は重ねたまま（PCと同じ切り替え）。タブで選んだ1枚だけ見せる */
      .vision-app__step {
        min-height: 0;
        padding-block: 14px;
        opacity: 1
      }

      .vision-app-sync--ready .vision-app__step {
        opacity: 1
      }

      /* タブUI */
      .vision-phone__tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        list-style: none;
        margin: 16px 0 0;
        padding: 0
      }

      .vision-phone__tab {
        font: inherit;
        cursor: pointer;
        font-size: .72rem;
        font-weight: 900;
        color: rgba(255, 255, 255, .7);
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 999px;
        padding: 8px 14px;
        transition: background .2s, color .2s, border-color .2s
      }

      .vision-phone__tab.is-on {
        background: var(--fill-yellow);
        color: var(--ink-black);
        border-color: var(--ink-yellow)
      }

      .vision-phone__tab:focus-visible {
        outline: 2px solid var(--ink-yellow);
        outline-offset: 2px
      }
    }

    /* 動きを減らす設定の人には薄くしない */
    @media (prefers-reduced-motion:reduce) {
      .vision-app-sync--ready .vision-app__step {
        opacity: 1
      }
    }

    /* ── 専用アプリ ── */
    .vision-app {
      background: var(--bg-black)
    }

    /* ============================================================
       LOCATION
       ============================================================ */

    /* ── ⑩ LOCATION ── */
    .vision-location {
      background: var(--bg-tint);
    }

    .vision-location__grid {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: var(--gap);
      align-items: stretch;
    }

    .vision-location__table {
      width: 100%;
      border-collapse: collapse;
      background: var(--fill-white);
      border: 1px solid var(--ink-line);
      border-radius: var(--r);
      overflow: hidden;
    }

    .vision-location__table th,
    .vision-location__table td {
      padding: 14px 16px;
      text-align: left;
      border-bottom: 1px solid var(--ink-line);
      vertical-align: middle;
    }

    .vision-location__table td {
      font-size: .84rem;
    }

    .vision-location__table th {
      width: 96px;
      background: var(--fill-black);
      color: var(--ink-white);
      font-size: .74rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .vision-location__table tr:last-child th,
    .vision-location__table tr:last-child td {
      border-bottom: 0;
    }

    /* ↓ マップの埋め込みスタイル追加 ↓ */
    .vision-location__map {
      width: 100%;
      border: 1px solid var(--ink-line);
      border-radius: var(--r);
      background: var(--fill-white);
      height: 100%;
      min-height: 260px;
      display: block;
    }

    @media (max-width: 767px) {
      .vision-location__grid {
        grid-template-columns: 1fr;
      }
    }

    /* ============================================================
       FAQ
       ============================================================ */

    /* ── ⑪ FAQ（カテゴリ分け） ── */
    .vision-faq__cat+.vision-faq__cat {
      margin-top: 32px
    }

    .vision-faq__cat-ttl {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: .95rem;
      margin: 0 0 12px
    }

    .vision-faq__cat-ttl::before {
      content: "";
      width: 5px;
      height: 20px;
      background: var(--fill-sub)
    }

    .vision-faq__item {
      border: 1px solid var(--ink-line);
      border-radius: var(--r);
      margin-bottom: 8px;
      background: var(--fill-white)
    }

    .vision-faq__item summary {
      cursor: pointer;
      padding: 16px 44px 16px 42px;
      font-weight: 900;
      list-style: none;
      position: relative;
      font-size: .88rem;
      line-height: 1.7
    }

    .vision-faq__item summary::-webkit-details-marker {
      display: none
    }

    .vision-faq__item summary::before {
      content: "Q";
      position: absolute;
      left: 16px;
      top: 15px;
      font-family: var(--f-en);
      font-weight: 700;
      font-size: .95rem;
      color: var(--ink-accent)
    }

    .vision-faq__item summary::after {
      content: "";
      position: absolute;
      right: 18px;
      top: 50%;
      width: 9px;
      height: 9px;
      border-right: 2px solid var(--ink-black);
      border-bottom: 2px solid var(--ink-black);
      transform: translateY(-70%) rotate(45deg);
      transition: transform .2s
    }

    .vision-faq__item[open] summary::after {
      transform: translateY(-30%) rotate(-135deg)
    }

    .vision-faq__item[open] summary {
      border-bottom: 1px solid var(--ink-line)
    }

    .vision-faq__item .vision-faq__answer {
      padding: 14px 18px 18px 42px;
      font-size: .82rem;
      line-height: 1.95;
      color: var(--ink-gray);
      position: relative
    }

    .vision-faq__item .vision-faq__answer::before {
      content: "A";
      position: absolute;
      left: 16px;
      top: 12px;
      font-family: var(--f-en);
      font-weight: 700;
      font-size: .95rem;
      color: var(--ink-sub)
    }

    /* ============================================================
       CTA
       ============================================================ */

    /* ══ ② 反復CTAストリップ ══ */
    .vision-cta-strip {
      background: var(--fill-black);
      padding-block: clamp(42px, 6vw, 66px)
    }

    .vision-cta-strip__inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 20px 32px;
      align-items: center
    }

    .vision-cta-strip__img {
      grid-column: 1 / -1;
      width: 100%;
      display: block
    }

    .vision-cta-strip__img img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px
    }

    .vision-cta-strip__ttl {
      color: var(--ink-white);
      font-size: clamp(1.1rem, 2.4vw, 1.5rem);
      margin: 0 0 6px;
      line-height: 1.5
    }

    .vision-cta-strip__ttl em {
      font-style: normal;
      color: var(--ink-yellow)
    }

    .vision-cta-strip__note {
      color: rgba(255, 255, 255, .6);
      font-size: .74rem;
      margin: 0
    }

    .vision-cta-strip__btns {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 280px
    }

    @media (max-width:767px) {
      .vision-cta-strip__inner {
        grid-template-columns: 1fr
      }

      .vision-cta-strip__btns {
        min-width: 0
      }
    }









    /* ── CONTACT ── */
    .vision-contact {
      background: var(--bg-tint)
    }

    .vision-contact .container {
      max-width: 820px
    }

    .vision-rsv__tabs {
      display: flex;
      gap: 0;
      margin: 0 0 0;
      flex-wrap: wrap;
      border: 2px solid var(--ink-black);
      border-bottom: 0;
      border-radius: var(--r) var(--r) 0 0;
      overflow: hidden
    }

    .vision-rsv__tab {
      flex: 1 1 200px;
      padding: 15px 14px;
      border: 0;
      background: var(--fill-white);
      font: inherit;
      font-family: var(--f);
      font-weight: 900;
      font-size: .88rem;
      cursor: pointer;
      text-align: center;
      color: var(--ink-black);
      transition: .15s
    }

    .vision-rsv__tab+.vision-rsv__tab {
      border-left: 2px solid var(--ink-black)
    }

    .vision-rsv__tab small {
      display: block;
      font-weight: 700;
      font-size: .68rem;
      color: var(--ink-lightgray);
      margin-top: 2px
    }

    .vision-rsv__tab[aria-selected="true"] {
      background: var(--fill-black);
      color: var(--ink-white)
    }

    .vision-rsv__tab[aria-selected="true"] small {
      color: var(--ink-yellow)
    }

    .vision-rsv__panel[hidden] {
      display: none
    }

    .vision-form {
      display: grid;
      gap: 15px;
      background: var(--fill-white);
      border: 2px solid var(--ink-black);
      border-radius: 0 0 var(--r) var(--r);
      padding: clamp(20px, 3vw, 32px)
    }

    .vision-form label {
      display: grid;
      gap: 7px;
      font-weight: 900;
      font-size: .8rem
    }

    .vision-form input,
    .vision-form select,
    .vision-form textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid var(--ink-line);
      border-radius: var(--r-sm);
      font: inherit;
      font-size: .9rem;
      background: var(--fill-white)
    }

    .vision-form input:focus,
    .vision-form select:focus,
    .vision-form textarea:focus {
      border-color: var(--ink-accent);
      outline: none;
      box-shadow: 0 0 0 3px var(--ink-accenttint)
    }

    .vision-form textarea {
      min-height: 110px;
      resize: vertical
    }

    .vision-form .vision-form__agree {
      display: flex;
      gap: 9px;
      align-items: center;
      font-size: .84rem
    }

    .vision-form .vision-form__agree input {
      width: auto
    }

    .vision-form--cf7 .wpcf7 {
      width: 100%
    }

    .vision-form--cf7 .common-form-submit-wrap {
      margin-top: 24px
    }

    .vision-rsv-embed {
      position: relative;
      width: 100%;
      min-height: 720px;
      border: 2px solid var(--ink-black);
      border-radius: 0 0 var(--r) var(--r);
      overflow: hidden;
      background: var(--fill-white)
    }

    .vision-rsv-embed iframe {
      width: 100%;
      height: 720px;
      border: 0;
      display: block
    }

    .vision-rsv-embed__note {
      font-size: .76rem;
      color: var(--ink-lightgray);
      margin-top: 10px
    }

    .vision-contact__tel {
      margin-top: 22px;
      text-align: center;
      font-size: .84rem;
      font-weight: 700
    }

    .vision-contact__tel a {
      color: var(--ink-black);
      font-family: var(--f-en);
      font-weight: 700;
      font-size: 1.6rem;
      text-decoration: none;
      letter-spacing: .02em;
      vertical-align: -2px
    }