/* 親テーマの`.content div`スタイルを打ち消し */
.content .image-carousel div {
  margin-top: 0;
}

.image-carousel .swiper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.image-carousel .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
}
.image-carousel .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  object-fit: cover;
}
.image-carousel .image-carousel-main {
  height: 80%;
  width: 100%;
}
.image-carousel .image-carousel-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}
.image-carousel .image-carousel-thumbs .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
  cursor: pointer;
}
.image-carousel .image-carousel-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}
.image-carousel .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-carousel .swiper-button-next,
.image-carousel .swiper-button-prev {
  background-color: rgba(0,0,0,.33);
}
.image-carousel .swiper-button-next::before,
.image-carousel .swiper-button-next::after {
  translate: -20% 0;
}
.image-carousel .swiper-button-prev::before,
.image-carousel .swiper-button-prev::after {
  translate: 20% 0;
}