@charset "UTF-8";
#faq {
 background: #232526;
 padding: 5rem 3% 4rem;
 background: -webkit-linear-gradient(to right, #313335, #232526);
 background: linear-gradient(to right, #313335, #232526);
}
#faq:before {
 content: "";
 display: block;
 background: url("../images/common/dots.svg") repeat;
 background-size: 8px auto;
 width: 100%;
 left: 0;
 top: 0;
 height: 100%;
 position: absolute;
}
#faq .inner {
 max-width: 1080px;
 padding: 0 4rem;
}
#faq .inner .secTtl {
 margin-bottom: 3rem;
}
#faq .inner > ul > li dl {
 display: table;
 width: 100%;
}
#faq .inner > ul > li dl dt {
 display: table-cell;
 width: 45%;
 text-align: justify;
 position: relative;
 padding: 1rem 5rem 0 2em;
 transition: .3s;
}
#faq .inner > ul > li dl dt:before {
 content: "Q.";
 display: block;
 font-size: 180%;
 font-family: 'Antonio', sans-serif;
 color: #f25e23;
 padding-right: 0.5rem;
 position: absolute;
 line-height: 1;
 left: 0;
 top: 0.2em;
}
#faq .inner > ul > li dl dd {
 display: table-cell;
 width: 55%;
 text-align: justify;
 border-left: solid 1px #888;
 padding: 1rem 0 4rem 5rem;
 transition: .3s;
}
#faq .inner > ul > li dl dt:hover, #faq .inner > ul > li dl dt:hover ~ dd {
 color: #f25e23;
}
#faq .inner > ul > li dl dd a {
 display: inline;
 color: orange;
 padding-left: 0.4em;
}
#faq .inner > ul > li dl dd a:hover {
 text-decoration: underline;
}
@media screen and (max-width: 750px) {
 #faq {
  padding: 3rem 1rem 2rem;
 }
 #faq .inner {
  padding: 0;
 }
 #faq .inner > ul > li dl {
  display: block;
 }
 #faq .inner > ul > li dl dt {
  display: block;
  width: 100%;
  padding: 1rem 5rem 1rem 2em;
  font-size: 1.4rem;
 }
 #faq .inner > ul > li dl dd {
  display: block;
  width: 100%;
  border-left: none;
  border-top: solid 1px #888;
  padding: 1rem 0 2rem;
  font-size: 1.3rem;
 }
}