/* =========================================================
   FV Hero Animation
========================================================= */

.l-vArea {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.fvHero {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1614;
  overflow: hidden;
  background: #000;
}

.fvHero-part {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}

.fvHero-part img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 背景 */
.fvHero-bg {
  inset: 0;
  opacity: 1;
}

.fvHero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}

/* コピーライト 182px x 148px */
.fvHero-cp {
  left: 3.9%;
  top: 2.0446%;
  width: 18.2%;
  z-index: 20;
}

/* キャッチコピー 110px x 299px */
.fvHero-copy {
  left: 50%;
  top: 9.1078%;
  width: 11%;
  transform: translateX(-50%);
  z-index: 20;
}

/* 上側の雲 186px x 104px */
.fvHero-mv03a {
  left: 19%;
  top: 32.2181%;
  width: 18.6%;
  z-index: 11;
}

/* メインイメージ01 635px x 525px */
.fvHero-mv01 {
  left: 50%;
  top: 33.1475%;
  width: 63.5%;
  transform: translateX(-50%);
  z-index: 14;
}

/* メインイメージ02 178px x 108px */
.fvHero-mv02 {
  left: 16%;
  top: 48.3271%;
  width: 17.8%;
  z-index: 12;
}

/* メインイメージ03 186px x 104px */
.fvHero-mv03 {
  left: 48.2%;
  top: 51.7968%;
  width: 18.6%;
  z-index: 13;
}

/* メインイメージ04 466px x 478px */
.fvHero-mv04 {
  left: 18.25%;
  top: 32.2181%;
  width: 46.6%;
  z-index: 10;
  transform-origin: center bottom;
}

/* データ 822px x 363px */
.fvHero-data {
  left: 50%;
  bottom: 0.99%;
  width: 82.2%;
  transform: translateX(-50%);
  z-index: 20;
}


/* =========================================================
   初回表示アニメーション
========================================================= */

.fvHero.is-animated .fvHero-bg img {
  animation: fvBgZoom 2.8s ease forwards;
}

/* 同時表示グループ */
.fvHero.is-animated .fvHero-cp {
  animation: fvFadeUp 1.1s ease .2s forwards;
}

.fvHero.is-animated .fvHero-copy {
  animation: fvFadeUpCenter 1.1s ease .2s forwards;
}

.fvHero.is-animated .fvHero-mv01 {
  animation: fvFadeUpCenter 1.2s ease .2s forwards;
}

.fvHero.is-animated .fvHero-mv02 {
  animation:
    fvFadeFloatRight 1.2s ease .2s forwards,
    cloudFloatSame 10s ease-in-out 1.5s infinite alternate;
}

.fvHero.is-animated .fvHero-mv03 {
  animation:
    fvFadeFloatRight 1.2s ease .2s forwards,
    cloudFloatSame 10s ease-in-out 1.5s infinite alternate;
}

.fvHero.is-animated .fvHero-data {
  animation: fvFadeUpCenter 1.15s ease .2s forwards;
}

/* 落下グループ */
.fvHero.is-animated .fvHero-mv04 {
  animation: fvDropBounce 0.5s cubic-bezier(0.2, 0.75, 0.2, 1) 1.5s forwards;
  transform-origin: center bottom;
}

/* =========================================================
   Keyframes
========================================================= */

@keyframes fvBgZoom {
  0% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fvFadeUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fvFadeUpCenter {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 24px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes fvFadeFloatRight {
  0% {
    opacity: 0;
    transform: translate3d(18px, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 雲を同じ動きで左右にゆっくり */
@keyframes cloudFloatSame {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-12px, 2px, 0);
  }
  100% {
    transform: translate3d(12px, -2px, 0);
  }
}

/* 上からドスン → 着地でつぶれる → ビヨン */
@keyframes fvDropBounce {
  0% {
    opacity: 0;
    transform: translate3d(0, -180px, 0) scaleY(1.06) scaleX(0.98);
  }
  58% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleY(0.88) scaleX(1.08);
  }
  74% {
    opacity: 1;
    transform: translate3d(0, -16px, 0) scaleY(1.03) scaleX(0.99);
  }
  88% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleY(0.96) scaleX(1.03);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleY(1) scaleX(1);
  }
}