/* VISION24 | personal-fv-hirao-202610.css — 平尾 FV案（ライト・写真縮み）比較用 */

body.gym-personal--fv202610-hirao .vision-fv-shell.vision-hero--fv202610-hirao {
  /* 画像前の白フラッシュ防止（最終ページでライトへ） */
  background: #1a1a1a;
}

.vision-fv202610--hirao {
  color: #0c0c0c;
  /* SP の写真枠の高さ（stage 比）。見出し・疑問の位置もこれを基準にする */
  --fv-photo-h: 68%;
}
.vision-fv202610--hirao.is-step-1 {
  --fv-photo-h: 48%;
}
.vision-fv202610--hirao.is-step-2 {
  --fv-photo-h: 26%;
}

.vision-fv202610--hirao .vision-fv202610__stage {
  background: #1a1a1a; /* step0: 画像下の白抜け防止 */
  color: #0c0c0c;
}
.vision-fv202610--hirao.is-step-1 .vision-fv202610__stage,
.vision-fv202610--hirao.is-step-2 .vision-fv202610__stage {
  background: #f5f5f5; /* step1〜: コピー帯はライト */
}

.vision-fv202610--hirao .vision-fv202610__photo picture {
  position: absolute;
  inset: 0;
  display: block;
}

/* 写真帯: step で高さが縮む */
.vision-fv202610--hirao .vision-fv202610__photo {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--fv-photo-h);
  overflow: hidden;
  border-radius: 0 0 0 48px;
  z-index: 2;
  background: #1a1a1a; /* 画像ロード前・切替中の白抜け防止 */
  /* 1→2 と同じむにょん（last-tall 適用前に高さだけ動かす） */
  transition: height 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vision-fv202610--hirao .vision-fv202610__photo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 12, 12, 0.35) 0%,
    rgba(12, 12, 12, 0) 25%,
    rgba(12, 12, 12, 0) 60%,
    rgba(12, 12, 12, 0.45) 100%
  );
}

/* 右アクセント黄バー */
.vision-fv202610--hirao .vision-fv202610__accent {
  position: absolute;
  right: 0;
  top: 58%;
  width: 22px;
  height: 150px;
  background: #fee801;
  z-index: 3;
  transition: top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vision-fv202610--hirao.is-step-1 .vision-fv202610__accent {
  top: 38%;
}
.vision-fv202610--hirao.is-step-2 .vision-fv202610__accent {
  top: 16%;
  height: 100px;
}

/* 縦書き NAP：英数字は upright（横倒しにしない） */
.vision-fv202610--hirao .vision-fv202610__nap-v {
  position: absolute;
  top: 100px;
  right: 10px;
  z-index: 4;
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: #fafafa;
  background: rgba(12, 12, 12, 0.45);
  padding: 12px 5px;
  transition: opacity 0.6s;
}
.vision-fv202610--hirao .vision-fv202610__nap-v > span {
  display: block;
  white-space: nowrap;
}
.vision-fv202610--hirao .vision-tcy {
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
  letter-spacing: 0;
}
.vision-fv202610--hirao.is-step-2 .vision-fv202610__nap-v {
  opacity: 0;
  pointer-events: none;
}

/* 見出し: step0→1 で写真に合わせて上へ移動して残る（Designどおり） */
.vision-fv202610--hirao .vision-fv202610__head {
  position: absolute;
  left: 22px;
  right: 40px;
  top: 70%;
  z-index: 4;
  transition: top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s;
}
/* SP2: 写真枠の下＝白地に乗せる（画像に被らない） */
.vision-fv202610--hirao.is-step-1 .vision-fv202610__head {
  top: calc(var(--fv-photo-h) + 12px);
  opacity: 1;
}
.vision-fv202610--hirao.is-step-2 .vision-fv202610__head {
  opacity: 0;
  pointer-events: none;
}
.vision-fv202610--hirao .vision-fv202610__hook {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.45;
  color: #0c0c0c;
  transform: none;
  transition: font-size 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), gap 0.7s, color 0.35s ease;
}
/* step0 暗色下地: メイン／リード相当は白 */
.vision-fv202610--hirao.is-step-0 .vision-fv202610__hook {
  color: #fafafa;
}
.vision-fv202610--hirao.is-step-1 .vision-fv202610__hook {
  color: #0c0c0c;
  font-size: 22px;
  gap: 2px;
}
/* 共用の step1 右寄せより強く。右端から上へ動いて見えないように左起点のまま */
.vision-fv202610--hirao.is-step-0 .vision-fv202610__hook,
.vision-fv202610--hirao.is-step-1 .vision-fv202610__hook,
.vision-fv202610--hirao.is-step-2 .vision-fv202610__hook {
  align-items: flex-start;
  text-align: left;
  transform: none;
}
.vision-fv202610--hirao .vision-fv202610__hook > span {
  white-space: nowrap;
}
.vision-fv202610--hirao .vision-fv202610__hook-em {
  background: #fee801;
  padding: 0 8px;
}

/* 共用の translateY(20px) 入場は SP 初回でガクッ見えるので平尾はフェードのみ */
.vision-fv202610--hirao [data-fv202610-line] {
  transform: none;
}
.vision-fv202610--hirao.is-ready.is-step-0 .vision-fv202610__head [data-fv202610-line],
.vision-fv202610--hirao.is-ready.is-step-1 .vision-fv202610__head [data-fv202610-line] {
  opacity: 1;
  transform: none;
}
.vision-fv202610--hirao.is-ready .vision-fv202610__head [data-fv202610-line]:nth-child(1) {
  transition-delay: 0s;
}
.vision-fv202610--hirao.is-ready .vision-fv202610__head [data-fv202610-line]:nth-child(2) {
  transition-delay: 0.08s;
}
.vision-fv202610--hirao.is-step-1 .vision-fv202610__qs [data-fv202610-line]:nth-child(1),
.vision-fv202610--hirao.is-step-1 .vision-fv202610__qs [data-fv202610-line]:nth-child(2),
.vision-fv202610--hirao.is-step-1 .vision-fv202610__qs [data-fv202610-line]:nth-child(3) {
  opacity: 1;
  transform: none;
}
.vision-fv202610--hirao.is-step-1 .vision-fv202610__qs [data-fv202610-line]:nth-child(1) {
  transition-delay: 0.04s;
}
.vision-fv202610--hirao.is-step-1 .vision-fv202610__qs [data-fv202610-line]:nth-child(2) {
  transition-delay: 0.1s;
}
.vision-fv202610--hirao.is-step-1 .vision-fv202610__qs [data-fv202610-line]:nth-child(3) {
  transition-delay: 0.16s;
}
.vision-fv202610--hirao.is-step-2 .vision-fv202610__offer-h [data-fv202610-line]:nth-child(1),
.vision-fv202610--hirao.is-step-2 .vision-fv202610__offer-h [data-fv202610-line]:nth-child(2),
.vision-fv202610--hirao.is-step-2 .vision-fv202610__offer-h [data-fv202610-line]:nth-child(3),
.vision-fv202610--hirao.is-step-2 .vision-fv202610__offer-h [data-fv202610-line]:nth-child(4) {
  opacity: 1;
  transform: none;
}
.vision-fv202610--hirao.is-step-2 .vision-fv202610__offer-h [data-fv202610-line]:nth-child(1) {
  transition-delay: 0.04s;
}
.vision-fv202610--hirao.is-step-2 .vision-fv202610__offer-h [data-fv202610-line]:nth-child(2) {
  transition-delay: 0.1s;
}
.vision-fv202610--hirao.is-step-2 .vision-fv202610__offer-h [data-fv202610-line]:nth-child(3) {
  transition-delay: 0.16s;
}
.vision-fv202610--hirao.is-step-2 .vision-fv202610__offer-h [data-fv202610-line]:nth-child(4) {
  transition-delay: 0.22s;
}
/* PC 2段階: step1 で qs＋offer を出す */
@media (min-width: 768px) {
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__qs [data-fv202610-line],
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__offer-h [data-fv202610-line] {
    opacity: 1;
    transform: none;
  }
}

/* 疑問（step1）— 移動した見出しの下に配置（被らない位置） */
.vision-fv202610--hirao .vision-fv202610__qs {
  position: absolute;
  left: 22px;
  right: 40px;
  top: 66%;
  bottom: auto;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s, top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* SP2: メイン直下にリード */
.vision-fv202610--hirao.is-step-1 .vision-fv202610__qs {
  opacity: 1;
  top: calc(var(--fv-photo-h) + 12px + 5.2em);
}
.vision-fv202610--hirao .vision-fv202610__q {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #4a4a4a;
}
.vision-fv202610--hirao .vision-fv202610__q-ans {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  color: #0c0c0c;
}
.vision-fv202610--hirao .vision-fv202610__q-bar {
  width: 22px;
  height: 3px;
  background: #0c0c0c;
  flex: none;
}

/* offer（step2＝SPのみ）— 枠内スクロールはしない（はみ出しはバナーを縮めて収める・下の @media） */
.vision-fv202610--hirao .vision-fv202610__offer-h {
  position: absolute;
  left: 50%;
  right: auto;
  width: min(1200px, calc(100% - 44px));
  max-width: 1200px;
  top: 30%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  /* 非表示時も中央基準。step-2 で軸が変わるとガクッする */
  transform: translate(-50%, 16px);
  transition: opacity 0.6s, transform 0.6s;
  pointer-events: none;
  overflow: hidden;
}
.vision-fv202610--hirao.is-step-2 .vision-fv202610__offer-h {
  top: 28%;
  bottom: 36px;
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
  gap: 10px;
  padding-bottom: 8px;
}
/*
 * SP 3枚目: 枠内スクロールはやめる（iPhone SE 等で offer がはみ出すと、スワイプが
 * 枠の内側だけを動かしてページが進まない・iOS は内側→窓へ引き継がない）。
 * 代わりにバナーだけ残り高さに合わせて縮め、必ず枠内に収める。
 */
@media (max-width: 767px) {
  .vision-fv202610--hirao .vision-fv202610__offer-h .vision-fv202610__banner {
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    justify-content: center;
  }
  .vision-fv202610--hirao .vision-fv202610__offer-h .vision-fv202610__banner picture {
    display: flex;
    justify-content: center;
    min-height: 0;
    max-height: 100%;
  }
  .vision-fv202610--hirao .vision-fv202610__offer-h .vision-fv202610__banner img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }
}

.vision-fv202610--hirao.is-step-2 .vision-fv202610__cue {
  display: none;
}
.vision-fv202610--hirao .vision-fv202610__lead {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.55;
  color: #0c0c0c; /* 最終ライト地。step0フック白とは別 */
}
.vision-fv202610--hirao .vision-fv202610__lead-line {
  white-space: nowrap;
}
.vision-fv202610--hirao .vision-fv202610__lead-em {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-bottom: 6px;
  white-space: nowrap;
}
.vision-fv202610--hirao .vision-fv202610__lead-em::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 0;
  background: #fee801;
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: 0.08s;
}
.vision-fv202610--hirao.is-step-2 .vision-fv202610__lead-em::after {
  width: 100%;
}

.vision-fv202610--hirao .vision-fv202610__price {
  flex: none;
  align-items: flex-start;
  text-align: left;
}
.vision-fv202610--hirao .vision-fv202610__price span {
  color: #333;
  font-size: 13px;
}
.vision-fv202610--hirao .vision-fv202610__price strong {
  font-size: 20px;
  color: #0c0c0c;
}
.vision-fv202610--hirao .vision-fv202610__price .vision-num {
  font-size: 44px;
  color: #0c0c0c;
}

.vision-fv202610--hirao .vision-fv202610__actions {
  flex: none;
}
.vision-fv202610--hirao .vision-fv202610__btn {
  height: 48px;
  font-size: 14px;
}
.vision-fv202610--hirao .vision-fv202610__btn--pill {
  border-radius: 999px;
}
.vision-fv202610--hirao .vision-fv202610__btn--ghost {
  border-color: #0c0c0c;
  color: #0c0c0c;
  background: transparent;
}

.vision-fv202610--hirao .vision-fv202610__banner {
  flex: none;
  display: block;
  width: 100%;
  max-width: 100%;
}
.vision-fv202610--hirao .vision-fv202610__banner picture,
.vision-fv202610--hirao .vision-fv202610__banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
}


/*
 * PC（768+）スマホ横版:
 * - 写真は高さマックスのまま、左端だけ動かして右側へ幅で縮む
 * - 空いた左カラムにメイン → 疑問 → offer（幅は左帯内／最大1200）
 */
@media (min-width: 768px) {
  .vision-fv202610--hirao {
    /*
     * 最終左カラム幅と揃える（step0 から同じ幅で上へ動かす）
     * % だと使う要素の包含ブロック基準になり、last-tall の relative な offer だけ
     * stage の padding 内（≒272px）で計算されて細くなる → vw 基準で全要素同じ幅に
     * （vw はスクロールバー込みなので、写真左端との間に ~40px 残るよう 88px 引く）
     */
    --fv-col-w: min(520px, calc(42vw - 88px));
    /*
     * 最終画面の左カラムの上の余白（stage 上端 24px からの追加分）。0＝メインコピーの上端を写真の上端にそろえる
     * （2026-10-31 に詰めた。バナーまで1画面に入れるため。旧: ヘッダー高×0.35＋48px）
     */
    --fv-head-gap: 0px;
    --fv-head-top-end: calc(24px + var(--fv-head-gap));
    --fv-photo-left: 0%;
  }
  .vision-fv202610--hirao.is-step-1 {
    --fv-photo-left: 42%;
  }

  /*
   * 右固定。step1 で left を広げて右へ縮みつつ、last-tall と同じ top/高さへ動かす
   * （高さフルのまま止めると last-tall 適用時に写真がもう一段縮んで見える）
   */
  .vision-fv202610--hirao .vision-fv202610__photo,
  .vision-fv202610--hirao.is-step-2 .vision-fv202610__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: var(--fv-photo-left);
    width: auto;
    height: 100%;
    border-radius: 64px 0 0 64px;
    transition:
      left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
      top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
      height 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .vision-fv202610--hirao.is-step-1 .vision-fv202610__photo {
    position: absolute;
    top: 24px;
    right: 0;
    bottom: auto;
    left: var(--fv-photo-left);
    width: auto;
    height: min(82vh, 780px);
    border-radius: 64px 0 0 64px;
  }
  /* last-tall で消える装飾は step1 の時点でフェードアウトしておく */
  .vision-fv202610--hirao .vision-fv202610__photo-shade {
    transition: opacity 0.45s;
  }
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__photo-shade,
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__accent {
    opacity: 0;
  }
  .vision-fv202610--hirao .vision-fv202610__accent {
    transition: top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s;
  }
  /* シェル背景（ヘッダー下地の色味）も step1 で最終と同じライトへ */
  body.gym-personal--fv202610-hirao .vision-fv-shell.vision-hero--fv202610-hirao.is-exit-ready {
    background: #f5f5f5;
  }

  /*
   * メインコピー: 左下（写真上）→ 左上へ。幅は最初から最終と同じ。
   * last-tall でも absolute を維持（relative 化すると top:70% から瞬間移動する）
   */
  .vision-fv202610--hirao .vision-fv202610__head {
    left: 40px;
    width: var(--fv-col-w);
    max-width: 520px;
    right: auto;
    top: 70%;
    transition: top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s;
  }
  .vision-fv202610--hirao.is-step-1 .vision-fv202610__head {
    top: var(--fv-head-top-end);
    left: 40px;
    width: var(--fv-col-w);
  }
  /* step1 の文字サイズ・配置は last-tall と同値（0.9秒後の組替で動かさない） */
  .vision-fv202610--hirao.is-step-1 .vision-fv202610__hook {
    font-size: 20px;
  }
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__nap-v {
    opacity: 0;
  }

  /* step1（last-tall前）: qs / offer も左カラム absolute。位置は last-tall と一致させる */
  .vision-fv202610--hirao.is-pc.is-step-1:not(.is-last-tall) .vision-fv202610__qs {
    left: 40px;
    right: auto;
    width: var(--fv-col-w);
    max-width: 520px;
    top: calc(var(--fv-head-top-end) + 5.2em);
    opacity: 1;
    pointer-events: auto;
  }
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__qs {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.55em;
    row-gap: 8px;
  }
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__q {
    font-size: 26px;
  }
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__q-ans {
    flex: 1 0 100%;
  }
  .vision-fv202610--hirao.is-pc.is-step-1:not(.is-last-tall) .vision-fv202610__offer-h {
    left: 40px;
    right: auto;
    width: var(--fv-col-w);
    max-width: 520px;
    top: calc(var(--fv-head-top-end) + 12em);
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__offer-h {
    gap: 16px;
  }
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__lead,
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__lead-line,
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__lead-em {
    white-space: normal;
    max-width: 100%;
  }
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__banner {
    margin-top: 4px;
  }

  /* PC最終レイアウトは下部 .is-last-tall に集約（ここでの absolute offer は廃止） */
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__lead-em::after {
    width: 100%;
  }
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__cue {
    display: none;
  }

  .vision-fv202610--hirao .vision-fv202610__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 14px;
    min-width: 0;
    width: 100%;
  }
  .vision-fv202610--hirao .vision-fv202610__btn {
    flex: 1 1 0;
    min-width: 0;
    height: 58px; /* last-tall と同値 */
    padding: 0 24px;
    font-size: 16px;
  }
  .vision-fv202610--hirao .vision-fv202610__hook {
    font-size: 40px;
  }
  .vision-fv202610--hirao .vision-fv202610__q,
  .vision-fv202610--hirao .vision-fv202610__q-ans {
    font-size: 20px;
  }
  .vision-fv202610--hirao .vision-fv202610__lead {
    font-size: 18px;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }
  .vision-fv202610--hirao .vision-fv202610__price .vision-num {
    font-size: 48px;
  }
  .vision-fv202610--hirao .vision-fv202610__price strong {
    font-size: 22px;
  }
}

/*
 * 最終ページ
 *
 * SP: is-exit-ready（共用CSS）のみ。配置クラスは付けない（ガクッ禁止）
 * PC: is-last-tall で左カラム＋右写真の最終レイアウトへ（写真むにょん後）
 */
@media (min-width: 768px) {
  body.gym-personal--fv202610-hirao .vision-fv-shell.is-last-tall {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    background: #f5f5f5;
  }

  .vision-fv202610--hirao.is-last-tall {
    position: relative !important;
    top: auto !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    height: auto;
    min-height: calc(100svh - var(--header-h-top, var(--header-h, 72px)));
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__scroller {
    height: auto;
    overflow: visible;
    touch-action: pan-y;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__rail {
    height: auto !important;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__stage {
    position: relative;
    z-index: 0;
    height: auto !important;
    min-height: calc(100svh - var(--header-h-top, var(--header-h, 72px)));
    overflow: visible;
    display: block;
    padding: 24px 40px 64px;
    padding-right: calc(42% + 24px);
    box-sizing: border-box;
    background: #f5f5f5;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__stage::before {
    content: "";
    display: block;
    height: var(--fv-head-gap);
    pointer-events: none;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__photo {
    position: absolute;
    top: 24px;
    right: 0;
    bottom: auto;
    left: 42%;
    width: auto;
    height: min(82vh, 780px);
    min-height: 0;
    max-height: min(82vh, 780px);
    border-radius: 64px 0 0 64px;
    background: #1a1a1a;
    transition: none;
    box-shadow: none;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__photo-shade {
    display: none;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__accent {
    display: none;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__nap-v {
    display: none;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__head {
    position: absolute !important;
    top: var(--fv-head-top-end) !important;
    left: 40px !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--fv-col-w) !important;
    max-width: 520px;
    margin: 0;
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
    overflow: visible !important;
    height: auto !important;
    z-index: 3;
    display: block;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__qs {
    position: absolute !important;
    top: calc(var(--fv-head-top-end) + 5.2em) !important;
    left: 40px !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--fv-col-w) !important;
    max-width: 520px;
    margin: 0;
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
    overflow: visible !important;
    height: auto !important;
    z-index: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.55em;
    row-gap: 8px;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__q {
    font-size: 26px;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__q-ans {
    flex: 1 0 100%;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__offer-h {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: var(--fv-col-w) !important;
    max-width: 520px;
    margin: 12em 0 0;
    transform: none !important;
    opacity: 1;
    pointer-events: auto;
    overflow: visible !important;
    height: auto !important;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__lead,
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__lead-line,
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__lead-em {
    white-space: normal;
    max-width: 100%;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__banner,
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__banner picture,
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__banner img {
    flex: none !important;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__hook {
    font-size: 20px;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__btn {
    height: 58px;
    font-size: 16px;
    padding: 0 24px;
  }
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__banner {
    margin-top: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vision-fv202610--hirao .vision-fv202610__photo,
  .vision-fv202610--hirao .vision-fv202610__accent,
  .vision-fv202610--hirao .vision-fv202610__head {
    transition: none !important;
  }
  .vision-fv202610--hirao .vision-fv202610__qs,
  .vision-fv202610--hirao .vision-fv202610__offer-h,
  .vision-fv202610--hirao .vision-fv202610__head {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    position: relative !important;
    inset: auto !important;
  }
}

/* ══════════ 2026-10-20 デザイン修正（平尾202610） ══════════ */

/* SESSION: 写真カードは角丸（黒の塗りのチャコール化はページ全体の指定で） */
body.gym-personal--fv202610-hirao .vision-session__card {
  border-radius: 16px;
}

/* トレーナー: 私の強み〜メッセージを薄い白の面に載せる */
body.gym-personal--fv202610-hirao .vision-trainer__detail {
  margin-top: 12px;
  padding: 4px 18px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

/* お客様の声: 柔らかい黄色の背景＋見出し類は黒 */
body.gym-personal--fv202610-hirao .vision-voice {
  background: #FFF6CC;
  color: var(--ink-black);
}
body.gym-personal--fv202610-hirao .vision-voice .sec-ttl__en {
  color: var(--ink-gray);
}
body.gym-personal--fv202610-hirao .vision-voice .sec-ttl__jp {
  color: var(--ink-black);
}
body.gym-personal--fv202610-hirao .vision-voice .sec-ttl__lead {
  color: var(--ink-dark);
}
body.gym-personal--fv202610-hirao .vision-voice .vision-voice__card {
  border-color: rgba(12, 12, 12, 0.08);
}
body.gym-personal--fv202610-hirao .vision-voice__more .link-arrow,
body.gym-personal--fv202610-hirao .vision-voice__more .link-arrow:hover {
  color: var(--ink-black);
  border-bottom-color: var(--ink-black);
}

/* ── マシン（05）: 両店共通の新構成（personal-fv-202610.css の .vision-gym--202610）を平尾のトーンに（2026-10-24）
 * 黒はページ全体の指定でチャコール（--fill-black）。角丸は --r-lg / --r、白い面はやわらかい影（personal-feminine.css と同じ）
 * 英字ラベル「BY GOAL」は見出し英字「MACHINE」と同じグレー文字（黒帯にしない） */
body.gym-personal--fv202610-hirao .vision-gym-count__list,
body.gym-personal--fv202610-hirao .vision-gym-goal,
body.gym-personal--fv202610-hirao .vision-gym-ease {
  border-radius: var(--r-lg);
}
body.gym-personal--fv202610-hirao .vision-gym-count__item {
  border-radius: var(--r);
}
body.gym-personal--fv202610-hirao .vision-gym-goal {
  box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 14px 32px -18px rgba(0,0,0,.28);
}
body.gym-personal--fv202610-hirao .vision-gym-goal__en {
  padding: 0;
  background: none;
  color: var(--ink-lightgray);
  font-weight: 900;
}

/* FV直下の 0円カウンセリング帯: 共用のチャコール斜線を消す（地の色はグレージュ指定で決まる） */
body.gym-personal--fv202610-hirao .vision-banner-strip {
  background-image: none;
}

/* 黒の塗りはページ全体でチャコールに（FV・ヘッダー・フッターは対象外） */
body.gym-personal--fv202610-hirao :is(main, .wp-site-blocks) :is(section, nav.vision-sec-nav, .vision-trust, .vision-banner-strip, .vision-cta-strip) {
  --fill-black: #3A3936;
}
/* 直書きの黒もチャコールへ（アプリのスマホ画面・実績ベルトの穴は表現上の黒なので残す） */
body.gym-personal--fv202610-hirao .vision-autumn-campaign__card-no {
  background: #3A3936;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px #3A3936;
}
body.gym-personal--fv202610-hirao .vision-autumn-campaign__summary {
  background-image:
    radial-gradient(70% 90% at 12% -10%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(55% 70% at 100% 110%, rgba(254, 232, 1, .1) 0%, rgba(254, 232, 1, 0) 60%),
    linear-gradient(160deg, #57554F 0%, #3A3936 45%, #2B2A27 100%);
  box-shadow: 0 4px 0 #2B2A27, 0 24px 40px -16px rgba(60, 50, 0, .5);
}
body.gym-personal--fv202610-hirao .vision-hp__card,
body.gym-personal--fv202610-hirao #price .vision-course-banner {
  background-color: #3A3936;
}

/* ══════════ 2026-10-20 追加修正 ══════════ */

/* 白（#FFF / #FAFAFA）の面は極めて明るいグレージュに。カード類の白はそのまま＝浮いて見える */
body.gym-personal--fv202610-hirao {
  --bg-greige: #FDFCFB;
  --bg-greige-2: #F8F7F4;
  background-color: var(--bg-greige);
  line-break: strict; /* 日本語の禁則を厳しく（行頭に「ー」「ッ」「ャ」などを置かない） */
}
body.gym-personal--fv202610-hirao :is(.vision-trust, .vision-banner-strip, #intro, #flow, #faq) {
  background-color: var(--bg-greige);
}
/* 5つの特徴: 見出し部分は薄い黄（スクロールで feat-bg.js が各ブロックの data-feat-bg に切り替える） */
body.gym-personal--fv202610-hirao #why {
  background-color: var(--bg-tint);
}

/* SESSION下のスタートダッシュ: 角丸＋影で少し立体に */
body.gym-personal--fv202610-hirao .vision-session .vision-price-hook__push {
  border-radius: 16px;
  box-shadow:
    0 4px 0 #D9C700,
    0 18px 32px -14px rgba(60, 50, 0, .45);
}

/* 食事（02）の専用アプリ枠 → アプリ（04）への内部リンク */
.vision-cafe__tile-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.vision-cafe__tile-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: .85rem;
  font-weight: 900;
  border-bottom: 2px solid var(--fill-yellow);
}
.vision-cafe__tile-more::after {
  content: "→";
  transition: transform .2s ease;
}
.vision-cafe__tile-link:hover .vision-cafe__tile-more::after,
.vision-cafe__tile-link:focus-visible .vision-cafe__tile-more::after {
  transform: translateX(3px);
}

/* ══════════ 2026-10-20 動画テキスト・セクション区切り ══════════ */

/*
 * セクション区切り（背景色ルール）
 * グレージュ明(A)/グレージュ濃(B)/黄/チャコール の4色。隣同士は必ず別色
 *   0円帯 A → 悩み B → キャンペーン黄 → SESSION B → 声 黄 → 料金の目安 チャコール → 特徴（見出し 黄 → 各ブロックは A/黄 交互）
 *   → 実績 チャコール → 料金 黄 → CTA チャコール → 流れ A → 店内 B → 相互利用 黄 → アクセス A → FAQ B → 予約 黄
 * ※角丸で重ねる案は 2026-10-20 に廃止。色の変数は上の body に集約
 */
body.gym-personal--fv202610-hirao #flow,
body.gym-personal--fv202610-hirao #location {
  background-color: var(--bg-greige);
}
body.gym-personal--fv202610-hirao #intro,
body.gym-personal--fv202610-hirao #session,
body.gym-personal--fv202610-hirao #gallery,
body.gym-personal--fv202610-hirao #faq {
  background-color: var(--bg-greige-2);
}

/* ── YOUR VISIT（ご来店から退店まで）: PCは角を最大に丸める／SPは正円＋行間を詰める ── */
body.gym-personal--fv202610-hirao .vision-amenity__flow li {
  border-radius: 999px;
}
.vision-amenity__label {
  display: block;
}
@media (max-width: 900px) {
  body.gym-personal--fv202610-hirao .vision-amenity__flow {
    row-gap: 6px;
  }
  body.gym-personal--fv202610-hirao .vision-amenity__flow li {
    aspect-ratio: 1;
    min-height: 0;
    padding: 10px;
    border-radius: 50%;
    font-size: .95rem;
    line-height: 1.55;
  }
  body.gym-personal--fv202610-hirao .vision-amenity__figure {
    height: 150px;
    margin-top: -75px;
  }
}

/* 悩み（#intro）: 見出し・悩みリスト・カード下地の白い面を外し、セクションのグレージュをそのまま見せる */
body.gym-personal--fv202610-hirao #intro .vision-intro__pain-wrap,
body.gym-personal--fv202610-hirao #intro .vision-hp {
  background-color: transparent;
  background-image: none;
}
/* 悩みの見出しは固定（スティッキー）しない。重ならないので塗りも不要 */
body.gym-personal--fv202610-hirao #intro .sec-ttl {
  position: static !important;
  top: auto !important;
  background: transparent !important;
}

/* 4つの悩み: PCは2列×2行 */
@media (min-width: 769px) {
  body.gym-personal--fv202610-hirao #intro .vision-intro__pains {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    max-width: 680px;
  }
}

/* 料金の目安（声の直後）: 料金セクションが下にあるため、途中で一度だけ金額を見せて #price へ */
.vision-price-peek {
  background: #3A3936;
  color: #fafafa;
  padding-block: 22px;
}
.vision-price-peek__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 32px;
}
.vision-price-peek__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-weight: 700;
}
.vision-price-peek__label {
  font-size: .82rem;
  color: rgba(250, 250, 250, .72);
}
.vision-price-peek__val {
  font-size: 1rem;
}
.vision-price-peek__val b {
  margin-right: 2px;
  font-size: 2rem;
  line-height: 1;
  color: #FEE801;
}
.vision-price-peek__val small {
  font-size: .72rem;
  color: rgba(250, 250, 250, .72);
}
.vision-price-peek__note {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(250, 250, 250, .85);
}
.vision-price-peek__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #FEE801;
  color: #0c0c0c;
  font-size: .9rem;
  font-weight: 900;
  text-decoration: none;
}
@media (max-width: 767px) {
  .vision-price-peek__inner {
    flex-direction: column;
    gap: 6px;
  }
  .vision-price-peek__link {
    margin-top: 8px;
  }
}

/* お客様の声（SP）: アイコンと名前を横並びに */
@media (max-width: 767px) {
  body.gym-personal--fv202610-hirao .vision-voice__card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
  }
  body.gym-personal--fv202610-hirao .vision-voice__icon {
    margin: 0;
  }
  body.gym-personal--fv202610-hirao .vision-voice__name {
    margin: 0;
  }
  body.gym-personal--fv202610-hirao .vision-voice__text,
  body.gym-personal--fv202610-hirao .vision-voice__more-btn {
    grid-column: 1 / -1;
    justify-self: start;
  }
  body.gym-personal--fv202610-hirao .vision-voice__text {
    margin-top: 14px;
  }
}

/* アメニティの6項目（SP）: 細字の説明は外して見出しだけに（詳細は下の「設備・アメニティ一覧」）。PCは表示 */
@media (max-width: 767px) {
  body.gym-personal--fv202610-hirao .vision-amenity__list li > div > span {
    display: none;
  }
}

/* アメニティ写真のキャプション2行目（シャワー室・洗面台の設備） */
.vision-amenity__photo-note {
  display: block;
  margin-top: 4px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-gray);
}

/* ── アプリ（04）SP: タブを押せるボタンらしく。押したタブの説明（01〜04）だけ下に出す ── */
@media (max-width: 899px) {
  body.gym-personal--fv202610-hirao .vision-phone__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* タブ4つを2×2 */
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    padding: 0 0 4px;
  }
  body.gym-personal--fv202610-hirao .vision-phone__tabs li {
    min-width: 0;
  }
  body.gym-personal--fv202610-hirao .vision-phone__tab {
    width: 100%;
    padding: 11px 4px;
    white-space: nowrap;
    border: 2px solid #3A3936;
    border-radius: 999px;
    background: #fff;
    color: #3A3936;
    font-size: .76rem;
    font-weight: 900;
    box-shadow: 0 4px 0 #3A3936;
    transform: translateY(0);
    transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease;
    cursor: pointer;
  }
  body.gym-personal--fv202610-hirao .vision-phone__tab:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #3A3936;
  }
  body.gym-personal--fv202610-hirao .vision-phone__tab.is-on {
    background: #FEE801;
    transform: translateY(3px);
    box-shadow: 0 1px 0 #3A3936;
  }
  body.gym-personal--fv202610-hirao .vision-app__step:not(.is-on) {
    display: none;
  }
  body.gym-personal--fv202610-hirao .vision-app__step.is-on {
    animation: visionAppStepIn .3s ease;
  }
}
@keyframes visionAppStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.gym-personal--fv202610-hirao .vision-app__step.is-on { animation: none; }
}

/* ── アメニティ6項目（SP）: アイコンを小さく、縦の余白を詰める ── */
@media (max-width: 767px) {
  body.gym-personal--fv202610-hirao .vision-amenity__list {
    gap: 8px;
    padding: 12px 12px 0;
    border-radius: 16px 16px 0 0;
    background: rgba(110, 31, 46, .06); /* 6項目〜一覧を1枠に。アイコン色のピンクを透過 */
  }
  body.gym-personal--fv202610-hirao .vision-amenity__list li {
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-color: transparent;
  }
  body.gym-personal--fv202610-hirao .vision-amenity__ico {
    width: 28px;
    height: 28px;
  }
  body.gym-personal--fv202610-hirao .vision-amenity__ico svg {
    width: 15px;
    height: 15px;
  }
}

/* ── トレーナー写真: 角丸で威圧感をやわらげる ── */
body.gym-personal--fv202610-hirao .vision-trainers__main,
body.gym-personal--fv202610-hirao .vision-trainers__main img {
  border-radius: 16px;
}
body.gym-personal--fv202610-hirao .vision-trainers__main {
  overflow: hidden;
}
body.gym-personal--fv202610-hirao .vision-trainers__thumb,
body.gym-personal--fv202610-hirao .vision-trainers__thumb img,
body.gym-personal--fv202610-hirao .vision-trainer__shot,
body.gym-personal--fv202610-hirao .vision-trainer__shot img {
  border-radius: 10px;
}

/* アメニティ（SP）: 6項目〜「設備・アメニティ一覧」を1つの枠に。枠の地はアイコン色のピンクを透過 */
@media (max-width: 767px) {
  body.gym-personal--fv202610-hirao .vision-amenity__top {
    margin-bottom: 0;
  }
  body.gym-personal--fv202610-hirao .vision-amenity__fold {
    padding: 0 12px 14px;
    border-radius: 0 0 16px 16px;
    background: rgba(110, 31, 46, .06); /* アイコン色のピンクを透過（下地のグレージュが透ける） */
  }
  body.gym-personal--fv202610-hirao .vision-amenity__fold-sum {
    margin: 0;
    padding: 18px 28px 6px 4px;
  }
  body.gym-personal--fv202610-hirao .vision-amenity__fold[open] .vision-amenity__fold-sum {
    margin-bottom: 10px;
  }
  body.gym-personal--fv202610-hirao .vision-amenity__note {
    margin-top: 16px;
  }
}

/* 金額の数字だけ Oswald（Oswald に「円」は無いので、円は和文フォントのまま） */
body.gym-personal--fv202610-hirao :is(
  .vision-autumn-campaign__card s,
  .vision-autumn-campaign__card-value-num,
  .vision-autumn-campaign__summary-strike,
  .vision-autumn-campaign__summary-zero-num,
  .vision-price-hook__push-eq,
  .vision-cost__num,
  .vision-course-banner__num,
  .vision-init__ttl strong,
  .vision-init td.is-was,
  .vision-init td.is-now,
  .vision-quote-card__total
) {
  font-family: "Oswald", var(--f-en), "Noto Sans JP", sans-serif !important; /* 料金は #price 付きの指定に勝たせる */
  letter-spacing: .01em;
}

/* 食事（02）SP: タイル本文を小さく・行間を詰める（見出し14.72pxより小さく） */
@media (max-width: 767px) {
  body.gym-personal--fv202610-hirao #feat-cafe .vision-cafe__tile--copy p {
    font-size: .875rem;
    line-height: 1.6;
  }
}

/* SP: セクションタイトル直下の説明文は行間を詰める（料金のリードと同じ 1.7 にそろえる） */
@media (max-width: 767px) {
  body.gym-personal--fv202610-hirao :is(.sec-ttl__lead, .vision-feat-block__lead, .vision-ba__lead) {
    line-height: 1.7;
  }
}

/* ── 改行の整え（2026-10-20） ──
 * v24-nw … 語のかたまりを途中で折らない（iPhone Safari でも確実に効かせる用）
 * 見出し・ラベル・表は行の長さを均等に（balance）、段落は最終行の1〜2文字落ちを避ける（pretty）
 * auto-phrase は Chrome 系のみ（文節で折る）。未対応ブラウザは無視される */
.v24-nw {
  white-space: nowrap;
}
body.gym-personal--fv202610-hirao .vision-ba__mark {
  white-space: nowrap;
}
body.gym-personal--fv202610-hirao :is(
  h2, h3, h4, summary, dt, th, td, figcaption,
  .vision-hp__reason, .vision-stat__eq, .vision-stat__hint,
  .vision-amenity__list b, .vision-trainer__catch, .vision-trainer__fact,
  .vision-trust__sub, .vision-gym-count__jp, .vision-vs__ttl
) {
  text-wrap: balance;
  word-break: auto-phrase;
}
body.gym-personal--fv202610-hirao :is(p, li, dd) {
  text-wrap: pretty;
}

/* キャンペーン名（共通部品）: SPは画面幅に合わせて少し縮め、1行に収める */
@media (max-width: 767px) {
  body.gym-personal--fv202610-hirao .vision-autumn-campaign__name {
    font-size: min(26px, 6.2vw);
    white-space: nowrap;
  }
}

/* 5つの特徴の大きな番号（01〜05）: 背景と逆の色（黄の背景にはグレージュ、グレージュの背景には黄）。縁取りなし */
body.gym-personal--fv202610-hirao .vision-feat-block__ghost {
  -webkit-text-stroke: 0;
}
body.gym-personal--fv202610-hirao .vision-feat-block[data-feat-bg="var(--bg-greige)"] .vision-feat-block__ghost {
  color: var(--bg-tint);
  -webkit-text-fill-color: var(--bg-tint);
}
body.gym-personal--fv202610-hirao .vision-feat-block[data-feat-bg="var(--bg-tint)"] .vision-feat-block__ghost {
  color: var(--bg-greige);
  -webkit-text-fill-color: var(--bg-greige);
}

/* PC の低い画面（1366×768 のブラウザ等）: 料金まわりの行間を少し詰めてバナーまで1画面に入れる */
@media (min-width: 768px) and (max-height: 720px) {
  .vision-fv202610--hirao.is-pc.is-step-1 .vision-fv202610__offer-h,
  .vision-fv202610--hirao.is-last-tall .vision-fv202610__offer-h {
    gap: 10px;
  }
}

/*
 * FV動画（写真枠 __photo の中に動画1本。PC＝横長 16:9〈縦動画の左右をぼかした版〉、SP＝縦長 3:4）。
 * 再生が始まるまでは動画を隠し、黒地＋白ロゴの読み込み画面を見せる（共通部品 .vision-fv-loading・
 * shared/fv-common.css。切替は shared/fv-loading.js。JS が動かなければ動画をそのまま出す）。
 */
.vision-fv202610--hirao .vision-fv202610__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

/*
 * SP: 枠をヘッダーの裏まで伸ばし（ヘッダーは透明）、動画の大きさは step0 の枠で固定。
 * 段階ごとに縮むのは枠（overflow:hidden）だけで、動画は上端揃えのまま上の部分を見せる。
 * （動画の大きさ・見せる位置を一緒に動かすと、iOS Safari で描き直しが追いつかず線が残った）
 */
@media (max-width: 767px) {
  .vision-fv202610--hirao {
    --fv-hh: var(--header-h-top, var(--header-h, 72px));
  }
  /* 枠がヘッダー帯へはみ出せるように（シェルが 100svh で切るので外へは出ない。最終ページは元々 visible） */
  .vision-fv202610--hirao .vision-fv202610__scroller,
  .vision-fv202610--hirao .vision-fv202610__rail,
  .vision-fv202610--hirao .vision-fv202610__stage {
    overflow: visible;
  }
  .vision-fv202610--hirao .vision-fv202610__photo {
    top: calc(-1 * var(--fv-hh));
    height: calc(var(--fv-photo-h) + var(--fv-hh));
  }
  /* 高さは step0 の枠（ヘッダー帯＋stage の 68%）で固定 */
  .vision-fv202610--hirao .vision-fv202610__video {
    bottom: auto;
    height: calc(var(--fv-hh) + (100svh - var(--fv-hh)) * 0.68);
    object-position: 50% 30%;
  }
  /* ヘッダーの白ロゴが動画の明るい場面でも読めるよう、上端を少し濃く */
  .vision-fv202610--hirao .vision-fv202610__photo-shade {
    background: linear-gradient(
      180deg,
      rgba(12, 12, 12, 0.55) 0%,
      rgba(12, 12, 12, 0) 22%,
      rgba(12, 12, 12, 0) 60%,
      rgba(12, 12, 12, 0.45) 100%
    );
  }
}

/*
 * メインコピーの装飾（2026-10-31）
 * - ジャンプ率: 1行目を小さく・2行目を大きく（hook の font-size 基準の em なので step の縮小にそのまま追従）
 * - SP step1: 見出しが縮み切る前に疑問が出て重なったので、疑問の出始めを遅らせる（位置は上の __qs で 5.2em 下げた）
 */
.vision-fv202610--hirao .vision-fv202610__hook > span:first-child {
  font-size: 0.72em;
}
.vision-fv202610--hirao .vision-fv202610__hook > .vision-fv202610__hook-em {
  font-size: 1.3em;
  line-height: 1.35;
}
@media (max-width: 767px) {
  .vision-fv202610--hirao.is-step-1 .vision-fv202610__qs [data-fv202610-line]:nth-child(1) {
    transition-delay: 0.3s;
  }
  .vision-fv202610--hirao.is-step-1 .vision-fv202610__qs [data-fv202610-line]:nth-child(2) {
    transition-delay: 0.36s;
  }
  .vision-fv202610--hirao.is-step-1 .vision-fv202610__qs [data-fv202610-line]:nth-child(3) {
    transition-delay: 0.42s;
  }
}

/*
 * 英字のあしらい「PERSONAL / TRAINING」（細字・薄く・大きく。全段階で出したまま）
 * 写真枠の中・下の隅に置き、枠と一緒に縮む（常に写真の上なので白の半透明）。文字より下（z-index 3）。
 */
.vision-fv202610--hirao .vision-fv202610__deco-en {
  position: absolute;
  left: 14px;
  bottom: 6px;
  z-index: 3;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--f-en);
  font-weight: 400;
  font-size: 54px;
  line-height: 0.88;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.16);
  pointer-events: none;
  user-select: none;
}
@media (min-width: 768px) {
  .vision-fv202610--hirao .vision-fv202610__deco-en {
    left: auto;
    right: 28px;
    bottom: 16px;
    align-items: flex-end;
    font-size: 128px;
  }
}

/*
 * SCROLL（英字＋縦線に黄色が流れる）。形は共通部品 .vision-scroll-cue（shared/fv-common.css）。
 * 平尾の差分だけ: ライト地（SP step1）は黒。最終段階は CTA・バナーと重なるので出さない（SP step2・PC step1 の __cue 指定で非表示）。
 */
.vision-fv202610--hirao .vision-fv202610__cue--line {
  transition: opacity 0.4s, color 0.35s;
}
.vision-fv202610--hirao.is-step-1 .vision-fv202610__cue--line {
  color: #0c0c0c;
  --scroll-cue-color: #0c0c0c;
  --scroll-cue-track: rgba(12, 12, 12, 0.18);
  --scroll-cue-flow: #0c0c0c;
}