@charset "utf-8";
.faqSec{
	margin:0 auto;
	text-align:left;
}
.faqSec h2{
	display:block;
	line-height:1.0;
}
.faqList dt,
.faqList dd{
	display:flex;
	position:relative;
	line-height:1.7;
}
.faqList dt{
	border-radius:4px;
	transition:all 0.4s;
	cursor:pointer;
}
.faqList dt:hover{background-color:#f7f7f7;}
.faqList dd{
	max-height:0;
	padding-bottom:0;
	border-bottom:1px solid #ccc;
	overflow:hidden;
	transform-origin:center top;
	transition:all 0.4s;
}
.faqList input[type="checkbox"]:checked+dt+dd{
	max-height:9999px;
	border-bottom-color:var(--light-color);
}
.faqList dt:before,
.faqList dd:before{
	content:"";
	display:block;
}
.faqList dt:before{background:url("../img/faq/q.svg") no-repeat center center / contain;}
.faqList dd:before{background:url("../img/faq/a.svg") no-repeat center center / contain;}
.faqList dt label,
.faqList dd div{display:block;}
.faqList dt label{
	position:relative;
	transition:all 0.4s;
}
.faqList dt label:hover{opacity:1;}
.faqList dt label:before,
.faqList dt label:after{
	content:"";
	display:block;
	position:absolute;
	height:1px;
	background-color:var(--main-color);
	transform-origin:center center;
	transition:transform 0.4s;
}
.faqList dt label:after{transform:rotate(90deg);}
.faqList dd a{
	display:block;
	line-height:1.0;
}
.faqList input[type="checkbox"]:checked+dt label:after{transform:rotate(0deg);}
.faqLink{text-align:center;}
.faqLink .boxBtn{margin:0 auto;}
.faqLink .boxBtn span{text-align:center;}
@media screen and (max-width:767.98px){/*390px*/
	.faqSec+.faqSec{margin-top:16.4103vw;}
	.faqSec{margin:0 5.1282% 6.4103vw;}
	.faqSec h2{
		margin-bottom:6.1538vw;
		font-size:1.6667rem;
	}
	.faqList dt{font-size:1.1667rem;}
	.faqList dd{
		font-size:1.0rem;
		line-height:2.0;
	}
	.faqList dt{margin-bottom:12px;}
	.faqList dt:not(:first-of-type){margin-top:6.4103vw;}
	.faqList input[type="checkbox"]:checked+dt+dd{padding-bottom:2.0513vw;}
	.faqList dt:before,
	.faqList dd:before{
		width:9.4872vw;
		height:9.4872vw;
	}
	.faqList dt label,
	.faqList dd div{
		width:calc(100% - 11.5385vw);
		margin-left:2.0513vw;
	}
	.faqList dt label{
		padding-right:9.7436vw;
		margin-top:1.1vw;
	}
	.faqList dd div{margin-top:-1.4vw;}
	.faqList dt label:before,
	.faqList dt label:after{
		width:5.1282vw;
		right:0;
		top:2.3vw;
	}
	.faqLink{margin-top:11.5385vw;}
	.faqLink .boxBtn{
		width:71.7949vw;
		height:15.3846vw;
		padding:2.3077vw;
		font-size:1.3333rem;
	}
	.faqLink .boxBtn span{padding-left:6.4103vw;}
}
@media screen and (min-width:768px){
	.faqSec{
		width:91.666%;
		max-width:1100px;
	}
	.faqSec h2{font-size:1.5rem;}
	.faqLink .boxBtn{font-size:1.25rem;}
}
@media screen and (min-width:768px) and (max-width:1219.98px){
	.faqSec+.faqSec{margin-top:6.8333vw;}
	.faqSec h2{margin-bottom:4.1667vw;}
	.faqList dt{margin-bottom:1vw;}
	.faqList dt:not(:first-of-type){margin-top:2.3333vw;}
	.faqList input[type="checkbox"]:checked+dt+dd{padding-bottom:1vw;}
	.faqList dt:before,
	.faqList dd:before{
		width:4.6667vw;
		height:4.6667vw;
	}
	.faqList dt label,
	.faqList dd div{
		width:calc(100% - 6.6667vw);
		margin-left:2vw;
		padding-top:1.25vw;
	}
	.faqList dt label{padding-right:3.3333vw;}
	.faqList dt label:before,
	.faqList dt label:after{
		width:2.1667vw;
		right:0.8333vw;
		top:2.25vw;
	}
	.faqLink{margin-top:7.5vw;}
	.faqLink .boxBtn{
		width:33.3333vw;
		height:6.1667vw;
		padding:1.5vw;
	}
	.faqLink .boxBtn span{padding-left:2.5vw;}
}
@media screen and (min-width:1220px){
	.faqSec+.faqSec{margin-top:82px;}
	.faqSec h2{margin-bottom:50px;}
	.faqList dt{margin-bottom:12px;}
	.faqList dt:not(:first-of-type){margin-top:28px;}
	.faqList input[type="checkbox"]:checked+dt+dd{padding-bottom:12px;}
	.faqList dt:before,
	.faqList dd:before{
		width:56px;
		height:56px;
	}
	.faqList dt label,
	.faqList dd div{
		width:calc(100% - 80px);
		margin-left:24px;
		padding-top:15px;
	}
	.faqList dt label{padding-right:40px;}
	.faqList dt label:before,
	.faqList dt label:after{
		width:26px;
		right:10px;
		top:27px;
	}
	.faqLink{margin-top:90px;}
	.faqLink .boxBtn{
		width:400px;
		height:74px;
		padding:18px;
	}
	.faqLink .boxBtn span{padding-left:30px;}
}
