.faq__box {
  max-width: var(--content-width-narrow);
  margin: auto;
}
.faq__box + .faq__box {
  margin-top: 80px;
}
.faq__title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 64px;
}
.faq__item {
  background-color: var(--white);
  border-radius: 16px;
}
.faq__item + .faq__item {
  margin-top: 24px;
}
.faq__q {
  display: flex;
  align-items: center;
  padding: 32px 72px 32px 32px;
  position: relative;
  cursor: pointer;
}
.faq__q::before {
  content: "Q.";
  color: var(--main);
  font-size: 1.5rem;
  line-height: 1;
  margin-right: 24px;
}
.faq__a {
  display: none;
  background-color: #EEF4F5;
  border-radius: 0 0 16px 16px;
  padding: 32px;
}
.faq__a::before {
  content: "A.";
  color: var(--sub);
  font-size: 1.5rem;
  line-height: 1;
  margin-right: 24px;
}
.faq__a a {
  color: var(--main);
  text-decoration: underline;
}
.faq__open {
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 32px;
  margin: auto;
}
.faq__open::before,
.faq__open::after {
  content: "";
  background-color: var(--text);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  transition: all .3s;
}
.faq__open::before { width: 16px; height: 2px;}
.faq__open::after { width: 2px; height: 16px;}
.faq__q.active .faq__open::after { transform: rotate(90deg);}

@media (max-width: 1023px) {
  .faq__box + .faq__box { margin-top: 40px;}
  .faq__title { font-size: 1.25rem; margin-bottom: 32px;}
  .faq__item + .faq__item { margin-top: 16px;}
  .faq__q { align-items: flex-start; padding: 16px calc(5% + 32px) 16px 5%;}
  .faq__a { padding: 16px 5%;}
  .faq__q::before, .faq__a::before { margin-right: 8px;}
  .faq__open { right: 5%;}
}