/*----------------------- INDEX Q_A -----------------------*/
#index_qa {
  margin: 0 auto clamp(35px, 70vw, 70px);

  #Q_A {
    max-width: 1000px;
    margin: 0 auto;

    h2 {
      margin: 0 0 clamp(30px, 4vw, 50px) 0;
      font-size: clamp(28px, 3.2vw, 32px);
      font-family: 'Open Sans';
      font-weight: 700;
    }
  }
}

/*----------------------- Q_A -----------------------*/
#Q_A {
  .container {
    width: min(100%,1050px);
    margin: 0 auto;

    ul.question {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 0;
      counter-reset: number 0;
      padding: 0 0 clamp(75px, 13vw, 130px) 0;

      li {
        display: block;
        break-inside: avoid;
        position: relative;

        &::after {
          position: absolute;
          counter-increment: number 1;
          content: "Q" counter(number);
          left: 0;
          top: -1px;
          font-weight: 700;
          font-size: clamp(16px, 2vw, 20px);
        }

        &.two_digits::after {
          left: -10px;
        }

        a {
          display: block;
          font-size: clamp(14px, 1.4vw, 18px);
          font-weight: 700;
          padding: 0 clamp(35px, 4.8vw, 48px) 10px;
        }
      }
    }

    dl.answer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 150px;
      counter-reset: number 0;

      dt {
        font-size: clamp(16px, 1.8vw, 18px);
        font-weight: 700;
        padding: 0 0 clamp(5px, 1.5vw, 15px) 50px;
        counter-increment: question;
        position: relative;

        &::before {
          counter-increment: number 1;
          content: "Q" counter(question) ".　";
          font-size: clamp(16px, 2vw, 20px);
          font-weight: 700;
          position: absolute;
          left: 0;
        }
      }

      dd {
        color: #707070;
        font-size: clamp(12px, 1.6vw, 16px);
        font-weight: 400;
        padding: 0 0 clamp(30px, 4.5vw, 45px) 50px;
        margin: 0;
      }
    }
  }
}

@media screen and (max-width: 640px) {
  #Q_A .container ul.question {
    grid-template-columns: repeat(1, 1fr);
  }
}