/* VISION24 | lp-sections.css — 店舗LP同士の共有セクション
 *
 * common.css（汎用部品・将来TOP一体化）とは分ける。
 * 読み順: tokens → base → common → ★ここ → header-footer → theme → ページ固有
 *
 * 現状: vision-values / vision-flow / vision-location / vision-faq / vision-contact
 * 今後: app / two-locations / cafe 等を 24h.css から移す
 */

    /* 英語見出しのマスク表示：左から右へクリップで出す
       旧名 .reveal-up__inner（下からスライド）は使わない。
       本番 24h/common.css の旧定義は、pattern 差し替え時にこのルールへ寄せる。 */
    .reveal-ltr__inner {
      display: inline-block;
    }
    .js .reveal-ltr__inner {
      -webkit-clip-path: inset(0 100% 0 0);
      clip-path: inset(0 100% 0 0);
    }
    .js .sec-ttl.is-revealed .reveal-ltr__inner {
      -webkit-clip-path: inset(0 0 0 0);
      clip-path: inset(0 0 0 0);
      transition: clip-path 1.6s cubic-bezier(.45, 0, .15, 1), -webkit-clip-path 1.6s cubic-bezier(.45, 0, .15, 1);
    }
    @media (prefers-reduced-motion: reduce) {
      .js .reveal-ltr__inner {
        -webkit-clip-path: none;
        clip-path: none;
      }
    }

    /* ============================================================
       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: var(--f-en);
      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: var(--f-en);
      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: var(--f-en);
        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: var(--f-en);
        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;
      }
    }

    .vision-values__note {
      margin: 0;
      font-size: .72rem;
      line-height: 1.8;
      color: var(--ink-lightgray);
    }

    .vision-values__note a {
      color: inherit;
      text-decoration: underline;
    }

    .vision-values__desc + .vision-values__desc {
      margin-top: -8px;
    }

    /* ============================================================
       FLOW（24h.css と同型。トップは 4 列を top.css で上書き）
       ============================================================ */

    .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;
      color: var(--ink-black);
    }

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

    .vision-flow a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }

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

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

    /* ── ⑩ LOCATION ── */
    .vision-location {
      background: var(--bg-tint, #FFF8B9);
      color: var(--ink-black);
    }

    .vision-location__store + .vision-location__store {
      margin-top: 48px;
    }

    .vision-location__store-ttl {
      margin: 0 0 16px;
      font-size: 1.05rem;
      font-weight: 900;
      line-height: 1.4;
    }

    .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;
      color: var(--ink-black)
    }

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

    /* カテゴリ大枠アコーディオン（パーソナルと同形） */
    .vision-faq__cat-fold {
      margin: 0;
      border: 0
    }

    .vision-faq__cat-fold > .vision-faq__cat-ttl {
      margin: 0;
      padding: 14px 36px 14px 0;
      font-weight: 900;
      list-style: none;
      cursor: pointer;
      position: relative
    }

    .vision-faq__cat-fold > .vision-faq__cat-ttl::-webkit-details-marker {
      display: none
    }

    .vision-faq__cat-fold > .vision-faq__cat-ttl::marker {
      content: ""
    }

    .vision-faq__cat-fold > .vision-faq__cat-ttl::after {
      content: "";
      position: absolute;
      right: 10px;
      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 ease
    }

    .vision-faq__cat-fold[open] > .vision-faq__cat-ttl {
      margin-bottom: 12px
    }

    .vision-faq__cat-fold[open] > .vision-faq__cat-ttl::after {
      transform: translateY(-30%) rotate(-135deg)
    }

    .vision-faq__cat-body {
      padding-bottom: 4px
    }

    .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;
      color: var(--ink-black)
    }

    .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)
    }


    /* FAQ 面（24h では他セクションと一括指定だった分） */
    .vision-faq {
      background: var(--bg-white);
      color: var(--ink-black);
    }

    /* 本文の style="max-width:900px" より優先して他セクションと同じ幅に揃える */
    .vision-faq > .container {
      max-width: var(--maxw) !important;
    }

    /* ── CONTACT ── */
    .vision-contact {
      background: var(--bg-tint, #FFF8B9);
      color: var(--ink-black)
    }

    .vision-contact__lead {
      margin: 0 0 24px;
      text-align: center;
      font-size: .88rem;
      line-height: 1.8;
      color: var(--ink-gray)
    }

    .vision-contact .container {
      max-width: var(--maxw);
    }

    .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-rsv__panel {
      margin: 0
    }

    .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: 1500px;
      border: 2px solid var(--ink-black);
      border-radius: 0 0 var(--r) var(--r);
      overflow: visible;
      background: var(--fill-white)
    }

    .vision-rsv-embed iframe {
      width: 100%;
      min-height: 1500px;
      border: 0;
      display: block;
      overflow: hidden
    }

    .vision-rsv-embed__note a[href*="hacomono.jp"] {
      display: none
    }

    .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
    }

    .no-js .vision-rsv__tabs { display: none }
    .no-js .vision-rsv__panel[hidden] { display: block }