/* faq_accordion.css */

.faq-list{
  margin:1.2rem 0;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.faq-item{
  border:.0625rem solid #d9e6f7;
  border-radius:.7rem;
  background:#fff;
  overflow:hidden;
}

.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 1.1rem;
  border:0;
  background:#f7fbff;
  cursor:pointer;
  font-family:inherit;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.6;
  color:#0a2e5c;
  text-align:left;
  letter-spacing:.02em;
  transition:background .2s ease;
}

.faq-question:hover{
  background:#eef6ff;
}

.faq-question:focus-visible{
  outline:.14rem solid #0175d8;
  outline-offset:-.14rem;
}

.faq-question__mark{
  flex:0 0 auto;
  color:#0175d8;
  font-weight:700;
}

.faq-question__icon{
  position:relative;
  flex:0 0 auto;
  width:1rem;
  height:1rem;
}

.faq-question__icon::before,
.faq-question__icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:#0175d8;
  border-radius:999px;
  transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .25s ease;
}

.faq-question__icon::before{
  width:1rem;
  height:.14rem;
}

.faq-question__icon::after{
  width:.14rem;
  height:1rem;
}

.faq-item.is-open .faq-question__icon::after{
  transform:translate(-50%,-50%) rotate(90deg) scaleY(0);
  opacity:0;
}

.faq-answer{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .25s ease;
}

.faq-item.is-open .faq-answer{
  grid-template-rows:1fr;
}

.faq-answer__inner{
  overflow:hidden;
}

.faq-answer p{
  margin:0;
  padding:0 1.1rem 1rem;
  line-height:1.8;
  color:#333;
}

@media (max-width:600px){
  .faq-question{
    padding:.8rem .9rem;
    font-size:.98rem;
  }

  .faq-answer p{
    padding:0 .9rem .9rem;
    font-size:.95rem;
  }
}
