/**
 * FAQ一覧ブロックのスタイル
 */

.simple-faq-ex-list {
	margin: 2rem 0;
}

/* 共通スタイル */
.simple-faq-ex-item {
	margin-bottom: 2rem;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 1.5rem;
	background-color: #fff;
	transition: box-shadow 0.3s ease;
}

.simple-faq-ex-item:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* カテゴリバッジ */
.simple-faq-ex-category {
	margin-bottom: 0.75rem;
}

.simple-faq-ex-category-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	margin-right: 0.5rem;
	font-size: 0.875rem;
	background-color: #f0f0f0;
	color: #333;
	border-radius: 4px;
}

/* Q&Aアイコン */
.simple-faq-ex-q-icon,
.simple-faq-ex-a-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-right: 0.75rem;
	font-weight: bold;
	color: #fff;
	border-radius: 50%;
	font-size: 1rem;
	vertical-align: middle;
}

.simple-faq-ex-q-icon {
	background-color: #2271b1;
}

.simple-faq-ex-a-icon {
	background-color: #50575e;
}

/* 質問部分（共通） */
.simple-faq-ex-question {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.simple-faq-ex-q-text,
.simple-faq-ex-q-title {
	flex: 1;
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: #1d1d1f;
	line-height: 1.5;
}

/* 回答部分（共通） */
.simple-faq-ex-answer {
	display: flex;
	align-items: flex-start;
}

.simple-faq-ex-a-content {
	flex: 1;
	color: #50575e;
	line-height: 1.75;
}

.simple-faq-ex-a-content p:first-child {
	margin-top: 0;
}

.simple-faq-ex-a-content p:last-child {
	margin-bottom: 0;
}

/* dl, dt, dd パターン */
.simple-faq-ex-tag-dl-dt-dd .simple-faq-ex-item {
	/* dlのデフォルトマージンをリセット */
	margin-left: 0;
}

.simple-faq-ex-tag-dl-dt-dd dt.simple-faq-ex-question {
	font-weight: 600;
}

.simple-faq-ex-tag-dl-dt-dd dd.simple-faq-ex-answer {
	margin-left: 0;
	padding-left: 0;
}

/* p, p パターン */
.simple-faq-ex-tag-p-p p.simple-faq-ex-question {
	font-weight: 600;
	font-size: 1.125rem;
}

.simple-faq-ex-tag-p-p p.simple-faq-ex-answer {
	margin-top: 0;
}

/* h2, p パターン */
.simple-faq-ex-tag-h2-p h2.simple-faq-ex-question {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 1rem 0;
}

.simple-faq-ex-tag-h2-p .simple-faq-ex-q-text {
	font-size: 1.5rem;
}

.simple-faq-ex-tag-h2-p p.simple-faq-ex-answer {
	margin: 0;
}

/* h3, p パターン */
.simple-faq-ex-tag-h3-p h3.simple-faq-ex-question {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 1rem 0;
}

.simple-faq-ex-tag-h3-p .simple-faq-ex-q-text {
	font-size: 1.25rem;
}

.simple-faq-ex-tag-h3-p p.simple-faq-ex-answer {
	margin: 0;
}

/* h4, p パターン */
.simple-faq-ex-tag-h4-p h4.simple-faq-ex-question {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 1rem 0;
}

.simple-faq-ex-tag-h4-p .simple-faq-ex-q-text {
	font-size: 1.125rem;
}

.simple-faq-ex-tag-h4-p p.simple-faq-ex-answer {
	margin: 0;
}

/* 結果なし */
.simple-faq-ex-no-items {
	padding: 2rem;
	text-align: center;
	color: #666;
	background-color: #f9f9f9;
	border-radius: 8px;
}

/* エディタ内のプレビュー用調整 */
.editor-styles-wrapper .simple-faq-ex-list {
	max-width: 100%;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
	.simple-faq-ex-q-icon,
	.simple-faq-ex-a-icon {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.875rem;
		margin-right: 0.5rem;
	}

	.simple-faq-ex-q-text,
	.simple-faq-ex-q-title {
		font-size: 1.125rem;
	}

	.simple-faq-ex-tag-h2-p h2.simple-faq-ex-question,
	.simple-faq-ex-tag-h2-p .simple-faq-ex-q-text {
		font-size: 1.25rem;
	}

	.simple-faq-ex-tag-h3-p h3.simple-faq-ex-question,
	.simple-faq-ex-tag-h3-p .simple-faq-ex-q-text {
		font-size: 1.125rem;
	}

	.simple-faq-ex-tag-h4-p h4.simple-faq-ex-question,
	.simple-faq-ex-tag-h4-p .simple-faq-ex-q-text {
		font-size: 1rem;
	}
}