/* =====================================================================
   car-film-kobe.jp 読みもの（一覧ページ）
   carheart.jp の css/ch-journal.css の一覧・カードの部分と同じ作り（色は car-film-kobe.jp の配色）
   一覧ページは施工実績の記事ページ（css/cf-works.css）と同じ部品を使い、ここでは一覧の部品だけ足す
   ===================================================================== */
.cfw .cfj-sec{ margin:0 !important; }

/* タイトル */
.cfj-ttl{ padding-block:32px 24px; max-width:860px; gap:16px; }
.cfj-lead{ font-size:14px; line-height:2.05; color:var(--cfw-sub); letter-spacing:.04em; max-width:42em; }

/* 分類ごとのセクション */
.cfj-sec{ padding-block:40px 56px; }
.cfj-sec + .cfj-sec{ border-top:1px solid var(--cfw-line); }

/* カード（スマホ：写真を左に小さく） */
.cfj-cards{ display:grid; grid-template-columns:1fr; gap:28px; }
.cfw .cfj-card{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; align-items:start; color:var(--cfw-fg) !important; transition:opacity .2s; }
.cfw .cfj-card:hover{ opacity:.82; }
.cfj-card__ph{ display:block; aspect-ratio:4 / 3; background:var(--cfw-ph); overflow:hidden; }
.cfj-card__ph img{ width:100% !important; height:100% !important; object-fit:cover; display:block; transition:transform .5s; }
.cfj-card:hover .cfj-card__ph img{ transform:scale(1.03); }
.cfj-card__body{ display:flex; flex-direction:column; gap:6px; }
.cfj-card__nm{ font-size:15px; line-height:1.6; letter-spacing:.02em; }
.cfj-card__tx{ font-size:12px; line-height:1.8; color:var(--cfw-grey); }

/* ====================== PC ====================== */
@media (min-width:960px){
  .cfj-ttl{ padding-block:48px 40px; gap:20px; }
  .cfj-lead{ font-size:15px; }
  .cfj-sec{ padding-block:64px 88px; }
  .cfj-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 28px; }
  .cfw .cfj-card{ grid-template-columns:1fr; gap:14px; }
  .cfj-card__ph{ aspect-ratio:3 / 2; }
  .cfj-card__nm{ font-size:16px; }
  .cfj-card__tx{ font-size:13px; }
}