/* -----------------------
  howto
----------------------- */
.howto{
  background: url(../img/howto_bg.png) no-repeat center top / 100%;
}

.how_slide div{
  width: min(calc(860 / 960 * 100vw), 860px);
  margin: 0 auto;
}

.how_slide div img{
  width: min(calc(797 / 960 * 100vw), 797px);
  margin: 0 auto;
}

.howto .how_slide .slick-arrow {
    width: min(calc(36 / 960 * 100vw), 36px);
    height: min(calc(70 / 960 * 100vw), 70px);
    top: 42.8%;
    z-index: 5;
}

.howto .slick-arrow::before {
    content: none;
}

.howto .how_slide.slick-dotted.slick-slider {
    padding-bottom: min(calc(164 / 960 * 100vw), 164px);
    margin-bottom: 0;
}

.howto .how_slide .slick-prev {
    background: url(../img/how_arrow_l.png) no-repeat center / contain;
    left:  min(calc(22 / 960 * 100vw), 22px);
}

.howto .how_slide .slick-next {
    background: url(../img/how_arrow_r.png) no-repeat center / contain;
    right:  min(calc(22 / 960 * 100vw), 22px);
}

.howto .slick-dots {
    bottom: min(calc(95 / 960 * 100vw), 95px);
    z-index: 2;
}

.howto .slick-dots li {
    margin: 0 min(calc(8 / 960 * 100vw), 8px);
    width: min(calc(26 / 960 * 100vw), 26px);
    height: min(calc(26 / 960 * 100vw), 26px);
}

.howto .slick-dots li button {
    content: "";
    padding: 3px;
    width: min(calc(26 / 960 * 100vw), 26px);
    height: min(calc(26 / 960 * 100vw), 26px);
    display: inline-block;
    text-align: center;
    line-height: 1;
    border: 2px solid #1A1A1A;
    border-radius: 50%;
}

.howto .slick-dots li.slick-active button {
    background: #1A1A1A;
    opacity: 1;
}

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