/* ==================================================
   List.js ページネーション用スタイル
   ================================================== */

/* ページネーション全体のコンテナ */
.pagination {
    display: flex; /* 横並びにする */
    justify-content: center; /* 中央揃えにする */
    align-items: center; /* 上下中央揃えにする */
    margin-top: 40px; /* 上に余白をとる */
}

/* ページ番号のリスト */
.pagination-numbers {
    display: flex; /* 横並びにする */
    list-style: none; /* 先頭の黒い点を消す */
    padding: 0;
    margin: 0;
}

/* 各ページ番号のコンテナ（li） */
.pagination-numbers li {
    margin: 0 5px; /* 隣との余白 */
}

/* ページ番号のリンク（a）と現在地のスパン（span）に共通のスタイル */
.pagination-numbers .page,
.pagination-numbers .active {
    display: block;
    padding: 8px 15px;
    border: 1px solid #ddd;
    color: #337ab7;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

/* マウスを乗せたときのスタイル */
.pagination-numbers .page:hover {
    background-color: #eee;
}

/* 現在表示しているページのスタイル */
.pagination-numbers .active a, /* list.jsが生成するアクティブなli > a */
.pagination-numbers .active {
    background-color: #337ab7;
    color: #fff;
    border-color: #337ab7;
    cursor: default;
}