@charset "UTF-8";

/* faq
----------------------------------- */

.faq {}
.faq-wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.faq-wrap__items {
  margin-top: 60px;
  width: auto;
  max-width: 1000px;
  padding: 40px 30px 30px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}
.faq-wrap__items details {
  transition: 0.8s;
}
details[open] .details-content {
  animation: fadeIn 0.8s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0; 
    transform: translateY(-10px); 
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.faq-wrap__items summary {
  cursor: pointer;
  display: block;
}
.faq-wrap__items summary::-webkit-details-marker {
  display: none;
}
.details-content {
  overflow: hidden; /* 挙動からdetails直下はこれのみ */
}
.details-content__inner {
  margin: 20px 20px 0;
  padding: 30px 34px;
  border-radius: 10px;
  background-color: #f4f4f4;
}
.faq-wrap__title {
  position: relative;
  padding-left: 40px;
  padding-right: 100px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2;
}
.faq-wrap__title::before {
  position: absolute;
  content: '';
  top: 6px;
  left: 0;
  width: 21px;
  height: 21px;
  background: #fff url(../img/faq/icon_q.svg) no-repeat center center / 21px auto;
}
details .faq-wrap__title::after {
  position: absolute;
  content: '';
  top: -10px;
  right: -10px;
  width: 45px;
  height: 45px;
  background: #fff url(../img/faq/icon_plus.svg) no-repeat center center / 45px auto;
}
details[open] .faq-wrap__title::after {
  background: #fff url(../img/faq/icon_minus.svg) no-repeat center center / 45px auto;
}
.faq-wrap__text {
  position: relative;
  padding-left: 50px;
  font-size: 1.6rem;
  line-height: 2;
  min-height: 30px;
}
.faq-wrap__text::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background: #fff url(../img/faq/icon_a.svg) no-repeat center center / 30px auto;
}

/* -------------------------------------
  responsive
------------------------------------- */
@media (width < 768px) {
  /* faq
  ----------------------------------- */
    .faq-wrap {
      display: flex;
      margin-top: 30px;
    }
    .faq-wrap__items {
      padding: 30px 20px 20px;
    }
    .details-content__inner {
      margin: 15px 15px 0;
      padding: 20px 26px;
    }
    .faq-wrap__title {
      position: relative;
      padding-left: 30px;
      padding-right: 60px;
      font-size: 1.6rem;
    }
    .faq-wrap__title::before {
      top: 6px;
      left: 0;
      width: 16px;
      height: 16px;
      background: #fff url(../img/faq/icon_q.svg) no-repeat center center / 16px auto;
    }
    details .faq-wrap__title::after {
      top: -8px;
      right: -5px;
      width: 34px;
      height: 34px;
      background: #fff url(../img/faq/icon_plus.svg) no-repeat center center / 34px auto;
    }
    details[open] .faq-wrap__title::after {
      background: #fff url(../img/faq/icon_minus.svg) no-repeat center center / 34px auto;
    }
    .faq-wrap__text {
      position: relative;
      padding-left: 35px;
      font-size: 1.6rem;
      min-height: 23px;
    }
    .faq-wrap__text::before {
      width: 23px;
      height: 23px;
      background: #fff url(../img/faq/icon_a.svg) no-repeat center center / 23px auto;
    }
}