@charset "utf-8";
/* --------------------------------------------------------
	publicSlider
-------------------------------------------------------- */

/* プラグインのcssを操作しない、自分のcssファイルの方に
上書きする設定をして対処 */


.slider-container{
  width: 100%;
  padding-bottom: 20px;
  display: flex;
}
.slider-container #slider {
  width: 70%;
}
.slider-container #thumbs {
  width: 30%;
}
.slider-container #thumbs .slick-track{
  transform: unset !important;
  width: 100% !important;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;

}

 
/* サムネイルPC */
/* display: flex;を指定、transformをunsetにする */
#thumbs .slick-track {
  transform: unset !important;
  width: 100% !important;
  display: flex;
}
/* flexの値を変更し列数を変更 */
#thumbs .slick-slide {
  display: block!important;
  float: none !important;
  /* サムネイルの画像の幅（並び方）はここで設定↓ */
  flex: 47.5%;
  padding: 0 2%;
  /* background: red; */
}
/* サムネイルsp */
@media screen and (max-width: 768px){   

  .slider-container{
    width: 100%;
    /* padding-bottom: 20px; */
    display: block;
    padding: 0 0.5%;
  }
  .slider-container #slider {
    width: 100%;
  }
  .slider-container #thumbs {
    width: 100%;
    margin: 0 auto;
  }
  #thumbs .slick-slide {
    display: block!important;
    float: none !important;
    /* サムネイルの画像の幅（並び方）はここで設定↓ */
    flex: 24%;
    padding: 0 2%;
    /* background: red; */
  }

}






/* カルーセルしている画像の指定 */
.slick-slide img {
  width: 100%;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: 0.5s;
}

.slick-current {
  opacity: 1;
}


/* 下数字の設定 */
.slick-num{
  z-index: 3;
  font-size: 1rem;
  text-align: right;
  height: 1rem;
}
.slick-prev {
  left: 0;
}
.slick-next {
  right: 0;
}