/*---------------------------------------------
page_faq
---------------------------------------------*/
.faq {
  scroll-margin-top: 120px;
}
@media (max-width: 768px) {
  .faq {
    scroll-margin-top: 80px;
  }
}

.faq__item {
  margin-top: var(--gap-m);
  border-top: 1px solid var(--color-gray);
  border-bottom: 1px solid var(--color-gray);
}
.faq__item + .faq__item {
  margin-top: 0;
  border-top: none;
}
.faq__question {
  cursor: pointer;
  position: relative;
  display: grid;
  grid-template-columns: 1em 1fr 11px;
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 0;
  align-items: baseline;
  padding: 35px 15px 35px 0;
}
@media (max-width: 768px) {
  .faq__question {
    cursor: pointer;
    position: relative;
    display: grid;
    grid-template-columns: 1em 1fr 11px;
    grid-template-rows: auto;
    grid-column-gap: 10px;
    grid-row-gap: 0;
    align-items: baseline;
    padding: 35px 0;
  }
}

.faq__question::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: block;
  width: 1px;
  height: 11px;
  background-color: var(--color-blue);
}
@media (max-width: 768px) {
  .faq__question::before {
    right: 5px;
  }
}

.faq__item[open] .faq__question::before {
  display: none;
}
.faq__question::after {
  content: "";
  align-self: center;
  display: block;
  width: 11px;
  height: 1px;
  background-color: var(--color-blue);
}
.faq__question-text {
  font-size: 16px;
  line-height: calc(26 / 15);
  letter-spacing: 0.06em;
  text-align: justify;
  word-break: break-all;
  text-justify: inter-character;
}
@media (max-width: 768px) {
  .faq__question-text {
    font-size: 14px;
  }
}

.faq__answer {
  position: relative;
  display: grid;
  grid-template-columns: 2em 1fr;
  grid-template-rows: auto;
  grid-column-gap: 0;
  grid-row-gap: 0;
  align-items: baseline;
  padding: 35px 0;
  border-top: 1px solid var(--color-gray);
}
.faq__answer-text {
  line-height: calc(26 / 15);
  letter-spacing: 0.06em;
  text-align: justify;
  word-break: break-all;
  text-justify: inter-character;
}
.faq__answer-text a {
  color: var(--color-blue);
  text-decoration: underline;
}
.faq__answer-text a:hover {
  text-decoration: none;
}