.pagination {
  display: flex;
  justify-content: center;
  --size: 24px;
  --bgColor: var(--listBorderColor);
  --numColor: var(--textColor); }
  .pagination .nav-links .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 5px; }
    .pagination .nav-links .page-numbers > li {
      width: var(--size);
      height: var(--size); }
      .pagination .nav-links .page-numbers > li > * {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        text-decoration: none; }
        .pagination .nav-links .page-numbers > li > *.page-numbers:not(.dots):not(.next):not(.prev) {
          box-sizing: border-box;
          background: var(--bgColor);
          color: var(--numColor); }
        .pagination .nav-links .page-numbers > li > *.page-numbers.current {
          --bgColor: var(--colorBlack);
          --numColor: #FFF; }

.btns.pagenation {
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  --defaultButton: 60px;
  --controlButton: 48px;
  --buttonBackgroundColor:transparent;
  --buttonTextColor:var(--secondaryColor);
  --buttonActiveBackgroundColor:var(--secondaryColor);
  --buttonActiveTextColor:#FFF; }
  .btns.pagenation .btn .a {
    width: var(--defaultButton);
    height: var(--defaultButton);
    color: var(--primaryColor);
    background: var(--buttonBackgroundColor);
    color: var(--buttonTextColor);
    border-radius: 50%;
    transition: var(--animationDuration) color, var(--animationDuration) background;
    font-family: "montserrat", hiragino-kaku-gothic-pron, "hiragino-kaku-gothic-pron", "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal; }
    .btns.pagenation .btn .a .txt {
      font-size: var(--fontSize_l); }
  .btns.pagenation .btn.active .a {
    background: var(--buttonActiveBackgroundColor);
    color: var(--buttonActiveTextColor); }
  .btns.pagenation .btn.btn_prev .a, .btns.pagenation .btn.btn_next .a {
    width: var(--controlButton);
    height: var(--controlButton);
    background: var(--secondaryColor);
    color: #FFF;
    border-radius: 10px; }
  .btns.pagenation .btn.btn_prev {
    margin-right: var(--space2); }
  .btns.pagenation .btn.btn_next {
    margin-left: var(--space2); }
  @media (min-width: 768px) {
    .btns.pagenation {
      --controlButton: 66px; } }