@charset "utf-8";
/* ===================================================================
//CSS information

// file name  :  qa.css
// style info :  スタイル指定
=================================================================== */

#qa_page{background: #FFF8E9; padding: 170px 0 70px;}
#qa_page .container{max-width: 980px;}
#qa_page .qa_money{margin-bottom: 80px;}
#qa_page h2{text-align: left; margin-bottom: 10px;}
#qa_page p{font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, 'MS PGothic', sans-serif; font-weight: bold; letter-spacing: 0;}
#qa_page p.mini_text{font-size: 0.6rem;}

#qa_page .qaBox{padding-top: 40px;}
.questionBox{
	position: relative;
	z-index: 1;
	background: #EEEEEF;
    border: 1px solid #231815;
    display: inline-block;
    padding: 2px 20px 5px;
    border-radius: 32px;
	margin-bottom: 25px;
}
.questionBox:before{content: url("../../../img/pages/qa/qa_comment.png"); position: absolute; z-index: 2; bottom: -13px; left: -8px;}
.questionBox p{margin: 0; line-height: 1.5; font-size: 1.3rem;}
.questionBox p:before{content: "Q."; font-size: 1.6rem; color: #595757; margin-right: 5px;}

.answerBox{background: #fff; border: 4px solid #36bcef; border-radius: 20px; padding: 5px 15px; overflow: hidden;}
.answerBox p{line-height: 1.7; font-size: 0.9rem; padding: 10px 0 0 40px; position: relative; float: left;}
.answerBox p:before{content: "A."; position: absolute; color: #36bcef; font-weight: bold; font-size: 1.1rem; left: 0; top: 0; font-size: 1.7rem;}
.answerBox p span{font-weight: bold; color: #BC121A;}
.answerBox figure{float: right;}

.qaBox_1 .answerBox figure{padding: 10px 20px 0 0;}
.qaBox_2 .answerBox figure{padding: 10px 20px 0 0;}
.qaBox_3 .answerBox figure{padding: 10px 0 10px;}
.qaBox_4 .answerBox figure{padding: 10px 0 10px;}
.qaBox_5 .answerBox figure{padding: 10px 0 10px;}
.qaBox_6 .answerBox figure{padding: 10px 0 10px;}
.qaBox_7 .answerBox figure{padding: 10px 0 10px;}
.qaBox_8 .answerBox figure{padding: 10px 0 10px;}

.qa_link{position: relative; display: block; margin-top: 20px; background: #36bcef; text-align: center; color: #fff; padding: 6px 0; letter-spacing: 1px; transition: 0.5s;}
.qa_link::before{content: ""; display: block; border-left: 5px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; position: absolute; left: 10px; top: 11px;}
.qa_link:hover{opacity: 0.7;}

@media screen and (max-width: 768px){
	#qa_page{ padding: 70px 0 70px;}
}

@media screen and (max-width: 480px){
	#qa_page{ padding: 70px 0 70px;}
	
	.questionBox p{font-size: 1rem; letter-spacing: 2px;}
	.questionBox:before{ bottom: -12px; left: -5px;}
	.answerBox{padding: 5px 15px 15px;}
	.answerBox p{float: none;}
	.answerBox figure{float: none; width: 100%; text-align: center; padding: 0 !important;}

}