/* === category.css === */

/* メインコンテンツエリア (カテゴリページ用) */
.site-main.category-page-main {
    padding-top: 40px; /* ☆★ヘッダーとの間の余白調整 (JSでの調整も考慮)★☆ */
    padding-bottom: 60px; /* ☆★フッターとの間の余白調整★☆ */
    /* 背景はbodyで設定 */
}

/* パンくずリスト (スタイルは common.css にある想定) */
.breadcrumbs {
    margin: 40px 0 30px 0; /* ☆★カテゴリタイトルとの間隔調整★☆ */
    /* common.css にスタイルがなければここで定義 */
    /* font-size: 0.9rem; color: #666; */
}
/* .breadcrumbs a { color: #666; text-decoration: none; } */
/* .breadcrumbs a:hover { text-decoration: underline; } */
/* .breadcrumbs span { color: #333; font-weight: bold; } */


/* カテゴリ名タイトル */
.category-title {
    font-size: 2.2rem; /* ☆★サイズ調整★☆ */
    font-weight: 700; /* ☆★太さ調整★☆ */
    color: #4A4A4A; /* ☆★色調整 (セクションタイトルと同じなど)★☆ */
    text-align: center; /* 中央寄せ */
    margin-bottom: 40px; /* ☆★記事グリッドとの間の下マージン調整★☆ */
    /* 必要ならセクションタイトルのようなアクセントを追加 */
    position: relative;
    display: inline-block; /* アクセントのため */
    left: 50%;
    transform: translateX(-50%);
}

/* カテゴリ名タイトルの左右アクセント (セクションタイトルと同様のものを流用する場合) */
.category-title::before,
.category-title::after {
    content: '';
    display: inline-block;
    width: 10px;   /* ☆★アクセントのサイズ調整★☆ */
    height: 10px;  /* ☆★アクセントのサイズ調整★☆ */
    background-color: #fdcf2b; /* ☆★アクセントの色調整★☆ */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 3px; /* ☆★アクセントの角丸調整★☆ */
}
.category-title::before {
    left: -20px; /* ☆★テキストとの距離調整★☆ */
}
.category-title::after {
    right: -20px; /* ☆★テキストとの距離調整★☆ */
}


/* 記事グリッドと記事カードのスタイルは common.css で定義されている想定 */
/* .article-grid { ... } */
/* .article-card { ... } */


/* ページネーション (スタイルをここに定義する場合) */
.pagination {
    margin-top: 40px; /* ☆★記事グリッドとの間隔調整★☆ */
    text-align: center;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    border: 1px solid #ddd;
    color: #67C1C4;
    text-decoration: none;
    border-radius: 4px;
}
.pagination a:hover {
    background-color: #67C1C4;
    color: #fff;
    border-color: #67C1C4;
}
.pagination span { /* 現在のページなど */
    background-color: #67C1C4;
    color: #fff;
    border-color: #67C1C4;
}


/* === レスポンシブ対応 (カテゴリページ固有) === */
@media (max-width: 768px) {
    /* common.css のレスポンシブスタイルも適用される */

    .site-main.category-page-main {
        padding-top: 20px; /* ☆★ヘッダーとの間の余白調整★☆ */
        padding-bottom: 40px; /* ☆★フッターとの間の余白調整★☆ */
    }

    .breadcrumbs {
        margin-bottom: 20px; /* ☆★カテゴリタイトルとの間隔調整★☆ */
        font-size: 0.8rem;
    }

    .category-title {
        font-size: 1.8rem; /* ☆★サイズ調整★☆ */
        margin-bottom: 30px; /* ☆★記事グリッドとの間の下マージン調整★☆ */
    }
    .category-title::before { left: -15px; }
    .category-title::after { right: -15px; }

    .pagination { margin-top: 30px; }
    .pagination a, .pagination span { padding: 6px 10px; margin: 0 3px; font-size: 0.9rem;}

}