#road .body {
  position: relative;
}

#qa-button .body {
  text-align: center;
  position: relative;
  overflow: visible;
}

.il,
.question,
.answer {
  position: absolute;
}

.qa-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.qa-buttons a {
  display: inline-block;
  max-width: 23.772%;
}

#qa-button h2 {
  width: 60.442%;
  margin: auto;
  padding-bottom: 2%;
}

.qa-road {
  margin-top: 4.8123%;
}

.i01 {
  width: 10.972%;
  left: 6.3522%;
  top: 1.1549%;
}

.i02 {
  width: 11.549%;
  right: 4.5235%;
  top: 6.256%;
}

.q1 {
  width: 24.735%;
  left: 6.641%;
  top: 0;
  z-index: 2;
}

.a1 {
  width: 28.392%;
  left: 23.869%;
  top: 4.8123%;
  z-index: 1;
}

.q2 {
  width: 28.007%;
  left: 68.431%;
  top: 8.6621%;
  z-index: 2;
}

.a2 {
  width: 30.221%;
  left: 53.609%;
  top: 17.751%;
  z-index: 1;
}

.q3 {
  width: 23.965%;
  left: 2.3099%;
  top: 23.066%;
  z-index: 2;
}

.a3 {
  width: 27.815%;
  left: 18.671%;
  top: 26.648%;
  z-index: 1;
}

.q4 {
  width: 26.756%;
  left: 60.635%;
  top: 39.818%;
  z-index: 2;
}

.a4 {
  width: 30.895%;
  left: 38.787%;
  top: 46.48%;
  z-index: 1;
}

.q5 {
  width: 22.425%;
  left: 8.4696%;
  top: 59.034%;
  z-index: 2;
}

.a5 {
  width: 28.488%;
  left: 22.521%;
  top: 64.889%;
  z-index: 1;
}

.question,
.answer {
  opacity: 0;
}

@keyframes loop {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

.answer img,
.qa-photo img {
  animation: loop 5s linear infinite;
}

.a1 img,
.p1 img {
  animation-delay: 0s;
}

.a2 img,
.p2 img {
  animation-delay: 0.4s;
}

.a3 img,
.p3 img {
  animation-delay: 0.8s;
}

.a4 img,
.p4 img {
  animation-delay: 1.2s;
}

.a5 img,
.p5 img {
  animation-delay: 1.6s;
}
.p6 img {
  animation-delay: 2s;
}

.qa-center {
  position: relative;
}
.qa-photo {
  position: absolute;
  opacity: 0;
}
.p1 {
  width: 48.508%;
  left: 5.2935%;
  top: 0;
}
.p2 {
  width: 43.022%;
  left: 49.663%;
  top: 2.5986%;
}
.p3 {
  width: 52.839%;
  left: 4.1385%;
  top: 28.562%;
}

.p4 {
  width: 42.059%;
  left: 51.684%;
  top: 28.966%;
}
.p5 {
  width: 82.001%;
  left: 4.331%;
  top: 65.73%;
}
.p6 {
  width: 37.824%;
  left: 55.726%;
  top: 82.56%;
}

.sp,.show-sp{
  display: none!important;
}
.pc,.show-pc {
  display: block!important;
}

@media screen and (max-width: 736px) {
  .sp,.show-sp {
    display: block!important;
  }
  .pc,.show-pc {
    display: none!important;
  }
  #qa-button h2 {
    width: 90%;
  }
  .qa-buttons {
    padding: 20px 0 0;
  }
  .qa-buttons a {
    max-width: 40%;
  }
  .qa-road {
    margin-top: 0;
  }

  .q1,
  .q2,
  .q3,
  .q4,
  .q5 {
    width: 50%;
  }
  .a1,
  .a2,
  .a3,
  .a4,
  .a5 {
    width: 55%;
  }

  .q1 {
    left: 2%;
    top: 0;
  }

  .a1 {
    left: unset;
    right: 2%;
    top: 4.8123%;
  }
  .q2 {
    left: unset;
    right: 6%;
    top: 16%;
  }

  .a2 {
    left: 2%;
    top: 21%;
  }
  .q3 {
    left: 2%;
    top: 33%;
  }

  .a3 {
    left: unset;
    right: 2%;
    top: 36%;
  }
  .q4 {
    left: unset;
    right: 2%;
    top: 48%;
  }

  .a4 {
    left: 1%;
    top: 53%;
  }
  .q5 {
    left: 3%;
    top: 66%;
  }

  .a5 {
    left: unset;
    right: 2%;
    top: 69%;
  }
  .p1,
  .p2,
  .p3,
  .p4,
  .p5,
  .p6 {
    width: 90%;
    left: unset;
    right: unset;
  }
  .p1 {
    left: 0;
    top: 0;
  }
  .p2 {
    left: 0;
    top: 12%;
  }
  .p3 {
    left: 0;
    top: 24%;
  }

  .p4 {
    left: 4%;
    top: 45%;
  }
  .p5 {
    left: 0;
    top: 59%;
  }
  .p6 {
    width: 86%;
    left: 3%;
    top: 86%;
  }
}