@charset "utf-8";
/* ----- FAQ ----- */
#ht_faq .wrapper{background:#ffeda1;background:#a3ca0f;}
#ht_faq header h1{text-align:center;color:#667777;font-weight:bold;font-size:30px;line-height:1.5em;margin:1em 0 0.5em;}
#ht_faq header h1 figure{display:block;max-width:300px;width:50%;margin:0 auto 0.25em;}
#ht_faq header h1 .tyellow{color:#f8b62d;color:#fff;font-size:40px;display:block;}
#ht_faq header nav ul{display:flex;justify-content:space-evenly;max-width:900px;margin:1em auto;}
#ht_faq header nav ul li{width:30%;}
#ht_faq header nav ul li a{padding:0;height:60px;line-height:60px;display:block;color:#000;background:#f8b62d;background:#fff000;border-radius:30px;text-decoration:none;}
#ht_faq header nav ul li a:hover{background:#fff;}

#ht_faq main{padding-bottom:80px;}
#ht_faq h2{font-size:30px;text-align:center;padding:30px 0 0;}
#ht_faq .faq ul{margin:30px auto;}
#ht_faq .faq ul li{background:#fff;margin:0 auto 20px;position:relative;}
#ht_faq .faq ul li:after{content:"";width:24px;height:24px;border-radius:12px;display:block;position:absolute;top:20px;left:20px;background:#a3ca0f url(../img/icon_faq_question_tp.png) no-repeat;background-position:top left;background-size:24px;}
#ht_faq .faq ul li h4{cursor:pointer;font-size:16px;line-height:1.5em;position:relative;padding-left:36px;text-align:left;padding:20px 60px 20px 56px;}
#ht_faq .faq ul li h4:before{content:"";background:#f8b62d;background:#a3ca0f;position:absolute;width:15px;height:3px;top:50%;right:20px;margin-top:-1px;}
#ht_faq .faq ul li.close h4:after{content:"";background:#f8b62d;background:#a3ca0f;position:absolute;width:3px;height:15px;top:50%;right:26px;margin-top:-7px;}
#ht_faq .faq ul li h4 span{position:relative;top:50%;transform:translateY(-50%);}
#ht_faq .faq ul li .ans{position:relative;line-height:1.5em;padding:0 60px 20px 56px}
#ht_faq .faq ul li .ans:after{content:"";width:24px;height:24px;display:block;position:absolute;top:0;left:20px;background:url(../img/icon_faq_answer.png) no-repeat;background-position:top left;background-size:24px;}
#ht_faq .faq ul li .ans p{text-align:justify;}
@media screen and (max-width: 960px) {
	#ht_faq header nav ul{width:94%;justify-content:space-between;}
	#ht_faq .faq ul{width:94%;}
}
@media screen and (max-width: 768px) {
	#ht_faq header nav ul li a{line-height:40px;height:40px;}
	#ht_faq .faq ul li h4{padding:20px 50px 20px 56px;}
	#ht_faq .faq ul li .ans{padding:0 20px 20px 56px;}
}
