/* 仕事を知る（2026-10-26）：冒頭 → 1週間 → 訪問チームと持ち場 → 変革ストーリー → CTA。
   TOP後半と同じWhite＋Navy / Goldの文法。原稿は docs/jobs-manuscript-20261021.md */
#main {
  --jw-warm: #FAF8F4;
  --jw-sheet-radius: clamp(28px, 3.9vw, 56px);
  --jw-sheet-overlap: calc(var(--jw-sheet-radius) * 1.15);
  --jw-card-line: #E4E8EC;
  --jw-card-shadow: 0 18px 36px -30px rgba(11, 31, 51, .35);
}

/* ============ 冒頭：見出しとリード ============ */
.jw-head { position: relative; isolation: isolate; padding: clamp(64px, 6.4vw, 104px) 0 clamp(88px, 8vw, 120px); background: var(--white); overflow-x: clip; }
.jw-head__inner { display: block; }
.jw-head__copy { min-width: 0; max-width: 1040px; }
/* ページ名ラベルはh1の直下。形は共通の css/page-label.css */
.jw-head__label { margin-top: 26px; }
.jw-head__title { max-width: 18em; margin-top: 0; color: var(--ink); font-size: clamp(34px, 3.65vw, 54px); line-height: 1.42; letter-spacing: -.02em; text-wrap: balance; }
.jw-head__lead { max-width: 34em; margin-top: 30px; color: var(--body); font-size: 17px; line-height: 2; }
/* ============ Section共通の見出し（中央） ============ */
.jw-sec__title { text-align: center; line-height: 1.45; text-wrap: balance; }
.jw-sec__lead { max-width: 40em; margin: 22px auto 0; color: var(--body); font-size: 16px; line-height: 2; text-align: center; }

/* ============ カテゴリチップ（#team循環図・#storyの場面）：共有トークンを直接参照し、色だけでなく文字ラベルも併記する ============ */
.jw-cycle__tag, .jw-step__tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 11px; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; }
.jw-cycle__tag.cat-visit, .jw-step__tag.cat-visit { background: var(--cat-visit); }
.jw-cycle__tag.cat-meeting, .jw-step__tag.cat-meeting { background: var(--cat-meeting); }
.jw-cycle__tag.cat-prep, .jw-step__tag.cat-prep { background: var(--cat-prep); color: var(--navy); }
.jw-cycle__tag.cat-work, .jw-step__tag.cat-work { background: var(--cat-work); }
.jw-cycle__tag { margin-bottom: 12px; }

/* ============ 変革ストーリー：温かい紙色のシート。4つの場面を縦に読む ============ */
.jw-story {
  position: relative; z-index: 1;
  padding: clamp(80px, 8vw, 112px) 0 clamp(40px, 4.5vw, 64px);
  border-radius: var(--jw-sheet-radius) var(--jw-sheet-radius) 0 0;
  background: var(--jw-warm);
  box-shadow: 0 -24px 44px -32px rgba(11, 31, 51, .16);
}
.jw-story + .recruit-cta { padding-top: clamp(28px, 3vw, 44px); }
/* CASE STUDY：マスキングテープ風ラベル。見出しの直上に中央で置く */
.jw-tape { display: block; width: fit-content; margin: 0 auto clamp(18px, 2vw, 26px); padding: 7px 26px; background-color: rgba(216, 180, 106, .62); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px); color: var(--navy); font-family: "Noto Sans JP", "Hiragino Sans", Meiryo, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .22em; line-height: 1.4; text-indent: .22em; transform: rotate(-2deg); clip-path: polygon(0 8%, 3% 0, 6% 8%, 9% 0, 12% 8%, 15% 0, 85% 0, 88% 8%, 91% 0, 94% 8%, 97% 0, 100% 8%, 100% 92%, 97% 100%, 94% 92%, 91% 100%, 88% 92%, 85% 100%, 15% 100%, 12% 92%, 9% 100%, 6% 92%, 3% 100%, 0 92%); }
.jw-steps { position: relative; max-width: 1000px; margin: clamp(44px, 4.6vw, 64px) auto 0; padding: 0; list-style: none; }
/* 場面をつなぐ縦の線 */
.jw-steps::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(var(--gold), rgba(216, 180, 106, .35)); }
.jw-step { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.jw-step + .jw-step { margin-top: 28px; }
.jw-step__mark { position: sticky; top: calc(var(--gs-header-height, 76px) + 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; color: var(--navy); }
.jw-step__no { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 22px; font-weight: 900; line-height: 1; box-shadow: 0 0 0 6px var(--jw-warm); }
.jw-step__label { font-size: 18px; font-weight: 700; line-height: 1.4; }
.jw-step__card { min-width: 0; padding: clamp(28px, 3vw, 40px) clamp(24px, 3.2vw, 44px); border: 1px solid var(--jw-card-line); border-radius: 14px; background: var(--white); box-shadow: var(--jw-card-shadow); }
.jw-step__title { position: relative; color: var(--ink); font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; line-height: 1.55; text-wrap: balance; }
/* 場面の要約：現場では／Goldrattは／その結果。拾い読みでも筋とGoldrattの出番が追える。経緯の本文とクライアントの声は details に格納（常時表示は要約まで） */
.jw-gist { display: grid; gap: 10px; margin: 20px 0 0; padding: 18px 22px; border-radius: 10px; background: var(--jw-warm); }
.jw-gist__row { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 14px; align-items: baseline; }
.jw-gist dt { color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.7; letter-spacing: .02em; white-space: nowrap; }
.jw-gist dd { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.8; }
.jw-gist__row--gr dt { color: var(--navy); }
.jw-gist__row--gr dt::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--gold); vertical-align: .08em; }
.jw-gist__row--gr dd { color: var(--navy); font-weight: 700; }
.jw-gist + .jw-story__detail { margin-top: 24px; }
.jw-story__detail .subpage-prose { margin-top: 18px; color: var(--body); font-size: 16px; line-height: 2; }
.jw-story__detail .subpage-prose:first-child { margin-top: 0; }
/* 経緯の本文・クライアントの声を開閉する */
.jw-story__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.6; cursor: pointer; list-style: none; }
.jw-story__more::-webkit-details-marker { display: none; }
.jw-story__more::after { content: ""; width: 9px; height: 9px; border-right: 1.6px solid var(--navy); border-bottom: 1.6px solid var(--navy); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.jw-story__detail[open] .jw-story__more::after { transform: translateY(1px) rotate(225deg); }
.jw-story__more:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* クライアントの声：Navyの文字とGoldの縦線 */
.jw-voice { margin: 24px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--gold); }
.jw-voice + .jw-voice { margin-top: 16px; }
.jw-voice p { margin: 0; color: var(--navy); font-size: clamp(17px, 1.45vw, 19px); font-weight: 700; line-height: 1.75; }
.jw-voice footer { margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.6; }

/* ============ 訪問チームと、あなたの持ち場 ============ */
.jw-team { padding: clamp(80px, 8vw, 112px) 0 clamp(88px, 8.4vw, 120px); background: var(--white); }
.jw-team__lead { text-align-last: center; }
/* 写真スペース：素材はユーザー検討中。決まったら実写の figure へ差し替える */
.jw-photo { display: grid; place-items: center; max-width: 1100px; margin: clamp(36px, 4vw, 52px) auto 0; aspect-ratio: 21 / 9; border: 1.5px dashed #C3CCD5; border-radius: 14px; background: #F3F5F7; }
.jw-photo__label { padding: 0 16px; color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.6; text-align: center; }
.jw-visit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 1100px; margin: clamp(40px, 4.4vw, 56px) auto 0; padding: 0; list-style: none; counter-reset: none; }
.jw-visit__item { position: relative; padding: 28px 28px 30px; border: 1px solid var(--jw-card-line); border-radius: 14px; background: var(--white); box-shadow: var(--jw-card-shadow); }
/* 前 → 中 → 後 の流れ */
.jw-visit__item + .jw-visit__item::before { content: ""; position: absolute; left: -28px; top: 50%; width: 14px; height: 14px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: translateY(-50%) rotate(45deg); }
.jw-visit__title { position: relative; color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1.5; }
.jw-visit__item p { margin-top: 14px; color: var(--body); font-size: 15px; line-height: 1.95; }
.jw-cycle { position: relative; }
/* 新人だからこそ担える問い：Navyの面 */
.jw-question { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 3.6vw, 56px); align-items: center; max-width: 1100px; margin: 40px auto 0; padding: clamp(32px, 3.6vw, 48px) clamp(28px, 3.8vw, 56px); border-radius: 14px; background: var(--navy); color: var(--white); }
.jw-question__title { color: var(--gold); font-size: clamp(21px, 2vw, 27px); font-weight: var(--heading-weight); line-height: 1.5; }
.jw-question p { color: rgba(255, 255, 255, .92); font-size: 15px; line-height: 2; }
/* 先輩とは、対等に議論する：member-02・03の原文 */
.jw-peers { max-width: 1100px; margin: clamp(52px, 5.4vw, 72px) auto 0; }
.jw-peers__title { color: var(--ink); font-size: clamp(20px, 1.9vw, 24px); font-weight: 700; line-height: 1.5; text-align: center; }
.jw-peers__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin: 28px 0 0; padding: 0; list-style: none; }
.jw-peer { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 22px; align-items: start; padding: 30px 30px 24px; border: 1px solid var(--jw-card-line); border-radius: 14px; background: var(--white); box-shadow: var(--jw-card-shadow); }
.jw-peer__face { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; background: var(--jw-warm); }
.jw-peer__body { min-width: 0; }
.jw-peer__quote { margin: 0; }
.jw-peer__quote p { color: var(--navy); font-size: 15.5px; font-weight: 500; line-height: 1.95; }
.jw-peer__who { display: grid; gap: 2px; margin-top: 16px; line-height: 1.6; }
.jw-peer__name { color: var(--ink); font-size: 14px; font-weight: 700; }
.jw-peer__link { margin-top: 2px; font-size: 14px; }
.jw-team__roles { max-width: 1100px; margin: 36px auto 0; color: var(--body); font-size: 15px; line-height: 1.9; text-align: center; }
.jw-team__links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; margin-left: 16px; vertical-align: middle; }
/* 読みやすさ：短すぎる最終行を避ける */
.jw-story p, .jw-team p, .jw-gist dd { text-wrap: pretty; }

/* ============ 1週間のスケジュール（work-environmentから移設）：温かい紙色のシート ============ */
.wt.jw-week {
  position: relative; z-index: 1;
  padding-top: clamp(80px, 8vw, 112px);
  border-radius: var(--jw-sheet-radius) var(--jw-sheet-radius) 0 0;
  background: var(--white);
  box-shadow: 0 -24px 44px -32px rgba(11, 31, 51, .16);
}
.jw-week__title { text-align: center; line-height: 1.45; }
.jw-week__lead { margin: 14px 0 0; color: var(--body); font-size: 16px; line-height: 1.9; text-align: center; }
/* 用語：本人の表記はそのまま、凡例の下で読み方を補う */
.jw-terms { display: grid; gap: 6px; max-width: 760px; margin: 0 auto; padding: 14px 20px; border: 1px solid var(--jw-card-line); border-radius: 10px; background: var(--white); text-align: left; }
.jw-terms > div { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: 12px; }
.jw-terms dt { color: var(--navy); font-size: 13px; font-weight: 700; line-height: 1.75; }
.jw-terms dd { margin: 0; color: var(--body); font-size: 13px; line-height: 1.75; }

/* ============ 末尾CTA：既存の問いとボタンを白地で ============ */
.jx-cta { background: var(--white); border-top: 1px solid #ECEEF1; }
.jx-cta .jx-cta__inner { justify-items: stretch; }
.jx-cta .btn-primary { justify-self: end; }
.jx-cta .jx-cta__lead { text-align: start; text-align-last: start; }
/* 面談導線のGoldの散布（entryと同じ素材）。文字・ボタンには重ねない */
.jx-cta__splash { --w: 480px; --xr: -110px; --y: 24px; --r: -4deg; }
@media (max-width: 960px) {
  .jx-cta__splash { --w: 380px; --xr: -130px; --y: 16px; }
}
@media (max-width: 760px) {
  .jx-cta { padding-top: 152px; }
  .jx-cta__splash { --w: 240px; --xr: -64px; --y: 8px; }
}

/* ============ 中間幅 ============ */
@media (max-width: 1100px) {
  .jw-step { grid-template-columns: 184px minmax(0, 1fr); gap: 24px; }
  .jw-step__label { font-size: 17px; white-space: nowrap; }
  .jw-visit { gap: 32px; }
  .jw-visit__item + .jw-visit__item::before { left: -24px; }
}
@media (max-width: 960px) {
  .jw-visit { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 640px; }
  .jw-visit__item + .jw-visit__item::before { left: 50%; top: -24px; transform: translateX(-50%) rotate(135deg); }
  .jw-question { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .jw-peers__list { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 640px; margin-inline: auto; }
}

/* ============ 〜900px：ページ内のActionは右端へ（サイト共通。scripts/qa-mobile-actions-right.cjs） ============ */
@media (max-width: 900px) {
  .jw-team__links { display: flex; flex-direction: column; align-items: flex-end; margin: 6px 0 0; }
  .jw-team__links .inline-link { margin: 0; }
}

/* ============ スマホ ============ */
@media (max-width: 760px) {
  .jw-head { padding: 48px 0 72px; }
  .jw-head__title { margin-top: 0; font-size: clamp(27px, 7.3vw, 37px); line-height: 1.48; }
  .jw-head__lead { margin-top: 22px; font-size: 15px; }
  .jw-head__label { margin-top: 20px; }
  .jw-sec__lead, .jw-week__lead { font-size: 15px; }
  .jw-steps::before { left: 21px; top: 22px; }
  .jw-step { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .jw-step + .jw-step { margin-top: 32px; }
  .jw-step__mark { position: relative; top: auto; }
  .jw-step__no { width: 44px; height: 44px; font-size: 18px; }
  .jw-step__label { font-size: 17px; }
  .jw-step__card { margin-left: 22px; padding: 24px 20px 26px; border-radius: 12px; }
  .jw-story__detail .subpage-prose { margin-top: 14px; font-size: 15px; line-height: 1.95; }
  .jw-gist { gap: 12px; margin-top: 16px; padding: 16px; }
  .jw-gist__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .jw-gist + .jw-story__detail { margin-top: 20px; }
  .jw-voice { padding-left: 14px; }
  .jw-voice p { font-size: 16px; }
  .jw-visit__item { padding: 22px 20px 24px; border-radius: 12px; }
  .jw-visit__title { font-size: 17px; padding-bottom: 12px; }
  .jw-visit__item p { margin-top: 12px; }
  .jw-question { padding: 28px 22px 30px; border-radius: 12px; }
  .jw-photo { aspect-ratio: 4 / 3; border-radius: 12px; }
  .jw-photo__label { font-size: 13px; }
  .jw-peer { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 20px 16px; border-radius: 12px; }
  .jw-peer__face { width: 56px; height: 56px; }
  .jw-peer__quote p { font-size: 15px; }
  .jw-terms { padding: 12px 14px; }
  .jx-cta .btn-primary { justify-self: stretch; }
}