@charset 'UTF-8';

@media screen and (max-width: 767px){

 /*------ メインビジュアル --------*/

    /* アローボタン */
#swiper01 .swiper-button-prev,
#swiper01 .swiper-button-next {
  width: 6vw;
  height: 6vw;
  margin-top: -165px;
  /* opacity: 0.7; */
}
#swiper01 .swiper-button-prev {
  margin-left: -3.5vw;
  background: url("../images/swiper-button-prev.png") no-repeat center center / contain;
}
#swiper01 .swiper-button-prev::after {
  content: "";
}

#swiper01 .swiper-button-next {
  margin-right: -3.5vw;
  background: url("../images/swiper-button-next.png") no-repeat center center / contain;
}
#swiper01 .swiper-button-next::after {
  content: "";
}

/* ページネイション */
#swiper01 .swiper-pagination {
  top: 46.5%!important;
}
#swiper01 .swiper-pagination-bullet {
  width: 2vw !important;
  height: 2vw !important;
  margin: 0 0 0 3.5vw !important;
  background: #003670 !important;
}
#swiper01 .swiper-pagination-bullet:nth-of-type(2){
  background: #c39000 !important;
}
#swiper01 .swiper-pagination-bullet:nth-of-type(3){
  background: #036534 !important;
}
#swiper01 .swiper-pagination-bullet:first-child {
  margin: 0 !important;
}
#swiper01 .swiper-pagination-bullet {
  opacity: 0.3;
}
#swiper01 .swiper-pagination-bullet-active {
  opacity: 1;
}


 /*------ MVの下 テンプレート --------*/
 /* fadeエフェクト用 */
#swiper02 {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto; /* もしくは具体的な高さ */
}

#swiper02 .swiper-wrapper {
  position: relative !important;
}

#swiper02 .swiper-slide {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s;
}

#swiper02 .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

#swiper02 .swiper-slide-active {
  opacity: 1 !important;
  position: relative !important;
}

}