@charset "UTF-8";
/* CSS Document */
/*ブレイクポイント　600px,1024px*/
/*ページビジュアル*/
.page_visual_wrap h1 {
  width: 192px;
}
.page_visual_bg {
  background-image: url("../images/page_visual_faq2.jpg");
}
@media(max-width:1024px) {
  .page_visual_wrap h1 {
    width: 137px;
  }
}
@media(max-width:599px) {
  .firstview_wrap h1 {
    width: 144px;
  }
}
.faq-wrapper {
  position: relative;
  z-index: 8000;
  width: 75%;
  max-width: 1080px;
  margin: 0 auto 160px auto;
}
.faq-wrapper li {
  margin: 40px 0;
}
.faq-wrapper section {
  border: 1px solid #9C7E80;
}
.question {
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  padding: 3% 2% 3% 62px;
  transition: all .5s ease;
  font-size: 2.4rem;
  line-height: 1.5;
  color: #BA835F;
  background-color: #fff;
}
/*アイコンの＋と×*/
.question::before, .question::after {
  position: absolute;
  content: '';
  width: 24px;
  height: 4px;
  background-color: #9C7E80;
}
.question::before {
  top: 48%;
  left: 24px;
  transform: rotate(0deg);
}
.question::after {
  top: 48%;
  left: 24px;
  transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
.question.close::before {
  transform: rotate(45deg);
}
.question.close::after {
  transform: rotate(-45deg);
}
/*アコーディオンで現れるエリア*/
.answer {
  display: none; /*はじめは非表示*/
  padding: 0 3% 3% 62px;
  background-color: #fff;
}
.answer p {
  font-size: 1.8rem;
}
.faq-container {
  position: relative;
}
@media(max-width:599px) {
  .faq-wrapper {
    margin: 0 auto 80px auto;
  }
  .question {
    font-size: 1.8rem;
    padding: 4% 2% 4% 54px;
  }
  .question::before, .question::after {
    width: 16px;
    height: 2px;
  }
  .question::before {
    left: 16px;
  }
  .question::after {
    left: 16px;
  }
  .answer {
    padding: 0 4% 4% 54px;
  }
  .answer p {
    font-size: 1.4rem;
  }
}