﻿
.pagination-container {
  margin-top: 56px
}

.pagination-container .pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px
}

@media screen and (min-width: 769px) {
  .pagination-container .pagination {
      gap:16px
  }
}

.pagination-container .pagination li a,.pagination-container .pagination li span {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  font-family: "Oswald","Noto Sans JP",serif;
  display: grid;
  place-content: center
}

@media screen and (min-width: 769px) {
  .pagination-container .pagination li a,.pagination-container .pagination li span {
      width:40px;
      height: 40px
  }
}

.pagination-container .pagination li .number a,.pagination-container .pagination li .number a,
.page-link{
  border: 1px solid #000;
  transition: .3s;
}

.pagination-container .pagination .is-active > a{
  background: #582614;
  color: #fff;
  pointer-events: none
}
.pagination-container .pagination .disabled {
display: none!important;
}


.pagination-container .pagination li a {
transition: .3s;
  border: 1px solid #000;
}

.pagination-container .pagination li a svg {
  transition: fill .3s
}

@media(any-hover: hover) {
  .pagination-container .pagination li a:hover {
      background:#962700;
      color: #fff
  }

  .pagination-container .pagination li a:hover.num {
      border: 1px solid #962700
  }

  .pagination-container .pagination li a:hover svg {
      fill: #fff
  }
}

.pagination-container .pagination .next a.page-link,
.pagination-container .pagination .prev a.page-link{
position: relative;
border: none!important;
}
.pagination-container .pagination .prev a:before,
.pagination-container .pagination .next a:after {
content: "";
width: 11px;
height: 11px;
background: url(/assets/img/common/ico_arrow_blk.svg);
background-size: contain;
background-repeat: no-repeat;
}
.pagination-container .pagination .prev a:hover:before,
.pagination-container .pagination .next a:hover:after {
content: "";
width: 11px;
height: 11px;
background: url(/assets/img/common/ico_arrow_wht.svg);
background-size: contain;
background-repeat: no-repeat;
}
.pagination-container .pagination .prev a:before {
transform: rotate(180deg);
}
