@charset "utf-8";

/**
 *
 * faq: FAQページ
 *
 */

/*======================
 faq
=======================*/
#faq { padding: 60px 0px 80px;}
#faq p {
 margin-bottom: 50px;
 text-align: center;
 line-height: 2;
 font-size: 16px;
}
@media screen and (max-width: 1280px) {
 #faq { padding: 40px 0 60px;}
 #faq p {
  margin-bottom: 40px;
  font-size: 14px;
 }
}
@media screen and (max-width: 920px) {
 #faq { padding: 40px 0 60px;}
}
@media screen and (max-width: 768px) {
 #faq { padding: 25px 0 40px;}
 #faq p {
  margin-bottom: 30px;
  text-align: left;
 }
 #faq p br { display: none;}
}
@media screen and (max-width: 640px) {
 #faq p {
  margin-bottom: 25px;
  font-size: 12px;
 }
}

.qa-list {}
.qa-list dt {
 margin-top: 20px;
 padding: 1.5em 3em 1.5em 2em;
 font-size: 16px;
 font-weight: bold;
 border: 1px solid #ccc;
 cursor: pointer;
 position: relative;
 background: #FFF;
 -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
     -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
         transition: all 0.4s;
}
.qa-list dt .sp  { display: none;}
.qa-list dt:hover,
.qa-list dt.active { background: #f2f2f2; }
.qa-list dt:first-child { margin-top: 0;}
.qa-list dt .arrow::before {
 content: "";
 margin: auto;
 width: 6px;
 height: 6px;
 margin-top: -3px;
 position: absolute;
 top: 50%;
 right: 22px;
 border: 6px solid transparent;
 border-left: 6px solid #1d1d1d;
 -webkit-transform: rotate(90deg);
 transform: rotate(90deg);
}
.qa-list dt.active .arrow::before {
 top: 50%;
 margin-top: -9px;
 -webkit-transform: rotate(-90deg);
 transform: rotate(-90deg);
}
.qa-list dd {
 padding: 1em 2em;
 line-height: 2.14;
 font-size: 14px;
 display: none;
}
.qa-list dd.first-child { display: block;}

@media screen and (max-width: 1280px) {
 .qa-list {}
 .qa-list dt {
  margin-top: 15px;
  font-size: 14px;
 }
 .qa-list dd { font-size: 12px;}
}
@media screen and (max-width: 768px) {
 .qa-list {}
}
@media screen and (max-width: 640px) {
 .qa-list dt {
  margin-top: 12px;
  padding: 1em 25px 1em 2.5em;
  text-indent:-1.5em;
  font-size: 12px;
 }
 .qa-list dt .pc { display: none;}
 .qa-list dt .sp { display: inline;}
 .qa-list dt .arrow::before {
  content: "";
  margin: auto;
  width: 5px;
  height: 5px;
  position: absolute;
  margin-top: -2.5px;
  right: 10px;
  border: 5px solid transparent;
  border-left: 5px solid #1d1d1d;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
 }
 .qa-list dt.active .arrow::before {
  margin-top: -7.5px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
 }
 .qa-list dd { padding: 1em;}
 .qa-list dd br { display: none;}
}