﻿
/************************************
** レスポンシブページネーション
************************************/
.listing_pagination {
	list-style-type: none;
	padding-left: 0;
	margin: 5px 0 0;
}
.listing_pagination,
.listing_pagination li a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.listing_pagination a {
	font-weight: 300;
	padding-top: 1px;
	text-decoration:none;
	border: 1px solid #bbb;
	border-left-width: 0;
	min-width:36px;
	min-height:36px;
	color: #333;
}
.listing_pagination li:not([class*="current"]) a:hover {
	background-color: #eee;
}
/*.listing_pagination li:first-of-type a,*/
.listing_pagination li:nth-of-type(2) a {
	border-left-width: 1px;
}
.listing_pagination li.first span,
.listing_pagination li.last span,
.listing_pagination li.previous span,
.listing_pagination li.next span {
	/* screen readers only */
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.listing_pagination li.first a::before,
.listing_pagination li.last a::after,
.listing_pagination li.previous a::before,
.listing_pagination li.next a::after {
	display: inline-block;
	font-family: Fontawesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
}
.listing_pagination li.first a::before { content: "\f100"; }
.listing_pagination li.last a::after { content: "\f101"; }
.listing_pagination li.previous a::before { content: "\f104"; }
.listing_pagination li.next a::after { content: "\f105"; }
.listing_pagination li.current a {
	/*background-color: #ddd;*/
	background-color: rgba(38, 96, 197, 0.4);
	cursor: default;
	pointer-events: none;
}
/*.listing_pagination > li:first-child > a,*/
.listing_pagination > li:nth-child(2) > a {
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}
.listing_pagination > li:last-child > a {
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
}
.listing_pagination li.not_navi {
	/* screen readers only */
	position: absolute;
	top: -9999px;
	left: -9999px;
}

@media only screen and ( max-width: 680px ) {
	.listing_pagination li.first,
	.listing_pagination li.last {
		/* screen readers only */
		/*position: absolute;
		top: -9999px;
		left: -9999px;*/
	}
	.listing_pagination li.previous a { border-left-width: 1px; }

	.count_info:after {
		content: "\A" !important;
		white-space: pre !important;
	}
}
@media only screen and ( max-width: 500px ) {
	.listing_pagination li {
		/* screen readers only */
		/*position: absolute;
		top: -9999px;
		left: -9999px;*/
	}
	.listing_pagination li.page_fixed,
	.listing_pagination li.current,
	.listing_pagination li.first,
	.listing_pagination li.last,
	.listing_pagination li.previous,
	.listing_pagination li.next{
		/*position: initial;
		top: initial;
		left: initial;*/
	}
	.listing_pagination li.previous a { border-left-width: 0; }
	.listing_pagination li.not_navi {
		/* screen readers only */
		/*position: absolute;
		top: -9999px;
		left: -9999px;*/
	}
}
@media only screen and ( max-width: 400px ) {
	.listing_pagination li.not_navi {
		/* screen readers only */
		/*position: initial;
		top: initial;
		left: initial;*/
	}
	.listing_pagination li.page_fixed,
	.listing_pagination li.first,
	.listing_pagination li.last {
		/* screen readers only */
		/*position: absolute;
		top: -9999px;
		left: -9999px;*/
	}
	.listing_pagination li.previous a { border-left-width: 1px; }
}
@media only screen and ( max-width: 240px ) { /* For watches? */
	.listing_pagination li { width: 50%;}
	.listing_pagination li.current {
		order: 2;
		width: 100%;
		border-left-width: 1px;
	}
}


/* ページネーション 〇タイプ
-----------------------------------------------------------*/
div.cp_navi *,
div.cp_navi *:after,
div.cp_navi *:before {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

div.cp_navi a {
	text-decoration: none;
}

div.cp_navi {
	margin: 1em 0;
	text-align: center;
}

.cp_navi .cp_pagination {
	display: inline-block;
	/*margin-top: 2em;
	padding: 0 0.5em;*/
}

.cp_navi .cp_pagenum,
.cp_navi .cp_pagenum_disabled {
	font-size: 1em;
	/*line-height: 50px;*/
	line-height: 35px;
	display: block;
	float: left;
	/*transition: 400ms ease;*/
	letter-spacing: 0.1em;
	color: #37474F;
	border-radius: 50%;
	border: #37474F 1px solid;
	/*width: 50px;
	height: 50px;*/
	width: 35px;
	height: 35px;
	margin: auto .5em;
}

	.cp_navi .cp_pagenum:hover,
	.cp_navi .cp_pagenum.current {
		font-weight: bold;
		color: #fff !important;
		background-color: #033c73;
		border-radius: 50%;
	}

	.cp_navi .cp_pagenum.prev:hover,
	.cp_navi .cp_pagenum.next:hover {
		color: rgba(212, 53, 106, 1);
		background-color: transparent;
		border-radius: 50%;
	}

.cp_navi .cp_pagenum_disabled {
	cursor: not-allowed;
}
/*@media only screen and (max-width: 960px) {
	.cp_navi .cp_pagination {
		margin-top: 50px;
		padding: 0 10px;
	}
	.cp_navi .cp_pagenum {
	font-size: 0.8em;
	line-height: 25px;
	width: 45px;
	height: 25px;
	margin: auto .1em;
	border-radius: 0.3em;
}
	.cp_navi .cp_pagenum.prev,
	.cp_navi .cp_pagenum.next {
		padding: 0 25px 0 0;
	}
	.cp_navi .cp_pagenum:hover,
	.cp_navi .cp_pagenum.current {
		border-radius: 0.3em;
	}
	.cp_navi .cp_pagenum.prev:hover,
	.cp_navi .cp_pagenum.next:hover {
		border-radius: 0.3em;
	}
}*/
@media only screen and (min-width: 120px) and (max-width: 767px) {
	.cp_navi .cp_pagenum {
		/*display: none;*/
		border-radius: 0.3em;
	}

/*
		.cp_navi .cp_pagenum:nth-of-type(2) {
			position: relative;
			padding-right: 20px;
		}


			.cp_navi .cp_pagenum:nth-of-type(2)::after {
				font-size: 1.2em;
				position: absolute;
				top: 0;
				left: 25px;
				content: '...';
			}

		.cp_navi .cp_pagenum:nth-child(-n+3),
		.cp_navi .cp_pagenum:nth-last-child(-n+3) {
			display: block;
		}

		.cp_navi .cp_pagenum:nth-last-child(-n+4) {
			padding: 0 5px;
		}

			.cp_navi .cp_pagenum:nth-last-child(-n+4)::after {
				content: none;
			}
*/
		.cp_navi .cp_pagenum:hover,
		.cp_navi .cp_pagenum.current {
			border-radius: 0.3em;
		}

		.cp_navi .cp_pagenum.prev:hover,
		.cp_navi .cp_pagenum.next:hover {
			border-radius: 0.3em;
		}
}
