@charset "utf-8";

/* common
----------------------------------------------------------------------------------*/
#pttl-topics{
	padding: 35px 10px;
	text-align: center;
	background: #fff;
}

/* faq
----------------------------------------------------------------------------------*/
div#faq dl.faq{
	margin-top:-60px;
	margin-bottom:60px;
}
div#faq dl.faq dt,
div#faq dl.faq dd{
	width:100%;
	position:relative;
	padding-left:60px;
}
div#faq dl.faq dt{
	margin-top:30px;
	padding-top:30px;
	color:#007d96;
	font-size:20px;
	text-decoration:underline;
	border-top:1px #ccc solid;
}
div#faq dl.faq dt:nth-child(1){
	border:none;
}
div#faq dl.faq dt:hover{
	color:orange;
	text-decoration:none;
	cursor:pointer;
}
div#faq dl.faq dd{
	display:none;
	margin-top:15px;
	padding-left:calc(60px + 60px);
}
div#faq dl.faq dt:before,
div#faq dl.faq dd:before{
	width:40px;
	height:40px;
	content:"";
	position:absolute;
	top:30px;
	left:0;
	display:block;
	background-image:url(../img/faq/q.webp);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
}
div#faq dl.faq dd:before{
	top:0;
	left:60px;
	background-image:url(../img/faq/a.webp);
}
div#faq dl.faq dd h3.ttl{
	margin-bottom:5px;
	padding:5px 0 5px 15px;
	color:#50321e;
	font-weight:bold;
	border-left:10px #50321e solid;
	border-bottom:1px #ccc solid;
}
div#faq dl.faq dd strong{
	font-weight:bold;
}

@media only screen and (max-width: 960px) {
	div#faq {
		width: 95%;
		margin: 0 auto;
	}
}
@media only screen and (max-width: 510px) {
	div#faq dl.faq{
		margin-top:-45px;
		margin-bottom:45px;
	}
	div#faq dl.faq dt{
		margin-top:15px;
		padding-top:15px;
		font-size:16px;
	}
	div#faq dl.faq dd{
		padding-left:60px;
	}
	div#faq dl.faq dt:before,
	div#faq dl.faq dd:before{
		top:15px;
		left:0;
	}
}