/* =========================================================
   セクション：④ 働き方データ 〜 ⑥ キャリア・研修
   組み立ては ../recruit/css/ の NUMBERS・INTERVIEW・ONE DAY・CAREER・EVALUATION と同じ
   ========================================================= */
/* ---------- ④ 働き方データ（見本の NUMBERS と同じ形。パネルは青） ---------- */
.data_panel {
  padding: clamp(20px, 4vw, 48px);
  border-radius: var(--radius-l);
  background: var(--blue);
  color: var(--white);
}

.data_group {
  margin-bottom: 20px;
  font-family: var(--font-serif);
  font-size: var(--fz-h3);
  text-align: center;
}

.data_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  color: var(--ink);
}

.stat--full {
  grid-column: 1 / -1;
}

/* 「月平均」などの前置きは数字の上に置く（スマホで単位が折り返さないように） */
.stat_value small {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

.stat_note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-muted);
}

/* 割合のバー：style="--v: .71" で塗る長さを決める */
.meter {
  width: 100%;
  max-width: 480px;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.meter i {
  display: block;
  width: calc(var(--v) * 100%);
  height: 100%;
  background: var(--blue);
  transform-origin: left;
  transition: scale 1s var(--ease-out) .3s;
}

/* 2色で分けるバー（男女比など）。残りは黄色 */
.meter--split {
  background: var(--yellow);
}

.meter_legend {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 480px;
  margin-top: -6px;
  font-size: 13px;
  font-weight: 700;
}

/* 画面に入ったら左から伸びる */
.js .js-fade:not(.is-in) .meter i {
  scale: 0 1;
}

.data_next {
  margin-top: 40px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--fz-card);
  font-weight: 700;
}

.data_next a {
  padding-bottom: 2px;
  border-bottom: 2px solid var(--blue);
}

/* ---------- ⑤ INTERVIEW ---------- */
.interview {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* 背景の英字を青い背景の上に出す */
}

.interview_bg {
  position: absolute;
  top: -.2em;
  left: 50%;
  z-index: -1;
  translate: -50% 0;
  font-family: var(--font-en);
  font-size: clamp(80px, 14vw, 200px);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, .12);
  white-space: nowrap;
}

/* 1人ずつ縦に並べる */
.voices {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
}

.voice {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--blue-pale);
  color: var(--ink);
}

.voice_photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.voice_photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%; /* 顔が上のほうにあるので上寄せ */
}

.voice_profile {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 8px 16px;
  background: rgba(0, 0, 0, .7);
  color: var(--white);
  font-size: 13px;
  line-height: 1.7;
}

.voice_body {
  padding: 24px 28px 32px;
}

.voice_role {
  display: inline-block;
  border-bottom: 2px solid var(--blue);
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
}

.voice_ttl {
  margin: 8px 0 16px;
  font-family: var(--font-serif);
  font-size: var(--fz-card);
  line-height: 1.7;
}

.voice_qa dt {
  margin-top: 16px;
  padding: 4px 12px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
}

.voice_qa dd {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.9;
}

/* ---------- ⑤ INTERVIEW：PCでは写真と文章を左右に並べ、2人目は左右を入れ替える ---------- */
@media (min-width: 769px) {
  .voice {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-areas: "photo body";
  }

  .voice--reverse {
    grid-template-columns: 3fr 2fr;
    grid-template-areas: "body photo";
  }

  .voice_photo {
    grid-area: photo;
    aspect-ratio: auto;
    min-height: 360px; /* 写真は文章の高さいっぱいに伸ばす（短いときもこの高さは保つ） */
  }

  .voice_photo img {
    object-position: 45% 20%;
  }

  .voice_body {
    grid-area: body;
    align-self: center;
    padding: 40px 48px;
  }
}

/* ---------- ⑤ ONE DAY ---------- */
.oneday_head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.oneday_num {
  font-family: var(--font-en);
  font-size: 1.8em;
  color: var(--blue);
}

.oneday_head small {
  font-size: 14px;
  color: var(--ink-muted);
}

.oneday_face {
  width: clamp(88px, 10vw, 128px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: 45% 25%; /* 顔を丸の中に収める */
}

.oneday_grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.oneday_photos {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 24px;
}

.oneday_photos > * {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
}

/* ---------- ⑥ CAREER PATH（見本の CAREER と同じ形） ---------- */
.career_inner {
  padding-block: 48px var(--section-space);
}

.career_head {
  text-align: center;
}

.career_head > p:last-child {
  max-width: 720px;
  margin: 16px auto 0;
}

.career_catch {
  margin-bottom: 24px;
  font-family: var(--font-serif);
  font-size: var(--fz-catch);
  font-weight: 700;
  line-height: 1.9;
}

.career_panel {
  max-width: var(--container-narrow); /* 白いパネルは 800px まで（見出しの幅より狭くして中央に置く） */
  margin: 48px auto 0;
  padding: clamp(20px, 4vw, 56px);
  border-radius: var(--radius-l);
  background: var(--white);
  color: var(--ink);
}

.career_step {
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-areas: "stage body";
  gap: 16px 32px;
  align-items: center;
  padding-block: 32px;
  border-bottom: 1px dashed var(--line);
}

.career_step:last-child {
  border-bottom: 0;
}

.career_stage {
  grid-area: stage;
  font-family: var(--font-serif);
  font-size: var(--fz-h3);
  font-weight: 700;
}

.career_stage span {
  display: block;
  width: fit-content;
  margin-bottom: 6px;
  padding: 0 10px;
  border-radius: 4px;
  background: var(--yellow);
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .1em;
}

.career_body { grid-area: body; }

.career_lead {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
}

/* 段の並び（現場担当 → 工事主任 → 現場所長） */
.career_path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
}

.career_path li {
  position: relative;
  padding: 6px 16px;
  border-radius: var(--radius);
  background: var(--blue-pale);
  font-weight: 700;
}

.career_path li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  width: 12px;
  height: 12px;
  translate: 0 -50%;
  background: var(--blue);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
}

/* ---------- ⑥ 研修制度（見本の EVALUATION と同じ形） ---------- */
/* 英字は --content-max の幅まで。青い帯は box-shadow で左右に伸ばして画面いっぱいに見せる */
.training_loop {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: 12px;
  background: var(--blue);
  box-shadow: 0 0 0 100vmax var(--blue);
  clip-path: inset(0 -100vmax); /* 影は左右だけ出す（上下にははみ出さない） */
}

/* 次の FAQ の上が波なので、下の余白は半分（余白は中の .section が持っている） */
.training > .section {
  padding-bottom: calc(var(--section-space) * .5);
}

.training_list {
  counter-reset: training;
}

.training_list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 4px 16px;
  margin-bottom: 12px;
  padding: 16px 24px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-card);
  counter-increment: training;
}

.training_list li::before {
  content: counter(training, decimal-leading-zero);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
}

.training_list b {
  font-size: var(--fz-card);
}

.training_list span {
  font-size: 14px;
  color: var(--ink-muted);
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  .data_grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* 2列にすると3枚目（平均年齢）の横が空くので、横いっぱいにする */
  .data_grid .stat:nth-child(3) {
    grid-column: 1 / -1;
  }

  .voice_body {
    padding: 20px 20px 24px;
  }

  .oneday_grid {
    grid-template-columns: 1fr;
  }

  /* 写真は時間割の上に横並びにして、横にスクロールできるようにする */
  .oneday_photos {
    position: relative;
    top: auto;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .oneday_photos > * {
    scroll-snap-align: start;
  }

  .career_catch {
    font-size: 24px;
  }

  .career_step {
    grid-template-columns: 1fr;
    grid-template-areas: "stage" "body";
    gap: 12px;
    padding-block: 24px;
  }

  .training_list li {
    padding: 14px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .meter i {
    transition: none;
  }

  .js .js-fade:not(.is-in) .meter i {
    scale: 1 1;
  }
}