.slider {
  width: 100%;
  opacity: 0;
  transition: opacity .3s linear;
}

.slider.slick-initialized {
  opacity: 1; /*slick-initializedが付与されたら表示*/
}

.slick-img img {
  width: 100%;
  height: auto;
}
.slick-dotted.slick-slider{
  margin: 0;
}
.slick-num{
  padding: 8px;
  text-align: center;
}

#products-slider_thumbs img {
  cursor: pointer;
}

@media (max-width: 430px) {

}
/*------ products-items -------*/
#products-slider {  /*(.slider)*/
  width: 100%;
}
#products-slider_thumbs {  /*(.slider)*/
  width: 100%;
}
#products-slider_thumbs {  /*(.slider)*/
  display: flex;
  justify-content: space-around;
}
#products-slider_thumbs .slick-list.draggable {  /*(.slider)*/
  width: calc(100% - 50px);
}
#products-slider_thumbs img{
  border:  1px solid #eeeeee;
  opacity: 0.9; /*透明度*/
}
#products-slider_thumbs .slick-current img{
  border: 1px solid #979797;
  opacity: 0.9; /*透明度*/
}
#products-slider_thumbs .slick-slide {
  padding:5px;
}
#products-slider .slick-num {
  display: flex;
  justify-content: center;
  letter-spacing: 0.5em;
  margin: 5px;
}
#products-slider .slick-disabled, 
#products-slider_thumbs .slick-disabled {
  visibility:hidden
}
/*--------------------------
↓スライダーのドットの調整 start
--------------------------*/

  /*ドットの不要なスタイルを外す*/
.slick-dots li button{
  background:initial;
}
.slick-dots li button:before{
  content:none;
}
.slick-dots > li:first-child:last-child { /*画像一枚の時は非表示*/
  display: none;
}
  /*スタイルを設定*/
.slick-dots li{
  width: 10px;
  height: 10px;
  margin: 10px;
}
.slick-dots li button{
  width:100%;
  height:100%;
  background: #a5a5a5;
  border: 1px solid #efefef;
  color:#efefef;
  opacity: 90%; /*透明度*/
  border-radius: 20%; /*丸*/
  padding: 0px;
}
  /*アクティブボタンの設定*/
.slick-dots li.slick-active button{
  background:#efefef;
  opacity: 90%; /*透明度*/
}
  /*位置を変える*/
.slick-dots {
  bottom: 5px;
}

/*--------------------------
↑スライダーのドットの調整 end
--------------------------*/


/*--------------------------
↓矢印の調整 start
--------------------------*/
.slick-arrow {
  display: block;
  position: absolute;
  margin: auto;
  padding: 0;
  width: 20px;
  height: 20px;
  color: transparent;
  z-index: 1;
  transition: opacity 0.5s;
  z-index: 1;
}
.slick-arrow:hover {
  opacity: 0.7;
}

/* 共通設定 */

.slick-next::before,
.slick-next::after,
.slick-prev::before,
.slick-prev::after {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.slick-next::after,
.slick-prev::after {
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.products-item .slick-next::after,
.products-item .slick-prev::after {
  border-top: 2px solid #d3d3d3;
  border-right: 2px solid #d3d3d3;
}

/* next */
.slick-next {
  right: 26px;
}
.slick-next::after {
  right: 4px;
  transform: rotate(45deg);
}

/* prev */
.slick-prev {
  left: 26px;
}
.slick-prev::after {
  left: 4px;
  transform: rotate(-135deg);
}

/*------ products-items -------*/

#products-slider .slick-arrow{
  margin: 0 15px;
}
#products-slider_thumbs .slick-arrow {
  margin: 0 5px;
}
/* next */
#products-slider .slick-next, 
#products-slider_thumbs .slick-next {
  right: 0;
}
#products-slider .slick-next::after, 
#products-slider_thumbs .slick-next::after {
  right: 0;
}

/* prev */
#products-slider .slick-prev, 
#products-slider_thumbs .slick-prev {
  left: 0;
}
#products-slider .slick-prev::after, 
#products-slider_thumbs .slick-prev::after {
  left: 0;
}


/*--------------------------
↑矢印の調整 end
--------------------------*/