@charset "UTF-8";

/* ========================================
   recruit.css
   募集要項ページ専用スタイル
   設計幅: PC 1920px / コンテンツ最大幅 1606px
======================================== */

.recruit {
  /* テーマカラー (data-job に応じて切り替え) */
  --theme-color: #f75959;
  --color-tab-inactive: #a8a8a8;
  --color-border: #212121;
  --color-card-border: #5f5f5f;
  --color-road: #595959;

  /* レイアウト */
  --recruit-content-max: 1606px;
  --recruit-content-pad: 24px;

  position: relative;
  width: 100%;
  padding-bottom: 120px;
}

.recruit[data-job="sales"]  { --theme-color: #f75959; }
.recruit[data-job="tech"]   { --theme-color: #55baf5; }
.recruit[data-job="office"] { --theme-color: #47d684; }


/* ========================================
   Hero
======================================== */

.recruit-hero {
  position: relative;
  width: 100%;
}

.recruit-hero-inner {
  position: relative;
  width: 100%;
  height: clamp(180px, 19.79vw, 380px);   /* 380/1920 = 19.79% */
  background-color: #f75959;
  overflow: hidden;
}

/* 青い車 (左) */
.recruit-hero-car--blue {
  position: absolute;
  left: 14.06%;
  top: 21.3%;
  width: 13.7%;
  height: auto;
  transform: rotate(-10.53deg);
  z-index: 2;
}

/* 赤い車 (右下、道路に被る) — hero 直下に配置されているので bottom 基準で道路に重ねる */
.recruit-hero-car--red {
  position: absolute;
  left: 75.2%;
  bottom: 0;
  width: 10.2%;
  height: auto;
  transform: rotate(5deg);
  z-index: 5;
}

/* 黄の星 (左、タイトルの上) */
.recruit-hero-star--yellow {
  position: absolute;
  left: 23.96%;
  top: 15.5%;
  width: 5.4%;
  height: auto;
  z-index: 4;
}

/* 緑の星 (右、写真の右下) — 拡大・回転なし、PNG の自然サイズで表示 */
.recruit-hero-star--green {
  position: absolute;
  left: 71.8%;
  top: 60.3%;
  z-index: 4;
}

/* 黄の装飾 (写真の左上) */
.recruit-hero-dec {
  position: absolute;
  left: 50.5%;
  top: 9.7%;
  width: 3%;
  height: auto;
  z-index: 4;
}

/* 採用情報タイトル — 上に移動して car-blue と少しだけ被る */
.recruit-hero-title {
  position: absolute;
  left: 17.35%;
  top: 38%;
  width: 30.26%;
  margin: 0;
  z-index: 4;
}

.recruit-hero-title img {
  width: 100%;
  height: auto;
  display: block;
}

/* 社員写真 1 (左) — 文字・装飾より下に */
.recruit-hero-photo--1 {
  position: absolute;
  left: 44.1%;
  top: 9.7%;
  width: 20.5%;
  height: auto;
  z-index: 2;
}

/* 社員写真 2 (右) — 文字・装飾より下に */
.recruit-hero-photo--2 {
  position: absolute;
  left: 65.5%;
  top: 12.4%;
  width: 23.1%;
  height: auto;
  z-index: 2;
}

/* 道路ライン (interview.css の .interview-hero-road を recruit 名前空間で複製) */
.recruit-hero-road {
  position: relative;
  width: 100%;
  height: 40px;
  background-color: var(--color-road);
}

.recruit-hero-road::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background-image: repeating-linear-gradient(
    to right,
    #fff 0,
    #fff 30px,
    transparent 30px,
    transparent 60px
  );
  transform: translateY(-50%);
}


/* ========================================
   職種タブ (営業職 / 整備士 / 事務職)
======================================== */

.recruit-jobs {
  display: flex;
  gap: clamp(8px, 1.15vw, 22px);
  width: 100%;
  max-width: var(--recruit-content-max);
  margin: 60px auto 0;
  padding: 0 var(--recruit-content-pad);
}

.recruit-jobs-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  /* ★2026-08-21 Figma の比率(522/152)に戻した。2026-08-07 の A-5 で事務職タブの副題が
     「テクニカルアドバイザー・アンバサダークルー」の2行になり比率固定では溢れたため
     min-height:clamp(96px,10.2vw,196px) で受けていたが、アンバサダークルーの掲載取りやめで
     1行に戻り、逃げが不要になった（このままだと 768px/1920px で Figma より 30〜40px 背が高い） */
  min-height: 0;
  aspect-ratio: 522 / 152;

  background-color: var(--color-tab-inactive);
  border: 2px solid var(--color-border);
  border-radius: 20px;
  color: #fff;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  padding: 8px;   /* 260821: 副題が1行に戻り幅の余裕ができたため A-5 の 8px 4px から復帰 */
}

.recruit-jobs-btn:hover {
  opacity: 0.95;
}

/* ★2026-08-07 C-3: 未選択タブはグレー地(#a8a8a8)に白文字でコントラスト2.38しかなく、
   何が書いてあるか読み取りにくかった。白地＋墨文字（16.10）に変更（跡田さん判断）。
   選択中のタブは職種テーマ色のままなので、どれを選んでいるかの見分けは変わらない。
   同じ配色だった新卒/中途タブ(.recruit-types-btn)も揃える */
.recruit-jobs-btn:not(.is-active),
.recruit-types-btn:not(.is-active) {
  background-color: #fff;
  color: var(--color-border);
  opacity: 1;
}

.recruit-jobs-btn-name {
  font-size: clamp(20px, 2.86vw, 55px);
  letter-spacing: 0.05em;
  line-height: 1.1;
}

.recruit-jobs-btn-sub {
  font-size: clamp(13px, 2.08vw, 40px);
  letter-spacing: 0.05em;   /* 260821: 副題が1行に戻ったので A-5 の 0.04em から復帰 */
  line-height: 1.1;         /* 同上 */
  text-align: center;
}

/* アクティブ時: 各職種のテーマ色 */
.recruit-jobs-btn.is-active {
  opacity: 1;
}

.recruit-jobs-btn--sales.is-active  { background-color: #f75959; }
.recruit-jobs-btn--tech.is-active   { background-color: #55baf5; }
.recruit-jobs-btn--office.is-active { background-color: #47d684; }


/* ========================================
   コンテンツ (新卒/中途タブ + 情報カード)
======================================== */

.recruit-content {
  position: relative;
  width: 100%;
  max-width: var(--recruit-content-max);
  margin: 50px auto 0;
  padding: 0 var(--recruit-content-pad);
}

/* PC では職種タブ〜情報カードの一式を縮小（1920px 基準だと大きく見えすぎるため）。
   zoom なので枠幅・タブ・文字・余白がすべて同率で縮む。TAB/SP(〜1024px)は従来どおり。
   0.9 で一段縮小後、さらに約10%の縮小要望があり 0.81（= 0.9 × 0.9）に。*/
@media (min-width: 1025px) {
  .recruit-jobs,
  .recruit-content {
    zoom: 0.81;
  }
}

/* 新卒/中途タブ */
.recruit-types {
  position: relative;
  display: flex;
  gap: 1.24%;   /* 20/1606 */
  width: 100%;
  z-index: 2;
  margin-bottom: -2px;   /* カードの上ボーダーと重ねて二重線を防ぐ */
}

.recruit-types-btn {
  flex: 0 0 49.38%;   /* 793/1606 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 30px);

  min-height: 0;
  aspect-ratio: 793 / 90;

  background-color: var(--color-tab-inactive);
  border: 2px solid var(--color-border);
  border-radius: 20px 20px 0 0;
  color: #fff;
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  padding: 0 30px;
}

.recruit-types-btn:hover {
  opacity: 0.95;
}

/* アクティブタブ: 底ボーダーをテーマ色にしてカードと連続させる */
.recruit-types-btn.is-active {
  background-color: var(--theme-color);
  opacity: 1;
  border-bottom-color: var(--theme-color);
}

.recruit-types-btn-text {
  font-size: clamp(18px, 2.86vw, 55px);
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

.recruit-types-btn-tire {
  width: clamp(28px, 4.57vw, 88px);
  height: auto;
  flex-shrink: 0;
}

/* 事務職のとき中途タブを非表示 & 新卒タブを中央寄せ */
.recruit[data-job="office"] .recruit-types-btn--mid {
  display: none;
}

.recruit[data-job="office"] .recruit-types {
  justify-content: center;
}


/* ========================================
   情報カード (テーマ色枠 + 白地カード)
======================================== */

.recruit-card {
  position: relative;
  background-color: var(--theme-color);
  border: 2px solid var(--color-border);
  border-radius: 20px;
  padding: 16px;
  transition: background-color 0.25s ease;
  z-index: 1;
}

/* タブがカード上端を覆うため、カード上角を直角にして連続させる
   ・新卒/中途タブが両方ある場合: 上両角とも直角
   ・事務職（中途タブなし・新卒タブ中央寄せ）の場合: 上両角とも丸に戻す */
.recruit[data-type="new"] .recruit-card,
.recruit[data-type="mid"] .recruit-card {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.recruit[data-job="office"] .recruit-card {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.recruit-card-inner {
  position: relative;
  background-color: #fff;
  border: 5px solid var(--color-card-border);
  border-radius: 18px;
  padding: clamp(28px, 3.13vw, 60px) clamp(20px, 3.23vw, 62px);
}


/* ========================================
   パネル (5パターン)
======================================== */

.recruit-panel {
  display: none;
}

.recruit-panel.is-active {
  display: block;
}

.recruit-panel[hidden] {
  display: none !important;
}


/* ========================================
   情報テーブル (定義リスト形式)
======================================== */

.recruit-table {
  width: 100%;
  margin: 0;
}

.recruit-table-row {
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: start;
  gap: 0;
  padding: clamp(16px, 1.67vw, 32px) 0;
  border-bottom: 1px solid var(--color-card-border);
}

.recruit-table-row:first-child {
  padding-top: 0;
}

/* お問い合わせ先 (最終行) は罫線を消す */
.recruit-table-row--contact {
  border-bottom: none;
}

.recruit-table-label {
  font-size: clamp(15px, 1.15vw, 22px);
  line-height: 1.5;
  color: #000;
  margin: 0;
}

.recruit-table-label-note {
  display: inline-block;
  font-size: 0.95em;
}

.recruit-table-value {
  font-size: clamp(14px, 1.15vw, 22px);
  line-height: 1.6;
  color: #000;
  margin: 0;
}

.recruit-table-value p {
  margin: 0 0 0.2em;
}

.recruit-table-value p:last-child {
  margin-bottom: 0;
}

.recruit-table-value a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.recruit-table-value a:hover {
  text-decoration: none;
}


/* ========================================
   TAB (768px 〜 1024px)
   方針: PC レイアウトを維持しつつ、ヒーロー高さに下限・緑の星をスケール、
         角丸・パディング・フォントを微調整
======================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

  /* ヒーロー: 高さに余裕を持たせる */
  .recruit-hero-inner {
    height: clamp(200px, 22vw, 240px);
  }

  /* 緑の星 — PC では PNG 自然サイズだが、TAB では % でスケール */
  .recruit-hero-star--green {
    width: 9%;
    height: auto;
  }

  /* 職種タブ */
  .recruit-jobs {
    margin-top: 40px;
    gap: 10px;
  }

  .recruit-jobs-btn {
    border-radius: 16px;
  }

  /* 新卒/中途タブ */
  .recruit-content {
    margin-top: 36px;
  }

  .recruit-types-btn {
    aspect-ratio: auto;
    height: 70px;
    border-radius: 16px 16px 0 0;
  }

  /* カード */
  .recruit-card {
    border-radius: 16px;
    padding: 12px;
  }

  .recruit-card-inner {
    border-radius: 14px;
    padding: 32px 28px;
  }

  /* 表: 横並び維持 (30/70)、パディングのみ調整 */
  .recruit-table-row {
    padding: 18px 0;
  }
}


/* ========================================
   SP (767px 以下)
   方針:
     ・ヒーロー: 高さ 220px に固定、各要素を SP 専用に再配置
       （PC の % 配置だと縦横比が崩れて要素が重なるため）
     ・職種タブ: 3列 → 縦1列にスタック
     ・新卒/中途タブ: 横並び維持（コンパクト化）
     ・表: ラベルを上、値を下に縦並び
======================================== */

@media screen and (max-width: 767px) {

  /* ヒーロー: 220px に拡張して要素配置の余裕を確保 */
  .recruit-hero-inner {
    height: 220px;
  }

  /* タイトル — 中央寄せ、大きめ */
  .recruit-hero-title {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 58%;
  }

  /* 青い車 — 中段右寄り */
  .recruit-hero-car--blue {
    top: 50%;
    left: 50%;
    width: 18%;
  }

  /* 赤い車 — 右下（道路に被る） */
  .recruit-hero-car--red {
    left: 75%;
    width: 20%;
  }

  /* 黄の星 — 左上 */
  .recruit-hero-star--yellow {
    top: 8%;
    left: 6%;
    width: 9%;
  }

  /* 緑の星 — 右、写真の右 */
  .recruit-hero-star--green {
    top: 56%;
    left: 80%;
    width: 14%;
    height: auto;
  }

  /* 黄の三角装飾 — 右上 */
  .recruit-hero-dec {
    top: 12%;
    left: 88%;
    width: 5%;
  }

  /* 写真1 — 中段左 */
  .recruit-hero-photo--1 {
    top: 52%;
    left: 5%;
    width: 21%;
  }

  /* 写真2 — 中段中央 */
  .recruit-hero-photo--2 {
    top: 56%;
    left: 27%;
    width: 23%;
  }

  /* 道路ライン: SP は薄く */
  .recruit-hero-road {
    height: 24px;
  }

  .recruit-hero-road::before {
    height: 3px;
    background-image: repeating-linear-gradient(
      to right,
      #fff 0,
      #fff 14px,
      transparent 14px,
      transparent 28px
    );
  }

  /* 職種タブ — 縦1列にスタック */
  .recruit-jobs {
    flex-direction: column;
    margin-top: 28px;
    gap: 10px;
    padding: 0 12px;
  }

  .recruit-jobs-btn {
    flex: 0 0 auto;
    aspect-ratio: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* SPは横並びなので比率ではなく固定高さ。260821: 副題が1行に戻り A-5 の 76px から 60px へ復帰 */
    min-height: 0;
    height: 60px;
    border-radius: 12px;
    border-width: 1.5px;
    padding: 4px 16px;
  }

  .recruit-jobs-btn-name {
    font-size: 22px;
  }

  .recruit-jobs-btn-sub {
    font-size: 13px;
  }

  /* 新卒/中途タブ: 2列を維持しつつ、視認性のため高さ・フォントを確保 */
  .recruit-content {
    margin-top: 26px;
    padding: 0 12px;
  }

  .recruit-types-btn {
    aspect-ratio: auto;
    height: 56px;
    border-radius: 14px 14px 0 0;
    border-width: 1.5px;
    padding: 0 10px;
    gap: 10px;
  }

  .recruit-types-btn-text {
    font-size: 18px;
  }

  .recruit-types-btn-tire {
    width: 28px;
  }

  /* カード */
  .recruit-card {
    border-radius: 12px;
    border-width: 1.5px;
    padding: 8px;
  }

  .recruit-card-inner {
    border-radius: 10px;
    border-width: 3px;
    padding: 20px 14px;
  }

  /* 表: label と value を縦並びに */
  .recruit-table-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
  }

  .recruit-table-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-color, #f75959);
  }

  .recruit-table-label-note {
    /* ★2026-08-07 C-6: 0.85em だと実測11.9px まで下がるため 12px 固定に（跡田さん判断）*/
    font-size: 12px;
    font-weight: 500;
    color: #666;
  }

  .recruit-table-value {
    font-size: 13px;
    padding-left: 0.5em;
  }
}