/* =========================================================================
 * Make it — Q&Aページ（/faq/）固有スタイル（フェーズ3）
 *
 * 見た目の正：Figma PC 110:2 / SP 110:96。
 * 見出し・リード・最終CTA等の汎用パーツは front.css を共有再利用。
 * このページのQ&Aカードは、TOPのFAQアコーディオン（.mk-faq-item等）とは
 * 別物（このページは常時展開・トグルなしの静的カード）のため新規クラスで持つ。
 *
 * 2026-08-20：カード面を半透明白→白ベタへ（S-11・PR-E #65の白ベタ統一パスが
 * このファイルを対象外にしていたため漏れていた）。設問（.mk-faq-card__q-text）の
 * 書体もZen Kaku BoldからNoto Sans JPへ統一（S-10・TOPの設問と揃える／Issue #31）。
 * ====================================================================== */

.mk-section--faq-intro { background: var(--bg-alt); }
.mk-section--faq-list  { background: var(--bg-base); }

.mk-faq-cards {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
}

.mk-faq-card {
	padding: 1.125rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	background: var(--bg-card);
}

.mk-faq-card__q,
.mk-faq-card__a {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.mk-faq-card__a {
	margin-top: 0.625rem;
}

.mk-faq-card__label {
	flex: none;
	font-family: var(--font-label);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* 「Q」ラベルは文字なので、装飾用の --c-accent（明面で3.1:1）ではなく
   明面のテキスト用トークンを使う（4.54:1・AA）。 */
.mk-faq-card__q .mk-faq-card__label {
	color: var(--c-light-text);
}

.mk-faq-card__a .mk-faq-card__label {
	color: var(--c-text-sub);
}

.mk-faq-card__q-text {
	flex: 1 1 0%;
	min-width: 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--c-text);
}

.mk-faq-card__a-text {
	flex: 1 1 0%;
	min-width: 0;
	font-family: var(--font-body);
	line-height: var(--lh-body);
	color: var(--c-text-sub);
}

.mk-faq-card__a-list {
	flex: 1 1 0%;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-body);
	line-height: var(--lh-body);
	color: var(--c-text-sub);
}

.mk-faq-card__a-list li {
	position: relative;
	padding-left: 1.125rem;
}

.mk-faq-card__a-list li::before {
	content: "・";
	position: absolute;
	left: 0;
}

@media (min-width: 1024px) {
	.mk-faq-cards {
		gap: 0.875rem;
	}

	.mk-faq-card {
		padding: 1.5rem 1.75rem;
	}

	.mk-faq-card__label {
		font-size: 1.0625rem;
	}

	.mk-faq-card__q-text {
		font-size: 1.1875rem;
	}

	.mk-faq-card__a-text,
	.mk-faq-card__a-list {
		font-size: 1rem;
	}
}
