@font-face {
	font-family: 'Local Noto Sans JP';
	src: local('Noto Sans JP');
}

.kochi-archive-area {
	--kochi-pager-link-text-color: #000;
	--kochi-pager-link-border-color: transparent;
	--kochi-pager-link-text-hover-color: #fff;
	--kochi-pager-link-background-color: #fff;
	--kochi-pager-link-background-hover-color: #004ea2;
	--kochi-pager-link-border-hover-color: #004ea2;
}

[data-theme='blue-theme'] .kochi-archive-area {
	--kochi-pager-link-text-color: #fff;
	--kochi-pager-link-border-color: #e1efff;
	--kochi-pager-link-text-hover-color: #004ea2;
	--kochi-pager-link-background-color: #004ea2;
	--kochi-pager-link-background-hover-color: #e1efff;
	--kochi-pager-link-border-hover-color: #004ea2;
}

[data-theme='black-theme'] .kochi-archive-area {
	--kochi-pager-link-text-color: #fff;
	--kochi-pager-link-border-color: #f8f8f8;
	--kochi-pager-link-text-hover-color: #004ea2;
	--kochi-pager-link-background-color: #404040;
	--kochi-pager-link-background-hover-color: #f8f8f8;
	--kochi-pager-link-border-hover-color: #f8f8f8;
}

.kochi-archive-area .kochi-archive-footer {
	padding-inline: 24px;
	display: grid;
	font-feature-settings: 'pwid' on;
}

.kochi-archive-area .kochi-archive-footer .kochi-archive-pagination-info {
	padding-block: 0;
	display: flex;
	-moz-column-gap: 8px;
	column-gap: 8px;
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi {
	display: flex;
	align-items: center;
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi .page,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .current,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .first,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .last {
	padding-block: 4px;
	padding-inline: 16px;
	border-width: 1px;
	border-style: solid;
	border-radius: 4em;
	display: grid;
	place-items: center;
	font-feature-settings: 'pwid' on;
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi .page,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .first,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .last {
	border-color: var(--kochi-pager-link-border-color);
	color: var(--kochi-pager-link-text-color);
	background-color: var(--kochi-pager-link-background-color);
	text-decoration: none;
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi .page:hover,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .page:active,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .page:focus-visible,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .first:hover,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .first:active,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .first:focus-visible,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .last:hover,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .last:active,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .last:focus-visible {
	border-color: var(--kochi-pager-link-border-hover-color);
	color: var(--kochi-pager-link-text-hover-color);
	background-color: var(--kochi-pager-link-background-hover-color);
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi .current {
	border-color: var(--kochi-pager-link-border-hover-color);
	color: var(--kochi-pager-link-text-hover-color);
	background-color: var(--kochi-pager-link-background-hover-color);
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi .extend {
	vertical-align: bottom;
	color: var(--kochi-pager-link-text-color);
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi .previouspostslink,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink {
	display: grid;
	color: var(--kochi-pager-link-text-color);
	text-decoration: none;
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi .previouspostslink::before,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink::before {
	content: '';
	width: 18px;
	height: 18px;
	background-color: currentcolor;
	-webkit-mask-image: url(../images/icon/arrow.svg);
	mask-image: url(../images/icon/arrow.svg);
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	transition: background-color 300ms ease;
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi .previouspostslink:hover,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .previouspostslink:active,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .previouspostslink:focus-visible,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink:hover,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink:active,
.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink:focus-visible {
	color: var(--kochi-pager-link-background-hover-color);
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi .previouspostslink {
	order: -1;
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi .previouspostslink::before {
	rotate: 180deg;
}

.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink {
	order: 10;
}

@media screen and (max-width: 1024px) {

	.kochi-archive-area .kochi-archive-footer {
		padding-block: 12px;
		row-gap: 12px;
		font-size: var(--font-size-p-sp);
	}

	.kochi-archive-area .kochi-archive-footer .kochi-archive-pagination-info {
		justify-content: center;
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi {
		justify-content: center;
		-moz-column-gap: 4px;
		column-gap: 4px;
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .page,
	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .current,
	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .first,
	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .last {
		line-height: 1.5714285714;
		font-size: var(--font-size-p-sp);
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .previouspostslink,
	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink {
		width: 18px;
		height: 18px;
		overflow: hidden;
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .previouspostslink {
		grid-template-columns: 18px 0;
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink {
		grid-template-columns: 18px 0;
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink::before {
		grid-column: 1/2;
	}
}

@media screen and (min-width: 1025px) {

	.kochi-archive-area .kochi-archive-footer {
		padding-block: 24px;
		align-items: center;
		grid-template-columns: 1fr auto;
		-moz-column-gap: 8px;
		column-gap: 8px;
		font-size: var(--font-size-p-pc);
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi {
		-moz-column-gap: 16px;
		column-gap: 16px;
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .page,
	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .current,
	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .first,
	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .last {
		line-height: 1.625;
		font-size: var(--font-size-p-pc);
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .previouspostslink,
	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink {
		align-items: center;
		-moz-column-gap: 4px;
		column-gap: 4px;
		line-height: 1.625;
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .previouspostslink {
		grid-template-columns: 18px auto;
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink {
		grid-template-columns: auto 18px;
	}

	.kochi-archive-area .kochi-archive-footer .wp-pagenavi .nextpostslink::before {
		grid-column: 2/3;
		grid-row: 1/2;
	}
}