@charset "utf-8";

.page {
}

.faq {
  background: #f5fafa;
  padding-block: 80px 100px;
}

@media screen and (min-width: 768px) {
  .faq {
    background: #f5fafa;
    padding-block: 120px 150px;
  }
}

@media screen and (min-width: 768px) {
  .faq__inner.l-inner {
    max-width: calc(1078px + 40px * 2);
  }
}

.page-container {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.faq__wrapper-title {
  margin-bottom: 30px;
  font-size: clamp(16px, 1.32vw, 18px);
  font-weight: 700;
  letter-spacing: calc(80 / 1000 * 1em);
  display: flex;
  align-items: center;
  gap: 21px;
}

.faq__wrapper-title::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #007989;
}

.faq__box {
  background: var(--color-white);
  padding: 33px 38px 33px 50px;
  border-radius: 10px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

@media screen and (min-width: 768px) {
  .faq__box {
    padding: 33px 38px 33px 71px;
  }
}

.faq__box:not(:first-child) {
  margin-top: 20px;
}

.faq__box-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: calc(80 / 1000 * 1em);
  display: flex;
  align-items: center;
  gap: 22px;
  position: relative;
  padding-bottom: 22px;
  border-bottom: 1px dotted #707070;
}

@media screen and (min-width: 414px) {
  .faq__box-title {
    font-size: 14px;
    letter-spacing: calc(70 / 1000 * 1em);
  }
}

@media screen and (min-width: 600px) {
  .faq__box-title {
    font-size: clamp(13px, 1.1vw, 15px);
  }
}

.faq__box-title::before {
  position: absolute;
  top: -8px;
  content: "Q";
  font-size: 28px;
  font-weight: 600;
  color: #0d7d8d;
  white-space: nowrap;
  left: -34px;
}

@media screen and (min-width: 768px) {
  .faq__box-title::before {
    left: -43px;
  }
}

.faq__box-text {
  margin-top: 22px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: calc(80 / 1000 * 1em);
  line-height: calc(33 / 15);
}

@media screen and (min-width: 414px) {
  .faq__box-text {
    font-size: clamp(12px, 1.1vw, 15px);
  }
}