@charset "utf-8";

/* =====================
  inner
===================== */
.qa-contents main article {
  counter-reset: answer;
}
.qa-contents main article .inner {
  counter-reset: number;
  padding-block-end: calc((100 / 750) * 128 * 1vw);
}

/* =====================
  title
===================== */
.qa-contents .second-title::after {
  background-image: url('../../img/qa/title_sp.png');
  width: calc((100 / 750) * 49 * 1vw);
  height: calc((100 / 750) * 20 * 1vw);
}

.qa-lead {
  font-size: calc((100 / 750) * 28 * 1vw);
  font-weight: 500;
  margin-block-start: 5.6vw;
  padding-inline: calc((100 / 750) * 30 * 1vw);
  letter-spacing: calc((100 / 750) * 0.4 * 1vw);
  line-height: 1.7;
}

.qa-lead2 {
  font-size: calc((100 / 750) * 36 * 1vw);
  font-weight: 500;
  color: rgb(79, 155, 101);
  margin-block-start: 8.8vw;
  display: block flex;
  align-items: center;
  letter-spacing: 1px;
  position: relative;
  padding-inline-start: 5.4vw;

  &::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 2vw;
    inline-size: calc((100 / 750) * 31 * 1vw);
    block-size: calc((100 / 750) * 31 * 1vw);
    background: currentColor;
    aspect-ratio: 1 / 1;
    line-height: 1;
    border-radius: calc(infinity * 1px);
  }
}

/* =====================
  qa-list
===================== */
.qa-list {
  display: block grid;
  gap: calc((100 / 750) * 40 * 1vw);
  padding-block-start: calc((100 / 750) * 32 * 1vw);

  /* =====================
    details
  ===================== */
  & details {
    border-radius: calc((100 / 750) * 40 * 1vw);
    background-color: rgb(254, 240, 208);
  }

  /* =====================
    summary
  ===================== */
  & summary {
    cursor: pointer;
    padding-inline: calc((100 / 750) * 30 * 1vw);
    padding-block: calc((100 / 750) * 48 * 1vw);
    display: block grid;
  }

  /* =====================
    container
  ===================== */
  .container {
    display: grid;
    grid-template-rows: 0fr;
    grid-template-columns: 1fr;
    padding-block-end: 7.5vw;
    padding-inline: calc((100 / 750) * 30 * 1vw) calc((100 / 750) * 30 * 1vw);
    overflow: hidden;
    transition: grid-template-rows 250ms ease 0ms;
    animation: none;
    will-change: grid-template-rows;
  }

  /* ==== question ==== */
  & h2 {
    font-size: calc((100 / 750) * 28 * 1vw);
    color: rgb(239, 129, 31);
    line-height: 1.615;
    position: relative;
    font-weight: 500;
    padding-inline-start: 10vw;
    padding-inline-end: 12vw;

    &::before {
      counter-increment: number;
      font-weight: 500;
      content: 'Q' counter(number) '.';
      position: absolute;
      inset-inline-start: 0;
      inset-block-start: 0;
    }

    &::after {
      content: '';
      position: absolute;
      mask-repeat: no-repeat;
      mask-size: contain;
      mask-position: center;
      background: currentColor;
      aspect-ratio: 1 / 1;
      inset-inline-end: 0.3vw;
      inset-block-start: 1.9vw;
      inline-size: 3.5vw;
      clip-path: polygon(
        45% 0%,
        55% 0%,
        55% 45%,
        100% 45%,
        100% 55%,
        55% 55%,
        55% 100%,
        45% 100%,
        45% 55%,
        0% 55%,
        0% 45%,
        45% 45%
      );
      will-change: clip-path;
      transition: clip-path 150ms ease 0s;
    }
  }

  /* ==== answer ==== */
  .wrap {
    font-size: calc((100 / 750) * 26 * 1vw);
    color: rgb(26, 39, 30);
    line-height: 1.875;
    display: grid;
    grid-template-rows: 0fr;
    grid-auto-flow: row;
    overflow: hidden;
    position: relative;
    padding-inline-start: 10.3vw;

    &::before {
      font-weight: 500;
      content: 'A' attr(data-count) '.';
      position: absolute;
      inset-inline-start: 1.7vw;
      inset-block-start: 0.8vw;
    }

    & > div {
      line-height: 1.85;
      font-weight: 500;
    }
  }

  /* open */
  & details[open] {
    .container {
      grid-template-rows: 1fr;
    }

    & summary {
      padding-block-end: 5.1vw;

      & h2::after {
        clip-path: polygon(
          45% 45%,
          55% 45%,
          55% 45%,
          100% 45%,
          100% 55%,
          55% 55%,
          55% 55%,
          55% 100%,
          55% 55%,
          0% 55%,
          0% 45%,
          45% 45%
        );
      }
    }

    .wrap {
      padding-block-start: 0.9vw;
    }
  }
}