/*===============================
* ***ページネーション
* *=================================*/
.c-pagination {
	display: flex;
	gap: 2rem;
	align-items: center;
	justify-content: center;
	margin: var(--g-sec--md) 0 0 0;
}

.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ff-m);
	transition: var(--ani-t--normal) ease-out;
}

/* 通常時 */
.page-numbers:not(.current) {
	color: var(--c-light);
}

/* アクティブ時 */
.page-numbers.current,
.page-numbers:is(:hover, :focus) {
	color: var(--c-main);
}

/* 数字のみ */
.page-numbers:not(:is(.prev, .next)) {
	position: relative;
	font-size: 2rem;
}

/* 前、次 */
.page-numbers:is(.prev, .next) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2rem;
	height: 2rem;
	background: var(--c-brown--light);
	border-radius: 50%;
	overflow: hidden;
	aspect-ratio: 1;
	font-size: 1rem;
	font-weight: var(--fw-lg);
	color: var(--c-light);
}

.page-numbers:is(.prev, .next):is(:hover, :focus) {
	color: var(--c-main);
}