/* slider */
    .slider {
      display: flex;
      /* dotsを中央寄せにするため､flexに */
      flex-direction: column;
      align-items: center;
    }

    .slick-list {
      width: 100%;
      box-sizing: border-box;
      margin: 0 0 20px;
    }

    /* slide (ここはお好みで) */
/*     .slick-slide {
      margin: 0 10px;
      border-radius: 16px;
      overflow: hidden;
    } */

    /* dots */
    .slider .slick-dots {
display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: auto;
    width: 100%;
    }

    .slick-dots li {
/*       width: auto;
      height: 8px;
      margin: 0 8px; */
      display: inline-block;
      width: calc(5%);
      margin: 0 2px;
      height: 10px;
    }

    .slick-dots li button {
      display: block;
      position: relative;
      width: 100%;
      height: 4px;
      padding: 0;
      border-radius: 0;
      background: #e2e2e2;
      transition: 1s;
      /* speed と同じ値に */
    }

.slick-dots li.slick-active button {
  background: #b1b0a9;
}

    .slick-dots li button:before {
      display: none;
    }

/*     .slick-dots li.slick-active button {
      width: 70px;
    } */

    .slick-dots li.slick-active button::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 0px;
      height: 100%;
      border-radius: 4px;
      background: #e6000d;
      overflow: hidden;
      animation: slick_dot 5.5s 1s linear forwards;
      /* durationはautoplaySpeed､delayはspeedと同じ値に */
    }

    @keyframes slick_dot {
      0% {
        width: 0px;
      }
      100% {
        width: 100%;
      }
    }

    /* 一時停止ボタン */
    .slick_pause {
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: url(pause.png) 50% 50% / 14px auto no-repeat;
    cursor: pointer;
    border: solid 1px #ddd;
    outline: none;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    margin-right: 10px; 
    }

    .slick_pause.paused {
      background-image: url(start.png);
    }

    .slider.paused .slick-dots li.slick-active button::before {
      animation-play-state: paused;
      /*一時停止中はanimationを一時停止*/
    }

/*追加*/
.slick-dotted.slick-slider {
   margin-bottom:0;
}

.slider-img {
  margin: 0;
}

/*矢印*/
.slick-arrow {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 20px;
  height: 38px;
  color: transparent;
  z-index: 1;
  transition: opacity 0.5s;
}
.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: 26px;
  height: 26px;
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
}

/* 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);
}

@media screen and (max-width: 767px) {
  .slick-next::after,
  .slick-prev::after {
    width: 10px;
    height: 10px;
  }
  .slick-next {
    right: 8px;
  }
  .slick-prev {
    left: 8px;
  }
  .slick-next::after {
    right: 2px;
  }
}
/*矢印ここまで*/

.pause_box {
    max-width:980px;
    margin: 0 auto;
    display: flex;
    justify-content:flex-end;
}
/*左右グレー*/
.slick-list:before{
    position: absolute;
    content: "";
    width: 1438px;
    /* max-width: 1980px; */
    height: 100%;
    background: none;
    border-right: solid 1000px #000;
    border-left: solid 1000px #000;
    opacity: .5;
    z-index: 1;
    pointer-events: none;
    /* left: 0; */
    /* top: 0; */
   left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, -50%);
}