@charset "UTF-8";

/* PC固定ページ よくある質問 */
#faq_contents {
  padding: 0 0 150px;
}

#faq_contents .btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

#faq_contents .btn a {
  min-width: 100%;
}

#faq_contents .c_btn02_text {
  font-size: 15px;
}

#faq_contents .c_btn02_icon img {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

#faq_contents .c_btn02 a:hover .c_btn02_arrow img {
  -webkit-animation: faq-arrow-slide-down 0.5s cubic-bezier(0.22, 0.6, 0.36, 1);
  animation: faq-arrow-slide-down 0.5s cubic-bezier(0.22, 0.6, 0.36, 1);
}

@-webkit-keyframes faq-arrow-slide-down {
  0% {
    -webkit-transform: translateY(0) rotate(90deg);
    transform: translateY(0) rotate(90deg);
  }

  40% {
    -webkit-transform: translateY(100%) rotate(90deg);
    transform: translateY(100%) rotate(90deg);
    -webkit-animation-timing-function: step-end;
    animation-timing-function: step-end;
  }

  41% {
    -webkit-transform: translateY(-100%) rotate(90deg);
    transform: translateY(-100%) rotate(90deg);
  }

  100% {
    -webkit-transform: translateY(0) rotate(90deg);
    transform: translateY(0) rotate(90deg);
  }
}

@keyframes faq-arrow-slide-down {
  0% {
    -webkit-transform: translateY(0) rotate(90deg);
    transform: translateY(0) rotate(90deg);
  }

  40% {
    -webkit-transform: translateY(100%) rotate(90deg);
    transform: translateY(100%) rotate(90deg);
    -webkit-animation-timing-function: step-end;
    animation-timing-function: step-end;
  }

  41% {
    -webkit-transform: translateY(-100%) rotate(90deg);
    transform: translateY(-100%) rotate(90deg);
  }

  100% {
    -webkit-transform: translateY(0) rotate(90deg);
    transform: translateY(0) rotate(90deg);
  }
}

#faq_contents .block {
  margin-top: 120px;
}

#faq_contents .c_head_title {
  font-size: 30px;
  padding-left: 30px;
}

#faq_contents .items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-top: 32px;
}

#faq_contents .item {
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 25px 45px 30px;
}

#faq_contents .item_row {
  position: relative;
  padding-right: 50px;
  padding-bottom: 0;
  border-bottom: none;
}

#faq_contents .item.is-active .item_row {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(22, 28, 97, 0.15);
}

#faq_contents .item_row::before,
#faq_contents .item_row::after {
  content: "";
  position: absolute;
  right: 0;
  top: 18px;
  width: 20px;
  height: 2px;
  margin-top: -1px;
  background: #161C61;
}

#faq_contents .item_row::before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

#faq_contents .item.is-active .item_row::before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#faq_contents .item_text {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.4s ease, margin-top 0.4s ease;
  transition: max-height 0.4s ease, margin-top 0.4s ease;
}

#faq_contents .item.is-active .item_text {
  margin-top: 35px;
}

@media (max-width: 750px) {

  /* SP固定ページ よくある質問 */
  #faq_contents {
    padding: 0 0 15.38vw;
  }

  #faq_contents .btns {
    grid-template-columns: 1fr;
    gap: 2.56vw;
  }

  #faq_contents .c_btn02_text {
    font-size: 3.85vw;
  }

  #faq_contents .c_btn02 a:hover .c_btn02_arrow img {
    -webkit-animation: none;
    animation: none;
  }

  #faq_contents .btn a {
    gap: 2.56vw;
    padding: 4.36vw 3.85vw 4.36vw 5.13vw;
  }

  #faq_contents .block {
    margin-top: 15.38vw;
  }

  #faq_contents .c_head_title {
    font-size: 5.13vw;
    line-height: 1.25;
    padding-left: 6.15vw;
  }

  #faq_contents .items {
    gap: 3.85vw;
    margin-top: 5.13vw;
  }

  #faq_contents .item {
    padding: 3.85vw 6.41vw 5.13vw;
  }

  #faq_contents .item_row {
    padding-right: 7.69vw;
    padding-bottom: 0;
  }

  #faq_contents .item.is-active .item_row {
    padding-bottom: 2.56vw;
  }

  #faq_contents .item_row::before,
  #faq_contents .item_row::after {
    width: 4.1vw;
    top: 50%;
    margin-top: 0;
  }

  #faq_contents .item.is-active .item_text {
    margin-top: 3.85vw;
  }
}