/**
 * p-column-archive
 * コラム一覧ページ（/column, /column/category/{slug}）のページ固有スタイル。
 * 新規機能につき手書き。カード自体は components/column-card.css。
 */
.p-column-archive__body {
	/* an-box 併用のため align-items を明示（inherit する center だと子が中央寄せの幅で崩れる） */
	width: 100%;
	max-width: 100%;
	padding: 40px 0 8px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 24px;
}
.p-column-archive__list-head {
	/* an-box 併用のため flex-direction を明示（base.css の .an-box は既定 column） */
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	width: 1280px;
	max-width: 100%;
	margin: 16px auto 0;
	padding: 0 40px;
}
.p-column-archive__list-title {
	font-family: var(--an-font-base);
	font-weight: 700;
	font-size: 22px;
	color: var(--an-color-text);
}
.p-column-archive__count {
	font-family: var(--an-font-base);
	font-size: 12px;
	color: var(--an-color-text);
	opacity: 0.55;
}

/* the_posts_pagination() の既定出力にトンマナを合わせる */
.p-column-archive__body .nav-links,
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 24px 0 8px;
}
.p-column-archive__body .page-numbers {
	font-family: var(--an-font-base);
	font-size: 13px;
	min-width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid var(--an-color-border);
	color: var(--an-color-text);
	transition: all 0.2s;
	padding: 0 12px;
}
.p-column-archive__body .page-numbers:hover {
	border-color: var(--an-color-brand);
	color: var(--an-color-brand);
}
.p-column-archive__body .page-numbers.current {
	background: var(--an-color-brand);
	color: var(--an-color-white);
	border-color: var(--an-color-brand);
}
.p-column-archive__body .page-numbers.dots {
	border: none;
}

@media (max-width: 840px) {
	.p-column-archive__list-head {
		padding: 0 24px;
	}
}