/* banner.css - TOPページ用 縦型バナーと通常ページ用 横型バナー */

/* 共通設定 */
.global-banner-wrapper,
.top-banner-wrapper {
  width: 100%;
  overflow: hidden;
  margin-bottom: 2rem;
}

.swiper {
  width: 100%;
  height: auto;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* TOPページ用 縦型バナー */
.top-banner-wrapper {
  max-height: 75vh;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.top-banner-wrapper .swiper {
  width: 420px;
  aspect-ratio: 2 / 3;
}

.top-banner-wrapper .swiper-slide img {
  height: 100%;
  object-fit: cover;
}

/* 通常ページ用 横型バナー */
.global-banner-wrapper {
  aspect-ratio: 16 / 6;
  max-height: 280px;
  margin-bottom: 2rem;
  position: relative;
  z-index: 0;
}

.global-banner-wrapper .swiper-slide img {
  height: 100%;
  object-fit: cover;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .top-banner-wrapper {
    aspect-ratio: 3 / 5;
    max-height: 75vh;
  }

  .top-banner-wrapper .swiper {
    width: 100%;
    aspect-ratio: 3 / 5;
  }

  .global-banner-wrapper {
    aspect-ratio: 16 / 9;
    max-height: 180px;
  }
}