@charset "utf-8";

.archive-kaisetsu-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3rem;
	margin: 11.4rem 0 9rem;
	@media screen and (max-width: 767px) {
		gap: 1.5rem;
		margin: 5rem 0 3rem;
	}
	> li {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 4rem;
		height: 4rem;
		font-family: "Inter";
		font-weight: 700;
		font-size: 1.8rem;
		color: #3782b6;
		cursor: pointer;
		border: 1px solid #3782b6;
		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			width: 3rem;
			height: 3rem;
		}
		&:not(.active).last,
		&:not(.active).first {
			position: relative;
		}
		&:not(.active).last:before,
		&:not(.active).first:before {
			content: "…";
			position: absolute;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			color: #3782b6;
			font-weight: bold;
			font-size: 1.8rem;
		}
		&:not(.active).first {
			margin-right: 2rem;
		}
		&:not(.active).first:before {
			left: calc(100% + 1rem);
		}
		@media screen and (max-width: 767px) {
			&:not(.active).first:before {
				left: calc(100% + 0.4rem);
			}
		}
		&:not(.active).last {
			margin-left: 2rem;
		}
		&:not(.active).last:before {
			right: calc(100% + 1rem);
		}
		@media screen and (max-width: 767px) {
			&:not(.active).last:before {
				right: calc(100% + 0.4rem);
			}
		}
		&.active {
			background-color: #3782b6;
			color: #ffffff;
		}
		@media (hover: hover) and (pointer: fine) {
			> li {
				transition:
					ease 0.25s background,
					ease 0.25s color;
			}
			> li:hover {
				background-color: #3782b6;
				color: #ffffff;
			}
		}
	}
}

.no-entry-message {
	margin: 3rem 0;
	text-align: center;
}