@charset "UTF-8";
/******************** FAQ ********************/
/*** --------------- faq-area --------------- ***/
.faq_area {
  margin-top: 60px;
}

.faq_box {
  border-radius: 20px;
  margin-top: 30px;
  padding: 0 30px;
}

.background_blue {
  background-color: #EEF9FF;
}

.background_white {
  background-color: #FFFFFF;
}

.faq_box .ac_title {
  position: relative;
  width: 100%;
  font-size: 2rem;
  font-weight: normal;
  line-height: 1.8;
  padding: 20px 55px 25px 65px;
  border: none;
}

.faq_box .ac_title::before {
  content: 'Q.';
  position: absolute;
  font-family: Nunito;
  font-weight: bold;
  font-size: 2.8rem;
  color: #007AC3;
  top: calc(50% - 25px);
  left: 20px;
}

.faq_box .ac_title::after {
    content: '';
    background-image: url(../img/arrow_icon02.png);
    background-size: cover;
    display: inline-block;
    position: absolute;
    width: 22px;
    height: 12px;
    top: calc(50% - 6px);
    right: 20px;
    transition: 0.3s;
}

.faq_box .ac_title[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.faq_box .ac_box {
  position: relative;
  padding: 20px 55px 25px 65px;
}

.faq_box .ac_box::before {
  content: "";
  position: absolute;
  background: #067FC8;
  border-radius: 5px;
  width: 100%;
  height: 2px;
  left: 0;
  top: 0;
}

.faq_box .ac_box::after {
  content: 'A.';
  position: absolute;
  font-family: Nunito;
  font-weight: bold;
  font-size: 2.8rem;
  color: #007AC3;
  top: calc(10% - 5px);
  left: 20px;
}

.function_about_box {
  background-color: #F5F5F5;
  padding: 80px 0 150px;
}

@media only screen and (max-width: 575px) {
.faq_box {
    padding: 0 20px;
}

  .faq_box .ac_title {
    padding: 20px 40px 25px 50px;
}

  .faq_box .ac_title::before {
    font-size: 2.4rem;
    left: 10px;
}

  .faq_box .ac_title::after {
    right: 10px;
}

  .faq_box .ac_box {
    padding: 20px 20px 25px 50px;
}

  .faq_box .ac_box::after {
    font-size: 2.4rem;
    left: 10px;
}
}