/* =========================================================================
 * ケイモビ: FAQページ・コラム(カテゴリナビ・関連記事・記事構成パターン)
 * FAQの details/summary 本体は style.css の .km-faq__* を使う。ここでは不足分だけを足す。
 * ====================================================================== */

/* ---------- カテゴリナビ(FAQページ内リンク・コラムカテゴリ共通) ---------- */
.km-category-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--km-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.km-category-nav > li {
	min-width: 0;
	max-width: 100%;
	margin: 0;
}

.km-category-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--km-space-1);
	max-width: 100%;
	min-height: 44px;
	padding: var(--km-space-2) var(--km-space-4);
	border: 1px solid var(--km-color-border-strong);
	border-radius: var(--km-radius-sm);
	background: var(--km-color-white);
	color: var(--km-color-link);
	font-size: var(--km-text-small);
	font-weight: var(--km-weight-medium);
	line-height: var(--km-leading-small);
	letter-spacing: 0;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: border-color var(--km-motion-fast) var(--km-easing-standard), background-color var(--km-motion-fast) var(--km-easing-standard);
}

.km-category-nav__link:hover {
	border-color: var(--km-color-link);
	background: var(--km-color-surface-info);
	color: var(--km-color-link-hover);
	text-decoration: underline;
}

.km-category-nav__link:focus-visible {
	outline: 2px solid var(--km-color-focus);
	outline-offset: 2px;
	box-shadow: var(--km-shadow-focus);
}

/* 現在地は色だけに頼らず、太字と下線(2px)で示す */
.km-category-nav__link[aria-current="page"] {
	border-color: var(--km-color-navy);
	border-bottom-width: 2px;
	color: var(--km-color-text-strong);
	font-weight: var(--km-weight-bold);
}

.km-category-nav__count {
	color: var(--km-color-muted);
	font-weight: var(--km-weight-regular);
}

/* ---------- FAQページ ---------- */
.km-faq-page__lead {
	margin: 0 0 var(--km-space-6);
	color: var(--km-color-text);
	font-size: var(--km-text-body-lg);
	line-height: var(--km-leading-body);
}

.km-faq-page__nav {
	margin: 0 0 var(--km-space-10);
}

.km-faq-page__group {
	scroll-margin-top: var(--km-space-24);
}

.km-faq-page__group + .km-faq-page__group {
	margin-top: var(--km-space-12);
}

.km-faq-page__heading {
	margin: 0 0 var(--km-space-4);
	padding-left: var(--km-space-3);
	border-left: 4px solid var(--km-color-primary);
	color: var(--km-color-text-strong);
	font-size: var(--km-text-h3);
	font-weight: var(--km-weight-bold);
	line-height: var(--km-leading-heading);
}

.km-faq-page .km-faq__item {
	scroll-margin-top: var(--km-space-24);
}

.km-faq-page__contact {
	margin-top: var(--km-space-16);
	padding: var(--km-space-6);
	border: 1px solid var(--km-color-border);
	border-radius: var(--km-radius-md);
	background: var(--km-color-surface-subtle);
}

.km-faq-page__contact-title {
	margin: 0 0 var(--km-space-2);
	font-size: var(--km-text-h4);
	font-weight: var(--km-weight-bold);
	line-height: var(--km-leading-heading);
}

.km-faq-page__contact p {
	margin: 0;
}

/* ---------- コラム一覧のカテゴリナビ ---------- */
.km-column-nav {
	margin: 0 0 var(--km-space-10);
}

/* ---------- 関連する記事 ---------- */
.km-related {
	padding-block: var(--km-space-12);
	border-top: 1px solid var(--km-color-border);
}

.km-related__title {
	margin: 0 0 var(--km-space-6);
	color: var(--km-color-text-strong);
	font-size: var(--km-text-h3);
	font-weight: var(--km-weight-bold);
	line-height: var(--km-leading-heading);
}

.km-related__list > li + li {
	padding-top: var(--km-space-6);
	border-top: 1px solid var(--km-color-border);
}

.km-related .km-article__body {
	min-width: 0;
}

.km-related .km-article__title {
	margin-bottom: 0;
}

/* ---------- 記事構成パターン ---------- */
.km-article-summary {
	padding: var(--km-space-5) var(--km-space-6);
	border: 1px solid var(--km-color-border);
	border-radius: var(--km-radius-md);
	background: var(--km-color-surface-info);
}

.km-prose .km-article-summary h3,
.km-article-summary h3 {
	margin: 0 0 var(--km-space-2);
	font-size: var(--km-text-h4);
}

.km-article-summary ul {
	margin: 0;
	padding-left: 1.25em;
}

.km-article-summary li + li {
	margin-top: var(--km-space-1);
}

.km-article-sources {
	margin-top: var(--km-space-12);
	padding-top: var(--km-space-4);
	border-top: 1px solid var(--km-color-border);
	color: var(--km-color-muted);
	font-size: var(--km-text-small);
	line-height: var(--km-leading-small);
}

.km-prose .km-article-sources h3,
.km-article-sources h3 {
	margin: 0 0 var(--km-space-2);
	color: var(--km-color-text);
	font-size: var(--km-text-small);
	font-weight: var(--km-weight-bold);
}

.km-article-sources ul {
	margin: 0;
	padding-left: 1.25em;
}

.km-article-sources a {
	overflow-wrap: anywhere;
}

.km-placeholder-text {
	padding: var(--km-space-3) var(--km-space-4);
	border: 1px solid var(--km-color-warning);
	border-radius: var(--km-radius-sm);
	background: var(--km-color-warning-surface);
	color: var(--km-color-warning);
	font-size: var(--km-text-small);
	line-height: var(--km-leading-small);
}

.km-placeholder-text strong {
	color: var(--km-color-warning);
	font-weight: var(--km-weight-bold);
}

/* ---------- SP ---------- */
@media (max-width: 781px) {
	.km-faq-page__nav,
	.km-column-nav {
		margin-bottom: var(--km-space-8);
	}

	.km-faq-page__group + .km-faq-page__group {
		margin-top: var(--km-space-10);
	}

	.km-faq-page__contact {
		margin-top: var(--km-space-12);
		padding: var(--km-space-5);
	}

	.km-related {
		padding-block: var(--km-space-10);
	}

	.km-article-summary {
		padding: var(--km-space-4);
	}

	.km-category-nav__link {
		padding-inline: var(--km-space-3);
	}
}

/* ---------- 記事内CTA・記事間リンク(本文に挿入するパターン) ---------- */
.km-article-cta {
	margin-block: var(--km-space-10) !important;
	padding: var(--km-space-6);
	border: 1px solid var(--km-color-border);
	border-left: 4px solid var(--km-color-primary);
	border-radius: var(--km-radius-md);
	background: var(--km-color-surface-subtle);
}

.km-article-cta--compare {
	border-left-color: var(--km-color-navy);
}

.km-article-cta__title {
	margin: 0 0 var(--km-space-2) !important;
	color: var(--km-color-text-strong);
	font-size: var(--km-text-h4);
	font-weight: var(--km-weight-bold);
	line-height: 1.5;
}

.km-article-cta__text {
	margin: 0 0 var(--km-space-4) !important;
	font-size: var(--km-text-small);
	line-height: var(--km-leading-small);
}

.km-prose .km-article-cta a.km-button {
	text-decoration: none;
}

.km-cluster-links,
.km-read-also {
	margin-block: var(--km-space-10) !important;
	padding: var(--km-space-5) var(--km-space-6);
	border: 1px solid var(--km-color-border);
	border-radius: var(--km-radius-md);
}

.km-read-also {
	background: var(--km-color-surface-info);
}

.km-cluster-links h2,
.km-read-also h3 {
	margin-top: 0 !important;
}

.km-cluster-links ul,
.km-read-also ul {
	margin-bottom: 0;
}

@media (max-width: 781px) {
	.km-article-cta {
		padding: var(--km-space-5);
	}

	.km-article-cta .km-button {
		width: 100%;
	}

	.km-cluster-links,
	.km-read-also {
		padding: var(--km-space-4) var(--km-space-5);
	}
}

/* ---------- 比較記事一覧(/comparison/) ---------- */
.km-comparison-index__lead {
	max-width: 46em;
	margin: 0 0 var(--km-space-3) !important;
	font-size: var(--km-text-body-lg);
}

.km-comparison-index__note {
	margin: 0 0 var(--km-space-8) !important;
	color: var(--km-color-muted);
	font-size: var(--km-text-small);
}

.km-comparison-index__note a {
	color: var(--km-color-link);
	text-decoration: underline;
}

.km-comparison-index__toc {
	margin-bottom: var(--km-space-10);
}

.km-comparison-index__group {
	scroll-margin-top: 100px;
}

.km-comparison-index__group + .km-comparison-index__group {
	margin-top: var(--km-space-16);
}

.km-comparison-index__heading {
	margin: 0 0 var(--km-space-6);
	padding-left: var(--km-space-3);
	border-left: 4px solid var(--km-color-navy);
	font-size: var(--km-text-h3);
	line-height: var(--km-leading-heading);
}

.km-comparison-index .km-article__image {
	aspect-ratio: 16 / 9;
}