/* その１  */

.pager  ul.pagination {
    text-align: center;
    margin: 0;
    padding: 0;
  }
  
  .pager .pagination li {
    display: inline;
    margin: 0 2px;
    padding: 0;
    display: inline-block;
    background:#9D50BB;
    width: 50px;
    height: 50px;
    text-align: center;
    position: relative;
  }
  
  .pager .pagination li a{
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display:table;
    color: #fff;
    text-decoration: none;
  }
  
  .pager .pagination li a span{
    display:table-cell;
    vertical-align:middle;
  }
  
  .pager .pagination li a:hover,
  .pager .pagination li a.active{
    color: #000;
    background: #ccf;
  }
  
  @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件へ　";
    }
  
  }