/* articles-scroll-recruit — 記事の札を横に 4 本、掴んで送る
   札: サムネ（比率は props）→ メタ 13px（語の間 14）→ 「記事を読む」14px / 700 ＋ 矢印の窓。枠・影・角丸なし。
   PC は 4 本が見える幅（(100% − 3 × gap) / 4）、≤960 は 2.2 本、SP は 78%（次の札が見える） */
.rca { --rca-gap: var(--cds-g); gap: var(--rca-gap); }
.rca__card { display: grid; gap: 14px; width: calc((100% - var(--rca-gap) * 3) / 4); min-width: 0; color: var(--cds-text); }
.rca__card .va__in { background: var(--cds-bg-soft); }
.rca__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; line-height: 1.6; letter-spacing: 0.04em; color: var(--cds-text-secondary); }
/* 「記事を読む」は base.css の .link（文字 ＋ 20px の丸 ＋ ↗、2 枚の入れ替え）。札全体がリンクなので hover は札で */
.rca__link { width: fit-content; margin: 2px 0 0; }
@media (hover: hover) {
  a.rca__card:hover .link { color: var(--cds-accent); }
  a.rca__card:hover .link .circ { background: var(--cds-accent); color: #fff; }
  a.rca__card:hover .link .circ svg { transform: translate(16px, -16px); transition-duration: 0.45s; }
  a.rca__card:hover .link .circ svg + svg { transform: translate(0, 0); transition-duration: 0.45s; }
}
@media (max-width: 960px) {
  .rca__card { width: calc((100% - var(--rca-gap)) / 2.2); }
}
@media (max-width: 767px) {
  /* 右の余白へ抜けさせ、次の札が見える（ガターぶん右に padding） */
  .rca { --rca-gap: 16px; margin-right: calc(var(--cds-gutter) * -1); padding-right: var(--cds-gutter); }
  .rca__card { width: 78%; }
  .rca__meta { font-size: 12px; }
}