/* people-rows-recruit — 1 人 1 行を WF の密度で（依頼側 2026-10-18「写真大きすぎるので番号を戻して、一つ一つのコンテンツのスペースをコンパクトに。元のワイヤーくらいに。番号のデザイン性を上げる」）
   出典: WF .mv-item（番号 56 / 写真 240 / 文 1fr、上下 48、1px の罫）→ ここでは 番号 72 / 写真 240 × 160（3:2）/ 文、上下 40、1px の罫で区切る。
   番号は表示語（Chillax 28 / 400、行動指針の番号と同じ声）で、行の頭に。写真の上に文字を載せない */
.rcp { display: grid; gap: 0; border-top: 1px solid var(--cds-rule); }
/* 写真は文の塊と上端をそろえ、天地も文の高さに合わせる（依頼側 2026-10-19「右の文のブロックと上の位置を揃えて、天地の高さを揃えるくらい気持ち大きく」）: 列 320、行は stretch、面は比率を捨てて高さ 100%（最低 200） */
.rcp__item { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px 48px; align-items: stretch; padding: 40px 0; border-bottom: 1px solid var(--cds-rule); }
.rcp__item--no { grid-template-columns: 72px 320px minmax(0, 1fr); }
.rcp__item > .rcp__no { align-self: start; }
.rcp__no { padding-top: 2px; font-family: var(--cds-font-display, var(--cds-font-en)); font-size: 28px; font-weight: 500; line-height: 1; letter-spacing: 0.02em; color: var(--cds-text); font-variant-numeric: tabular-nums; }
.rcp__img { min-width: 0; display: flex; }
.rcp__img .va { aspect-ratio: auto; height: 100%; min-height: 200px; }
.rcp__img .va__in { background: var(--cds-bg-soft); }
.rcp__body { display: grid; gap: 12px; align-content: start; min-width: 0; }
.rcp__meta { margin-top: -0.3em; }   /* 行送りの上の余白を消して、文字の上端を写真の上端にそろえる */
/* 年次・職種・事業: 文字だけ。年次は 700 で立たせ、語の間は余白（区切り記号を置かない） */
.rcp__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 13px; line-height: 1.6; letter-spacing: 0.06em; color: var(--cds-text-secondary); }
.rcp__year { font-weight: 700; color: var(--cds-text); }
/* 題 19 / 1.7、原本の <br> で 2 行（文の列は約 840px で 1 行 29 字が入る） */
.rcp__ttl { font-size: clamp(17px, 1.3194vw, 19px); font-weight: var(--cds-weight-head); line-height: 1.7; letter-spacing: 0.02em; color: var(--cds-text); font-feature-settings: "palt"; }
.rcp__txt { font-size: 14.5px; line-height: 1.9; letter-spacing: 0.02em; color: var(--cds-text-body); text-wrap: pretty; }
.rcp__txt .ph { word-break: normal; }
.rcp__txt b { font-weight: 700; color: var(--cds-text); }
/* 段階的開示: grid-rows 0fr → 1fr（0.6s）。閉じているときは中を見えなくする。続きの行は罫がつながる（上の罫は持たない） */
.rcp__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--cds-ease); }
.rcp__more.is-open { grid-template-rows: 1fr; }
.rcp__more-in { overflow: hidden; min-height: 0; }
.rcp__more:not(.is-open) .rcp__more-in { visibility: hidden; transition: visibility 0s 0.6s; }
.rcp--rest { border-top: 0; }
.rcp__ctrl { display: flex; justify-content: center; margin-top: 48px; }
/* 開くボタン: 枠の四角のセカンダリーボタン（依頼側 2026-10-19「枠線のセカンダリーボタンにして、添付の形でデザイン性とインタラクションを工夫」）。
   枠は他のピル（説明会に申し込む）とそろえて角丸 999・墨 1.5px（依頼側 2026-10-19「ここだけ浮いているので角アールに。線の太さも揃える」）、高さ 56、左右 30。英字 VIEW MORE（Chillax 13 / 500 / 0.16em）→ 20 → 細い線の矢印（線 1px、32 幅で見せ、hover で 44 に伸びる）。
   hover: 地に墨 5% がうっすら入り、矢印の線が右へ 12 伸びる（0.6s expo）。開くと CLOSE、矢印は左向き（180deg） */
.rcp__btn { --e: cubic-bezier(0.19, 1, 0.22, 1); display: inline-flex; align-items: center; gap: 20px; min-width: 220px; height: 56px; padding: 0 30px; border: 1.5px solid var(--cds-ink); border-radius: 999px; background: transparent; cursor: pointer; font-family: var(--cds-font-display, var(--cds-font-en)); font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cds-text); justify-content: space-between; transition: border-color 0.6s var(--e), background-color 0.6s var(--e); }
.rcp__btn .t { position: relative; display: block; line-height: 1; top: 1px; }
.rcp__ico { position: relative; display: block; flex: none; width: 32px; height: 8px; overflow: hidden; color: var(--cds-text); transition: width 0.6s var(--e), color 0.6s var(--e), transform 0.6s var(--e); transform-origin: 50% 80%; }
.rcp__ico svg { position: absolute; right: 0; top: 0; width: 56px; height: 8px; }
.rcp__btn[aria-expanded="true"] .rcp__ico { width: 32px; transform: scaleX(-1); }   /* 開いたら CLOSE ← （上向きに回すと切れて「1」に見えた） */
.rcp__btn:focus-visible { outline: 2px solid var(--cds-accent); outline-offset: 3px; }
@media (hover: hover) {
  .rcp__btn:hover { background: color-mix(in srgb, var(--cds-text) 5%, transparent); }
  .rcp__btn:hover .rcp__ico { width: 44px; color: var(--cds-text); }
  .rcp__btn[aria-expanded="true"]:hover .rcp__ico { width: 44px; }
}
@media (prefers-reduced-motion: reduce) { .rcp__btn, .rcp__ico { transition: none; } }
@media (max-width: 960px) {
  .rcp__item { grid-template-columns: 240px minmax(0, 1fr); gap: 16px 32px; padding: 32px 0; }
  .rcp__item--no { grid-template-columns: 56px 240px minmax(0, 1fr); }
  .rcp__no { font-size: 24px; }
  .rcp__ttl br { display: none; }
}
@media (max-width: 767px) {
  /* 番号 → 写真（全幅 3:2）→ 文 の縦積み。行の上下 32 */
  .rcp__item, .rcp__item--no { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .rcp__no { padding-top: 0; font-size: 24px; }
  .rcp__body { padding-top: 0; }
  .rcp__img .va { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
  .rcp__meta { margin-top: 0; }
  .rcp__ttl { font-size: 17px; line-height: 1.7; }
  .rcp__ttl br { display: none; }
  .rcp__txt { font-size: 14.5px; }
  .rcp__ctrl { margin-top: 32px; justify-content: flex-start; }
}

/* ---------- 動き（依頼側 2026-10-19「ホバーすると写真が大きくなったり、文字の表示の際に動き」）----------
   表示: 写真は下から幕が上がる（clip-path inset 100% → 0、1.1s cubic-bezier(.77,0,.175,1)）、中は 1.08 → 1。見出しは行ごとのマスク（rc-lines、110% ＋ skewY 3deg）、肩書き → 見出し → 0.2s 後に本文。
   hover: 行のどこに乗っても写真が枠の中で 1.05 に（1.2s expo）。題の色は変えない */
.rcp__ttl .line { display: block; }
.rcp__ttl br { display: none; }
/* 写真の出現は _recruit.css の [data-rc-morph]（円 → 角丸の四角。依頼側 2026-10-19「写真が円からできる感じを hello.ai のように。少し角丸に」）。仕上がりの角丸 12 */
.rcp__img[data-rc-morph] { --mr: 12px; }
@media (max-width: 767px) { .rcp__img[data-rc-morph] { --mr: 10px; } }
/* hover: 行のどこに乗っても、写真の枠（.rcp__img）ごと 1.04（0.9s expo）。出現の動き（.va の animation）とぶつけないため、外の箱で拡大する */
.rcp__img { transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1); transform-origin: 50% 50%; }
@media (hover: hover) {
  .rcp__item:hover .rcp__img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .rcp__img { transition: none; } }