/* category-taikendan用のサムネイル枠・背景色を上書き */
.snaf-grid-article article.category-taikendan .card-thumb {
    background-color: transparent;
    border: none;
}
.snaf-grid-article {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px 2%;
    max-width: 100%;
    line-height: 1.3;
}

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

.snaf-grid-article article {
    border: 1px solid #ccc;
    padding: 1rem;
    box-sizing: border-box;
}

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

.snaf-grid-article article.double-thumb {
    max-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: space-between; /* 画像を等間隔に配置 */
    gap: 2px; /* 画像間の隙間を調整 */
}

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

.snaf-grid-article .cat-label {
    font-size: 0.8em;
    z-index: 1; /* カテゴリラベルだけ暗くするのを防ぐ */
    opacity: 0.88; /* 0.0（完全透明）から1.0（不透明）の範囲で調整 */
}

.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%;
}

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

.snaf-grid-article .single-thumb .card-thumb {
    background-color: #ffffff;
    /** border: 1px solid #ccc **/;
    padding: 0 10px;
    display: flex;
    justify-content: center;
}

.snaf-grid-article .category-taikendan {
    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 {
    content: "体験談";
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ED68A1;
    color: #fff;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9em;
    box-shadow: 0 4px 16px rgba(237, 104, 161, 0.18), 0 2px 8px rgba(120, 60, 100, 0.10);
    z-index: 2;
}

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

    .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枚の画像がはみ出さないように調整 */
    }
}