@charset "utf-8";
:root{interpolate-size:allow-keywords;}
.pageTtl{
	display:flex;
	justify-content:center;
	margin-bottom:0;
}
.pageTtl:before{
	content:"";
	display: block;
	background:url("../img/faq/ttl-icon01.webp") no-repeat center bottom / contain;
}
.pageTtl:after{
	content:"";
	display: block;
	background:url("../img/faq/ttl-icon02.webp") no-repeat center bottom / contain;
}
.pageTtl span{display:block;}
.faqBox{interpolate-size:allow-keywords;
	background-color:var(--white-color);
	border:1px solid var(--default-color);
	line-height:2.0;
}
.faqBox::details-content{
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:0fr;
	width:100%;
	opacity:0;
	overflow:clip;
	background-color:#f0f2ff;
	transition:grid-template-rows 0.4s,opacity 0.4s,content-visibility 0.4s allow-discrete;
}
.faqBox[open]::details-content{
	grid-template-rows:1fr;
	opacity:1;
	transition:grid-template-rows 0.4s,opacity 0.4s,content-visibility 0.4s allow-discrete;
}
.faqQ{
	display:grid;
	grid-template-columns:auto 1fr;
	font-weight:500;
	cursor:pointer;
}
.faqQ::-webkit-details-marker{display:none;}
.faqQ:before{
	content:"";
	display:block;
	background:url("../img/faq/q-icon.svg") no-repeat center center / contain;
}
.faqQ > *{
	position:relative;
	display:block;
	width:100%;
}
.faqQ > *:before,
.faqQ > *:after{
	content:"";
	display:block;
	position:absolute;
	right:0;
	background-color: var(--default-color);
}
.faqQ > *:after{
	transform:rotate(90deg);
	transition:all 0.4s ease;
}
.faqBox[open] .faqQ > *:after{transform:rotate(0deg);}
.faqA{
	display:grid;
	grid-template-columns:auto 1fr;
	border-top:2px dotted #b3b5b7;
	background-color:var(--white-color);
	transition:all 0.4s ease;
}
.faqA:before{
	content:"";
	display:block;
	background:url("../img/faq/a-icon.svg") no-repeat center center / contain;
}


@media screen and (max-width:1279.98px){}
@media screen and (max-width:767.98px){
	.pageTtl span{margin:0 2vw;}
	.pageTtl:before{
		width:42px;
		height:54px;
	}
	.pageTtl:after{
		width:35px;
		height:54px;
	}
	.faqBox{
		padding:20px 4vw 0;
		border-radius:16px;
	}
	.faqBox:nth-of-type(n+2){margin-top:20px;}
	.faqQ{
		align-items:flex-start;
		padding-bottom:20px;
		font-size:16px;
	}
	.faqQ:before{
		width:30px;
		height:30px;
		margin:4px 8px 0 0;
	}
	.faqQ > *:before,
	.faqQ > *:after{
		width:16px;
		height:3px;
		top:calc(50% - 1.5px);
		border-radius:2px;
	}
	.faqQ p{padding-right:30px;}
	.faqA{
		padding:20px 0;
		font-size:13px;
	}
	.faqA:before{
		width:30px;
		height:30px;
		margin-right:8px;
	}
}
@media screen and (min-width:768px){
	.pageTtl span{
		margin:0 min(117px,9.140625vw);
		padding-top:min(6px,0.46875vw);
	}
	.pageTtl:before{
		width:min(84px,6.563vw);
		height:min(108px,8.438vw);
	}
	.pageTtl:after{
		width:min(70px,5.469vw);
		height:min(108px,8.438vw);
	}
	.faqBox{
		padding:min(40px,3.125vw) min(40px,3.125vw) min(16px,1.25vw);
		border-radius:min(16px,1.25vw);
	}
	.faqBox:nth-of-type(n+2){margin-top:min(40px,3.125vw);}
	.faqQ{
		grid-template-columns:auto 1fr;
		align-items:center;
		padding-bottom:min(24px,1.875vw);
		font-size:min(24px,1.875vw);
	}
	.faqQ:before{
		width:min(60px,4.688vw);
		height:min(60px,4.688vw);
		margin-right:min(26px,2.031vw);
	}
	.faqQ > *:before,
	.faqQ > *:after{
		width:min(32px,2.5vw);
		height:min(6px,0.469vw);
		top:calc(50% - min(6px,0.469vw));
		border-radius:3px;
	}
	.faqQ p{padding-right:min(76px,5.938vw);}
	.faqA{
		padding:min(24px,1.875vw) 0;
		font-size:min(16px,1.25vw);
	}
	.faqA:before{
		width:min(60px,4.688vw);
		height:min(60px,4.688vw);
		margin-right:min(26px,2.031vw);
	}

}
@media screen and (min-width:768px) and (max-width:1279.98px){
}
@media screen and (min-width:1280px){}