@charset "UTF-8";

/**
 * トップ FV（全画面動画別案）
 * パターン: hirao-ropponmatsu-top-mv-fullvideo。読込は vision24_is_top_fullvideo_page() のページだけ。
 * 背景全画面の動画＋右下 h1＋下中央のスクロール表示。
 */

#mv.vision-hero--fullvideo {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  padding: 0;
  background: #000000;
}

/* top.css のノイズ地は動画の下に回す */
#mv.vision-hero--fullvideo::after { z-index: 0; }

.vision-hero--fullvideo .vision-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
}

/* 動画が出るまでの読み込み画面（黒地＋中央ロゴ）は共通部品 .vision-fv-loading（shared/fv-common.css） */

.vision-hero--fullvideo .vision-hero__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

/* 下側だけ暗くして h1・スクロール表示を読みやすく */
.vision-hero--fullvideo .vision-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 38%);
  pointer-events: none;
}

/* h1（SP は右上・ヘッダー 60px の下／PC は右下） */
#mv.vision-hero--fullvideo .vision-hero__h1 {
  position: absolute;
  z-index: 2;
  top: 72px;
  right: 16px;
  max-width: calc(100% - 32px);
  margin: 0;
  color: #FFFFFF;
  font-family: var(--f);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  text-align: right;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

/* メインコピー（スクロール表示の少し上・中央）
   小さい語と大きい語のジャンプ率＋全体を少し傾け、1行目は左から・2行目は右から入る */
.vision-hero--fullvideo .vision-hero__copy {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 32px);
  margin: 0;
  color: #FFFFFF;
  font-family: var(--f);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: .02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
  transform: translateX(-50%) rotate(-4deg);
}

/* 1行目は左・× は中央・2行目は右 */
.vision-hero--fullvideo .vision-hero__copy-line {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  align-items: flex-start;
  text-align: left;
}
.vision-hero--fullvideo .vision-hero__copy-line--pt {
  align-self: flex-end;
  align-items: flex-end;
  text-align: right;
}

.vision-hero--fullvideo .vision-hero__copy-sm {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
}

.vision-hero--fullvideo .vision-hero__copy-lg {
  display: inline-block;
  font-size: min(28px, 7vw);
  white-space: nowrap;
  transform: skewX(-8deg);
}

.vision-hero--fullvideo .vision-hero__copy-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  column-gap: .4em;
}

.vision-hero--fullvideo .vision-hero__copy-x {
  position: relative;
  z-index: 1;
  display: block;
  color: #FEE801;
  font-family: var(--f-en);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}

.vision-hero--fullvideo .vision-hero__copy-price {
  display: inline-flex;
  align-items: baseline;
  color: #FEE801;
  font-family: var(--f-en);
  white-space: nowrap;
}
.vision-hero--fullvideo .vision-hero__copy-unit { font-size: 16px; font-weight: 700; }
.vision-hero--fullvideo .vision-hero__copy-num {
  display: inline-block;
  margin: 0 .08em;
  font-size: min(40px, 10vw);
  font-weight: 900;
  line-height: 1;
}

/* 飾りの英字（3行の背景。読み上げ対象外） */
.vision-hero--fullvideo .vision-hero__copy-deco {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: transparent;
  font-family: var(--f-en);
  font-size: 72px;
  font-weight: 900;
  line-height: .9;
  letter-spacing: .06em;
  white-space: nowrap;
  text-shadow: none;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

/* 登場の動き。動画を待つ間は止めておき、動画が出るか2.5秒（top-fullvideo.js の is-copy-go）で動かす */
.vision-hero--fullvideo .vision-hero__copy-deco,
.vision-hero--fullvideo .vision-hero__copy-sm,
.vision-hero--fullvideo .vision-hero__copy-lg,
.vision-hero--fullvideo .vision-hero__copy-x,
.vision-hero--fullvideo .vision-hero__copy-unit,
.vision-hero--fullvideo .vision-hero__copy-num {
  animation-duration: .7s;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
  animation-fill-mode: both;
}
.vision-hero--fullvideo .vision-hero__copy-deco { animation-name: vision-hero-copy-fade; animation-duration: 1.4s; }
.vision-hero--fullvideo .vision-hero__copy-line--gym .vision-hero__copy-sm { animation-name: vision-hero-copy-from-left; animation-delay: .1s; }
.vision-hero--fullvideo .vision-hero__copy-line--gym .vision-hero__copy-lg { animation-name: vision-hero-copy-from-left-skew; animation-delay: .25s; }
.vision-hero--fullvideo .vision-hero__copy-x { animation-name: vision-hero-copy-spin; animation-delay: .6s; }
.vision-hero--fullvideo .vision-hero__copy-line--pt .vision-hero__copy-sm { animation-name: vision-hero-copy-from-right; animation-delay: .8s; }
.vision-hero--fullvideo .vision-hero__copy-line--pt .vision-hero__copy-lg { animation-name: vision-hero-copy-from-right-skew; animation-delay: .95s; }
.vision-hero--fullvideo .vision-hero__copy-unit { animation-name: vision-hero-copy-fade; animation-delay: 1.25s; }
.vision-hero--fullvideo .vision-hero__copy-num {
  animation-name: vision-hero-copy-pop;
  animation-delay: 1.25s;
  animation-timing-function: cubic-bezier(.3, 1.6, .5, 1);
}
.vision-hero--fullvideo:not(.is-copy-go):has(.is-fv-waiting:not(.is-fv-timeout)) .vision-hero__copy * { animation-play-state: paused; }

@keyframes vision-hero-copy-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vision-hero-copy-from-left {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: none; }
}
@keyframes vision-hero-copy-from-left-skew {
  from { opacity: 0; transform: translateX(-80px) skewX(-24deg); }
  to   { opacity: 1; transform: skewX(-8deg); }
}
@keyframes vision-hero-copy-from-right {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: none; }
}
@keyframes vision-hero-copy-from-right-skew {
  from { opacity: 0; transform: translateX(80px) skewX(-24deg); }
  to   { opacity: 1; transform: skewX(-8deg); }
}
@keyframes vision-hero-copy-spin {
  from { opacity: 0; transform: scale(.2) rotate(-180deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes vision-hero-copy-pop {
  from { opacity: 0; transform: scale(1.8); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vision-hero--fullvideo .vision-hero__copy * { animation: none !important; }
}

/* スクロール表示（下中央）。見た目は共通部品 .vision-scroll-cue（shared/fv-common.css）、ここは置き場所だけ */
.vision-hero--fullvideo .vision-hero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

@media (min-width: 960px) {
  #mv.vision-hero--fullvideo .vision-hero__h1 {
    top: auto;
    right: 40px;
    bottom: 48px;
    max-width: calc(50% - 120px); /* 下中央のスクロール表示に重ねない（狭いPCは語のまとまりで2行） */
    font-size: 16px;
  }

  .vision-hero--fullvideo .vision-hero__copy {
    bottom: 168px;
    width: min(1000px, calc(100% - 80px));
  }
  .vision-hero--fullvideo .vision-hero__copy-sm { font-size: clamp(18px, 1.6vw, 26px); }
  .vision-hero--fullvideo .vision-hero__copy-lg { font-size: clamp(40px, 4vw, 64px); }
  .vision-hero--fullvideo .vision-hero__copy-x { font-size: clamp(32px, 3vw, 48px); }
  .vision-hero--fullvideo .vision-hero__copy-unit { font-size: clamp(20px, 1.8vw, 28px); }
  .vision-hero--fullvideo .vision-hero__copy-num { font-size: clamp(52px, 5vw, 84px); }

  .vision-hero--fullvideo .vision-hero__copy-deco {
    flex-direction: row;
    gap: .3em;
    font-size: clamp(96px, 10vw, 168px);
    -webkit-text-stroke-width: 1.5px;
  }

}

/* ══════════════════════════════════════════════════════════
   式（24時間ジム × パーソナル ＝ 質×量）の見せ方を強める
   本トップと共通のパターン（hybrid-intro-202611）だが、この CSS は
   top-fullvideo のページだけで読むので、本トップの見た目は変わらない
   ══════════════════════════════════════════════════════════ */
.v24 .v24-equation__card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 3px solid #FEE801;
  border-radius: 4px;
  background: linear-gradient(160deg, #23262c 0%, #16181c 100%);
  container-type: inline-size; /* 背景英字をカード幅に合わせる */
  transition: transform .3s ease, border-color .3s ease;
}

/* カードの背景に英字（量＝QUANTITY／質＝QUALITY） */
.v24 .v24-equation__card::after {
  position: absolute;
  left: 6px;
  bottom: -6px;
  color: transparent;
  font-family: var(--f-en);
  font-size: 23cqw;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .2);
  pointer-events: none;
}
.v24 .v24-equation__card:nth-child(1)::after { content: "QUANTITY"; }
.v24 .v24-equation__card:nth-child(3)::after { content: "QUALITY"; }

.v24 .v24-equation__kind {
  position: relative;
  z-index: 1;
  font-weight: 700;
  letter-spacing: .12em;
}

.v24 .v24-equation__text {
  position: relative;
  z-index: 1;
  font-weight: 900;
  transform: skewX(-6deg);
  transform-origin: left bottom;
}
/* 2枚の高さをそろえるため、どの画面幅でも「いつでも、／何度でも」「正しく、／効かせる」の2行に固定 */
.v24 .v24-equation__text .vision-nowrap { display: block; }

/* ＝ 量／＝ 質 を大きく */
.v24 .v24-equation__value {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-family: var(--f);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  transform: skewX(-8deg);
  transform-origin: left bottom;
}

.v24 .v24-equation__op {
  font-size: 34px;
  font-weight: 900;
  transform: rotate(-8deg);
  text-shadow: 0 0 18px rgba(254, 232, 1, .35);
}
.v24 .v24-equation__eq { transform: none; }

/* 結果カード：下に厚み（立体感）＋黒の英字。ホバーで浮いて外側に黄色く光る */
.v24 .v24-equation__result {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 6px 0 #B8A800, 0 14px 28px rgba(0, 0, 0, .45);
  transition: transform .3s ease, box-shadow .3s ease;
}
.v24 .v24-equation__result::after {
  content: "RESULT";
  position: absolute;
  right: -4px;
  bottom: -12px;
  color: transparent;
  font-family: var(--f-en);
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 1.5px rgba(17, 19, 23, .14);
  pointer-events: none;
}
.v24 .v24-equation__result-title {
  position: relative;
  z-index: 1;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.3;
  text-wrap: balance;
  text-shadow: 2px 2px 0 rgba(17, 19, 23, .14);
  transform: skewX(-6deg);
  transform-origin: left bottom;
}
.v24 .v24-equation__result-text {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  font-weight: 700;
}

@media (hover: hover) {
  .v24 .v24-equation__card:hover {
    transform: translateY(-4px);
    border-color: rgba(254, 232, 1, .5);
    border-top-color: #FEE801;
  }
  .v24 .v24-equation__result:hover {
    transform: translateY(-6px);
    box-shadow:
      0 10px 0 #B8A800,
      0 0 0 1px rgba(254, 232, 1, .9),
      0 0 28px rgba(254, 232, 1, .55),
      0 0 64px rgba(254, 232, 1, .3),
      0 22px 40px rgba(0, 0, 0, .5);
  }
}

@media (min-width: 960px) {
  /* 960〜1200px はカードが細いので、文字は画面幅に合わせて伸び縮み */
  .v24 .v24-equation__card { padding: clamp(20px, 2vw, 32px) clamp(16px, 1.8vw, 28px) clamp(24px, 2.4vw, 36px); }
  .v24 .v24-equation__text { font-size: clamp(18px, 1.8vw, 28px); }
  .v24 .v24-equation__value { font-size: clamp(28px, 2.8vw, 44px); }
  .v24 .v24-equation__op { font-size: clamp(36px, 3.4vw, 56px); }
  .v24 .v24-equation__result { padding: clamp(20px, 2vw, 32px) clamp(20px, 2vw, 32px) 40px; }
  .v24 .v24-equation__result::after { font-size: clamp(64px, 6.4vw, 104px); bottom: -18px; }
  .v24 .v24-equation__result-title { font-size: clamp(20px, 2.1vw, 34px); }
}

/* 信頼バー（FV直下）：形は共通部品 .vision-trust--line（shared/trust-line.css）。トップは色だけチャコール地に */
.vision-trust--charcoal {
  --trust-line-bg: linear-gradient(90deg, #1f2125 0%, #2c2f34 50%, #1f2125 100%);
  --trust-line-fg: #E6E7E9;
  --trust-line-rule: rgba(255, 255, 255, .1);
  --trust-line-sep: rgba(254, 232, 1, .45);
  --trust-line-num: #DAAF08;
}

/*
 * 読み込み画面の NOW LOADING と線（共通部品 shared/fv-common.css・SP は既定の位置）は待機中だけ SCROLL の場所に出し、
 * SCROLL と文字用の下側の減光（黒地の上では NOW LOADING を暗くするだけ）を隠す。動画が流れるか8秒で戻る
 */
#mv.vision-hero--fullvideo:has(.is-fv-waiting:not(.is-fv-timeout)) .vision-hero__scroll,
.vision-hero--fullvideo .vision-hero__media.is-fv-waiting:not(.is-fv-timeout)::after {
  visibility: hidden;
}
@media (min-width: 960px) {
  .vision-hero--fullvideo .vision-fv-loading {
    --fv-loading-status-bottom: 63px;
  }
}