@charset "utf-8";

/* Q&A
========================================================= */

.qaContents { width: 100%; max-width: 1000px; margin: 90px auto 0; }
.qaContents div.title { font-size: 4.2rem; line-height: 4.2rem; font-weight: bold; text-align: center; }

.qaContents div.list { margin-top: 100px; background: #f2f2f2; padding: 0 30px 60px 0px; margin-left: 90px; }
.qaContents div.list ul { transform: translateY(-30px); }
.qaContents div.list ul + ul { margin-top: 60px; }
.qaContents div.list ul li.qes { display: flex; flex-wrap: wrap; gap: 0 15px; background: #000; max-width: 480px; padding: 15px 30px; transform: translateX(-98px); align-items: center; }
.qaContents div.list ul li.qes .num { width: 24px; aspect-ratio: 24/30; display: flex; flex-wrap: wrap; align-items: center; }
.qaContents div.list ul li.qes p { flex: 1; color: #fff; font-size: 2rem; font-weight: 700; line-height: 1.5; }
.qaContents div.list ul li.ans { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; }
.qaContents div.list ul li.ans p.ansLabel { width: 100px; text-align: right; }
.qaContents div.list ul li.ans p.ansLabel img { width: 30px; }
.qaContents div.list ul li.ans p + p { flex: 1; font-size: 2.0rem; line-height: 3.0rem; padding: 0 50px 0 50px; }

.qaContents p.note { text-align: right; padding: 50px 0 100px 0; }
.qaContents p.note span { display: inline-block; }



@media screen and (max-width: 1000px) {
	.qaContents { width: 90.625%; -webkit-transition: all 0.2s; transition: all 0.2s; }
}

@media screen and (max-width: 960px) {
}

@media screen and (max-width: 768px) {
	.qaContents { width: 100%; margin: 35px auto 0; }
	
	.qaContents div.list { margin-top: 60px; padding: 0 15px 40px 0px; margin-left: 30px; }
	.qaContents div.list ul + ul { margin-top: 40px; }
	.qaContents div.list ul li.qes { transform: translateX(-38px); inline-size: calc((100% - 10px)); padding: 15px 15px 15px 25px; }
	.qaContents div.list ul li.qes .num { width: 19px; }
	.qaContents div.list ul li.qes p { font-size: 1.6rem; }
	.qaContents div.list ul li.ans { margin-top: 30px; align-items: flex-start; }
	.qaContents div.list ul li.ans p.ansLabel { width: 35px; margin-top: 5px; }
	.qaContents div.list ul li.ans p.ansLabel img { width: 15px; }
	.qaContents div.list ul li.ans p + p { font-size: 1.5rem; line-height: 2.3rem; padding: 0 10px 0 15px; }
	
	
	
	
	.qaContents p.note {
		width: 90.625%;
		font-size: 1.2rem;
		line-height: 1.8rem;
		text-align: left;
		padding: 30px 0 50px 0;
		margin: 0 auto;
	}
}