/* ============================================
   s-gallery-03 — Swiper ギャラリースライダー
   ============================================ */
.s-gallery-03 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  padding-bottom: var(--space-xl);
}

.s-gallery-03 .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.s-gallery-03 .swiper-slide {
  /* margin は Swiper の spaceBetween が制御 */
}

.s-gallery-03 .swiper-slide img,
.s-gallery-03 .s-gallery-03__inner .wp-block-image img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.s-gallery-03 .swiper-slide figcaption {
  text-align: center;
  font-size: var(--font-size-2-xs);
  margin-top: var(--space-xs);
  color: var(--color-text-light);
}

/* 矢印ナビ */
.s-gallery-03 .swiper-button-prev,
.s-gallery-03 .swiper-button-next {
  color: var(--color-primary) !important;
  width: 4.4rem;
  height: 4.4rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  top: calc(50% - 2.4rem);
}

.s-gallery-03 .swiper-button-prev::after,
.s-gallery-03 .swiper-button-next::after {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-bold);
}

.s-gallery-03 .swiper-button-prev {
  left: var(--space-xl);
}

.s-gallery-03 .swiper-button-next {
  right: var(--space-xl);
}



@container (max-width: 599px) {
  .s-gallery-03 .swiper-slide {
    width: 22rem !important;
  }
  .s-gallery-03 .swiper-slide img {
    height: 15rem;
  }
  .s-gallery-03 .swiper-button-prev,
  .s-gallery-03 .swiper-button-next {
    width: 3.6rem;
    height: 3.6rem;
  }
  .s-gallery-03 .swiper-button-prev {
    left: var(--space-sm);
  }
  .s-gallery-03 .swiper-button-next {
    right: var(--space-sm);
  }
}