@charset "UTF-8";

/* main */
#main {
  background: url("../img/bg_faq.jpg") 50% / cover no-repeat;
}

/* faq */
#faq .width-wrap > p {
  margin: 14px 0 60px;
}
#faq .width-wrap .faq-list {
  margin-bottom: 60px;
}
#faq .width-wrap .faq-list li {
  border-bottom: 1px solid #eee;
}
#faq .width-wrap .faq-list li.on {
  background: rgba(47, 55, 127, 0.03);
}
#faq .width-wrap .faq-list li:hover {
  background: rgba(47, 55, 127, 0.03);
}
#faq .width-wrap .faq-list li .top-zone {
  justify-content: space-between;
  cursor: pointer;
  display: flex;
}
#faq .width-wrap .faq-list li .top-zone,
#faq .width-wrap .faq-list li .bottom-zone {
  padding: 24px 20px;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
}
#faq .width-wrap .faq-list li.on .top-zone img {
  transform: rotate(180deg);
}
#faq .width-wrap .faq-list li .bottom-zone {
  display: none;
  align-items: flex-start;
  border-top: 2px solid var(--po);
}
#faq .width-wrap .faq-list li.on .bottom-zone {
  display: flex;
}

/* responsive */
@media all and (max-width: 850px) {
  #faq .width-wrap > p {
    margin: 14px 0 50px;
  }
  #faq .width-wrap .faq-list {
    margin-bottom: 50px;
  }
  #faq .width-wrap .faq-list li .top-zone,
  #faq .width-wrap .faq-list li .bottom-zone {
    padding: 24px 17px;
  }
}
@media all and (max-width: 500px) {
  #main {
    background: url(../img/bg_faq.jpg) 59% -25% / 250% no-repeat;
  }

  #faq .width-wrap > p {
    margin: 14px 0 40px;
  }
  #faq .width-wrap .faq-list {
    margin-bottom: 40px;
  }
  #faq .width-wrap .faq-list li .top-zone,
  #faq .width-wrap .faq-list li .bottom-zone {
    padding: 24px 14px;
  }
}
@media all and (max-width: 390px) {
  #main {
    background: url("../img/bg_faq.jpg") 57% 110% / 170% no-repeat;
  }
}