body {
  width: 100%;
  margin: 0;
}
img {
  max-width: 100%;
  height: auto;
}
.lp-all {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}
.header {
  display: flex;
  flex-direction: column;
  width: 750px;
  height: auto;
  position: relative;
}
.contents {
  width: 750px;
  height: auto;
}
.content-btn {
  position: absolute;
  bottom: -405px;
  left: 50%;
  transform: translate(-50%, 0px);
  width: 80%;
}
.contents img {
  margin-top: -7px;
}
.btn-contents {
  position: relative;
}
.content-btn2 {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translate(-50%, 0px);
  width: 80%;
}
.btn-contents3 {
  position: relative;
}
.content-btn3 {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translate(-50%, 0px);
}



input[type="radio"] {
  display: none;
}

label > img.active {
  display: none;
}

input[type="radio"]:checked + label > img {
  display: none;
}

input[type="radio"]:checked + label > img.active {
  display: block;
}

label > span {
  display: block;
  text-align: center;
  margin-top: 37px;
  font-size: 27px;
  letter-spacing: 0.2em;
  font-weight: 700;
  position: absolute;
  bottom: -51px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  line-height: 1;
  white-space: nowrap;
}

label > span.center {
  left: 30%;
}

.question ul.patter2 label > span {
  letter-spacing: 0.075em;
}

.question ul.patter3 label > span {
  letter-spacing: 0.1em;
}

.line-btn {
  width: 81.55555555555%;
  margin: 0 auto;
}

.line-btn a.active {
  display: none;
}

.line-btn a.is-active {
  display: block;
  border-radius: 10px;
}

.line-btn .deactivate.is-hidden {
  display: none;
}

.question.question1 {
  position: relative;
}
.question.question2 {
  position: relative;
}
.question.question3 {
  position: relative;
}
.sec7 ul {
    list-style: none;
    display: flex;
    justify-content: center;
    width: 750px;
    gap: 165px;
    padding: 0;
    position: absolute;
    bottom: 100px;
}
.patter2 {
  list-style: none;
  display: flex; */
  /* /* justify-content: center; */
  width: 750px;
  /* gap: 165px; */
  padding: 0;
  top: 170px;
}
.patter2.second {
  top:  400px;
}
.patter2.third {
  top: 650px;
}
.patter3 {
  list-style: none;
  display: flex; */
  /* /* justify-content: center; */
  width: 750px;
  /* gap: 165px; */
  padding: 0;
  top: 170px;
}
.patter3.second {
  top:  400px;
}
.patter3.third {
  top: 650px;
}
.question2-content {
  list-style: none;
  display: flex;
  justify-content: center;
  width: 750px;
  gap: 165px;
  padding: 0;
  position: absolute;
  bottom: 100px;
}



.pick {
  width: 79.33333333%;
  position: absolute;
  bottom: 10.68%;
  left: 10.22222%;
  display: block;
  animation-name: pickup;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
@keyframes pickup {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes pickup2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.step3 {
  position: fixed;
  bottom: 10px;
  transform: translateX(30px);
  width: 90.66666%;
  max-width: 816px;
}

@media (max-width: 768px) {
  .contents {
    width: 100%;
  }
  .header {
    width: 100%;
  }
  .sec7 ul {
    width: 100%;
    max-width: 60%;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 52px;
    gap: 110px;
  }
  .patter2 {
    top: 19%;
  } 
  .patter2.second {
    top:43%;
  }
  .patter2.third {
    top: 69%;
    max-width: 17%;
  } 
  .patter3 {
    top: 19%;
  }
  .patter3.second {
    top:43%;
  }
  .patter3.third {
    top: 69%;
    max-width: 17%;
  } 
  .content-btn3 {
    bottom: -5%;
  }
  .content-btn {
    bottom: 0;
    transform: translate(-50%, 192%);
  } 
  .step3 {
    transform: translateX(19px);
  }
}