.pagination {
            font-size: 1.6rem; 
            padding: 2em 0; /* 上下の余白 */
            background-color: #fff;
        }

        /* --- リンク要素のラッパー --- */
        .pagination .nav-links {
            display: flex; /* Flexboxで横並び */
            justify-content: center; /* 中央寄せ */
            align-items: center; /* 上下中央揃え */
            flex-wrap: wrap; /* 画面が狭い時に折り返す */
        }

        /* --- すべてのリンク要素（ページ番号、「...」、Prev/Next） --- */
        .pagination .page-numbers {
            color: #6c757d; /* グレーの文字色 */
            text-decoration: none;
            transition: color 0.2s ease-in-out;
            display: inline-flex;
            align-items: center;
            margin: 0 0.6em;
        }

        /* --- クリック可能なリンクにホバーした時 --- */
        .pagination a.page-numbers:hover {
            color: #0056b3; /* 少し濃い青 */
        }

        /* --- 現在のページ番号 --- */
        .pagination .page-numbers.current {
            color: #007bff; /* メインの青色 */
            /* font-weight: bold; を削除 */
        }

        /* --- Prev と Next のテキスト --- */
        .pagination .prev,
        .pagination .next {
            /* font-weight: 600; を削除 */
            color: #333; /* 画像に合わせて少し濃い色に変更 */
        }

        /* --- Prev/Nextと数字の間の余白を大きくする --- */
        .pagination .prev {
            margin-right: 2em;
        }

        .pagination .next {
            margin-left: 2em;
        }
        
        /* --- 「Prev」の前に左矢印を追加 --- */
        .pagination .prev::before {
            content: '‹';
            margin-right: 0.5em; /* テキストとの間隔 */
            /* ▼▼▼ 矢印のサイズを大きくし、高さを調整 ▼▼▼ */
            font-size: 1.4em;
            line-height: 1;
        }

        /* --- 「Next」の後に右矢印を追加 --- */
        .pagination .next::after {
            content: '›';
            margin-left: 0.5em; /* テキストとの間隔 */
            /* ▼▼▼ 矢印のサイズを大きくし、高さを調整 ▼▼▼ */
            font-size: 1.4em;
            line-height: 1;
        }