/**
 * /ai/ /pmo/ ページ末尾のFAQセクション用スタイル
 * FAQPage JSON-LD と対応した HTML の見た目を、他セクションに馴染ませつつ
 * 読みやすさ最優先で組む。
 */

.service-faq {
	padding: 80px 0 100px;
	background: #f7f8fb;
}
@media (max-width: 767px) {
	.service-faq { padding: 40px 0 60px; }
}

.service-faq .c-title {
	margin-bottom: 40px;
	text-align: center;
}
@media (max-width: 767px) {
	.service-faq .c-title { margin-bottom: 24px; }
}

.service-faq__list {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 20px;
}

.service-faq__item {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 40, 80, 0.06);
	padding: 24px 28px;
	border-left: 4px solid #54c2f0;
}
@media (max-width: 767px) {
	.service-faq__item { padding: 18px 20px; }
}

.service-faq__q,
.service-faq__a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.75;
}

.service-faq__q {
	font-weight: 700;
	color: #1a2e4a;
	font-size: 17px;
	margin-bottom: 10px;
}

.service-faq__a {
	color: #34495e;
	font-size: 15px;
	padding-top: 10px;
	border-top: 1px dashed #dfe6ef;
}

@media (max-width: 767px) {
	.service-faq__q { font-size: 15px; }
	.service-faq__a { font-size: 14px; }
}

.service-faq__mark {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-family: 'Sarabun', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	margin-top: 2px;
}

.service-faq__q .service-faq__mark {
	background: #54c2f0;
	color: #fff;
}
.service-faq__a .service-faq__mark {
	background: #eef4f9;
	color: #54c2f0;
}