/* ページネーション共通スタイル */

/* PC表示時はSP版のページネーションを完全に非表示 */
.sp_list .pagination-container,
.sp_history .pagination-container,
.transaction_wrapper .sp .pagination-container {
    display: none;
}

/* ページネーション */
.pagination-container {
    margin-top: 40px;
    display: flex !important;
    justify-content: center;
}

.pagination {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pagination-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #AA8320;
    background: #FFFFFF;
    color: #AA8320;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}

.pagination-btn:hover:not(.disabled):not(.active) {
    background: #F2F2EF;
    border-color: #AA8320;
}

.pagination-btn.active {
    background: #AA8320;
    color: #FFFFFF;
    border-color: #AA8320;
    cursor: default;
}

.pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #F2F2F2;
}

.pagination-ellipsis {
    padding: 0 8px;
    color: #666666;
    font-size: 1.4rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    /* PC版のページネーションも非表示 */
    .pc_list .pagination-container,
    .pc_history .pagination-container,
    .transaction_wrapper .pc .pagination-container {
        display: none !important;
    }
    /* SP表示時はSP版のページネーションを表示 */
    .sp_list .pagination-container,
    .sp_history .pagination-container,
    .transaction_wrapper .sp .pagination-container {
        display: flex !important;
        margin-top: 30px;
        justify-content: center;
    }
    .pagination {
        gap: 6px;
    }
    .pagination-btn {
        min-width: 33px;
        height: 33px;
        padding: 0;
    }
    .pagination-ellipsis {
        padding: 0 5px;
    }
}