/* ============================================================
   component-recruit.css — 採用情報ページの部品（c-recruit-）
   カンプは1440px幅（design/xd-exports/11_recruit.png）。他のページには効かない
   ============================================================ */

/* --- 共通：見出し・本文 ---------------------------------- */
.c-recruit-title {
  margin-block-start: var(--space-4);
  font-family: var(--font-serif);
  font-weight: var(--fw-black);
  font-size: var(--fs-recruit-title);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-xs);
}

.c-recruit-text {
  margin-block-start: var(--space-6);
  word-break: auto-phrase;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-xs);
  color: var(--color-text-90);
}

/* --- ① 上部：他の下層ページと同じ c-page-hero（component-page.css）を使う ---- */

/* 狭い画面では写真の左右が切れて、右寄りの人物が見切れる。人物が画面に入るよう写真を右寄りの位置で切り出す（2026-10-27 園田さん指示：445px以下） */
.c-recruit-hero-bg { object-position: 64% center; }

@media (min-width: 768px) {
  .c-recruit-hero-bg { object-position: center; }
}

/* --- ② 数字で見る ---------------------------------------- */
.c-recruit-nums {
  border-block-start: 1px solid var(--color-line);
  background: var(--color-bg-sink);
}

.c-recruit-nums__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: var(--space-8);
}

.c-recruit-num {
  padding: var(--space-6) var(--space-3) var(--space-6) var(--space-4);
  border-inline-start: 1px solid var(--color-line-accent);
}

.c-recruit-num__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-md);
  color: var(--color-accent);
}

.c-recruit-num__value {
  display: flex;
  align-items: center;
  min-height: calc(var(--fs-recruit-num) * 1.2);
  margin-block-start: var(--space-4);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

/* 値の枠は上下中央。中の行（__line）はふつうの文字の並びなので、小さい単位は数字の下端（ベースライン）にそろう */
.c-recruit-num__line { display: block; }

/* 「40万〜50万円」のうち数字だけを大きく出す */
.c-recruit-num__value:has(.c-recruit-num__unit) { font-size: var(--fs-recruit-num); }

.c-recruit-num__unit {
  font-size: 0.5em;
  letter-spacing: 0;
}

.c-recruit-num__note {
  margin-block-start: var(--space-3);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-xs);
  color: var(--color-text-80);
}

@media (min-width: 1240px) {
  .c-recruit-nums__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-block: var(--space-10);
  }

  .c-recruit-num__value { font-size: var(--fs-3xl); }

  .c-recruit-num { padding-block: var(--space-2); padding-inline: var(--space-8) var(--space-4); }
}

/* --- ③⑤ 写真と文字の左右並び（写真は画面の端まで） --------- */
.c-recruit-media {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-panel);
}

.c-recruit-media__img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.c-recruit-media__body { padding: var(--space-14) var(--gutter) var(--space-16); }

@media (min-width: 1240px) {
  .c-recruit-media { flex-direction: row; align-items: stretch; }
  .c-recruit-media__img { position: relative; flex: 0 0 47%; }
  .c-recruit-media--job .c-recruit-media__img { flex-basis: 42%; }

  /* 行の高さは文字側で決める（写真の縦横比に引っぱらせない） */
  .c-recruit-media__img img { position: absolute; inset: 0; aspect-ratio: auto; }

  .c-recruit-media__body {
    flex: 1 1 0;
    min-width: 0;
    align-self: center;
    padding: var(--space-16) var(--gutter) var(--space-16) clamp(var(--space-10), 5.2vw, var(--space-24));
  }
}

/* --- ④ 選ぶ理由 ------------------------------------------ */
.c-recruit-why { background: var(--color-bg); }

@media (min-width: 1240px) {
  .c-recruit-why,
  .c-recruit-benefits,
  .c-recruit-req { padding-block: var(--space-14); }

  .c-recruit-why { padding-block: var(--space-16) 0; }
}

.c-recruit-head__note { margin-block-start: var(--space-6); }

.c-recruit-why__list {
  display: grid;
  gap: var(--space-12);
  margin-block-start: var(--space-12);
}

.c-recruit-reason {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-5);
  align-content: start;
}

.c-recruit-reason__no {
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: var(--fs-num);
  line-height: 1;
  color: var(--color-accent-num);
}

.c-recruit-reason__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: 1.6;
  letter-spacing: var(--ls-sm);
}

.c-recruit-reason__text {
  margin-block-start: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-xs);
  color: var(--color-text-85);
}

.c-recruit-reason__img {
  grid-column: 1 / -1;
  width: 100%;
  margin-block-start: var(--space-6);
  aspect-ratio: 384 / 189;
  object-fit: cover;
}

@media (min-width: 1240px) {
  .c-recruit-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-10);
  }

  .c-recruit-head__note { margin-block-start: 0; }

  /* 真ん中の列だけ左右に余白があるので、その分だけ列を広くして、写真と文字の幅を3列で同じにする（カンプ：写真3枚とも同じ大きさ） */
  .c-recruit-why__list {
    --why-col: calc((100% - var(--space-8) * 4) / 3);
    grid-template-columns: calc(var(--why-col) + var(--space-8)) calc(var(--why-col) + var(--space-8) * 2) calc(var(--why-col) + var(--space-8));
    gap: 0;
  }

  /* 本文の長さが違っても、写真の上端を3列でそろえる */
  .c-recruit-reason {
    grid-template-rows: 1fr auto;
    padding-inline: var(--space-8);
    border-inline-start: 1px solid var(--color-line);
  }

  .c-recruit-reason:first-child { padding-inline-start: 0; border-inline-start: 0; }
  /* 見出しが1行の理由も2行分の高さを取り、本文の1行目を3列でそろえる */
  .c-recruit-reason__title { min-height: calc(1.6em * 2); }
  .c-recruit-reason:last-child  { padding-inline-end: 0; }
  .c-recruit-reason__img { margin-block-start: var(--space-12); }
}

/* --- ⑤ 仕事内容の5項目 ----------------------------------- */
.c-recruit-jobs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: var(--space-8);
  margin-block-start: var(--space-10);
}

.c-recruit-job {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-1);
  text-align: center;
  border-inline-start: 1px solid var(--color-line);
}

.c-recruit-job:nth-child(3n + 1) { border-inline-start: 0; }

.c-recruit-job__icon { color: var(--color-accent); }

.c-recruit-job__text {
  /* 改行は入力欄の改行位置で。狭い幅でも語の途中で折らない */
  word-break: keep-all;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  line-height: 1.7;
  letter-spacing: 0;
}

@media (min-width: 1240px) {
  .c-recruit-jobs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .c-recruit-job:nth-child(3n + 1) { border-inline-start: 1px solid var(--color-line); }
  .c-recruit-job:first-child { border-inline-start: 0; }
}

/* --- ⑥ 働く環境・サポート -------------------------------- */
.c-recruit-benefits { background: var(--color-bg-raise); }

.c-recruit-benefits__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block-start: var(--space-10);
}

.c-recruit-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-article);
  color: var(--color-text-dark);
}

.c-recruit-card__img {
  width: 100%;
  aspect-ratio: 287 / 132;
  object-fit: cover;
}

.c-recruit-card__body { padding: var(--space-4) var(--space-3) var(--space-5); }

.c-recruit-card__title {
  font-weight: var(--fw-bold);
  word-break: auto-phrase;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-xs);
}

.c-recruit-card__text {
  margin-block-start: var(--space-3);
  word-break: auto-phrase;
  font-size: var(--fs-sm);
  line-height: 1.9;
  letter-spacing: var(--ls-xs);
  color: var(--color-text-dark-72);
}

/* カードの本文の固定改行は767px以下では外し、文を続けて流す（狭い幅で「などの／資格取得」が細切れになるため。2026-10-26 園田さん指示） */
.c-recruit-card__text br { display: none; }

@media (min-width: 768px) {
  .c-recruit-card__text br { display: inline; }
  .c-recruit-benefits__list { gap: var(--space-5); }
  .c-recruit-card__body { padding: var(--space-6) var(--space-5) var(--space-8); }
}

@media (min-width: 1240px) {
  .c-recruit-benefits__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .c-recruit-table__brk { display: none; }
}

/* --- ⑦ 募集要項 ------------------------------------------ */
.c-recruit-req { background: var(--color-bg-sink); }

.c-recruit-req__inner {
  display: grid;
  gap: var(--space-10);
}

.c-recruit-table { border-block-start: 1px solid var(--color-line-strong); }

.c-recruit-table__row {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  border-block-end: 1px solid var(--color-line-strong);
}

.c-recruit-table__key,
.c-recruit-table__val { padding: var(--space-4) var(--space-3); }

.c-recruit-table__val { border-inline-start: 1px solid var(--color-line-strong); }

.c-recruit-table__key {
  /* 「対応<wbr>エリア」のように、入りきらないときは入力欄の｜の位置で折る */
  word-break: keep-all;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-xs);
}

/* 中身の「｜」の位置：1239px以下で改行（768pxちょうども含めるため、消すのは1240px以上） */
.c-recruit-table__brk { display: block; }

/* 「（経験・スキルを考慮し…）」のような塊を途中で切らない */
.c-recruit-table__val {
  word-break: auto-phrase;
  font-size: var(--fs-sm);
  line-height: 1.85;
  letter-spacing: var(--ls-xs);
  color: var(--color-text-90);
}

@media (min-width: 768px) {
  .c-recruit-req__inner { grid-template-columns: 20% minmax(0, 1fr); }

  .c-recruit-table__row { grid-template-columns: 11.5em minmax(0, 1fr); }

  .c-recruit-table__key,
  .c-recruit-table__val { padding-inline: var(--space-4); }
}

/* --- ⑧ 応募の帯 ------------------------------------------ */
.c-recruit-entry {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-16);
  background: var(--color-bg-cta-to);
}

/* 写真の上に暗い覆い（カンプ：写真がうっすら見える程度） */
.c-recruit-entry__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-recruit-entry__scrim {
  position: absolute;
  inset: 0;
  background: rgb(var(--rgb-ink) / .8);
}

.c-recruit-entry__inner {
  position: relative;
  text-align: center;
}

.c-recruit-entry__lead {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-lg);
  color: var(--color-text-90);
}

.c-recruit-entry__title { margin-block-start: var(--space-3); }

.c-recruit-entry__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-width: min(100%, 18.25rem);
  margin-block-start: var(--space-8);
  padding: var(--space-5) var(--space-8);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-lg);
  color: var(--color-accent);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.c-recruit-entry__btn svg { transition: translate var(--dur) var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .c-recruit-entry__btn:hover { background: var(--color-accent); color: var(--color-on-accent); }
  .c-recruit-entry__btn:hover svg { translate: 0.375rem 0; }
}

@media (min-width: 768px) {
  .c-recruit-entry { padding-block: var(--space-14); }
}