/* =====================================================
 * 採用ページ（page-recruit.php、2026-09-21 新設）
 *
 * 畔栁さんが案A「紙面型」を選んだ（見本 ops/design/recruit-preview-7.html）。
 * 写真も社員インタビューも無いので、白い地・細い罫線・余白と、図だけで組む。
 * 黒い面は大きく使わない（畔栁さんの指示）。
 *
 * 図は画面に入ったときに一度だけ動く。器に .rcRv を付けておくと
 * assets/js/recruit.js が .is-on を付け、ここの「図の動き」の節が働く。
 * OSの「視差効果を減らす」を選んでいる方には動かさず、最初から出来上がった姿で出す。
 *
 * 色・書体・白い丸いボタンはサイト共通（common.css の :root、.futura、.pillButton）。
 * ===================================================== */

.wrapTitlePage .titleEn,
.wrapTitlePage .titleJp {
    color: #000000;
}

.areaRecruit {
    --rc-line: #E3E3E6;
    --rc-line-soft: #EFEFF2;
    --rc-muted: #6A6A72;
    --rc-text: #292929;
    --rc-text-soft: #4A4A52;
    --rc-gold-deep: #A8812F;
    --rc-ease: cubic-bezier(.22, .61, .36, 1);
    padding: clamp(24px, 2.8vw, 40px) 0 clamp(64px, 7vw, 96px);
    background-color: #fff;
    color: var(--rc-text);
}

.areaRecruit .inner {
    max-width: 1080px;
}

.areaRecruit p,
.areaRecruit h2,
.areaRecruit h3,
.areaRecruit li,
.areaRecruit dt,
.areaRecruit dd,
.areaRecruit summary {
    /* 日本語の折り返しを、語のまとまりで切る */
    word-break: auto-phrase;
}

/* 横いっぱいに広げるのは、2つの大きな図だけ。
   .areaRecruit svg とまとめて書くと、環境の節の小さな絵まで横いっぱいになる */
.rcFigCareer,
.rcFigTrain {
    display: block;
    width: 100%;
    height: auto;
}

/* =====================================================
 * 線の使い分け（2026-09-21 畔栁さんの指摘）
 *
 * 同じ長さの線が何本も並ぶと、どこが大きな区切りなのか分からなくなる。
 * そこで長さで役割を分ける。
 *   節と節を分ける線   横いっぱい（.rcSec + .rcSec の border-top）
 *   節の中で行を分ける線  短くする。右端はどれも同じだけ空けるので、
 *                        横いっぱいまで伸びるのは節の線だけになる。
 *                        左に番号やロゴの列がある一覧（3つの前提・少人数）は、
 *                        さらに文字の始まりから引くので、左右とも内側に入る
 *
 * 線そのものは ::after（一覧の先頭だけ ::before）で描く。
 * border だと端を詰められないため。
 * ===================================================== */
.areaRecruit {
    /* 右を空ける量。大きいほど短くなる */
    --rc-rule-gap: 14%;
}

.rcRow {
    position: relative;
}

.rcRow::after {
    content: "";
    position: absolute;
    right: var(--rc-rule-right, var(--rc-rule-gap));
    bottom: 0;
    left: var(--rc-rule-left, 0);
    height: 1px;
    background: var(--rc-line);
}

.rcRow:first-child::before {
    content: "";
    position: absolute;
    right: var(--rc-rule-right, var(--rc-rule-gap));
    top: 0;
    left: var(--rc-rule-left, 0);
    height: 1px;
    background: var(--rc-line);
}

/* ---------- 節 ---------- */
.rcSec {
    padding: clamp(50px, 5.8vw, 92px) 0;
}

.rcSec + .rcSec {
    border-top: 1px solid var(--rc-line);
}

.rcSec--lead {
    padding-top: 0;
    border-top: 0;
}

.rcKicker {
    font-size: 12.5px;
    letter-spacing: .28em;
    color: var(--rc-gold-deep);
}

.rcH2 {
    margin-top: 14px;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .01em;
}

.rcLead {
    max-width: 700px;
    margin-top: 16px;
    font-size: clamp(14px, 1.45vw, 15.5px);
    font-weight: 300;
    line-height: 2;
    color: var(--rc-text-soft);
}

.rcNote {
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--rc-muted);
}

.rcBody {
    margin-top: clamp(26px, 3.2vw, 44px);
}

.rcTopLead {
    font-size: clamp(25px, 3.6vw, 44px);
    font-weight: 400;
    line-height: 1.5;
}

/* 説明のすぐ下に置く注記（選考の流れ）。図の上に出すので、下に間隔を取る */
.rcNote--lead {
    max-width: 700px;
    margin: 10px 0 0;
}

/* ---------- 3つの前提 ---------- */
.rcVow {
    list-style: none;
}

.rcVow li {
    /* 線は文字の始まり（番号の列のぶん右）から。右端も少し空ける */
    --rc-rule-left: calc(clamp(48px, 5vw, 78px) + clamp(12px, 2vw, 26px));
    display: grid;
    grid-template-columns: clamp(48px, 5vw, 78px) minmax(0, 1fr);
    gap: clamp(12px, 2vw, 26px);
    align-items: baseline;
    padding: clamp(24px, 3vw, 38px) 0;
}

.rcVowN {
    font-size: clamp(15px, 1.6vw, 19px);
    letter-spacing: .12em;
    color: var(--rc-gold-deep);
}

.rcVow b {
    display: block;
    font-size: clamp(24px, 3.2vw, 42px);
    font-weight: 400;
    line-height: 1.35;
}

.rcVow p {
    max-width: 620px;
    margin-top: 13px;
    font-size: clamp(13.5px, 1.4vw, 15px);
    font-weight: 300;
    line-height: 2;
    color: var(--rc-text-soft);
}

/* ---------- 積み上がる図 ---------- */
.rcChart {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 64px);
}

.rcChartT {
    font-size: 15px;
    font-weight: 400;
}

.rcChartT em {
    display: block;
    margin-top: 5px;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 300;
    color: var(--rc-muted);
}

.rcBars {
    display: flex;
    align-items: flex-end;
    gap: clamp(3px, .6vw, 7px);
    height: clamp(130px, 15vw, 190px);
    margin-top: 20px;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--rc-line);
}

.rcBars > i {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    height: 100%;
}

.rcBars s {
    display: block;
    height: var(--u);
    border-radius: 1px;
    text-decoration: none;
}

.rcBars--flat s {
    background: #DCDCE2;
}

.rcBars--stack s {
    background: var(--c);
}

.rcChartC {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 300;
    color: var(--rc-muted);
}

/* ---------- 扱うサービス ---------- */
.rcSvc {
    list-style: none;
}

.rcSvc li {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: clamp(18px, 3vw, 48px);
    align-items: center;
    padding: clamp(20px, 2.4vw, 30px) 0;
}

/* ロゴの大きさは common.css の .serviceBrand に任せる（ロゴごとの --k・--dy はそちらで持っている）。
   ここで決めるのは字の高さ（--brand-size）だけ。横に1つずつ置くので、中心をそろえる形を使う。 */
.rcSvcLogo .serviceBrand {
    --brand-size: 19px;
    height: calc(var(--brand-size) * var(--k));
    transform: translateY(calc(var(--brand-size) * var(--dy)));
}

/* ロゴの下の罫線。ふだんは引かず、カーソルを合わせたときだけ金色の線が左から伸びる
   （2026-09-21 畔栁さんの指示。トップページのサービス欄と同じ動き）。
   場所は取ったままなので、線が出ても中身は動かない。 */
.rcSvcRule {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 15px;
    background: transparent;
}

.rcSvcRule i {
    display: block;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width .5s var(--rc-ease);
}

@media (hover: hover) {
    .rcSvc li:hover .rcSvcRule i {
        width: 100%;
    }
}

.rcSvcTag {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    letter-spacing: .22em;
    color: var(--rc-gold-deep);
}

.rcSvcTxt {
    display: block;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 2;
    color: var(--rc-text-soft);
}

/* ---------- 仕事の変化（太い積み上げ帯） ---------- */
.rcFigCareer text {
    font-family: inherit;
}

.rcFigCareer .rcFigRow {
    fill: var(--rc-text);
}

.rcFigCareer .rcBarG {
    fill: var(--gold);
}

/* 縦組み（狭い画面用）の図の文字。横長版と同じ大きさにそろえてある。
   枠の幅が340なので、書いた数字がそのまま画面の大きさになる */
.rcFigCareerN text,
.rcFigTrainN text {
    font-family: inherit;
}

.rcFigCareerN .rcFigRow {
    font-size: 13px;
    fill: var(--rc-text);
}

.rcFigCareerN .rcFigNote {
    font-size: 12px;
    fill: var(--rc-muted);
}

.rcFigTrainN .rcStepWhen {
    font-size: 12.5px;
    fill: var(--rc-gold-deep);
}

.rcFigTrainN .rcStepTitle {
    font-size: 16px;
    fill: var(--rc-text);
}

.rcFigTrainN .rcStepText {
    font-size: 12px;
    fill: var(--rc-muted);
}

/* ---------- 入社してからの1年（右上がりに太くなる帯） ---------- */
.rcFigTrain text {
    font-family: inherit;
}

.rcFigTrain .rcStepWhen {
    font-size: 12.5px;
    fill: var(--rc-gold-deep);
}

.rcFigTrain .rcStepTitle {
    font-size: 16px;
    fill: var(--rc-text);
}

.rcFigTrain .rcStepText {
    font-size: 12px;
    fill: var(--rc-muted);
}

.rcFigTrain .rcStepLine {
    stroke: var(--rc-line);
}

/* ---------- 会社が用意している環境 ---------- */
.rcPerks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 26px);
    list-style: none;
}

.rcPerks li {
    padding-top: 18px;
    border-top: 1px solid var(--ink);
}

.rcPerkIcon {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
    color: var(--gold);
}

.rcPerks b {
    display: block;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.6;
}

.rcPerks span {
    display: block;
    margin-top: 9px;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--rc-muted);
}

/* ---------- 身につくこと（左に見出し、右に3行） ---------- */
.rcGainSplit {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(24px, 4vw, 70px);
    align-items: start;
}

.rcGainList {
    border-top: 1px solid var(--ink);
    list-style: none;
}

.rcGainList li {
    padding: 17px 0;
    border-bottom: 1px solid var(--rc-line);
}

.rcGainList b {
    display: block;
    font-size: clamp(15.5px, 1.7vw, 18px);
    font-weight: 400;
    line-height: 1.55;
}

.rcGainList span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.9;
    color: var(--rc-muted);
}

/* ---------- 少人数の話（見出しだけ見せて、詳しくは開く） ---------- */
.rcSizeFold details {
    /* 線は見出しの始まり（番号の列のぶん右）から。右端も少し空ける */
    --rc-rule-left: calc(clamp(40px, 4.4vw, 62px) + 14px);
}

.rcSizeFold summary {
    display: grid;
    grid-template-columns: clamp(40px, 4.4vw, 62px) minmax(0, 1fr) 13px;
    gap: 14px;
    align-items: center;
    padding: 19px 0;
    list-style: none;
    cursor: pointer;
}

.rcSizeFold summary::-webkit-details-marker {
    display: none;
}

.rcSizeN {
    font-size: 13px;
    letter-spacing: .12em;
    color: var(--rc-gold-deep);
}

.rcSizeFold summary b {
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 400;
    line-height: 1.5;
}

/* 開くと ＋ が × ではなく − になる（回して横棒だけにする） */
.rcSizeFold summary::after,
.rcFold summary::after {
    content: "";
    width: 13px;
    height: 13px;
    background:
        linear-gradient(var(--rc-gold-deep) 0 0) center / 100% 1px no-repeat,
        linear-gradient(var(--rc-gold-deep) 0 0) center / 1px 100% no-repeat;
    transition: transform .35s var(--rc-ease);
}

.rcSizeFold details[open] summary::after,
.rcFold details[open] summary::after {
    background: linear-gradient(var(--rc-gold-deep) 0 0) center / 100% 1px no-repeat;
    transform: rotate(45deg);
}

.rcSizeIn {
    padding: 0 0 20px clamp(54px, 5.8vw, 76px);
    font-size: 13.5px;
    font-weight: 300;
    line-height: 2;
    color: var(--rc-text-soft);
}

/* ---------- 選考の流れ（進み具合の帯） ---------- */
.rcStepBar {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    gap: 3px;
}

.rcStepBar i {
    height: 10px;
}

.rcStepList {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    gap: 3px;
    margin-top: 16px;
    list-style: none;
}

.rcStepM {
    font-size: 12px;
    letter-spacing: .16em;
    color: var(--rc-gold-deep);
}

.rcStepList b {
    display: block;
    margin-top: 8px;
    font-size: 15.5px;
    font-weight: 400;
}

.rcStepList em {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--rc-muted);
}

/* ---------- よくある質問 ---------- */
.rcFold summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13px;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.7;
    list-style: none;
    cursor: pointer;
}

.rcFold summary::-webkit-details-marker {
    display: none;
}

.rcFoldBody {
    padding: 0 0 18px;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 2;
    color: var(--rc-text-soft);
}

/* ---------- 募集要項 ---------- */
.rcDl > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 20px;
    padding: 15px 0;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.95;
}

.rcDl dt {
    font-weight: 400;
    color: #55555C;
}

.rcDl dd ul {
    list-style: none;
}

.rcDl dd li {
    padding-left: 1.1em;
    text-indent: -1.1em;
}

.rcDl dd li::before {
    content: "・";
}

/* ---------- 応募 ---------- */
.rcTalk {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 36px);
    list-style: none;
}

.rcTalk li {
    padding-top: 18px;
    border-top: 2px solid var(--ink);
}

.rcTalkN {
    font-size: 13px;
    letter-spacing: .16em;
    color: var(--rc-gold-deep);
}

.rcTalk b {
    display: block;
    margin-top: 10px;
    font-size: clamp(16px, 1.8vw, 19px);
    font-weight: 400;
    line-height: 1.55;
}

.rcTalk li > p:last-child {
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.95;
    color: var(--rc-text-soft);
}

.rcEntryFoot {
    margin-top: clamp(30px, 3.4vw, 46px);
    text-align: center;
}

.rcEntryFoot .pillButton {
    justify-content: center;
}

.rcEntryNote {
    margin-top: clamp(24px, 2.6vw, 34px);
    text-align: center;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.95;
    color: var(--rc-muted);
}

/* ---------- 応募フォーム（左に約束・右に入力。畔栁さんが5案から案2） ----------
   入力欄やボタンの見た目は assets/css/form.css（器の .trobzForm に効く）。
   ここに置くのは、このページでの組み立てだけ。
   左の列は「送ったあと何が起きるか」。入力しているそばで、送信をためらう理由を消す。 */
.rcFormSplit {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(28px, 5vw, 76px);
    align-items: start;
}

.rcFormTitle {
    margin-top: 12px;
    font-size: clamp(21px, 2.4vw, 28px);
    font-weight: 400;
    line-height: 1.5;
}

.rcFormLead {
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.95;
    color: var(--rc-text-soft);
}

.rcFormPromise {
    margin-top: clamp(22px, 2.6vw, 32px);
    border-top: 1px solid var(--ink);
    list-style: none;
}

.rcFormPromise li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid var(--rc-line);
}

.rcFormPromiseN {
    padding-top: 3px;
    font-size: 12px;
    letter-spacing: .1em;
    color: var(--rc-gold-deep);
}

.rcFormPromise b {
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

.rcFormPromise span {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.85;
    color: var(--rc-muted);
}

/* 入力欄は、お問い合わせページより少し浅くする（項目が4つしかないため） */
.rcForm .formInput textarea {
    height: 120px;
}

/* 送信ボタン（畔栁さんが5案から案3「金色に塗ったボタン」）。
   周りが白と細い線だけのページなので、ここだけ色で押す場所を示す。
   サイト共通の白い丸いボタン（common.css の .pillButton）とは別の扱い。 */
.rcForm {
    /* 押せないときは、うすくするのではなく灰色に変える */
    --form-disabled-opacity: 1;
}

.rcForm .btnSubmit {
    margin-top: 4px;
}

.rcForm .btnSubmit button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 18px 28px;
    border: 0;
    border-radius: 4px;
    background: var(--gold);
    box-shadow: 0 10px 24px rgba(201, 165, 81, .28);
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .08em;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .35s var(--rc-ease), box-shadow .35s var(--rc-ease), transform .2s;
}

@media (hover: hover) {
    .rcForm .btnSubmit button:hover {
        background: var(--rc-gold-deep);
        box-shadow: 0 14px 30px rgba(168, 129, 47, .34);
    }
}

.rcForm .btnSubmit button:active {
    transform: translateY(1px);
}

.rcForm .btnSubmit button:focus-visible {
    outline: 2px solid var(--rc-gold-deep);
    outline-offset: 3px;
}

/* プライバシーポリシーに同意する前 */
.rcForm .btnSubmit button.btn-disabled {
    background: #E7E7EC;
    box-shadow: none;
    color: #fff;
}

/* =====================================================
 * 図の動き（画面に入ったとき一度だけ）
 *
 * assets/js/recruit.js が、画面に入った .rcRv に .is-on を付ける。
 * 付くまでは「動く前」の姿で待ち、付いたところで出来上がった姿へ動く。
 * ===================================================== */
.rcRv .rcAnim {
    transition-delay: var(--d, 0s);
}

/* 棒が下から立ち上がる（積み上がる図） */
.rcRv .rcBars s {
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .5s var(--rc-ease);
    transition-delay: var(--d, 0s);
}

.rcRv.is-on .rcBars s {
    transform: none;
}

/* 金色が縮んで灰色が広がる（仕事の変化）。どの段も「金色9割」から始める */
.rcRv .rcBarG {
    width: 765px;
    transition: width 1s var(--rc-ease);
}

.rcRv.is-on .rcBarG {
    width: calc(var(--w) * 1px);
}

.rcRv .rcBarS {
    x: 915px;
    width: 85px;
    transition: x 1s var(--rc-ease), width 1s var(--rc-ease);
}

.rcRv.is-on .rcBarS {
    x: calc(var(--x) * 1px);
    width: calc(var(--w) * 1px);
}

.rcRv .rcBarT {
    opacity: 0;
    transition: opacity .5s ease;
}

.rcRv.is-on .rcBarT {
    opacity: 1;
}

/* ---------- 縦組みの図（狭い画面）も、同じように動かす（2026-09-22 畔栁さんの指示） ----------
   横長版と同じ考え方。幅が 340 なので、動き出しの数字だけを合わせてある */

/* 金色が縮んで灰色が広がる。どの段も「金色9割」から始める */
.rcRv .rcBarGN {
    x: 0;
    width: 306px;
    transition: width 1s var(--rc-ease);
    transition-delay: var(--d, 0s);
}

.rcRv.is-on .rcBarGN {
    width: calc(var(--w) * 1px);
}

.rcRv .rcBarSN {
    x: 306px;
    width: 34px;
    transition: x 1s var(--rc-ease), width 1s var(--rc-ease);
    transition-delay: var(--d, 0s);
}

.rcRv.is-on .rcBarSN {
    x: calc(var(--x) * 1px);
    width: calc(var(--w) * 1px);
}

/* 帯の下の説明（色の印と文字）は、帯が動いたあとに現れる */
.rcRv .rcFigKey {
    opacity: 0;
    transition: opacity .5s ease;
    transition-delay: var(--d, 0s);
}

.rcRv.is-on .rcFigKey {
    opacity: 1;
}

/* 段の見出しは、その場で現れる */
.rcRv .rcFigCareerN .rcFigRow {
    opacity: 0;
    transition: opacity .45s ease;
    transition-delay: var(--d, 0s);
}

.rcRv.is-on .rcFigCareerN .rcFigRow {
    opacity: 1;
}

/* 帯が左から描かれる（入社してからの1年） */
.rcRv .rcBand {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s var(--rc-ease);
}

.rcRv.is-on .rcBand {
    clip-path: inset(0 0 0 0);
}

.rcRv .rcStepLabel {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .45s ease, transform .5s var(--rc-ease);
}

.rcRv.is-on .rcStepLabel {
    opacity: 1;
    transform: none;
}

/* 進み具合の帯（選考の流れ） */
.rcRv .rcStepBar i {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--rc-ease);
}

.rcRv.is-on .rcStepBar i {
    transform: none;
}

.rcRv .rcStepList li {
    opacity: 0;
    transition: opacity .4s ease;
}

.rcRv.is-on .rcStepList li {
    opacity: 1;
}

/* 罫線が左から引かれる表（募集要項）。会社概要ページの沿革と同じ動き方。
   線そのものは .rcRow が描いているので、ここでは動き方だけを足す */
.rcRv.rcDl .rcRow::after,
.rcRv.rcDl .rcRow:first-child::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--rc-ease);
    transition-delay: var(--d, 0s);
}

.rcRv.rcDl.is-on .rcRow::after,
.rcRv.rcDl.is-on .rcRow:first-child::before {
    transform: none;
}

.rcRv.rcDl dt,
.rcRv.rcDl dd {
    opacity: 0;
    transition: opacity .5s ease;
    transition-delay: var(--d, 0s);
}

.rcRv.rcDl.is-on dt,
.rcRv.rcDl.is-on dd {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .rcRv .rcBarGN,
    .rcRv .rcBarSN,
    .rcRv .rcFigKey,
    .rcRv *,
    .rcRv.rcDl .rcRow::after,
    .rcRv.rcDl .rcRow:first-child::before {
        transition: none !important;
        animation: none !important;
    }

    .rcRv .rcBars s,
    .rcRv .rcStepBar i,
    .rcRv .rcStepLabel,
    .rcRv.rcDl .rcRow::after,
    .rcRv.rcDl .rcRow:first-child::before {
        transform: none !important;
    }

    .rcRv .rcBarG {
        width: calc(var(--w) * 1px) !important;
    }

    .rcRv .rcBarS {
        x: calc(var(--x) * 1px) !important;
        width: calc(var(--w) * 1px) !important;
    }

    .rcRv .rcBarT,
    .rcRv .rcStepLabel,
    .rcRv .rcStepList li,
    .rcRv.rcDl dt,
    .rcRv.rcDl dd {
        opacity: 1 !important;
    }

    .rcRv .rcBand {
        clip-path: none !important;
    }
}

/* ---------- 画面が狭いとき ---------- */
/* 図の案内は、図が収まりきらない狭い画面でだけ出す */
.rcFigHint {
    display: none;
}

/* 縦組みの図（狭い画面用）。広いあいだは出さない。
   横長の図を縮めると文字が読めなくなるので、同じ中身を縦に組み直してある
   （2026-09-22。inc/recruit.php の「スマートフォン用の図」を参照） */
.rcFigWide {
    display: block;
}

.rcFigNarrow {
    display: none;
}

@media screen and (max-width: 900px) {
    .rcChart,
    .rcTalk,
    .rcGainSplit,
    .rcFormSplit {
        grid-template-columns: minmax(0, 1fr);
    }

    .rcSizeFold summary {
        grid-template-columns: 40px minmax(0, 1fr) 13px;
    }

    .rcSizeIn {
        padding-left: 54px;
    }

    .rcPerks,
    .rcStepList,
    .rcStepBar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rcSvc li {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .rcDl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 13px 0;
    }

    .rcVow li {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    /* 図は横に長いので、狭い画面では横にずらして見てもらう。
       ただ切れているだけに見えないよう、案内を出す（2026-09-22。サービス詳細ページと同じ扱い） */
    .rcFigCareer,
    .rcFigTrain {
        min-width: 640px;
    }

    .rcFigScroll {
        overflow-x: visible;
    }

    /* 縦組みに入れ替える。横にずらす必要がなくなる */
    .rcFigWide {
        display: none;
    }

    .rcFigNarrow {
        display: block;
    }

    .rcFigNarrow svg {
        display: block;
        width: 100%;
        height: auto;
    }

    /* 選考の流れ：横一列をやめ、縦のタイムラインにする。
       それまでは幅のない棒が縦に積まれ、金色の線だけが残っていた */
    .rcStepBar {
        display: none;
    }

    .rcStepList {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 24px;
    }

    .rcStepList li {
        position: relative;
        padding: 0 0 26px 30px;
    }

    .rcStepList li:last-child {
        padding-bottom: 0;
    }

    /* 縦のレールと、節目の印 */
    .rcStepList li::before {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 0;
        left: 5px;
        width: 1px;
        background: var(--rc-line);
    }

    .rcStepList li:last-child::before {
        display: none;
    }

    .rcStepList li::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 0;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #fff;
        border: 1.5px solid #C9A551;
    }

}

/* 図の案内は、図がはみ出す幅でだけ出す。
   図は640px、左右の余白は24pxずつなので、画面が 688px より狭いとはみ出す */
@media screen and (max-width: 687px) {
    .rcFigHint {
        display: block;
        margin-top: 10px;
        text-align: right;
        font-size: 11.5px;
        font-weight: 300;
        line-height: 1.6;
        color: #6A6A72;
    }

    /* 矢印は飾りなので、文字ではなくこちらで足す */
    .rcFigHint::after {
        content: " →";
        color: #A8812F;
    }
}

@media screen and (max-width: 560px) {
    .rcPerks,
    .rcStepList,
    .rcStepBar {
        grid-template-columns: minmax(0, 1fr);
    }

    .rcStepBar {
        gap: 2px;
    }

    .rcStepBar i {
        height: 6px;
    }
}

/* =====================================================
 * スマホで縦に長くなりすぎないように（2026-10-02）
 * 畔栁さんが4か所×5案から選んだ（見本 /design/recruit-sp/）。
 *   3つの前提              案5 1枚ずつ横に送る。番号は大きな透かし、矢印つき
 *   積み上がっていく仕事     案2 2つの図を押して切り替える（最初は「月額で続くサービス」）
 *   会社が用意している環境   案2 カードにして横に送る
 * パソコンは今までどおり。切り替えの道具と件数は、スマホだけに出す。
 * 動きは assets/js/recruit.js。js が動かなくても、指で横に送ることはできる
 * ===================================================== */
.rcSeg,
.rcSlideCtl {
    display: none;
}

@media screen and (max-width: 768px) {
    /* ---------- 横に送る（共通） ---------- */
    /* 画面の端まで使うので、内側の余白（24px）ぶんだけ外に出す */
    .rcTrack {
        display: flex;
        gap: 12px;
        margin-right: -24px;
        margin-left: -24px;
        padding: 0 24px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .rcTrack::-webkit-scrollbar {
        display: none;
    }

    .rcTrack > li {
        flex: 0 0 70%;
        scroll-snap-align: start;
        scroll-margin-left: 24px;
    }

    /* 何枚目か。線の金色の部分が、いま見ている位置まで動く */
    .rcSlideCtl {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
    }

    .rcCnt {
        display: flex;
        flex: 1;
        align-items: center;
        gap: 14px;
    }

    .rcCntN {
        font-size: 12.5px;
        letter-spacing: .12em;
        color: var(--rc-muted);
        white-space: nowrap;
    }

    .rcCntN b {
        font-weight: 400;
        color: var(--rc-text);
    }

    .rcCntBar {
        position: relative;
        flex: 1;
        height: 1px;
        background: var(--rc-line);
        overflow: hidden;
    }

    .rcCntBar i {
        position: absolute;
        top: 0;
        left: 0;
        height: 1px;
        background: var(--rc-gold-deep);
        transition: transform .35s var(--rc-ease);
    }

    .rcArw {
        flex: none;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid #D5D5DA;
        border-radius: 50%;
        background: #fff;
        font-family: inherit;
        font-size: 18px;
        line-height: 1;
        color: var(--rc-text);
        cursor: pointer;
    }

    /* ---------- 3つの前提：1枚ずつ（案5） ---------- */
    .rcSlide--full .rcTrack {
        margin: 0;
        padding: 0;
    }

    .rcVow.rcTrack li {
        flex: 0 0 100%;
        position: relative;
        display: block;
        overflow: hidden;
        padding: 26px 22px 28px;
        background: #F6F5F2;
        scroll-margin-left: 0;
    }

    /* 行を分ける線は、カードにしたので要らない */
    .rcVow.rcTrack li::before,
    .rcVow.rcTrack li::after {
        display: none;
    }

    .rcVow.rcTrack .rcVowN {
        position: absolute;
        top: 10px;
        right: 14px;
        font-size: 84px;
        line-height: 1;
        letter-spacing: .02em;
        color: rgba(168, 129, 47, .14);
    }

    .rcVow.rcTrack b {
        position: relative;
        font-size: 20px;
        line-height: 1.4;
    }

    .rcVow.rcTrack p {
        position: relative;
        margin-top: 12px;
        font-size: 13.5px;
        line-height: 1.95;
    }

    /* ---------- 積み上がっていく仕事：押して切り替える（案2） ---------- */
    .rcSeg {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 20px;
        border: 1px solid #D5D5DA;
        border-radius: 4px;
        overflow: hidden;
    }

    .rcSeg button {
        padding: 11px 6px;
        border: 0;
        background: #fff;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 300;
        color: var(--rc-text-soft);
        cursor: pointer;
        transition: background-color .25s, color .25s;
    }

    .rcSeg button + button {
        border-left: 1px solid #D5D5DA;
    }

    .rcSeg button.is-on {
        background: var(--rc-text);
        color: #fff;
    }

    [data-rc-seg] .rcChart > div:not(.is-on) {
        display: none;
    }

    /* ---------- 会社が用意している環境：カードにして横に送る（案2） ---------- */
    .rcPerks.rcTrack li {
        padding: 20px 18px;
        border-top: 0;
        background: #F6F5F2;
    }

    .rcPerks.rcTrack .rcPerkIcon {
        margin-bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rcCntBar i,
    .rcSeg button {
        transition: none;
    }
}

/* =====================================================
 * 扱うサービス：スマホではトップの導入事例と同じダイヤルで回す（2026-10-02）
 * 畔栁さんが3案から案B「ダイヤル＋LPの画面を浅く」を選んだ（見本 /design/recruit-sp-service/）。
 * カードの位置・透け具合は assets/js/top-slider.js の dial が直に書く。
 * 輪と矢印の値は index.css の「導入事例：ダイヤルを回す」と同じ（index.css はトップでしか読まないので、ここにも置く）。
 * 重ねるのは js が is-ready を付けてから。付かなければ今までどおり縦に並ぶ。パソコンは変えない
 * ===================================================== */

/* ロゴの無いもの（OEM事業・Webサイト制作）は文字で組む。ロゴと同じくらいの高さ */
.rcSvcWord {
    display: block;
    font-weight: 400;
    line-height: 1;
    color: var(--rc-text);
}

.rcSvcWord.futura {
    font-size: 22px;
    font-weight: 300;
    letter-spacing: .06em;
}

.rcSvcWord--ja {
    font-size: 19px;
    letter-spacing: .04em;
}

.rcSvcShot,
.rcSvcWrap .tsCtl,
.rcSvcWrap .tsDial {
    display: none;
}

.rcSvcWrap + .rcNote {
    margin-top: 18px;
}

@media screen and (max-width: 768px) {
    .rcSvc.is-ready {
        position: relative;
        display: block;
        margin: 4px -24px 0;
        /* 奥に傾いたカードは画面の外まで届くので、ここで切る */
        overflow: hidden;
        padding: 6px 0 10px;
        perspective: 1000px;
    }

    /* 重ねて並べるので、カードには地の色が要る */
    .rcSvc.is-ready > li {
        position: absolute;
        top: 0;
        left: 50%;
        display: flex;
        flex-direction: column;
        /* 一覧のときの「縦の中央そろえ」（align-items: center）が、縦並びでは横の中央寄せになってしまう */
        align-items: stretch;
        gap: 0;
        width: 74%;
        margin: 0 0 0 -37%;
        padding: 0 0 18px;
        background: #fff;
        border: 1px solid var(--rc-line);
        border-radius: 14px;
        overflow: hidden;
        will-change: transform, opacity;
        backface-visibility: hidden;
        transition: transform .55s cubic-bezier(.33, 1, .68, 1), opacity .55s cubic-bezier(.33, 1, .68, 1);
    }

    .rcSvc.is-ready > li::before,
    .rcSvc.is-ready > li::after,
    .rcSvc.is-ready .rcSvcRule {
        display: none;
    }

    /* 指でなぞっているあいだは、指に付いてこないと固く感じる */
    .rcSvc.is-drag > li {
        transition: none;
    }

    /* 並び：画面 → 分野 → 名前 → 説明 */
    .rcSvc.is-ready .rcSvcBody {
        display: contents;
    }

    .rcSvc.is-ready .rcSvcShot {
        display: block;
        order: 0;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: #F6F5F2;
        border-bottom: 1px solid #EEEEF0;
    }

    /* 4:3 で撮った画面の上のほう（ロゴと見出し）を見せる */
    .rcSvcShot img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }

    .rcSvc.is-ready .rcSvcTag {
        order: 1;
        margin: 16px 18px 0;
        font-size: 11.5px;
    }

    .rcSvc.is-ready .rcSvcLogo {
        order: 2;
        display: flex;
        align-items: center;
        height: 36px;
        margin-top: 8px;
        padding: 0 18px;
    }

    .rcSvc.is-ready .rcSvcLogo .serviceBrand {
        --brand-size: 16px;
    }

    .rcSvc.is-ready .rcSvcTxt {
        order: 3;
        margin-top: 10px;
        padding: 0 18px;
        font-size: 13px;
        line-height: 1.9;
    }

    /* 文字の濃さは js が --tx に入れる（真ん中 1 → 隣 0）。隣のカードは画面だけをのぞかせる */
    .rcSvc.is-ready .rcSvcTag,
    .rcSvc.is-ready .rcSvcLogo,
    .rcSvc.is-ready .rcSvcTxt {
        opacity: var(--tx, 1);
        transition: opacity .55s cubic-bezier(.33, 1, .68, 1);
    }

    .rcSvc.is-drag .rcSvcTag,
    .rcSvc.is-drag .rcSvcLogo,
    .rcSvc.is-drag .rcSvcTxt {
        transition: none;
    }

    /* ---------- 輪と矢印（index.css と同じ値） ---------- */
    .rcSvcWrap .tsCtl {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 10px;
    }

    .rcSvcWrap .tsArrow {
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid #E3E3E6;
        border-radius: 50%;
        background: #fff;
        font-size: 15px;
        line-height: 1;
        color: var(--ink);
        cursor: pointer;
    }

    .rcSvcWrap .tsCnt {
        min-width: 36px;
        font-size: 12px;
        color: #6A6A72;
        text-align: center;
    }

    /* --ts-r（半径）と js の目盛りの角度（8.2度）は対。片方だけを変えないこと */
    .rcSvcWrap .tsDial {
        --ts-r: 420px;
        display: block;
        position: relative;
        height: 58px;
        margin-top: 18px;
        overflow: hidden;
    }

    .rcSvcWrap .tsRing {
        position: absolute;
        top: 0;
        left: 50%;
        width: calc(var(--ts-r) * 2);
        height: calc(var(--ts-r) * 2);
        margin-left: calc(var(--ts-r) * -1);
        border: 1px solid #E3E3E6;
        border-radius: 50%;
        will-change: transform;
        transition: transform .55s cubic-bezier(.33, 1, .68, 1);
    }

    .rcSvcWrap .tsDial.is-drag .tsRing {
        transition: none;
    }

    .rcSvcWrap .tsRing i {
        position: absolute;
        top: -4px;
        left: 50%;
        width: 8px;
        height: 8px;
        margin-left: -4px;
        border-radius: 50%;
        background: #D5D5DA;
        transform-origin: 50% var(--ts-r);
        transition: background-color .55s cubic-bezier(.33, 1, .68, 1),
                    width .55s cubic-bezier(.33, 1, .68, 1),
                    height .55s cubic-bezier(.33, 1, .68, 1),
                    margin-left .55s cubic-bezier(.33, 1, .68, 1),
                    top .55s cubic-bezier(.33, 1, .68, 1);
    }

    .rcSvcWrap .tsRing i.on {
        top: -6.5px;
        width: 13px;
        height: 13px;
        margin-left: -6.5px;
        background: var(--gold);
        transform-origin: 50% calc(var(--ts-r) + 2.5px);
    }

    .rcSvcWrap .tsPin {
        position: absolute;
        top: 0;
        left: 50%;
        z-index: 2;
        width: 1px;
        height: 20px;
        margin-left: -.5px;
        background: var(--ink);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rcSvc.is-ready > li,
    .rcSvcWrap .tsRing,
    .rcSvcWrap .tsRing i {
        transition: none;
    }
}

/* =====================================================
 * 冒頭：仲間を募集（2026-10-02。見本 /design/recruit-join-3/ の2）
 * 英字の小見出し → 大きな見出し → 説明1行 → 募集職種の1行
 * ===================================================== */
.rcLeadKicker {
    margin-bottom: 16px;
}

.rcLeadJob {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
    margin-top: clamp(26px, 3vw, 36px);
    padding-top: 16px;
    /* 下の線は引かない。すぐ下に節の区切り線があり、二重に見えるため */
    border-top: 1px solid var(--ink);
}

.rcLeadJob dt {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--rc-gold-deep);
    white-space: nowrap;
}

.rcLeadJob dd {
    font-size: clamp(14px, 1.45vw, 15.5px);
    line-height: 1.8;
}

.rcLeadJob small {
    display: block;
    font-size: 12.5px;
    color: var(--rc-muted);
}

@media screen and (max-width: 768px) {
    .rcLeadJob {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}