@charset "UTF-8";

/* ==========================================================================
   pager.css
   ========================================================================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 30px;
  margin: 0 5px;
  background: var(--gray-bg-01);
  transition: .2s;
}

.pagination li.current {
  background: var(--rmeisai-primary);
  color: #fff;
}

.pagination li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--black);
  text-decoration: none;
}

.pagination li.prev, .pagination li.next, .pagination li.prev:hover, .pagination li.next:hover, .pagination li.mostPrev, .pagination li.mostNext, .pagination li.mostPrev:hover, .pagination li.mostNext:hover {
  background: none;
}

.pagination li.deactive a {
  pointer-events: none;
}

.pagination li.prev .arrow {
  display: block;
  margin: 0;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--rmeisai-primary);
  border-left: 1px solid var(--rmeisai-primary);
  transform: rotate(-45deg);
}

.pagination li.next .arrow {
  display: block;
  margin: 0;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--rmeisai-primary);
  border-right: 1px solid var(--rmeisai-primary);
  transform: rotate(45deg);
}

.pagination li.mostPrev .doublearrow {
  position: relative;
  display: block;
  margin: 0;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--rmeisai-primary);
  border-left: 1px solid var(--rmeisai-primary);
  transform: rotate(-45deg);
  &::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -15px;
    margin: 0 10px;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--rmeisai-primary);
    border-left: 1px solid var(--rmeisai-primary);
  }
}

.pagination li.mostNext .doublearrow {
  position: relative;
  display: block;
  margin: 0;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--rmeisai-primary);
  border-left: 1px solid var(--rmeisai-primary);
  transform: rotate(135deg);
  &::before {
    content: '';
    position: absolute;
    top: 3px;
    right: -14px;
    margin: 0 10px;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--rmeisai-primary);
    border-left: 1px solid var(--rmeisai-primary);
  }
}

.pagination li.prev.deactive .arrow, .pagination li.next.deactive .arrow, .pagination li.mostPrev.deactive .doublearrow, .pagination li.mostNext.deactive .doublearrow {
  display: none;
}