/* =========================================
   /recruit 専用CSS
   仕様：/aboutと同トーン。画像/テキストは常に1:1、画像は固定高+coverで統一。
   CTAはrecruit内に内包（/about.cssへ依存しない）。
========================================= */

/* ページ下部の余白（/aboutと同値） */
.page-recruit { padding-bottom: 60px; }

/* セクション余白（/aboutと同値） */
.page-recruit .company-section { padding: 80px 0; }

/* =========================================================
   募集要項（カードリスト）— 画像/テキスト = 1:1、画像は固定高で統一
========================================================= */
.job-list { display: grid; gap: 28px; margin: 0; padding: 0; }
.job-item { margin: 0; }

.job-item__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;       /* ← 50% / 50% */
  gap: 24px;
  align-items: center;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* 反転はorderで制御（幅は固定のまま） */
.job-item.is-reverse .job-item__image { order: 2; }
.job-item.is-reverse .job-item__body  { order: 1; }

/* 画像枠：固定高＋トリミングでサイズを完全統一 */
.job-item__image {
  height: clamp(200px, 26vw, 280px);   /* 200〜280pxの可変固定高 */
  overflow: hidden;
  border-radius: 8px;
}
.job-item__image img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* テキスト側 */
.job-item__title { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.job-item__desc, .job-item__loc { margin: 0 0 8px; line-height: 1.85; }

/* =========================================================
   基本情報（テーブル）— /aboutのcompany-table体裁を継承
========================================================= */
.job-common-box .job-table th { white-space: nowrap; }

/* =========================================================
   スタッフインタビュー— 2カラム、写真は縦長固定で統一
========================================================= */
.staff-flex-container {
  display: grid;
  grid-template-columns: 1fr 1fr;      /* 1:1 */
  gap: 24px;
  align-items: start;
  margin: 12px 0 10px;
}
.staff-photo {
  height: clamp(260px, 40vw, 360px);   /* 縦長の可変固定高 */
  overflow: hidden;
  border-radius: 8px;
}
.staff-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.staff-info p { margin: 0 0 6px; }
.interview-qa h3 { margin: 18px 0 8px; font-size: 16px; }
.interview-qa p  { margin: 0 0 12px; line-height: 1.9; }

/* =========================================================
   CTA（問い合わせ）— /about と同見た目を本CSSに内包
========================================================= */
.page-recruit .cta-box {
  text-align: center;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 28px 20px;
}
.page-recruit .cta-lead { font-weight: 700; margin: 0 0 8px; }
.page-recruit .cta-tel   {
  font-size: 28px; font-weight: 800; letter-spacing: 1px; margin: 0 0 6px;
}
.page-recruit .cta-hours { margin: 0 0 16px; color: #333; }
.page-recruit .btn-primary {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  background: #000; color: #fff;
  text-decoration: none;
  transition: opacity .2s ease;
}
.page-recruit .btn-primary:hover { opacity: .85; }
.page-recruit .cta-note { margin-top: 10px; font-size: 12px; color: #555; }

/* =========================================================
   レスポンシブ（モバイル設定は下部へ集約）
   ※ 見た目は現状維持。PC/タブレットへは非干渉。
========================================================= */
@media (max-width: 768px) {
  /* 募集要項：縦積み */
  .job-item__inner { grid-template-columns: 1fr; }
  .job-item.is-reverse .job-item__image { order: 1; }
  .job-item.is-reverse .job-item__body  { order: 2; }

  /* スタッフインタビュー：縦積み */
  .staff-flex-container { grid-template-columns: 1fr; }

  .page-recruit .section-title {
    font-size: 20px;        /* 既存 2rem を小さく */
    white-space: nowrap;    /* 改行禁止 */
    letter-spacing: 0.5px;  /* 文字間を少し狭める */
  }
}

@media (max-width: 640px) {
  /* セクション余白を少し圧縮（スマホ向け） */
  .page-recruit .company-section { padding: 48px 0; }
}