/* 一覧のカード（/column の .article-card・/companies の .company-card）＝TOP のカード（.top-card）と同じ見た目
   2026-09-29 スマホのみ → 2026-10-03 伊藤様承認（1️⃣・A）で PC も同じ＋説明文3行＋マウスで記事の図解が流れる（assets/js/top-motion.js）。
   ページ内 <style> より後に読み込む＝同じ強さの指定はこちらが勝つ。
   正本＝docs/editorial/article-design-spec.md §0／検査＝scripts/test_list_card_mobile.py */
@font-face { font-family: "GenJyuu Gothic L"; font-weight: 400; font-display: swap; src: url("/assets/fonts/genjyuu-gothic-l-normal.woff2") format("woff2"); }
@font-face { font-family: "GenJyuu Gothic L"; font-weight: 700; font-display: swap; src: url("/assets/fonts/genjyuu-gothic-l-bold.woff2") format("woff2"); }

.article-card,
.company-card { font-family: "GenJyuu Gothic L", "Noto Sans JP", sans-serif; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.article-card:hover,
.company-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* 🔴 拡大しない＝図解が流れるので、元のサムネも拡大しない */
.company-card:hover .thumb img { transform: none; }
.article-card .body,
.company-card .body { padding: 12px 16px 14px; }
.article-card h3 { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 700; color: var(--navy); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.company-card h3 { margin: 0; font-size: 18px; line-height: 1.45; font-weight: 700; color: var(--navy); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .meta { margin: 0 0 6px; }
.card-ex { margin: 6px 0 0; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-ex:empty { display: none; }
.company-card .tags { margin-top: 8px; font-size: 13px; }

@media (max-width: 768px) {
  .articles-row,
  .companies-grid { grid-template-columns: 1fr; gap: 14px; }
  /* 書き手と日付を1行に（長い名前は末尾を…で省く） */
  .article-card .meta { font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .article-card .meta .date { margin-left: 6px; overflow: visible; }
}