@charset "UTF-8";
.pager {
  display: flex;
  justify-content: center;
}
a.page-numbers,
span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
  color: #0f0f0f;
  background-color: #fff;
  border: 1px solid #d8c42c;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 8px 8px;
}

.prev.page-numbers,
.next.page-numbers,
.page-numbers.dots {
  background: #d8c42c;
  color: #fff;
  border: none;
  font-weight: 900;
}
a.page-numbers{
  border: none;
}
.page-numbers.current {
  color: #fff;
  background-color: #d8c42c;
  border: 1px solid #d8c42c;
}
  
  a.page-numbers:hover,
  a.page-numbers.active{
    color: #000;
    background: #ccf;
    border-radius: 10px;
    border-radius: 50px;
    animation: animScale 0.4s ease-out;
    transform-origin: 50% 50%;
    -webkit-animation: animScale 0.4s ease-out;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: animScale 0.4s ease-out;
    -moz-transform-origin: 50% 50%;
  }
  @keyframes animScale {
    0% { transform: scale(0.8, 0.8); }
    40% { transform: scale(1.2, 1.2); }
    60% { transform: scale(1, 1); }
    80% { transform: scale(1.1, 1.1); }
    100% { transform: scale(1, 1); }
  }
  @-webkit-keyframes animScale {
    0% { -webkit-transform: scale(0.8, 0.8); }
    40% { -webkit-transform: scale(1.2, 1.2); }
    60% { -webkit-transform: scale(1, 1); }
    80% { -webkit-transform: scale(1.1, 1.1); }
    100% { -webkit-transform: scale(1, 1); }
  }
  @-moz-keyframes animScale {
    0% { -moz-transform: scale(0.8, 0.8); }
    40% { -moz-transform: scale(1.2, 1.2); }
    60% { -moz-transform: scale(1, 1); }
    80% { -moz-transform: scale(1.1, 1.1); }
    100% { -moz-transform: scale(1, 1); }
  }
  
  
  @media only screen and (max-width: 767px){
    .pager .pagination li{
      display: none;
    }
  
    .pager .pagination li.pre,
    .pager .pagination li.next{
      display: inline-block;
      width: 40%;
      height: 50px;
      text-align: center;
    }
  
    .pager .pagination li.pre a,
    .pager .pagination li.next a{
      width: 100%;
      text-align: center;
    }
  
    .pager .pagination li.pre span::after{
      content: "　前の10件へ";
    }
  
    .pager .pagination li.next span::before{
      content: "次の10件へ　";
    }
  
  }