@charset "UTF-8";

.lp_wrap .leadtime {
  padding: 5% 0%;
  background-color: #96e100;
}
.lp_wrap .leadtime .hds_area {
  width: 300%;
  display: flex;
  align-items: center;
}
.lp_wrap .leadtime .hds_area > * {
  width: 100%;
  position: relative;
}
.lp_wrap .leadtime .hds_area .head > picture {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70.278%;
  margin: auto;
  position: relative;
  z-index: 1;
}
.lp_wrap .leadtime .hds_area .head span {
  position: absolute;
  z-index: 1;
}
.lp_wrap .leadtime .hds_area .head span:nth-of-type(1) {
  top: 33%;
  left: 17%;
  font-size: 1.4vw;
  letter-spacing: 0.05em;
}
.lp_wrap .leadtime .hds_area .head span:nth-of-type(2),
.lp_wrap .leadtime .hds_area .head span:nth-of-type(3) {
  top: 48.8%;
  font-size: 4.9vw;
  letter-spacing: 0.1em;
}
.lp_wrap .leadtime .hds_area .head span:nth-of-type(2) {
  left: 15%;
}
.lp_wrap .leadtime .hds_area .head span:nth-of-type(3) {
  left: 62%;
}
.lp_wrap .leadtime .hds_area .head .marker1 {
  position: absolute;
  top: 64%;
  left: 13%;
  width: 26.946%;
}
.lp_wrap .leadtime .hds_area .head .marker1 svg mask path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 597 597;
  stroke-dashoffset: 597;
  transition: 0.8s;
}
.lp_wrap .leadtime .hds_area .head.move .marker1 svg mask path {
  stroke-dashoffset: 0;
}
.lp_wrap .leadtime .hds_area .demo > picture {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 91.581%;
  margin: auto;
  position: relative;
  z-index: 1;
}
.lp_wrap .leadtime .hds_area .demo div:nth-of-type(1) {
  position: absolute;
  top: 25.6%;
  left: 6.4%;
  font-size: 1.6vw;
  letter-spacing: 0.05em;
}
.lp_wrap .leadtime .hds_area .demo div:nth-of-type(1) span {
  font-size: inherit;
  color: #6964dc;
}
.lp_wrap .leadtime .hds_area .demo div:nth-of-type(2) {
  position: absolute;
  top: 42%;
  left: 4.2%;
  font-size: 1.8vw;
  letter-spacing: 0.1em;
}
.lp_wrap .leadtime .hds_area .demo div:nth-of-type(3) {
  position: absolute;
  top: 49.6%;
  left: 4%;
  font-size: 3.3vw;
  letter-spacing: 0.1em;
  line-height: 1.6em;
}
.lp_wrap .leadtime .hds_area .demo .marker2 {
  position: absolute;
  top: 46%;
  left: 20%;
  width: 10.834%;
}
.lp_wrap .leadtime .hds_area .demo .marker2 svg mask path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 501 501;
  stroke-dashoffset: -501;
  transition: 0.8s;
}
.lp_wrap .leadtime .hds_area .demo.move .marker2 svg mask path {
  stroke-dashoffset: 0 !important;
}
.lp_wrap .leadtime .hds_area .demo .video-state {
  position: absolute;
  top: 8%;
  left: 36.5%;
  z-index: 2;
  width: 51.244%;
}
.lp_wrap .leadtime .hds_area .step > picture {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96.632%;
  margin: auto;
}
.lp_wrap .leadtime .hds_area .step ol li > * {
  position: absolute;
}
.lp_wrap .leadtime .hds_area .step ol li .number {
  display: grid;
  place-content: center;
  width: 4.4vw;
  aspect-ratio: 1 / 1;
  font-size: 2vw;
  letter-spacing: 0.05em;
  color: #ffffff;
  background-color: #9650ff;
  border-radius: 50%;
}
.lp_wrap .leadtime .hds_area .step ol li:nth-child(1) .number {
  top: 0%;
  left: 14.5%;
}
.lp_wrap .leadtime .hds_area .step ol li:nth-child(2) .number {
  top: 0%;
  left: 47.8%;
}
.lp_wrap .leadtime .hds_area .step ol li:nth-child(3) .number {
  top: 0%;
  left: 81.1%;
}
.lp_wrap .leadtime .hds_area .step ol li h4 {
  width: 30%;
  text-align: center;
  font-size: 1.6vw;
  letter-spacing: 0.05em;
}
.lp_wrap .leadtime .hds_area .step ol li:nth-child(1) h4 {
  top: 27%;
  left: 1.7%;
}
.lp_wrap .leadtime .hds_area .step ol li:nth-child(2) h4 {
  top: 27%;
  left: 35%;
}
.lp_wrap .leadtime .hds_area .step ol li:nth-child(3) h4 {
  top: 27%;
  left: 68.3%;
}
.lp_wrap .leadtime .hds_area .step ol li p {
  width: 23%;
  text-align: justify;
  font-size: 1.1vw;
  letter-spacing: 0.05em;
  line-height: 1.8em;
}
.lp_wrap .leadtime .hds_area .step ol li:nth-child(1) p {
  top: 74%;
  left: 5.3%;
}
.lp_wrap .leadtime .hds_area .step ol li:nth-child(2) p {
  top: 74%;
  left: 38.7%;
}
.lp_wrap .leadtime .hds_area .step ol li:nth-child(3) p {
  top: 74%;
  left: 72%;
}
.lp_wrap .leadtime .hds_area .step ol li p span {
  font-size: inherit;
}
.lp_wrap .leadtime .hds_area .step ol li p span::before {
  font-family: "Noto Sans JP", sans-serif;
  content: "<";
}
.lp_wrap .leadtime .hds_area .step ol li p span::after {
  font-family: "Noto Sans JP", sans-serif;
  content: ">";
}
@media all and (max-width: 750px) {
  .lp_wrap .leadtime {
    padding: 10% 0%;
  }
  .lp_wrap .leadtime .hds_area {
    width: 100%;
    display: block;
  }
  .lp_wrap .leadtime .hds_area .head > picture {
    width: 88.267%;
    margin: 0% auto 13%;
  }
  .lp_wrap .leadtime .hds_area .head span:nth-of-type(1) {
    top: 3.5%;
    left: 38.2%;
    font-size: 3.2vw;
  }
  .lp_wrap .leadtime .hds_area .head span:nth-of-type(2),
  .lp_wrap .leadtime .hds_area .head span:nth-of-type(3) {
    top: 87.9%;
    font-size: 8.1vw;
  }
  .lp_wrap .leadtime .hds_area .head span:nth-of-type(2) {
    left: 10.6%;
  }
  .lp_wrap .leadtime .hds_area .head span:nth-of-type(3) {
    left: 51%;
  }
  .lp_wrap .leadtime .hds_area .head .marker1 {
    top: 97%;
    left: 5%;
    width: 48%;
  }
  .lp_wrap .leadtime .hds_area .demo > picture {
    width: 104%;
    margin-left: -2%;
  }
  .lp_wrap .leadtime .hds_area .demo div:nth-of-type(1) {
    top: 1.8%;
    left: 37.7%;
    font-size: 3.1vw;
  }
  .lp_wrap .leadtime .hds_area .demo div:nth-of-type(2) {
    top: 11.3%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 4.4vw;
  }
  .lp_wrap .leadtime .hds_area .demo div:nth-of-type(3) {
    top: 17.6%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 7.1vw;
  }
  .lp_wrap .leadtime .hds_area .demo .marker2 {
    top: 14%;
    left: 53%;
    width: 25.333%;
  }
  .lp_wrap .leadtime .hds_area .demo .marker2 svg mask path {
    stroke-dasharray: 651 651;
    stroke-dashoffset: -651;
  }
  .lp_wrap .leadtime .hds_area .demo .video-state {
    top: 48%;
    left: 15%;
    z-index: 2;
    width: 70%;
  }
  .lp_wrap .leadtime .hds_area .step > picture {
    width: 87.333%;
    margin: 5% 0% 0% 2%;
  }
  .lp_wrap .leadtime .hds_area .step ol li .number {
    width: 10.6vw;
    font-size: 4.3vw;
  }
  .lp_wrap .leadtime .hds_area .step ol li:nth-child(1) .number {
    top: 4.9%;
    left: 5.4%;
  }
  .lp_wrap .leadtime .hds_area .step ol li:nth-child(2) .number {
    top: 39.6%;
    left: 5.4%;
  }
  .lp_wrap .leadtime .hds_area .step ol li:nth-child(3) .number {
    top: 74%;
    left: 5.4%;
  }
  .lp_wrap .leadtime .hds_area .step ol li h4 {
    width: 54.6%;
    text-align: left;
    font-size: 3.6vw;
    letter-spacing: 0.1em;
  }
  .lp_wrap .leadtime .hds_area .step ol li:nth-child(1) h4 {
    top: 5%;
    left: 34.7%;
  }
  .lp_wrap .leadtime .hds_area .step ol li:nth-child(2) h4 {
    top: 39.6%;
    left: 34.7%;
  }
  .lp_wrap .leadtime .hds_area .step ol li:nth-child(3) h4 {
    top: 74.2%;
    left: 34.7%;
  }
  .lp_wrap .leadtime .hds_area .step ol li p {
    width: 48%;
    font-size: 3.1vw;
    line-height: 1.9em;
  }
  .lp_wrap .leadtime .hds_area .step ol li:nth-child(1) p {
    top: 9.8%;
    left: 34.7%;
  }
  .lp_wrap .leadtime .hds_area .step ol li:nth-child(2) p {
    top: 44.3%;
    left: 34.7%;
  }
  .lp_wrap .leadtime .hds_area .step ol li:nth-child(3) p {
    top: 78.9%;
    left: 34.7%;
  }
  .lp_wrap .leadtime .hds_area .step ol li p span {
    font-size: inherit;
  }
  .lp_wrap .leadtime .hds_area .step ol li p span::before {
    font-family: "Noto Sans JP", sans-serif;
    content: "<";
  }
  .lp_wrap .leadtime .hds_area .step ol li p span::after {
    font-family: "Noto Sans JP", sans-serif;
    content: ">";
  }
}