<!-- ========================================  
  swiper Slide サムネイル連動
========================================  -->
<section id="Swiper-Slid">
 <!-- スライダー-->
 <div class="swiper--inner"> 

  <!-- メインスライド -->
  <!-- 「※」class指定必須 -->
  <div class="swiper swiperMain">
  <!-- ※swiper：swipe動作用 ※swiperMain：オリジナルjs紐づけ用　 -->
    <div class="swiper-wrapper"><!-- ※swiper-wrapper：swipe動作用 -->
       
        <div class="swiper-slide"> <!-- ※swiper-slide：swipe動作用 -->
          <img src="img/swiper-img01.jpg" alt="スライド1">
        </div>
        <div class="swiper-slide">
          <img src="img/swiper-img02.jpg" alt="スライド2">
        </div>
        <div class="swiper-slide">
          <img src="img/swiper-img03.jpg" alt="スライド3">
        </div>
        <div class="swiper-slide">
          <img src="img/swiper-img04.jpg" alt="スライド4">
        </div>
        <div class="swiper-slide">
          <img src="img/swiper-img05.jpg" alt="スライド5">
        </div>
        
    </div>
    <!-- 矢印(next/prev) -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <!-- サムネイルスライド -->
  <div class="swiper swiperThumbnail">
    <div class="swiper-wrapper">

      <div class="swiper-slide thumbnailImage">
        <img src="img/swiper-img01.jpg"><span>スライド1</span>
      </div>
      <div class="swiper-slide thumbnailImage">
        <img src="img/swiper-img02.jpg"><span>スライド2</span>
      </div>
      <div class="swiper-slide thumbnailImage">
        <img src="img/swiper-img03.jpg"><span>スライド3</span>
      </div>
      <div class="swiper-slide thumbnailImage">
        <img src="img/swiper-img04.jpg"><span>スライド4</span>
      </div>
      <div class="swiper-slide thumbnailImage">
        <img src="img/swiper-img05.jpg"><span>スライド5</span>
      </div>

    </div>
  </div>
</div>

</section>

/* =================================== */
/*   Swiper Slide サムネイル連動 --  */
/* =================================== */
/* 装飾用 */
#Swiper-Slid .swiper--inner {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}
#Swiper-Slid .swiperMain {
  cursor: pointer; /* 書いた方がいい！ */
}
#Swiper-Slid .swiperMain img {
  width: 70%;
  margin: 0 auto;
  border: #008b8b solid 3px;
}
#Swiper-Slid .swiperThumbnail {
  padding: 20px 40px;
  cursor: pointer; /* 書いた方がいい！ */
}
#Swiper-Slid .thumbnailImage img {
  margin-bottom: 5px;
  border: #008b8b solid 2px;
  border-radius: 100%;
}
#Swiper-Slid .thumbnailImage span {
  font-size: min(2.667vw,16px);
}

/* 矢印(next/prev) */
.swiper-button-next,
.swiper-button-prev {
  color: #008b8b;
}
.swiper-button-next:active,
.swiper-button-prev:active {
  color: #ff577f;
}

/* サムネイルが同期している時のアクション */
#Swiper-Slid .swiper-slide-thumb-active img{
  border: #ff577f solid 2px;
}
#Swiper-Slid .swiper-slide-thumb-active span {
  color: #ff577f;
}

// ==========================================
//   swiper Slide サムネイル連動
// ==========================================
//サムネイルの設定
var swiperThumbnail = new Swiper(".swiperThumbnail", {
  slidesPerView: 5,
  spaceBetween: 10,
  freeMode: true,
  watchSlidesProgress: true,
});

//メインスライドの設定
var swiperMain = new Swiper(".swiperMain", {
  loop: true,
  navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  thumbs: {
      swiper: swiperThumbnail,//サムネイルの同期指定
    },
});