/******** CSS Variables (ページネーション) ********/  
        :root {
            /*--color-white: white;*/
            --color-transparent: transparent; /* 透明色を変数として定義 */
            --color-secondary-text: #32383E; /* 非アクティブな数字の色 */
            --color-white-text: white; /* 修正点: 白文字用の変数（白色）を新しく定義 */
            --color-tertiary-border: #555E68; /* ボーダーの色 */
            --color-blue-bg: #095DB1; /* アクティブボタンの背景 */
            --color-disable-bg: #F0F4F8; /* 無効化ボタンの背景 */
            --color-disable-text: #9FA6AD; /* 無効化アイコンの色 */
            --border-radius-md: 6px;
            --border-radius-sm: 4px;
            --button-size: 40px;
            --font-family: 'Noto Sans', sans-serif;
            --gap-spacing: 8px;
        }

        /* ページネーションコンポーネントのメインコンテナ */
        .pagination-container {
            display: flex;
            align-items: center;
            gap: var(--gap-spacing);
            box-shadow: none;
            padding: 4px;
            border-radius: var(--border-radius-md);
            background-color: var(--color-transparent);
        }

        /* ------------------------------------- */
        /* ボタンの共通スタイル */
        /* ------------------------------------- */

        .pagination-button {
            height: var(--button-size);
            padding: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: var(--font-family);
            cursor: pointer;
            transition: background-color 0.15s, box-shadow 0.15s;
            box-sizing: border-box;
            border: none;
            background: none;
        }
        
        /* ------------------------------------- */
        /* 数字ボタンのスタイル */
        /* ------------------------------------- */

        .number-button {
            padding: 8px 16px; 
            border-radius: var(--border-radius-sm);
        }

        .number-button span {
            font-size: 16px;
            font-weight: 500;
            line-height: 16px;
            letter-spacing: 0.50px;
        }

        /* 非アクティブな数字ボタン */
        .number-button.inactive{
        	background: var(--color-blue-bg);
            cursor: default;
        }
        
        .number-button.active:not(.ellipsis):hover {
            background-color: #f0f4f8;
        }
       
        /* アクティブな数字ボタン */
        .number-button.active{
            color: var(--color-secondary-text);
            cursor: pointer;
        }

        .number-button.inactive span {
            color: var(--color-white-text);
        }
        
        /* 省略記号 (...) のスタイル */
        .number-button.ellipsis {
            cursor: default;
            background: none;
        }

        /* ------------------------------------- */
        /* アイコンボタンのスタイル */
        /* ------------------------------------- */

        .icon-button {
            min-width: var(--button-size);
            min-height: var(--button-size);
            border-radius: var(--border-radius-md); /* 6px */
            outline: 1px solid var(--color-tertiary-border);
            outline-offset: -1px;
            padding: 0;
            /* 矢印を確実に中央に配置するための追加設定 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* IMGアイコンの共通スタイル */
        .icon-img {
            width: 20px;
            height: 20px;
            display: block;
            /* プレースホルダーなので、元のデザインは再現できませんが、サイズを合わせます */
        }
        
        /* 無効化（Disabled）状態のアイコンボタン */
        .icon-button.disabled {
            background: var(--color-disable-bg);
            cursor: not-allowed;
            pointer-events: none;
        }

        /* 有効化（Enabled）状態のアイコンボタン */
        .icon-button.enabled {
             background: transparent;
            cursor: pointer;
        }
        
        .icon-button.enabled:hover {
            background: #f4f4f8;
        }