.paginationjs-pages > ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px 10px;
    list-style: none;
    user-select: none;
}

.paginationjs-pages > ul > li > a {
    display: block;
    padding: 12px 15px;
    line-height: 1;
    border-radius: 10px;
    text-decoration: none;
    /* color: #fff; */
}

.paginationjs-pages > ul > li.active > a {
    background-color: #526984;
    color: #fff;
}

.paginationjs-pages > ul > li > a:hover {
    background-color: #85a3c6;
    color: #fff;
}

.paginationjs-pages > ul > li.disabled > a {
    background-color: #999;
    color: #fff;
}

.paginationjs-pages > ul > li.paginationjs-ellipsis.disabled > a {
    display: block;
    padding: 12px 15px;
    line-height: 1;
    border-radius: 10px;
    text-decoration: none;
}

.paginationjs-prev , .paginationjs-next {
    background-color: #999;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
}

.paginationjs-prev > a , .paginationjs-next > a{
    background-color: #999;
    color: #fff;
    border-radius: 10px;
}

.paginationjs-prev > ul > li > a:hover , .paginationjs-next > ul > li > a:hover {
    background-color: #85a3c6;
    color: #fff;
}

/*  */
.pagination-container {
    padding: 3rem;
}


.pagination-container > ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px 10px;
    list-style: none;
    user-select: none;
}

.pagination-container > ul > li > a {
    display: block;
    padding: 12px 15px;
    line-height: 1;
    border-radius: 10px;
    text-decoration: none;
    /* color: #fff; */
}

.pagination-container > ul > li.active > a {
    background-color: #526984;
    color: #fff;
}

.pagination-container > ul > li > a:hover {
    background-color: #85a3c6;
    color: #fff;
}

.pagination-container > ul > li.disabled > a {
    background-color: #999;
    color: #fff;
}

.pagination-container > ul > li.paginationjs-ellipsis.disabled > a {
    display: block;
    padding: 12px 15px;
    line-height: 1;
    border-radius: 10px;
    text-decoration: none;
}

.page-item .prev , .page-item .next {
    background-color: #999;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
}

.page-item .prev > a , .page-item .next > a{
    background-color: #999;
    color: #fff;
    border-radius: 10px;
}

.page-item .prev > ul > li > a:hover , .page-item .next > ul > li > a:hover {
    background-color: #85a3c6;
    color: #fff;
}

@media screen and (max-width: 767px) {
    .paginationjs-pages > ul > li > a {
        display: block;
        padding: 7px 7px;
        line-height: 1;
        border-radius: 10px;
        text-decoration: none;
        /* color: #fff; */
    }
  }

@media screen and (max-width: 767px) {
    .paginationjs-pages > ul > li.paginationjs-ellipsis.disabled > a {
        display: block;
        padding: 7px 7px;
        line-height: 1;
        border-radius: 10px;
        text-decoration: none;
    }
  }

@media screen and (max-width: 767px) {
    .pagination-container > ul > li > a {
        display: block;
        padding: 7px 7px;
        line-height: 1;
        border-radius: 10px;
        text-decoration: none;
        /* color: #fff; */
    }
  }

@media screen and (max-width: 767px) {
    .pagination-container > ul > li.paginationjs-ellipsis.disabled > a {
        display: block;
        padding: 7px 7px;
        line-height: 1;
        border-radius: 10px;
        text-decoration: none;
    }
  }

@media screen and (max-width: 767px) {
    .pagination-container {
        padding: 2rem;
      /* スマートフォン向けのスタイルをここに記述 */
      display: inline-block; /* 例: デフォルトで非表示になっている場合はこれを追加 */
      width: 100%; /* 必要に応じて幅を調整 */
      height: 100px;
    }
  }