/* FAQ
-------------------------------------------*/

.faq .sec_last{
  padding-bottom: calc(var(--sec-margin)*2);
}
.faq .sec .sec_in{
  width: var(--page-width);
  margin: 0 auto;
  padding-top: calc(var(--sec-margin)*1.25);
  text-align: left;
}
.faq .sec .sec_heading__jp{
  margin-bottom: 3rem;
}
.faq_list{
  display: flex;
  flex-flow: column;
  gap: 1rem;
}
.toggle{
  display: none;
}
.qa_item{
  position: relative;
  border-radius: 12px;
  background-color: #fff;
}
.question,
.answer{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
  text-align: justify;
  display: flex;
  align-items: flex-start;
}
.question{
  width: 100%;
  margin: 0;
  padding: 2rem;
  padding-right: 5rem;
  font-size: clamp(14px,2.154vw,19px);
  letter-spacing: .015em;
}
.question:hover{
  color: var(--blue);
}
.question .ic,
.answer .ic{
  font-weight: bold;
  font-family: var(--font-en);
  font-size: clamp(26px,4.0vw,47px);
  line-height: 1;
  flex-shrink:0;
}
.question .ic{
  color: var(--blue);
}
.answer .ic{
  color: var(--red);
}
.question_text,
.answer_text{
  display: block;
  width: calc(100% - 60px);
  padding-left: 1rem;
}
.question_text,
.answer_text .strong{
  font-weight: bold;
}
.question::after,
.question::before{
  content: "";
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 26px;
  background: var(--blue);
  transition: .3s;
}
.question::after{
  transform: translateY(-50%) rotate(90deg);
}
.answer{
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  padding: 0 10% 0 4%;
  color: #3c3f44;
  transition:max-height .6s ease, padding .6s ease;
}
.toggle:checked + .question + .answer{
  max-height: 1000px;
  padding: 0 10% 2rem 4%;
}
.toggle:checked + .question::before{
  transform: translateY(-50%) rotate(90deg);
}

@media screen and (max-width: 650px){
  
  .faq .sec .sec_heading__jp{
    margin-bottom: 1rem;
  }
  .qa_item{
    border-radius: 6px;
  }
  .question{
    padding: 1rem;
    padding-right: 3rem;
  }
  .question_text,
  .answer_text{
    width: calc(100% - 50px);
  }
  .question::after,
  .question::before{
    right: 30px;
    height: 20px;
  }
}