@charset "UTF-8";

/* CSS Document */

/* --------------------【header】-------------------- */

.headerBg {
	position: relative;
	background: url("/images/question/question_bg.jpg") no-repeat;
	background-size: cover;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx){
	.headerBg {
		background: url("/images/question/question_bg@2x.jpg") no-repeat;
		background-size: cover;
	}
}


/* --------------------【main】-------------------- */

main {
	margin-bottom: 50px;
}
.faqlist {
	max-width: 900px;
	width: 90%;
	margin: 45px auto 0;
	cursor: pointer;
}
.faqlist .faq p:first-line, .faqlist .faq .question:first-line {
	line-height: 2.1;
}
.faqlist .faq {
	margin-top: 30px;
}
.question {
	position: relative;
	display: block;
	padding : 25px 90px;
	color :#666;
	background-color: #fff;
	border: 1px solid #dce5c1;
	transition: all .5s;
}
.question::before {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 30px;
	background: url("/images/question/question_icon.png") no-repeat;
	background-size: contain;
	width: 40px;
	height: 40px;
	content: '';
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx){
	.question::before {
		background: url("/images/question/question_icon@2x.png") no-repeat;
		background-size: contain;
	}
}
.vertical, .horizon {
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 30px;
	width: 30px;
	height: 1px;
	margin: auto;
	background-color: #96b337;
	transition: all .5s ease-in-out;
}
.vertical {
	right: 45px;
	width: 1px;
	height: 30px;
}
.answer {
	position: relative;
	height: auto;
	padding: 30px 30px 30px 80px;
	background: #fff;
	border: solid 30px #abc25f;
	border-top: none;
	display: none;
}
.answer::before {
	position: absolute;
	top: 32px;
	left: 30px;
	background: url("/images/question/anser_icon.png") no-repeat;
	background-size: contain;
	width: 20px;
	height: 29px;
	content: '';
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx){
	.answer::before {
		background: url("/images/question/anser_icon@2x.png") no-repeat;
		background-size: contain;
	}
}
.click .question {
	background-color: #abc25f;
	color: #fff;
	border: solid 1px transparent;
}

.click span {
	background-color: #fff;
}
.click span.vertical {
	transform: translateY(-50%) rotate(90deg);
}

/* メディアクエリ */
@media screen and (max-width: 1024px){
	.faqlist {
		margin-top: 0;
	}
	.faqlist .faq {
		margin-top: 5%;
	}
}
@media screen and (max-width: 767px){
	.faqlist {
		font-size: 1.5rem;
	}
	.question {
		padding: 15px 45px 15px 60px;
	}
	.question::before {
		left: 10px;
		width: 40px;
		height: 40px;
	}
	.vertical, .horizon {
		right: 8px;
		width: 25px;
	}
	.vertical {
		right: 20px;
		height: 25px;
		width: 1px;
	}
	.answer {
		padding: 10px 20px 10px 40px;
		border-width: 10px;
	}
	.answer::before {
		top: 10px;
		left: 10px;
		width: 20px;
		height: 30px;
	}
	main {
		margin-bottom: 20%;
	}
}