@charset "UTF-8";
/* CSS Document */

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック",
    "MS PGothic", sans-serif;
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0.03em;
  background-color: #efefef;
  margin: 0;
}

main {
  margin-top: clamp(120px, 10vw + 40px, 150px);
  margin-bottom: clamp(60px, 6vw + 20px, 90px);
  line-height: 1.5;
}

/* ==========================================================
   求人カードレイアウトCSS（Web最適サイズ・見出し強調版 / Fluid適用）
   - 8の倍数ルールを流体化（--space-unit基準）
   - タイポ: 本文14→16 / H2 20→24 / H3 16→18 をclampで補間
   - レイアウト: paddingや角丸、ラベル列幅なども流体化
   - max-width:1200px
   ========================================================== */

:root {
  /* ---- Fluid spacing base (8の倍数ルール) ----
     SPで少しタイト、PCで8px相当へ。 */
  --space-unit: clamp(4px, 1vw + 2px, 8px);
  --space-1: calc(var(--space-unit) * 1); /* ≒ 6〜8 */
  --space-2: calc(var(--space-unit) * 2); /* ≒ 12〜16 */
  --space-3: calc(var(--space-unit) * 3); /* ≒ 18〜24 */
  --space-4: calc(var(--space-unit) * 4); /* ≒ 24〜32 */
  --space-5: calc(var(--space-unit) * 5); /* ≒ 30〜40 */
  --space-6: calc(var(--space-unit) * 6); /* ≒ 36〜48 */

  /* ---- Fluid type ---- */
  --size-body: clamp(14px, 0.6vw + 11px, 16px);
  --size-h2: clamp(20px, 1.2vw + 15px, 24px);
  --size-h3: clamp(16px, 0.6vw + 13px, 18px);

  /* 英日タイトル用の流体サイズ（見出しブロック） */
  --size-display-en: clamp(36px, 2vw + 28px, 48px);
  --size-display-ja: clamp(16px, 0.6vw + 13px, 18px);

  /* 行間 */
  --lh-body: 1.7;
  --lh-h2: 1.3;
  --lh-h3: 1.4;

  /* card */
  --card-bg: #fff;
  --card-radius: clamp(12px, 1vw + 8px, 16px);
  --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

  /* text colors */
  --text: #393939;
  --muted: #a9a9a9;

  /* accent for section headings */
  --accent: #30c5d8; /* お好みで変更OK */
  --accent-soft: #e8f0fb; /* 必要なら */

  /* layout */
  --container-max: 1200px;
  --container-pad-x: clamp(15px, 5vw, 40px);
  --card-pad: clamp(15px, 3vw, 40px);
  --label-col: 100px; /* dt列の幅を流体化 */
  --border-strong: clamp(2px, 0.3vw, 3px);
  --border-accent: clamp(3px, 0.4vw, 4px);
}

/* ====== ベースと本文 ====== */
html {
  font-size: 100%;
}

body {
  color: var(--text);
  font-family: "Helvetica Neue", "Noto Sans JP", sans-serif;
  font-size: var(--size-body);
  line-height: var(--lh-body);
  margin: 0;
  background: #fafafa;
}

/* ====== タイトル・小見出し ====== */

.jobs--header__title {
  margin-bottom: var(--space-4);
}

.jobs--title__en {
  display: block;
  font-family: poppins, system-ui, sans-serif;
  font-size: var(--size-display-en);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-1);
  line-height: 1;
}

.jobs--title__ja {
  display: block;
  font-size: var(--size-display-ja);
  letter-spacing: 0.2em;
  line-height: 1;
}

.job__title {
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3);
}

.jobs--header__text {
  font-weight: 600;
  line-height: 1.8;
}

/* セクション見出し：色 + 左縦線 + 余白（8の倍数） */
.job__section-title {
  font-size: var(--size-h3);
  line-height: var(--lh-h3);
  color: var(--accent);
  margin: var(--space-3) 0 0;
  padding-left: var(--space-2);
  border-left: var(--border-accent) solid var(--accent);
}

/* ====== コンテナ・カード構造 ====== */
.jobs--header {
  max-width: var(--container-max);
  margin: 0 auto var(--space-2);
  padding-left: var(--container-pad-x);
  padding-right: var(--container-pad-x);
}

main > .jobs,
.jobs {
  max-width: var(--container-max);
  margin: 0 auto;
  /* 左右paddingをスムーズに補間（15px〜40px） */
  padding-left: var(--container-pad-x);
  padding-right: var(--container-pad-x);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-4);
}

.job {
  grid-column: span 12;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-pad); /* カード内余白も滑らか補間 */
  padding-bottom: var(--space-2);
  padding-top: var(--space-4);
}

/* 複数カード時のレスポンシブ */
@media (min-width: 768px) {
  .job {
    grid-column: span 6;
  }
}
@media (min-width: 1024px) {
  .job {
    grid-column: span 4;
  }
}

/* 単一カード時：中央寄せ */
.jobs:has(> .job:nth-child(1):last-child) {
  display: block;
}
.jobs:has(> .job:nth-child(1):last-child) .job {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ====== コンテンツ構造 ====== */
.job__header {
  margin-bottom: var(--space-2);
}
.job__body {
  margin-top: var(--space-2);
}

.job__section {
  padding-top: var(--space-2);
  border-top: 1.5px solid var(--accent);
  padding-bottom: var(--space-2); /* 20px固定→流体へ置換 */
}

.job__section:first-of-type {
  border-top: var(--border-strong) solid var(--text);
}

.job__section:last-of-type {
  padding-bottom: 0;
}

/* dl構造 */
.fields {
  margin-bottom: var(--space-2);
}

.fields__row {
  display: grid;
  grid-template-columns: var(--label-col) 1fr; /* ラベル幅を流体化 */
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px dotted #c0c0c0;
  /* background-image: repeating-linear-gradient(
    90deg,
    var(--muted),
    var(--muted) 3px,
    transparent 3px,
    transparent 6px
  );
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 1px; */
}

.fields__row:last-child {
  background-image: none;
  background-position: none;
  background-repeat: none;
  background-size: none;
}

.fields__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.fields__term {
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.fields__desc {
  margin: 0;
}

.list__disc {
  list-style: disc;
}
.list__number {
  list-style: decimal;
}

/* ====== dd 内の小見出し（墨カッコ）想定 ======
   対象箇所を <span class="subhead">【…】</span> or <strong>【…】</strong> でラップして使用
*/
.fields__desc .subhead,
.fields__desc strong {
  display: inline-block;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

/* リスト（箇条書き） */
.fields__desc ul {
  margin: 0 0 0 1.2em;
  padding: 0;
}
.fields__desc li {
  margin: 0 0 var(--space-1) 0;
}
.fields__desc li:last-child {
  margin-bottom: 0;
}

.fields__desc h4 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}
.fields__desc h4:first-child {
  margin-top: 0;
}
.fields__desc p {
  margin-top: var(--space-2);
}

/* ====== スマホ調整（構造のみ。サイズはfluidで自動変化） ====== */
@media (max-width: 767px) {
  .fields__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .sp--hidden {
    display: none;
  }
}