/* ------------------------------
   よくある質問
------------------------------ */

.faq {
  margin: 100px 0 160px;
}

.faq-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1000px;
  width: 100%;
  margin: 48px auto 0;
}

.faq-item {
  padding: 32px;
  border: 1px solid var(--main-color);
}

.question {
  display: flex;
  align-items: start;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #B6AA9F;

  span {
    font-size: 20px;
    font-weight: bold;
    color: var(--main-color);
  }

  p {
    margin-top: 2px;
    font-size: 18px;
    font-weight: bold;
  }
}

.answer {
  display: flex;
  gap: 16px;
  margin-top: 12px;

  span {
    font-size: 24px;
    font-weight: bold;
    color: #8899A6;
  }

  p {
    margin-top: 6px;
  }
}

@media (max-width: 1000px) {
  .faq {
    margin: clamp(4rem, 0.69rem + 6.9vw, 5rem) 0 clamp(5rem, -3.276rem + 17.24vw, 7.5rem);
  }

  .faq-inner {
    gap: clamp(1.5rem, -0.155rem + 3.45vw, 2rem);
    max-width: 750px;
    margin-top: clamp(1.5rem, -0.155rem + 3.45vw, 2rem);
  }
}

@media (max-width: 768px) {
  .faq {
    margin: clamp(3rem, 1.585rem + 5.03vw, 4rem) 0 clamp(4rem, 2.585rem + 5.03vw, 5rem);
    padding: 0 16px;
  }

  .faq-inner {
    gap: clamp(1rem, 0.292rem + 2.52vw, 1.5rem);
    max-width: inherit;
    margin-top: 24px;
  }

  .faq-item {
    padding: clamp(1.5rem, 0.792rem + 2.52vw, 2rem);
  }
}

@media (max-widht: 450px) {
  .faq {
    margin: 48px 0 64px;
  }
}