@charset "utf-8";

.pager_box {
	width: 50%;
	padding: 10% 0 0;
	margin: 0 auto;
}
.pager{
/* For IE */
       -js-display: flex;
	display: flex;
	height: 32px;
	
}
.pager li{
	list-style-type: none;
	flex: 1;
	
}
.pager li a {
	display: flex;
	justify-content: center;
	align-items: center;
}
 
@media only screen and ( max-width: 630px ) {  
 
/* 全てのli要素を消す */
.pager li {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
 
/* 必要なli要素を消す */
.pager li.active,
.pager li:first-of-type,
.pager li:last-of-type,
.pager li:nth-of-type(2),
.pager li:nth-last-of-type(2){
	position: static;
	top: initial;
	left: initial;
  }
}
 
.pager li {
 
 /* For IE */
	display: flex;
	justify-content: center;
	background-color: #F8F5F5;	
	padding: 0 3%;
}
 
.pager a {
/* For IE */
	flex: 1;
	text-decoration:none;
	color: #303030;
}
.pager li.active {
	border: none;
	background-color: #707070;
}
 
/* Active 以外のhover */
	.pager li:not([class*="active"]) a:hover { 
	background-color: rgba(255,255,255,.2);
}
 
/* Activeのスタイル */
.pager li.active a { 
	background-color: #707070;
	color: #FFF;
	font-weight: 400;
	font-size: 0.8rem;
	white-space: nowrap;
	padding: 0 10%;

}
 
ul {
	-webkit-padding-start: 0px;
}

/*スマホ設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 769px) {
.pager_box {
	width: 90%;
	padding: 8% 0 0;
	margin: 0 auto;
}
.pager li {
 /* For IE */
	display: flex;
	justify-content: center;
	background-color: #F8F5F5;
	padding: 2%;
}
.pager li.active{
width: 38%;
}
	.pager li a{
		font-size: 10px;
	}
	.pager li.active a{
		font-size:10px;
	}
	

}