@charset "UTF-8";

@keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
  
    100% {
      opacity: 1;
      transform: none;
    }
}

/* ========================================
   @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px), print {
  #faq .p-faq__box {

  }

  #faq summary {
    border-bottom: 2px solid #181c62;
    display: block;
    margin-inline: auto;
    padding-block: 27px;
    width: min(95%, 1000px);
  }

  #faq summary::-webkit-details-marker {
    display: none;
  }

  #faq .p-faq__qu {
    position: relative;
  }

  #faq .p-faq__qu::before,
  #faq .p-faq__qu::after {
    content: "";
    position: absolute;
    top: 50%;
    translate: 0 -50%;
  }

  #faq .p-faq__qu::before {
    height: 10px;
    right: 12px;
    width: 21px;
  }

  #faq .p-faq__qu::after {
    background: url(../images/faq/faq_arrow.svg) no-repeat center
      center/contain;
    height: 10px;
    right: 29px;
    transition: rotate 0.3s ease;
    width: 21px;
  }

  #faq details[open] .p-faq__qu::after {
    rotate: 180deg;
  }

  #faq .p-faq__item[open] .p-faq__an {
    animation: fadeIn 0.5s ease;
  }

  #faq .p-faq__qu-txt {
    color: #040404;
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.7777777778;
    padding-inline: 80px 0;
  }

  #faq .p-faq__qu-txt::before {
    background: #181c62;
    border-radius: 4px;
    color: #fff;
    content: "Q";
    font-size: 20px;
    font-weight: 500;
    height: 38px;
    left: 16px;
    letter-spacing: 0.02em;
    line-height: 1.7;
    position: absolute;
    text-align: center;
    top: 50%;
    translate: 0 -50%;
    width: 38px;
  }

  #faq .js-content {
    margin-inline: auto;
    width: min(95%, 1000px);
  }

  #faq .p-faq__an-txt {
    background: #f5f5f5;
    color: #040404;
    display: block;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.9333333333;
    padding-block: 24px 24px;
    padding-inline: 80px 0;
    position: relative;
  }

  #faq .p-faq__an-txt::before {
    background: #181c62;
    background: #fff;
    border-radius: 4px;
    color: #181c62;
    content: "A";
    font-size: 20px;
    font-weight: 500;
    height: 38px;
    left: 16px;
    letter-spacing: 0.02em;
    line-height: 1.7;
    position: absolute;
    text-align: center;
    top: 27px;
    width: 38px;
  }
}

/* ========================================
   @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
  #faq  .p-faq__box {
  }

  #faq  summary {
    border-bottom: 2px solid #181c62;
    display: block;
    margin-inline: auto;
    padding-block: 6.522vw;
    width: min(95%, 89.3vw);
  }

  #faq  summary::-webkit-details-marker {
    display: none;
  }

  #faq  .p-faq__qu {
    position: relative;
  }

  #faq  .p-faq__qu::before,
  #faq  .p-faq__qu::after {
    content: "";
    position: absolute;
    top: 3vw;
  }

  #faq  .p-faq__qu::before {
    height: 1.691vw;
    right: 2.899vw;
    width: 3.382vw;
  }

  #faq  .p-faq__qu::after {
    background: url(../images/faq/faq_arrow.svg) no-repeat center
      center/contain;
    height: 1.691vw;
    right: 1vw;
    transition: rotate 0.3s ease;
    width: 3.382vw;
  }

  #faq  details[open] .p-faq__qu::after {
    rotate: 180deg;
  }

  #faq  .p-faq__item[open] .p-faq__an {
    animation: fadeIn 0.5s ease;
  }

  #faq  .p-faq__qu-txt {
    color: #040404;
    display: block;
    font-size: 3.623vw;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.9333333333;
    padding-inline: 13.527vw 5vw;
  }

  #faq  .p-faq__qu-txt::before {
    background: #181c62;
    border-radius: 0.966vw;
    color: #fff;
    content: "Q";
    font-size: 4.831vw;
    font-weight: 500;
    height: 8.213vw;
    left: 2vw;
    letter-spacing: 0.02em;
    line-height: 1.5;
    position: absolute;
    text-align: center;
    top: 0vw;
    width: 8.213vw;
  }

  #faq  .js-content {
    margin-inline: auto;
    width: min(95%, 89.3vw);
  }

  #faq  .p-faq__an-txt {
    background: #f5f5f5;
    color: #040404;
    display: block;
    font-size: 3.623vw;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.9333333333;
    padding-block: 5.314vw;
    padding-inline: 13.324vw 5vw;
    position: relative;
  }

  #faq  .p-faq__an-txt::before {
    background: #181c62;
    background: #fff;
    border-radius: 0.966vw;
    color: #181c62;
    content: "A";
    font-size: 4.831vw;
    font-weight: 500;
    height: 8.213vw;
    left: 2vw;
    letter-spacing: 0.02em;
    line-height: 1.5;
    position: absolute;
    text-align: center;
    top: 4.522vw;
    width: 8.213vw;
  }
}