@charset "UTF-8";
/* =============================================================
   採用情報ページ専用スタイル（page-recruit.php）
   デザイン: untracked/recruit.png
   ※ 下層hero(lead-hero)／パンくず／Contact／見出し(section-heading)は共通部品。
   ※ 色トークン（--color-*）・.section・.container は main.css を流用。
   ============================================================= */

.recruit-head {
  margin-bottom: 28px;
}

/* ---- Job Position（募集職種） ----------------------------- */
.recruit-jobs__lead {
  margin: 0 0 44px;
  color: #000;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 31px; /* 172.222% */
}
.job-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.job-card {
  position: relative;
  padding: 8px 36px;
}
.job-card + .job-card {
  border-left: 1px solid var(--color-line);
}
/* 背面の大きな番号（薄い装飾） */
.job-card__num {
  position: absolute;
  top: -28px;
  left: 4px;
  z-index: 0;
  font-family: "Inter", var(--font-en);
  font-style: italic;
  font-weight: 700;
  font-size: 120px;
  line-height: 1;
  color: #eaf2fb;
  pointer-events: none;
}
.job-card__cat,
.job-card__title,
.job-card__text {
  position: relative;
  z-index: 1;
}
.job-card__cat {
  display: block;
  color: #0092A5;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.job-card__title {
  margin: 4px 0 14px;
  color: #0050A3;
  font-family: "Noto Sans JP";
  font-size: 25px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.job-card__text {
  color: #000;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
}

/* ---- Job Description（募集要項） -------------------------- */
/* 職種タブ：CSS のみで切替（ラジオ＋ラベル＋一般兄弟結合子） */
.job-tabs {
  position: relative;
  max-width: 1300px;
  margin-inline: auto;
}
.job-tabs__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.job-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 3px solid #0684F5;
}
.job-tab {
  cursor: pointer;
  user-select: none;
  padding: 16px 30px;
  border-radius: 16px 16px 0 0;
  border-top: 2px solid #919191;
  border-right: 2px solid #919191;
  border-left: 2px solid #919191;
  background: #FFF;
  color: #919191;
  font-family: "Noto Sans JP";
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
/* 英語版：タブ文字は長くなりやすいので小さく（はみ出し防止） */
.en-US .job-tab {
  font-size: 18px;
}
/* アクティブなタブ：白地＋青枠＋青字で、下辺をテーブル背景に溶かして接続 */
#job-tab-1:checked ~ .job-tabs__nav label[for="job-tab-1"],
#job-tab-2:checked ~ .job-tabs__nav label[for="job-tab-2"],
#job-tab-3:checked ~ .job-tabs__nav label[for="job-tab-3"] {
  position: relative;
  z-index: 2;
  color: #0684F5;
  border-color: #0684F5;
  /* 下線(3px)の上に乗せ、タブ下にも同じ青ラインを引いて連続させる */
  border-bottom: 3px solid #0684F5;
  margin-bottom: -3px;
}
/* パネル：既定は非表示、対応するラジオが checked のものだけ表示 */
.job-panel {
  display: none;
}
#job-tab-1:checked ~ .job-panel[data-tab="1"],
#job-tab-2:checked ~ .job-panel[data-tab="2"],
#job-tab-3:checked ~ .job-panel[data-tab="3"] {
  display: block;
}

/* 共通要項の見出し（● ＋ テキスト） */
.recruit-subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1300px;
  margin: 44px auto 16px;
  color: #303030;
  font-family: "Noto Sans JP";
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 31px; /* 110.714% */
}
.recruit-subhead::before {
  content: "";
  flex: none;
  width: 25.96px;
  height: 25.96px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #0684F5;
}

/* 募集要項テーブル：全体が淡い青地＋細い青枠＋角丸。
   ラベル列・値列とも同じ淡い青地で、ラベルのみ太字。区切りは細い線。 */
.recruit-table {
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #A0BDD7;
  border-radius: 8px; /* 共通要項など単体の表は四隅丸め */
  overflow: hidden;
  background: #eef4fc;
  font-size: 16px;
}
/* タブ付き（募集要項）の表だけ上部の角丸なし（タブと接続） */
.job-panel .recruit-table {
  border-radius: 0 0 8px 8px;
}
.recruit-table th,
.recruit-table td {
  border-bottom: 1px solid rgba(160, 189, 215, 0.80);
  text-align: left;
  vertical-align: middle;
  padding: 15px;
  line-height: 1.7;
}
.recruit-table th {
  width: 160px;
  background: #dfecff;
  color: #000;
  font-family: "Noto Sans JP";
  font-size: 19px;
  font-style: normal;
  font-weight: 500;
  line-height: 31px; /* 163.158% */
  white-space: nowrap;
}
.recruit-table td {
  color: #000;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 350;
  line-height: 31px; /* 172.222% */
}
.recruit-table tr:last-child th,
.recruit-table tr:last-child td {
  border-bottom: 0;
}
/* 各セクションが未入力（ACF空）のときのプレースホルダ（準備中） */
.recruit-empty {
  margin: 0;
  padding: 48px 0;
  text-align: center;
  color: var(--color-muted);
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-weight: 500;
}

/* ---- How to Apply & Flow（応募方法・選考の流れ） --------- */
.recruit-flow__top {
  display: grid;
  grid-template-columns: minmax(360px, 420px) 1fr;
  gap: 48px;
  margin: 4px 0 40px;
}
/* 電話ボックスは Contact セクションの .contact__tel と全く同じ見た目 */
.recruit-tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 74px;
  padding: 12px 24px;
  border: 1px solid var(--color-primary-dark);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-primary-dark);
}
.recruit-tel:hover {
  opacity: 1;
  border-color: var(--color-primary);
}
.recruit-tel__icon {
  width: 24px;
  height: 24px;
  flex: none;
}
.recruit-tel__num {
  font-size: 30px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
}
.recruit-tel__hours {
  color: #352723;
  font-size: 16px;
  margin-top: 3px;
  text-align: center;
  font-weight: bold;
}
.recruit-flow__note {
  margin: 0;
  color: #000;
  font-family: "Noto Sans JP";
  font-size: 21px;
  font-style: normal;
  font-weight: 350;
  line-height: 31px; /* 147.619% */
}
.recruit-flow__note strong {
  /* 太さ以外は親（.recruit-flow__note）から継承 */
  font-weight: 700;
}

/* 英語ページ限定：日本語応募前提の注意書き（英語からの応募防止） */
.recruit-flow__notice {
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: #f4f8fc;
  border-left: 4px solid #0684f5;
  border-radius: 4px;
}
.recruit-flow__notice p {
  margin: 0;
  color: #333;
  font-size: 15px;
  line-height: 1.7;
}
.recruit-flow__notice p + p {
  margin-top: 6px;
}

/* ステップ（5枚） */
.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px;
  /* 背景装飾：原寸のまま中央（上下左右）に配置・繰り返しなし */
  background: url(../images/recruit/bg-flow.png) no-repeat center center / auto;
}
.flow-step {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(186, 211, 232, 0.75);
  background: #FFF;
  box-shadow: 0 1px 13px 0 rgba(0, 80, 163, 0.13);
  padding: 28px 16px 26px;
  text-align: center;
}
.flow-step__num {
  display: flex;
  width: 88px;
  height: 88px;
  padding: 28px 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto 14px;
  border-radius: 50%;
  color: #0684F5;
  font-family: "Inter", var(--font-en);
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 31px; /* 64.583% */
}
/* 番号は 1→5 で徐々に濃くなる（デザイン準拠） */
.flow-step:nth-child(1) .flow-step__num {
  background: #fff;
  border: 2px solid #bcd7f0;
  color: var(--color-primary);
}
.flow-step:nth-child(2) .flow-step__num {
  border: 2px solid #C0DDFC;
  background: #C0DDFC;
}
.flow-step:nth-child(3) .flow-step__num {
  border: 2px solid #82BAFA;
  background: #82BAFA;
  color: #FFF;
}
.flow-step:nth-child(4) .flow-step__num {
  border: 2px solid #4498F7;
  background: #4498F7;
  color: #FFF;
}
.flow-step:nth-child(5) .flow-step__num {
  color: #FFF;
  background: #0684F5;
}
.flow-step__title {
  margin: 0 0 8px;
  color: #0684F5;
  font-family: "Noto Sans JP";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 31px; /* 155% */
}
.flow-step__text {
  margin: 0;
  color: #000;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 15px;
  font-style: normal;
  font-weight: 350;
  line-height: 21px; /* 140% */
}
.recruit-flow__harassment {
  margin: 24px 0 0;
  font-size: 14px;
}
.recruit-flow__harassment a {
  color: #0050A3;
  font-family: "Noto Sans JP";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* =============================================================
   レスポンシブ
   ============================================================= */
@media (max-width: 968px) {
  /* 募集職種：縦積み（区切り線は上ボーダーに） */
  .job-cards {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .job-card {
    padding: 8px 0;
  }
  .job-card + .job-card {
    border-left: 0;
    border-top: 1px solid var(--color-line);
    padding-top: 28px;
  }
  .job-card__num {
    top: -8px;
    left: -15px;
  }

  /* フロー：3列＋折り返し。連結グラフィック(bg-flow)は折り返しでズレるため非表示 */
  .flow-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 24px;
    background: none;
  }
  /* 共通見出し（●＋テキスト）はやや縮小 */
  .recruit-subhead {
    font-size: 24px;
  }
  /* 応募方法の説明文を少し縮小 */
  .recruit-flow__note {
    font-size: 18px;
  }

  /* 応募方法：電話＋説明文を縦積み */
  .recruit-flow__top {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .recruit-tel {
    min-width: 0;
    width: 100%;
  }

    /* タブ：横並びで収まらないため全幅で積む。角を少し丸めてボタン風に */
  .job-tabs__nav {
    flex-direction: column;
    gap: 8px;
    border-bottom: 0;
    margin-bottom: 20px;
  }
  .job-tab {
    border-radius: 8px;
    border-bottom: 2px solid #919191;
    padding: 13px 16px;
  }
  /* アクティブタブの下線接続用オフセットは縦積みでは不要 */
  #job-tab-1:checked ~ .job-tabs__nav label[for="job-tab-1"],
  #job-tab-2:checked ~ .job-tabs__nav label[for="job-tab-2"],
  #job-tab-3:checked ~ .job-tabs__nav label[for="job-tab-3"] {
    margin-bottom: 0;
    border-bottom: 2px solid #0684f5;
  }
}

@media (max-width: 600px) {
  /* フロー：2列。番号丸とカード余白を縮小 */
  .flow-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .flow-step {
    padding: 22px 12px 20px;
  }
  .flow-step__num {
    width: 64px;
    height: 64px;
    padding: 0;
    font-size: 32px;
    margin-bottom: 10px;
  }
  .recruit-subhead {
    font-size: 20px;
    margin-top: 32px;
  }
  .recruit-flow__note {
    font-size: 16px;
  }

  /* テーブル：各行を角丸カードとして分離し、行間に余白（読みやすさ向上） */
  .recruit-table {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }
  .recruit-table tbody {
    display: block;
  }
  .recruit-table tr {
    display: block;
    border: 1px solid #a0bdd7;
    border-radius: 8px;
    overflow: hidden;
    background: #eef4fc;
  }
  .recruit-table tr + tr {
    margin-top: 16px;
  }
  .recruit-table th,
  .recruit-table td {
    display: block;
    width: auto;
    white-space: normal;
    border: 0;
  }
}

/* ---- 下層hero(lead-hero) レスポンシブ ----
   products と同じく lead 文が長いため、狭幅で hero を特別に拡大する。
   このCSSは recruit ページのみ読込＝他ページ非影響（page-products.css と同方針）。 */
@media (max-width: 600px) {
  .lead-hero {
    min-height: 450px;
    background-size:
      369% auto,
      cover;
  }
}
@media (max-width: 457px) {
  .lead-hero {
    background-size: 509% auto, cover;
  }
}
@media (max-width: 361px) {
  .lead-hero {
    background-size: 640% auto, cover;
  }
}