@charset "utf-8";
/* CSS Document */
/* =========================
   Recruit: main（HERO）修正
   ========================= */
:root{
  --wrap: min(1200px, 92vw);
  --ink: #141414;
  --vision-bg: #494949;
}

.recruit-hero{
  background: var(--hero-bg);
  padding: clamp(56px, 8vw, 110px) 0 clamp(160px, 16vw, 260px);
  position: relative;
  z-index: 0;
}
.recruit-hero .hero-grid{
  width: var(--wrap);
  margin: 0 auto;
  display: grid;
  /* 右カラムをやや広げてh1の余裕を確保 */
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
  align-items: start; /* ← h1を上寄せ */
  gap: clamp(20px, 4vw, 56px);
}
.recruit-hero .hero-photo img{
  width: 100%;
  height: auto;
  display: block;
}
.recruit-hero .hero-copy{
  align-self: start;
  padding-top: clamp(6px, 1.6vw, 20px); /* ← h1をもう少し上に */
  min-width: 0; /* grid内のはみ出し抑止 */
}
/* ここが重要：reveal-wipeのクリップを解除して右切れを防ぐ */
.recruit-hero .box{ overflow: visible !important; }

.recruit-hero .box h1{
  margin: 0;
  font-family: "Times New Roman","Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-weight: 500;
  font-size: clamp(48px, 12vw, 140px); /* 少しだけ上限を下げて収まり改善 */
  line-height: 1;
  letter-spacing: .06em;
  color: var(--ink);
}
.recruit-hero .lead{
  margin: clamp(6px, 1vw, 12px) 0 0;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.8;
  font-size: clamp(18px, 2.6vw, 30px);
  color: var(--ink);
}


/* =========================
   Recruit: VISION（全面置き換え v2）
   ========================= */
.vision{
  background: rgba(0,0,0,0.7);
  color: #fff;
  /* 上段（HERO）へ重ねる量をやや増やす */
  margin-top: clamp(-140px, -12vw, -100px);
  padding: clamp(72px, 10vw, 140px) 0 clamp(72px, 10vw, 140px);
  position: relative;
  z-index: 1;
  overflow: visible; /* 人物を上にはみ出させる */
}
.vision .vision-inner{
  width: var(--wrap, min(1200px, 92vw));
  margin: 0 auto;
  position: relative;
  text-align: center; /* h2/h3/p は中央 */
}

.vision .vision-inner h4{
	font-size: 20px;
}

.vision .vision-inner p{
	font-size: 18px;
	line-height: 200%;
}


/* 見出し（SVG）やや小さめ */
.vision .section-title{
  margin: 0 0 clamp(14px, 2.4vw, 24px);
}
.vision .section-title img{
  display: block;
  width: clamp(240px, 30vw, 360px);
  height: auto;
  margin: 0 auto;
}

/* サブ見出し・本文（本文は左右幅を拡大して折り返しにくく） */
.vision .vision-subtitle{
  margin: 0 0 clamp(12px, 2.4vw, 24px);
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: .12em;
}
.vision .vision-text{
  margin: 0 auto;
  /* ← 以前の 62ch から拡大。画面幅に応じて広がる */
  max-width: clamp(68ch, 78vw, 96ch);
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 2;
  letter-spacing: .04em;
}

/* 人物：さらに上へ＆右へ。サイズも拡大（本文には被らない位置） */
.vision .vision-people{
  position: absolute;
  right: clamp(-180px, -14vw, -100px);
  top:   clamp(-400px, -30vw, -240px); /* ← main にオーバーラップ */
  bottom: auto;
  margin: 0;
  pointer-events: none;
  z-index: 3;
}
.vision .vision-people img{
  width: clamp(340px, 36vw, 520px);   /* ひと回り拡大 */
  height: auto;
  display: block;
}

/* モバイル調整：人物はテキスト下に回す */
@media (max-width: 1024px){
  .vision{
    margin-top: clamp(-60px, -8vw, -32px);
    padding-bottom: clamp(72px, 10vw, 120px);
  }
  .vision .vision-text{
    max-width: none; /* 画面幅いっぱいを使う */
    padding: 0 16px;
  }
  .vision .vision-people{
    position: static;
    margin: clamp(12px, 4vw, 20px) auto 0;
  }
  .vision .vision-people img{
    width: clamp(220px, 56vw, 380px);
  }
}




/* =========================
   Recruit: JOB DESCRIPTION（冒頭・フルブリード版）
   ========================= */
.jobdesc{
  --jd-drop: clamp(100px, 16vw, 220px);   /* 中央画像の下げ量（好みで調整） */
  --jd-gap : clamp(12px, 2vw, 24px);      /* ベースの余白 */
  background: var(--hero-bg, #f3f3f3);
  padding: clamp(72px, 8vw, 120px) 0 clamp(88px, 10vw, 160px);
  position: relative;
}
.jobdesc .jobdesc-inner{
  width: var(--wrap, min(1200px, 92vw));
  margin: 0 auto;
}

/* --- 3枚写真：画面幅いっぱい（フルブリード） --- */
.jobdesc .jd-photos{
  position: relative;
  width: 100vw;                        /* 画面いっぱい */
  left: 50%;
  transform: translateX(-50%);         /* コンテナ中央基準に */
  margin: 0 auto calc(var(--jd-drop) + clamp(28px, 4vw, 56px));
  min-height: calc(clamp(260px, 30vw, 380px) + var(--jd-drop)); /* 下げ量を考慮 */
  overflow: visible;
}
.jobdesc .jd-photo{ position: absolute; margin: 0; }
.jobdesc .jd-photo img{ display: block; width: 100%; height: auto; }

/* 左端：やや大きめで画面左にベタ付け */
.jobdesc .jd-photo--left{
  left: 0; top: 0; z-index: 1;
  width: clamp(420px, 46vw, 820px);
}

/* 右端：少し小さめで画面右にベタ付け */
.jobdesc .jd-photo--right{
  right: 0; top: 0; z-index: 1;
  width: clamp(360px, 36vw, 680px);
}

/* 中央：左右に軽く被せつつ、下に落とす */
.jobdesc .jd-photo--center{
  left: 50%;
  top: var(--jd-drop);                  /* ← 落とし量を変えるならここだけ */
  transform: translateX(-50%);
  z-index: 2;                           /* 中央が前面 */
  width: clamp(380px, 42vw, 760px);
}

/* --- 見出し（SVG） --- */
.jobdesc .jd-heading{
  margin: 0;
  text-align: center;
}
.jobdesc .jd-heading img{
  display: block;
  width: clamp(320px, 42vw, 720px);     /* 少し大きめに */
  height: auto;
  margin: 0 auto;
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .jobdesc{
    padding-top: clamp(56px, 9vw, 88px);
    padding-bottom: clamp(72px, 12vw, 120px);
  }
  .jobdesc .jd-photos{
    width: 100%;
    left: 0;
    transform: none;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(10px, 3vw, 16px);
    margin-bottom: clamp(28px, 6vw, 40px);
  }
  .jobdesc .jd-photo,
  .jobdesc .jd-photo--left,
  .jobdesc .jd-photo--center,
  .jobdesc .jd-photo--right{
    position: static;
    width: 100%;
    transform: none;
    z-index: 0;
  }
  .jobdesc .jd-heading img{
    width: clamp(240px, 56vw, 420px);
  }
}



/* =========================
   Recruit: JOBS（募集要項 一覧 / 完全版 v5）
   ========================= */
.jobs{
  width: var(--wrap, min(1200px, 92vw));
  margin: clamp(32px, 5vw, 56px) auto 0;
}

/* 1カード＝12列グリッド（見出しも同じグリッドに載せる） */
.job-card{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2.2vw, 24px);
  row-gap: clamp(14px, 2vw, 22px);
  align-items: stretch;                 /* 行の高さを揃える */
  margin: 0 0 clamp(56px, 7vw, 88px);
}

/* ラッパーは“素通し”にして子要素を親グリッドに参加 */
.job-card__grid{ display: contents; }

/* === 見出し帯：画像＋表の合計幅（= 全列） === */
.job-card__head{
  grid-column: 1 / -1;                  /* ← これで全幅になります */
  justify-self: stretch;
  margin: 0 0 clamp(12px, 2vw, 20px);
  background: var(--company-blue, #0e5fbe);
  color: #fff;
  text-align: center;
  padding: clamp(10px, 1.6vw, 14px);
}
.job-card__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(18px, 2.2vw, 22px);
}

/* figureの既定余白をリセット（余白ズレ防止） */
.jobs figure{ margin: 0; }

/* 左：画像（1〜5列）／右：本文（6〜12列） */
.job-card__image{ 
  grid-column: 1 / 5;
  position: relative;
  height: 100%;                          /* 表の高さに追従 */
  background: #fff;
  /* 表と線幅を合わせて頭ズレを防ぐ */
}
.job-card__image img{
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;                     /* 上下トリミングOK */
}

.job-card__body{ grid-column: 5 / -1; }

/* ---- 表（求人票風） ---- */
.job-spec{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}
.job-spec th,
.job-spec td{
  padding: clamp(8px, 1.4vw, 12px) clamp(10px, 1.8vw, 16px);
  vertical-align: top;
  line-height: 1.8;
  font-size: clamp(14px, 1.8vw, 16px);
  border-top: 1px solid #888;
}
.job-spec tr:first-child th,
.job-spec tr:first-child td{ border-top: none; }
.job-spec th{
  width: clamp(120px, 18vw, 200px);
  white-space: nowrap;
  background: #f7f7f7;
  text-align: left;
  font-weight: 700;
  letter-spacing: .04em;
  border-right: 1px solid #333;
}
.job-spec td{
  color: var(--ink, #141414);
  border-left: 1px solid #333;
}

/* SP：縦積み */
@media (max-width: 1024px){
  .job-card{ grid-template-columns: 1fr; }
  .job-card__head,
  .job-card__image,
  .job-card__body{ grid-column: 1 / -1; }
  .job-card__image{ height: auto; }
  .job-card__image img{
    position: static; width: 100%; height: auto; object-fit: cover;
  }
}


/* =========================================
   Recruit — SP修正（HERO画像表示／VISION中央／3枚横並び）
   ========================================= */

/* 1) main（HERO）：SPで画像が消えるのを防ぎ、縦積み＋確実に表示 */
@media (max-width: 1024px){
      /* HEROの下に十分な余白を確保 */
  .recruit-hero{
    padding-bottom: clamp(96px, 16vw, 160px);
  }
  /* VISIONの負のマージンを解除して、間にスペースを作る */
  .vision{
    margin-top: clamp(20px, 5vw, 40px);
  }
  .recruit-hero .box{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 3.5vw, 18px);
    align-items: start;
  }
  /* もし既存で display:none や overflow/negative z-index が当たっていても上書きする */
  .recruit-hero .hero-photo{
    display: block !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 0 !important;
    width: 100%;
    /* 背景画像運用でも <img> 運用でも見えるよう高さを確保 */
    min-height: min(62vw, 420px);
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .recruit-hero .hero-photo img{
    display: block !important;
    position: static !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* タイトル・リードは上、写真は下（順番を明示） */
  .recruit-hero .hero-copy{ order: 1; position: relative; z-index: 1; }
  .recruit-hero .hero-photo{ order: 2; }
  /* 余白調整（必要なら微調整OK） */
  .recruit-hero{ padding-bottom: clamp(40px, 8vw, 72px); }
}

/* 2) VISION：人物画像をSPで中央寄せ */
@media (max-width: 1024px){
  .vision .vision-people{
    position: static !important;
    margin: clamp(8px, 4vw, 16px) auto 0;
    text-align: center;
  }
  .vision .vision-people img{
    display: block;
    margin: 0 auto;
    max-width: min(80vw, 520px);
    height: auto;
  }
}

/* 3) JOB DESCRIPTION：SPでもPC同様に横並び＋中央だけ下げて重ねる */
@media (max-width: 1024px){
  .jobdesc{ --jd-drop: clamp(80px, 18vw, 140px); }

  .jobdesc .jd-photos{
    position: relative;
    width: 100vw;                /* 画面幅いっぱいでレイアウト */
    left: 50%; transform: translateX(-50%);
    margin: 0 auto calc(var(--jd-drop) + clamp(16px, 5vw, 36px));
    min-height: calc(clamp(200px, 48vw, 360px) + var(--jd-drop));
  }
  .jobdesc .jd-photo{ position: absolute; inset: auto; z-index: 1; }
  .jobdesc .jd-photo--left{
    left: 0; top: 0;
    width: clamp(240px, 58vw, 520px);
  }
  .jobdesc .jd-photo--right{
    right: 0; top: 0;
    width: clamp(220px, 52vw, 460px);
  }
  .jobdesc .jd-photo--center{
    left: 50%; top: var(--jd-drop);
    transform: translateX(-50%);
    width: clamp(240px, 58vw, 540px);
    z-index: 2;
  }
  .jobdesc .jd-photo img{ display:block; width:100%; height:auto; object-fit:cover; }
}

/* =========================
   Recruit：HEROのSP表示修正（テキストが消える問題の解消）
   ========================= */
@media (max-width: 1024px){
  /* 2カラム→1カラム（テキストが画面外に逃げないように） */
  .recruit-hero .hero-grid{
    grid-template-columns: 1fr;
    gap: clamp(12px, 4vw, 20px);
  }
  /* 並び順を明示：テキスト→写真 */
  .recruit-hero .hero-copy{ order: 1; }
  .recruit-hero .hero-photo{ order: 2; }

  /* 念のため、画像も確実に表示させる */
  .recruit-hero .hero-photo{
    position: relative;
    overflow: visible;
  }
  .recruit-hero .hero-photo img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* 下のセクションに飲み込まれないよう余白を少し確保 */
  .recruit-hero{ padding-bottom: clamp(40px, 7vw, 72px); }
}

/* 募集停止の通知 */
.job-card__note{
  display:block;          /* p は既に block だが明示 */
  width:100%;
  text-align:center;      /* 中央寄せ */
  white-space:nowrap;     /* 1行表示 */
  margin:12px auto 20px;  /* 見出しとの間隔 */
  font-weight:700;
  font-size:1rem;         /* 必要なら調整 */
  letter-spacing:.02em;
}
/* 12分割グリッド想定 */
.cf7-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px 18px; }
.cf7-col { grid-column: span 6; }
.cf7-col-12 { grid-column: 1 / -1; }   /* フル幅 */
@media (max-width:768px){ .cf7-col{ grid-column:1 / -1; } }