/* -----------------------
  steps
----------------------- */

.steps {
  background: url(../img/steps_bg.png) no-repeat center top / 100%;
  padding-bottom: min(calc(16 / 960 * 100vw), 16px);
}

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

.steps .step_slide .slick-slide img{
  width: min(calc(753 / 960 * 100vw), 753px);
  margin: 0 auto;
  text-align: center;
}
.steps .step_ttl {
  position: relative;
}

.steps .step_ttl p {
  position: absolute;
  top: min(calc(522 / 960 * 100vw), 522px);
  left: min(calc(188 / 960 * 100vw), 188px);
  width: min(calc(335 / 960 * 100vw), 335px);
}

.steps div[class^="step"] {
  display: grid;
  justify-items: center;
}

.steps div[class^="step"]>* {
  grid-area: 1 / 1;
  align-self: end;
}

.steps .step_01 {
  position: relative;
}

.steps .step_01_num {
  position: absolute;
  top: min(calc(390 / 960 * 100vw), 390px);
  left: min(calc(200 / 960 * 100vw), 200px);
  width: min(calc(286 / 960 * 100vw), 286px);
}

.steps .step_03 p {
  align-self: start;
}

.steps .step_02 {
  position: relative;
  z-index: 1;
}

.steps .step_02 .step_line {
  z-index: -1;
}

.steps .step_02 .step_pop {
  position: absolute;
  top: max(calc(-120 / 960 * 100vw), -120px);
  z-index: 0;
}


.steps .step_slide .slick-arrow {
  width: min(calc(72 / 750 * 100vw), 72px);
  height: min(calc(72 / 750 * 100vw), 72px);
  top: 50%;
  z-index: 5;
}

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

.steps .step_slide.slick-dotted.slick-slider {
  margin-bottom: min(calc(106 / 750 * 100vw), 106px);
}

.steps .step_slide .slick-prev {
  background: url(../img/step_arrow_l.png) no-repeat center / contain;
  left: min(calc(70 / 750 * 100vw), 70px);
}

.steps .step_slide .slick-next {
  background: url(../img/step_arrow_r.png) no-repeat center / contain;
  right: min(calc(70 / 750 * 100vw), 70px);
}

.steps .slick-dots {
  bottom: max(calc(-42 / 750 * 100vw), -42px);
  z-index: 2;
}

.steps .slick-dots li {
  margin: 0 min(calc(10 / 750 * 100vw), 10px);
  width: min(calc(103 / 750 * 100vw), 103px);
  height: min(calc(8 / 750 * 100vw), 8px);
}

.steps .slick-dots li button {
  content: "";
  padding: 3px;
  width: min(calc(103 / 750 * 100vw), 103px);
  height: min(calc(8 / 750 * 100vw), 8px);
  display: inline-block;
  text-align: center;
  line-height: 1;
  background: #DCB0C3;
}

.steps .slick-dots li.slick-active button {
  background: #842235;
  opacity: 1;
}

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