/* コンテンツ一覧 / 書評一覧
   rem基準 + clamp() fluid。幅はフッター(90% / max1240px)と揃える。
   パンくずは書評ページ式(.breadcrumb)でページ下部に配置。
   枠なし・影なし・シンプルモダン  (2026-05-24 林) */

html { background-color: #ffffff; }

.contents-page {
    width: 90%;
    max-width: 1240px;
    margin: clamp(5rem, 12vw, 8rem) auto clamp(3.5rem, 10vw, 6rem);
}

.contents-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.contents-eyebrow {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.125rem;
    color: #b9b9b9;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    margin: 0 0 0.4rem;
}
.contents-heading {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.4;
    margin: 0 0 0.6rem;
}
.contents-lead {
    color: #555;
    font-size: clamp(0.85rem, 2.6vw, 0.95rem);
    line-height: 1.9;
    margin: 0;
}

/* 枠で囲わない: 角丸画像 + カテゴリ + タイトル */
.contents-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.6rem, 4vw, 3rem) clamp(1rem, 2.2vw, 2rem);
}
.contents-item a {
    display: block;
    color: inherit;
    text-decoration: none;
}
.contents-thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: clamp(0.625rem, 2vw, 1rem);
    overflow: hidden;
}
.contents-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.contents-cat {
    display: inline-block;
    margin: 0.85rem 0 0;
    font-size: clamp(0.7rem, 2vw, 0.78rem);
    letter-spacing: 0.04em;
    color: #999;
}
.contents-item-title {
    font-size: clamp(0.85rem, 2.6vw, 1rem);
    font-weight: 500;
    line-height: 1.7;
    margin: 0.2rem 0 0;
}
.contents-empty {
    grid-column: 1 / -1;
    color: #888;
    font-size: 0.95rem;
}

/* PCのみホバー拡大 */
@media (hover: hover) and (pointer: fine) {
    .contents-item a:hover .contents-thumb img { transform: scale(1.04); }
}

/* パンくず(ページ下部・書評ページ式) */
.contents-bc-bottom { margin-top: clamp(3rem, 8vw, 5rem); }
.contents-page .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: clamp(0.78rem, 2.4vw, 0.94rem);
    font-weight: 400;
    overflow-x: auto;
    white-space: nowrap;
}
.contents-page .breadcrumb li { display: flex; align-items: center; }
.contents-page .breadcrumb li:not(:last-child)::after {
    content: '\203A';
    margin: 0 8px;
    color: #888;
}
.contents-page .breadcrumb a {
    text-decoration: none;
    color: #181818;
    transition: color 0.3s ease;
}
.contents-page .breadcrumb a:hover { text-decoration: underline; }
.contents-page .breadcrumb .current { color: #000; font-weight: 500; }

/* タブレット: 3列 */
@media (max-width: 1024px) {
    .contents-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 小タブレット〜スマホ: 2列(余白・文字はclampで自動追従) */
@media (max-width: 700px) {
    .contents-grid { grid-template-columns: repeat(2, 1fr); }
}