/* .box内に.snaf-grid-articleがある場合、左右のpaddingを4pxに */
.box:has(.snaf-grid-article) {
    padding-left: 4px;
    padding-right: 4px;
}

/* category-taikendan用のサムネイル枠・背景色を上書き */
.snaf-grid-article article.category-taikendan .card-thumb {
    background-color: transparent;
    border: none;
}
.snaf-grid-article {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCで3列にする */
    gap: 20px 2%;
    max-width: 100%;
    line-height: 1.3;
    justify-content: center; /* 記事が少ない場合に中央寄せ */
}

/* サイドバー内は1列にする */
.sidebar .snaf-grid-article {
    grid-template-columns: 1fr;
}

.snaf-grid-article .article {
    list-style: none; /* すべてのカード（articleタグ）に枠線を表示 */
}

.snaf-grid-article article {
    border: 1px solid #ccc;
    padding: 0;
    box-sizing: border-box;
    max-width: 400px; /* 記事カードの最大幅を広げる（PC2列時でも十分なサイズ） */
    margin: 0 auto; /* 中央揃えを確実にする */
}

/**
 * サイドバー内ではpaddingを0にして隙間をなくす
 */ 
aside .snaf-grid-article article {
    padding: 0;
}

.snaf-grid-article article.double-thumb {
    width: 100%; /* 親要素の幅に合わせる */
}

.snaf-grid-article a {
    text-decoration: none;
    padding: 0; /* これがないとcocoonのcssにより隙間が空きすぎる */
}

.snaf-grid-article .card-title {
    font-size: 80%;
    color: #333;
    display: -webkit-box;
    line-clamp: 2; /* 表示する行数 */
    -webkit-line-clamp: 2; /* 表示する行数（互換性維持） */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.snaf-grid-article {
    overflow: hidden; /* 横方向のスクロールを防ぎ、横に広大な空白ができるのを防ぐ */
}

.snaf-grid-article img {
    width: 100%; /* 画像の幅を親要素に合わせる */
    height: auto; /* 縦横比を維持 */
    object-fit: cover;
    padding: 0 !important;
}

.snaf-grid-article .card-thumb {
    position: relative;
    display: flex;
    flex-wrap: nowrap; /* 横並びにする */
    justify-content: center; /* 中央に配置（1枚時にも有効） */
    gap: 2px; /* 画像間の隙間を調整 */
    background-color: #f7f7f7; /* 画像がない部分や隙間を目立たせない */
    overflow: hidden;
    height: 220px; /* ★高さを固定してガタつきを防止★ */
}

.snaf-grid-article .single-thumb .card-thumb img {
    /* 1枚の時は幅に余裕を持たせ、固定高さ 220px に対して正方形〜横長を許容 */
    max-width: 100%; 
    width: auto; /* width: 100% を解除してアスペクト比を守る */
    min-width: 220px; /* 高さと同じ最小幅を確保 */
    height: 100%; /* 親の固定高 220px をフルに使う */
    object-fit: cover; /* 枠に合わせてクロップ */
    margin: 0 auto;
}

.snaf-grid-article .cat-label {
    font-size: 0.75em; /* 0.8emからわずかに縮小 */
    z-index: 1; /* カテゴリラベルだけ暗くするのを防ぐ */
    opacity: 0.88; /* 0.0（完全透明）から1.0（不透明）の範囲で調整 */
    background-color: #ED68A1; /* cocoonと同じ色を明示的に指定 */
    /* 見切れ対策：幅を拡大 */
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snaf-grid-article .single-thumb .cat-label {
    max-width: 85%; /* 1枚の時はさらに余裕を持たせる */
}

.snaf-grid-article .double-thumb .cat-label {
    max-width: 160%; /* サムネ2つ分なので、通常の2倍を指定（最大200%） */
}

.snaf-grid-article .point-label {
    top: 20px;
    background-color: #0062da;
}

.snaf-grid-article .entry-card-meta {
    position: relative;
    color: #333;
}

.snaf-grid-article .card-thumb:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.snaf-grid-article .double-thumb .card-thumb:before {
    /** width: 200%; **/ /* 削除予定。サムネ2つ分なので、通常の2倍を指定していた。現在はこれを設定すると暗くなる部分がおかしくなる問題発生するため無効化 */
}

.snaf-grid-article .a-wrap {
    background: white;
}

.snaf-grid-article .card-thumb {
    position: relative;
    display: flex;
    flex-wrap: nowrap; /* 横並びにする */
    justify-content: center; /* 中央に配置（1枚時にも有効） */
    gap: 2px; /* 画像間の隙間を調整 */
    background-color: #f7f7f7; /* 画像がない部分や隙間を目立たせない */
    overflow: hidden;
    height: 220px; /* ★高さを固定してガタつきを防止★ */
}

.snaf-grid-article .single-thumb .card-thumb img {
    /* 1枚の時は幅に余裕を持たせ、固定高さ 220px に対して正方形〜横長を許容 */
    max-width: 100%; 
    width: auto; /* width: 100% を解除してアスペクト比を守る */
    min-width: 220px; /* 高さと同じ最小幅を確保 */
    height: 100%; /* 親の固定高 220px をフルに使う */
    object-fit: cover; /* 枠に合わせてクロップ */
    margin: 0 auto;
}

.snaf-grid-article .double-thumb .card-thumb img {
    max-width: calc(50% - 1px); /* 2枚の時だけ半分に制限 */
    width: 100%;
    height: 100%; /* 親の固定高 220px をフルに使う */
    object-fit: cover;
}

.snaf-grid-article .single-thumb .card-thumb {
    padding: 0;
}

/* 体験談・動画・ゲームカテゴリ共通スタイル */
/* is-*-post: ContentTypeClassifierで自動付与（子孫カテゴリも含む） */
/* category-*: 従来の互換性維持 */
.snaf-grid-article .category-taikendan,
.snaf-grid-article .category-video,
.snaf-grid-article .category-game,
.snaf-grid-article .is-taikendan-post,
.snaf-grid-article .is-video-post,
.snaf-grid-article .is-game-post {
    border: 3px solid #ED68A1;
    box-shadow: 0 4px 16px rgba(237, 104, 161, 0.18), 0 2px 8px rgba(120, 60, 100, 0.10);
    position: relative;
}

.snaf-grid-article .category-taikendan::before,
.snaf-grid-article .category-video::before,
.snaf-grid-article .category-game::before,
.snaf-grid-article .is-taikendan-post::before,
.snaf-grid-article .is-video-post::before,
.snaf-grid-article .is-game-post::before {
    position: absolute;
    top: 6px; /* 8pxからわずかに上に詰め、バッティングを回避 */
    right: 6px; /* 8pxから詰め */
    background-color: #6d3d82; /* ディープパープル */
    color: #fff;
    font-weight: bold;
    padding: 2px 10px; /* パディングを絞ってコンパクトに */
    border-radius: 12px;
    font-size: 0.85em; /* 0.9emからわずかに縮小 */
    box-shadow: 0 4px 12px rgba(109, 61, 130, 0.4), 0 2px 6px rgba(90, 50, 110, 0.3);
    z-index: 2;
}

/* 各カテゴリのラベル文字 */
.snaf-grid-article .category-taikendan::before,
.snaf-grid-article .is-taikendan-post::before {
    content: "体験談";
}

.snaf-grid-article .category-video::before,
.snaf-grid-article .is-video-post::before {
    content: "動画";
}

.snaf-grid-article .category-game::before,
.snaf-grid-article .is-game-post::before {
    content: "ゲーム";
}

/* メディアクエリ */
@media (max-width: 768px) {
    .snaf-grid-article {
        grid-template-columns: repeat(2, 1fr) !important; /* スマホで2列にする */
    }

    .snaf-grid-article article.double-thumb {
        max-width: 100%; /* 余白をなくす */
    }

    .snaf-grid-article .double-thumb .card-thumb {
        display: flex;
        flex-wrap: nowrap; /* 横並びにする */
        justify-content: space-between; /* 画像を等間隔に配置 */
        gap: 2px; /* 画像間の隙間を調整 */
    }

    .snaf-grid-article .card-thumb img {
        max-width: calc(50% - 1px); /* 2枚の画像がはみ出さないように調整 */
    }

    /* mobile_limit: モバイルで表示記事数を制限（1, 2, 4に対応） */
    .snaf-grid-article.mobile-limit-1 {
        grid-template-columns: 1fr !important;
    }

    .snaf-grid-article.mobile-limit-1 > a:nth-child(n+2) {
        display: none;
    }

    .snaf-grid-article.mobile-limit-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .snaf-grid-article.mobile-limit-2 > a:nth-child(n+3) {
        display: none;
    }

    .snaf-grid-article.mobile-limit-4 > a:nth-child(n+5) {
        display: none;
    }
}

/* 動画投稿のサムネイルに再生アイコンをオーバーレイ表示 */
.snaf-grid-article .is-video-post .card-thumb::after {
    content: "\f04b"; /* fa-play */
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.45);
    width: 60px;
    height: 60px;
    line-height: 54px; /* アイコンを上下中央に寄せるための微調整 */
    text-align: center;
    border-radius: 50%;
    font-size: 24px;
    padding-left: 4px; /* 再生アイコンの形に合わせて少し右に寄せる */
    z-index: 10;
    pointer-events: none;
    transition: all 0.3s ease;
    border: 3px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    -webkit-font-smoothing: antialiased;
}

.snaf-grid-article .is-video-post:hover .card-thumb::after {
    background: rgba(0, 0, 0, 0.65);
    transform: translate(-50%, -50%) scale(1.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.8);
}

/* col-X: 列数指定（PC・モバイル共通） */
.snaf-grid-article.col-1 {
    grid-template-columns: 1fr !important;
}

.snaf-grid-article.col-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.snaf-grid-article.col-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.snaf-grid-article.col-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* モバイルでの列数指定（col-1, col-2 はモバイルでも維持） */
@media (max-width: 768px) {
    .snaf-grid-article.col-1 {
        grid-template-columns: 1fr !important;
    }

    .snaf-grid-article.col-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* col-3, col-4 はモバイルで2列に */
    .snaf-grid-article.col-3,
    .snaf-grid-article.col-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}