/* ============================
   top.css
   （トップページ専用 / 879pxブレイク統一）
============================ */

/* ============================
   mainvisual（トップビジュアル）
============================ */

/* デバイス別画像表示切替（PC=表示 / SP=879px以下で差し替え） */
.mv-img--pc {
  display: block !important;
}
.mv-img--sp {
  display: none !important;
}

@media (max-width: 879px) {
  .mv-img--sp {
    display: block !important;
  }
  .mv-img--pc {
    display: none !important;
  }
}

/* Swiper共通 */
.swiper {
  width: 100%;
  overflow: hidden;
}
.swiper-wrapper {
  display: flex;
}
.swiper-slide {
  flex-shrink: 0;
}

/* メインビジュアル画像 */
.mainvisual__slider img {
  width: 100%;
  height: auto;
  display: block;
}

/* ドット（ページネーション） */
.mainvisual__slider .swiper-pagination {
  position: absolute;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 22px;
}
.mainvisual__slider .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.mainvisual__slider .swiper-pagination-bullet-active {
  opacity: 1;
  background: #999;
}