/* work-environment.html #numbers「数字で見るGoldratt」
   前職の分野・在住都道府県・メンバーが集う機会は2026-10-19の確定集計（正本：scripts/work-numbers/numbers.json）。
   バケーション取得率は実値が確定するまで出さない。
   仕様：DESIGN_SYSTEM_PAGES.md 4.6.1／docs/work-numbers-20261019.md */
.work-numbers { padding: clamp(48px, 4.5vw, 64px) 0 126px; background: var(--white); }
.work-numbers__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 72px; margin-top: 54px; }

/* ---- 3項目を白い余白で区切る。囲みの背景・枠線は置かない ---- */
.numbers-card {
  position: relative; display: flex; flex-direction: column;
  min-width: 0; padding: 0;
}
.numbers-card__head { position: relative; z-index: 1; text-align: center; }
.numbers-card__head h3 { margin: 0; }
/* 見出し＝Q（紺の丸）、直下のリード文＝A（金の丸）。2026-11-04 */
.numbers-card__q, .numbers-card__a { display: flex; align-items: flex-start; justify-content: center; gap: 14px; margin: 0; text-align: left; }
.qa-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.qa-mark--q { background: var(--navy); color: var(--white); }
.qa-mark--a { background: var(--gold); color: var(--navy); }
.numbers-card__q-text { padding-top: 6px; color: var(--muted); font-size: 17px; font-weight: 500; line-height: 1.7; text-wrap: pretty; }
.numbers-card__a { margin-top: 16px; }
.numbers-card__a-text { padding-top: 3px; color: var(--ink); font-size: clamp(20px,2vw,26px); font-weight: var(--heading-weight); line-height: 1.6; text-wrap: pretty; }
.numbers-card__head + * { margin-top: 28px; }
/* 価値訴求の一文（2026-11-04）：対応する図表エリアに重ねるラベル。わずかに右肩上がり、ブランドの金地に紺の文字。
   図表の文字を隠さない位置（各図の余白側）に置く。押せる要素の上に来ても操作を妨げないよう pointer-events は切る。 */
.numbers-card__figure { position: relative; }
.numbers-card__message {
  position: absolute; z-index: 2; width: max-content; margin: 0; padding: 9px 16px 10px;
  border-radius: 3px; background: var(--gold); color: var(--navy);
  box-shadow: 0 12px 22px -16px rgba(11, 31, 51, .55);
  font-size: 16px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; text-align: left; text-wrap: balance;
  transform: rotate(-3deg); pointer-events: none;
}
.numbers-card__message-line { display: block; white-space: nowrap; }
/* 01 前職：右下の空いた欄（3列目の下）に重ね、下端から少しはみ出す */
.numbers-card__message--careers { right: 0; bottom: -18px; transform-origin: 100% 100%; }
/* 02 在住地：地方ボタン（と選択時の一覧）の下の空き。流れの中に置き、一覧が開いても重ならない */
.numbers-card__message--location { position: relative; align-self: flex-end; margin-top: 6px; transform-origin: 100% 100%; }
/* 03 集う機会：内訳の「忘年会」（5列目）の下 */
.numbers-card__message--gatherings { position: relative; align-self: flex-end; margin-top: -36px; transform-origin: 100% 0; }

/* ---- 01 前職の多様性：スマホ冒頭の「グループから探す」ジャンプリンク（PC・タブレットでは出さない） ---- */
.career-jump { display: none; }
.career-jump__label { margin-bottom: 8px; color: var(--navy); font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1.5; text-align: center; }
.career-jump__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.career-jump__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px;
  background: var(--white); border: 1px solid #C5CFD9; border-radius: 4px;
  color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; word-break: keep-all;
}
.career-jump__link:hover { border-color: var(--navy); }
.career-jump__link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* ---- 01 前職の多様性：関連分野ごとにまとめ、「アイコン＋分野名＋人数」を1組で見せる ---- */
/* グループは小見出しで区切り、列は自動で均等に流す（PC3列・タブレット2列・スマホ1列）。人数は各行の右端に揃える。 */
.career-groups { column-count: 3; column-gap: 56px; margin-top: 34px; }
.career-group { break-inside: avoid; margin-bottom: 32px; }
.career-group__title {
  margin: 0; padding-bottom: 10px; scroll-margin-top: 8px; /* 固定ヘッダー分はhtmlのscroll-padding-topが担う */
  border-bottom: 2px solid var(--navy); color: var(--ink);
  font-size: 16px; font-weight: var(--heading-weight); line-height: 1.5; letter-spacing: .02em;
}
.career-group__list { margin: 0; padding: 0; list-style: none; }
.career-field {
  display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; column-gap: 14px;
  padding: 12px 0; border-bottom: 1px solid #DDE4EA;
}
.career-field__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #E4ECF1; color: var(--navy); }
.career-field__svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.career-field__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.career-field__name { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.career-field__count { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 2px; min-width: 3.4em; color: var(--navy); white-space: nowrap; }
.career-field__count strong { font-size: 28px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.career-field__count span { font-size: 14px; font-weight: 700; }
/* 見た目の高さは文字1行ぶんのまま、押せる高さは44px以上にする */
.career-field__link {
  display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0;
  color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.career-field__link:hover { text-decoration-color: var(--navy); }
.career-field__link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* ---- 02 在住都道府県：左に地図・右に詳細 ---- */
.pref-explorer { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,1fr); gap: 44px; align-items: start; margin-top: 30px; }
.pref-map { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.pref-map__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pref { fill: #CBD5DE; stroke: var(--white); stroke-width: .9px; stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .12s ease; }
.pref.is-residents { fill: #4C7186; }
.pref-map__inset { fill: var(--white); stroke: #8E9BA8; stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.pref-map__inset-label { position: absolute; color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; pointer-events: none; }
.pref-map__tip {
  position: absolute; z-index: 3; padding: 7px 12px; border-radius: 4px; background: var(--navy); color: var(--white);
  font-size: 14px; font-weight: 700; line-height: 1.4; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 14px rgba(6,21,34,.22);
}
.pref-map__tip[hidden] { display: none; }
/* 選択：地方 → その地方の県を強調し、ほかは薄く。県 → その県を金色で強調。 */
.pref-map[data-state="region"] .pref { opacity: .3; }
.pref-map[data-state="region"] .pref.is-in-region { opacity: 1; }
.pref-map[data-state="region"] .pref.is-in-region.is-residents { fill: var(--gold); stroke: var(--navy); }
.pref-map[data-state="region"] .pref.is-in-region:not(.is-residents) { fill: #EADFC4; }
.pref.is-selected, .pref.is-selected.is-residents { fill: var(--gold); stroke: var(--navy); stroke-width: 1.6px; opacity: 1; }
.pref.is-selected:not(.is-residents) { fill: #EADFC4; }
.pref.is-hint { stroke: var(--navy); stroke-width: 1.6px; }
@media (hover: hover) {
  .pref:hover { fill: #B4C1CD; }
  .pref.is-residents:hover { fill: #2F5670; }
  .pref.is-selected:hover, .pref.is-selected.is-residents:hover { fill: var(--gold); }
  .pref.is-selected:not(.is-residents):hover { fill: #EADFC4; }
  .pref-map[data-state="region"] .pref.is-in-region.is-residents:hover { fill: var(--gold); }
  .pref-map[data-state="region"] .pref:not(.is-in-region):hover { opacity: .5; }
}

.pref-panel { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pref-panel__label { margin-bottom: 8px; color: var(--navy); font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1.5; }
.pref-detail {
  position: relative; scroll-margin: 84px 0 16px; min-height: 204px; padding: 20px 22px 12px;
  background: var(--white); border: 1px solid #DCE3E9; border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0;
}
.pref-detail__view { display: flex; flex-direction: column; align-items: flex-start; min-height: 164px; }
.pref-detail__view[hidden] { display: none; }
.pref-detail__eyebrow { color: var(--navy); font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1.5; }
.pref-detail__name { margin-top: 6px; color: var(--ink); font-size: clamp(26px,2.4vw,32px); font-weight: var(--heading-weight); line-height: 1.3; }
.pref-detail__value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: 10px; color: var(--navy); }
.pref-detail__value strong { font-size: clamp(46px,4.6vw,60px); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.pref-detail__value span { font-size: 16px; font-weight: 700; }
.pref-detail__sum { margin-right: 4px; color: var(--muted); font-size: 15px !important; }
.pref-detail__value--zero { margin-top: 14px; font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--body); }
.pref-detail__sub { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.pref-detail__lead { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; color: var(--navy); }
.pref-detail__lead strong { font-size: clamp(56px,5.6vw,72px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.pref-detail__lead span { font-size: 22px; font-weight: 700; }
.pref-detail__text { margin-top: 6px; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.7; }
.pref-detail__reset {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; padding: 0 2px; border: 0; background: none; cursor: pointer;
  color: var(--navy); font: 700 14px/1.4 "Noto Sans JP",sans-serif;
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.pref-detail__reset:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.pref-regions__buttons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.pref-region, .pref-row {
  display: flex; width: 100%; align-items: center; justify-content: center; min-height: 46px; padding: 6px 8px;
  background: var(--white); border: 1px solid #C5CFD9; border-radius: 4px; cursor: pointer;
  color: var(--navy); font: 700 15px/1.35 "Noto Sans JP",sans-serif; text-align: center; word-break: keep-all;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pref-region:hover, .pref-row:hover { border-color: var(--navy); }
.pref-region:focus-visible, .pref-row:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pref-region[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pref-lists { min-height: 0; }
.pref-list__rows { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
.pref-row { justify-content: space-between; gap: 10px; text-align: left; }
.pref-row__name { min-width: 0; }
.pref-row__count { color: var(--navy); font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pref-row.is-zero { background: transparent; border-style: dashed; border-color: #B7C2CD; color: var(--muted); font-weight: 500; }
.pref-row.is-zero .pref-row__count { color: var(--muted); font-weight: 700; }
.pref-row[aria-pressed="true"] { background: #F6EBCB; border-color: var(--navy); border-style: solid; box-shadow: inset 3px 0 0 var(--gold); }
/* JSが無いときは、地方ごとの一覧をそのまま並べて読めるようにする */
.pref-explorer:not([data-enhanced]) .pref-lists { display: grid; gap: 18px; }
.pref-explorer:not([data-enhanced]) .pref-region { cursor: default; }
.pref-list[hidden] { display: none; }

/* ---- 03 メンバーが集う機会 ---- */
.numbers-meetings { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; margin-top: 26px; text-align: center; }
.numbers-meetings__value { display: flex; align-items: baseline; flex: none; gap: 8px; color: var(--navy); white-space: nowrap; }
.numbers-meetings__prefix { font-size: clamp(22px,2.4vw,30px); font-weight: 700; }
.numbers-meetings__value strong { font-size: clamp(80px,9vw,124px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.numbers-meetings__unit { font-size: clamp(30px,3.4vw,44px); font-weight: 700; }
.numbers-meetings__note { color: var(--body); font-size: 15px; line-height: 1.95; text-wrap: pretty; }
.numbers-meetings__breakdown { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; gap: 24px; margin: 0; }
.numbers-meetings__breakdown > div { min-width: 0; }
.numbers-meetings__breakdown dt { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.5; }
.numbers-meetings__breakdown dd { margin: 8px 0 0; color: var(--navy); font-size: 18px; line-height: 1.5; }
.numbers-meetings__breakdown strong { font-size: 32px; font-weight: 900; }
.numbers-meetings__format { display: block; max-width: 100%; margin-top: 4px; color: var(--muted); font-size: 13px; white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 1060px) {
  .career-groups { column-count: 2; column-gap: 44px; }
  /* 2列・1列の一覧は右下に空きがないため、一覧の下端（グループ下の余白）に重ねて右寄せで置く */
  .numbers-card__message--careers { position: relative; right: auto; bottom: auto; margin: -10px 0 0 auto; }
  .pref-explorer { gap: 32px; }
}
@media (max-width: 850px) {
  .pref-explorer { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .pref-map { max-width: 520px; }
  .numbers-meetings { gap: 30px; }
  .numbers-meetings__breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 3列では「忘年会」は2行目の2列目 */
  .numbers-card__message--gatherings { align-self: flex-start; margin-top: -10px; margin-left: calc((100% - 48px) / 3 + 24px); transform-origin: 0 0; }
}
@media (max-width: 760px) {
  .work-numbers { padding: 40px 0 88px; }
  .work-numbers__grid { gap: 64px; margin-top: 34px; }
  .numbers-card__q, .numbers-card__a { gap: 12px; }
  .qa-mark { width: 34px; height: 34px; font-size: 16px; }
  .numbers-card__q-text { padding-top: 4px; font-size: 15px; }
  .numbers-card__a-text { padding-top: 3px; font-size: 18px; }
  .numbers-card__message { font-size: 14px; padding: 7px 12px 8px; }
  /* 2列では「忘年会」が最終行いっぱいに広がるため、その下に左寄せで置く */
  .numbers-card__message--gatherings { margin-left: 0; }
  .career-jump { display: block; margin-top: 22px; }
  .career-groups { column-count: 1; margin-top: 26px; }
  .career-group { margin-bottom: 24px; }
  .career-group__title { font-size: 15px; }
  .career-field { grid-template-columns: 38px minmax(0,1fr) auto; column-gap: 12px; padding: 8px 0; }
  .career-field__icon { width: 38px; height: 38px; }
  .career-field__svg { width: 22px; height: 22px; }
  .career-field__name { font-size: 15px; }
  .career-field__count strong { font-size: 26px; }
  .pref-map { margin-inline: -6px; width: calc(100% + 12px); max-width: none; }
  .pref-detail { min-height: 192px; padding: 18px 18px 10px; }
  .pref-detail__view { min-height: 160px; }
  .pref-regions__buttons { gap: 6px; }
  .pref-region { min-height: 48px; padding: 6px 4px; font-size: 14px; }
  .pref-row { min-height: 48px; }
  .numbers-meetings { gap: 24px; margin-top: 20px; }
  .numbers-meetings__breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .numbers-meetings__breakdown > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .career-field { grid-template-columns: 36px minmax(0,1fr) auto; column-gap: 10px; }
  .career-field__icon { width: 36px; height: 36px; }
  .career-field__svg { width: 20px; height: 20px; }
  .career-field__name { font-size: 14px; }
  .pref-region { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .pref, .pref-region, .pref-row { transition: none; }
}