/**
 * archive-cpt_ailab.css ─ AI Lab メディアトップ／記事一覧アーカイブ
 *
 * 構成
 *   1. Bento Grid（Hero ＋ Concept ＋ Compare ＋ Usage ＋ CTA × 3 を 1セクションに圧縮）
 *   2. 記事一覧（新着順リスト）
 *   3. Final CTA（about.css の .about-final-cta を借用するため、ここでは追加スタイルのみ）
 *
 * カラースコープ：body.archive--ailab で Cyan #14D4D4（intelligence）系をアクセントに
 * 読み込み順序：tokens → base → components → about（Final CTA 借用） → archive-cpt_ailab
 *
 * モバイルファースト：すべての設計判断は SP（375〜767px）起点で行い、768px・1024px で拡張
 *
 * ※ 旧 .ailab-archive-hero / .ailab-archive-concept 系は HTML から参照されなくなったが、
 *   サブテンプレートからの将来再利用に備えて当面残置。優先順位は Bento ルールが上。
 */

/* ============================================================
 * 0. ページ全体スコープ（archive--ailab body class）
 * ============================================================ */

.archive--ailab {
	/* AI Lab はメディア性格 → 投稿一覧上で背景に微 Cyan のグラデを忍ばせる */
	background:
		radial-gradient(circle at 90% 0%, rgba(20, 212, 212, 0.06) 0%, transparent 60%),
		radial-gradient(circle at 0% 30%, rgba(231, 111, 142, 0.04) 0%, transparent 50%),
		var(--color-bg-primary);
}

.archive--ailab main {
	display: flex;
	flex-direction: column;
	padding-top: 0;
}

.archive--ailab main > section {
	width: 100%;
}

/* ============================================================
 * 1. Bento Grid（Hero + コンセプト圧縮）
 * ============================================================ */

.ailab-bento {
	position: relative;
	padding-top: var(--space-5);    /* 旧: var(--space-7) → 半減（パンくずとの間を詰める） */
	padding-bottom: var(--space-7);
	overflow: hidden;
}

@media (min-width: 1024px) {
	.ailab-bento {
		padding-top: var(--space-7);   /* 旧: var(--space-9) → 半減 */
		padding-bottom: var(--space-9);
	}
}

.ailab-bento__inner {
	position: relative;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--space-4);
	z-index: 1;
}

@media (min-width: 768px) {
	.ailab-bento__inner {
		padding-inline: var(--space-6);
	}
}

/* 背景装飾：旧 ailab-archive-hero と同方針 */
.ailab-bento__bg-typo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	opacity: 0.045;
	font-family: var(--font-sans-latin);
	font-weight: 900;
	font-size: clamp(6rem, 22vw, 18rem);
	line-height: 0.86;
	color: var(--color-intelligence);
	letter-spacing: -0.04em;
	overflow: hidden;
	white-space: nowrap;
}

.ailab-bento__decor {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.ailab-bento__decor--circle {
	top: -40px;
	right: -60px;
	width: 220px;
	height: 220px;
	opacity: 0.55;
}

.ailab-bento__decor--dots {
	bottom: -30px;
	left: -10px;
	width: 140px;
	height: 80px;
	opacity: 0.7;
}

@media (max-width: 767px) {
	.ailab-bento__decor--circle {
		width: 140px;
		height: 140px;
		top: -20px;
		right: -40px;
	}
	.ailab-bento__decor--dots {
		width: 90px;
		height: 50px;
	}
}

/* グリッド本体（lg=4列・md=2列・sm=1列） */
.ailab-bento__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.ailab-bento__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}
}

@media (min-width: 1024px) {
	.ailab-bento__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-4);
	}
}

/* 共通セル */
.ailab-bento__cell {
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	transition: transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base);
}

@media (min-width: 1024px) {
	.ailab-bento__cell {
		padding: var(--space-5) var(--space-6);
	}
}

.ailab-bento__cell-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-intelligence-700);
	margin: 0 0 var(--space-3);
}

.ailab-bento__cell-eyebrow::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 1px;
	background: currentColor;
}

.ailab-bento__cell-eyebrow--no {
	color: var(--color-empathy-700);
}

.ailab-bento__cell-eyebrow--yes {
	color: var(--color-intelligence-700);
}

.ailab-bento__cell-title {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-3);
	font-feature-settings: "palt";
}

.ailab-bento__cell-text {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
	margin: 0;
}

/* セル：Hero（lg span 4 / md span 2） */
.ailab-bento__cell--hero {
	background:
		radial-gradient(circle at 90% 10%, rgba(20, 212, 212, 0.10) 0%, transparent 60%),
		radial-gradient(circle at 0% 90%, rgba(231, 111, 142, 0.07) 0%, transparent 60%),
		var(--color-bg-base);
	border-color: var(--color-intelligence-300);
}

@media (min-width: 768px) {
	.ailab-bento__cell--hero { grid-column: span 2; }
}

@media (min-width: 1024px) {
	.ailab-bento__cell--hero {
		grid-column: span 4;
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
		column-gap: var(--space-6);
		align-items: center;
		min-height: 300px;
	}
}

.ailab-bento__overline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-intelligence-700);
	margin-bottom: var(--space-3);
	padding: var(--space-1) var(--space-3);
	background: var(--color-intelligence-100);
	border-radius: var(--radius-full);
	max-width: max-content;
}

@media (min-width: 1024px) {
	.ailab-bento__overline,
	.ailab-bento__title,
	.ailab-bento__sub,
	.ailab-bento__lead {
		grid-column: 1;
		position: relative;
		z-index: 1;
	}
}

.ailab-bento__overline::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-intelligence);
	box-shadow: 0 0 8px var(--color-intelligence);
}

.ailab-bento__title {
	font-family: var(--font-sans-jp);
	font-size: clamp(1.875rem, 6.5vw, 3rem);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-2);
	font-feature-settings: "palt";
}

.ailab-bento__title-line {
	display: inline-block;
}

.ailab-bento__title em {
	font-style: normal;
	color: var(--color-intelligence-700);
	background: linear-gradient(180deg, transparent 70%, var(--color-intelligence-100) 70%);
	padding: 0 0.1em;
}

.ailab-bento__sub {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-3);
	letter-spacing: 0.02em;
}

.ailab-bento__lead {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
	margin: 0;
}

.ailab-bento__lead strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-bold);
	background: linear-gradient(180deg, transparent 65%, var(--color-intelligence-100) 65%);
	padding: 0 0.06em;
}

.ailab-bento__hero-visual {
	display: none;
}

@media (min-width: 1024px) {
	.ailab-bento__hero-visual {
		display: flex;
		grid-column: 2;
		grid-row: 1 / span 4;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 0;
		min-width: 0;
	}

	.ailab-bento__hero-visual::before {
		content: "";
		position: absolute;
		inset: 12% 4% 8% 8%;
		border-radius: 999px;
		background:
			radial-gradient(circle at 42% 40%, rgba(20, 212, 212, 0.18), transparent 58%),
			radial-gradient(circle at 66% 68%, rgba(231, 111, 142, 0.14), transparent 62%);
		filter: blur(6px);
	}

	.ailab-bento__hero-visual svg {
		width: min(100%, 320px);
		height: auto;
		position: relative;
		z-index: 1;
	}
}

/* セル：Concept（lg span 2） */
.ailab-bento__cell--concept {
}

@media (min-width: 768px) {
	.ailab-bento__cell--concept { grid-column: span 2; }
}

@media (min-width: 1024px) {
	.ailab-bento__cell--concept { grid-column: span 2; }
}

.ailab-bento__pullquote {
	position: relative;
	margin: var(--space-3) 0;
	padding: var(--space-3) 0 var(--space-3) var(--space-5);
	font-family: var(--font-sans-jp);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--color-text-primary);
	border-left: 3px solid var(--color-intelligence);
	letter-spacing: var(--ls-tight);
}

.ailab-bento__pullquote em {
	font-style: normal;
	color: var(--color-intelligence-700);
}

/* セル：Don't / Do（lg span 1 each） */
.ailab-bento__cell--no {
	background: linear-gradient(135deg, rgba(231, 111, 142, 0.06) 0%, rgba(231, 111, 142, 0.01) 100%);
	border-color: rgba(231, 111, 142, 0.30);
}

.ailab-bento__cell--yes {
	background: linear-gradient(135deg, rgba(20, 212, 212, 0.07) 0%, rgba(20, 212, 212, 0.02) 100%);
	border-color: var(--color-intelligence-300);
}

@media (min-width: 768px) {
	.ailab-bento__cell--no, .ailab-bento__cell--yes {
		grid-column: span 1;
	}
}

@media (min-width: 1024px) {
	.ailab-bento__cell--no, .ailab-bento__cell--yes {
		grid-column: span 1;
	}
}

.ailab-bento__compare-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ailab-bento__compare-list li {
	position: relative;
	padding-left: var(--space-5);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-text-primary);
}

.ailab-bento__compare-list li strong {
	font-weight: var(--fw-bold);
}

.ailab-bento__compare-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 14px;
	height: 14px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.ailab-bento__compare-list--no li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B33A5C'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

.ailab-bento__compare-list--yes li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230BA5A5'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

/* セル：Usage（lg span 1） */
.ailab-bento__cell--usage {
}

@media (min-width: 768px) {
	.ailab-bento__cell--usage { grid-column: span 2; }
}

@media (min-width: 1024px) {
	.ailab-bento__cell--usage { grid-column: span 1; }
}

.ailab-bento__usage {
	display: grid;
	grid-template-columns: 1fr;  /* SP: 1列に積む */
	gap: var(--space-3);
	margin: var(--space-3) 0;
}

@media (min-width: 480px) {
	.ailab-bento__usage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ailab-bento__usage-item {
	display: flex;
	flex-direction: row;          /* SP: 横向き（アイコン左・テキスト右） */
	align-items: center;
	gap: var(--space-3);
	text-align: left;
}

@media (min-width: 480px) {
	.ailab-bento__usage-item {
		flex-direction: column;   /* タブレット+: 縦向き */
		align-items: flex-start;
		gap: var(--space-1);
	}
}

.ailab-bento__usage-icon {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-1);
}

.ailab-bento__usage-icon svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.ailab-bento__usage-icon--cyan {
	background: var(--color-intelligence-100);
	color: var(--color-intelligence-700);
}

.ailab-bento__usage-icon--coral {
	background: var(--color-empathy-100);
	color: var(--color-empathy-700);
}

.ailab-bento__usage-icon--amber {
	background: var(--color-action-100);
	color: var(--color-action-700);
}

.ailab-bento__usage-icon--brand {
	background: var(--color-brand-100);
	color: var(--color-brand-700);
}

.ailab-bento__usage-title {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin: 0;
	line-height: 1.3;
}

.ailab-bento__usage-desc {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	margin: 0;
	line-height: 1.4;
}

.ailab-bento__usage-links {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
}

.ailab-bento__usage-link {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-intelligence-700);
	text-decoration: none;
	letter-spacing: 0.04em;
}

.ailab-bento__usage-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* セル：CTA カード共通 */
.ailab-bento__cell--cta-code-check,
.ailab-bento__cell--cta-training,
.ailab-bento__cell--cta-contact,
.ailab-bento__cell--cta-line {
	color: var(--color-text-on-brand);
	text-decoration: none;
	min-height: 184px;
	border: none;
	box-shadow: var(--shadow-md);
}

.ailab-bento__cell--cta-code-check:hover,
.ailab-bento__cell--cta-training:hover,
.ailab-bento__cell--cta-contact:hover,
.ailab-bento__cell--cta-line:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

@media (hover: none) {
	.ailab-bento__cell--cta-code-check:hover,
	.ailab-bento__cell--cta-training:hover,
	.ailab-bento__cell--cta-contact:hover,
	.ailab-bento__cell--cta-line:hover {
		transform: none;
	}
}

/* CTA 3カードを横一列に並べる独立 sub-grid
   親 Bento Grid のカラム制約を外して、3カード横並び専用のレイアウトに */
.ailab-bento__cta-row {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.ailab-bento__cta-row {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
	}
}

@media (min-width: 1024px) {
	.ailab-bento__cta-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* sub-grid 内ではカードの grid-column 指定は不要（grid-template-columns側で制御） */
.ailab-bento__cta-row .ailab-bento__cell--cta-code-check,
.ailab-bento__cta-row .ailab-bento__cell--cta-training,
.ailab-bento__cta-row .ailab-bento__cell--cta-contact {
	grid-column: auto;
}

.ailab-bento__cell--cta-code-check {
	padding: var(--space-4);
	min-height: 176px;
	background:
		radial-gradient(circle at 90% 16%, rgba(244, 163, 64, 0.18), transparent 38%),
		linear-gradient(135deg, #103A3A 0%, #0A1414 64%, #3C1F2B 100%);
}

.ailab-bento__cell--cta-code-check .ailab-bento__cta-title {
	font-size: var(--fs-base);
}

.ailab-bento__cell--cta-code-check .ailab-bento__cta-icon {
	width: 34px;
	height: 34px;
	margin-bottom: var(--space-2);
}

.ailab-bento__cell--cta-code-check .ailab-bento__cta-icon svg {
	width: 19px;
	height: 19px;
}

.ailab-bento__cell--cta-code-check .ailab-bento__cta-desc {
	font-size: var(--fs-xs);
	line-height: var(--lh-relaxed);
}

.ailab-bento__cell--cta-contact {
	background: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-brand-700) 100%);
}

/* 社内AI活用研修：コーラル/アンバー系で「学び・成長」を表現（健診・相談との差別化） */
.ailab-bento__cell--cta-training {
	background: linear-gradient(135deg, #C9885F 0%, #9E6743 100%);
}

.ailab-bento__cell--cta-line {
	background: linear-gradient(135deg, #06C755 0%, #04994B 100%);
}

.ailab-bento__cta-icon {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.18);
	margin-bottom: var(--space-2);
}

.ailab-bento__cta-icon svg {
	width: 22px;
	height: 22px;
	fill: var(--color-text-on-brand);
}

.ailab-bento__cta-eyebrow {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	margin: 0 0 var(--space-1);
	opacity: 0.85;
}

.ailab-bento__cta-title {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-lg);
	font-weight: var(--fw-extrabold);
	color: var(--color-text-on-brand);
	margin: 0 0 var(--space-2);
	line-height: 1.4;
	letter-spacing: var(--ls-tight);
}

.ailab-bento__cta-desc {
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

.ailab-bento__cta-arrow {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text-on-brand);
}

/* AIコード健診（外部リンク）は HTML 側で ↗ を直書きしているため、::after の → を抑制 */
.ailab-bento__cell--cta-code-check .ailab-bento__cta-arrow::after {
	content: none;
}

.ailab-bento__cta-arrow::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform var(--duration-base) var(--ease-out-expo);
}

.ailab-bento__cell--cta-code-check:hover .ailab-bento__cta-arrow::after,
.ailab-bento__cell--cta-contact:hover .ailab-bento__cta-arrow::after,
.ailab-bento__cell--cta-line:hover .ailab-bento__cta-arrow::after {
	transform: translateX(4px);
}

/* ============================================================
 * 1-LEGACY. （旧）Hero / Concept ─ 当面残置（HTMLからは未参照）
 * ============================================================ */

.ailab-archive-hero {
	position: relative;
	padding-block: var(--space-7) var(--space-8);
	overflow: hidden;
}

@media (min-width: 1024px) {
	.ailab-archive-hero {
		padding-block: var(--space-9) var(--space-10);
	}
}

.ailab-archive-hero__inner {
	position: relative;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--space-4);
	z-index: 1;
}

@media (min-width: 768px) {
	.ailab-archive-hero__inner {
		padding-inline: var(--space-6);
	}
}

/* 背景の巨大タイポ（ai-lab の英文を薄く） */
.ailab-archive-hero__bg-typo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	opacity: 0.045;
	font-family: var(--font-sans-latin);
	font-weight: 900;
	font-size: clamp(6rem, 22vw, 18rem);
	line-height: 0.86;
	color: var(--color-intelligence);
	letter-spacing: -0.04em;
	overflow: hidden;
	white-space: nowrap;
}

.ailab-archive-hero__overline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-intelligence-700);
	margin-bottom: var(--space-3);
	padding: var(--space-1) var(--space-3);
	background: var(--color-intelligence-100);
	border-radius: var(--radius-full);
}

.ailab-archive-hero__overline::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-intelligence);
	box-shadow: 0 0 8px var(--color-intelligence);
}

.ailab-archive-hero__title {
	font-family: var(--font-sans-jp);
	font-size: clamp(2rem, 8vw, 3.5rem);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-3);
	font-feature-settings: "palt";
}

.ailab-archive-hero__title-line {
	display: inline-block;
}

.ailab-archive-hero__title em {
	font-style: normal;
	color: var(--color-intelligence-700);
	background: linear-gradient(180deg, transparent 70%, var(--color-intelligence-100) 70%);
	padding: 0 0.1em;
}

.ailab-archive-hero__sub {
	font-family: var(--font-sans-jp);
	font-size: clamp(1rem, 4vw, 1.25rem);
	font-weight: var(--fw-bold);
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-5);
	letter-spacing: 0.02em;
}

.ailab-archive-hero__sub::before {
	content: "──";
	display: inline-block;
	margin-right: var(--space-2);
	color: var(--color-intelligence-300);
	font-weight: var(--fw-regular);
}

.ailab-archive-hero__lead {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
	max-width: 56ch;
	margin: 0 0 var(--space-6);
}

.ailab-archive-hero__author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-sm);
	max-width: max-content;
}

.ailab-archive-hero__author-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--color-bg-base);
}

.ailab-archive-hero__author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ailab-archive-hero__author-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ailab-archive-hero__author-name {
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin: 0;
	line-height: 1.3;
}

.ailab-archive-hero__author-name strong {
	font-weight: var(--fw-bold);
}

.ailab-archive-hero__author-role {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	margin: 0;
	line-height: 1.4;
}

/* Hero 装飾 SVG */
.ailab-archive-hero__decor {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.ailab-archive-hero__decor--circle {
	top: -40px;
	right: -60px;
	width: 220px;
	height: 220px;
	opacity: 0.55;
}

.ailab-archive-hero__decor--dots {
	bottom: -30px;
	left: -10px;
	width: 140px;
	height: 80px;
	opacity: 0.7;
}

@media (max-width: 767px) {
	.ailab-archive-hero__decor--circle {
		width: 140px;
		height: 140px;
		top: -20px;
		right: -40px;
	}
	.ailab-archive-hero__decor--dots {
		width: 90px;
		height: 50px;
	}
}

/* ============================================================
 * 2. メディアコンセプト
 * ============================================================ */

.ailab-archive-concept {
	position: relative;
	padding-block: var(--space-7);
}

@media (min-width: 1024px) {
	.ailab-archive-concept {
		padding-block: var(--space-9);
	}
}

.ailab-archive-concept__inner {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: var(--space-4);
}

@media (min-width: 768px) {
	.ailab-archive-concept__inner {
		padding-inline: var(--space-6);
	}
}

.ailab-archive-concept__section + .ailab-archive-concept__section {
	margin-top: var(--space-8);
}

.ailab-archive-concept__section-num {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-intelligence-700);
	margin-bottom: var(--space-3);
}

.ailab-archive-concept__section-num::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var(--color-intelligence-700);
}

.ailab-archive-concept__title {
	font-family: var(--font-sans-jp);
	font-size: clamp(1.5rem, 5vw, 2rem);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-5);
	font-feature-settings: "palt";
	text-wrap: balance;
}

.ailab-archive-concept__body {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-text-primary);
}

.ailab-archive-concept__body > p {
	margin: 0 0 var(--space-4);
}

.ailab-archive-concept__body > p:last-child {
	margin-bottom: 0;
}

.ailab-archive-concept__body strong {
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	background: linear-gradient(180deg, transparent 65%, var(--color-intelligence-100) 65%);
	padding: 0 0.06em;
}

/* プルクオート（AI に詳しい必要はない の真意 セクションで使用） */
.ailab-archive-concept__pullquote {
	position: relative;
	margin: var(--space-6) 0;
	padding: var(--space-4) 0 var(--space-4) var(--space-6);
	font-family: var(--font-sans-jp);
	font-size: clamp(1.125rem, 4vw, 1.5rem);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--color-text-primary);
	border-left: 3px solid var(--color-intelligence);
	letter-spacing: var(--ls-tight);
}

.ailab-archive-concept__pullquote::before {
	content: "“";
	position: absolute;
	left: var(--space-2);
	top: -10px;
	font-family: var(--font-sans-latin);
	font-size: 4rem;
	line-height: 1;
	color: var(--color-intelligence-300);
	opacity: 0.4;
}

.ailab-archive-concept__pullquote em {
	font-style: normal;
	color: var(--color-intelligence-700);
}

/* 著者ブロック（書いてる人） */
.ailab-archive-concept__author {
	margin-top: var(--space-5);
	padding: var(--space-5);
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: var(--space-4);
	align-items: start;
}

@media (max-width: 600px) {
	.ailab-archive-concept__author {
		grid-template-columns: 64px 1fr;
		gap: var(--space-3);
		padding: var(--space-4);
	}
}

.ailab-archive-concept__author-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-bg-base);
	border: 2px solid var(--color-intelligence-100);
}

@media (max-width: 600px) {
	.ailab-archive-concept__author-avatar {
		width: 64px;
		height: 64px;
	}
}

.ailab-archive-concept__author-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ailab-archive-concept__author-name {
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin: 0;
	line-height: 1.3;
}

.ailab-archive-concept__author-role {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	margin: var(--space-1) 0 var(--space-2);
}

.ailab-archive-concept__author-bio {
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
	margin: 0;
}

/* 書くこと・書かないこと の2カラム */
.ailab-archive-concept__compare {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin-top: var(--space-5);
}

@media (min-width: 768px) {
	.ailab-archive-concept__compare {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}
}

.ailab-archive-concept__compare-card {
	padding: var(--space-5);
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
}

.ailab-archive-concept__compare-card--no {
	border-top: 4px solid var(--color-empathy);
}

.ailab-archive-concept__compare-card--yes {
	border-top: 4px solid var(--color-intelligence);
}

.ailab-archive-concept__compare-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}

.ailab-archive-concept__compare-card--no .ailab-archive-concept__compare-label {
	color: var(--color-empathy-700);
}

.ailab-archive-concept__compare-card--yes .ailab-archive-concept__compare-label {
	color: var(--color-intelligence-700);
}

.ailab-archive-concept__compare-title {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-3);
	letter-spacing: var(--ls-tight);
}

.ailab-archive-concept__compare-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ailab-archive-concept__compare-list li {
	position: relative;
	padding: var(--space-2) 0 var(--space-2) var(--space-5);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text-primary);
	border-bottom: 1px dashed var(--color-border-subtle);
}

.ailab-archive-concept__compare-list li:last-child {
	border-bottom: none;
}

.ailab-archive-concept__compare-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.1em;
	width: 16px;
	height: 16px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.ailab-archive-concept__compare-card--no .ailab-archive-concept__compare-list li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B33A5C'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

.ailab-archive-concept__compare-card--yes .ailab-archive-concept__compare-list li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230BA5A5'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

.ailab-archive-concept__compare-list li strong {
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	background: none;
}

/* 使い方の3点セット */
.ailab-archive-concept__usage {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

@media (min-width: 768px) {
	.ailab-archive-concept__usage {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
	}
}

.ailab-archive-concept__usage-card {
	padding: var(--space-4) var(--space-5);
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}

@media (min-width: 768px) {
	.ailab-archive-concept__usage-card {
		flex-direction: column;
		align-items: stretch;
	}
}

.ailab-archive-concept__usage-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-md);
	background: var(--color-intelligence-100);
	color: var(--color-intelligence-700);
}

.ailab-archive-concept__usage-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.ailab-archive-concept__usage-card:nth-child(2) .ailab-archive-concept__usage-icon {
	background: var(--color-empathy-100);
	color: var(--color-empathy-700);
}

.ailab-archive-concept__usage-card:nth-child(3) .ailab-archive-concept__usage-icon {
	background: var(--color-action-100);
	color: var(--color-action-700);
}

.ailab-archive-concept__usage-title {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-base);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-1);
	line-height: 1.4;
	letter-spacing: var(--ls-tight);
}

.ailab-archive-concept__usage-desc {
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: var(--color-text-secondary);
	margin: 0;
}

/* CTA カード（自社相談 / LINE） ─ コラム単独と同じ意匠を踏襲 */
.ailab-archive-concept__cta {
	margin-top: var(--space-8);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media (min-width: 768px) {
	.ailab-archive-concept__cta {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}
}

.ailab-archive-concept__cta-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
	border-radius: var(--radius-xl);
	color: var(--color-text-on-brand);
	min-height: 200px;
	overflow: hidden;
	text-decoration: none;
	transition: transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base);
	box-shadow: var(--shadow-md);
}

.ailab-archive-concept__cta-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

@media (hover: none) {
	.ailab-archive-concept__cta-card:hover {
		transform: none;
	}
}

.ailab-archive-concept__cta-card--contact {
	background: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-brand-700) 100%);
}

.ailab-archive-concept__cta-card--line {
	background: linear-gradient(135deg, #06C755 0%, #04994B 100%);
}

.ailab-archive-concept__cta-icon {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.18);
}

.ailab-archive-concept__cta-icon svg {
	width: 22px;
	height: 22px;
	fill: var(--color-text-on-brand);
}

.ailab-archive-concept__cta-eyebrow {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	margin: 0;
	opacity: 0.85;
}

.ailab-archive-concept__cta-title {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-xl);
	font-weight: var(--fw-extrabold);
	color: var(--color-text-on-brand);
	margin: 0;
	line-height: 1.4;
	letter-spacing: var(--ls-tight);
}

.ailab-archive-concept__cta-desc {
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

.ailab-archive-concept__cta-arrow {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text-on-brand);
}

.ailab-archive-concept__cta-arrow::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform var(--duration-base) var(--ease-out-expo);
}

.ailab-archive-concept__cta-card:hover .ailab-archive-concept__cta-arrow::after {
	transform: translateX(4px);
}

/* ============================================================
 * 3. 記事一覧（カード＋ページネーション）
 * ============================================================ */

.ailab-archive-list {
	position: relative;
	padding-block: var(--space-8) var(--space-9);
	background: var(--color-bg-surface);
}

@media (min-width: 1024px) {
	.ailab-archive-list {
		padding-block: var(--space-9) var(--space-10);
	}
}

.ailab-archive-list__inner {
	max-width: var(--container-wide);   /* 上部 Bento（hero）と同じ幅に揃える（2026-06-02） */
	margin-inline: auto;
	padding-inline: var(--space-4);
}

@media (min-width: 768px) {
	.ailab-archive-list__inner {
		padding-inline: var(--space-6);
	}
}

.ailab-archive-list__header {
	margin-bottom: var(--space-6);
}

.ailab-archive-list__overline {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-intelligence-700);
	margin-bottom: var(--space-2);
}

.ailab-archive-list__overline::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var(--color-intelligence-700);
}

.ailab-archive-list__title {
	font-family: var(--font-sans-jp);
	font-size: clamp(1.625rem, 5vw, 2.25rem);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-2);
	font-feature-settings: "palt";
}

.ailab-archive-list__lead {
	font-size: var(--fs-md);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
	max-width: none;
	margin: 0;
	text-wrap: normal;
}

/* 結果サマリー */
.ailab-archive-list__summary {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-4);
}

.ailab-archive-list__summary strong {
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
}

/* 記事グリッド */
.ailab-archive-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (min-width: 640px) {
	.ailab-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ailab-archive-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6);
	}
}

/* 記事カード */
.ailab-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	transition: transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base), border-color var(--duration-fast);
	height: 100%;
	box-shadow: var(--shadow-sm);
}

.ailab-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-intelligence-300);
}

@media (hover: none) {
	.ailab-card:hover {
		transform: none;
	}
}

.ailab-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-bg-elevated);
}

.ailab-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-slow) var(--ease-out-expo);
}

.ailab-card:hover .ailab-card__thumb img {
	transform: scale(1.04);
}

@media (hover: none) {
	.ailab-card:hover .ailab-card__thumb img {
		transform: none;
	}
}

/* 動画ありフラグ */
.ailab-card__video-badge {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	background: rgba(10, 20, 20, 0.86);
	color: #FFF;
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs); /* 11px→12px：最低フォントサイズ確保 */
	font-weight: 700;
	letter-spacing: 0.04em;
	border-radius: var(--radius-full);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.ailab-card__video-badge svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* カテゴリピル（カード上） */
.ailab-card__category-pill {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-2);
	font-family: var(--font-sans-jp);
	font-size: var(--fs-xs); /* 11px→12px：カテゴリ表示。閲覧者が読むため最低12px */
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: var(--radius-sm);
	color: #FFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.ailab-card__category-pill[data-category="ai-security"]   { background: var(--color-empathy-700); }
.ailab-card__category-pill[data-category="ai-system"]     { background: var(--color-intelligence-700); }
.ailab-card__category-pill[data-category="prompt"]        { background: var(--color-action-700); }
.ailab-card__category-pill[data-category="ai-adoption"]   { background: var(--color-brand); }
.ailab-card__category-pill[data-category="tool-select"]   { background: var(--color-text-secondary); }
.ailab-card__category-pill[data-category="tool-usage"]    { background: var(--color-intelligence); color: var(--color-text-primary); }
.ailab-card__category-pill[data-category="employee-edu"]  { background: var(--color-action); color: var(--color-text-primary); }

.ailab-card__body {
	padding: var(--space-4) var(--space-4) var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
}

.ailab-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	font-family: var(--font-sans-latin);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.ailab-card__date {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ailab-card__reading {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ailab-card__title {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	color: var(--color-text-primary);
	margin: 0;
	letter-spacing: var(--ls-tight);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ailab-card:hover .ailab-card__title {
	color: var(--color-intelligence-700);
}

.ailab-card__excerpt {
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.ailab-card__footer {
	margin-top: var(--space-2);
	padding-top: var(--space-3);
	border-top: 1px dashed var(--color-border-subtle);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ailab-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	font-size: var(--fs-xs); /* 11px→12px：閲覧者が読むタグ表示 */
	color: var(--color-text-muted);
}

.ailab-card__tag {
	display: inline-block;
	padding: 2px 6px;
	background: var(--color-bg-surface);
	border-radius: var(--radius-sm);
	font-weight: 600;
}

.ailab-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	color: var(--color-intelligence-700);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ailab-card__cta::after {
	content: "→";
	display: inline-block;
	transition: transform var(--duration-fast);
}

.ailab-card:hover .ailab-card__cta::after {
	transform: translateX(3px);
}

/* 結果なし */
.ailab-archive-list__empty {
	display: none;
	padding: var(--space-8) var(--space-4);
	text-align: center;
	background: var(--color-bg-base);
	border: 1px dashed var(--color-border-default);
	border-radius: var(--radius-lg);
}

.ailab-archive-list__empty[data-visible="true"] {
	display: block;
}

.ailab-archive-list__empty-title {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	margin: 0 0 var(--space-2);
}

.ailab-archive-list__empty-desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	margin: 0;
}

/* ページネーション */
.ailab-archive-pagination {
	margin-top: var(--space-8);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.ailab-archive-pagination__item {
	min-width: 44px;
	height: 44px;
	display: inline-grid;
	place-items: center;
	padding: 0 var(--space-3);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-text-secondary);
	background: var(--color-bg-base);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
}

.ailab-archive-pagination__item:hover {
	color: var(--color-intelligence-700);
	background: var(--color-intelligence-100);
	border-color: var(--color-intelligence-300);
}

.ailab-archive-pagination__item[aria-current="page"] {
	color: var(--color-text-on-brand);
	background: var(--color-intelligence-700);
	border-color: var(--color-intelligence-700);
	cursor: default;
}

.ailab-archive-pagination__item--disabled {
	color: var(--color-text-muted);
	pointer-events: none;
	opacity: 0.5;
}

.ailab-archive-pagination__ellipsis {
	min-width: 32px;
	color: var(--color-text-muted);
	font-weight: 700;
	display: inline-grid;
	place-items: center;
}

.ailab-archive-pagination__arrow {
	font-size: var(--fs-base);
}

/* ============================================================
 * 4. Final CTA は about.css の .about-final-cta を借用するため
 *    このページ用の上書きのみ定義
 * ============================================================ */

.archive--ailab .about-final-cta {
	margin-top: 0;
}

/* ============================================================
 * 5. アクセシビリティ・モーション低減
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.ailab-card,
	.ailab-card__thumb img,
	.ailab-archive-concept__cta-card,
	.ailab-archive-concept__cta-arrow::after,
	.ailab-card__cta::after {
		transition: none !important;
		transform: none !important;
		animation: none !important;
	}
}