/* 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) * 2) / 3); min-width: 0; color: var(--cds-text); }
.rca__card .va__in { background: var(--cds-bg-soft); }
/* ピン留め（PC）: 面は .wrap のまま（左右は本文の端）、列は本文の左端から右の画面端へ抜ける。札の幅は「本文幅の 3 本」を px で固定（列が max-content になるので % が効かない）。
   札は画面端まで見せ、章の左右で切る（overflow-x: clip は sticky を壊さない。clip-path では見た目だけ切れて、ページに横スクロールが出た: overflow-check 2026-10-18） */
.rca-sec.is-pin { overflow-x: clip; }
.rca-sec.is-pin .rca-sticky { overflow: visible; }
.rca-sec.is-pin .rca { width: max-content; }
.rca-sec.is-pin .rca__card { width: calc((min(100vw - var(--cds-gutter) * 2, var(--cds-content)) - var(--rca-gap) * 2) / 3); }
.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; }
}