@charset "utf-8";

.faq {
  padding-block: 104px 154px;
}

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

.faq__container {
  display: flex;
  flex-direction: column;
  gap: 95px;
}

.faq__contents {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq__contents-title {
  -webkit-text-stroke: 0.2px #635542; /* 線の太さ2px、色を黒に */
  text-stroke: 0.2px #635542; /* 標準のtext-stroke */
  font-size: clamp(18px, 1.47vw, 20px);
  font-weight: 500;
  letter-spacing: calc(60 / 1000 * 1em);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq__contents-title::before {
  content: "";
  aspect-ratio: 18/18;
  width: 18px;
  height: auto;
  background: #b9a57a;
  border-radius: 3px;
  flex-shrink: 0;
}

.faq__contents-box {
  padding: 34px 2.8% 35px 2.1%;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  background: var(--color-white);
}

.faq__contents-box-title {
  margin-left: 37px;
  padding-bottom: 15px;
  background: linear-gradient(to right, #707070 1px, transparent 1px) repeat-x
    left bottom;
  background-size: 6px 1px;
  position: relative;
  font-size: clamp(14px, 1.18vw, 16px);
  font-weight: 500;
  letter-spacing: calc(80 / 1000 * 1em);
  line-height: calc(33 / 18);
}

.faq__contents-box-title br {
  display: block;
}

@media screen and (min-width: 768px) {
  .faq__contents-box-title {
    margin-left: 50px;
  }
  .faq__contents-box-title br {
    display: none;
  }
}

.faq__contents-box-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: -37px;
  width: 32px;
  height: auto;
  aspect-ratio: 32/32;
  background: url(../images/Q.svg) no-repeat center center/contain;
  border-radius: 50%;
}

@media screen and (min-width: 768px) {
  .faq__contents-box-title::before {
    left: -50px;
  }
}

.faq__contents-box-text {
  margin-top: 21px;
  font-size: clamp(12px, 1.03vw, 14px);
  font-weight: 500;
  letter-spacing: calc(80 / 1000 * 1em);
  line-height: calc(30 / 14);
  margin-left: 37px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .faq__contents-box-text {
    margin-left: 50px;
  }
}

.faq__contents-box-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: -37px;
  width: 32px;
  height: auto;
  aspect-ratio: 32/32;
  background: url(../images/A.svg) no-repeat center center/contain;
  border-radius: 50%;
}

@media screen and (min-width: 768px) {
  .faq__contents-box-text::before {
    left: -50px;
  }
}