/*----------------------------------------------------
    index.html
----------------------------------------------------*/
.faq-wrap{
  border-bottom: solid 1px #ddd;
}
.faq-wrap dl {
	border-top: solid 1px #ddd;
	background: #fff;
}
.faq-wrap dt {
  position: relative;
	cursor: pointer;
  background: #f6f6f6;
}
.faq-wrap dt::before {
  position: absolute;
  left: .8em;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5em;
  content: 'Q';
  color: #fff;
  font-size: 1em;
  background-color: #f45f73;
}
.faq-wrap .js-change-arrow {
	background: url("../../img/icon-plus.svg") no-repeat right 15px center;
}
.faq-wrap .accordion-open {
	background: url("../../img/icon-minus.svg") no-repeat;
}
.faq-wrap .answer {
  position: relative;
  border-top: dashed 1px #ddd;
}
.faq-wrap .answer::before {
  position: absolute;
  left: 0.9em;
  top: 1em;
  width: 1em;
  height: 1em;
  line-height: 1em;
  content: 'A';
  font-size: 1.2em;
  color: #f45f73;
}

/*----------------------------------------------------
    media query
----------------------------------------------------*/
@media screen and (max-width:639px) {
	.faq-wrap .js-change-arrow {
		padding: 12px 30px 12px 40px;
		background-size: 14px 14px;
    background-position: right 10px center;
	}
  .faq-wrap .answer {
    padding: 12px 10px 12px 40px;
  }
}
@media screen and (min-width:640px) {
	.faq-wrap .js-change-arrow {
		padding: 15px 40px 15px 50px;
		background-size: 14px 14px;
    background-position: right 15px center;
	}
  .faq-wrap .js-change-arrow:hover{
    background-color: #eee;
  }
  .faq-wrap .answer {
    padding: 15px 30px 15px 50px;
  }
}