.mainSwiper-container {
  position: relative;
}

.subSwiper {
  box-sizing: border-box;
  padding: 10px 0;
  height:auto;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: gray;
  text-align: center;
}

 .swiper-slide img{
  max-height: 100%;
} 

.subSwiper .swiper-slide {
  opacity: 0.7;
}

.subSwiper .swiper-slide-thumb-active {
  opacity: 1;
}

@media all and (min-width: 480px){
  .mainSwiper .swiper-slide img {
    width: 100%;
    height: auto;
  }

  .swiper-container {
    width:70%;
    margin:auto;
  }
}

@media all and (max-width: 479px){
  .swiper-button-prev, .swiper-button-next{
    display: none;
  }
}

.swiper-button-prev, .swiper-button-next {
  color: #444444;
  opacity: 0.8;
  width: 4rem;
  height: 4rem;
  background-image: none;
  background: currentColor;
  border-radius: 50%;
  box-sizing: content-box;
  top:0;
  bottom:0;
  margin:auto;
}

.swiper-button-prev {
  left: -4.5rem;
}

.swiper-button-prev::before {
  content: '';
  color:#EEEEEE;
  width: 1.2rem;
  height: 1.2rem;
  border-style: solid;
  border-color: #EEEEEE;
  border-width: 0 0 3px 3px;
  transform: rotate(45deg);
  position: absolute;
  margin-left: 0.5rem;
}

.swiper-button-prev::after {
  content:'';
}

.swiper-button-next {
  right: -4.5rem;
}

.swiper-button-next::before {
  content: '';
  color:#EEEEEE;
  width: 1.2rem;
  height: 1.2rem;
  border-style: solid;
  border-color: #EEEEEE;
  border-width: 3px 3px 0 0;
  transform: rotate(45deg);
  position: absolute;
  margin-right: 0.5rem;
}

.swiper-button-next::after {
  content: '';
}

.swiper-pagination-bullet {
  background-color: #444444;
  border-color:#fff;
}

.swiper-scrollbar {
  margin-top:1.2rem;
  position: relative;
}

.swiper-scrollbar-drag{
  background-color: #040734;
}

.swiper-slide-thumb-active {
  transform: translateY(-3px);
  transition: .5s all;
}