@charset "UTF-8";
/*========================*/

/* ページネイション */

/*========================*/
/* ==================
コンテナ */
#pagination {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 10px 10px;
	margin-top: 3.8em;
}
/* ==================
アイテム共通 */
.pagination__item a,
.pagination__item span {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	width: calc(40rem / 16);
	height: calc(40rem / 16);

	border: 1px solid transparent;
	border-radius: 50%;
	background-color: transparent;
}
/* ==================
ナンバー */
.number.pagination__item a,
.number.pagination__item span {
	font-family: var(--number);
	font-weight: 400;
	font-size: var(--txt-sm);
	color: var(--color-gray);
}
.number.pagination__item.is-active span {
	color: var(--color-white);

	border-color: var(--color-main-pale);
	background-color: var(--color-main-pale);
}
@media (any-hover: hover) {
	.number.pagination__item a {
		-webkit-transition: color .2s var(--easeInQuad),
		border-color .2s var(--easeInOutSine),
		background-color .2s var(--easeInOutSine);
		transition: color .2s var(--easeInQuad),
		border-color .2s var(--easeInOutSine),
		background-color .2s var(--easeInOutSine);
	}
	.number.pagination__item a:hover,
	.number.pagination__item a:focus {
		color: var(--color-bk);

		border-color: var(--color-main-thin);
		background-color: var(--color-main-thin);
	}
}
@media(max-width:959px) {
	.pagination__item a,
	.pagination__item span {
		width: calc(32rem/16);
		height: calc(32rem/16);
	}
}
@media(max-width:559px) {
	/* activeなnumber以外は非表示にする */
	.number.pagination__item:not(.is-active) {
		display: none;
	}
}
/* ==================
arrow */
.pagination-arrow {
	color: var(--color-main-soft);
}
.pagination-arrow[disabled] {
	color: transparent;
}
.pagination-arrow a {
	border-color: transparent;
}
.pagination-arrow svg {
	fill: none;
	fill-rule: evenodd;
	stroke: currentColor;
	stroke-miterlimit: 10;
	stroke-width: 1;
}
/* ツールチップ */
/* #pagination .pagination-arrow a {
	position: relative;
}
#pagination .pagination-arrow a:hover::after,
#pagination .pagination-arrow a:focus::after {
	font-size: 12px;
	color: var(--color-white);
	white-space: nowrap;

	display: none;

	padding: .3em .8em;

	border-radius: 3px;
	background-color: #1b1b1b;
	-webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, .05),
	0px 8px 8px 0px rgba(0, 0, 0, .025);
	        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, .05),
	0px 8px 8px 0px rgba(0, 0, 0, .025);

	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);

	position: absolute;
	bottom: -2.8em;
	left: 50%;
	z-index: 9;
}
#pagination .pagination-arrow a::before,
#pagination .pagination-arrow a::before {
	content: "";
	display: none;

	border-top: .5em solid transparent;
	border-right: .5em solid transparent;
	border-bottom: .5em solid #1b1b1b;
	border-left: .5em solid transparent;

	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);

	position: absolute;
	bottom: -.7em;
	left: 50%;
	z-index: 9;
}
#pagination .pagination-arrow a:hover::before,
#pagination .pagination-arrow a:focus::before {
	display: block;
}
#pagination .pagination-arrow--prev a:hover::after,
#pagination .pagination-arrow--prev a:focus::after {
	content: "前のページへ";
	display: block;
}
#pagination .pagination-arrow--next a:hover::after,
#pagination .pagination-arrow--next a:focus::after {
	content: "次のページへ";
	display: block;
}
#pagination .pagination-arrow--first a:hover::after,
#pagination .pagination-arrow--first a:focus::after {
	content: "最初のページへ";
	display: block;
}
#pagination .pagination-arrow--last a:hover::after,
#pagination .pagination-arrow--last a:focus::after {
	content: "最後のページへ";
	display: block;
} */
/* ==================
ページ総数 */
.page-count {
	font-family: var(--number);
	font-size: var(--txt-xxs);
	color: var(--color-gray);

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 0 .3em;

	margin-top: 1em;
}
@media(max-width:559px) {
	.page-count {
		font-size: var(--txt-xxs);
	}
}