@charset "utf-8";

/*---------------mv-topの基本設定---------------*/
.mv_top_wrapper {
  position: relative;
  /*padding-top: min(2.08vw, 30px);
  padding-inline: min(2.08vw, 30px);
  padding-bottom: min(2.08vw, 30px);*/ /*paddingさせたい場合はコメントアウト解除*/
  background-color: var(--bg-beige);
  overflow-x: hidden; /* 横スクロールを防止 */
  max-width: 100vw; /* 画面幅を超えないように */
  margin-top: 70px; /* ヘッダー分の余白 */
}
/*---------------mv-topコンテンツの基本設定---------------*/
.mv_top_content {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-x: hidden; /* 横スクロールを明示的に防止 */
}

.mv_top_content ul {
  /*position: relative;*/ /*/*余白させたい場合はコメントアウト解除*/
  width: 100%;
  aspect-ratio: 2 / 1; /* 2:1の比率を維持 */
}

@media screen and (max-width: 768px) {
  .mv_top_content ul {
    aspect-ratio: 16 / 9; /* 横:縦 の比率 */
  }
}

.mv_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1; /* グラデーションより下に配置 */
}

.mv_image.active {
  opacity: 1;
}