@charset "UTF-8";

/* ボタン共通部品 vision-btn（2026-10-31〜。本文は 24h・パーソナルで使用。ヘッダー・キャンペーン・下部バナーは全ページ。tokens.css と一緒に全ページで読み込む）
   --cv   : CV（予約）。黄色の面＋濃グレーの影。枠線なし
            ホバーで面の色が変わって少し浮き（影が伸びる）、押している間（:active）は影の位置まで沈む
            ホバーはマウスのある端末だけ（@media (hover: hover)）。スマホでタップ後に浮いたまま残らないように
   --sub  : 電話など CV の二次導線。薄グレーの面＋影
   --link : 他ページへ。トップの .vision-chapter__cta と同じ見た目（濃グレー＋黄色の矢印ボックス）
   --on-dark : 黒地の上に置くとき */
.vision-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  padding: 0 22px;
  border: 0;
  border-radius: 4px;
  font-family: var(--f);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .2s, transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s cubic-bezier(.2, .7, .3, 1)
}
.vision-btn--block {
  width: 100%
}
.vision-btn__label {
  letter-spacing: .06em
}
.vision-btn__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform .25s ease
}
@media (hover: hover) {
  .vision-btn:hover .vision-btn__icon {
    transform: translateX(4px)
  }
}
.vision-btn:focus-visible {
  outline: 3px solid var(--ink-accent, #1a1a1a);
  outline-offset: 3px
}

.vision-btn--cv {
  min-height: 64px;
  background: #FEE801;
  color: var(--ink-black, #1a1a1a);
  font-size: 15px;
  box-shadow: 4px 4px 0 rgba(58, 57, 54, .35)
}
@media (hover: hover) {
  .vision-btn--cv:hover {
    background: #FFD900;
    color: var(--ink-black, #1a1a1a);
    transform: translateY(-2px);
    box-shadow: 4px 6px 0 rgba(58, 57, 54, .35)
  }
}
.vision-btn--cv.vision-btn--on-dark {
  box-shadow: 4px 4px 0 rgba(107, 106, 102, .5)
}
@media (hover: hover) {
  .vision-btn--cv.vision-btn--on-dark:hover {
    box-shadow: 4px 6px 0 rgba(107, 106, 102, .5)
  }
}
.vision-btn--cv:active,
.vision-btn--cv.vision-btn--on-dark:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 transparent
}

.vision-btn--sub {
  min-height: 52px;
  background: #F2F2F0;
  color: var(--ink-black, #1a1a1a);
  font-size: 14px;
  box-shadow: 3px 3px 0 rgba(58, 57, 54, .35)
}
@media (hover: hover) {
  .vision-btn--sub:hover {
    background: #E4E4E1;
    color: var(--ink-black, #1a1a1a);
    transform: translateY(-2px);
    box-shadow: 3px 5px 0 rgba(58, 57, 54, .35)
  }
}
.vision-btn--sub.vision-btn--on-dark {
  background: #2A2C31;
  color: #FFFFFF;
  box-shadow: 3px 3px 0 rgba(107, 106, 102, .5)
}
@media (hover: hover) {
  .vision-btn--sub.vision-btn--on-dark:hover {
    background: #3A3D44;
    color: #FFFFFF;
    box-shadow: 3px 5px 0 rgba(107, 106, 102, .5)
  }
}
.vision-btn--sub:active,
.vision-btn--sub.vision-btn--on-dark:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 transparent
}

.vision-btn--link {
  display: inline-flex;
  width: min(100%, 340px);
  padding: 8px 8px 8px 20px;
  border-radius: 10px;
  background: #3A3936;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s cubic-bezier(.2, .7, .3, 1)
}
@media (hover: hover) {
  .vision-btn--link:hover,
  .vision-btn--link:focus-visible {
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18)
  }
}
.vision-btn__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left
}
.vision-btn__en {
  font-family: var(--f-en);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .24em;
  color: #FEE801
}
.vision-btn__ja {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4
}
.vision-btn__box {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #FEE801;
  color: #3A3936
}
@media (hover: hover) {
  .vision-btn--link:hover .vision-btn__icon {
    transform: none
  }
}

/* 置き場所ごとの配置 */
.vision-two-basic__btn {
  align-self: flex-start;
  margin-top: 20px
}
.btn-row .vision-btn--link {
  width: auto;
  max-width: 100%
}

.vision-price__cta .vision-btn--cv {
  width: min(100%, 400px);
  margin-inline: auto
}

/* 影の分だけ縦の間隔をあける */
.vision-cta-strip__btns:has(.vision-btn) {
  gap: 16px
}

/* ヘッダー・下部バナー・キャンペーンも同じ形に（全ページ。このファイルは各部品の CSS より先に読まれるので、body を付けて強く効かせる） */
body .site-header .btn.site-header__cta {
  border: 0;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: 3px 3px 0 rgba(107, 106, 102, .5);
  transition: background-color .2s, transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s cubic-bezier(.2, .7, .3, 1)
}
body .site-header:is(.is-solid, .is-on-light) .btn.site-header__cta {
  box-shadow: 3px 3px 0 rgba(58, 57, 54, .35)
}
@media (hover: hover) {
  body .site-header .btn.site-header__cta:hover {
    background: #FFD900;
    transform: translateY(-2px);
    box-shadow: 3px 5px 0 rgba(107, 106, 102, .5)
  }
}
@media (hover: hover) {
  body .site-header:is(.is-solid, .is-on-light) .btn.site-header__cta:hover {
    box-shadow: 3px 5px 0 rgba(58, 57, 54, .35)
  }
}
body .site-header .btn.site-header__cta:active,
body .site-header:is(.is-solid, .is-on-light) .btn.site-header__cta:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 transparent
}

/* 下部バナー：紺（--vision-follow-navy）で。予約＝紺の面、電話＝薄い紺グレーの面＋紺の影 */
body .vision-follow .vision-follow__btn {
  border: 0;
  border-radius: var(--vision-btn-radius, 4px);
  font-weight: 700;
  letter-spacing: .04em;
  transition: background-color .2s, transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s cubic-bezier(.2, .7, .3, 1)
}
body .vision-follow .vision-follow__btn--trial {
  background: var(--vision-follow-navy);
  color: #FFFFFF;
  box-shadow: var(--vision-btn-shadow, 3px) var(--vision-btn-shadow, 3px) 0 rgba(10, 28, 51, .35)
}
body .vision-follow .vision-follow__btn--tel {
  background: #EEF1F5;
  color: var(--vision-follow-navy);
  box-shadow: var(--vision-btn-shadow, 3px) var(--vision-btn-shadow, 3px) 0 rgba(19, 53, 95, .35)
}
body .vision-follow--pc {
  --vision-btn-shadow: 5px;
  --vision-btn-radius: 6px
}
@media (hover: hover) {
  body .vision-follow .vision-follow__btn--trial:hover {
    background: #1E4A80;
    transform: translateY(-2px);
    box-shadow: var(--vision-btn-shadow, 3px) calc(var(--vision-btn-shadow, 3px) + 2px) 0 rgba(10, 28, 51, .35)
  }
}
@media (hover: hover) {
  body .vision-follow .vision-follow__btn--tel:hover {
    background: #DDE4EE;
    transform: translateY(-2px);
    box-shadow: var(--vision-btn-shadow, 3px) calc(var(--vision-btn-shadow, 3px) + 2px) 0 rgba(19, 53, 95, .35)
  }
}
body .vision-follow .vision-follow__btn:is(.vision-follow__btn--trial, .vision-follow__btn--tel):active,
body .vision-follow .vision-follow__btn:is(.vision-follow__btn--trial, .vision-follow__btn--tel)[aria-expanded="true"] {
  transform: translate(var(--vision-btn-shadow, 3px), var(--vision-btn-shadow, 3px));
  box-shadow: 0 0 0 transparent
}

/* 秋キャンペーンの予約ボタン：形だけ CV と同じに（色はキャンペーンのピンクのまま。文字と矢印は中央に寄せる） */
body .vision-autumn-campaign a.vision-autumn-campaign__cta {
  justify-content: center;
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(58, 57, 54, .35);
  transition: background .25s, transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s cubic-bezier(.2, .7, .3, 1)
}
/* ホバーの色は campaign-autumn.css の --vac-cta-hover のまま */
@media (hover: hover) {
  body .vision-autumn-campaign a.vision-autumn-campaign__cta:hover {
    transform: translateY(-2px);
    box-shadow: 4px 6px 0 rgba(58, 57, 54, .35)
  }
}
body .vision-autumn-campaign a.vision-autumn-campaign__cta:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 transparent
}

/* パーソナルのFV：「無料見学予約」は CV、「料金を見る」は --sub と同じグレー */
body.gym-personal .vision-fv202610__btn:is(.vision-fv202610__btn--primary, .vision-fv202610__btn--ghost) {
  border: 0;
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(58, 57, 54, .35);
  transition: background-color .2s, transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s cubic-bezier(.2, .7, .3, 1)
}
body.gym-personal .vision-fv202610__btn.vision-fv202610__btn--primary {
  background: #FEE801;
  color: #0C0C0C
}
@media (hover: hover) {
  body.gym-personal .vision-fv202610__btn.vision-fv202610__btn--primary:hover {
    background: #FFD900;
    color: #0C0C0C
  }
}
body.gym-personal .vision-fv202610__btn.vision-fv202610__btn--ghost {
  background: #F2F2F0;
  color: #1a1a1a
}
@media (hover: hover) {
  body.gym-personal .vision-fv202610__btn.vision-fv202610__btn--ghost:hover {
    background: #E4E4E1;
    color: #1a1a1a
  }
}
/* 六本松は動画の上（黒地）なので暗いグレー */
body.gym-personal .vision-fv202610--video-left .vision-fv202610__btn.vision-fv202610__btn--ghost {
  background: #2A2C31;
  color: #FFFFFF;
  box-shadow: 4px 4px 0 rgba(107, 106, 102, .5)
}
@media (hover: hover) {
  body.gym-personal .vision-fv202610--video-left .vision-fv202610__btn.vision-fv202610__btn--ghost:hover {
    background: #3A3D44;
    color: #FFFFFF
  }
}
@media (hover: hover) {
  body.gym-personal .vision-fv202610__btn:is(.vision-fv202610__btn--primary, .vision-fv202610__btn--ghost):hover {
    transform: translateY(-2px);
    box-shadow: 4px 6px 0 rgba(58, 57, 54, .35)
  }
}
@media (hover: hover) {
  body.gym-personal .vision-fv202610--video-left .vision-fv202610__btn.vision-fv202610__btn--ghost:hover {
    box-shadow: 4px 6px 0 rgba(107, 106, 102, .5)
  }
}
body.gym-personal .vision-fv202610__btn:is(.vision-fv202610__btn--primary, .vision-fv202610__btn--ghost):active,
body.gym-personal .vision-fv202610--video-left .vision-fv202610__btn.vision-fv202610__btn--ghost:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 transparent
}

@media (prefers-reduced-motion: reduce) {
  body.gym-personal .vision-fv202610__btn,
  body .vision-autumn-campaign a.vision-autumn-campaign__cta,
  body .site-header .btn.site-header__cta,
  body .vision-follow .vision-follow__btn,
  .vision-btn,
  .vision-btn__icon {
    transition: none
  }
}