@charset "utf-8";

  #carousel .swiper.slider-pc,
  #carousel .swiper.slider-thumbnail-pc {
    display: none;
  }
  #carousel .swiper.slider-sp,
  #carousel .swiper.slider-thumbnail-sp{
    display: block;
    width: 100%;
  }

@media (min-width: 769px) {
  #carousel .swiper.slider-sp,
  #carousel .swiper.slider-thumbnail-sp {
    display: none;
  }
  #carousel .swiper.slider-pc,
  #carousel .swiper.slider-thumbnail-pc{
    display: block;
    width: 100%;
  }
}


#carousel .slider-thumbnail .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
}
#carousel .slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
#carousel .slider-thumbnail .swiper-wrapper{
  width: 90%;
  padding: 4% 0 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
#carousel .slider-thumbnail .swiper-slide{
  position: relative;
  line-height: 0;
  width: 7vw!important;
  border-radius: 50%;
  overflow: hidden;
  height: 7vw!important;
}
#carousel .slider-thumbnail img{
  width: 100%!important;
  object-fit: cover;
  height: 7vw!important;
}

@media screen and (min-width:960px) {
  #carousel .slider-thumbnail .swiper-wrapper{
    padding: 4% 0 0;
    gap: 15px;
  }
  #carousel .slider-thumbnail .swiper-slide{
    width: 4vw!important;
    height: 4vw!important;
  }
  #carousel .slider-thumbnail img{
    height: 4vw!important;
  }
}

#carousel .swiper-slide img {
  height: auto;
  width: 100%;
  cursor: pointer;
}
#carousel .swiper-button-next,
#carousel .swiper-rtl .swiper-button-prev{
  right: var(--swiper-navigation-sides-offset,0px);
}
#carousel .swiper-button-prev,
#carousel .swiper-rtl .swiper-button-next{
  left: var(--swiper-navigation-sides-offset,0px);
}
#carousel .swiper-button-next:after,
#carousel .swiper-button-prev:after{
  color: #ffffff;
  font-size: 1.25rem;
}
@media screen and (min-width:960px) {
  #carousel .swiper-button-next,
  #carousel .swiper-rtl .swiper-button-prev{
    right: var(--swiper-navigation-sides-offset,10px);
  }
  #carousel .swiper-button-prev,
  #carousel .swiper-rtl .swiper-button-next{
    left: var(--swiper-navigation-sides-offset,10px);
  }
  #carousel .swiper-button-next:after,
  #carousel .swiper-button-prev:after{
    font-size: 1.875rem;
  }
}