/* 募集要項（entry.html）— DESIGN_SYSTEM_PAGES.md 4.7、HEADINGS §13。
   位置はサイト後半だが、焦点は転職を考える本人。TOP前半と同じ White＋Spectrum で、
   ここで挑戦してみてもいいかもしれない、という明るい見通しを支える（2026-10-20 ユーザー指定）。
   2026-11-05 全面改修：冒頭の要点 → 役割 → 応募条件と姿勢 → 未経験から挑む支え → 条件 → 制度 → 選考。
   判断材料（条件・役割・制度・選考）は読みやすさを優先し、塗料は写真の背後と Section の外周に限る。
   見出しと説明段落は中央の軸（entry限定の局所例外）。一覧・表・図はそれぞれの読みの軸を保つ。 */
#main {
  --entry-sec-pad: clamp(80px, 8.4vw, 120px);
  --entry-gold-text: #947837;                  /* DS 9節：明るい背景の文字用Gold */
  --entry-warm: #FAF8F4;                       /* TOP Statementの温かい紙色 */
  --entry-sheet-radius: clamp(28px, 3.9vw, 56px);
  --entry-shadow: 0 26px 52px -30px rgba(11, 31, 51, .38);
  --entry-soft-shadow: 0 18px 36px -30px rgba(11, 31, 51, .35);
  --entry-border: #E4E8EC;
  --entry-h3: clamp(20px, 1.75vw, 24px);       /* Section内の小見出し（h2の1.2倍以上の差を保つ） */
}

/* ---------- Page head：白地の中央に題名と募集の要点 ---------- */
.entry-hero { position: relative; overflow-x: clip; padding: clamp(40px, 5vw, 72px) 0 clamp(40px, 4.5vw, 64px); background: var(--white); }
.entry-hero__inner { position: relative; }
.entry-hero__title { position: relative; z-index: 2; margin: 0; color: var(--ink); text-align: center; font-feature-settings: "palt"; }

.entry-summary-stage { position: relative; isolation: isolate; max-width: 1100px; margin: clamp(28px, 3.5vw, 48px) auto 0; }
.entry-summary__brush { position: absolute; top: 50%; left: 50%; width: clamp(940px, 105vw, 1400px); max-width: none; height: auto; transform: translate(-50%, -50%) rotate(2deg); pointer-events: none; }

/* 募集の要点：4つの事実を同じ重さで並べ、区切り線で読み分ける。 */
.entry-summary { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--entry-border); border-radius: 16px; background: rgb(255 255 255 / 90%); box-shadow: var(--entry-shadow); }
.entry-summary__item { min-width: 0; padding: clamp(24px, 2.4vw, 32px) clamp(20px, 2.2vw, 30px) clamp(26px, 2.6vw, 34px); }
.entry-summary__item + .entry-summary__item { border-left: 1px solid var(--entry-border); }
.entry-summary dt { color: var(--entry-gold-text); font-size: 19px; font-weight: 700; letter-spacing: .06em; line-height: 1.6; }
.entry-summary dd { margin-top: 10px; color: var(--ink); font-size: clamp(16px, 1.25vw, 17.5px); font-weight: 500; line-height: 1.75; }


/* ---------- Section共通 ---------- */
.e-sec { position: relative; overflow-x: clip; padding: var(--entry-sec-pad) 0; background: var(--white); }
/* 冒頭に続く白地はbodyと共有する。 */
.entry-hero + .e-sec:not(.e-sec--warm) { background-color: transparent; }
/* 温かい紙色の面：上端を角丸にし、白い面の上に一枚重なるように見せる（TOP Statementと同じ扱い） */
.e-sec--warm { z-index: 1; border-radius: var(--entry-sheet-radius) var(--entry-sheet-radius) 0 0; background: var(--entry-warm); box-shadow: 0 -24px 44px -32px rgba(11, 31, 51, .16); }
.e-grid { display: block; }
.e-h { margin: 0 auto; max-width: 100%; color: var(--ink); font-size: var(--heading-h2-size); font-weight: var(--heading-weight); line-height: 1.4; letter-spacing: .02em; text-align: center; text-wrap: balance; }
.e-body { max-width: 780px; margin: clamp(24px, 2.4vw, 32px) auto 0; }
.e-body--wide { max-width: 1000px; }
.e-body > p, .e-lead { color: var(--body); font-size: 16px; line-height: 2; }
.e-body > p + p { margin-top: .7em; }
.e-lead { max-width: 820px; margin: clamp(24px, 2.4vw, 32px) auto 0; }
main :is(.e-body > p, .e-lead, .req-bridge, .req-close).subpage-prose { text-align: center; text-align-last: center; }
/* 日本語の文節で折り返す（2026-11-05 実画面監査）。「取り組む」「Goldrattスクール」「プライベート」等を語の途中で分けず、
   1〜2文字や語尾だけの最終行も避ける。文節単位の折返しと両端揃えを併用すると行間の字間が大きく開くため、
   entryの本文は行頭揃えにする（entry限定の局所例外。DESIGN_SYSTEM.md 9節・PAGES 4.7）。中央揃えの説明段落は下の指定を維持。
   word-break: auto-phrase に未対応のブラウザーは通常の折返しになり、要所の .u がまとまりを保つ */
#main :is(p, li, dd, dt, h2, h3) { word-break: auto-phrase; text-wrap: pretty; }
#main .subpage-prose:not(:is(.e-body > p, .e-lead, .req-bridge, .req-close)) { text-align: start; text-align-last: start; }

/* ---------- #career：日本語の役割名を主役に、略称・正式名称は下の補足へ ---------- */
.career-roles { --role-gap: clamp(28px, 3.4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--role-gap); max-width: 1100px; margin: clamp(44px, 4.8vw, 64px) auto 0; }
.career-roles__group { display: flex; flex-direction: column; min-width: 0; }
.career-roles__group--open { grid-column: span 2; }
.career-roles__label { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--navy); color: var(--navy); font-size: 15px; font-weight: 700; letter-spacing: .08em; line-height: 1.6; }
.career-roles__group--future { position: relative; }
.career-roles__group--future .career-roles__label { border-color: #C3CBD4; color: var(--muted); }
.career-roles__group--future::before { content: ""; position: absolute; left: calc(var(--role-gap) / -2 - 8px); top: calc(50% + 22px); width: 12px; height: 12px; border-top: 2px solid var(--navy); border-right: 2px solid var(--navy); transform: rotate(45deg); }
.career-roles__positions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--role-gap); flex: 1; }
.career-role { display: flex; flex-direction: column; min-width: 0; padding: 34px 30px 28px; border-top: 4px solid var(--navy); border-radius: 4px 4px 14px 14px; background: var(--white); box-shadow: var(--entry-shadow); }
.career-roles__group--future > .career-role { flex: 1; border: 1px dashed #B4BEC9; border-top: 4px solid #C3CBD4; background: rgba(255, 255, 255, .6); box-shadow: none; }
.career-role__summary { margin: 0; color: var(--ink); font-size: clamp(21px, 1.95vw, 27px); font-weight: var(--heading-weight); line-height: 1.5; letter-spacing: .02em; }
.career-roles__group--future .career-role__summary { color: #3A4A5C; font-size: clamp(19px, 1.6vw, 22px); }
.career-role__description { margin-top: 14px; color: var(--body); font-size: 16px; line-height: 1.9; }
.career-role__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: auto; padding-top: 26px; }
.career-role__heading::before { content: ""; flex: 0 0 100%; height: 1px; margin-bottom: 16px; background: var(--line); }
.career-role__abbr { color: var(--navy); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: .06em; }
.career-role__name { color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.6; }
.career-team { max-width: 780px; margin: clamp(36px, 3.6vw, 48px) auto 0; color: var(--body); font-size: 16px; line-height: 2; text-align: center; }
.career-exit { margin-top: 8px; text-align: center; }

/* ---------- #requirements：応募条件（事実）と、仕事で大切にしていること（姿勢）を分ける ---------- */
.req-subhead { margin: 0; color: var(--ink); font-size: var(--entry-h3); font-weight: var(--heading-weight); line-height: 1.5; letter-spacing: .04em; text-align: center; }
.req-conditions-block { max-width: 960px; margin: clamp(40px, 4.2vw, 56px) auto 0; }
.req-conditions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.req-conditions li { display: flex; flex-wrap: wrap; align-content: center; min-height: 84px; padding: 20px 26px; border: 1px solid var(--entry-border); border-radius: 14px; background: var(--white); box-shadow: var(--entry-soft-shadow); color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.7; }
.req-values { margin-top: clamp(72px, 7vw, 104px); }
.req-bridge { max-width: 780px; margin: 18px auto 0; color: var(--body); font-size: 16px; line-height: 2; }

/* 求める姿勢：写真の背後から一筆（Pink → Orange）が抜ける。項目は番号の軸で読む */
.req-people-block { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(40px, 5.6vw, 88px); max-width: 1100px; margin: clamp(36px, 3.6vw, 52px) auto 0; }
.req-photo { position: relative; isolation: isolate; margin: 0; }
.req-photo__brush { position: absolute; z-index: -1; left: -34%; bottom: -16%; width: 148%; max-width: none; transform: rotate(-10deg); pointer-events: none; }
.req-photo__img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; box-shadow: var(--entry-shadow); }
.req-people { counter-reset: rp; border-top: 1px solid var(--line); }
.req-people li { counter-increment: rp; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; padding: 22px 0 22px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: clamp(17px, 1.35vw, 19px); font-weight: 700; line-height: 1.75; }
.req-people li::before { content: counter(rp, decimal-leading-zero); color: #947837; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; }
.req-close { max-width: 780px; margin: clamp(44px, 4.4vw, 60px) auto 0; color: var(--body); font-size: 16px; line-height: 2; }

/* ---------- #challenge：仕事の難しさと、一人で抱えない支え。前職の多様さを本人の写真で示す ---------- */
.challenge-support { counter-reset: cs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px); max-width: 1100px; margin: clamp(44px, 4.6vw, 64px) auto 0; }
.challenge-support__item { counter-increment: cs; min-width: 0; padding-top: 22px; border-top: 2px solid var(--navy); }
.challenge-support__item::before { content: counter(cs, decimal-leading-zero); display: block; color: #947837; font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; }
.challenge-support__title { margin: 16px 0 0; color: var(--ink); font-size: var(--entry-h3); font-weight: var(--heading-weight); line-height: 1.5; }
.challenge-support__item p { margin-top: 12px; color: var(--body); font-size: 16px; line-height: 1.95; }
.challenge-exits { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 40px; margin-top: clamp(28px, 2.8vw, 40px); }

.origins { max-width: 1100px; margin: clamp(64px, 6.4vw, 96px) auto 0; padding: clamp(40px, 4vw, 56px) clamp(24px, 3.4vw, 48px) clamp(28px, 3vw, 40px); border-radius: 20px; background: var(--white); box-shadow: var(--entry-shadow); }
.origins__title { margin: 0; color: var(--ink); font-size: var(--entry-h3); font-weight: var(--heading-weight); line-height: 1.5; text-align: center; }
.origins__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(32px, 3.2vw, 44px); }
.origin { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.origin__face { flex: none; width: clamp(104px, 9.4vw, 132px); height: clamp(104px, 9.4vw, 132px); border-radius: 50%; background: #EEF0F3; object-fit: cover; object-position: 50% 4%; }
.origin__text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.origin__label { display: block; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1.6; }
.origin__from { margin-top: 18px; }
.origin__job { display: block; margin-top: 2px; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.65; }
.origin__now { margin-top: 12px; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.6; }
.origin__now .origin__label { display: inline; margin-right: .6em; }
.origin__name { margin-top: 4px; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.6; }
.origins__exit { margin-top: clamp(20px, 2.4vw, 32px); text-align: center; }

/* ---------- #conditions：項目と値を同じ読みの軸で比較する ---------- */
.recruit-conditions { overflow: hidden; border: 1px solid var(--entry-border); border-radius: 14px; background: var(--white); }
.recruit-conditions > div { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.recruit-conditions > div + div { border-top: 1px solid var(--entry-border); }
.recruit-conditions dt { padding: 22px 28px; background: var(--entry-warm); color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.8; }
.recruit-conditions dd { min-width: 0; padding: 22px 32px; color: var(--body); font-size: 16px; line-height: 1.8; }

/* ---------- #support-system：Goldrattらしい4つの制度。塗料（Green → Cyan）は Section の右下の外周だけ ---------- */
#support-system { overflow: clip; }
.ss-paint { position: absolute; z-index: 0; top: -24px; right: -250px; width: 470px; pointer-events: none; }
.ss-brush { width: 100%; max-width: none; transform: rotate(-16deg); }
#support-system > .wrap { position: relative; z-index: 1; }
.ss-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 960px; margin: clamp(40px, 4.4vw, 60px) auto 0; }
.ss-item { padding: 32px 34px 34px; border-radius: 14px; background: var(--white); box-shadow: var(--entry-soft-shadow); }
.ss-item dt { color: var(--ink); font-size: var(--entry-h3); font-weight: 700; line-height: 1.45; }
.ss-item dd { margin-top: 14px; color: var(--body); font-size: 16px; line-height: 1.9; }

/* ---------- #flow：親が実見した18867(1).pngの確定仕様。原本比較は親担当 ---------- */
#flow { padding-bottom: clamp(32px, 4vw, 48px); }
#flow + .recruit-cta { padding-top: clamp(28px, 3vw, 44px); }
.selection-layout { max-width: 1120px; text-align: center; }
#flow .e-h { color: var(--entry-gold-text); }
#flow .e-body { max-width: none; margin: 22px 0 0; }
#flow .e-body > p.subpage-prose { color: var(--navy); }
.selection-process { --selection-chevron: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 32px 0 0; padding: 0; list-style: none; background: var(--entry-warm); }
.selection-process > li { position: relative; min-width: 0; padding: 26px 40px 30px; }
.selection-process > li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; right: calc(-1 * var(--selection-chevron)); width: var(--selection-chevron); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 100' preserveAspectRatio='none'%3E%3Cpath d='M.5 0L35.5 50 .5 100' fill='none' stroke='%23947837' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.selection-process__no { display: block; color: var(--entry-gold-text); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; }
.selection-process h3 { margin: 8px 0 0; color: var(--navy); font-size: clamp(21px, 1.8vw, 26px); font-weight: 700; line-height: 1.5; }
.selection-process__detail { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; margin-top: 8px; }
.selection-process__detail p { margin: 0; color: var(--navy); font-size: 15px; line-height: 1.8; }
.casual-note { margin: 40px 0 0; padding: 30px 32px 32px; border-radius: 0; background: var(--paper); }
.casual-note__title { margin: 0; color: var(--entry-gold-text); font-size: var(--entry-h3); font-weight: 700; line-height: 1.5; }
#flow .casual-note > p.subpage-prose { text-align: center; text-align-last: center; }
.casual-note p { margin-top: 14px; color: var(--navy); font-size: 16px; line-height: 1.95; }

/* 900px以下は極小の3列にせず、一続きの帯を下向きに読む。SP原本ではなく可読性の適応。 */
@media (max-width: 900px) {
  .selection-process { --selection-chevron: 20px; grid-template-columns: minmax(0, 1fr); }
  .selection-process > li { padding: 24px; }
  .selection-process > li + li { padding: calc(var(--selection-chevron) + 24px) 24px 24px; }
  .selection-process > li:not(:last-child)::after { top: auto; bottom: calc(-1 * var(--selection-chevron)); left: 0; right: 0; width: auto; height: var(--selection-chevron); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 .5L50 19.5 100 .5' fill='none' stroke='%23947837' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
  .selection-process h3 { font-size: 22px; }
}

/* ---------- 中間幅 ---------- */
@media (max-width: 1100px) {
  .entry-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-summary__item + .entry-summary__item { border-left: 0; }
  .entry-summary__item:nth-child(even) { border-left: 1px solid var(--entry-border); }
  .entry-summary__item:nth-child(n + 3) { border-top: 1px solid var(--entry-border); }
  .origins__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
  .origin { flex-direction: row; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); text-align: left; }
  .origin__text { align-items: flex-start; }
  .origin__face { width: 88px; height: 88px; }
  .origin__from { margin-top: 0; }
  .origin__now { margin-top: 6px; }
  .origin__name { margin-top: 0; }
}
@media (max-width: 960px) {
  /* 3役を横に並べると説明が1行に収まらない幅：VVA・VVEを2列で並べ、PDはその下へ */
  .career-roles { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .career-roles__group--open { grid-column: auto; }
  .career-roles__group--future { margin-top: 4px; padding-top: 30px; }
  .career-roles__group--future::before { top: 0; left: calc(50% - 6px); transform: rotate(135deg); }
  .career-roles__group--future > .career-role { width: 100%; max-width: calc(50% - var(--role-gap) / 2); margin-inline: auto; }
  .career-role { padding: 30px 22px 26px; }
  .challenge-support { grid-template-columns: minmax(0, 1fr); max-width: 680px; gap: 28px; }
}
/* 本文の外周に十分な余白がない幅では、塗料を置かない（表・カード・本文に重ねない） */
@media (max-width: 1279px) {
  .ss-paint { display: none; }
}

/* ---------- スマホ ---------- */
@media (max-width: 760px) {
  #main { --entry-sec-pad: 68px; --entry-h3: 19px; }
  .entry-summary__brush { width: 600px; transform: translate(-50%, -50%) rotate(-33deg); }
  .entry-summary { grid-template-columns: minmax(0, 1fr); border-radius: 14px; }
  .entry-summary__item { padding: 20px 20px 22px; }
  .entry-summary__item:nth-child(even) { border-left: 0; }
  .entry-summary__item + .entry-summary__item { border-top: 1px solid var(--entry-border); }
  .entry-summary dd { margin-top: 6px; font-size: 16px; }
  .e-body { margin-top: 22px; }
  .e-body > p, .e-lead { font-size: 15px; }

  .career-roles { display: block; margin-top: 36px; }
  .career-roles__positions { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .career-roles__group--future { margin-top: 26px; padding-top: 30px; }
  .career-roles__group--future::before { top: 0; left: calc(50% - 6px); transform: rotate(135deg); }
  .career-role { padding: 26px 22px 22px; }
  .career-roles__group--future > .career-role { max-width: none; }
  .career-role__summary { font-size: 22px; }
  .career-roles__group--future .career-role__summary { font-size: 20px; }
  .career-role__description { margin-top: 8px; font-size: 15px; }
  .career-role__heading { padding-top: 18px; }
  .career-role__heading::before { margin-bottom: 12px; }
  .career-team { margin-top: 30px; font-size: 15px; }

  .req-conditions-block { margin-top: 32px; }
  .req-conditions { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .req-conditions li { min-height: 0; padding: 16px 18px; border-radius: 12px; font-size: 16px; }
  .req-values { margin-top: 64px; }
  .req-bridge { margin-top: 12px; font-size: 15px; }
  .req-people-block { grid-template-columns: minmax(0, 1fr); gap: 52px; margin-top: 30px; }
  .req-photo { margin: 0 4px; }
  .req-photo__brush { left: -30%; bottom: -9%; width: 112%; transform: rotate(-6deg); }
  .req-photo__img { aspect-ratio: 4 / 3; object-position: 50% 30%; }
  .req-people li { grid-template-columns: 44px minmax(0, 1fr); padding: 18px 0; font-size: 16.5px; }
  .req-people li::before { font-size: 22px; }
  .req-close { margin-top: 36px; font-size: 15px; }

  .challenge-support { margin-top: 36px; gap: 24px; }
  .challenge-support__item { padding-top: 18px; }
  .challenge-support__item::before { font-size: 24px; }
  .challenge-support__title { margin-top: 12px; }
  .challenge-support__item p { margin-top: 8px; font-size: 15px; }
  .challenge-exits { flex-direction: column; align-items: center; gap: 0; }
  .origins { margin-top: 56px; padding: 32px 18px 20px; border-radius: 16px; }
  .origins__list { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
  .origin { gap: 16px; padding: 16px 0; }
  .origin__face { width: 76px; height: 76px; }
  .origin__job { font-size: 15.5px; }

  .recruit-conditions { border-radius: 12px; }
  .recruit-conditions > div { grid-template-columns: minmax(0, 1fr); }
  .recruit-conditions dt { padding: 12px 16px; font-size: 15px; }
  .recruit-conditions dd { padding: 14px 16px 18px; font-size: 15px; }

  .ss-list { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
  .ss-item { padding: 22px 20px 24px; border-radius: 12px; }
  .ss-item dd { margin-top: 10px; font-size: 15px; }

  #flow .e-body { margin-top: 20px; }
  .selection-process { margin-top: 28px; }
  .casual-note { margin-top: 32px; padding: 26px 24px 28px; }
  .casual-note p { font-size: 15px; }
}