.pagination-wrapper {
    margin-top: 17rem;
    text-align: center;
}

.pagination-wrapper a.previouspostslink img {
    width: 8px;
    content: url('/manage/wp-content/themes/myproduct/assets/images/pagination_prev.png');
    vertical-align: middle;
}

.pagination-wrapper a.nextpostslink img {
    width: 8px;
    content: url('/manage/wp-content/themes/myproduct/assets/images/pagination_next.png');
    vertical-align: middle;
}

@media screen and (max-width: 768px) {
    .pagination-wrapper a.prev img {
        width: 12px;
        content: url('/manage/wp-content/themes/myproduct/assets/images/pagination_prev_SP.png');
    }

    .pagination-wrapper a.next img {
        width: 12px;
        content: url('/manage/wp-content/themes/myproduct/assets/images/pagination_next_SP.png');
    }
}

.pagination-wrapper,
.wp-pagenavi {
    width: 100%;
}

/* WP-PageNavi 全体ラッパー */
.wp-pagenavi {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 数字部分：a.page, span.page にだけ適用 */
.wp-pagenavi a.page,
.wp-pagenavi span.page,
.wp-pagenavi a.last,
.wp-pagenavi a.first {
    font-size: 16px;
    color: #aaa;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s ease;
}

/* 現在のページ */
.wp-pagenavi span.current {
    color: #000;
    font-weight: bold;
    pointer-events: none;
}

/* ホバー時に少し色を濃く */
.wp-pagenavi a.page:hover,
.wp-pagenavi a.last:hover,
.wp-pagenavi a.first:hover {
    color: #555;
}

/* 数字の間隔を整える */
.wp-pagenavi {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 2rem 0;
}

/* extend（…）がある場合の色 */
.wp-pagenavi .extend {
    color: #ccc;
}

.pagination-wrapper {
    padding: 0 2rem;
}