@charset "utf-8";


.pagination > li > a {
	border: none;
}
.pagination > li > a, .pagination > li > span {
    margin-left: 0;
}
/************************************
** レスポンシブページネーション
************************************/
.pagination{
	list-style-type: none;
	/*padding-left: 0;*/
	margin: 30px auto 30px;
	/*padding-bottom: 30px;*/
}

.pagination,
.pagination li a {
	display: flex;
	/*flex-wrap: wrap;*/
	justify-content: center;
	align-items: center;
	color: #000;
}
.pagination li {
	/*border: solid 1px #c2bfb6;
	border-radius: 5px;*/
}
.pagination a {
	font-weight: 400;
	font-size: 20px;
  padding-top: 0px;
  text-decoration:none;
  /*border: 1px solid #ddd;*/
  /*border-left-width: 0;*/
  min-width:40px;
  min-height:40px;
  color: #333;
  line-height:40px;
}

.pagination li:not([class*="current"]) a:hover {
  background-color: unset;
}

.pagination li:first-of-type a {
  /*border-left-width: 1px;*/
}

.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span {
  /* screen readers only */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.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);
}

/*.pagination li.first a::before { content: "\f100"; }
.pagination li.last a::after { content: "\f101"; }

.pagination li.previous a::before { content: "\f104"; }
.pagination li.next a::after { content: "\f105"; }
*/
.pagination li.first a::before { 
content: ""; letter-spacing: 0px;
}
.pagination li.last a::after { 
content: ""; letter-spacing: 0px;
}
.pagination li.last a, .pagination li.first a {
	display: none;
}

.pagination li.previous a::before {
	content: url(../com_img/arrowL.svg);
	padding-right: 14px;
}
.pagination li.previous a:hover {
	transform: translateX(-14px);
	transition: transform 0.6s; /* all */
}
.pagination li.next a::after {
	content: url(../com_img/arrowR.svg);
	padding-left: 14px;
}
.pagination li.next a:hover {
	transform: translateX(14px);
	transition: transform 0.6s; /* all */
}
/*.pagination li.previous a::before { 
content: "前へ"; font-size: 12px;}
.pagination li.next a::after { content: "次へ"; }*/

.pagination li.current a {
 /*background-color: #c2bfb6;*/
	border: solid 1px var(--black);
 cursor: default; /*color: #fff;*/
 pointer-events: none;
}

.pagination > li:first-child > a {
  /*border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;*/
}

.pagination > li:last-child > a {
  /*border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;*/
}
.pagination > li:not(:last-child) {
	margin-right: 1px;
}

/* comment link */
ul.page-numbers {
	margin: 30px auto 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
}
ul.page-numbers li {
	border: solid 1px #c2bfb6;
	width: 32px; height: 32px; line-height:32px;
	
}
ul.page-numbers li a, ul.page-numbers li span {
	width: 32px; height: 32px; line-height:32px;
	display: flex;
	justify-content: center;
	align-items: center;
}
ul.page-numbers li a {
	font-weight: 300;
	padding-top: 1px;
	text-decoration:none;
	color: #333;
	display: block;
	text-align: center;
}
ul.page-numbers li:not([class*="current"]) a:hover {
	background-color: #eee;
}
ul.page-numbers li span.current{
	background-color: #c2bfb6;
}
ul.page-numbers > li:not(:last-child) {
	margin-right: 1px;
}


@media only screen and ( max-width: 680px ) {
  .pagination li.first,
  .pagination li.last {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.previous a { /*border-left-width: 1px;*/ }
}

@media only screen and ( max-width: 500px ) {
  .pagination li {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.current,
  .pagination li.first,
  .pagination li.last,
  .pagination li.previous,
  .pagination li.next{
    position: initial;
    top: initial;
    left: initial;
  }

  .pagination li.previous a { /*border-left-width: 0;*/ }
}

@media only screen and ( max-width: 400px ) {
  .pagination li.first,
  .pagination li.last {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .pagination li.previous a { /*border-left-width: 1px; */}
}

@media only screen and ( max-width: 240px ) { /* For watches? */
  .pagination li { width: 50%;}

  .pagination li.current {
    order: 2;
    width: 100%;
    /*border-left-width: 1px;*/
  }
}








@media screen and (max-width: 1100px){
	
}
@media screen and (max-width: 970px){
	
}
@media screen and (max-width: 900px){
	
}
@media screen and (max-width: 770px){
	
}
@media screen and (max-width: 640px){
	
}