/* =============================================================================
   Top MV（トップページ メインビジュアル）
   ============================================================================= */

/* コンテナ */
.top-mv {
  container-type: inline-size;
  position: relative;
  height: 900px;
}


/* ---- 背景・スライド ---- */

.top-mv__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.top-mv__slides {
  position: absolute;
  inset: 0;
}

/* 各スライド: デフォルトは非表示、is-active で表示 */
.top-mv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.top-mv__slide.is-active {
  opacity: 1;
}

/* 背景画像: Figma 指定のトリミング位置（上部 -15.4%、高さ 142.22%）を再現 */
.top-mv__slide img {
  position: absolute;
  top: -15.4%;
  left: 0;
  width: 100%;
  height: 142.22%;
  object-fit: cover;
  max-width: none;
}

/* 青のオーバーレイ */
.top-mv__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 95, 161, 0.25);
}

/* ---- キャッチコピー（文字スタイルは heading-1 が担当） ---- */

.top-mv__catch {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 1;
}

/* ---- Wave（wave-anime コンポーネント用コンテナ） ---- */

.top-mv__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
}

/* 白の波: 下部に配置（元の bottom: -20px 相当） */
.top-mv__wave .wave-anime.is-over {
  bottom: -20px;
}

/* =============================================================================
   TOPページ コンテンツラッパー（MV 直下）
   ============================================================================= */

.top-contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--margin-120);
  padding: var(--margin-56) 0 0;
  width: 100%;
}

/* ---- SP 対応 ---- */

@container (max-width: 640px) {
  .top-mv__catch {
    white-space: normal;
    text-align: center;
    width: 100%;
  }

  .top-contents {
    padding-top: var(--margin-16);
    gap: var(--margin-64);
  }
}