/*
Theme Name: AFFINGER Child
Template: affinger
Description: AFFINGER6 対応
Version: 20240601
*/

/* ===============================================
   メディアクエリ プレースホルダー
   =============================================== */

/*media Queries スマートフォンとタブレットサイズ（959px以下）で適応したいCSS - スマホ・タブレット
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 959px) {


	/*-- ここまで --*/
}

/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {


	/*-- ここまで --*/
}

/*media Queries タブレット（600px）以上で適応したいCSS -タブレット・PC
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) {


	/*-- ここまで --*/
}

/*media Queries PCサイズ（960px）以上で適応したいCSS - PCのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (min-width: 960px) {


	/*-- ここまで --*/
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {


	/*-- ここまで --*/
}


/* カードコンテナ (記事一覧全体) */
/* ↓ セレクタから body.category を削除 */
.article-card-container {
    display: grid;
    gap: 16px; /* カード間の隙間 */
    padding: 16px; /* コンテナの内側余白 */
    grid-template-columns: repeat(4, 1fr); /* 4列表示 */
    overflow: hidden; /* float回り込み対策 */
}

/* カード全体 */
/* ↓ セレクタから body.category を削除 */
.article-card-container .article-card {
    background: #fff;
    border: 1px solid #ddd; /* カードの枠線 */
    border-radius: 12px;   /* カードの角丸 */
    overflow: hidden;      /* 角丸の外側を隠す */
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* カードの影 */
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column; /* 画像とタイトルを縦に */
}

/* カード ホバー時 */
/* ↓ セレクタから body.category を削除 */
.article-card-container .article-card:hover {
    transform: translateY(-5px); /* 少し上に移動 */
}

/* カード画像エリア ラッパー */
/* ↓ セレクタから body.category を削除 */
.article-card-container .article-card-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* 画像のアスペクト比 (16:9) */
    overflow: hidden;
    background-color: #f0f0f0; /* 画像読み込み中の背景色 */
}

/* カード画像自体 */
/* ↓ セレクタから body.category を削除 */
.article-card-container .article-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像比率を維持しつつエリアを埋める */
    display: block;    /* 画像下の余白削除 */
}

/* カードタイトル */
/* ↓ セレクタから body.category を削除 */
.article-card-container .article-card-title {
    font-size: 1rem;      /* 文字サイズ (PC) */
    font-weight: bold;
    padding: 16px;        /* 内側余白 (PC) */
    color: #333;
    line-height: 1.4;
    height: auto;         /* 高さは自動調整 */
    margin: 0;            /* デフォルトマージン削除 */
    flex-grow: 1;         /* 縦方向に可能な限り伸びる */
    background-color: #fff; /* 背景色を白に */
    border: none;         /* 上下の線を削除 */
}

/* --- レスポンシブ --- */

/* タブレット表示 (600px - 959px) */
@media only screen and (min-width: 600px) and (max-width: 959px) {
    /* 必要ならタブレット用の列数を指定 (例: 3列) */
    /*
    .article-card-container { // body.category を削除
        grid-template-columns: repeat(3, 1fr);
    }
    */
    /* 必要ならタブレット用のタイトルサイズなどを指定 */
    /* 例:
    .article-card-container .article-card-title { // body.category を削除
        font-size: 0.95rem;
    }
    */
}

/* スマホ表示 (最大 767px) */
@media (max-width: 767px) {
    /* ↓ セレクタから body.category を削除 */
    .article-card-container {
        grid-template-columns: repeat(2, 1fr); /* スマホ: 2列 */
        gap: 12px;
        padding: 12px 8px; /* スマホ時の左右余白 */
    }

    /* ↓ スマホ時のタイトルスタイル */
    /* ↓ セレクタから body.category を削除 */
    .article-card-container .article-card .article-card-title {
        font-size: 14px; /* スマホ時の文字サイズ */
        padding: 12px;   /* スマホ時の内側余白 */
        line-height: 1.3;
    }
}

/* スマホ表示 (最大 599px) - より小さい画面用 */
@media print, screen and (max-width: 599px) {
	/* さらに小さいスマホ用の調整が必要な場合はここに記述 */
    /* 例:
    .article-card-container { // body.category を削除
        padding: 12px 4px;
    }
    .article-card-container .article-card .article-card-title { // body.category を削除
        font-size: 13px;
        padding: 10px;
    }
    */
}


/* ===============================================
   カテゴリーアーカイブ カード表示スタイル (詳細度UP)
   =============================================== */

/* カードコンテナ (記事一覧全体) */
/* ↓ セレクタの詳細度をUP */
body.category .article-card-container {
    display: grid;
    gap: 16px; /* カード間の隙間 */
    padding: 16px; /* コンテナの内側余白 */
    grid-template-columns: repeat(4, 1fr); /* ★修正: 4列表示 */
    overflow: hidden; /* float回り込み対策 */
}

/* カード全体 */
/* ↓ 親コンテナのセレクタ変更に伴い、こちらも合わせておく (必須ではないが一貫性のため) */
body.category .article-card-container .article-card {
    background: #fff;
    border: 1px solid #ddd; /* カードの枠線 */
    border-radius: 12px;   /* カードの角丸 */
    overflow: hidden;      /* 角丸の外側を隠す */
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* カードの影 */
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column; /* 画像とタイトルを縦に */
}

/* カード ホバー時 */
body.category .article-card-container .article-card:hover {
    transform: translateY(-5px); /* 少し上に移動 */
}

/* カード画像エリア ラッパー */
body.category .article-card-container .article-card-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* 画像のアスペクト比 (16:9) */
    overflow: hidden;
    background-color: #f0f0f0; /* 画像読み込み中の背景色 */
}

/* カード画像自体 */
body.category .article-card-container .article-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像比率を維持しつつエリアを埋める */
    display: block;    /* 画像下の余白削除 */
}

/* カードタイトル */
body.category .article-card-container .article-card-title {
    font-size: 1rem;      /* 文字サイズ (PC) */
    font-weight: bold;
    padding: 16px;        /* 内側余白 (PC) */
    color: #333;
    line-height: 1.4;
    height: auto;         /* 高さは自動調整 */
    margin: 0;            /* デフォルトマージン削除 */
    flex-grow: 1;         /* 縦方向に可能な限り伸びる */
    background-color: #fff; /* 背景色を白に */
    border: none;         /* 上下の線を削除 */
}

/* カードタイトル */
body.category .article-card-container .article-category-title {
    text-align: center;
}

/* --- レスポンシブ --- */

/* タブレット表示 (600px - 959px) */
@media only screen and (min-width: 600px) and (max-width: 959px) {
    /* 必要ならタブレット用の列数を指定 (例: 3列) */
    /*
    body.category .article-card-container {
        grid-template-columns: repeat(3, 1fr);
    }
    */
    /* 必要ならタブレット用のタイトルサイズなどを指定 */
    /* 例:
    body.category .article-card-container .article-card-title {
        font-size: 0.95rem;
    }
    */
}

/* スマホ表示 (最大 767px) */
@media (max-width: 767px) {
    /* ↓ セレクタの詳細度をUP */
    body.category .article-card-container {
        grid-template-columns: repeat(2, 1fr); /* スマホ: 2列 */
        gap: 12px;
        padding: 12px 8px; /* スマホ時の左右余白 */
    }

    /* ↓ スマホ時のタイトルスタイル */
    /* ↓ セレクタの詳細度をUP */
    body.category .article-card-container .article-card .article-card-title {
        font-size: 14px; /* スマホ時の文字サイズ */
        padding: 12px;   /* スマホ時の内側余白 */
        line-height: 1.3;
    }
}

/* スマホ表示 (最大 599px) - より小さい画面用 */
@media print, screen and (max-width: 599px) {
	/* さらに小さいスマホ用の調整が必要な場合はここに記述 */
    /* 例:
    body.category .article-card-container {
        padding: 12px 4px;
    }
    body.category .article-card-container .article-card .article-card-title {
        font-size: 13px;
        padding: 10px;
    }
    */
}


/* ===============================================
   ページネーション スタイル (詳細度UP)
   =============================================== */
/* .page-navigation 自体のスタイルは変更なし */
.page-navigation {
    display: flex;
    justify-content: center; /* 中央揃え */
    margin-top: 30px;    /* 上マージン */
    margin-bottom: 30px; /* 下マージン */
    clear: both;
}

/* 各ページ番号要素 (a, span) */
.page-navigation .page-numbers {
    display: inline-block;
    padding: 8px 14px; /* 内側余白 */
    margin: 0 4px;     /* 外側左右マージン */
    background-color: #f0f0f0; /* 背景色 */
    border: 1px solid #ddd;   /* 枠線 */
    border-radius: 4px;       /* 角丸 */
    text-decoration: none;
    color: #333;             /* 文字色 */
    transition: background-color 0.2s ease, color 0.2s ease; /* ホバー効果 */
}

/* ホバー時 (現在のページ以外) */
.page-navigation .page-numbers:not(.current):hover {
    background-color: #ddd; /* ホバー時背景色 */
    border-color: #ccc;
}

/* 現在のページ */
.page-navigation .page-numbers.current {
    background-color: #0073e6; /* 現在ページの背景色 */
    color: #fff;             /* 現在ページの文字色 */
    border-color: #0073e6;
    font-weight: bold;
    cursor: default;
}

/* 省略記号 (...) */
.page-navigation .page-numbers.dots {
    border: none;
    background-color: transparent;
    padding: 8px 5px;
}

/* 「前へ」「次へ」リンク */
.page-navigation .prev.page-numbers,
.page-navigation .next.page-numbers {
    display: none; /* ★「前へ」「次へ」を非表示にする */
}

/* ===============================================
   その他 子テーマ用カスタムCSS
   =============================================== */

/* ここより下に、他のカスタムCSSを追加してください */