@charset "UTF-8";

body {
    counter-reset: number 0;
}

.faq{
	background: #f3f9f1;
	padding-top: 70px;
	padding-bottom: 100px;
}

.faq .anker_list{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-between;
	margin-bottom: 60px;
}

.faq .anker_list:after{
	content: "";
	display: block;
	width: calc(100% / 3 - (20px * 2 / 3));
	height: 0;
}


.faq .anker_list li{
	width: calc(100% / 3 - (20px * 2 / 3));
	margin-bottom: 20px;
}


.faq .anker_list li a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%; 
	padding:16px 0;
	background: #fff;
	border: 2px solid #38b349;
	box-sizing: border-box;
	border-radius: 25px;
	font-weight: bold;
	transition: all .3s ease;
	box-sizing: border-box;
}


.faq .anker_list li a span{
	position: relative;
	box-sizing: border-box;
	padding-right: 18px;
}

.faq .anker_list li a span:after{
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	top: 50%;
	right: 0;
	border-right:2px solid #000;
	border-bottom:2px solid #000;
	transform:translateY(-50%) rotate(45deg);
	box-sizing: border-box;
	transition: all .3s ease;
}

.faq .anker_list li a:hover{
	background-color: #38b349;
	color: #fff;
	transition: all .3s ease;
}

.faq .anker_list li a:hover span:after{
	border-color: #fff;
	transition: all .3s ease;
}



.faq .catebory_list{
	margin-bottom: 70px;
}

.faq .catebory_list .category{
	background-color: #fff;
	padding:70px 12.5%;
	box-sizing: border-box;
}

.faq .catebory_list .category:not(:last-of-type){
	margin-bottom:50px;
}

.faq .catebory_list .category .qa{
	margin-top: 40px;
	border-top:1px solid #DBDBDB;
}

.faq .catebory_list .category .qa li{
	position: relative;
	padding: 45px 65px 45px 0;
	border-bottom:1px solid #DBDBDB;
	box-sizing: border-box;
}

.faq .catebory_list .category .qa li .btn{
	position: absolute;
	width: 34px;
	height: 34px;
	top: 45px;
	right: 0;
	background: #38b349;
	border:2px solid #38b349;
	border-radius: 50%; 
	box-sizing: border-box;
	cursor:pointer;
	transition: all .3s ease;
}

.faq .catebory_list .category .qa li .btn.on{
	background-color: #fff;
	transition: all .3s ease;
}



.faq .catebory_list .category .qa li .btn .bdr_box{
	position: relative;
	width: 100%;
	height: 100%;
}

.faq .catebory_list .category .qa li .btn .bdr_box:before{
	content:"";
	position: absolute;
	width: 16px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	background-color: #fff;
	transition: transform .3s ease;
}


.faq .catebory_list .category .qa li .btn.on .bdr_box:before{
	background-color: #38b349;
	transition: transform .3s ease;
}

.faq .catebory_list .category .qa li .btn .bdr_box:after{
	content:"";
	position: absolute;
	width: 16px;
	height: 2px;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%) rotate(90deg);
	background-color: #fff;
	transition: transform .3s ease;
}

.faq .catebory_list .category .qa li .btn.on .bdr_box:after{
	background-color: #38b349;
	transform: translateX(-50%) translateY(-50%) rotate(0);
	transition: transform .3s ease;
}

.faq .catebory_list .category .qa li .question{
	position: relative;
	font-weight: bold;
	padding-left: 70px;
	letter-spacing: 0.2em;
	line-height: 1.5;
	margin-bottom: 17px;
	box-sizing: border-box;
	cursor: pointer;
}

.faq .catebory_list .category .qa li .question:hover{
	text-decoration: underline;
}



.faq .catebory_list .category .qa li .question:before{
    counter-increment: number 1;
	content:"Q" counter(number) ".";
	position: absolute;
	left: 0;
	top: -7px;
	font-family: 'Lexend Deca', sans-serif;
	font-weight: normal;
	font-size: 26px;
	letter-spacing: 0.05em;
	color: #38b349;
}

.faq .catebory_list .category .qa li .answer{
	position: relative;
	padding-left: 70px;
	letter-spacing: 0.08em;
	line-height: 1.5;
	box-sizing: border-box;
	display: none;
	word-break: break-all;
}

.faq .catebory_list .category .qa li .answer a{
	text-decoration: underline;
}

.faq .catebory_list .category .qa li .answer a:hover{
	color:#38b349;
}

/* .faq .catebory_list .category .qa li:first-child .answer{
	display: block;
} */


.faq .catebory_list .category .qa li .answer:before{
    content:"A" counter(number) ".";
	position: absolute;
	left: 2px;
	top: -7px;
	font-family: 'Lexend Deca', sans-serif;
	font-weight: normal;
	font-size: 26px;
	letter-spacing: 0.05em;
	color: #F24C39;
}

@media screen and (max-width:1080px){
	.faq .anker_list{
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.faq .anker_list:after{
		content: initial;
	}

	.faq .anker_list li{
		width: 100%;
		max-width: 350px;
		margin-bottom: 15px;
	}
}


@media screen and (max-width:767px){
	.faq{
		padding-top:50px; 
		padding-bottom:50px; 
	}

	.faq .catebory_list .category{
		padding: 40px 15px;
	}

	.faq .catebory_list .category .qa li{
		padding:20px 30px 20px 0;
	}

	.faq .catebory_list .category .qa li .question{
		padding-left: 50px;
	}

	.faq .catebory_list .category .qa li .question:before{
		font-size: 20px;
	}

	.faq .catebory_list .category .qa li .answer{
		padding-left: 50px;
	}

	.faq .catebory_list .category .qa li .answer:before{
	    left: 1px;
		font-size: 20px;
	}

	.faq .catebory_list .category .qa li .btn{
		width: 25px;
		height: 25px;
		top: 20px;
	}

	.faq .catebory_list .category .qa li .btn .bdr_box:before,
	.faq .catebory_list .category .qa li .btn .bdr_box:after{
		width: 10px;
		height: 2px;
	}
}