/* VISION24 | base.css */
/* VISION24 | base.css — リセット / 素の要素 / 共通トークン
       全ページで最初に読む。ここに個別ページの都合を持ち込まないこと */

    /* ══════════════════════════════════════════════════════════
       共通トークン（全店舗で同一 / common.css へ切り出す部分）
       ══════════════════════════════════════════════════════════ */
    :root {
      color-scheme: only light;

      /* 背景（セクションの地） */
      --bg-black:     #0C0C0C;   /* FV・アプリ */
      --bg-white:     #FAFAFA;   /* 比較表・カフェ・24時間・トレーナー・料金・FAQ・body */
      --bg-lightgray: #F0F0F0;   /* ギャラリー・マシン（sticky背景の下地） */

      /* 面（コンポーネントの塗り） */
      --fill-white:       #FFFFFF;  /* カード・表・タブ・フォーム */
      --fill-yellow:      #FEE801;  /* VISION24ブランド色。プライマリボタン・リボン
                                       白との比は1.25:1のため、白地の文字・細線には使わない */
      --fill-yellow-deep: #E5D000;  /* ボタンホバーの枠線 */
      --fill-black:       #0C0C0C;  /* CTA帯・選択中タブ・動画エリア */
      --fill-gray:        #E0E0E0;  /* 画像プレースホルダー */
      --fill-phone:         #333333;  /* APP スマホ枠のグラデ起点 */
      --fill-phone-screen:  #151515;  /* APP スマホ画面の地 */

      /* 文字・線 */
      --ink-black:     #0C0C0C;
      --ink-white:     #FFFFFF;
      --ink-gray:      #5A5A5A;
      --ink-lightgray: #6F6F6F;
      --ink-muted:     #B9B9B9;  /* 暗背景上の補助文字（VOICE meta 等） */
      --ink-muted-2:   #9A9A9A;  /* 暗背景上の注釈 */
      --ink-yellow:    #FEE801;
      --ink-line:      #E0E0E0;

      /* レイアウト・書体 */
      --maxw:   1100px;
      --pad:    20px;
      --gap:    20px;
      --topbar: 52px;
      --f:    Roboto, "Noto Sans JP", system-ui, sans-serif;
      --f-en: Roboto, "Noto Sans JP", system-ui, sans-serif;
      /* 数値ディスプレイ / 単位（未定義だった旧トークンを既存書体へ） */
      --f-dp: var(--f-en);
      --f-go: var(--f);
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      font-family: var(--f);
      color: var(--ink-black);
      background: var(--bg-white);
      line-height: 1.9;
      font-weight: 400;
      font-size: 15px;
      -webkit-text-size-adjust: 100%;
      overflow-x: hidden
    }

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

    a {
      color: var(--ink-accent)
    }

    :focus-visible {
      outline: 3px solid var(--ink-accent);
      outline-offset: 2px
    }
    @media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto
      }
    }

    .container {
      max-width: var(--maxw);
      margin-inline: auto;
      padding-inline: var(--pad)
    }

    section {
      padding-block: clamp(66px, 9vw, 114px)
    }

    p {
      margin: 0 0 1em
    }

    .note {
      color: var(--ink-lightgray);
      font-size: .76rem;
      line-height: 1.75
    }

    small {
      font-size: .78rem
    }

    [id] {
      scroll-margin-top: calc(var(--topbar) + 74px)
    }
    @media (max-width:767px) {
    :root {
        --topbar: 44px
      }
    }

    @media (max-width:767px) {
    body {
        padding-bottom: 70px
      }
    }

    .vh {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0
    }