@charset "UTF-8";

/*--------------------------------------------------------------------
faq.html
faq.css
--------------------------------------------------------------------*/

/*------------faq---------------------------------------------------------------*/
#faq { counter-reset: item; }
#faq h4 {
	display: flex;
	align-items: center;
}
#faq h4 span::before {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.05em 0.45em;
	background-color: var(--color-red);
	line-height: 1.2;
	counter-increment: item;
	content: "Q" counter(item , decimal-leading-zero) ".";
	text-align: center;
	font-weight: bold;
	color: var(--color-white);
}
#faq .answer {
	position: relative;
	width: 100%;
}
#faq .inAns {
	position: relative;
	display: block;
	padding: 20px;
	width: 870px;
	min-height: 110px;
	background-color: var(--color-red);
}
#faq .inAns::before {
  position: absolute;
	display: block;
  content: "";
  margin-top: -15px;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent var(--color-red);
  top: 25%;
  left: 100%;
}
#faq .answer > span {
	position: absolute;
	display: block;
	width: 90px;
	height: 110px;
	background: url("../../img/parts/a.png") no-repeat left top / contain;
	top: 0;
	right: 0;
	text-indent: -999999px;
}
#faq .answer ul,
#faq .answer dl { margin-top: 0.5em; }
#faq .answer ul li {
	padding-left: 1.3em;
	text-indent: -1.3em;
}
#faq .answer ul li:before {
	margin-right: 0.3em;
	content: "※";
}
#faq .answer dl { display: flex; }
#faq .answer dl dt::after { content: "："; }

@media (max-width: 979px) {
	#faq .inAns { width: 80%; }
	#faq .inAns::before { top: 15%; }
	#faq .answer > span { width: 15%; }
}