/* ==========================================================================
   よくある質問（page-faq.php。Figma 78:2878・SP 237:4545）
   - 1問は c-faq-item（コーポレートの共通パーツ）。ここは分類の目次と、分類の見出しだけ
   - PC: 左に分類の目次（スクロールについてくる）。SP: 上に分類のチップ（折り返し）
   ========================================================================== */
.p-faq__inner {
	display: flex;
	gap: var(--space-4xl);
	align-items: flex-start;
	padding-block: 96px 140px; /* Figma の 96px・140px */
}

/* 分類の目次 */
.p-faq__nav {
	position: sticky;
	top: calc(var(--header-height, 96px) + var(--space-lg) + var(--admin-bar-offset, 0px));
	flex-shrink: 0;
	width: 260px;
}

.p-faq__nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.p-faq__meta {
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	padding: 14px 18px;
	border-radius: 12px;
	background: var(--color-bg-subtle);
	color: var(--color-text-primary);
	font: var(--text-label-l);
	letter-spacing: var(--ls-label-l);
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.p-faq__meta:hover {
	background: var(--color-bg-muted);
}

.p-faq__meta.is-current {
	background: var(--color-bg-brand);
	color: var(--color-text-on-brand);
}

.p-faq .p-faq__meta-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--color-text-brand);
}

.p-faq__meta.is-current .p-faq__meta-icon {
	color: inherit;
}

/* 分類ごとの質問 */
.p-faq__list {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 56px;
	min-width: 0;
}

.p-faq__group {
	scroll-margin-top: calc(var(--header-height, 96px) + var(--space-lg));
}

.p-faq__row {
	display: flex;
	gap: var(--space-sm);
	align-items: center;
	padding-bottom: var(--space-md);
	color: var(--color-text-primary);
	font: var(--text-h3);
	letter-spacing: var(--ls-h3);
}

.p-faq__dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full);
	background: var(--color-business-paint);
}

.p-faq__group--care .p-faq__dot {
	background: var(--color-business-care);
}

.p-faq__body {
	border-top: 1px solid var(--color-border-default);
}

/* 目次の幅は 260px のまま（狭めると「介護保険適用リフォーム」が2行になる） */
@media (max-width: 1023px) {
	.p-faq__inner {
		gap: var(--space-2xl);
	}
}

@media (max-width: 767px) {
	.p-faq__inner {
		flex-direction: column;
		gap: var(--space-2xl);
		align-items: stretch;
		padding-block: var(--space-2xl) var(--space-6xl);
	}

	/* SP: 上に分類のチップ（押すとその分類の見出しへ。Figma 237:4575） */
	.p-faq__nav {
		position: static;
		width: auto;
	}

	.p-faq__nav-list {
		flex-flow: row wrap;
	}

	.p-faq__meta {
		gap: var(--space-2xs);
		min-height: 44px;
		padding: 0 var(--space-md);
		border-radius: var(--radius-full);
	}

	.p-faq .p-faq__meta-icon {
		transform: rotate(90deg); /* SP は下向き（Figma chevron-down） */
	}

	.p-faq__list {
		gap: var(--space-3xl);
	}

	.p-faq__row {
		padding-bottom: var(--space-md);
	}
}