/* ==========================================================================
   投稿一覧：プレミアム・ダイナミックエディション（全60パターン）
   ========================================================================== */

:root {
    --accent-blue: #009fe8; /* スカイブルー */
    --accent-navy: #004097; /* ネイビー */
    --text-main: #1a1a1a;
    --text-sub: #555555;
    --bg-gray: #f4f7f9;
    --border: #e2e8f0;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   共通設定（画面幅の制限と中央配置）
   ========================================================================== */
.post-list-wrapper { 
    width: 100%; 
    padding: 100px 5%; 
    box-sizing: border-box; 
    font-family: sans-serif;
}
.post-list-wrapper * { box-sizing: border-box; }

.post-list-container { 
    display: grid; 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto;    
}

/* アイテムの共通設定 */
.custom-post-item { position: relative; transition: all 0.5s var(--ease-out); border-radius: 16px; }
.custom-post-item .post-link { text-decoration: none; color: inherit; display: block; height: 100%; }

/* 画像エリアの共通設定 */
.post-img { overflow: hidden; position: relative; border-radius: 12px; }
.post-img img { width: 100%; height: auto; display: block; transition: transform 0.8s var(--ease-out); object-fit: cover; }

/* テキストエリアの共通設定 */
.post-txt { padding: 32px; }

.post-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.post-cat { background: var(--accent-navy); color: #fff; padding: 6px 16px; font-size: 0.8rem; font-weight: bold; border-radius: 30px; letter-spacing: 0.05em; transition: background 0.4s; }
.post-date { font-size: 0.9rem; color: var(--text-sub); letter-spacing: 0.05em; font-family: monospace; }
.post-ttl { font-size: 1.4rem; font-weight: 700; line-height: 1.6; margin: 0; color: var(--text-main); transition: color 0.3s; }
.post-excerpt { font-size: 1rem; color: var(--text-sub); line-height: 1.8; margin: 20px 0 0 0; display: none; }

/* ページネーション */
.pagination-wrapper { margin-top: 80px; text-align: center; }
.pagination-wrapper a, .pagination-wrapper span { display: inline-block; padding: 16px 24px; margin: 0 4px; border: 1px solid var(--border); color: var(--text-main); text-decoration: none; border-radius: 8px; transition: all 0.3s; }
.pagination-wrapper a:hover { background: var(--bg-gray); }
.pagination-wrapper span.current { background: var(--accent-navy); color: #fff; border-color: var(--accent-navy); }

/* ==========================================================================
   ▼ 【画像なし】 1行1個・1カラム専用（Design 01 〜 20）
   ========================================================================== */
.design01 .post-img, .design02 .post-img, .design03 .post-img, .design04 .post-img, .design05 .post-img, 
.design06 .post-img, .design07 .post-img, .design08 .post-img, .design09 .post-img, .design10 .post-img,
.design11 .post-img, .design12 .post-img, .design13 .post-img, .design14 .post-img, .design15 .post-img,
.design16 .post-img, .design17 .post-img, .design18 .post-img, .design19 .post-img, .design20 .post-img { display: none !important; }

/* 1カラム固定強制＆内側の上下余白を少し狭く調整 */
[class*="design0"], .design10, .design11, .design12, .design13, .design14, .design15, .design16, .design17, .design18, .design19, .design20 { 
    .post-list-container { grid-template-columns: 1fr !important; gap: 24px; }
    .post-txt { padding: 24px 40px; }
    .post-excerpt { display: block; }
}
.design01 .post-list-container, .design04 .post-list-container, .design06 .post-list-container, .design08 .post-list-container, .design10 .post-list-container, .design13 .post-list-container, .design20 .post-list-container { gap: 0; }

/* 01: ミニマル・ボーダー */
.design01 .custom-post-item { border-bottom: 1px solid var(--border); border-radius: 0; }
.design01 .post-link { padding: 30px 40px; display: flex; justify-content: space-between; align-items: center; transition: background 0.4s; }
.design01 .post-txt { padding: 0; flex-grow: 1; padding-right: 60px; }
.design01 .post-link::after { content: '→'; font-size: 2rem; color: #ccc; transition: transform 0.4s, color 0.4s; }
.design01 .custom-post-item:hover .post-link { background: #fafbfc; padding-left: 60px; }
.design01 .custom-post-item:hover .post-link::after { transform: translateX(10px); color: var(--accent-blue); }

/* 02: フローティング・ホワイトボックス */
.design02 .custom-post-item { background: #fff; box-shadow: 0 15px 40px rgba(0,0,0,0.04); border: 1px solid transparent; }
.design02 .custom-post-item:hover { transform: translateY(-10px); box-shadow: 0 25px 60px rgba(0,0,0,0.08); border-color: var(--accent-blue); }

/* 03: ダークモード・スペース */
.design03 .post-list-wrapper { background: #111; padding: 80px 5%; border-radius: 24px; }
.design03 .custom-post-item { border-bottom: 1px solid #333; border-radius: 0; }
.design03 .post-txt { padding: 30px 20px; }
.design03 .post-ttl { color: #fff; font-size: 1.6rem; }
.design03 .post-cat { background: transparent; border: 1px solid #555; color: #aaa; }
.design03 .post-excerpt { color: #888; }
.design03 .custom-post-item:hover .post-ttl { color: var(--accent-blue); text-shadow: 0 0 20px rgba(0,159,232,0.4); transform: translateX(15px); }

/* 04: レフト・アクセントライン */
.design04 .custom-post-item { border-left: 8px solid var(--bg-gray); margin-bottom: 20px; border-radius: 0; }
.design04 .post-link { padding: 30px 60px; background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.02); transition: all 0.4s; }
.design04 .post-txt { padding: 0; }
.design04 .custom-post-item:hover { border-left-color: var(--accent-navy); }
.design04 .custom-post-item:hover .post-link { transform: translateX(15px); box-shadow: 0 10px 30px rgba(0,64,151,0.1); }

/* 05: タイポグラフィ・センター */
.design05 .post-txt { padding: 40px 60px; text-align: center; background: #fff; border-radius: 16px; border: 1px solid var(--border); }
.design05 .post-meta { justify-content: center; margin-bottom: 20px; }
.design05 .post-ttl { font-family: "Shippori Mincho", serif; font-size: 2.2rem; margin-bottom: 15px; }
.design05 .custom-post-item:hover .post-txt { background: var(--accent-navy); border-color: var(--accent-navy); }
.design05 .custom-post-item:hover .post-ttl, .design05 .custom-post-item:hover .post-excerpt, .design05 .custom-post-item:hover .post-date { color: #fff; }
.design05 .custom-post-item:hover .post-cat { background: #fff; color: var(--accent-navy); }

/* 06: スプリット・レイアウト */
.design06 .post-txt { display: flex; gap: 60px; padding: 30px 40px; border-bottom: 1px solid var(--border); }
.design06 .post-meta { width: 200px; flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 15px; }
.design06 .post-ttl { font-size: 1.8rem; margin-bottom: 15px; }
.design06 .custom-post-item:hover .post-txt { background: #fafafa; }
.design06 .custom-post-item:hover .post-ttl { color: var(--accent-blue); }

/* 07: ゆったりとしたタイムライン */
.design07 .post-list-container { border-left: 2px solid var(--border); padding-left: 50px; }
.design07 .custom-post-item::before { content:''; position: absolute; left: -59px; top: 40px; width: 16px; height: 16px; background: #ddd; border-radius: 50%; transition: all 0.4s; }
.design07 .post-txt { padding: 30px 40px; background: #fff; border-radius: 12px; border: 1px solid var(--border); }
.design07 .custom-post-item:hover::before { background: var(--accent-blue); box-shadow: 0 0 0 8px rgba(0,159,232,0.2); transform: scale(1.3); }
.design07 .custom-post-item:hover .post-txt { border-color: var(--accent-blue); }

/* 08: シック・コーポレートリスト */
.design08 .custom-post-item { border-bottom: 1px solid var(--border); border-radius: 0; }
.design08 .post-link { display: flex; justify-content: space-between; align-items: center; padding: 25px 20px; transition: all 0.4s; }
.design08 .post-txt { display: contents; }
.design08 .post-meta { flex-direction: column; align-items: flex-start; width: 150px; flex-shrink: 0; margin: 0; }
.design08 .post-cat { background: transparent; color: var(--accent-navy); border: 1px solid var(--accent-navy); padding: 4px 10px; }
.design08 .post-ttl { font-size: 1.5rem; flex-grow: 1; padding-left: 30px; }
.design08 .custom-post-item:hover .post-link { background: var(--bg-gray); padding-left: 40px; border-bottom-color: var(--accent-blue); }
.design08 .custom-post-item:hover .post-cat { background: var(--accent-navy); color: #fff; }

/* 09: マガジン・ナンバリング */
.design09 .post-list-container { counter-reset: list-num; }
.design09 .post-txt { position: relative; padding: 40px 60px 40px 120px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.design09 .custom-post-item::before { counter-increment: list-num; content: counter(list-num, decimal-leading-zero); position: absolute; left: 30px; top: 30px; font-size: 4.5rem; font-weight: 900; color: var(--bg-gray); transition: color 0.4s; z-index: 0; }
.design09 .post-meta, .design09 .post-ttl, .design09 .post-excerpt { position: relative; z-index: 1; }
.design09 .custom-post-item:hover::before { color: var(--accent-navy); opacity: 0.1; }
.design09 .custom-post-item:hover .post-txt { transform: translateY(-5px); }

/* 10: モダン・プレイフル */
.design10 .custom-post-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: all 0.4s; }
.design10 .post-txt { padding: 30px 40px; position: relative; z-index: 1; }
.design10 .custom-post-item::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--border); transition: all 0.4s; }
.design10 .post-meta { margin-bottom: 12px; }
.design10 .custom-post-item:hover { background: #f0f8ff; border-color: #bce2ff; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,159,232,0.1); }
.design10 .custom-post-item:hover::before { background: var(--accent-blue); width: 8px; }

/* 11: エレガント・ミニマル */
.design11 .custom-post-item { border-radius: 0; }
.design11 .post-txt { padding: 30px 10px; border-bottom: 1px solid var(--border); position: relative; }
.design11 .post-ttl { font-size: 1.8rem; font-family: "Shippori Mincho", serif; background: linear-gradient(90deg, var(--text-main), var(--text-main)); background-size: 100% 100%; -webkit-background-clip: text; color: transparent; transition: background-image 0.4s; }
.design11 .custom-post-item:hover .post-ttl { background-image: linear-gradient(90deg, var(--accent-navy), var(--accent-blue)); }
.design11 .custom-post-item:hover .post-txt::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent-navy), var(--accent-blue)); }

/* 12: チケット・カットアウト */
.design12 .post-txt { background: #fff; padding: 40px 60px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-radius: 12px; }
.design12 .post-txt::before, .design12 .post-txt::after { content:''; position: absolute; top: 50%; width: 30px; height: 30px; background: #fff; border-radius: 50%; transform: translateY(-50%); box-shadow: inset 5px 0 10px rgba(0,0,0,0.05); }
.design12 .post-txt::before { left: -15px; box-shadow: inset -5px 0 10px rgba(0,0,0,0.05); } 
.design12 .post-txt::after { right: -15px; box-shadow: inset 5px 0 10px rgba(0,0,0,0.05); }
.design12 .custom-post-item:hover .post-txt { transform: scale(1.02); }

/* 13: グラデーションライン・ホバー */
.design13 .custom-post-item { border-radius: 0; }
.design13 .post-txt { padding: 30px 40px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; transition: all 0.4s; }
.design13 .post-txt::before { content: ''; position: absolute; bottom: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent-navy), var(--accent-blue)); transition: left 0.4s var(--ease-out); }
.design13 .custom-post-item:hover .post-txt { background-color: #fafafa; }
.design13 .custom-post-item:hover .post-txt::before { left: 0; }
.design13 .custom-post-item:hover .post-ttl { color: var(--accent-blue); }

/* 14: ダイナミック・スキュー */
.design14 .post-link { display: block; background: var(--bg-gray); padding: 40px 60px; transform: skew(-3deg); transition: all 0.5s; border-radius: 8px; }
.design14 .post-txt { padding: 0; transform: skew(3deg); }
.design14 .custom-post-item:hover .post-link { background: var(--accent-blue); color: #fff; transform: skew(-3deg) translateX(20px); }
.design14 .custom-post-item:hover .post-ttl, .design14 .custom-post-item:hover .post-date, .design14 .custom-post-item:hover .post-excerpt { color: #fff; }
.design14 .custom-post-item:hover .post-cat { background: #fff; color: var(--accent-blue); }

/* 15: グラスモーフィズム・パネル */
.design15 .post-list-wrapper { background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%); padding: 80px 5%; border-radius: 24px;}
.design15 .post-txt { background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.8); padding: 30px 40px; border-radius: 16px; }
.design15 .custom-post-item:hover .post-txt { background: rgba(255,255,255,0.8); box-shadow: 0 15px 30px rgba(0,0,0,0.1); transform: translateY(-5px); }

/* 16: エンジニア・コンソール */
.design16 .post-list-wrapper { background: #222; padding: 80px 5%; border-radius: 16px; }
.design16 .custom-post-item { border-radius: 0; }
.design16 .post-txt { padding: 25px 40px; border-bottom: 1px dashed #444; font-family: monospace; }
.design16 .post-ttl { color: #a9b7c6; font-family: monospace; font-size: 1.4rem; }
.design16 .post-cat { background: transparent; color: #cc7832; border: 1px solid #cc7832; }
.design16 .post-date { color: #6897bb; }
.design16 .post-excerpt { color: #808080; }
.design16 .custom-post-item:hover .post-txt { background: #2a2a2a; padding-left: 60px; }

/* 17: エレガント・ドロップキャップ */
.design17 .post-txt { padding: 30px 50px; border-bottom: 1px solid var(--border); }
.design17 .post-ttl { font-size: 1.6rem; display: block; line-height: 1.5; }
.design17 .post-ttl::first-letter { font-size: 4rem; color: var(--accent-navy); float: left; margin: 10px 20px 0 0; font-family: "Shippori Mincho", serif; line-height: 0.8; }
.design17 .custom-post-item:hover .post-txt { background: var(--bg-gray); border-radius: 16px; }

/* 18: アウトライン・インタラクション */
.design18 .post-txt { border: 2px solid var(--accent-navy); padding: 30px 40px; color: var(--accent-navy); transition: all 0.5s; border-radius: 16px; }
.design18 .post-ttl, .design18 .post-excerpt { color: inherit; }
.design18 .post-cat { background: var(--accent-navy); color: #fff; }
.design18 .custom-post-item:hover .post-txt { background: var(--accent-navy); color: #fff; box-shadow: 0 20px 40px rgba(0,64,151,0.2); transform: translateY(-5px); }
.design18 .custom-post-item:hover .post-cat { background: #fff; color: var(--accent-navy); }

/* 19: ダブル・レイヤー */
.design19 .post-txt { padding: 40px; position: relative; z-index: 2; box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-radius: 16px; background: #fff; }
.design19 .custom-post-item::before { content: ''; position: absolute; top: 15px; left: 15px; width: 100%; height: 100%; background: var(--accent-blue); z-index: 1; border-radius: 16px; transition: all 0.4s; }
.design19 .custom-post-item:hover::before { top: 25px; left: 25px; }
.design19 .custom-post-item:hover .post-txt { transform: translate(-5px, -5px); }

/* 20: ミニマル・タイポグラフィ */
.design20 .custom-post-item { border-bottom: 1px solid var(--border); border-radius: 0; }
.design20 .post-link { display: flex; align-items: flex-start; padding: 30px 20px; transition: all 0.4s; }
.design20 .post-txt { display: flex; width: 100%; padding: 0; align-items: baseline; }
.design20 .post-meta { width: 120px; flex-shrink: 0; flex-direction: column; align-items: flex-start; margin: 0; }
.design20 .post-date { font-size: 1.8rem; font-weight: 700; color: var(--border); font-family: sans-serif; letter-spacing: -1px; transition: color 0.4s; line-height: 1; margin-bottom: 10px; }
.design20 .post-cat { background: transparent; color: var(--text-sub); border: 1px solid var(--border); border-radius: 0; font-size: 0.7rem; padding: 4px 8px; }
.design20 .post-ttl { font-size: 1.5rem; flex-grow: 1; padding-left: 30px; font-weight: 700; }
.design20 .custom-post-item:hover .post-link { background-color: var(--bg-gray); padding-left: 30px; }
.design20 .custom-post-item:hover .post-date { color: var(--accent-blue); }
.design20 .custom-post-item:hover .post-ttl { color: var(--accent-navy); }


/* ==========================================================================
   ▼ 【画像あり】 グリッドデザイン（Design 21 〜 40）
   ========================================================================== */

/* デフォルト：3カラム */
[class*="design2"], [class*="design3"], .design40 { .post-list-container { grid-template-columns: repeat(3, 1fr); gap: 60px 40px; } }
/* 特定のデザインは4カラム */
.design22 .post-list-container, .design27 .post-list-container, .design31 .post-list-container, .design35 .post-list-container { grid-template-columns: repeat(4, 1fr); gap: 50px 30px;}

/* 21: スタンダード・モダン */
.design21 .custom-post-item { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.04); overflow: hidden; }
.design21 .post-img { border-radius: 0; }
.design21 .custom-post-item:hover { transform: translateY(-12px); box-shadow: 0 25px 50px rgba(0,0,0,0.08); }
.design21 .custom-post-item:hover .post-img img { transform: scale(1.05); }

/* 22: マガジン・スクエア */
.design22 .post-img { border-radius: 8px; margin-bottom: 25px; }
.design22 .post-img img { aspect-ratio: 1/1; }
.design22 .post-txt { padding: 0 10px; }
.design22 .post-cat { background: transparent; color: var(--accent-navy); border: 1px solid var(--border); }
.design22 .post-ttl { font-size: 1.15rem; }
.design22 .custom-post-item:hover .post-ttl { color: var(--accent-blue); }
.design22 .custom-post-item:hover .post-img img { transform: scale(1.08); }

/* 23: シネマ・ダークオーバーレイ */
.design23 .post-link { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3/4; display: flex; align-items: flex-end; }
.design23 .post-img { position: absolute; inset: 0; border-radius: 0; }
.design23 .post-img img { height: 100%; }
.design23 .post-img::after { content:''; position: absolute; inset:0; background: linear-gradient(to top, rgba(0,64,151,0.95) 0%, transparent 70%); opacity: 0.8; transition: opacity 0.5s; }
.design23 .post-txt { position: relative; z-index: 10; padding: 50px 40px; color: #fff; width: 100%; transform: translateY(20px); transition: transform 0.5s var(--ease-out); }
.design23 .post-ttl { color: #fff; font-size: 1.4rem; }
.design23 .post-date { color: rgba(255,255,255,0.7); }
.design23 .custom-post-item:hover .post-img img { transform: scale(1.1); }
.design23 .custom-post-item:hover .post-txt { transform: translateY(0); }

/* 24: マガジン・オーバーラップ */
.design24 .post-list-container { gap: 60px 30px; }
.design24 .post-img { border-radius: 12px; margin-bottom: -50px; position: relative; z-index: 1; }
.design24 .post-txt { background: #fff; padding: 30px; width: 85%; margin: 0 auto; position: relative; z-index: 2; border-radius: 8px; box-shadow: 0 15px 30px rgba(0,0,0,0.08); transition: transform 0.4s; }
.design24 .custom-post-item:hover .post-txt { transform: translateY(-15px); }
.design24 .custom-post-item:hover .post-img img { transform: scale(1.05); }

/* 25: シック・ホバーカラー */
.design25 .custom-post-item { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.04); }
.design25 .post-img { border-radius: 0; }
.design25 .post-txt { padding: 35px 30px; transition: background 0.4s; }
.design25 .custom-post-item:hover .post-txt { background: var(--accent-navy); }
.design25 .custom-post-item:hover .post-ttl, .design25 .custom-post-item:hover .post-date { color: #fff; }
.design25 .custom-post-item:hover .post-cat { background: #fff; color: var(--accent-navy); }
.design25 .custom-post-item:hover .post-img img { transform: scale(1.08); }

/* 26: カラー・リビール＆フロート */
.design26 .custom-post-item { background-color: #fff; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: all 0.4s; overflow: hidden; }
.design26 .post-img { border-radius: 0; position: relative; }
.design26 .post-img::before { content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,0.2); transition: opacity 0.4s; z-index: 1; }
.design26 .post-img img { filter: grayscale(100%); transition: filter 0.4s, transform 0.6s; }
.design26 .post-txt { padding: 30px; }
.design26 .custom-post-item:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.design26 .custom-post-item:hover .post-img::before { opacity: 0; }
.design26 .custom-post-item:hover .post-img img { filter: grayscale(0%); transform: scale(1.05); }
.design26 .custom-post-item:hover .post-ttl { color: var(--accent-blue); }

/* 27: モノクローム・アート */
.design27 .post-img img { filter: grayscale(100%); transition: filter 0.8s, transform 0.8s; aspect-ratio: 3/4; }
.design27 .post-txt { padding: 25px 10px; text-align: center; }
.design27 .post-meta { justify-content: center; }
.design27 .post-ttl { font-family: "Shippori Mincho", serif; }
.design27 .custom-post-item:hover .post-img img { filter: grayscale(0%); transform: scale(1.05); }

/* 28: モダン・オフセット */
.design28 .custom-post-item { background: transparent; padding-top: 20px; }
.design28 .post-link { display: block; position: relative; }
.design28 .post-img { border-radius: 8px; width: 90%; margin-left: 10%; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.4s; }
.design28 .post-txt { background: #fff; padding: 25px 30px; border-radius: 8px; width: 85%; margin-top: -40px; position: relative; z-index: 2; box-shadow: 0 5px 20px rgba(0,0,0,0.03); transition: all 0.4s; }
.design28 .post-ttl { font-size: 1.3rem; }
.design28 .post-cat { background: var(--accent-navy); color: #fff; }
.design28 .custom-post-item:hover .post-img { transform: translateY(-5px); }
.design28 .custom-post-item:hover .post-txt { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); }

/* 29: ミニマル・アウトライン＆アクセントボーダー */
.design29 .custom-post-item { background-color: #fff; border: 1px solid var(--border); border-radius: 12px; transition: all 0.4s; position: relative; }
.design29 .custom-post-item::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 4px; background: linear-gradient(90deg, var(--accent-navy), var(--accent-blue)); transition: width 0.4s var(--ease-out); border-radius: 4px 4px 0 0; }
.design29 .post-img { border-radius: 11px 11px 0 0; }
.design29 .post-txt { padding: 30px; }
.design29 .custom-post-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-color: transparent; }
.design29 .custom-post-item:hover::before { width: 100%; }
.design29 .custom-post-item:hover .post-ttl { color: var(--accent-blue); }

/* 30: 斜めクリップ・ダイナミック */
.design30 .post-img { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); margin-bottom: 20px; transition: clip-path 0.5s; border-radius: 0; }
.design30 .post-txt { padding: 20px 30px; }
.design30 .custom-post-item:hover .post-img { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%); }
.design30 .custom-post-item:hover .post-img img { transform: scale(1.08); }

/* 31: サイバー・グロウ */
.design31 .post-link { background: #fff; padding: 6px; position: relative; border-radius: 16px; overflow: hidden; z-index: 1; display: block;}
.design31 .post-link::before { content:''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(transparent, transparent, transparent, var(--accent-blue)); animation: rotate-bg 4s linear infinite; z-index: -2; opacity: 0; transition: opacity 0.4s; }
.design31 .post-link::after { content:''; position: absolute; inset: 4px; background: #fff; z-index: -1; border-radius: 12px; }
.design31 .post-img { border-radius: 8px 8px 0 0; }
.design31 .post-txt { padding: 30px; }
.design31 .custom-post-item:hover .post-link::before { opacity: 1; }
@keyframes rotate-bg { 100% { transform: rotate(1turn); } }

/* 32: スプリット・カラーブロック */
.design32 .custom-post-item { border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 15px 40px rgba(0,0,0,0.06); }
.design32 .post-img { border-radius: 0; }
.design32 .post-txt { background: var(--accent-navy); padding: 50px 40px; flex-grow: 1; transition: background 0.4s; }
.design32 .post-ttl { color: #fff; }
.design32 .post-cat { background: #fff; color: var(--accent-navy); }
.design32 .post-date { color: rgba(255,255,255,0.7); }
.design32 .custom-post-item:hover { transform: translateY(-10px); }
.design32 .custom-post-item:hover .post-txt { background: var(--accent-blue); }

/* 33: オーバーレイ・スライドアップ */
.design33 .post-link { position: relative; border-radius: 16px; overflow: hidden; display: block; aspect-ratio: 1/1; }
.design33 .post-img { border-radius: 0; height: 100%; position: absolute; inset: 0; }
.design33 .post-img img { height: 100%; transition: transform 0.6s; }
.design33 .post-txt { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,64,151,0.9) 0%, rgba(0,159,232,0.6) 100%); padding: 30px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; transform: translateY(100%); transition: transform 0.5s var(--ease-out); z-index: 2; }
.design33 .post-ttl { color: #fff; font-size: 1.4rem; transform: translateY(20px); transition: transform 0.5s 0.1s var(--ease-out); }
.design33 .post-date { color: rgba(255,255,255,0.8); transform: translateY(20px); transition: transform 0.5s 0.15s var(--ease-out); }
.design33 .post-cat { background-color: #fff; color: var(--accent-navy); transform: translateY(20px); transition: transform 0.5s 0.2s var(--ease-out); }
.design33 .custom-post-item:hover .post-img img { transform: scale(1.1); }
.design33 .custom-post-item:hover .post-txt { transform: translateY(0); }
.design33 .custom-post-item:hover .post-ttl, .design33 .custom-post-item:hover .post-date, .design33 .custom-post-item:hover .post-cat { transform: translateY(0); }

/* 34: ボーダー・トレース・アニメーション */
.design34 .post-link { padding: 30px; position: relative; }
.design34 .post-txt { padding: 30px 10px 0; }
.design34 .post-link::before, .design34 .post-link::after { content: ''; position: absolute; width: 0; height: 2px; background: var(--accent-navy); transition: width 0.5s var(--ease-out); }
.design34 .post-link::before { top: 0; left: 0; }
.design34 .post-link::after { bottom: 0; right: 0; }
.design34 .custom-post-item:hover .post-link::before, .design34 .custom-post-item:hover .post-link::after { width: 100%; }
.design34 .custom-post-item:hover .post-img img { transform: scale(1.05); }

/* 35: フローティング・バッジ（PC4列） */
.design35 .post-list-container { gap: 50px 30px; }
.design35 .post-txt { padding: 30px 10px 0; position: relative; }
.design35 .post-cat { position: absolute; top: -30px; right: 20px; z-index: 10; box-shadow: 0 5px 15px rgba(0,0,0,0.15); transform: rotate(5deg); transition: transform 0.4s; padding: 8px 16px; font-size: 0.85rem; }
.design35 .custom-post-item:hover .post-cat { transform: rotate(0deg) scale(1.1); background: var(--accent-blue); }
.design35 .custom-post-item:hover .post-img img { transform: scale(1.05); }

/* 36: ホバー・リビール */
.design36 .post-link { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4/5; }
.design36 .post-img { border-radius: 0; height: 100%; }
.design36 .post-img img { height: 100%; }
.design36 .post-txt { position: absolute; inset: 0; background: rgba(0,64,151,0.95); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 50px 40px; transform: translateY(100%); transition: transform 0.5s var(--ease-out); }
.design36 .post-ttl { color: #fff; }
.design36 .post-cat { background: #fff; color: var(--accent-navy); }
.design36 .custom-post-item:hover .post-txt { transform: translateY(0); }

/* 37: フルブリード・ミニマル */
.design37 .custom-post-item { border-radius: 0; transition: all 0.4s; }
.design37 .post-img { border-radius: 8px; overflow: hidden; }
.design37 .post-img img { transition: transform 0.6s var(--ease-out); }
.design37 .post-txt { padding: 25px 0 10px; background: transparent; }
.design37 .post-ttl { font-size: 1.4rem; color: var(--text-main); font-weight: 700; transition: color 0.3s; line-height: 1.5; }
.design37 .post-cat { background: transparent; color: var(--accent-blue); padding: 0; margin-right: 15px; }
.design37 .post-date { color: #999; }
.design37 .custom-post-item:hover .post-img img { transform: scale(1.04); }
.design37 .custom-post-item:hover .post-ttl { color: var(--accent-blue); }

/* 38: コーポレート・アンダーライン・アニメーション */
.design38 .custom-post-item { border-radius: 0; background-color: #fff; border: 1px solid var(--border); transition: all 0.4s; }
.design38 .post-img { border-radius: 0; }
.design38 .post-txt { padding: 30px; }
.design38 .post-ttl { font-family: "Shippori Mincho", serif; font-size: 1.4rem; position: relative; display: inline-block; padding-bottom: 5px; }
.design38 .post-ttl::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent-navy); transition: width 0.4s var(--ease-out); }
.design38 .custom-post-item:hover { border-color: var(--accent-navy); box-shadow: 0 10px 25px rgba(0,64,151,0.05); }
.design38 .custom-post-item:hover .post-img img { filter: contrast(1.1) brightness(0.9); }
.design38 .custom-post-item:hover .post-ttl::after { width: 100%; }

/* 39: プレイフル・フローティングバッジ */
.design39 .post-link { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.04); position: relative; display: block; }
.design39 .post-img { border-radius: 0; }
.design39 .post-cat { position: absolute; top: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.7rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); padding: 0; line-height: 1.2; transition: transform 0.4s; z-index: 10;}
.design39 .post-txt { padding: 30px; }
.design39 .custom-post-item:hover .post-link { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.design39 .custom-post-item:hover .post-cat { transform: scale(1.1) rotate(10deg); background: var(--accent-blue); }

/* 40: 3Dパースペクティブ */
.design40 .post-list-container { perspective: 1200px; }
.design40 .custom-post-item { transform-style: preserve-3d; transform: rotateX(8deg); transition: transform 0.6s var(--ease-out); box-shadow: 0 25px 40px rgba(0,0,0,0.08); border-radius: 16px; background: #fff; }
.design40 .post-img { border-radius: 16px 16px 0 0; }
.design40 .post-txt { padding: 40px; }
.design40 .custom-post-item:hover { transform: rotateX(0deg) translateY(-15px); box-shadow: 0 35px 60px rgba(0,0,0,0.12); }


/* ==========================================================================
   ▼ 【画像あり・追加】 グリッドデザイン（Design 41 〜 60）
   ========================================================================== */

/* 追加分共通：PC3カラム */
[class*="design4"], [class*="design5"], .design60 { .post-list-container { grid-template-columns: repeat(3, 1fr); gap: 60px 40px; } }
/* 4カラム指定 */
.design41 .post-list-container, .design45 .post-list-container, .design48 .post-list-container, .design51 .post-list-container, .design54 .post-list-container, .design58 .post-list-container { grid-template-columns: repeat(4, 1fr); gap: 50px 30px; }
/* ★★★ [NEW] 2カラム指定 (PC) ★★★ */
.design50 .post-list-container, .design52 .post-list-container { grid-template-columns: repeat(2, 1fr) !important; gap: 60px 40px !important; }

/* 41: クリーン・マイクロインタラクション */
.design41 .custom-post-item { background: #fff; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; transition: all 0.3s ease; }
.design41 .post-img { border-radius: 0; }
.design41 .post-txt { padding: 25px; transition: background 0.3s; }
.design41 .post-cat { background: transparent; color: var(--accent-navy); border: 1px solid var(--accent-navy); padding: 4px 10px; font-weight: bold; border-radius: 2px; }
.design41 .custom-post-item:hover { border-color: var(--accent-blue); box-shadow: 0 10px 30px rgba(0,159,232,0.08); }
.design41 .custom-post-item:hover .post-img img { transform: scale(1.03); }
.design41 .custom-post-item:hover .post-txt { background: #fafbfc; }

/* 42: クリーン・カード */
.design42 .post-list-wrapper { background: #f9f9f9; padding: 100px 5%; }
.design42 .custom-post-item { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: all 0.4s var(--ease-out); }
.design42 .post-img { border-radius: 0; border-bottom: 1px solid var(--border); }
.design42 .post-txt { padding: 30px; }
.design42 .post-cat { background: transparent; color: var(--accent-navy); border: 1px solid var(--accent-navy); border-radius: 4px; padding: 4px 10px; }
.design42 .custom-post-item:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0,0,0,0.06); border-color: transparent; }
.design42 .custom-post-item:hover .post-img img { transform: scale(1.05); }

/* 43: シャープ・グリッド */
.design43 .custom-post-item { border: 1px solid #ccc; border-radius: 0; transition: border-color 0.4s, transform 0.4s; }
.design43 .post-img { border-radius: 0; }
.design43 .post-txt { padding: 25px; }
.design43 .post-cat { background: #eee; color: #333; border-radius: 0; }
.design43 .custom-post-item:hover { border-color: #111; transform: translateY(-4px); }
.design43 .custom-post-item:hover .post-ttl { color: var(--accent-navy); }

/* 44: マガジン・クラシック */
.design44 .custom-post-item { border-radius: 0; position: relative; }
.design44 .post-img { border-radius: 0; margin-bottom: 15px; }
.design44 .post-txt { padding: 10px 0; }
.design44 .post-cat { position: absolute; top: 0; left: 0; background: #111; color: #fff; border-radius: 0; padding: 8px 15px; z-index: 10; }
.design44 .custom-post-item:hover .post-img img { transform: scale(1.03); filter: brightness(0.9); }
.design44 .custom-post-item:hover .post-ttl { color: var(--accent-blue); text-decoration: underline; }

/* 45: ソリッド・ツートーン */
.design45 .custom-post-item { background: var(--text-main); border-radius: 8px; overflow: hidden; transition: all 0.4s; display: flex; flex-direction: column; }
.design45 .post-img { border-radius: 0; }
.design45 .post-img img { opacity: 0.9; transition: opacity 0.4s, transform 0.6s; }
.design45 .post-txt { padding: 30px; flex-grow: 1; }
.design45 .post-ttl, .design45 .post-date { color: #fff; }
.design45 .post-cat { background: #fff; color: var(--text-main); }
.design45 .custom-post-item:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }
.design45 .custom-post-item:hover .post-img img { opacity: 1; transform: scale(1.05); }
.design45 .custom-post-item:hover .post-ttl { color: var(--accent-blue); }

/* 46: スプリット・トーン */
.design46 .post-list-wrapper { background: #f4f7f9; }
.design46 .custom-post-item { transition: transform 0.4s; }
.design46 .post-img { border-radius: 8px 8px 0 0; }
.design46 .post-txt { background: #fff; padding: 30px; border-radius: 0 0 8px 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.design46 .custom-post-item:hover { transform: translateY(-6px); }
.design46 .custom-post-item:hover .post-txt { box-shadow: 0 15px 30px rgba(0,0,0,0.05); }
.design46 .custom-post-item:hover .post-ttl { color: var(--accent-navy); }

/* 47: アウトライン・オフセット */
.design47 .custom-post-item { position: relative; border-radius: 0; z-index: 1; }
.design47 .custom-post-item::after { content: ''; position: absolute; top: 12px; left: 12px; width: 100%; height: 100%; border: 1px solid var(--border); z-index: -1; transition: all 0.4s; }
.design47 .post-img { border-radius: 0; }
.design47 .post-txt { padding: 25px 0 0 0; background: transparent; }
.design47 .custom-post-item:hover { transform: translate(-4px, -4px); }
.design47 .custom-post-item:hover::after { top: 16px; left: 16px; border-color: var(--accent-blue); }
.design47 .custom-post-item:hover .post-ttl { color: var(--accent-blue); }

/* 48: コーポレート・スタンダード */
.design48 .custom-post-item { background: #fff; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; transition: all 0.3s; }
.design48 .post-img { border-radius: 0; }
.design48 .post-txt { padding: 25px; }
.design48 .post-ttl { position: relative; padding-bottom: 15px; margin-bottom: 15px; font-weight: bold; }
.design48 .post-ttl::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 3px; background: var(--accent-blue); transition: width 0.3s; }
.design48 .post-cat { background: var(--accent-navy); color: #fff; border-radius: 2px; }
.design48 .custom-post-item:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.06); }
.design48 .custom-post-item:hover .post-ttl::after { width: 50px; }

/* 49: タイポグラフィ・ボトムライン */
.design49 .custom-post-item { background: transparent; border-radius: 0; transition: transform 0.3s; }
.design49 .post-img { border-radius: 4px; margin-bottom: 20px; }
.design49 .post-txt { padding: 0 10px 20px 10px; border-bottom: 3px solid var(--border); transition: border-color 0.3s; }
.design49 .post-cat { background: #e2e8f0; color: #333; font-weight: bold; }
.design49 .custom-post-item:hover { transform: translateY(-5px); }
.design49 .custom-post-item:hover .post-img img { filter: contrast(1.1); }
.design49 .custom-post-item:hover .post-txt { border-bottom-color: var(--accent-blue); }

/* ★★★ [NEW] 完全に作り直したデザイン 50 ★★★ */
/* 50: ビッグ・プロモカード（大きく見せる2列用、ホバーでエレベート） */
.design50 .custom-post-item { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.04); border: 1px solid var(--border); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.design50 .post-img { border-radius: 0; border-bottom: 1px solid var(--border); }
.design50 .post-img img { aspect-ratio: 16/9; transition: transform 0.6s; }
.design50 .post-txt { padding: 40px; transition: background 0.4s; }
.design50 .post-cat { background: var(--bg-gray); color: var(--accent-navy); border-radius: 4px; font-weight: bold; }
.design50 .post-ttl { font-size: 1.6rem; margin-top: 10px; }
.design50 .custom-post-item:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.08); border-color: transparent; }
.design50 .custom-post-item:hover .post-img img { transform: scale(1.05); }
.design50 .custom-post-item:hover .post-txt { background: #fafbfc; }

/* 51: ミニマル・ボーダーレス */
.design51 .custom-post-item { background: transparent; border-radius: 0; }
.design51 .post-img { border-radius: 0; margin-bottom: 20px; }
.design51 .post-txt { padding: 0; }
.design51 .post-cat { border-bottom: 1px solid var(--text-main); background: transparent; color: var(--text-main); border-radius: 0; padding: 0 0 2px 0; }
.design51 .custom-post-item:hover .post-img img { filter: brightness(0.8); }
.design51 .custom-post-item:hover .post-ttl { opacity: 0.7; }

/* ★★★ [NEW] 完全に作り直したデザイン 52 ★★★ */
/* 52: スプリット・リスト（左に画像、右にテキストの2列用） */
.design52 .post-link { display: flex; background: #fff; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; transition: all 0.3s; height: 100%; align-items: stretch; }
.design52 .post-img { width: 45%; flex-shrink: 0; border-radius: 0; }
.design52 .post-img img { height: 100%; object-fit: cover; transition: transform 0.5s; }
.design52 .post-txt { width: 55%; padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.design52 .post-cat { background: transparent; color: var(--accent-navy); padding: 0; border-bottom: 2px solid var(--accent-navy); border-radius: 0; display: inline-block; margin-right: auto; }
.design52 .post-ttl { font-size: 1.3rem; line-height: 1.5; margin-top: 10px; }
.design52 .custom-post-item:hover .post-link { box-shadow: 0 10px 25px rgba(0,0,0,0.06); border-color: var(--accent-blue); }
.design52 .custom-post-item:hover .post-img img { transform: scale(1.05); }

/* 53: ソリッド・シャドウ */
.design53 .custom-post-item { background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 8px 8px 0 #e2e8f0; transition: all 0.3s; overflow: hidden; }
.design53 .post-img { border-radius: 0; }
.design53 .post-txt { padding: 25px; }
.design53 .custom-post-item:hover { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--accent-blue); border-color: var(--accent-blue); }
.design53 .custom-post-item:hover .post-ttl { color: var(--accent-blue); }

/* 54: ボトム・ボーダー */
.design54 .custom-post-item { background: #fff; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); border-bottom: 4px solid var(--border); transition: all 0.3s; overflow: hidden; }
.design54 .post-txt { padding: 20px; }
.design54 .post-cat { background: transparent; color: var(--accent-navy); padding: 0; font-weight: bold; }
.design54 .custom-post-item:hover { border-bottom-color: var(--accent-navy); transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,0.08); }
.design54 .custom-post-item:hover .post-img img { transform: scale(1.05); }

/* 55: ミニマル・フローティング */
.design55 .custom-post-item { background: transparent; }
.design55 .post-img { border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.5s, box-shadow 0.5s; margin-bottom: 25px; }
.design55 .post-txt { padding: 0 10px; }
.design55 .post-cat { background: transparent; border: 1px solid var(--border); color: var(--text-main); }
.design55 .custom-post-item:hover .post-img { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
.design55 .custom-post-item:hover .post-ttl { color: var(--accent-blue); }

/* 56: レイヤード・バックグラウンド */
.design56 .custom-post-item { position: relative; padding-top: 15px; padding-left: 15px; background: transparent; z-index: 1; transition: transform 0.3s; }
.design56 .custom-post-item::before { content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 15px); height: calc(100% - 15px); background: var(--bg-gray); border-radius: 8px; z-index: -1; transition: all 0.3s; }
.design56 .post-link { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: block; height: 100%; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.design56 .post-img { border-radius: 0; }
.design56 .post-txt { padding: 25px; }
.design56 .custom-post-item:hover { transform: translate(-5px, -5px); }
.design56 .custom-post-item:hover::before { background: #e6f2ff; transform: translate(10px, 10px); }

/* 57: マガジン・フル */
.design57 .custom-post-item { border-radius: 0; transition: transform 0.4s; }
.design57 .post-img { border-radius: 0; margin-bottom: 15px; }
.design57 .post-img img { aspect-ratio: 4/3; }
.design57 .post-txt { padding: 5px 0; }
.design57 .post-ttl { font-size: 1.2rem; line-height: 1.4; }
.design57 .post-meta { margin-bottom: 10px; }
.design57 .post-cat { background: transparent; color: var(--accent-blue); padding: 0; }
.design57 .custom-post-item:hover { transform: translateY(-5px); }
.design57 .custom-post-item:hover .post-img img { filter: brightness(0.9); }

/* 58: コーポレート・トップライン */
.design58 .custom-post-item { background: #fff; border-top: 4px solid var(--border); border-radius: 0; box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: all 0.4s; overflow: hidden; }
.design58 .post-img { border-radius: 0; }
.design58 .post-txt { padding: 30px 25px; }
.design58 .post-cat { background: var(--text-main); color: #fff; border-radius: 0; padding: 4px 12px; }
.design58 .custom-post-item:hover { border-top-color: var(--accent-blue); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.design58 .custom-post-item:hover .post-img img { transform: scale(1.05); }

/* 59: ライン・ディバイダー */
.design59 .custom-post-item { background: transparent; transition: opacity 0.3s; }
.design59 .post-img { border-radius: 0; }
.design59 .post-txt { padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 20px; }
.design59 .post-meta { margin-bottom: 15px; }
.design59 .post-cat { background: #111; color: #fff; border-radius: 0; }
.design59 .custom-post-item:hover { opacity: 0.8; }
.design59 .custom-post-item:hover .post-ttl { text-decoration: underline; }

/* 60: プロフェッショナル・シャドウ */
.design60 .custom-post-item { background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid #f0f0f0; transition: all 0.4s ease; overflow: hidden; }
.design60 .post-img { border-radius: 0; }
.design60 .post-txt { padding: 30px 25px; }
.design60 .post-ttl { font-size: 1.3rem; }
.design60 .post-cat { background: var(--bg-gray); color: var(--text-main); border-radius: 2px; border: 1px solid var(--border); }
.design60 .custom-post-item:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); border-color: #e0e0e0; }
.design60 .custom-post-item:hover .post-img img { transform: scale(1.03); }


/* ==========================================================================
   レスポンシブ (タブレット・スマホ最適化)
   ========================================================================== */

/* タブレット (〜1024px) */
@media (max-width: 1024px) {
    /* 全体の左右余白を保つ */
    .post-list-wrapper { padding: 80px 5%; }
    
    /* 画像あり (21〜60): 基本2カラムへ */
    .design21 .post-list-container, .design22 .post-list-container, .design23 .post-list-container,
    .design24 .post-list-container, .design25 .post-list-container, .design26 .post-list-container,
    .design27 .post-list-container, .design28 .post-list-container, .design29 .post-list-container,
    .design30 .post-list-container, .design31 .post-list-container, .design32 .post-list-container,
    .design33 .post-list-container, .design34 .post-list-container, .design35 .post-list-container,
    .design36 .post-list-container, .design37 .post-list-container, .design38 .post-list-container,
    .design39 .post-list-container, .design40 .post-list-container,
    .design41 .post-list-container, .design42 .post-list-container, .design43 .post-list-container,
    .design44 .post-list-container, .design45 .post-list-container, .design46 .post-list-container,
    .design47 .post-list-container, .design48 .post-list-container, .design49 .post-list-container,
    .design50 .post-list-container, .design51 .post-list-container, .design52 .post-list-container,
    .design53 .post-list-container, .design54 .post-list-container, .design55 .post-list-container,
    .design56 .post-list-container, .design57 .post-list-container, .design58 .post-list-container,
    .design59 .post-list-container, .design60 .post-list-container { 
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 60px 40px; 
    }
    
    /* スプリットレイアウト(06)の調整 */
    .design06 .post-txt { gap: 40px; padding: 30px; }
    
    /* 修正デザインの調整 */
    .design20 .post-txt { padding: 30px 40px; }
}

/* スマートフォン (〜768px) */
@media (max-width: 768px) {
    /* 全て1カラムへ強制、余白最適化 */
    .post-list-wrapper { padding: 60px 5%; margin: 0; }
    .post-list-container { grid-template-columns: 1fr !important; gap: 40px !important; }
    
    /* 全体フォントサイズ・内余白の最適化 */
    .post-txt { padding: 25px 20px !important; }
    .post-ttl { font-size: 1.25rem !important; }
    
    /* ▼ 画像なし (01〜20) SP調整 */
    .design01 .post-link { flex-direction: column; gap: 20px; padding: 25px 20px; }
    .design01 .post-txt { padding-right: 0; }
    .design02 .custom-post-item { padding: 0; }
    .design03 .post-list-wrapper { padding: 40px 5%; border-radius: 0; } 
    .design04 .post-link { padding: 30px 20px; }
    .design05 .post-ttl { font-size: 1.8rem !important; }
    .design06 .post-txt { flex-direction: column; gap: 20px; }
    .design06 .post-meta { width: 100%; flex-direction: row; }
    .design07 .post-list-container { margin-left: 10px; padding-left: 30px; }
    .design07 .custom-post-item::before { left: -39px; }
    .design08 .post-link { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
    .design08 .post-meta { width: 100%; flex-direction: row; margin-bottom: 0; }
    .design08 .post-ttl { padding-left: 0; font-size: 1.3rem !important; }
    .design09 .post-txt { padding: 80px 20px 30px 20px !important; }
    .design09 .custom-post-item::before { left: 20px; top: 20px; font-size: 4rem; }
    .design10 .post-txt { padding: 20px !important; }
    .design11 .post-txt { padding: 25px 15px !important; }
    .design11 .post-ttl { font-size: 1.5rem !important; }
    .design13 .post-link { flex-direction: column; }
    .design13 .post-meta { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px dashed var(--border); padding: 15px; }
    .design13 .post-cat { writing-mode: horizontal-tb; margin-bottom: 0; padding: 4px 12px; letter-spacing: normal; }
    .design13 .post-ttl { padding: 20px; font-size: 1.3rem !important; }
    .design14 .post-link { transform: none; padding: 30px 20px; }
    .design14 .post-txt, .design14 .post-meta, .design14 .post-ttl { transform: none; }
    .design14 .custom-post-item:hover .post-link { transform: translateX(10px); }
    .design15 .post-list-wrapper { padding: 40px 5%; border-radius: 0; }
    .design16 .post-list-wrapper { padding: 40px 5%; border-radius: 0; }
    .design20 .post-txt { flex-direction: column; }
    .design20 .post-meta { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 15px; margin-bottom: 15px; }
    .design20 .post-date { margin-bottom: 0; font-size: 1.4rem; }
    .design20 .post-ttl { padding-left: 0; }
    
    /* ▼ 画像あり (21〜40) SP調整 */
    .design24 .post-txt { margin: -30px 15px 0 15px; width: auto; padding: 20px !important; }
    .design25 .post-txt { padding: 25px 20px !important; }
    .design26 .post-txt { padding: 20px !important; }
    .design28 .post-txt { width: 95%; margin-top: -20px; padding: 20px 15px !important; }
    .design28 .post-img { width: 100%; margin-left: 0; }
    .design29 .post-txt { padding: 20px 15px 25px 15px !important; }
    .design31 .post-link { border-radius: 0 20px 0 20px; }
    .design31 .custom-post-item:hover .post-link { border-radius: 20px 0 20px 0; transform: translateY(-5px); }
    .design32 .post-txt { padding: 30px 20px !important; }
    .design33 .post-txt { padding: 20px !important; position: static; transform: none !important; backdrop-filter: none; background: rgba(255,255,255,0.95); border-top: 1px solid var(--border); }
    .design33 .post-link { aspect-ratio: auto; }
    .design33 .post-img { position: static; height: auto; }
    .design33 .custom-post-item:hover .post-txt { padding-bottom: 20px; }
    .design35 .post-txt { padding: 20px !important; }
    .design37 .post-txt { padding: 20px 0 0 !important; }
    .design38 .post-txt { padding: 20px !important; }
    .design39 .post-txt { padding: 20px 15px !important; }
    .design39 .post-cat { width: 50px; height: 50px; top: 10px; right: 10px; }
    .design40 .custom-post-item { transform: none !important; }
    .design40 .custom-post-item:hover { transform: translateY(-10px) !important; }
    
    /* ▼ 画像あり・追加 (41〜60) SP調整 */
    .design41 .post-txt { padding: 20px !important; }
    .design42 .post-list-wrapper { padding: 60px 5%; }
    .design42 .post-txt { padding: 20px !important; }
    .design43 .post-txt { padding: 15px !important; }
    .design45 .post-txt { padding: 20px !important; }
    .design46 .post-txt { padding: 20px !important; }
    .design47 .post-txt { padding: 20px 0 0 0 !important; }
    .design48 .post-txt { padding: 20px !important; }
    .design49 .custom-post-item { margin: 0; padding: 10px; }
    .design49 .post-txt { padding: 0 5px 15px 5px !important; }
    .design50 .post-txt { padding: 25px 20px !important; }
    .design51 .post-txt { padding: 0 !important; }
    .design52 .post-link { flex-direction: column; }
    .design52 .post-img { width: 100%; aspect-ratio: 16/9; }
    .design52 .post-txt { width: 100%; padding: 20px !important; }
    .design53 .custom-post-item { box-shadow: 4px 4px 0 #e2e8f0; }
    .design54 .post-txt { padding: 15px !important; }
    .design55 .post-img { margin-bottom: 15px; }
    .design56 .custom-post-item { padding-top: 10px; padding-left: 10px; }
    .design56 .custom-post-item::before { width: calc(100% - 10px); height: calc(100% - 10px); }
    .design56 .post-txt { padding: 15px !important; }
    .design57 .post-txt { padding: 0 !important; }
    .design58 .post-txt { padding: 20px !important; }
    .design59 .post-txt { padding: 15px 0 !important; }
    .design60 .post-txt { padding: 20px 15px !important; }
}

/* ==========================================================================
   ▼ カテゴリータイトル デザイン（全30パターン・レスポンシブ対応）
   ========================================================================== */
.archive-header-wrapper { padding: 120px 5% 60px; width: 100%; box-sizing: border-box; }
.archive-header-wrapper .archive-main-title { margin: 0; line-height: 1.3; }

/* 01: シンプル・センター（標準） */
.cat-title-01 { text-align: center; }
.cat-title-01 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; color: var(--text-main); }

/* 02: ボトム・アクセントライン */
.cat-title-02 { text-align: center; }
.cat-title-02 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; color: var(--text-main); position: relative; display: inline-block; padding-bottom: 15px; }
.cat-title-02 .archive-main-title::after { content:''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: var(--accent-blue); }

/* 03: レフト・ボーダー (左寄せ) */
.cat-title-03 { text-align: left; max-width: 1200px; margin: 0 auto; }
.cat-title-03 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; color: var(--text-main); border-left: 8px solid var(--accent-navy); padding-left: 20px; }

/* 04: ダーク・ブロック */
.cat-title-04 { text-align: center; }
.cat-title-04 .archive-main-title { font-size: clamp(24px, 4vw, 40px); font-weight: bold; background: var(--text-main); color: #fff; display: inline-block; padding: 20px 50px; border-radius: 8px; letter-spacing: 0.05em; }

/* 05: エレガント・セリフ（上下ライン） */
.cat-title-05 { text-align: center; }
.cat-title-05 .archive-main-title { font-family: "Shippori Mincho", serif; font-size: clamp(28px, 6vw, 54px); font-weight: normal; color: var(--accent-navy); display: inline-block; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); letter-spacing: 0.1em; }

/* 06: グラデーション・テキスト */
.cat-title-06 { text-align: center; }
.cat-title-06 .archive-main-title { font-size: clamp(32px, 6vw, 56px); font-weight: 900; background: linear-gradient(135deg, var(--accent-navy), var(--accent-blue)); -webkit-background-clip: text; color: transparent; letter-spacing: 0.02em; }

/* 07: アウトライン（白抜き）テキスト */
.cat-title-07 { text-align: center; }
.cat-title-07 .archive-main-title { font-size: clamp(36px, 8vw, 70px); font-weight: 900; color: transparent; -webkit-text-stroke: 2px var(--accent-navy); text-transform: uppercase; letter-spacing: 0.05em; }

/* 08: ジオメトリック・背景装飾マーカー */
.cat-title-08 { text-align: center; position: relative; z-index: 1; }
.cat-title-08 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; color: var(--text-main); display: inline-block; position: relative; }
.cat-title-08 .archive-main-title::before { content:''; position: absolute; bottom: 0px; left: -10px; width: calc(100% + 20px); height: 16px; background: rgba(0, 159, 232, 0.3); z-index: -1; transform: rotate(-2deg); }

/* 09: タグ・バッジスタイル */
.cat-title-09 { text-align: center; }
.cat-title-09 .archive-main-title { font-size: clamp(22px, 3.5vw, 32px); font-weight: bold; color: var(--accent-navy); border: 2px solid var(--accent-navy); display: inline-block; padding: 15px 40px; border-radius: 50px; background: #fff; box-shadow: 0 10px 20px rgba(0,64,151,0.1); }

/* 10: 3Dレイヤー・シャドウ */
.cat-title-10 { text-align: center; }
.cat-title-10 .archive-main-title { font-size: clamp(32px, 6vw, 60px); font-weight: 900; color: #fff; text-shadow: 4px 4px 0 var(--accent-navy), 8px 8px 0 rgba(0,64,151,0.2); text-transform: uppercase; letter-spacing: 0.05em; }

/* 11: ミニマル・トップボーダー */
.cat-title-11 { text-align: center; }
.cat-title-11 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; border-top: 4px solid var(--accent-navy); padding-top: 20px; display: inline-block; color: var(--text-main); }

/* 12: ボックス・オフセットシャドウ */
.cat-title-12 { text-align: center; }
.cat-title-12 .archive-main-title { font-size: clamp(24px, 4vw, 40px); font-weight: bold; border: 2px solid var(--text-main); padding: 15px 40px; box-shadow: 8px 8px 0 var(--accent-blue); display: inline-block; background: #fff; color: var(--text-main); }

/* 13: ハーフ・ハイライト（下半分マーカー） */
.cat-title-13 { text-align: center; }
.cat-title-13 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; background: linear-gradient(transparent 60%, rgba(0,159,232,0.3) 60%); display: inline; color: var(--text-main); }

/* 14: ブラケット（括弧）アクセント */
.cat-title-14 { text-align: center; }
.cat-title-14 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; position: relative; display: inline-block; padding: 0 35px; color: var(--text-main); }
.cat-title-14 .archive-main-title::before { content: '['; position: absolute; left: 0; color: var(--accent-navy); }
.cat-title-14 .archive-main-title::after { content: ']'; position: absolute; right: 0; color: var(--accent-navy); }

/* 15: ダッシュ・アンダーライン */
.cat-title-15 { text-align: center; }
.cat-title-15 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; border-bottom: 2px dashed var(--border); padding-bottom: 15px; display: inline-block; color: var(--text-main); }

/* 16: グロウ・エフェクト（光彩） */
.cat-title-16 { text-align: center; }
.cat-title-16 .archive-main-title { font-size: clamp(32px, 6vw, 56px); font-weight: 900; color: var(--accent-blue); text-shadow: 0px 4px 15px rgba(0,159,232,0.4); letter-spacing: 0.05em; }

/* 17: ストライプ・バックグラウンド */
.cat-title-17 { text-align: center; }
.cat-title-17 .archive-main-title { font-size: clamp(24px, 4vw, 40px); font-weight: bold; background: repeating-linear-gradient(-45deg, var(--bg-gray), var(--bg-gray) 10px, transparent 10px, transparent 20px); padding: 20px 40px; display: inline-block; border-radius: 8px; color: var(--text-main); }

/* 18: ピル・シェイプ（楕円背景） */
.cat-title-18 { text-align: center; }
.cat-title-18 .archive-main-title { font-size: clamp(24px, 4vw, 40px); font-weight: bold; background: var(--bg-gray); padding: 15px 50px; border-radius: 50px; display: inline-block; color: var(--accent-navy); }

/* 19: サブタイトル・レイヤー */
.cat-title-19 { text-align: center; }
.cat-title-19 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; position: relative; display: inline-block; padding-top: 30px; color: var(--text-main); }
.cat-title-19 .archive-main-title::before { content: 'CATEGORY'; position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: clamp(12px, 2vw, 16px); color: var(--text-sub); letter-spacing: 0.2em; font-weight: normal; }

/* 20: スプリット・ライン（左右に線） */
.cat-title-20 { display: flex; align-items: center; justify-content: center; }
.cat-title-20::before, .cat-title-20::after { content: ''; flex-grow: 1; height: 1px; background: var(--border); margin: 0 30px; max-width: 150px; }
.cat-title-20 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; color: var(--text-main); }

/* 21: 厚めのサイドピラー */
.cat-title-21 { text-align: left; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; }
.cat-title-21 .archive-main-title { font-size: clamp(26px, 4.5vw, 44px); font-weight: 800; color: var(--text-main); border-left: 12px solid var(--accent-navy); padding-left: 24px; }

/* 22: モダン・ダブルアンダーライン */
.cat-title-22 { text-align: center; }
.cat-title-22 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; color: var(--text-main); display: inline-block; padding-bottom: 10px; border-bottom: 1px solid var(--text-main); position: relative; }
.cat-title-22 .archive-main-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background: var(--text-main); }

/* 23: 上部アクセント付ボックス */
.cat-title-23 { text-align: center; }
.cat-title-23 .archive-main-title { font-size: clamp(24px, 4vw, 36px); font-weight: bold; color: var(--text-main); border: 1px solid var(--border); padding: 25px 60px; background: #fff; border-top: 6px solid var(--accent-navy); display: inline-block; }

/* 24: 垂直区切り線（センター） */
.cat-title-24 { text-align: center; }
.cat-title-24 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: 800; color: var(--text-main); position: relative; padding-top: 40px; }
.cat-title-24 .archive-main-title::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 30px; background: var(--accent-blue); transform: translateX(-50%); }

/* 25: 左右シンメトリー・スラッシュ */
.cat-title-25 { text-align: center; }
.cat-title-25 .archive-main-title { font-size: clamp(26px, 4.5vw, 44px); font-weight: bold; color: var(--text-main); display: inline-flex; align-items: center; gap: 20px; }
.cat-title-25 .archive-main-title::before, .cat-title-25 .archive-main-title::after { content: '/'; color: var(--accent-blue); font-weight: 300; font-size: 1.2em; }

/* 26: 塗りつぶし背景（控えめな角丸） */
.cat-title-26 { text-align: left; max-width: 1200px; margin: 0 auto; }
.cat-title-26 .archive-main-title { font-size: clamp(24px, 4vw, 36px); font-weight: bold; background: var(--bg-gray); color: var(--text-main); padding: 15px 30px; border-radius: 4px; display: inline-block; border-left: 5px solid var(--accent-navy); }

/* 27: 文字間隔＋細線ボーダー */
.cat-title-27 { text-align: center; }
.cat-title-27 .archive-main-title { font-size: clamp(24px, 4vw, 40px); font-weight: bold; color: var(--text-main); letter-spacing: 0.3em; text-transform: uppercase; border-bottom: 1px solid var(--border); padding-bottom: 15px; display: inline-block; }

/* 28: コーナーマーク（L字装飾） */
.cat-title-28 { text-align: center; }
.cat-title-28 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: bold; color: var(--text-main); padding: 20px 40px; position: relative; display: inline-block; }
.cat-title-28 .archive-main-title::before { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-top: 3px solid var(--accent-navy); border-left: 3px solid var(--accent-navy); }
.cat-title-28 .archive-main-title::after { content: ''; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; border-bottom: 3px solid var(--accent-navy); border-right: 3px solid var(--accent-navy); }

/* 29: テキスト背後の打ち消し線風背景 */
.cat-title-29 { text-align: center; }
.cat-title-29 .archive-main-title { font-size: clamp(28px, 5vw, 48px); font-weight: 900; color: var(--text-main); position: relative; z-index: 1; display: inline-block; }
.cat-title-29 .archive-main-title::after { content: ''; position: absolute; left: 0; top: 55%; width: 100%; height: 8px; background: rgba(0, 64, 151, 0.15); z-index: -1; }

/* 30: 上部ラベル＋ボトムライン */
.cat-title-30 { text-align: left; max-width: 1200px; margin: 0 auto; }
.cat-title-30 .archive-main-title { font-size: clamp(26px, 4.5vw, 44px); font-weight: bold; color: var(--text-main); display: inline-block; position: relative; padding-top: 25px; border-bottom: 3px solid var(--text-main); padding-bottom: 10px; }
.cat-title-30 .archive-main-title::before { content: 'ARCHIVE'; position: absolute; top: 0; left: 0; font-size: 12px; letter-spacing: 0.1em; color: var(--accent-navy); font-weight: bold; }

/* ▼ スマホ用調整 (レスポンシブ) */
@media (max-width: 768px) {
    .archive-header-wrapper { padding: 80px 5% 40px; }
    .cat-title-03 .archive-main-title, .cat-title-21 .archive-main-title { padding-left: 15px; border-left-width: 5px; }
    .cat-title-04 .archive-main-title, .cat-title-23 .archive-main-title { padding: 15px 20px; }
    .cat-title-07 .archive-main-title { -webkit-text-stroke: 1px var(--accent-navy); }
    .cat-title-09 .archive-main-title { padding: 12px 25px; }
    .cat-title-12 .archive-main-title { box-shadow: 4px 4px 0 var(--accent-blue); padding: 12px 25px; }
    .cat-title-14 .archive-main-title { padding: 0 20px; }
    .cat-title-17 .archive-main-title { padding: 15px 20px; }
    .cat-title-18 .archive-main-title { padding: 12px 30px; }
    .cat-title-20::before, .cat-title-20::after { margin: 0 15px; }
    .cat-title-28 .archive-main-title { padding: 15px 30px; }
}

/* ==========================================================================
   ▼ ページネーション デザイン（全30パターン・レスポンシブ対応）
   ========================================================================== */
.archive-pagination { width: 100%; display: flex; justify-content: center; clear: both; }
.archive-pagination .navigation { margin: 0 auto; width: 100%; display: flex; justify-content: center; }
.archive-pagination .screen-reader-text { display: none; }
.archive-pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 auto; }

[class*="pagi-"] .page-numbers {
    display: inline-flex; justify-content: center; align-items: center; min-width: 42px; height: 42px; padding: 0 12px; text-decoration: none; font-weight: bold; transition: all 0.3s ease; box-sizing: border-box; border-radius: 4px;
}
[class*="pagi-"] .page-numbers.dots { background: transparent !important; border: none !important; color: var(--text-main) !important; min-width: auto; padding: 0; box-shadow: none !important; pointer-events: none; }

/* 01: シンプル・テキスト（ホバーで色変更） */
.pagi-01 .page-numbers { background: transparent; color: var(--text-main); }
.pagi-01 .page-numbers:hover, .pagi-01 .page-numbers.current { color: var(--accent-navy); }

/* 02: ボトムライン（ホバーで線が伸びる） */
.pagi-02 .page-numbers { background: transparent; color: var(--text-main); position: relative; border-radius: 0; }
.pagi-02 .page-numbers::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--accent-navy); transition: width 0.3s; }
.pagi-02 .page-numbers:hover::after, .pagi-02 .page-numbers.current::after { width: 100%; }
.pagi-02 .page-numbers:hover, .pagi-02 .page-numbers.current { color: var(--accent-navy); }

/* 03: シンプル・スクエア（グレー背景 -> ホバーでカラー） */
.pagi-03 .page-numbers { background: var(--bg-gray, #f5f5f5); color: var(--text-main); }
.pagi-03 .page-numbers:hover, .pagi-03 .page-numbers.current { background: var(--accent-navy); color: #fff; }

/* 04: シンプル・サークル */
.pagi-04 .page-numbers { background: var(--bg-gray, #f5f5f5); color: var(--text-main); border-radius: 50%; width: 45px; height: 45px; padding: 0; }
.pagi-04 .page-numbers:hover, .pagi-04 .page-numbers.current { background: var(--accent-navy); color: #fff; }

/* 05: アウトライン・スクエア */
.pagi-05 .page-numbers { background: transparent; border: 1px solid var(--border, #ccc); color: var(--text-main); }
.pagi-05 .page-numbers:hover, .pagi-05 .page-numbers.current { border-color: var(--accent-navy); color: var(--accent-navy); }

/* 06: アウトライン・サークル */
.pagi-06 .page-numbers { background: transparent; border: 1px solid var(--border, #ccc); color: var(--text-main); border-radius: 50%; width: 45px; height: 45px; padding: 0; }
.pagi-06 .page-numbers:hover, .pagi-06 .page-numbers.current { border-color: var(--accent-navy); color: var(--accent-navy); }

/* 07: カラー・スクエア（常にアクセントカラーのアウトライン） */
.pagi-07 .page-numbers { background: #fff; border: 2px solid var(--accent-navy); color: var(--accent-navy); }
.pagi-07 .page-numbers:hover, .pagi-07 .page-numbers.current { background: var(--accent-navy); color: #fff; }

/* 08: カラー・サークル */
.pagi-08 .page-numbers { background: #fff; border: 2px solid var(--accent-navy); color: var(--accent-navy); border-radius: 50%; width: 45px; height: 45px; padding: 0; }
.pagi-08 .page-numbers:hover, .pagi-08 .page-numbers.current { background: var(--accent-navy); color: #fff; }

/* 09: ボックス・シャドウ（浮き上がり） */
.pagi-09 .page-numbers { background: #fff; color: var(--text-main); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.pagi-09 .page-numbers:hover, .pagi-09 .page-numbers.current { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); color: var(--accent-navy); }

/* 10: ミニマル・ドット（カレントだけ数字、他は小さな丸） */
.pagi-10 .page-numbers:not(.prev):not(.next):not(.current) { width: 12px; height: 12px; min-width: auto; padding: 0; border-radius: 50%; background: var(--border, #ccc); color: transparent; overflow: hidden; }
.pagi-10 .page-numbers.current { background: transparent; color: var(--accent-navy); font-size: 1.2em; }
.pagi-10 .page-numbers.prev, .pagi-10 .page-numbers.next { background: transparent; color: var(--text-main); }
.pagi-10 .page-numbers:hover { color: var(--accent-navy); background: transparent; }

/* 11: 左右の矢印だけボタン、数字はテキスト */
.pagi-11 .page-numbers { background: transparent; color: var(--text-main); }
.pagi-11 .page-numbers.current { color: var(--accent-navy); font-size: 1.2em; }
.pagi-11 .page-numbers.prev, .pagi-11 .page-numbers.next { background: var(--accent-navy); color: #fff; padding: 0 20px; }
.pagi-11 .page-numbers.prev:hover, .pagi-11 .page-numbers.next:hover { opacity: 0.8; }

/* 12: 上下ボーダーのリスト風 */
.pagi-12 .nav-links { border-top: 1px solid var(--border, #ccc); border-bottom: 1px solid var(--border, #ccc); display: inline-flex; padding: 10px 20px; }
.pagi-12 .page-numbers { background: transparent; color: var(--text-main); border-radius: 0; }
.pagi-12 .page-numbers.current { color: var(--accent-navy); border-bottom: 2px solid var(--accent-navy); }

/* 13: 繋がったボタングループ */
.pagi-13 .nav-links { gap: 0; border: 1px solid var(--border, #ccc); border-radius: 4px; display: inline-flex; overflow: hidden; }
.pagi-13 .page-numbers { background: #fff; border-radius: 0; border-right: 1px solid var(--border, #ccc); color: var(--text-main); min-width: 45px; height: 45px; }
.pagi-13 .page-numbers:last-child { border-right: none; }
.pagi-13 .page-numbers:hover, .pagi-13 .page-numbers.current { background: var(--bg-gray, #f5f5f5); color: var(--accent-navy); }

/* 14: ゴーストボタン（太枠） */
.pagi-14 .page-numbers { background: transparent; border: 3px solid var(--border, #ccc); color: var(--text-sub, #666); font-weight: 900; }
.pagi-14 .page-numbers:hover, .pagi-14 .page-numbers.current { border-color: var(--accent-navy); color: var(--accent-navy); }

/* 15: オフセット・シャドウ（レトロ） */
.pagi-15 .page-numbers { background: #fff; border: 2px solid var(--text-main); color: var(--text-main); box-shadow: 3px 3px 0 var(--text-main); margin-bottom: 3px; }
.pagi-15 .page-numbers:hover, .pagi-15 .page-numbers.current { background: var(--accent-navy); color: #fff; box-shadow: 3px 3px 0 var(--text-main); }

/* 16: ダーク・スクエア */
.pagi-16 .page-numbers { background: var(--text-main); color: #fff; }
.pagi-16 .page-numbers:hover, .pagi-16 .page-numbers.current { background: var(--accent-blue); }

/* 17: アンダーライン・スライドアウト */
.pagi-17 .page-numbers { background: transparent; color: var(--text-main); border-bottom: 2px solid transparent; border-radius: 0; }
.pagi-17 .page-numbers:hover, .pagi-17 .page-numbers.current { border-bottom: 2px solid var(--accent-navy); transform: translateY(-2px); }

/* 18: ソフト・グラデーション */
.pagi-18 .page-numbers { background: linear-gradient(to bottom, #fff, var(--bg-gray, #f5f5f5)); border: 1px solid var(--border, #ccc); color: var(--text-main); }
.pagi-18 .page-numbers:hover, .pagi-18 .page-numbers.current { background: linear-gradient(to bottom, var(--accent-blue), var(--accent-navy)); color: #fff; border-color: var(--accent-navy); }

/* 19: ブラケット（括弧） */
.pagi-19 .page-numbers { background: transparent; color: var(--text-main); position: relative; }
.pagi-19 .page-numbers.current::before { content: '['; position: absolute; left: 0; color: var(--accent-navy); }
.pagi-19 .page-numbers.current::after { content: ']'; position: absolute; right: 0; color: var(--accent-navy); }
.pagi-19 .page-numbers:hover { color: var(--accent-navy); }

/* 20: カプセル・ピルシェイプ */
.pagi-20 .page-numbers { background: var(--bg-gray, #f5f5f5); color: var(--text-main); border-radius: 50px; padding: 0 20px; }
.pagi-20 .page-numbers:hover, .pagi-20 .page-numbers.current { background: var(--accent-navy); color: #fff; }

/* 21: ライトグレー・スクエア（控えめな背景） */
.pagi-21 .page-numbers { background: var(--bg-gray, #f8f9fa); color: var(--text-main); border: 1px solid #e9ecef; }
.pagi-21 .page-numbers:hover, .pagi-21 .page-numbers.current { background: var(--text-main); color: #fff; border-color: var(--text-main); }

/* 22: パイプ（縦線）セパレータ */
.pagi-22 .nav-links { gap: 0; }
.pagi-22 .page-numbers { background: transparent; color: var(--text-sub, #666); position: relative; border-radius: 0; }
.pagi-22 .page-numbers:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 25%; height: 50%; width: 1px; background: var(--border, #ccc); }
.pagi-22 .page-numbers:hover, .pagi-22 .page-numbers.current { color: var(--text-main); font-weight: 900; }

/* 23: ソリッド・マイクロシャドウ（清潔感のある立体感） */
.pagi-23 .page-numbers { background: #fff; border: 1px solid var(--border, #e0e0e0); color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.pagi-23 .page-numbers:hover, .pagi-23 .page-numbers.current { background: var(--accent-navy); color: #fff; border-color: var(--accent-navy); box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

/* 24: ボールドテキスト・アンダーライン */
.pagi-24 .page-numbers { background: transparent; color: var(--text-sub, #666); font-weight: normal; border-bottom: 3px solid transparent; border-radius: 0; padding: 0 8px; }
.pagi-24 .page-numbers:hover, .pagi-24 .page-numbers.current { color: var(--text-main); font-weight: bold; border-bottom-color: var(--text-main); }

/* 25: トップ・アクセントバー */
.pagi-25 .page-numbers { background: #fff; color: var(--text-main); border: 1px solid var(--border, #eee); border-top: 3px solid var(--border, #eee); border-radius: 0; }
.pagi-25 .page-numbers:hover, .pagi-25 .page-numbers.current { border-top-color: var(--accent-blue); background: var(--bg-gray, #fafafa); }

/* 26: コネクテッド・ピル（繋がったカプセル形） */
.pagi-26 .nav-links { gap: 0; border: 1px solid var(--border, #ccc); border-radius: 50px; display: inline-flex; overflow: hidden; padding: 0; }
.pagi-26 .page-numbers { background: #fff; color: var(--text-main); border-right: 1px solid var(--border, #ccc); border-radius: 0; }
.pagi-26 .page-numbers:last-child { border-right: none; }
.pagi-26 .page-numbers:hover, .pagi-26 .page-numbers.current { background: var(--text-main); color: #fff; }

/* 27: タブ・スタイル（下辺接合） */
.pagi-27 .nav-links { border-bottom: 2px solid var(--border, #ddd); padding-bottom: 0; align-items: flex-end; }
.pagi-27 .page-numbers { background: var(--bg-gray, #f5f5f5); color: var(--text-main); border: 1px solid var(--border, #ddd); border-bottom: none; border-radius: 6px 6px 0 0; margin-bottom: -2px; padding-bottom: 2px; }
.pagi-27 .page-numbers:hover, .pagi-27 .page-numbers.current { background: #fff; border-top: 2px solid var(--accent-navy); padding-bottom: 4px; font-weight: bold; }

/* 28: タイポグラフィ重視（文字サイズ可変） */
.pagi-28 .page-numbers { background: transparent; color: var(--text-sub, #888); font-weight: normal; font-size: 0.9em; }
.pagi-28 .page-numbers:hover { color: var(--text-main); }
.pagi-28 .page-numbers.current { color: var(--text-main); font-weight: 900; font-size: 1.3em; transform: scale(1.1); }

/* 29: ドット（点線）ボーダー */
.pagi-29 .page-numbers { background: #fff; color: var(--text-main); border: 2px dotted var(--border, #bbb); }
.pagi-29 .page-numbers:hover, .pagi-29 .page-numbers.current { border-style: solid; border-color: var(--accent-navy); color: var(--accent-navy); }

/* 30: フルバー・コンテナ（全体背景付きバー） */
.pagi-30 .nav-links { background: var(--bg-gray, #f0f2f5); padding: 5px 20px; border-radius: 50px; display: inline-flex; gap: 4px; }
.pagi-30 .page-numbers { background: transparent; color: var(--text-main); border-radius: 50px; min-width: 36px; height: 36px; }
.pagi-30 .page-numbers:hover, .pagi-30 .page-numbers.current { background: #fff; color: var(--accent-navy); box-shadow: 0 2px 4px rgba(0,0,0,0.08); }

@media (max-width: 768px) {
    [class*="pagi-"] .page-numbers { min-width: 36px; height: 36px; padding: 0 8px; font-size: 14px; }
    .pagi-04 .page-numbers, .pagi-06 .page-numbers, .pagi-08 .page-numbers { width: 38px; height: 38px; }
}


/* ==========================================================================
   ▼ カテゴリー絞り込み（フィルター）デザイン（全40パターン・レスポンシブ対応）
   ========================================================================== */
/* 共通設定（テーマの黒背景や全幅指定を強力にリセット） */
div.filter-style-wrap { 
    margin: 0 auto 40px !important; 
    width: 100% !important; 
    max-width: 1000px !important; /* 広がりすぎを防ぐ */
    clear: both !important; 
    padding: 24px !important; 
    box-sizing: border-box !important; 
    border-radius: 8px !important; 
    background-color: transparent !important; 
    background-image: none !important;
}
div.filter-style-wrap .filter-bar,
div.filter-style-wrap .cat-filter-bar { 
    display: flex !important; 
    flex-wrap: wrap !important; 
    gap: 10px !important; 
    justify-content: center !important; 
    align-items: center !important; 
    background: transparent !important; 
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

div.filter-style-wrap .filter-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; 
    padding: 8px 24px !important; text-decoration: none !important; font-weight: bold !important; cursor: pointer !important; 
    transition: all 0.3s ease !important; border: none !important; font-size: 14px !important; line-height: 1.4 !important;
    box-sizing: border-box !important; background-color: transparent !important; box-shadow: none !important;
}
button.filter-btn { appearance: none; -webkit-appearance: none; outline: none; }

@media (max-width: 768px) {
    div.filter-style-wrap { padding: 16px !important; }
    div.filter-style-wrap .filter-btn { padding: 6px 16px !important; font-size: 13px !important; }
}

/* --------------------------------------------------
   【白背景グループ】 01 〜 20
-------------------------------------------------- */
div.filter-style-wrap[class*="filter-style-0"], 
div.filter-style-wrap[class*="filter-style-1"], 
div.filter-style-wrap.filter-style-20 {
    background-color: #ffffff !important; 
    border: 1px solid #eaeaea !important;
}
div.filter-style-wrap[class*="filter-style-0"] .filter-btn, 
div.filter-style-wrap[class*="filter-style-1"] .filter-btn, 
div.filter-style-wrap.filter-style-20 .filter-btn {
    color: #333333 !important;
}

/* 01: シンプル下線 */
.filter-style-01 .filter-btn { position: relative !important; border-radius: 0 !important; }
.filter-style-01 .filter-btn::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: var(--accent-navy) !important; transition: width 0.3s; }
.filter-style-01 .filter-btn:hover::after, .filter-style-01 .filter-btn.active::after { width: 100% !important; }
.filter-style-01 .filter-btn:hover, .filter-style-01 .filter-btn.active { color: var(--accent-navy) !important; }

/* 02: ピル（塗りつぶし） */
.filter-style-02 .filter-btn { background-color: #f5f5f5 !important; border-radius: 50px !important; }
.filter-style-02 .filter-btn:hover, .filter-style-02 .filter-btn.active { background-color: var(--accent-navy) !important; color: #ffffff !important; }

/* 03: ピル（枠線） */
.filter-style-03 .filter-btn { border: 1px solid #ddd !important; border-radius: 50px !important; }
.filter-style-03 .filter-btn:hover, .filter-style-03 .filter-btn.active { border-color: var(--accent-navy) !important; background-color: var(--accent-navy) !important; color: #ffffff !important; }

/* 04: スクエア（塗りつぶし） */
.filter-style-04 .filter-btn { background-color: #f5f5f5 !important; border-radius: 4px !important; }
.filter-style-04 .filter-btn:hover, .filter-style-04 .filter-btn.active { background-color: var(--accent-navy) !important; color: #ffffff !important; }

/* 05: スクエア（枠線） */
.filter-style-05 .filter-btn { border: 1px solid #ddd !important; border-radius: 4px !important; }
.filter-style-05 .filter-btn:hover, .filter-style-05 .filter-btn.active { border-color: var(--accent-navy) !important; color: var(--accent-navy) !important; }

/* 06: テキストカラーのみ */
.filter-style-06 .filter-btn { font-weight: normal !important; }
.filter-style-06 .filter-btn:hover, .filter-style-06 .filter-btn.active { color: var(--accent-navy) !important; font-weight: bold !important; }

/* 07: スラッシュ区切り */
.filter-style-07 .filter-bar { gap: 0 !important; }
.filter-style-07 .filter-btn { position: relative !important; padding: 8px 16px !important; }
.filter-style-07 .filter-btn:not(:last-child)::after { content: '/'; position: absolute; right: -4px; color: #ccc; font-weight: normal; }
.filter-style-07 .filter-btn:hover, .filter-style-07 .filter-btn.active { color: var(--accent-navy) !important; }

/* 08: パイプ（縦線）区切り */
.filter-style-08 .filter-bar { gap: 0 !important; }
.filter-style-08 .filter-btn { position: relative !important; padding: 8px 20px !important; }
.filter-style-08 .filter-btn:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 25%; height: 50%; width: 1px; background-color: #ddd !important; }
.filter-style-08 .filter-btn:hover, .filter-style-08 .filter-btn.active { color: var(--accent-navy) !important; }

/* 09: タブスタイル */
.filter-style-09 .filter-bar { border-bottom: 2px solid #eee !important; gap: 4px !important; }
.filter-style-09 .filter-btn { border-radius: 6px 6px 0 0 !important; margin-bottom: -2px !important; border: 1px solid transparent !important; border-bottom: none !important; }
.filter-style-09 .filter-btn:hover, .filter-style-09 .filter-btn.active { border-color: #ddd !important; border-top: 2px solid var(--accent-navy) !important; background-color: #fafafa !important; color: var(--accent-navy) !important; }

/* 10: 連結ボタングループ */
.filter-style-10 .filter-bar { gap: 0 !important; border: 1px solid #ddd !important; border-radius: 4px !important; overflow: hidden !important; display: inline-flex !important; }
.filter-style-10 .filter-btn { border-right: 1px solid #ddd !important; border-radius: 0 !important; }
.filter-style-10 .filter-btn:last-child { border-right: none !important; }
.filter-style-10 .filter-btn:hover, .filter-style-10 .filter-btn.active { background-color: var(--accent-navy) !important; color: #ffffff !important; }

/* 11: トップドット */
.filter-style-11 .filter-btn { position: relative !important; padding-top: 16px !important; border-radius: 0 !important; }
.filter-style-11 .filter-btn::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scale(0); width: 6px; height: 6px; border-radius: 50%; background-color: var(--accent-navy) !important; transition: 0.3s; }
.filter-style-11 .filter-btn:hover::before, .filter-style-11 .filter-btn.active::before { transform: translateX(-50%) scale(1) !important; }
.filter-style-11 .filter-btn:hover, .filter-style-11 .filter-btn.active { color: var(--accent-navy) !important; }

/* 12: サイドドット */
.filter-style-12 .filter-btn { position: relative !important; padding-left: 24px !important; }
.filter-style-12 .filter-btn::before { content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background-color: #ccc !important; transition: 0.3s; }
.filter-style-12 .filter-btn:hover::before, .filter-style-12 .filter-btn.active::before { background-color: var(--accent-navy) !important; }
.filter-style-12 .filter-btn:hover, .filter-style-12 .filter-btn.active { color: var(--accent-navy) !important; }

/* 13: クリーンシャドウ */
.filter-style-13 .filter-btn { background-color: #ffffff !important; border-radius: 4px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; border: 1px solid transparent !important; }
.filter-style-13 .filter-btn:hover, .filter-style-13 .filter-btn.active { border-color: var(--accent-navy) !important; color: var(--accent-navy) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important; }

/* 14: セグメントコントロール風 */
.filter-style-14 .filter-bar { background-color: #f0f2f5 !important; padding: 4px !important; border-radius: 6px !important; display: inline-flex !important; }
.filter-style-14 .filter-btn { border-radius: 4px !important; font-weight: normal !important; }
.filter-style-14 .filter-btn:hover, .filter-style-14 .filter-btn.active { background-color: #ffffff !important; box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; font-weight: bold !important; color: var(--accent-navy) !important; }

/* 15: 左ボーダーアクセント */
.filter-style-15 .filter-btn { background-color: #fafafa !important; border-left: 3px solid #ddd !important; border-radius: 0 4px 4px 0 !important; }
.filter-style-15 .filter-btn:hover, .filter-style-15 .filter-btn.active { border-left-color: var(--accent-navy) !important; background-color: #ffffff !important; color: var(--accent-navy) !important; box-shadow: 1px 1px 5px rgba(0,0,0,0.05) !important; }

/* 16: トップボーダーアクセント */
.filter-style-16 .filter-btn { background-color: #fafafa !important; border-top: 3px solid #ddd !important; border-radius: 0 0 4px 4px !important; }
.filter-style-16 .filter-btn:hover, .filter-style-16 .filter-btn.active { border-top-color: var(--accent-navy) !important; background-color: #ffffff !important; color: var(--accent-navy) !important; box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; }

/* 17: ブラケット */
.filter-style-17 .filter-btn { position: relative !important; font-weight: normal !important; }
.filter-style-17 .filter-btn.active { font-weight: bold !important; color: var(--accent-navy) !important; }
.filter-style-17 .filter-btn.active::before { content: '['; position: absolute; left: 8px; color: var(--accent-navy); }
.filter-style-17 .filter-btn.active::after { content: ']'; position: absolute; right: 8px; color: var(--accent-navy); }

/* 18: 右向きアロー */
.filter-style-18 .filter-btn { position: relative !important; padding-left: 24px !important; font-weight: normal !important; }
.filter-style-18 .filter-btn.active { font-weight: bold !important; color: var(--accent-navy) !important; }
.filter-style-18 .filter-btn.active::before { content: '>'; position: absolute; left: 8px; color: var(--accent-navy); }

/* 19: 二重線アンダーライン */
.filter-style-19 .filter-btn { border-bottom: 3px double transparent !important; border-radius: 0 !important; }
.filter-style-19 .filter-btn:hover, .filter-style-19 .filter-btn.active { border-bottom-color: var(--accent-navy) !important; color: var(--accent-navy) !important; }

/* 20: オパシティ（透過）シフト */
.filter-style-20 .filter-btn { opacity: 0.5 !important; font-weight: normal !important; }
.filter-style-20 .filter-btn:hover, .filter-style-20 .filter-btn.active { opacity: 1 !important; font-weight: bold !important; color: var(--accent-navy) !important; }

/* --------------------------------------------------
   【黒背景グループ】 21 〜 40
-------------------------------------------------- */
div.filter-style-wrap[class*="filter-style-2"]:not(.filter-style-20), 
div.filter-style-wrap[class*="filter-style-3"], 
div.filter-style-wrap.filter-style-40 {
    background-color: #1a1a1a !important; 
    border: 1px solid #333333 !important;
}
div.filter-style-wrap[class*="filter-style-2"]:not(.filter-style-20) .filter-btn, 
div.filter-style-wrap[class*="filter-style-3"] .filter-btn, 
div.filter-style-wrap.filter-style-40 .filter-btn {
    color: #cccccc !important;
}

/* 21: シンプル下線（黒背景用） */
.filter-style-21 .filter-btn { position: relative !important; border-radius: 0 !important; }
.filter-style-21 .filter-btn::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: #ffffff !important; transition: width 0.3s; }
.filter-style-21 .filter-btn:hover::after, .filter-style-21 .filter-btn.active::after { width: 100% !important; }
.filter-style-21 .filter-btn:hover, .filter-style-21 .filter-btn.active { color: #ffffff !important; }

/* 22: ピル（塗りつぶし・黒背景用） */
.filter-style-22 .filter-btn { background-color: #333333 !important; border-radius: 50px !important; }
.filter-style-22 .filter-btn:hover, .filter-style-22 .filter-btn.active { background-color: #ffffff !important; color: #111111 !important; }

/* 23: ピル（枠線・黒背景用） */
.filter-style-23 .filter-btn { border: 1px solid #444444 !important; border-radius: 50px !important; }
.filter-style-23 .filter-btn:hover, .filter-style-23 .filter-btn.active { border-color: #ffffff !important; background-color: #ffffff !important; color: #111111 !important; }

/* 24: スクエア（塗りつぶし・黒背景用） */
.filter-style-24 .filter-btn { background-color: #333333 !important; border-radius: 4px !important; }
.filter-style-24 .filter-btn:hover, .filter-style-24 .filter-btn.active { background-color: #ffffff !important; color: #111111 !important; }

/* 25: スクエア（枠線・黒背景用） */
.filter-style-25 .filter-btn { border: 1px solid #444444 !important; border-radius: 4px !important; }
.filter-style-25 .filter-btn:hover, .filter-style-25 .filter-btn.active { border-color: #ffffff !important; color: #ffffff !important; }

/* 26: テキストカラーのみ（黒背景用） */
.filter-style-26 .filter-btn { font-weight: normal !important; }
.filter-style-26 .filter-btn:hover, .filter-style-26 .filter-btn.active { color: #ffffff !important; font-weight: bold !important; }

/* 27: スラッシュ区切り（黒背景用） */
.filter-style-27 .filter-bar { gap: 0 !important; }
.filter-style-27 .filter-btn { position: relative !important; padding: 8px 16px !important; }
.filter-style-27 .filter-btn:not(:last-child)::after { content: '/'; position: absolute; right: -4px; color: #555; font-weight: normal; }
.filter-style-27 .filter-btn:hover, .filter-style-27 .filter-btn.active { color: #ffffff !important; }

/* 28: パイプ区切り（黒背景用） */
.filter-style-28 .filter-bar { gap: 0 !important; }
.filter-style-28 .filter-btn { position: relative !important; padding: 8px 20px !important; }
.filter-style-28 .filter-btn:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 25%; height: 50%; width: 1px; background-color: #444444 !important; }
.filter-style-28 .filter-btn:hover, .filter-style-28 .filter-btn.active { color: #ffffff !important; }

/* 29: タブスタイル（黒背景用） */
.filter-style-29 .filter-bar { border-bottom: 2px solid #333333 !important; gap: 4px !important; }
.filter-style-29 .filter-btn { border-radius: 6px 6px 0 0 !important; margin-bottom: -2px !important; border: 1px solid transparent !important; border-bottom: none !important; }
.filter-style-29 .filter-btn:hover, .filter-style-29 .filter-btn.active { border-color: #444444 !important; border-top: 2px solid #ffffff !important; background-color: #222222 !important; color: #ffffff !important; }

/* 30: 連結ボタングループ（黒背景用） */
.filter-style-30 .filter-bar { gap: 0 !important; border: 1px solid #444444 !important; border-radius: 4px !important; overflow: hidden !important; display: inline-flex !important; }
.filter-style-30 .filter-btn { border-right: 1px solid #444444 !important; border-radius: 0 !important; }
.filter-style-30 .filter-btn:last-child { border-right: none !important; }
.filter-style-30 .filter-btn:hover, .filter-style-30 .filter-btn.active { background-color: #ffffff !important; color: #111111 !important; }

/* 31: トップドット（黒背景用） */
.filter-style-31 .filter-btn { position: relative !important; padding-top: 16px !important; border-radius: 0 !important; }
.filter-style-31 .filter-btn::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scale(0); width: 6px; height: 6px; border-radius: 50%; background-color: #ffffff !important; transition: 0.3s; }
.filter-style-31 .filter-btn:hover::before, .filter-style-31 .filter-btn.active::before { transform: translateX(-50%) scale(1) !important; }
.filter-style-31 .filter-btn:hover, .filter-style-31 .filter-btn.active { color: #ffffff !important; }

/* 32: サイドドット（黒背景用） */
.filter-style-32 .filter-btn { position: relative !important; padding-left: 24px !important; }
.filter-style-32 .filter-btn::before { content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background-color: #444444 !important; transition: 0.3s; }
.filter-style-32 .filter-btn:hover::before, .filter-style-32 .filter-btn.active::before { background-color: #ffffff !important; }
.filter-style-32 .filter-btn:hover, .filter-style-32 .filter-btn.active { color: #ffffff !important; }

/* 33: クリーンシャドウ（黒背景用） */
.filter-style-33 .filter-btn { background-color: #222222 !important; border-radius: 4px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; border: 1px solid transparent !important; }
.filter-style-33 .filter-btn:hover, .filter-style-33 .filter-btn.active { border-color: #555555 !important; color: #ffffff !important; background-color: #2a2a2a !important; }

/* 34: セグメントコントロール風（黒背景用） */
.filter-style-34 .filter-bar { background-color: #0a0a0a !important; padding: 4px !important; border-radius: 6px !important; display: inline-flex !important; }
.filter-style-34 .filter-btn { border-radius: 4px !important; font-weight: normal !important; }
.filter-style-34 .filter-btn:hover, .filter-style-34 .filter-btn.active { background-color: #333333 !important; color: #ffffff !important; font-weight: bold !important; }

/* 35: 左ボーダーアクセント（黒背景用） */
.filter-style-35 .filter-btn { background-color: #222222 !important; border-left: 3px solid #444444 !important; border-radius: 0 4px 4px 0 !important; }
.filter-style-35 .filter-btn:hover, .filter-style-35 .filter-btn.active { border-left-color: #ffffff !important; background-color: #2a2a2a !important; color: #ffffff !important; }

/* 36: トップボーダーアクセント（黒背景用） */
.filter-style-36 .filter-btn { background-color: #222222 !important; border-top: 3px solid #444444 !important; border-radius: 0 0 4px 4px !important; }
.filter-style-36 .filter-btn:hover, .filter-style-36 .filter-btn.active { border-top-color: #ffffff !important; background-color: #2a2a2a !important; color: #ffffff !important; }

/* 37: ブラケット（黒背景用） */
.filter-style-37 .filter-btn { position: relative !important; font-weight: normal !important; }
.filter-style-37 .filter-btn.active { font-weight: bold !important; color: #ffffff !important; }
.filter-style-37 .filter-btn.active::before { content: '['; position: absolute; left: 8px; color: #888888; }
.filter-style-37 .filter-btn.active::after { content: ']'; position: absolute; right: 8px; color: #888888; }

/* 38: 右向きアロー（黒背景用） */
.filter-style-38 .filter-btn { position: relative !important; padding-left: 24px !important; font-weight: normal !important; }
.filter-style-38 .filter-btn.active { font-weight: bold !important; color: #ffffff !important; }
.filter-style-38 .filter-btn.active::before { content: '>'; position: absolute; left: 8px; color: #888888; }

/* 39: 二重線アンダーライン（黒背景用） */
.filter-style-39 .filter-btn { border-bottom: 3px double transparent !important; border-radius: 0 !important; }
.filter-style-39 .filter-btn:hover, .filter-style-39 .filter-btn.active { border-bottom-color: #ffffff !important; color: #ffffff !important; }

/* 40: オパシティ（透過）シフト（黒背景用） */
.filter-style-40 .filter-btn { opacity: 0.5 !important; font-weight: normal !important; }
.filter-style-40 .filter-btn:hover, .filter-style-40 .filter-btn.active { opacity: 1 !important; font-weight: bold !important; color: #ffffff !important; }

/* 動的切り替え用アニメーション */
@keyframes filterFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }