@charset "UTF-8";

/* FLOCSS: Component - Carousel */
.c-carousel {
  --carousel-max-width: 960px;
  --carousel-aspect-ratio: 16/9;
  --nav-size: 48px;

  margin: 0 auto;
  max-width: var(--carousel-max-width);
  position: relative;
}

.c-carousel__swiper {
  aspect-ratio: var(--carousel-aspect-ratio);
  width: 100%;
  border-radius: 16px;
  /* overflow: hidden; */
  /* background: #f6f7f9; */
}

/* 画像はコンテナにフィット（画像のみの要件） */
.c-carousel .swiper-slide > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ナビゲーションボタン（アクセシビリティを考慮しフォーカスリング） */
.c-carousel__nav {
  width: clamp(1px, calc(30.7 / 393 * 100vw), 59px) !important;
  height: clamp(1px, calc(25.85 / 393 * 100vw), 49px) !important;
  background-color: #d9d9d9;

  top: clamp(1px, calc(308 / 393 * 100vw), 588px) !important;
  margin-top: unset !important;
}

.c-carousel__nav[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ページネーションは控えめに */
.c-carousel__pagination {
  bottom: 8px !important;
}

/* SR向け説明文（画面非表示） */
.c-carousel__sr-instructions {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* 追加 */
section.c-carousel {
  position: relative;
}
/* .swiper-wrapper { */
.swiper.c-carousel__swiper {
  width: calc(273 / 393 * 100vw);
  max-width: 521px;
  height: auto;
  aspect-ratio: 273/296;
  position: absolute;
  top: clamp(1px, calc(189 / 393 * 100vw), 360px);
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}
.swiper-slide {
  width: 100%;
  height: auto;
  aspect-ratio: 273/296;
}
button.swiper-button-prev {
  clip-path: polygon(0 50%, 70% 0, 70% 100%, 0 50%);
  color: #d9d9d9;
  left: clamp(1px, calc(19 / 393 * 100vw), 36px);
}
button.swiper-button-next {
  clip-path: polygon(30% 0, 100% 50%, 30% 100%, 30% 0);
  color: #d9d9d9;
  right: clamp(1px, calc(19 / 393 * 100vw), 36px);
}