/* ----------------------------------------------------------------
FAQ
----------------------------------------------------------------- */
#pageTtl {
  background-image: url("img/pageTtl_bg.jpg");
}
@media screen and (max-width: 767px) {
  #pageTtl {
    background-position: 80% center;
  }
}

.pageNav ul {
  justify-content: center;
}
.pageNav ul li:nth-child(1)::before {
  background-color: #5b7fdf;
}
.pageNav ul li:nth-child(2)::before {
  background-color: #e6a922;
}
.pageNav ul li:nth-child(3)::before {
  background-color: #01b884;
}
.pageNav ul li::after {
  background: rgba(0, 0, 0, 0.2);
}
.pageNav ul li a {
  color: #fff;
}

.sec {
  padding: 0 0 100px !important;
}
.sec h3 {
  max-width: 1000px;
  margin: 100px auto 0;
  padding: 0.5em;
  font-size: 27px;
  font-weight: normal;
  color: #fff;
  background: #01b884;
}
@media screen and (max-width: 767px) {
  .sec h3 {
    font-size: 18px;
    margin: 50px auto 0;
    text-align: center;
  }
}

.faq {
  max-width: 1000px;
  margin: auto;
  padding: 30px 0;
  border-bottom: 1px solid #c7c7c7;
}
@media screen and (max-width: 767px) {
  .faq {
    padding: 0px 0;
  }
}
.faq:nth-child(1) {
  border-top: 1px solid #c7c7c7;
}
.faq * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.faq dl.open__close {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq dl.open__close:hover {
  cursor: pointer;
}
.faq dl.open__close dt {
  flex: 0 0 150px;
  text-align: center;
  color: #009dcc;
  font-family: 'Roboto Condensed', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 46px;
  letter-spacing: 0;
}
@media screen and (max-width: 767px) {
  .faq dl.open__close dt {
    flex: 0 0 60px;
    font-size: 25px;
  }
}
.faq dl.open__close dd {
  width: 100%;
  text-align: left;
  font-weight: 700;
  padding: 1em 1em 1em 0;
}
@media screen and (max-width: 767px) {
  .faq dl.open__close dd {
    line-height: 1.6;
  }
}
.faq dl.open__close dd.tglbtn {
  flex: 0 0 90px;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .faq dl.open__close dd.tglbtn {
    flex: 0 0 45px;
  }
}
.faq dl.open__close dd.tglbtn span {
  display: block;
  font-family: 'FontAwesome';
  width: 90px;
  line-height: 90px;
  height: 90px;
  font-size: 46px;
  color: #009dcc;
  text-align: center;
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  .faq dl.open__close dd.tglbtn span {
    width: 45px;
    line-height: 45px;
    height: 45px;
    font-size: 20px;
  }
}
.faq dl.open__close dd.tglbtn span::before {
  content: '\f107';
  font-family: 'FontAwesome';
}
.faq dl.open__close.active dd.tglbtn span {
  color: #fff !important;
  background: #009dcc;
}
.faq dl.open__close.active dd.tglbtn span::before {
  content: '\f106';
}
.faq .ans {
  display: flex;
  background: #ededed;
}
.faq .ans dt {
  flex: 0 0 150px;
  text-align: center;
  color: #fff;
  background: #009dcc;
  font-family: 'Roboto Condensed', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 46px;
  letter-spacing: 0;
  line-height: 1;
  padding-top: 30px;
  padding-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .faq .ans dt {
    flex: 0 0 60px;
    font-size: 25px;
  }
}
.faq .ans dd {
  padding: 30px;
  text-align: justify;
}
@media screen and (max-width: 767px) {
  .faq .ans dd {
    padding: 20px;
  }
}
.faq .ans dd ol {
  text-align: left;
  margin: 1em 2em;
}
.faq .ans dd ol li {
  text-align: left;
}

#baikyaku .bigTtl {
  background-color: #5b7fdf;
}
#baikyaku .faq dl.open__close dt, #baikyaku .faq dl.open__close dd.tglbtn span::before {
  color: #5b7fdf;
}
#baikyaku .faq dl.open__close.active dd.tglbtn span, #baikyaku .faq .ans dt {
  background-color: #5b7fdf;
}
#baikyaku .faq dl.open__close.active dd.tglbtn span::before {
  color: #fff;
}

#kounyuu .bigTtl {
  background-color: #e6a922;
}
#kounyuu .faq dl.open__close dt, #kounyuu .faq dl.open__close dd.tglbtn span::before {
  color: #e6a922;
}
#kounyuu .faq dl.open__close.active dd.tglbtn span, #kounyuu .faq .ans dt {
  background-color: #e6a922;
}
#kounyuu .faq dl.open__close.active dd.tglbtn span::before {
  color: #fff;
}

#lifestage .bigTtl {
  background-color: #01b884;
}
#lifestage .faq dl.open__close dt, #lifestage .faq dl.open__close dd.tglbtn span::before {
  color: #01b884;
}
#lifestage .faq dl.open__close.active dd.tglbtn span, #lifestage .faq .ans dt {
  background-color: #01b884;
}
#lifestage .faq dl.open__close.active dd.tglbtn span::before {
  color: #fff;
}