/* =========================================================
   仕事を知る /work/ と 職種詳細 /work/{job}/ — work.css（lower.css の後に読む・2026-10-29）
   /work/        ：02 ひとつの案件が動くまで（.flow：7工程×4職種。ページの見せ場）／03 キャリアステップ（.csteps）
   /work/{job}/  ：応募の入口（.jcta）／01 仕事内容（.duties）／02 やりがいと大変なこと（.honest）／
                   03 求めるスキルと入社後3か月（.skills）／04 この職種の先輩（.senior）／05 この職種の募集要項（.reqs）
   色・角丸・余白は tokens.css の変数だけ（例外：白の透過）。札（後ろにずらした面）は使わない。動きは transform／opacity だけ
   ========================================================= */

/* =========================================================
   02 ひとつの案件が動くまで（.flow）
   モード（work.js が data-flow-mode を付ける）：
     なし（JS なし）＝7工程の <details open> を縦に並べる／acc（1023px 以下）＝工程ごとの開閉／tabs（1024px 以上）＝左に工程のタブ、右に4職種
   ========================================================= */
.flow { --flow-p: 0; }
.flow, .flow__step { scroll-margin-top: calc(var(--header-h) + 12px); } /* #flow-design などで来たとき、右上の固定ボタンの下に潜らないように */
.flow__legend {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 20px; padding: 0; list-style: none;
  font-size: 13px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja);
}
.flow__legend li { display: inline-flex; align-items: center; gap: 10px; }

/* 役割のしるし：主担当＝オレンジの塗り／協力＝淡いオレンジ／—＝線だけ */
.role {
  display: inline-grid; place-items: center; min-width: 5.2em; height: 28px; padding: 0 12px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: .08em; white-space: nowrap;
}
.role--main { background: var(--color-brand); color: var(--color-on-brand); }
.role--support { background: var(--color-layer); color: var(--color-ink); }
.role--none { border-color: var(--color-line); color: var(--color-ink-sub); }

/* 工程のタブ（1024px 以上・JS ありのときだけ出す）。ボタンの既定の見た目は幅に関係なく消しておく */
.flow__nav[hidden] { display: none; }
.flow__tab {
  border: 0; border-radius: var(--radius-m); background: transparent; color: var(--color-ink);
  text-align: left; cursor: pointer;
}

/* 01 職種カードの一言：句の途中で折り返さない（「人。」だけが次の行に残らないように） */
.job-card__text { word-break: auto-phrase; }

/* MV のリード・要約・本文：句の途中で折り返さず、最後の行に1〜2字だけ残さない（共通の lower.css にも入れたい） */
.lmv__lead { word-break: auto-phrase; text-wrap: pretty; }
.lsum__text, .sec-text, .lpanel__text, .honest__text, .lane__text, .flow__lead, .flow__case-text,
.csteps__text, .senior__story, .skills__list li, .lsteps__text, .ncard__text, .pcard__title { text-wrap: pretty; }

/* 工程（<details>）：JS なし・SP は開閉の帯 */
.flow__steps { display: grid; gap: 12px; }
.flow__step { border-radius: var(--radius-m); background: var(--color-bg); }
.flow__sum {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no name chev" "no main chev";
  align-items: center; column-gap: 14px;
  min-height: 76px; padding: 14px 14px 14px 16px;
  list-style: none; cursor: pointer;
}
.flow__sum::-webkit-details-marker { display: none; }
.flow__sum-no {
  grid-area: no; display: grid; place-items: center; height: 32px; padding: 0 12px;
  border-radius: var(--radius-pill); background: var(--color-tint);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: .08em; white-space: nowrap;
}
.flow__sum-name { grid-area: name; align-self: end; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: var(--ls-heading); }
.flow__sum-main { grid-area: main; align-self: start; font-size: 12px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.flow__chev {
  grid-area: chev; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--color-bg-page);
  transition: transform .5s var(--ease-out);
}
.flow__chev svg { width: 14px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flow__sum:hover .flow__chev { background: var(--color-layer); }
.flow__step[open] .flow__chev { transform: rotate(180deg); }
.flow__panel { padding: 0 16px 22px; }
.flow__panel:focus-visible { outline-offset: -4px; border-radius: var(--radius-m); }

/* 開閉の帯に工程名があるので、中の見出し（STEP・工程名）は読み上げ用に残して見た目だけ隠す */
.flow:not([data-flow-mode="tabs"]) .flow__no,
.flow:not([data-flow-mode="tabs"]) .flow__name {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.flow__head { position: relative; }
.flow__lead { font-size: 15px; font-weight: var(--fw-bold); line-height: 1.8; letter-spacing: var(--ls-ja); }
.flow__case {
  margin-top: 12px; padding: 14px 16px 15px;
  border-radius: var(--radius-s); background: var(--color-tint);
  font-size: 14px; line-height: 1.9; letter-spacing: var(--ls-ja);
}
.flow__case-label { display: block; font-size: 12px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: .1em; color: var(--color-ink-sub); }
.flow__case-text { display: block; }

/* 4職種のレーン：職種名・役割のしるし・説明 */
.lanes { margin: 14px 0 0; padding: 0; list-style: none; }
.lane {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "job role" "text text";
  align-items: center; gap: 6px 12px;
  padding: 14px 0; border-top: 1px solid var(--color-line);
}
.lane:last-child { padding-bottom: 0; }
.lane__job { grid-area: job; font-size: 15px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading); }
.lane__role { grid-area: role; }
.lane__text { grid-area: text; font-size: 14px; line-height: 1.85; letter-spacing: var(--ls-ja); }
.lane--none .lane__text { color: var(--color-ink-sub); }

/* 切り替え・開いたとき：見出し → この案件では → レーンが順に出る（opacity／transform だけ） */
@keyframes flow-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes flow-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .page:not([data-anim="static"]) .flow__step.is-shown .flow__head { animation: flow-in .5s var(--ease-out) both; }
  .page:not([data-anim="static"]) .flow__step.is-shown .flow__case { animation: flow-in .5s var(--ease-out) .06s both; }
  .page:not([data-anim="static"]) .flow__step.is-shown .lane { animation: flow-in .5s var(--ease-out) calc(.14s + var(--k, 0) * .07s) both; }
  .page:not([data-anim="static"]) .flow__step.is-shown .lane .role { animation: flow-pop .5s var(--ease-back) calc(.26s + var(--k, 0) * .07s) both; }
}

@media (min-width: 768px) {
  .flow__sum { min-height: 84px; padding: 16px 18px 16px 22px; column-gap: 18px; }
  .flow__sum-name { font-size: 19px; }
  .flow__panel { padding: 0 22px 26px; }
  .flow__case { padding: 16px 20px 17px; font-size: 15px; }
  .lane { grid-template-columns: 9em 5.6em minmax(0, 1fr); grid-template-areas: "job role text"; align-items: start; column-gap: 18px; padding: 16px 0; }
  .lane__job { padding-top: 1px; }
  .lane__text { font-size: 15px; line-height: 1.8; }
}

/* ---- tabs（1024px 以上・JS あり）：左に7工程のタブ（選んでいる工程はオレンジの塗り）、右に選んだ工程の4職種 ---- */
@media (min-width: 1024px) {
  .flow[data-flow-mode="tabs"] .flow__main { display: grid; grid-template-columns: 252px minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .flow[data-flow-mode="tabs"] .flow__steps { display: block; }
  .flow[data-flow-mode="tabs"] .flow__sum { display: none; }
  .flow[data-flow-mode="tabs"] .flow__step:not(.is-current) { display: none; }
  .flow[data-flow-mode="tabs"] .flow__step { border-radius: var(--radius-l); }
  .flow[data-flow-mode="tabs"] .flow__panel { padding: 40px 44px 36px; }
  .flow[data-flow-mode="tabs"] .flow__panel:focus-visible { outline-offset: -8px; border-radius: var(--radius-l); }

  /* タブの並び：左の円の中心を縦の線が通り、選んだ工程まで線がオレンジになる（transform: scaleY） */
  .flow__nav { position: sticky; top: 120px; display: grid; gap: 6px; }
  .flow__nav::before, .flow__nav::after {
    content: ""; position: absolute; z-index: 0; left: 31px; top: 34px; bottom: 34px; width: 2px; border-radius: 2px;
    background: var(--color-line);
  }
  .flow__nav::after { background: var(--color-brand-soft); transform-origin: top center; transform: scaleY(var(--flow-p)); transition: transform .6s var(--ease-out); }
  .flow__tab {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "no name" "no main"; align-items: center; column-gap: 14px;
    width: 100%; min-height: 68px; padding: 10px 16px 10px 12px;
    transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
  }
  .flow__tab:hover { background: var(--color-bg); }
  .flow__tab-no {
    grid-area: no; display: grid; place-items: center; width: 40px; height: 40px;
    border: 1px solid var(--color-line); border-radius: 50%; background: var(--color-bg);
    font-size: 13px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums;
    transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
  }
  .flow__tab-name { grid-area: name; align-self: end; font-size: 17px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: var(--ls-heading); }
  .flow__tab-main { grid-area: main; align-self: start; font-size: 12px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
  .flow__tab.is-done .flow__tab-no { border-color: var(--color-layer); background: var(--color-layer); }
  .flow__tab[aria-selected="true"] { background: var(--color-brand); color: var(--color-on-brand); }
  .flow__tab[aria-selected="true"] .flow__tab-no { border-color: var(--color-bg); color: var(--color-ink); }
  .flow__tab[aria-selected="true"] .flow__tab-main { color: var(--color-on-brand); } /* オレンジの面の上は白を透かさない（オレンジ版） */

  /* 右：選んだ工程（STEP・工程名・説明 → この案件では → 4職種のレーン） */
  .flow[data-flow-mode="tabs"] .flow__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 18px; }
  .flow__no { grid-column: 1 / -1; font-size: 13px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: .12em; color: var(--color-ink-sub); }
  .flow__of { color: var(--color-brand-soft); }
  .flow[data-flow-mode="tabs"] .flow__name { font-size: 32px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: .12em; }
  .flow[data-flow-mode="tabs"] .flow__lead { font-size: 16px; }
  .flow[data-flow-mode="tabs"] .flow__case { margin-top: 20px; padding: 18px 24px 19px; }
  .flow[data-flow-mode="tabs"] .flow__case-label { display: inline; margin-right: 14px; }
  .flow[data-flow-mode="tabs"] .flow__case-text { display: inline; }
  .flow[data-flow-mode="tabs"] .lanes { margin-top: 18px; }
  .flow[data-flow-mode="tabs"] .lane { grid-template-columns: 9.5em 6em minmax(0, 1fr); padding: 20px 4px; }
  .flow[data-flow-mode="tabs"] .lane__job { font-size: 16px; }
}
@media (min-width: 1200px) {
  .flow[data-flow-mode="tabs"] .flow__main { grid-template-columns: 268px minmax(0, 1fr); column-gap: 48px; }
  .flow[data-flow-mode="tabs"] .flow__panel { padding: 48px 56px 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__chev, .flow__nav::after, .flow__tab, .flow__tab-no { transition: none; }
}
.page[data-anim="static"] .flow__nav::after, .page[data-anim="static"] .flow__tab, .page[data-anim="static"] .flow__tab-no,
.page[data-anim="static"] .flow__chev { transition: none; }

/* =========================================================
   03 キャリアステップ（.csteps＝.lsteps の横並び版）：SP は縦（左に年次のピル・縦の線）、1024px からは4つ横並び（横の線）
   ========================================================= */
.csteps .lsteps__item { padding-bottom: 20px; }
.csteps__card { padding: 20px 20px 22px; border-radius: var(--radius-m); background: var(--color-tint); }
.csteps__role { font-size: 18px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading); }
.csteps__income {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px;
  margin-top: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--color-line);
}
.csteps__label { font-size: 12px; font-weight: var(--fw-bold); line-height: 1.6; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.csteps__value { display: inline-flex; align-items: baseline; gap: 2px; }
.csteps__income .num { font-size: 32px; }
.csteps__text { margin-top: 12px; font-size: 14px; line-height: 1.9; letter-spacing: var(--ls-ja); }
.csteps__skills { margin-top: 10px; font-size: 13px; line-height: 1.8; letter-spacing: var(--ls-ja); }
.csteps__skills .csteps__label { display: block; }
.csteps__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; margin-top: 28px; }

@media (min-width: 768px) {
  .csteps__card { padding: 24px 26px 26px; }
  .csteps__role { font-size: 19px; }
  .csteps__text { font-size: 15px; }
}
@media (min-width: 1024px) {
  .csteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
  .csteps .lsteps__item { display: flex; flex-direction: column; row-gap: 16px; padding-bottom: 0; }
  .csteps .lsteps__no { align-self: flex-start; min-width: 96px; padding: 0 18px; }
  .csteps .lsteps__item:not(:last-child)::before { left: 108px; right: -12px; top: 17px; bottom: auto; width: auto; height: 2px; transform-origin: left center; }
  .csteps__card { flex: 1; }
  .csteps__income .num { font-size: 36px; }
}
@media (min-width: 1024px) and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .page:not([data-anim="static"]) .reveal:not(.is-act) .csteps .lsteps__item::before { transform: scaleX(0); }
}

/* =========================================================
   職種詳細 /work/{job}/
   ========================================================= */
/* 応募の入口（要約のすぐ下）。白い地なので白いピルは淡いオレンジに */
.lsum + #duties { padding-top: 48px; }
.jcta { margin: 0 0 clamp(72px, 9vw, 112px); }
.jcta .btn-sub { background: var(--color-tint); }
.jcta .btn-sub:hover { background: var(--color-layer); }
@media (max-width: 767px) {
  .jcta { flex-direction: column; align-items: stretch; gap: 20px; }
}

/* 01 仕事内容 */
.duties { margin: 0; padding: 0; list-style: none; }
.duties .lpanel__in { height: 100%; }
.duties .lpanel__title { word-break: auto-phrase; }
.duties + .lactions { margin-top: 28px; }

/* 02 やりがいと大変なこと：2列を同じ重さで（行の高さを左右でそろえる） */
.honest { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
.honest__col { display: grid; row-gap: 12px; align-content: start; }
.honest__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.honest__mark {
  display: inline-block; padding: 7px 20px 8px;
  border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-on-brand);
  font-size: 16px; font-weight: var(--fw-bold); line-height: 1.4; letter-spacing: .12em;
}
.honest__count { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.honest__list { display: grid; row-gap: 12px; margin: 0; padding: 0; list-style: none; }
.honest__item { --card-r: var(--radius-m); }
.honest__in {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; column-gap: 14px;
  height: 100%; padding: 22px 20px 24px;
  border-radius: var(--radius-m); background: var(--color-bg);
}
.honest__no { grid-row: 1 / 3; font-size: 18px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: .04em; color: var(--color-brand-soft); }
.honest__title { font-size: 17px; font-weight: var(--fw-bold); line-height: 1.55; letter-spacing: var(--ls-heading); word-break: auto-phrase; }
.honest__text { grid-column: 2; margin-top: 6px; font-size: 14px; line-height: 1.9; letter-spacing: var(--ls-ja); }
@media (min-width: 768px) {
  .honest { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  @supports (grid-template-rows: subgrid) {
    .honest { grid-template-rows: auto repeat(3, auto); row-gap: 12px; }
    .honest__col { grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; }
    .honest__list { grid-row: span 3; grid-template-rows: subgrid; }
  }
  .honest__in { padding: 26px 26px 28px; column-gap: 16px; }
  .honest__text { font-size: 15px; }
}
@media (min-width: 1200px) {
  .honest { column-gap: 32px; }
  .honest__in { padding: 30px 32px 32px; }
  .honest__title { font-size: 18px; }
}

/* 03 求めるスキルと入社後3か月 */
.skills { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
.skills__title { margin-bottom: 16px; }
.skills__box { padding-bottom: 28px; }
.skills__label {
  display: inline-block; padding: 2px 14px;
  border-radius: var(--radius-xs); background: var(--color-brand); color: var(--color-on-brand);
  font-size: 13px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: .1em;
}
.skills__label ~ .skills__label { background: var(--color-bg); color: var(--color-ink); }
.skills__list { margin: 12px 0 0; padding: 0; list-style: none; }
.skills__list + .skills__label { margin-top: 24px; }
.skills__list li { position: relative; padding-left: 1.3em; font-size: 15px; font-weight: var(--fw-medium); line-height: 1.85; letter-spacing: var(--ls-ja); }
.skills__list li + li { margin-top: 8px; }
.skills__list li::before {
  content: ""; position: absolute; left: .2em; top: .72em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-brand-mid);
}
.skills__more { margin-top: 20px; }
@media (min-width: 1024px) {
  .skills { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; align-items: start; }
}
@media (min-width: 1200px) {
  .skills { column-gap: 80px; }
  .skills__list li { font-size: 16px; }
}

/* 04 この職種の先輩：左にカード、右に紹介 */
.senior { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; align-items: center; }
.pcards.senior__card { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.senior__meta { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.8; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.senior__story { margin-top: 12px; font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 2.05; letter-spacing: var(--ls-ja); }
.senior__more { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 16px; }
.senior__quote { margin-top: 10px; font-size: 14px; font-weight: var(--fw-medium); line-height: 1.9; letter-spacing: var(--ls-ja); }
@media (min-width: 768px) {
  .senior { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
}
@media (min-width: 1024px) {
  .senior { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 72px; }
  .senior__meta { font-size: 14px; }
  .senior__story { margin-top: 16px; font-size: 17px; }
  .senior__more { margin-top: 24px; }
}

/* 05 この職種の募集要項：新卒／キャリアの2列 */
.reqs { margin: 0; padding: 0; list-style: none; }
.req__in { display: flex; flex-direction: column; height: 100%; }
.req__tag {
  align-self: flex-start; padding: 1px 10px; border-radius: var(--radius-xs);
  background: var(--color-brand); color: var(--color-on-brand);
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1.7; letter-spacing: .08em;
}
.req__title { margin-top: 10px; font-size: 20px; font-weight: var(--fw-bold); line-height: 1.5; letter-spacing: var(--ls-heading); }
.req__job { margin-left: .7em; font-size: 14px; letter-spacing: var(--ls-ja); color: var(--color-ink-sub); }
.req__table { margin-top: 14px; }
.req__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: auto 0 0; padding: 14px 0 0; list-style: none; }
.reqs__cta { margin-top: 48px; }
@media (min-width: 768px) {
  .req__table .dtable__row { grid-template-columns: 5.5em minmax(0, 1fr); column-gap: 18px; padding: 14px 2px; }
  .req__table .dtable__th { font-size: 14px; }
  .req__table .dtable__td { font-size: 15px; }
}