@charset "UTF-8";

/**
 * テーマカラーを使用したページネーションスタイル
 * !importantを使用せず、詳細度で優先度を管理
 */

/* CSS変数の定義（JavaScriptから動的に設定される） */
:root {
    --theme-color: #eb610e;
    --theme-color-rgb: 235, 97, 14;
}

/* ======================================
   ページネーション基本スタイル
   ====================================== */

/* ページネーション全体のコンテナ */
.main-container .pagination,
.search-container .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
}

.main-container .pagination ul,
.search-container .pagination ul {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

.main-container .pagination ul li,
.search-container .pagination ul li {
    margin: 0;
}

/* ページリンクの基本スタイル - 詳細度を高くしてstyle.cssを上書き */
.main-container .pagination ul li a,
.search-container .pagination ul li a,
.main-container .pagination a,
.search-container .pagination a {
    display: inline-block;
    padding: 8px 15px;
    background: #ffffff;
    color: #333333;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    min-width: 40px;
    text-align: center;
    line-height: 1.4;
}

/* ホバー時のスタイル */
.main-container .pagination ul li a:hover,
.search-container .pagination ul li a:hover,
.main-container .pagination a:hover:not(.current):not(.omision),
.search-container .pagination a:hover:not(.current):not(.omision) {
    background: var(--theme-color);
    color: #ffffff;
    border-color: var(--theme-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--theme-color-rgb), 0.3);
}

/* 現在のページ */
.main-container .pagination ul li a.current,
.search-container .pagination ul li a.current,
.main-container .pagination a.current,
.search-container .pagination a.current,
.main-container .pagination span.current,
.search-container .pagination span.current {
    background: var(--theme-color);
    color: #ffffff;
    border: 2px solid var(--theme-color);
    font-weight: 700;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--theme-color-rgb), 0.3);
    cursor: default;
    padding: 8px 15px;
    display: inline-block;
    border-radius: 25px;
}

/* 省略記号 */
.main-container .pagination a.omision,
.search-container .pagination a.omision,
.main-container .pagination span.dots,
.search-container .pagination span.dots {
    background: transparent;
    border: none;
    color: #999999;
    cursor: default;
    padding: 0 8px;
}

/* ======================================
   WordPressデフォルトページネーション
   ====================================== */

.main-container .navigation.pagination,
.search-container .navigation.pagination {
    margin: 35px 0;
    text-align: center;
}

.main-container .navigation.pagination .nav-links,
.search-container .navigation.pagination .nav-links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 25px;
    background: #ffffff;
    border-radius: 50px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

/* WordPressページ番号 */
.main-container .nav-links .page-numbers,
.search-container .nav-links .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    background: #ffffff;
    color: #333333;
    text-decoration: none;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    line-height: 1;
}

/* WordPress現在のページ */
.main-container .nav-links .page-numbers.current,
.search-container .nav-links .page-numbers.current {
    background: var(--theme-color);
    color: #ffffff;
    border-color: var(--theme-color);
    font-weight: 700;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(var(--theme-color-rgb), 0.3);
}

/* WordPressホバー */
.main-container .nav-links .page-numbers:hover:not(.current):not(.dots),
.search-container .nav-links .page-numbers:hover:not(.current):not(.dots) {
    background: var(--theme-color);
    color: #ffffff;
    border-color: var(--theme-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--theme-color-rgb), 0.3);
}

/* WordPress省略記号 */
.main-container .nav-links .page-numbers.dots,
.search-container .nav-links .page-numbers.dots {
    background: transparent;
    border: none;
    color: #999999;
    cursor: default;
    padding: 0 8px;
    min-width: auto;
}

/* WordPress前へ・次へ */
.main-container .nav-links .prev.page-numbers,
.main-container .nav-links .next.page-numbers,
.search-container .nav-links .prev.page-numbers,
.search-container .nav-links .next.page-numbers {
    padding: 0 20px;
    background: #f8f9fa;
    color: #4a5568;
    border: 2px solid #e2e8f0;
    font-weight: 600;
}

.main-container .nav-links .prev.page-numbers:hover,
.main-container .nav-links .next.page-numbers:hover,
.search-container .nav-links .prev.page-numbers:hover,
.search-container .nav-links .next.page-numbers:hover {
    background: var(--theme-color);
    color: #ffffff;
    border-color: var(--theme-color);
}

/* ======================================
   CustomPagerクラス
   ====================================== */

.main-container .custom-pager,
.search-container .custom-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 35px 0;
}

.main-container .custom-pager a,
.main-container .custom-pager span,
.search-container .custom-pager a,
.search-container .custom-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    background: #ffffff;
    color: #333333;
    text-decoration: none;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
}

.main-container .custom-pager a:hover,
.search-container .custom-pager a:hover {
    background: var(--theme-color);
    color: #ffffff;
    border-color: var(--theme-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--theme-color-rgb), 0.3);
}

.main-container .custom-pager .current,
.search-container .custom-pager .current {
    background: var(--theme-color);
    color: #ffffff;
    border-color: var(--theme-color);
    font-weight: 700;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(var(--theme-color-rgb), 0.3);
}

.main-container .custom-pager .disabled,
.search-container .custom-pager .disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f7fafc;
    color: #cbd5e0;
    border-color: #e2e8f0;
    pointer-events: none;
}

/* ======================================
   レスポンシブデザイン
   ====================================== */

@media (max-width: 768px) {
    .main-container .navigation.pagination .nav-links,
    .search-container .navigation.pagination .nav-links,
    .main-container .custom-pager,
    .search-container .custom-pager {
        padding: 12px 18px;
        gap: 5px;
    }
    
    .main-container .nav-links .page-numbers,
    .search-container .nav-links .page-numbers,
    .main-container .custom-pager a,
    .main-container .custom-pager span,
    .search-container .custom-pager a,
    .search-container .custom-pager span,
    .main-container .pagination ul li a,
    .search-container .pagination ul li a {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .main-container .navigation.pagination .nav-links,
    .search-container .navigation.pagination .nav-links,
    .main-container .custom-pager,
    .search-container .custom-pager {
        padding: 10px 15px;
        gap: 3px;
    }
    
    .main-container .nav-links .page-numbers,
    .search-container .nav-links .page-numbers,
    .main-container .custom-pager a,
    .main-container .custom-pager span,
    .search-container .custom-pager a,
    .search-container .custom-pager span,
    .main-container .pagination ul li a,
    .search-container .pagination ul li a {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
        padding: 0 8px;
        border-radius: 20px;
    }
}