/* ソフトのページ（[kb_app]）— design/app-pc.dc.html・app-sp.dc.html
 * クラスはすべて kba- で始める。Cocoon の .article h2 などに勝つよう、セレクタは .kba から書く
 * スマホを基本にし、768px 以上で行を横並び、1024px 以上でカテゴリを左の列に置く
 */

/* ---------- Cocoon の記事らしい部分を隠す（body.kba-page は [kb_app] があるページだけに付く） ----------
 * タイトル・投稿日／更新日・パンくず・目次・SNS シェア／フォロー・投稿者・コメント・AddToAny の丸いシェアボタン */
body.kba-page .entry-title,
body.kba-page .date-tags,
body.kba-page .breadcrumb,
body.kba-page .toc,
body.kba-page .sns-share,
body.kba-page .sns-follow,
body.kba-page .author-info,
body.kba-page .footer-meta,
body.kba-page #comment-area,
body.kba-page .comment-area,
body.kba-page .comment-btn,
body.kba-page .addtoany_share_save_container,
body.kba-page .a2a_kit {
	display: none !important;
}

/* 本文エリアの上下の余白をなくし、ヘッダー・フッターとソフトの帯を直接つなげる（TOP の kb-home.css と同じ） */
body.kba-page #content {
	margin-top: 0;
}

body.kba-page #main {
	padding-top: 0;
	padding-bottom: 0;
	border-top-width: 0;
	border-bottom-width: 0;
}

body.kba-page #main .entry-content {
	margin-top: 0;
	margin-bottom: 0;
}

body.kba-page #main .article,
body.kba-page #main .entry-content > .kba {
	margin-bottom: 0;
}

/* ---------- 全体 ---------- */
.kba {
	--kba-accent: #2A62A8;
	--kba-accent-dark: #1E4B82;
	--kba-key: #E8A63F;
	--kba-ink: #1C2330;
	--kba-ink-2: #3B4452;
	--kba-ink-3: #505A68;
	--kba-bg: #EEF1F4;
	--kba-line: #D3D9E0;
	--kba-keyline: #B9C2CD;
	--kba-row-line: #EEF1F4;
	--kba-white: #FFFFFF;
	--kba-tip: #FDF3E1;
	--kba-tip-icon: #8A5A12;
	/* 上に残るカテゴリの高さ（スマホ）。行やセクションへ移動したとき、その下に来るように */
	--kba-sticky: 0px;

	color: var(--kba-ink);
	font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	/* 背景だけ画面幅いっぱいに塗る（横スクロールは発生しない） */
	border-image: conic-gradient(var(--kba-bg) 0 0) fill 0 // 0 100vw;
}

.kba *,
.kba *::before,
.kba *::after {
	box-sizing: border-box;
}

/* Cocoon の見出し・段落・リストの装飾を打ち消す（kb-home.css と同じ強さ） */
html body .kba h1,
html body .kba h2,
html body .kba h3,
html body .kba p,
html body .kba ol,
html body .kba ul,
html body .kba li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

html body .kba h1::before,
html body .kba h1::after,
html body .kba h2::before,
html body .kba h2::after {
	content: none;
}

html body .kba ol,
html body .kba ul,
html body .kba li {
	list-style: none;
}

.kba a {
	color: var(--kba-accent);
}

.kba a:hover {
	color: var(--kba-accent-dark);
}

.kba a:focus-visible,
.kba button:focus-visible,
.kba .kba-search:focus-within {
	outline: 3px solid var(--kba-key);
	outline-offset: 2px;
}

.kba [hidden] {
	display: none !important;
}

.kba [data-kba-sec],
.kba [data-kbs-row] {
	scroll-margin-top: calc(var(--kba-sticky) + 16px);
}

.kba-pc-only {
	display: none;
}

/* ---------- キー ---------- */
.kba .kba-keys {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}

.kba .kba-combo {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.kba .kba-key {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	margin: 0;
	padding: 0 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--kba-ink);
	white-space: nowrap;
	background: var(--kba-white);
	border: 1px solid var(--kba-keyline);
	border-bottom-width: 4px;
	border-radius: 6px;
	box-shadow: none;
}

.kba .kba-plus {
	font-size: 12px;
	color: #8A929C;
}

.kba .kba-or {
	font-size: 11px;
	color: #8A929C;
}

.kba .kba-na {
	font-size: 13px;
	color: #8A929C;
}

/* Windows / Mac の切り替え（kb-shortcuts.js が html[data-kbs-os] を付ける。付くまでは Windows） */
.kba .kba-keys--mac {
	display: none;
}

html[data-kbs-os="mac"] .kba .kba-keys--mac {
	display: flex;
}

html[data-kbs-os="mac"] .kba .kba-keys--win {
	display: none;
}

/* ---------- 「動きを見る」 ---------- */
.kba .kbs-demo-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 36px;
	padding: 0 12px;
	font-size: 12px;
	border-radius: 18px;
}

.kba .kbs-demo-btn svg {
	width: 11px;
	height: 11px;
}

/* ---------- ソフトの帯（白） ---------- */
.kba .kba-hero {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px 4px 22px;
	border-image: linear-gradient(var(--kba-white) 0 calc(100% - 1px), var(--kba-line) 0) fill 0 // 0 100vw;
}

.kba .kba-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--kba-ink-3);
}

.kba .kba-crumbs li + li::before {
	margin-right: 6px;
	content: "/";
}

.kba .kba-crumbs a {
	color: var(--kba-ink-3);
}

.kba .kba-crumbs [aria-current] {
	font-weight: 700;
	color: var(--kba-ink);
}

/* スマホはグループ名（Microsoft Office など）を省く */
.kba .kba-crumb-group {
	display: none;
}

.kba .kba-hero-main {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.kba .kba-hero-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.kba .kba-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	font-size: 34px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.kba .kba-title-sub {
	font-size: 16px;
	font-weight: 700;
	color: var(--kba-ink-2);
}

.kba .kba-lead {
	font-size: 14px;
	line-height: 1.8;
	color: var(--kba-ink-2);
}

.kba .kba-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.kba .kba-tag {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	background: var(--kba-bg);
	border-radius: 14px;
}

.kba .kba-tag--plain {
	padding: 0 4px;
	font-weight: 400;
	color: var(--kba-ink-3);
	background: none;
}

.kba .kba-tag--cats {
	display: none;
}

/* 絞り込み・OS の切り替え */
.kba .kba-tools {
	display: flex;
	gap: 8px;
}

.kba .kba-search {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 8px;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	color: var(--kba-ink-3);
	background: var(--kba-white);
	border: 2px solid var(--kba-keyline);
	border-radius: 12px;
	cursor: text;
}

.kba .kba-search svg {
	flex: 0 0 auto;
}

/* Cocoon の input[type="search"] の枠・幅・余白より強くする */
html body .kba .kba-search input.kba-search-input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	max-width: none;
	height: 40px;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 16px;
	color: var(--kba-ink);
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.kba .kba-search input.kba-search-input::placeholder {
	color: #7A8594;
	opacity: 1;
}

.kba .kba-os {
	display: flex;
	flex: 0 0 auto;
	padding: 3px;
	background: var(--kba-bg);
	border: 0;
	border-radius: 12px;
}

/* kb-shortcuts.css の .kbs-os-btn（青いボタン）より強くする */
.kba .kba-os .kba-os-btn {
	height: 40px;
	padding: 0 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--kba-ink);
	background: var(--kba-white);
	border: none;
	border-radius: 9px;
	cursor: pointer;
}

.kba .kba-os .kba-os-btn + .kba-os-btn {
	border-left: 0;
}

.kba .kba-os .kba-os-btn.is-active {
	color: var(--kba-white);
	background: var(--kba-ink);
}

/* ---------- カテゴリ（スマホ: 上に残る丸いボタンの列） ---------- */
.kba .kba-body {
	display: flex;
	flex-direction: column;
}

.kba .kba-nav {
	position: sticky;
	top: 0;
	z-index: 20;
	margin: 0 -16px;
	padding: 12px 0;
	border-image: linear-gradient(var(--kba-bg) 0 calc(100% - 1px), var(--kba-line) 0) fill 0 // 0 100vw;
}

/* 管理バー（ログイン中）が画面上に固定される幅では、その下に置く */
@media (min-width: 601px) {
	body.admin-bar .kba .kba-nav {
		top: 46px;
	}
}

.kba .kba-nav-head {
	display: none;
}

.kba .kba-nav-list {
	display: flex;
	gap: 8px;
	padding: 0 20px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.kba .kba-nav-list::-webkit-scrollbar {
	display: none;
}

.kba .kba-nav-list li {
	flex: 0 0 auto;
}

.kba .kba-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--kba-ink);
	white-space: nowrap;
	text-decoration: none;
	background: var(--kba-white);
	border: 1px solid var(--kba-line);
	border-radius: 20px;
}

.kba a.kba-nav-link:hover {
	color: var(--kba-ink);
	background: #F7F9FB;
}

.kba .kba-nav-count {
	font-size: 11px;
	color: var(--kba-ink-3);
}

.kba a.kba-nav-link.is-current {
	font-weight: 700;
	color: var(--kba-white);
	background: var(--kba-ink);
	border-color: var(--kba-ink);
}

.kba .kba-nav-link.is-current .kba-nav-count {
	color: var(--kba-line);
}

/* ---------- 本文 ---------- */
.kba .kba-main {
	display: flex;
	flex-direction: column;
	gap: 36px;
	min-width: 0;
	padding: 24px 0 56px;
}

.kba .kba-empty {
	padding: 16px 18px;
	font-size: 15px;
	color: var(--kba-ink-2);
	background: var(--kba-white);
	border-radius: 14px;
}

.kba .kba-sec {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kba .kba-sec-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 4px;
}

.kba .kba-sec-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	min-width: 0;
}

.kba .kba-sec-title h2 {
	font-size: 19px;
	font-weight: 900;
	line-height: 1.4;
}

.kba .kba-popular .kba-sec-title h2 {
	font-size: 22px;
}

.kba .kba-sec-count {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--kba-ink-3);
}

/* カテゴリの説明（旧カテゴリページの導入文） */
.kba .kba-sec-intro {
	margin: -4px 4px 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--kba-ink-2);
}

/* まず覚えたい（スマホ: 1列。操作名とキーを横に並べる） */
.kba .kba-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.kba .kba-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"name keys"
		"hint hint"
		"act act";
	align-items: center;
	gap: 10px;
	padding: 16px;
	background: var(--kba-white);
	border-radius: 14px;
	transition: background-color 0.8s ease;
}

.kba .kba-card-text {
	display: contents;
}

.kba .kba-card-keys {
	grid-area: keys;
	justify-self: end;
}

.kba .kba-card-name {
	grid-area: name;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.kba .kba-card-hint {
	grid-area: hint;
	font-size: 13px;
	line-height: 1.7;
	color: var(--kba-ink-3);
}

.kba .kba-card-act {
	grid-area: act;
	display: flex;
}

.kba .kba-card .kba-key {
	min-width: 34px;
	height: 34px;
	padding: 0 9px;
	font-size: 14px;
}

/* カテゴリの行（スマホ: 操作名 → キーと「動きを見る」→ 補足・こんなときに） */
.kba .kba-list {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--kba-white);
	border-radius: 14px;
}

.kba .kba-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"name name"
		"keys act"
		"note note"
		"hint hint";
	align-items: center;
	column-gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--kba-row-line);
	transition: background-color 0.8s ease;
}

.kba .kba-list > :last-child {
	border-bottom: 0;
}

.kba .kba-row-name {
	grid-area: name;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.kba .kba-row-keys {
	grid-area: keys;
	margin-top: 8px;
}

.kba .kba-row-act {
	grid-area: act;
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}

.kba .kba-row-act:empty {
	display: none;
}

.kba .kba-row-note {
	grid-area: note;
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--kba-ink-2);
}

.kba .kba-row-note::before {
	content: "※";
}

.kba .kba-row-hint {
	grid-area: hint;
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--kba-ink-3);
}

.kba .kba-row-note + .kba-row-hint {
	margin-top: 2px;
}

/* #k-項目id で開いた行を数秒ハイライト（kb-app.js が .is-hl を付け外しする） */
.kba .kba-row.is-hl,
.kba .kba-card.is-hl {
	background: rgba(232, 166, 63, 0.28);
	transition: none;
}

/* コツ（淡い黄色） */
.kba .kba-tips {
	display: flex;
	gap: 10px;
	padding: 14px 16px;
	background: var(--kba-tip);
	border-radius: 12px;
}

.kba .kba-tips-icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--kba-tip-icon);
}

.kba .kba-tips-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	font-size: 13px;
	line-height: 1.8;
	color: var(--kba-ink-2);
}

.kba .kba-tips-head {
	font-weight: 700;
	color: var(--kba-ink);
}

.kba .kba-tips-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kba .kba-tips-list li {
	position: relative;
	padding-left: 1em;
}

.kba .kba-tips-list li::before {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--kba-tip-icon);
	content: "・";
}

/* 絞り込み中は、見つかった行だけを並べる（カテゴリの説明・コツは隠す） */
.kba.is-filtering .kba-sec-intro,
.kba.is-filtering .kba-tips {
	display: none;
}

/* このソフトのテストに挑戦（/test/?app=…） */
.kba .kba-test {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	color: var(--kba-white);
	background: var(--kba-accent);
	border-radius: 14px;
}

.kba .kba-test-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

html body .kba .kba-test h2 {
	font-size: 18px;
	font-weight: 900;
	line-height: 1.4;
}

html body .kba .kba-test p {
	font-size: 14px;
	line-height: 1.7;
}

.kba a.kba-test-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 48px;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 700;
	color: var(--kba-ink);
	text-decoration: none;
	background: var(--kba-white);
	border-radius: 10px;
}

.kba a.kba-test-btn:hover {
	color: var(--kba-ink);
	background: var(--kba-bg);
}

@media (min-width: 768px) {
	.kba .kba-test {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding: 24px 28px;
	}

	html body .kba .kba-test h2 { font-size: 20px; }

	.kba a.kba-test-btn { flex: 0 0 auto; align-self: center; }
}

/* ほかのソフト */
.kba .kba-others {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kba .kba-others h2 {
	margin: 0 4px;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.4;
}

.kba .kba-others-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.kba .kba-other {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 16px;
	color: var(--kba-ink);
	text-decoration: none;
	background: var(--kba-white);
	border-radius: 12px;
}

.kba a.kba-other:hover {
	color: var(--kba-ink);
	box-shadow: 0 0 0 2px var(--kba-accent) inset;
}

.kba .kba-other-name {
	font-size: 16px;
	font-weight: 900;
	line-height: 1.4;
}

.kba .kba-other-sub {
	font-size: 12px;
	color: var(--kba-ink-3);
}

/* スマホ・タブレット: 上に残るカテゴリの分だけ、移動先をずらす（管理バーが固定される 601px 以上は、その分も） */
@media (max-width: 1023px) {
	.kba {
		--kba-sticky: 64px;
	}
}

@media (min-width: 601px) and (max-width: 1023px) {
	body.admin-bar .kba {
		--kba-sticky: 110px;
	}
}

/* ---------- 768px 以上: 行を横並び、まず覚えたいを3列 ---------- */
@media (min-width: 768px) {
	.kba-pc-only {
		display: inline;
	}

	.kba .kba-hero {
		gap: 26px;
		padding: 28px 0 36px;
	}

	.kba .kba-crumbs ol {
		gap: 8px;
		font-size: 13px;
	}

	.kba .kba-crumbs li + li::before {
		margin-right: 8px;
	}

	.kba .kba-crumb-group {
		display: list-item;
	}

	.kba .kba-hero-main {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px 48px;
	}

	.kba .kba-hero-text {
		flex: 1 1 420px;
		gap: 16px;
	}

	.kba .kba-title {
		gap: 6px 18px;
		font-size: 48px;
	}

	.kba .kba-title-sub {
		font-size: 22px;
	}

	.kba .kba-lead {
		font-size: 15px;
	}

	.kba .kba-tags {
		gap: 8px;
	}

	.kba .kba-tag {
		height: 30px;
		padding: 0 12px;
		font-size: 13px;
		border-radius: 15px;
	}

	.kba .kba-tag--plain {
		padding: 0 12px;
	}

	.kba .kba-tag--cats {
		display: inline-flex;
	}

	.kba .kba-tools {
		flex: 0 1 auto;
		align-items: center;
		gap: 12px;
	}

	.kba .kba-os {
		order: -1;
		padding: 4px;
	}

	.kba .kba-os .kba-os-btn {
		padding: 0 18px;
		font-size: 14px;
	}

	.kba .kba-search {
		flex: 0 1 340px;
		width: 340px;
		height: 48px;
		gap: 10px;
		padding: 0 14px;
	}

	html body .kba .kba-search input.kba-search-input {
		font-size: 15px;
	}

	.kba .kba-main {
		gap: 48px;
		padding: 40px 0 72px;
	}

	.kba .kba-sec {
		gap: 16px;
	}

	.kba .kba-sec-head {
		margin: 0;
	}

	.kba .kba-sec-title {
		gap: 4px 14px;
	}

	.kba .kba-sec-title h2 {
		font-size: 24px;
	}

	.kba .kba-popular .kba-sec-title h2 {
		font-size: 26px;
	}

	.kba .kba-sec-count {
		font-size: 14px;
	}

	.kba .kba-sec-intro {
		margin: -6px 0 0;
		font-size: 14px;
	}

	.kba .kba-empty {
		border-radius: 16px;
	}

	/* まず覚えたい: 大きめのキーのカードを3列 */
	.kba .kba-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	.kba .kba-card {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 20px;
		border-radius: 16px;
	}

	.kba .kba-card-keys {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.kba .kba-card-text {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.kba .kba-card-name {
		font-size: 17px;
	}

	.kba .kba-card-act {
		margin-top: auto;
	}

	.kba .kba-card .kba-key {
		min-width: 44px;
		height: 44px;
		padding: 0 12px;
		font-size: 17px;
		border-bottom-width: 5px;
		border-radius: 9px;
	}

	.kba .kba-card .kba-plus {
		font-size: 15px;
	}

	/* カテゴリの行: 操作名と補足 ／ キー ／ 動きを見る */
	.kba .kba-list {
		border-radius: 16px;
	}

	.kba .kba-row {
		grid-template-columns: minmax(0, 1fr) 260px 130px;
		grid-template-areas:
			"name keys act"
			"note keys act"
			"hint keys act";
		grid-template-rows: auto auto 1fr;
		column-gap: 20px;
		min-height: 76px;
		padding: 12px 24px;
	}

	.kba .kba-row-name {
		align-self: end;
		font-size: 16px;
	}

	.kba .kba-row-keys,
	.kba .kba-row-act {
		margin-top: 0;
	}

	.kba .kba-row-act:empty {
		display: flex;
	}

	.kba .kba-row-note,
	.kba .kba-row-hint {
		align-self: start;
		margin-top: 4px;
		font-size: 13px;
	}

	.kba .kba-row-note {
		font-size: 12.5px;
	}

	.kba .kba-row .kba-key {
		min-width: 34px;
		height: 34px;
		padding: 0 9px;
		font-size: 14px;
	}

	.kba .kba-plus {
		font-size: 13px;
	}

	.kba .kba-tips {
		gap: 12px;
		padding: 16px 20px;
	}

	.kba .kba-tips-body {
		font-size: 14px;
	}

	.kba .kba-others {
		gap: 16px;
		padding-top: 16px;
		border-top: 1px solid var(--kba-line);
	}

	.kba .kba-others h2 {
		margin: 0;
		font-size: 20px;
	}

	.kba .kba-others-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
	}

	.kba .kba-other {
		gap: 6px;
		padding: 18px;
		border-radius: 14px;
	}

	.kba .kba-other-name {
		font-size: 18px;
	}

	.kba .kba-other-sub {
		font-size: 13px;
	}
}

/* ---------- 1024px 以上: カテゴリを左の列に（スクロールしても残る） ---------- */
@media (min-width: 1024px) {
	.kba .kba-body {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		align-items: start;
		gap: 48px;
	}

	.kba .kba-nav {
		top: 24px;
		max-height: calc(100vh - 48px);
		margin: 40px 0 0;
		padding: 16px;
		overflow-y: auto;
		background: var(--kba-white);
		border-image: none;
		border-radius: 16px;
	}

	body.admin-bar .kba .kba-nav {
		top: 56px;
		max-height: calc(100vh - 80px);
	}

	.kba .kba-nav-head {
		display: block;
		padding: 4px 14px 10px;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.5;
		color: var(--kba-ink-3);
	}

	.kba .kba-nav-list {
		flex-direction: column;
		gap: 4px;
		padding: 0;
		overflow: visible;
	}

	/* 長いカテゴリ名（Windows の「デスクトップ・仮想デスクトップ・タスクバー」など）は折り返す */
	.kba .kba-nav-link {
		display: flex;
		justify-content: space-between;
		gap: 10px;
		height: auto;
		min-height: 44px;
		padding: 10px 14px;
		font-size: 15px;
		line-height: 1.45;
		white-space: normal;
		background: none;
		border: 0;
		border-radius: 10px;
	}

	.kba .kba-nav-label {
		min-width: 0;
	}

	.kba .kba-nav-count {
		flex: 0 0 auto;
	}

	.kba a.kba-nav-link:hover {
		background: var(--kba-bg);
	}

	.kba .kba-nav-count {
		font-size: 12px;
	}

	.kba [data-kba-sec],
	.kba [data-kbs-row] {
		scroll-margin-top: 24px;
	}

	body.admin-bar .kba [data-kba-sec],
	body.admin-bar .kba [data-kbs-row] {
		scroll-margin-top: 56px;
	}
}

/* 動きを減らす設定のときは、ハイライトの色の変化をなくす */
@media (prefers-reduced-motion: reduce) {
	.kba .kba-row,
	.kba .kba-card {
		transition: none;
	}
}