/* entry-rows-recruit — layerx の事業一覧の見せ方（measured/p-layerx.md §1-2 Business / §1-3）: 1 行 1132×196・行の間 20・画像 200×140（10:7、角丸 12）｜題 32 ＋ 説明 14｜右端に丸矢印 40。
   SP は 1 行 310×114・画像 90×90（正方）｜題 18 ＋ 説明 12、丸矢印は 32（layerx は非表示だが、募集要項の入口なので小さく残す）。
   ここでは面 240×168（本文幅 1200 に合わせて 1.2 倍）、題 clamp(24, 2.2vw, 32)、行の内側 28 / 32、丸 40（線 1px の 40%）。依頼側 2026-10-18「レイアウトバランス、矢印の大きさ、面の高さを layerx に」 */
.rce { display: grid; gap: 20px; }
.rce__row { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; align-items: center; gap: 16px 48px; padding: 28px 32px; margin-inline: -32px; border-radius: 12px; }
.rce__fig { width: 240px; }
.rce__fig .va { border-radius: 12px; }
.rce__fig .va__in { transition: transform 0.8s var(--cds-ease); }
/* hover の面: 白 ＋ 影（layerx 実測 0 8px 40px rgba(21,38,50,.13)、入り .3s / 戻り .5s）。静止時は透明 */
.rce__row::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 12px; background: #fff; box-shadow: 0 8px 40px rgba(13, 13, 14, 0.12); opacity: 0; transition: opacity 0.5s var(--cds-ease-out); pointer-events: none; }
.rce__row > * { position: relative; z-index: 1; }
/* 番号と英字は同じ段（番号 → 14 → 英字、ベースライン揃え）。英字は 13.5 で番号（Lato 13 / 700）と字面の高さをそろえる（依頼側 2026-10-19）。題はその 10 下、特設サイトは題の 6 下（依頼側 2026-10-18「英語の位置、番号の横に移動して、レイアウトバランス整える」） */
.rce__meta { display: flex; align-items: baseline; gap: 14px; }
.rce__name { display: grid; gap: 10px; min-width: 0; justify-items: start; }
.rce__ttl { font-size: clamp(24px, 2.2222vw, 32px); font-weight: var(--cds-weight-head); line-height: 1.4; letter-spacing: 0.02em; color: var(--cds-text); font-feature-settings: "palt"; }
.rce__en { font-family: var(--cds-font-display, var(--cds-font-en)); font-size: 13.5px; font-weight: 500; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cds-text-secondary); }
.rce__sub { margin-top: 6px; }
/* 主の遷移先: 文字 ＋ 40px の丸（layerx の一覧と同じ径）。行全体に伸ばす（::after）。
   丸は layerx _arrow-circle の移植（measured/p-layerx.md §7: 円の線を描く stroke-dasharray 0 → 円周、入り .3s / 戻り .7s、(.47,.16,.24,1)。背面の薄い円は scale 1 → 1.08 しながら消える 1.2s (.18,.06,.23,1)。矢印は動かない）。
   線は 1.2px（layerx の小の丸）、色は墨（差し色は FV と ENTRY に取ってある）。依頼側 2026-10-18「参考のように線が描かれるインタラクションに」 */
.rce__go { display: inline-flex; align-items: center; gap: 16px; justify-self: end; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--cds-text); white-space: nowrap; }
a.rce__go::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.rce__circ { position: relative; display: grid; place-items: center; width: 40px; height: 40px; color: var(--cds-text); }
.rce__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rce__ring circle { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; transform-origin: 50% 50%; }
.rce__ring-bg { opacity: 0.4; transition: transform 1.2s cubic-bezier(0.18, 0.06, 0.23, 1), opacity 1.2s cubic-bezier(0.18, 0.06, 0.23, 1); }
.rce__ring-fg { stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; transform: rotate(-90deg); transition: stroke-dashoffset 0.7s cubic-bezier(0.47, 0.16, 0.24, 1); }
.rce__circ > svg:not(.rce__ring) { position: relative; width: 11px; height: 9px; }
.rce__sub .link { z-index: 2; }
.rce__go[aria-disabled] { cursor: default; }
@media (hover: hover) {
  .rce__row--link:hover::before { opacity: 1; transition-duration: 0.3s; }
  .rce__row--link:hover .rce__fig .va__in { transform: scale(1.03); transition-duration: 0.5s; }
  .rce__row--link:hover .rce__ring-fg { stroke-dashoffset: 0; transition-duration: 0.3s; }
  .rce__row--link:hover .rce__ring-bg { transform: scale(1.08); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .rce__ring circle { transition: none; } }
@media (max-width: 960px) {
  .rce__row { grid-template-columns: 180px minmax(0, 1fr) auto; gap: 16px 28px; padding: 24px; margin-inline: -24px; }
  .rce__fig { width: 180px; }
}
@media (max-width: 767px) {
  /* layerx SP: 画像 90×90（正方、角丸 8）｜題 18 ＋ 説明 12、行の内側 12、行の間 12。丸は 32 */
  .rce { gap: 12px; }
  .rce__row { grid-template-columns: 90px minmax(0, 1fr) auto; gap: 8px 16px; padding: 12px; margin-inline: -12px; border-radius: 8px; }
  .rce__row::before { border-radius: 8px; }
  .rce__fig { width: 90px; }
  .rce__fig .va { --va-ratio: 1 / 1; border-radius: 8px; }
  .rce__fig .va__label { font-size: 7px; letter-spacing: 0.1em; text-indent: 0.1em; }   /* 90px の面に収める */
  .rce__meta { gap: 10px; }
  .rce__no { font-size: 11px; }
  .rce__name { gap: 6px; }
  .rce__ttl { font-size: 18px; line-height: 1.4; }
  .rce__en { font-size: 11px; }
  .rce__sub { margin-top: 2px; }
  .rce__sub .link { font-size: 12px; }
  .rce__go-t { display: none; }   /* SP は丸の矢印だけ（文字は行の題が持つ） */
  .rce__circ { width: 32px; height: 32px; }
  .rce__circ > svg:not(.rce__ring) { width: 10px; height: 8px; }
}