/* pages/rpo.css — RPO（採用代行）のページだけで使う記述 */

/* ---------- ファーストビュー：内定に向かって右肩上がりの1本の線。その上に、6つの仕事が階段状にそろって並ぶ（.rpj・動きは rpo.js）
   枠で囲まず、右側を画面の端まで使う。カードの中は文字を減らし、図と数字で見せる ---------- */
.rph { overflow-x: clip; }
.rph .page-hero__inner { align-items: center; }
.rpj { --cw: clamp(124px, 10.4vw, 150px); position: relative; height: 580px; margin-right: calc(-1 * max(24px, (100vw - 1136px) / 2)); }
.rpj::before { content: ""; position: absolute; inset: 0 0 0 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(46,184,222,.14), transparent); pointer-events: none; }
.rpj__lg { position: absolute; left: 6%; top: 4%; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--brand-blue); }
.rpj__lg i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #5cc8e8, #3a8ac8); }
.rpj__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rpj__base { fill: none; stroke: #d3dee8; stroke-width: 2; }
.rpj__line { fill: none; stroke: var(--brand-blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--done, 100)); transition: stroke-dashoffset 1.3s var(--ease); }
.rpj__dot { position: absolute; left: 0; top: 0; z-index: 5; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--brand-sky); box-shadow: 0 0 0 6px rgba(46,184,222,.22), 0 0 24px rgba(46,184,222,.7); transform: translate(var(--dx, -999px), var(--dy, -999px)); }
.rpj__mb { display: none; }
/* カード：同じ大きさ。線の上の目印の真上に立つ */
.rpj__c { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: var(--cw); display: grid; gap: 10px; padding: 12px 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -18px rgba(10,52,102,.35), 0 0 0 1px rgba(17,18,20,.05); transform: translate(-50%, calc(-100% - 20px)); transform-origin: 50% 100%; transition: opacity .5s, transform .5s var(--ease), box-shadow .5s; }
.rpj__c::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: #c9d6e3; }
.rpj__c::after { content: ""; position: absolute; left: 50%; top: calc(100% + 14px); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid #c9d2db; box-sizing: border-box; }
.rpj__c.is-done::after { background: var(--brand-blue); border-color: var(--brand-blue); }
.rpj__c.is-on { z-index: 4; transform: translate(-50%, calc(-100% - 20px)) scale(1.1); box-shadow: 0 28px 56px -20px rgba(10,52,102,.45), 0 0 0 1.5px var(--brand-blue); }
.rpj__c.is-on::after { border-color: var(--brand-blue); box-shadow: 0 0 0 5px rgba(58,138,200,.18); }
.rpj__c.is-todo { opacity: .4; }
.rpj__k { display: grid; font-size: 13px; font-weight: 500; line-height: 1.35; }
.rpj__k small { font-family: var(--font-en); font-size: 9px; font-weight: 400; letter-spacing: .14em; color: var(--brand-blue); }
/* 図のエリア（高さをそろえる） */
.rpj__v { position: relative; height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; background: var(--paper); }
.rpj__doc { width: 34px; height: 42px; fill: #fff; stroke: #b9c6d2; stroke-width: 1.6; }
.rpj__doc path { stroke-linecap: round; }
.rpj__tag { font-size: 10px; padding: 3px 8px; border-radius: 99px; background: var(--brand-blue); color: #fff; white-space: nowrap; }
.rpj__dots { display: grid; grid-template-columns: repeat(5, 7px); gap: 4px; }
.rpj__dots i { width: 7px; height: 7px; border-radius: 50%; background: #d3dee8; transition: background .25s; }
.rpj__dots i.is-on, .rpj:not(.is-js) .rpj__dots i, .rpj__c.is-done .rpj__dots i { background: var(--brand-blue); }
.rpj__num { display: flex; align-items: baseline; gap: 2px; }
.rpj__num b { font-family: var(--font-en); font-weight: 300; font-size: 28px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.rpj__num small { font-size: 11px; color: var(--ink-2); }
.rpj__v--app { flex-direction: column; gap: 6px; }
.rpj__mail { position: relative; width: 40px; height: 28px; border-radius: 4px; background: #fff; border: 1.6px solid #b9c6d2; }
.rpj__mail::before { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 12px; border-left: 1.6px solid #b9c6d2; border-bottom: 1.6px solid #b9c6d2; transform: skewY(0) rotate(-45deg) scale(.7); transform-origin: 50% 0; display: none; }
.rpj__mail b { position: absolute; right: -12px; top: -12px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 99px; background: var(--brand-sky); color: #fff; font-family: var(--font-en); font-weight: 500; font-size: 12px; line-height: 24px; text-align: center; }
.rpj__v--doc .rpj__doc path { display: none; }
.rpj__cks { position: absolute; left: calc(50% - 30px); top: 16px; display: grid; gap: 5px; }
.rpj__cks i { width: 20px; height: 6px; border-radius: 3px; background: var(--brand-blue); }
.rpj__cks i::after { content: ""; }
.rpj__v--doc { justify-content: center; gap: 22px; }
.rpj__stamp { padding: 4px 10px; border: 2px solid var(--ink); border-radius: 6px; font-size: 12px; font-weight: 500; letter-spacing: .1em; transform: rotate(-8deg); }
.rpj__cal { display: grid; width: 40px; border-radius: 6px; overflow: hidden; background: #fff; border: 1.6px solid #b9c6d2; text-align: center; line-height: 1.1; }
.rpj__cal small { background: var(--brand-blue); color: #fff; font-size: 9px; padding: 2px 0; }
.rpj__cal b { font-family: var(--font-en); font-weight: 400; font-size: 18px; padding: 3px 0 4px; }
.rpj__pair { display: flex; }
.rpj__pair i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--paper); }
.rpj__pair i + i { margin-left: -6px; }
.rpj__pair .is-client { background: var(--ink); }
.rpj__pair .is-us { background: linear-gradient(135deg, #5cc8e8, #3a8ac8); }
.rpj__v--offer { flex-direction: column; gap: 4px; background: linear-gradient(135deg, var(--brand-sky), var(--brand-blue)); color: #fff; }
.rpj__v--offer b { font-size: 15px; font-weight: 500; letter-spacing: .14em; }
.rpj__goal { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.rpj__goal::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border-right: 2px solid var(--brand-blue); border-bottom: 2px solid var(--brand-blue); transform: rotate(45deg); }
/* 動き：いまのカードの中だけ、順に現れる */
.rpj.is-js .rpj__c.is-on [data-at] { opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--ease); }
.rpj.is-js .rpj__c.is-on .rpj__stamp[data-at] { transform: rotate(-8deg) scale(1.6); }
.rpj.is-js .rpj__c.is-on [data-at].is-in { opacity: 1; transform: none; }
.rpj.is-js .rpj__c.is-on .rpj__stamp[data-at].is-in { transform: rotate(-8deg); }
@media (max-width: 860px) { .rpj { height: 540px; margin: 8px calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l)); } }
/* スマホ：上に進み具合、その下にいまのカードを1枚だけ大きく */
@media (max-width: 600px) {
  .rpj { height: 300px; margin: 8px 0 0; --cw: 220px; }
  .rpj::before, .rpj__svg, .rpj__dot { display: none; }
  .rpj__lg { left: 0; top: auto; bottom: 0; width: 100%; justify-content: center; }
  .rpj__c { left: 50%; top: 54%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
  .rpj__c::before, .rpj__c::after { display: none; }
  .rpj__c:nth-child(9) { opacity: 1; }
  .rpj.is-js .rpj__c { opacity: 0; transform: translate(-50%, -44%); }
  .rpj.is-js .rpj__c.is-on { opacity: 1; transform: translate(-50%, -50%); }
  .rpj__k { font-size: 16px; } .rpj__v { height: 90px; }
  .rpj__mb { position: absolute; left: 0; right: 0; top: 12px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 2px solid #dfe5ea; }
  .rpj__mb li { position: relative; display: grid; justify-items: center; padding-top: 12px; font-size: 10px; color: var(--ink-2); white-space: nowrap; }
  .rpj__mb li::before { content: ""; position: absolute; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #c9d2db; box-sizing: border-box; }
  .rpj__mb li.is-done::before { background: var(--brand-blue); border-color: var(--brand-blue); }
  .rpj__mb li.is-on::before { border-color: var(--brand-blue); box-shadow: 0 0 0 4px rgba(58,138,200,.2); }
  .rpj__mb li.is-on { color: var(--ink); font-weight: 500; }
}
@media (prefers-reduced-motion: reduce) { .rpj__line { transition: none; } }

/* ---------- 任せられる業務：アイコン＋1本の線でつながる5ステップ。業務はラベルで並べる（.rpl） ---------- */
.rpl__flow { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.rpl__flow::before { content: ""; position: absolute; left: 28px; right: 28px; top: 28px; height: 2px; background: linear-gradient(90deg, #cfe0ee, var(--brand-blue)); }
.rpl__s { position: relative; display: grid; align-content: start; gap: 14px; }
.rpl__ic { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--brand-blue); box-shadow: 0 0 0 6px var(--paper), 0 10px 24px -10px rgba(10,52,102,.35); }
.rpl__s:last-child .rpl__ic { background: var(--brand-blue); color: #fff; }
.rpl__ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rpl__h { display: grid; gap: 4px; font-size: 19px; font-weight: 500; line-height: 1.4; }
.rpl__h small { font-family: var(--font-en); font-size: 11px; font-weight: 400; letter-spacing: .16em; color: var(--brand-blue); }
.rpl__s > ul { display: flex; flex-wrap: wrap; gap: 6px; }
.rpl__s > ul li { padding: 6px 12px; border-radius: 99px; background: #fff; border: 1px solid #e1e7ec; font-size: 13px; line-height: 1.5; word-break: auto-phrase; }
/* 下の帯：このすべてを担う ＋ 全体を通して */
.rpl__band { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px 32px; margin-top: 40px; padding: 22px 28px; border-radius: 18px; background: var(--ink); color: #fff; }
.rpl__all { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; }
.rpl__av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #5cc8e8, #3a8ac8); }
.rpl__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; }
.rpl__bl { font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.6); }
.rpl__base ul { display: flex; flex-wrap: wrap; gap: 6px; }
.rpl__base li { font-size: 13px; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.1); color: #fff; }
.rps__note { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 1000px) {
  .rpl__flow { grid-template-columns: 1fr; gap: 28px; }
  .rpl__flow::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: linear-gradient(180deg, #cfe0ee, var(--brand-blue)); }
  .rpl__s { grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 10px; }
  .rpl__ic { grid-row: 1 / 3; }
  .rpl__h { align-self: center; }
  .rpl__s > ul { grid-column: 2; }
  .rpl__band { grid-template-columns: 1fr; }
  .rpl__base { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .rpl__s { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .rpl__ic { width: 44px; height: 44px; } .rpl__ic svg { width: 22px; height: 22px; }
  .rpl__flow::before { left: 21px; top: 22px; bottom: 22px; }
  .rpl__h { font-size: 17px; }
  .rpl__s > ul li { font-size: 12px; padding: 5px 10px; }
  .rpl__band { padding: 20px; } .rpl__all { font-size: 15px; align-items: flex-start; }
}

/* ---------- 強み：貴社のチームに入るメンバー（.rpm2） ---------- */
.rpm2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rpm2__c { display: grid; align-content: start; gap: 10px; padding: 28px 26px 26px; border-radius: 20px; background: var(--paper); }
.rpm2__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.rpm2__nm { margin-top: 6px; }
.rpm2__nm b { display: block; font-size: 20px; font-weight: 500; letter-spacing: .06em; }
.rpm2__nm small { font-family: var(--font-en); font-size: 12px; color: var(--ink-2); letter-spacing: .06em; }
.rpm2__rl { justify-self: start; font-size: 12px; padding: 4px 12px; border-radius: 99px; background: var(--ink); color: #fff; }
.rpm2__tx { font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.rpm2__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.rpm2__tags li { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: #fff; color: var(--brand-blue); }
.rpm2__kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--ink); }
.rpm2__kpi li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; padding: 24px 24px 0 0; }
.rpm2__kpi li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.rpm2__kpi b { font-family: var(--font-en); font-weight: 200; font-size: clamp(44px, 4.6vw, 64px); line-height: 1; color: var(--brand-blue); }
.rpm2__kpi span { font-size: 15px; }
.rpm2__kpi small { flex-basis: 100%; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.rpm2__note { margin-top: 28px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 1000px) { .rpm2 { grid-template-columns: 1fr; } .rpm2__c { grid-template-columns: 80px minmax(0, 1fr); column-gap: 18px; } .rpm2__img { width: 80px; height: 80px; grid-row: 1 / 3; } .rpm2__c > :not(.rpm2__img):not(.rpm2__nm):not(.rpm2__rl) { grid-column: 1 / -1; } }
@media (max-width: 600px) { .rpm2__c { padding: 22px 20px; } .rpm2__kpi { grid-template-columns: 1fr; } .rpm2__kpi li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 20px; } .rpm2__kpi li { padding: 20px 0 0; } }

/* ---------- 入り方の例（.rpv） ---------- */
.rpv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rpv__c { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 30px; border-radius: 18px; background: #fff; }
.rpv__co { font-size: 12px; letter-spacing: .06em; color: var(--brand-blue); }
.rpv__h { font-size: 19px; font-weight: 500; line-height: 1.6; }
.rpv__l { display: grid; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.rpv__l li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.rpv__l li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; border-left: 1.5px solid var(--brand-blue); border-bottom: 1.5px solid var(--brand-blue); transform: rotate(-45deg); }

/* ---------- 情報の扱い（.rpsec） ---------- */
.rpsec__l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rpsec__l li { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 16px; padding: 22px; border-radius: 16px; border: 1px solid var(--line); }
.rpsec__l img { width: 56px; height: 56px; }
.rpsec__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #eaf3fa; color: var(--brand-blue); }
.rpsec__ic svg { width: 26px; height: 26px; }
.rpsec__l b { display: block; font-size: 15px; font-weight: 500; line-height: 1.6; }
.rpsec__l small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); line-height: 1.6; }

/* ---------- 体制と料金（.rpp） ---------- */
.rpp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.rpp > div { padding: 32px; border-radius: 18px; background: #fff; }
.rpp__h { font-size: 18px; font-weight: 500; }
.rpp__dl { margin-top: 16px; }
.rpp__dl > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.8; }
.rpp__dl dt { font-size: 13px; color: var(--ink-2); padding-top: 2px; }
.rpp__dl dd { margin: 0; }
.rpp__lead { margin-top: 12px; font-size: 15px; line-height: 1.9; color: var(--ink-2); }
.rpp__ex { margin-top: 20px; padding: 18px 20px; border-radius: 14px; background: var(--paper); }
.rpp__exh { font-size: 12px; letter-spacing: .08em; color: var(--ink-2); }
.rpp__ex ul { margin-top: 8px; }
.rpp__ex li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rpp__ex li:last-child { border-bottom: 0; }
.rpp__ex b { font-family: var(--font-en); font-weight: 300; font-size: 24px; color: var(--brand-blue); white-space: nowrap; }
.rpp__ex b small { margin-left: 4px; font-family: var(--font-ja); font-size: 12px; color: var(--ink-2); }

/* ---------- ダイレクトソーシング支援との違い（.rpc） ---------- */
.rpc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.rpc__c { display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 30px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.rpc__c--on { border: 1.5px solid var(--ink); }
.rpc__nm { font-size: 18px; font-weight: 500; }
.rpc__c dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.8; }
.rpc__c dt { color: var(--ink-2); font-size: 13px; }
.rpc__c dd { margin: 0; }
.rpc__c .text-link { align-self: flex-start; margin-top: auto; font-family: var(--font-ja); font-size: 13px; letter-spacing: .06em; }

@media (max-width: 1000px) {
  .rpv, .rpsec__l { grid-template-columns: 1fr; }
  .rpp, .rpc { grid-template-columns: 1fr; }
}
/* スマホ：任せられる業務は、番号つきの縦のステップに */
@media (max-width: 600px) {
  .rpp > div { padding: 24px 20px; }
  .rpc__c { padding: 24px 20px; }
  .rpc__c dl > div { grid-template-columns: 1fr; gap: 2px; }
  .rpsec__l li { padding: 18px; }
}

/* ファーストビューの見出し：改行位置を保ったまま、横幅に収める */
.rph .page-hero__title { font-size: clamp(28px, 3.2vw, 46px); }
@media (max-width: 600px) {
  .rph .page-hero__title { font-size: 26px; }
  .rph .page-hero__title .nowrap { white-space: normal; }
}
/* ファーストビュー：右の図を大きめに */
@media (min-width: 861px) { .rph .page-hero__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.rph { overflow-x: clip; }
/* カード同士が重ならない大きさに。幅が足りない画面では、図を文章の下に置いて横幅いっぱいに使う */
.rpj { --cw: clamp(112px, 8.6vw, 128px); }
.rpj__stamp { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 601px) {
  .rph .page-hero__inner { grid-template-columns: 1fr !important; }
  .rpj { height: 520px; margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l)); --cw: clamp(112px, 13vw, 128px); }
}
.rpl__band { grid-template-columns: 1fr; gap: 14px; }
.rpl__base { justify-content: flex-start; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.rpl__s > ul li { white-space: nowrap; }
@media (max-width: 600px) { .rpl__s > ul li { white-space: normal; } }
html[lang="en"] .rpl__s > ul li { white-space: normal; }
/* 線：右肩上がりの曲線。下を薄い青で塗って、伸びていくグラフに見せる */
.rpj__area { fill: url(#rpjA); }
/* カードの中身が白い枠からはみ出さないように */
.rpj { --cw: clamp(128px, 9.6vw, 142px); height: 520px; }
.rpj__v { overflow: hidden; padding: 0 8px; gap: 8px; height: 66px; }
.rpj__v--job { flex-direction: column; gap: 5px; }
.rpj__v--job .rpj__doc { width: 24px; height: 30px; }
.rpj__tag { font-size: 9.5px; padding: 2px 7px; }
.rpj__dots { grid-template-columns: repeat(5, 5px); gap: 3px; }
.rpj__dots i { width: 5px; height: 5px; }
.rpj__num b { font-size: 24px; }
.rpj__v--doc { gap: 12px; }
.rpj__v--doc .rpj__doc { width: 28px; height: 36px; }
.rpj__cks { left: auto; top: auto; position: static; margin-left: -34px; width: 22px; }
.rpj__cks i { width: 16px; height: 5px; }
.rpj__stamp { font-size: 11px; padding: 3px 7px; }
@media (max-width: 1180px) and (min-width: 601px) { .rpj { height: 480px; } }
@media (max-width: 600px) { .rpj__area { display: none; } .rpj__v { height: 90px; } .rpj__v--job .rpj__doc { width: 34px; height: 42px; } .rpj__tag { font-size: 11px; } .rpj__dots { grid-template-columns: repeat(5, 7px); gap: 4px; } .rpj__dots i { width: 7px; height: 7px; } .rpj__num b { font-size: 30px; } }
.rpj { --cw: clamp(120px, 9vw, 132px); }
.rpj { --cw: clamp(116px, 8.5vw, 122px); }
@media (max-width: 1360px) and (min-width: 1181px) { .rpj { --cw: 112px; } .rpj__c { padding: 10px 10px 12px; } }

/* ---------- 2つの入り方（.rpt2）：左にケースの説明、右に「誰がどの業務を持つか」が入れ替わる図（動きは rpo.js） ---------- */
.rpt2 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.rpt2__tabs { display: grid; gap: 12px; }
.rpt2__tab { display: grid; gap: 6px; padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.rpt2__tab small { font-family: var(--font-en); font-size: 11px; letter-spacing: .14em; color: var(--ink-2); }
.rpt2__tab b { font-size: 20px; font-weight: 500; }
.rpt2__tab span { font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.rpt2__tab em { justify-self: start; margin-top: 4px; font-style: normal; font-size: 12px; padding: 4px 12px; border-radius: 99px; background: var(--paper); color: var(--ink-2); }
.rpt2__tab em::before { content: "向いている："; }
html[lang="en"] .rpt2__tab em::before { content: "Best for: "; }
.rpt2__tab.is-on { border-color: var(--brand-blue); box-shadow: 0 16px 40px -20px rgba(10,52,102,.35), inset 4px 0 0 var(--brand-blue); }
.rpt2__tab.is-on small { color: var(--brand-blue); }
.rpt2__tab.is-on em { background: #eaf3fa; color: var(--brand-blue); }
/* 図 */
.rpt2__v { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: 520px; }
.rpt2__lane { border-radius: 18px; background: var(--paper); padding: 18px; transition: background .5s; }
.rpt2__lane--u { background: #eaf3fa; }
.rpt2__who { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.rpt2__lane--u .rpt2__who { color: var(--brand-blue); }
.rpt2__ppl { display: flex; }
.rpt2__ppl i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--paper); background: var(--ink); transition: opacity .4s, width .4s, margin .4s; }
.rpt2__ppl i + i { margin-left: -8px; }
.rpt2__lane--u .rpt2__ppl i { border-color: #eaf3fa; background: linear-gradient(135deg, #5cc8e8, #3a8ac8); }
.rpt2__ppl i.is-a { background: #9aa3ad; }
.rpt2__v[data-k="a"] .rpt2__ppl i.is-b, .rpt2__v[data-k="b"] .rpt2__ppl i.is-a { opacity: 0; width: 0; margin-left: 0; border-width: 0; }
.rpt2__ts { position: absolute; inset: 0; pointer-events: none; }
.rpt2__t { position: absolute; left: var(--l, 0); top: var(--t, 0); width: calc(50% - 7px - 36px); padding: 9px 14px; border-radius: 12px; background: #fff; font-size: 14px; box-shadow: 0 6px 16px -10px rgba(10,52,102,.4); transition: left .7s var(--ease), top .7s var(--ease), background .4s, color .4s; transition-delay: var(--d, 0s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt2__t.is-u { background: var(--brand-blue); color: #fff; }
/* JSなし：ケース1の配置を、CSSの並びで見せる */
.rpt2__v:not(.is-js) .rpt2__ts { position: static; display: none; }
@media (max-width: 1000px) { .rpt2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .rpt2__v { height: 470px; gap: 8px; }
  .rpt2__lane { padding: 12px; }
  .rpt2__who { font-size: 12px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .rpt2__t { width: calc(50% - 4px - 20px); font-size: 11.5px; padding: 8px 10px; }
  .rpt2__tab { padding: 16px 18px; } .rpt2__tab b { font-size: 17px; } .rpt2__tab span { font-size: 13px; }
}
.rpt2__v { height: 500px; }
@media (max-width: 600px) { .rpt2__v { height: 450px; } }
.rpj__v--pool { flex-direction: column; gap: 4px; }
.rpj__v--pool .rpj__dots { grid-template-columns: repeat(10, 5px); }
.rpj__v--pool .rpj__num b { font-size: 22px; }

/* ---------- 情報の扱い・リスク対策（.rps2）：許可・認証の4枚 ＋ リスクごとの対応表 ---------- */
.rps2__cred { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 18px; background: var(--ink); color: #fff; overflow: hidden; }
.rps2__cred li { display: grid; gap: 4px; padding: 22px 24px; }
.rps2__cred li + li { border-left: 1px solid rgba(255,255,255,.14); }
.rps2__cred small { font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.rps2__cred b { font-size: 20px; font-weight: 500; letter-spacing: .02em; }
.rps2__cred span { font-size: 12px; color: var(--brand-sky); }
.rps2 { margin-top: 24px; border-top: 1px solid var(--ink); }
.rps2__hd, .rps2__r { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; }
.rps2__hd { padding: 14px 0; font-size: 12px; letter-spacing: .08em; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.rps2__r { padding: 22px 0; border-bottom: 1px solid var(--line); }
.rps2__c { font-size: 16px; font-weight: 500; line-height: 1.6; word-break: auto-phrase; }
.rps2__risk, .rps2__do { display: grid; gap: 6px; align-content: start; }
.rps2__risk li, .rps2__do li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.7; }
.rps2__risk li { color: var(--ink-2); }
.rps2__risk li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: #d9a59a; }
.rps2__do li::before { content: ""; position: absolute; left: 0; top: .35em; width: 15px; height: 15px; border-radius: 50%; background: var(--brand-blue); }
.rps2__do li::after { content: ""; position: absolute; left: 5px; top: calc(.35em + 3px); width: 4px; height: 7px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); }
@media (max-width: 1000px) {
  .rps2__cred { grid-template-columns: 1fr 1fr; }
  .rps2__cred li:nth-child(3) { border-left: 0; }
  .rps2__cred li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
  .rps2__hd { display: none; }
  .rps2__r { grid-template-columns: 1fr; gap: 12px; }
  .rps2__risk::before { content: "想定されるリスク"; font-size: 11px; letter-spacing: .08em; color: var(--ink-2); }
  .rps2__do::before { content: "当社の対応"; font-size: 11px; letter-spacing: .08em; color: var(--brand-blue); margin-top: 6px; }
  html[lang="en"] .rps2__risk::before { content: "Risks"; } html[lang="en"] .rps2__do::before { content: "Our measures"; }
}
@media (max-width: 600px) { .rps2__cred { grid-template-columns: 1fr; } .rps2__cred li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); } .rps2__cred li { padding: 18px 20px; } }

/* 2つの入り方：左（ケース）と右（図）の上端・高さをそろえる */
.rpt2 { align-items: stretch; }
.rpt2__l { display: grid; }
.rpt2__tabs { align-content: stretch; grid-auto-rows: 1fr; }
.rpt2__v { height: auto; min-height: 480px; }
@media (max-width: 1000px) { .rpt2__v { min-height: 470px; } }
@media (max-width: 600px) { .rpt2__v { min-height: 450px; } }

/* ---------- 情報の扱い：許可・認証 ＋ 相手が気にする3点。細かい対応表は折りたたむ ---------- */
.rps2__key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.rps2__key li { display: grid; align-content: start; gap: 8px; padding: 24px 24px 26px; border-radius: 18px; background: var(--paper); }
.rps2__no { font-family: var(--font-en); font-size: 12px; letter-spacing: .14em; color: var(--brand-blue); }
.rps2__key b { font-size: 18px; font-weight: 500; line-height: 1.5; }
.rps2__key p { font-size: 14px; line-height: 1.9; color: var(--ink-2); }
.rps2__more { margin-top: 16px; border-top: 1px solid var(--line); }
.rps2__more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 18px 0; font-size: 14px; color: var(--ink-2); }
.rps2__more > summary::-webkit-details-marker { display: none; }
.rps2__more > summary::after { content: "+"; font-family: var(--font-en); font-size: 20px; line-height: 1; }
.rps2__more[open] > summary::after { content: "−"; }
.rps2__more .rps2 { margin-top: 0; }
@media (max-width: 1000px) { .rps2__key { grid-template-columns: 1fr; } }

/* ---------- 働き方：3つのスタイルを、絵つきで選べる形に（.rpw2） ---------- */
.rpw2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rpw2__c { display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 10px; padding: 18px 18px 22px; border-radius: 22px; background: #fff; box-shadow: 0 20px 50px -30px rgba(10,52,102,.3); }
.rpw2__ill { position: relative; height: 150px; margin-bottom: 8px; border-radius: 14px; background: linear-gradient(160deg, #eaf3fa, #f6f9fc); overflow: hidden; }
.rpw2__no { padding: 0 6px; font-family: var(--font-en); font-size: 11px; letter-spacing: .16em; color: var(--brand-blue); }
.rpw2__h { padding: 0 6px; font-size: 21px; font-weight: 500; line-height: 1.45; }
.rpw2__for { margin: 0 6px; justify-self: start; padding: 5px 12px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 12px; }
.rpw2__l { display: grid; align-content: start; gap: 8px; margin: 6px 6px 0; padding-top: 14px; border-top: 1px solid var(--line); }
.rpw2__l li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.7; word-break: auto-phrase; }
.rpw2__l li::before { content: ""; position: absolute; left: 0; top: .38em; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-blue); }
.rpw2__l li::after { content: ""; position: absolute; left: 4.5px; top: calc(.38em + 2.5px); width: 4px; height: 7px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(45deg); }
.rpw2__ex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 6px 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-2); }
.rpw2__ex span { font-size: 10px; letter-spacing: .1em; padding: 2px 8px; border-radius: 4px; background: var(--paper); }
/* 絵1：チャット（貴社のSlack） */
.rpw2__ill--remote { display: grid; align-content: center; gap: 8px; padding: 14px 18px; }
.rpw2__ch { font-family: var(--font-en); font-size: 11px; color: var(--ink-2); }
.rpw2__m { display: flex; align-items: center; gap: 8px; }
.rpw2__m i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #5cc8e8, #3a8ac8); flex: none; }
.rpw2__m i.is-c { background: var(--ink); }
.rpw2__m span { height: 22px; width: 70%; border-radius: 8px; background: #fff; box-shadow: 0 4px 10px -6px rgba(10,52,102,.3); }
.rpw2__m span.is-s { width: 45%; }
.rpw2__m.is-us span { background: var(--brand-blue); width: 60%; }
/* 絵2：鍵のかかったPC */
.rpw2__ill--secure { display: grid; place-items: center; }
.rpw2__pc { position: relative; display: grid; place-items: center; width: 120px; height: 78px; border-radius: 8px; background: var(--ink); box-shadow: inset 0 0 0 5px #2a2d31; margin-top: -10px; }
.rpw2__base { position: absolute; left: 50%; top: calc(50% + 34px); width: 150px; height: 8px; margin-left: -75px; border-radius: 0 0 8px 8px; background: #c9d2db; }
.rpw2__lock { position: relative; width: 26px; height: 20px; margin-top: 10px; border-radius: 4px; background: var(--brand-sky); }
.rpw2__lock::before { content: ""; position: absolute; left: 5px; top: -12px; width: 12px; height: 12px; border: 2.5px solid var(--brand-sky); border-bottom: 0; border-radius: 8px 8px 0 0; }
/* 絵3：机を並べる3人（貴社2人＋当社1人） */
.rpw2__desk { position: absolute; left: 12%; right: 12%; bottom: 26px; height: 12px; border-radius: 4px; background: #c9d2db; }
.rpw2__p { position: absolute; bottom: 38px; width: 34px; height: 46px; }
.rpw2__p::before { content: ""; position: absolute; left: 50%; top: 0; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #f1d9c5; box-shadow: inset 0 6px 0 -1px #3a3d42; }
.rpw2__p::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 24px; border-radius: 14px 14px 4px 4px; background: #9aa3ad; }
.rpw2__p.is-c { left: calc(50% - 85px); } .rpw2__p.is-c2 { left: calc(50% - 17px); } .rpw2__p.is-us { left: calc(50% + 51px); }
.rpw2__p.is-c::after { background: var(--ink); }
.rpw2__p.is-us::after { background: linear-gradient(160deg, #5cc8e8, #3a8ac8); }
@media (max-width: 1000px) { .rpw2 { grid-template-columns: 1fr; } .rpw2__c { grid-template-rows: none; } }

/* ---------- ダイレクトソーシング支援との違い：採用の全領域マップで、担う範囲をハイライト（.rpx2・動きは rpo.js） ---------- */
.rpx2__tabs { display: inline-grid; grid-auto-flow: column; gap: 6px; padding: 6px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px -20px rgba(10,52,102,.3); }
.rpx2__tab { display: grid; gap: 2px; padding: 12px 22px; border: 0; border-radius: 13px; background: transparent; text-align: left; font: inherit; color: var(--ink-2); cursor: pointer; transition: background .3s, color .3s; }
.rpx2__tab b { font-size: 16px; font-weight: 500; }
.rpx2__tab small { font-size: 11px; }
.rpx2__tab.is-on { background: var(--ink); color: #fff; }
.rpx2__tab.is-on small { color: rgba(255,255,255,.7); }
.rpx2__map { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 10px; margin-top: 28px; }
.rpx2__g { position: relative; padding: 0 0 12px; font-size: 13px; font-weight: 500; text-align: center; color: var(--ink-2); }
.rpx2__g::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; border-bottom: 1px dashed #b9c6d2; }
.rpx2__g--l { grid-column: 1 / 4; } .rpx2__g--r { grid-column: 4 / 7; }
.rpx2__col { display: grid; align-content: start; gap: 8px; margin-top: 12px; }
.rpx2__h { padding: 14px 8px; border-radius: 12px; background: #dfe5ea; text-align: center; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background .4s, color .4s; }
.rpx2__col ul { display: grid; gap: 8px; }
.rpx2__col li { display: grid; place-items: center; min-height: 58px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid #e1e7ec; text-align: center; font-size: 13px; line-height: 1.5; color: #9aa3ad; word-break: auto-phrase; overflow-wrap: anywhere; min-width: 0; transition: background .45s, color .45s, border-color .45s, transform .45s var(--ease), box-shadow .45s; transition-delay: var(--d, 0s); }
.rpx2__col li.is-on { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; box-shadow: 0 10px 22px -12px rgba(58,138,200,.8); }
.rpx2__col.is-on .rpx2__h { background: var(--ink); color: #fff; }
.rpx2__map:not(.is-js) li[data-s~="rpo"] { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.rpx2__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 22px; font-size: 14px; }
.rpx2__lg { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; }
.rpx2__lg i { width: 14px; height: 14px; border-radius: 4px; background: var(--brand-blue); }
.rpx2__for { font-weight: 500; }
.rpx2__for[data-k="ds"] { display: none; }
.rpx2[data-k="ds"] .rpx2__for[data-k="ds"] { display: block; } .rpx2[data-k="ds"] .rpx2__for[data-k="rpo"] { display: none; }
.rpx2__note { flex-basis: 100%; font-size: 13px; color: var(--ink-2); }
.rpx2__note a { color: var(--brand-blue); border-bottom: 1px solid currentColor; }
@media (max-width: 1000px) {
  .rpx2__tabs { display: grid; grid-auto-flow: row; width: 100%; }
  .rpx2__map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; }
  .rpx2__g { display: none; }
  .rpx2__col { margin-top: 0; }
  .rpx2__col li { min-height: 46px; font-size: 12px; }
}

.rpx2__col { min-width: 0; }
.rpx2__h { overflow-wrap: anywhere; }
.rpx2__for[data-k="br"] { display: none; }
.rpx2[data-k="br"] .rpx2__for[data-k="br"] { display: block; } .rpx2[data-k="br"] .rpx2__for[data-k="rpo"] { display: none; }
.rpx2__note a { margin-left: 8px; }