@charset "utf-8";

.headline {
  font-size: 2.2rem;
}

.faq-q,
.faq-a {
  line-height: 1.7;
  position: relative;
}

.faq-q {
  background-color: #e6edfd;
  border-top: 1px solid #fff;
  color: #002f9b;
  cursor: pointer;
  font-weight: bold;
  padding: 1.6rem 3.8rem 1.6rem 5rem;
}

.faq-q:hover {
  background-color: #d9e3fb;
}

.faq-a {
  background-color: #fff;
  border-bottom: 1px solid #d1d9ed;
  max-height: 0;
  overflow-y: hidden;
  transition: all 0.7s ease-in-out;
}

.faq-a[aria-expanded='true'] {
  max-height: 100rem;
}

.faq-a .answer {
  padding: 1.6rem 3.8rem 1.6rem 5rem;
}

.faq-q::before,
.faq-a::before,
.faq-q::after {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  left: 1.4rem;
  line-height: 1;
  position: absolute;
  top: 2rem;
}

.faq-q::before {
  content: 'Q';
}

.faq-q::after {
  /* >下向きマーク */
  content: '\f107';
  font-family: FontAwesome, sans-serif;
  font-size: 2.4rem;
  left: auto;
  line-height: 1;
  right: 1.4rem;
  top: 1.5rem;
}

.faq-q[aria-pressed='true']::after {
  /* >上向きマーク */
  content: '\f106';
}

.faq-a::before {
  color: #748dc7;
  content: 'A';
}

.faq-a .list-notes:not(:last-child),
.faq-a .list-disc:not(:last-child),
.faq-a .list-ordered:not(:last-child),
.faq-a p:not(:last-child) {
  margin-bottom: 1.6rem;
}

.faq-a .list-notes {
  padding: 0;
}

@media (max-width: 599px) {
  .section.border {
    border-bottom: none;
  }

  .faq.cb {
    padding: 0;
  }
}

@media (min-width: 600px) {
  .headline {
    margin-bottom: 2.4rem;
  }

  .faq-q {
    padding: 1.6rem 4.8rem;
  }

  .faq-a[aria-expanded='true'] {
    max-height: 60rem;
  }

  .faq-a .answer {
    padding: 1.6rem 4.8rem 2.4rem;
  }

  .faq-q::before,
  .faq-a::before {
    left: 1.6rem;
    top: 1.8rem;
  }
}