@charset "UTF-8";

@charset "UTF-8";

/* ===== MV Parallax ===== */
.mvParallax{
  position: relative;
  height: 240vh;

  --p: 0;

  /* SVG：上に抜ける */
  --textY: 0;   /* 0 -> -40 */
  --textA: 1;   /* 1 -> 0 */

  /* Copy：下から入って上へ流れる */
  --copyY: 22;  /* 22 -> -56 */
  --copyA: 0;   /* 0 -> 1 */
}

.mvParallax__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.mvParallax__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 暗幕（任意） */
.mvParallax__sticky::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}

.mvParallax__layers{
  position: relative;
  z-index: 2;
  height: 100%;
}

/* =========================
   SVGテキスト：FOUC完全抑止（最重要）
   - 初期は強制非表示（!important）
   - JSが準備完了で .is-ready を付与 → 初めて表示
   - 失敗時は .is-fallback
   ========================= */
.mvParallax__text{
  position: absolute;
  inset: 0;

  /* ★左揃え */
  display: grid;
  place-items: center start;
  padding-left: 6vw;

  /* ★初期は強制非表示（どんなCSS/JSが触っても出さない） */
  opacity: 0 !important;
  visibility: hidden !important;

  transform: translate3d(0, calc(var(--textY) * 1vh), 0);
  will-change: transform, opacity;
}

/* JS準備完了：スクロール連動で表示 */
.mvParallax.is-ready .mvParallax__text{
  visibility: visible !important;
  opacity: var(--textA) !important;
}

/* SVGロード失敗：フォールバックを表示 */
.mvParallax.is-fallback .mvParallax__text{
  visibility: visible !important;
  opacity: 1 !important;
  transform: none;
}

.mvParallax__text img,
.mvParallax__text svg{
  display: block;
  width: min(86vw, 720px);
  height: auto;
  margin: 0;
}

.mvParallax__text path,
.mvParallax__text polygon,
.mvParallax__text polyline,
.mvParallax__text rect,
.mvParallax__text circle,
.mvParallax__text ellipse,
.mvParallax__text text,
.mvParallax__text use{
  fill: #fff !important;
}

/* =========================
   Copy：参考書式 + 指定（#FFF / center）
   ========================= */
.mvParallax__copy{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10vh;

  max-width: 640px;
  margin: 0 auto;
  padding: 0 6vw;

  text-align: center;
  color: #fff;

  opacity: var(--copyA);
  transform: translate3d(0, calc(var(--copyY) * 1vh), 0);
  will-change: transform, opacity;
}

.mvParallax__copy h2{
  margin: 0 0 18px;
  font-size: clamp(22px, calc(7.8125vw + -38px), 42px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
}

.mvParallax__copy p{
  margin: 0;
  font-size: clamp(16px, calc(1.5625vw + 4px), 20px);
  letter-spacing: 0.1em;
  line-height: 2em;
  color: #fff;
}

@media (prefers-reduced-motion: reduce){
  .mvParallax__text,
  .mvParallax__copy{
    transform: none;
    opacity: 1;
    visibility: visible;
  }
}