/* ============================================================
   部品
   複数のセクションで使い回すパーツ。
   ============================================================ */

/* ------------------------------------------------------------
   見出し：クレーンで吊られた荷札（フック＋玉掛けワイヤー）
   ------------------------------------------------------------ */
.plate {
  /* フックと玉掛けワイヤーの位置。荷札の上端を 0 とした高さで指定する。
     --sling-top を --hook-bottom より大きくして、ワイヤーの頂点を
     フックの口（内側）に食い込ませる。同じ値にすると紐がフックの
     外側の底に接するだけになり、掛かっていないように見える。
     セクションの padding-top（64px）は --hook-bottom + --hook-h を見込んだ値 */
  --hook-bottom: 34px;
  --hook-h: 30px;
  --sling-top: 37px;

  position: relative;
  align-self: center;
  min-width: 62%;
  margin: 0;
  padding: 12px 22px 10px;
  background: var(--y);
  border: var(--line) solid var(--ink);
  border-radius: 4px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: .04em;
  text-align: center;
}
/* 玉掛けワイヤー（V 字） */
.plate::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: calc(100% + var(--line));
  height: var(--sling-top);
  background: url("../svg/plate-sling.svg") center / 100% 100% no-repeat;
}
/* フック */
.plate::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--line) + var(--hook-bottom));
  width: 20px;
  height: var(--hook-h);
  margin-left: -10px;
  background: url("../svg/plate-hook.svg") center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------
   見出し付きのひとまとまり
   ------------------------------------------------------------ */
.block { display: flex; flex-direction: column; gap: 14px; }

/* 中見出し（下に幅いっぱいの黒い線）。
   下の中身との間は、.block の gap（14px）にこの margin を足した 30px にそろえる */
.block > h3 {
  margin: 0 0 16px;
  padding: 0 2px 6px;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.5;
  border-bottom: var(--line) solid var(--ink);
}

/* 小見出し（黄色の四角） */
.block > h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.5;
}
.block > h4::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--y);
  border: 2px solid var(--ink);
}
.block > h4 + p { margin-top: -8px; }

/* ------------------------------------------------------------
   ボタン
   ------------------------------------------------------------ */
.btn {
  /* 地の色と、ホバー時の文字色。派生（--sub / --ghost）はこの 2 つだけ差し替える */
  --btn-bg: var(--y);
  --btn-hover-fg: var(--y);
  /* 飛び出すボタン：下に黒い厚み（側面）を付け、押すと沈める */
  --btn-depth: 7px;

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 8px 10px;
  /* 左半分が黒・右半分が地の色の帯を 2 倍幅で敷き、右半分だけ見せておく。
     ホバーで帯を左へ寄せると、黒が左から流れ込む */
  background: linear-gradient(90deg, var(--ink) 50%, var(--btn-bg) 50%) right / 201% 100% no-repeat;
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 var(--btn-depth) 0 var(--ink);
  transition: background-position .15s ease-out, color .15s ease-out, transform .15s ease, box-shadow .15s ease;
}
.btn--sub { --btn-bg: var(--paper); --btn-hover-fg: var(--paper); }
.btn--sm { --btn-depth: 5px; min-height: 44px; font-size: 15px; }
.btn--ghost { --btn-bg: transparent; --btn-hover-fg: var(--paper); border-width: 2px; }
/* ホバー：黒地に変わる（黄色のボタンは黄色文字、白・透明のボタンは白文字）。
   マウスなどホバーできる環境だけ。キーボード操作のフォーカスも同じ見た目にする */
@media (hover: hover) {
  .btn:hover { background-position: left; color: var(--btn-hover-fg); }
}
.btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  background-position: left;
  color: var(--btn-hover-fg);
}
/* 押下：厚みのぶん沈み込み、側面が消える */
.btn:active {
  transform: translateY(var(--btn-depth));
  box-shadow: 0 0 0 var(--ink);
  transition-duration: .15s, .15s, .05s, .05s;
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* 黒地に黄色の文字の札（「大歓迎！」「しっかりサポート！」など）。
   大きさ・余白は使う場所ごとに指定する */
.ink-label {
  display: inline-block;
  background: var(--ink);
  color: var(--y);
  border-radius: 6px;
  font-family: var(--f-display);
  font-weight: 900;
}

/* 社員数・年齢構成のグラフ（charts.js） */
/* 社員数・平均年齢・平均勤続年数を、枠で囲んだ 3 つの箱に並べる */
.staff-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.staff-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
  text-align: center;
}
.staff-stats dt { font-size: 13px; font-weight: 700; white-space: nowrap; }
.staff-stats dd { margin: 0; font-weight: 900; }
.staff-stats dd { display: flex; align-items: baseline; justify-content: center; white-space: nowrap; }
.staff-stats strong { font-family: var(--f-display); font-size: 30px; line-height: 1.1; }
.staff-stats strong.is-pending { font-size: 16px; }
.chart { position: relative; padding: 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; }
.chart canvas { display: block; width: 100%; height: 100%; }
.chart--bar { height: 320px; }
.chart--pie { height: 380px; }

/* まちの基本情報（苫小牧市ってどんなまち？）。1 枚の枠を 2 列に区切る。
   すき間に黒を見せて 2px の区切り線にする。項目が奇数のときは最後の 1 つを横いっぱいにする */
.town-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.town-facts > div {
  display: flex;
  flex-direction: column;
  gap: 10px;   /* 項目名と中身の間 */
  padding: 12px 12px 14px;
  background: var(--paper);
  text-align: center;
}
.town-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.town-facts dt { font-size: 13px; font-weight: 700; }
.town-facts dd { margin: 0; font-size: 17px; font-weight: 900; line-height: 1.45; }
.town-facts dd { word-break: auto-phrase; }   /* 言葉の途中で折り返さない（対応ブラウザのみ） */
/* 数字だけ大きく（社員数の箱と同じ見せ方）。単位（約・万人・分 など）は今の大きさのまま */
.town-num { margin: 0 1px; font-family: var(--f-display); font-size: 28px; font-weight: 900; line-height: 1.15; }
@media (max-width: 374px) { .town-facts dd { font-size: 15px; } .town-num { font-size: 24px; } }

/* 横並び（均等割り） */
.row { display: flex; gap: 10px; }
.row > * { flex: 1 1 0; min-width: 0; }

/* 2 枚の写真の比較（例：人の手で運ぶ → 機械で吊る）。
   「カード｜矢印｜カード」の 3 列。矢印は写真に重ねず、専用の列に置く */
.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}
.compare-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.compare-arrow img { width: 18px; height: 18px; }
/* 比較の見出しは小さめにして、写真の下の帯の中で上下左右とも中央に置く */
.compare .card figcaption { padding: 7.5px 6px 8.5px; text-align: center; }   /* 字形が下寄りなので上を少し詰める */
.compare .card-title { font-size: 14px; }

/* ------------------------------------------------------------
   画像枠
   写真は枠に object-fit: cover で流し込む。
   画像が未確定／読み込めなかった枠は .is-empty になる。
   ------------------------------------------------------------ */
.img {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(0, 0, 0, .06);
  border: 2px solid var(--ink);
  border-radius: 6px;
}
.img img { width: 100%; height: 100%; object-fit: cover; }
.img--wide { aspect-ratio: 16 / 9; }
.img--square { aspect-ratio: 1 / 1; }
.img--portrait { aspect-ratio: 3 / 4; }
.img--photo { aspect-ratio: 3 / 2; }   /* 一般的な写真の横長（街のこと） */

/* 埋め込みの地図（アクセス）。iframe の width / height 指定は使わず、本文幅いっぱい・4:3 にする */
.map {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.map iframe { display: block; width: 100%; height: 100%; border: 0; }

.img.is-empty {
  display: grid;
  place-items: center;
  border-style: dashed;
  border-color: rgba(0, 0, 0, .35);
}
/* 写真がまだない枠に出す「準備中」（公開時も残る表示。注記用の draft-notes.css とは別） */
.img-pending { font-size: 14px; font-weight: 700; color: var(--steel); letter-spacing: .1em; }

.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-grid .img--wide { grid-column: 1 / -1; }
/* セクション直下に置いた写真は、上下の間隔をセクションの gap（56px）より詰めて 24px にする */
.sec > .photo-grid { margin-block: -32px; }

/* ------------------------------------------------------------
   箇条書き
   ------------------------------------------------------------ */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.list li { position: relative; padding-left: 20px; }
.list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: .72em;
  width: 8px;
  height: 8px;
  background: var(--ink);
}

/* 資格などのタグ */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li {
  /* 字形が下寄りなので、上を詰めて上下中央に見せる */
  padding: 2.5px 10px 3.5px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.chips li.is-more { padding-inline: 2px; background: none; border-color: transparent; }

/* ------------------------------------------------------------
   手順（下向きの矢印でつなぐ）
   ------------------------------------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
/* 手順の文：言葉の切れ目で折り返し（対応ブラウザのみ）、1 つの言葉が 1 行に収まらないときだけ途中で折る */
.steps li > span:last-child { min-width: 0; word-break: auto-phrase; overflow-wrap: anywhere; }
/* 見出しと説明のある手順（選考の流れ） */
.steps.steps--detail li { align-items: flex-start; }   /* .steps li より後で効かせるため 2 つのクラスで指定 */
.steps.steps--detail .step-no { margin-top: 2px; }
.step-body { display: flex; flex-direction: column; gap: 2px; }
/* 文中のリンク（選考の流れの「こちらの応募フォーム」など）。下線で押せることを示す */
.text-link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.step-title { font-size: 16px; font-weight: 900; }
.step-desc { font-size: 14px; font-weight: 500; line-height: 1.6; }
.steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.5;
}
.steps li + li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -17px;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid var(--ink);
}
.step-no {
  flex: none;
  /* この書体は英数字が下寄りに描かれるので、上を詰めて上下中央に見せる */
  padding: 2.5px 10px 4.5px;
  background: var(--ink);
  color: var(--y);
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .06em;
}

/* ------------------------------------------------------------
   1 日の流れ（縦の時間軸）
   ------------------------------------------------------------ */
.day { list-style: none; margin: 0; padding: 0; }
/* 下の見出しとの間を少し広めにとる（上は .block > h3 の margin で確保） */
.block > .day { margin-bottom: 8px; }
/* 左から「時刻」「丸と縦線」「作業内容の箇条書き」 */
.day > li {
  --time-w: 58px;
  --dot-w: 26px;
  --col-gap: 8px;
  position: relative;
  display: grid;
  grid-template-columns: var(--time-w) var(--dot-w) 1fr;
  column-gap: var(--col-gap);
  align-items: start;
  padding-bottom: 22px;
}
.day > li:last-child { padding-bottom: 0; }
/* 時刻の点 */
.day > li::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: 6px;
  background: var(--y);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
/* 点をつなぐ縦線。次の行の点（上から 6px）まで伸ばして、すき間なくつなぐ */
.day > li::after {
  content: "";
  position: absolute;
  left: calc(var(--time-w) + var(--col-gap) + var(--dot-w) / 2 - 1.5px);
  top: 6px;
  bottom: -6px;
  width: 3px;
  background: var(--ink);
}
.day > li:last-child::after { display: none; }
/* 始まりの時刻だけを右寄せで出す */
.day-time {
  grid-column: 1;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 15px;
  line-height: 1.5;
  text-align: right;
  white-space: nowrap;
}
/* 作業内容の箇条書き。長い行は言葉の途中で切らずに折り返す（対応ブラウザのみ） */
.day-tasks {
  grid-column: 3;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  word-break: auto-phrase;
}
.day-tasks li { position: relative; padding-left: 14px; }
.day-tasks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  background: var(--ink);
}

/* ------------------------------------------------------------
   横スクロールのスライダー
   ------------------------------------------------------------ */
/* 横スクロールのスライダー（先輩の声・保有車両・街のこと）。指で横にスワイプして 1 枚ずつ止まる（スクロールスナップ）。
   カードは本文幅いっぱいで、隣のカードは見せない。
   グリッドの列を 1 枚ずつ横に並べ、行を「見出し（名前など）」「Q&A」の 2 段にして、
   各カードは subgrid でこの行を共有する。見出しの高さも、カード全体の高さもそろう */
.slider {
  touch-action: pan-x pan-y pinch-zoom;   /* ページ全体は縦だけに限っているので、ここは横も許可する（base.css） */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  grid-template-rows: auto 1fr;
  column-gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.slider::-webkit-scrollbar { display: none; }
.slider > * {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  scroll-snap-align: start;
}
/* 写真カードを並べるスライダー（保有車両・街のこと）。行の分割（subgrid）は使わず、カードは 1 枚の箱のまま。
   高さは一番背の高いカードにそろう（グリッドの stretch） */
.slider--cards { grid-template-rows: auto; }
.slider--cards > * { grid-row: auto; display: flex; }
/* スライダーの下の送りボタン（左右中央。端では押せない） */
.slider-ctrl { display: flex; justify-content: center; gap: 16px; }
.slider-ctrl .carousel-btn[disabled] { background: var(--paper); opacity: .35; cursor: default; }

.carousel-btn {
  /* Safari はボタンの文字色が標準で青。矢印（stroke: currentColor）が青くならないよう黒を指定する */
  -webkit-appearance: none;
  appearance: none;
  color: var(--ink);
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--y);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}

/* カード：写真の下に文字をくっつけて 1 枚にする（保有機械・比較の写真で共通） */
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.card .img { border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; }
.card figcaption { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
/* カードの見出し。事業内容の「を行う会社です。」と同じ大きさ */
.card-title { font-size: 16px; font-weight: 700; line-height: 1.45; }

/* 写真カード（保有車両・街のこと）：見出しは黄色の帯にして中央寄せ。下の区切り線はカードの枠まで引く
   （figcaption の左右の余白を打ち消して横いっぱいに広げる） */
.photo-card figcaption { padding-top: 0; }
.photo-card-title {
  margin-inline: -12px;
  padding: 8px 12px;
  background: var(--y);
  border-bottom: 2px solid var(--ink);
  text-align: center;
  font-weight: 900;
}
.photo-card-desc { font-size: 16px; word-break: auto-phrase; }   /* 言葉の途中で折り返さない（対応ブラウザのみ） */

/* ------------------------------------------------------------
   社員の声（顔写真＋吹き出し）
   ------------------------------------------------------------ */
/* 先輩の声（インタビュー）：職種・名前・入社日の見出しと、Q&A を 1 枚のカードに */
.interview {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}
/* 見出し：左に顔写真の枠、右に職種・名前・入社日 */
.interview-head {
  display: grid;
  grid-template-columns: 84px 1fr;   /* 顔写真は正方形 */
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--y);
  border-bottom: 2px solid var(--ink);
}
.interview-photo { background: var(--paper); }
.interview-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.interview-role { font-size: 13px; font-weight: 700; line-height: 1.5; word-break: auto-phrase; }
.interview-name { margin: 0; font-size: 21px; font-weight: 900; line-height: 1.4; letter-spacing: .06em; }
.interview-joined { font-size: 13px; }
/* Q&A：質問は太字に「Q」、答えに「A」の印。1 問ずつ点線で区切る */
.qa { margin: 0; padding: 0 14px; }
.qa-item { padding: 14px 0; }
.qa-item + .qa-item { border-top: 1px dashed var(--ink); }
.qa dt,
.qa dd {
  position: relative;
  margin: 0;
  padding-left: 34px;
}
.qa dt { font-weight: 700; }
.qa dd { margin-top: 6px; }
.qa dt::before,
.qa dd::before {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 13px;
  line-height: 1;
}
.qa dt::before { content: "Q"; background: var(--ink); color: var(--y); }
.qa dd::before { content: "A"; background: var(--y); color: var(--ink); border: 2px solid var(--ink); }

.voice { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.voice h4 { margin: 0 0 8px; font-size: 17px; font-weight: 900; line-height: 1.5; }

.bubble {
  position: relative;
  padding: 10px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.7;
}
.bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 14px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

/* 社員の言葉として大きく見せる引用 */
.quote {
  position: relative;
  margin: 0 0 10px;
  padding: 18px 18px 16px;
  background: var(--y);
  border: var(--line) solid var(--ink);
  border-radius: 14px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.6;
  word-break: auto-phrase;   /* 言葉の途中で折り返さない（対応ブラウザのみ） */
}
.quote::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -14px;
  width: 18px;
  height: 18px;
  background: var(--y);
  border-right: var(--line) solid var(--ink);
  border-bottom: var(--line) solid var(--ink);
  transform: skewX(35deg) rotate(45deg);
}

/* 話している人つきの引用（仕事のやりがい）：左に話している人、右に吹き出し。
   吹き出しの角は左向きにして、左の人が話しているように見せる */
.speaker {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.speaker-quote { margin: 0; padding: 14px 16px; font-size: 15px; }
/* 吹き出しの角（左向き・「くの字」の線）。
   ::before … 吹き出しと同じ黄色の四角を枠線の上に重ね、角が出る部分の枠線を消す
   ::after  … 上と右の 2 辺だけ線を引いた四角を -135° 回して、左向きの「く」にする */
.speaker-quote::before,
.speaker-quote::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: auto;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  transform: none;
  rotate: -135deg;
  translate: 0 -50%;
}
.speaker-quote::before {
  left: -7px;
  background: var(--y);
  border: 0;
}
.speaker-quote::after {
  left: -11px;
  background: none;
  border: var(--line) solid;
  border-color: var(--ink) var(--ink) transparent transparent;
}
.speaker-figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.speaker-figure img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------
   向いている人
   ------------------------------------------------------------ */
.fit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fit li { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.fit li::before {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
}
.fit--good li::before {
  content: "";
  background: var(--y) url("../svg/check.svg") center / 14px 14px no-repeat;
}

/* ------------------------------------------------------------
   募集職種の一覧
   ------------------------------------------------------------ */
.jobs { display: flex; flex-direction: column; gap: 12px; }
/* 職種カード。右端の虫眼鏡ボタン（.job-open）の押せる範囲をカード全体に広げ、カードのどこを押しても詳細が開く。
   ホバー時は「会社見学を申し込む」ボタン（.btn--sub）と同じく、黒が左から流れ込んで文字が白になる
   （イラストと虫眼鏡ボタンの色はそのまま） */
.job {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr 40px;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: linear-gradient(90deg, var(--ink) 50%, var(--paper) 50%) right / 201% 100% no-repeat;
  border: 2px solid var(--ink);
  border-radius: 8px;
  transition: background-position .15s ease-out;
}
.job .img { border-radius: 4px; background-color: var(--paper); }
.job h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: color .15s ease-out;
}
@media (hover: hover) {
  .job:has(.job-open:hover) { background-position: left; }
  .job:has(.job-open:hover) h4 { color: var(--paper); }
}
.job:has(.job-open:focus-visible) { background-position: left; outline: 3px solid var(--ink); outline-offset: 3px; }
.job:has(.job-open:focus-visible) h4 { color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .job, .job h4 { transition: none; }
}
/* 虫眼鏡ボタン。枠線は先輩の声の送りボタン（.carousel-btn）と同じ太さ */
.job-open {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--y);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}
.job-open::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }   /* 押せる範囲をカード全体に */
.job-open:focus-visible { outline: none; }

/* モーダル（募集職種の詳細）。<dialog> を showModal() で開く */
.modal {
  width: min(100% - 32px, 400px);
  max-height: calc(100svh - 48px);
  padding: 0;
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  overscroll-behavior: contain;
}
.modal::backdrop { background: rgba(0, 0, 0, .55); }
.modal-body { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 24px; }
.modal-close {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  color: var(--ink);
  border: 0;   /* ×だけを出す（丸い枠は付けない） */
  border-radius: 50%;
  cursor: pointer;
}
/* フォーカスの輪郭は、キーボードで移動したときだけ出す */
.modal-close:focus { outline: none; }
.modal-close:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.modal-media .img { width: 140px; margin: 4px auto 0; border-radius: 8px; }
.modal-title {
  /* 開いたときにフォーカスを受ける（×ボタンにフォーカスの輪郭が出ないように）。見出しには輪郭を出さない */
  outline: none;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: var(--line) solid var(--ink);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.45;
}
.modal-content { display: flex; flex-direction: column; gap: 14px; }
/* 職種の詳細：説明文（1 文ずつ改行）・仕事内容（.list）・注記（※）・現場範囲／変更範囲の表 */
.job-lead { line-height: 1.7; }
.modal-content .list { gap: 6px; }
/* ※の注記。※を印にして、2 行目以降も※の右にそろえる */
.note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.note-list li { position: relative; padding-left: 1.2em; }
.note-list li::before { content: "※"; position: absolute; left: 0; }
.job-facts {
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  font-size: 14px;
}
.job-facts > div { display: grid; grid-template-columns: 6em 1fr; }
.job-facts > div + div { border-top: 2px solid var(--ink); }
.job-facts dt { padding: 8px 10px; background: var(--y); border-right: 2px solid var(--ink); font-weight: 900; }
.job-facts dd { margin: 0; padding: 8px 10px; }
.job-fact-note { display: block; margin-top: 2px; font-size: 13px; }
/* 開いている間は後ろのページをスクロールさせない */
html.is-modal-open { overflow: hidden; }

/* ------------------------------------------------------------
   表（募集要項・会社概要）
   ------------------------------------------------------------ */
.table-wrap {
  overflow-x: auto;
  touch-action: pan-x pan-y pinch-zoom;   /* 幅が足りないとき横にスクロールできるように（base.css でページは縦だけ） */
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 6px;
}
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.65; }
.table-wrap th,
.table-wrap td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 2px solid var(--ink); }
.table-wrap tr:last-child th,
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap th {
  width: 32%;
  white-space: nowrap;
  background: var(--y);
  border-right: 2px solid var(--ink);
  font-weight: 900;
}
.table-wrap td.small { font-size: 14px; }
/* セルの中の小さな表（給与の内訳など）。給与は小さく扱う方針なので文字も少し小さく。
   金額は「下限｜〜｜上限」の 3 つの欄に分け、数字を右寄せにして桁の位置をそろえる */
.table-wrap .sub-table { width: auto; border-collapse: collapse; font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.table-wrap .sub-table th,
.table-wrap .sub-table td { width: auto; padding: 4px 0; background: none; border: 0; white-space: nowrap; }
.table-wrap .sub-table th { padding-right: 12px; font-weight: 700; }
.table-wrap .sub-table .num { text-align: right; }
.table-wrap .sub-table .range { padding-inline: .4em; text-align: center; }   /* 「〜」の前後に空きを入れる */
.table-wrap .sub-table tr + tr th,
.table-wrap .sub-table tr + tr td { border-top: 2px solid var(--ink); }
.table-wrap .sub-table--total tr:last-child th,
.table-wrap .sub-table--total tr:last-child td { font-weight: 900; }   /* 給与の内訳：合計は太字 */
/* 文章を入れる小さな表（その他の手当）。金額の欄と違い、内容は折り返してよい */
.table-wrap .sub-table--text { width: 100%; }
.table-wrap .sub-table--text td { white-space: normal; overflow-wrap: anywhere; }
.table-wrap .sub-table--text th { vertical-align: top; }
/* 「項目 金額」を 2 列で縦にそろえて並べる（扶養手当の内訳など） */
.pairs { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; }
.pairs > span:nth-child(odd) { white-space: nowrap; }
/* 金額は言葉の途中で折り返さない。幅が足りないときだけ <wbr> の位置（「×人数」の前など）で折り返す */
.pairs > span:nth-child(even) { word-break: keep-all; }
/* 小さな表の見出しと注記（手当） */
.table-wrap .sub-caption { margin-bottom: 2px; font-size: 13px; font-weight: 700; }
.table-wrap .sub-note + .sub-caption { margin-top: 12px; }   /* 「定期的に〜」と「その他の手当」の間をあける */
.table-wrap .sub-note { margin-top: 4px; font-size: 12px; }
/* 狭い画面では、1 行に収まるよう少し小さくする */
/* 狭い画面では、給与の内訳が 1 行に収まるよう、文字とセルの左右の余白を少し詰める */
@media (max-width: 374px) {
  .table-wrap th,
  .table-wrap td { padding-inline: 8px; }
  .table-wrap .sub-table { font-size: 12px; }
  .table-wrap .sub-table th { padding-right: 6px; }
  .table-wrap .sub-table .range { padding-inline: .25em; }
}

/* ------------------------------------------------------------
   よくある質問
   ------------------------------------------------------------ */
/* 1 問ずつ枠で囲み、質問に「Q」、答えに「A」の丸い印を付ける */
.faq { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 16px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
}
.faq dt,
.faq dd { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; word-break: auto-phrase; }
.faq dt { font-weight: 900; line-height: 1.5; }
.faq dd { padding-top: 10px; border-top: 1px solid var(--ink); }
.faq dt::before,
.faq dd::before {
  content: "Q";
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--ink);
  color: var(--y);
  border-radius: 50%;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
}
.faq dd::before { content: "A"; background: var(--y); color: var(--ink); border: 2px solid var(--ink); }

/* ------------------------------------------------------------
   電話番号
   ------------------------------------------------------------ */
.tel {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: .04em;
  line-height: 1.3;
  text-decoration: none;
}
/* お問い合わせ（TEL・MAIL）。2 行を同じ大きさ・同じ形で並べ、項目名の幅をそろえる。
   リンクに下線は付けない。メールアドレスは入りきらなければ「@」の後ろで折り返す */
.contact { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.contact > div { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: baseline; gap: 8px; }
.contact dt,
.contact dd { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: 20px; letter-spacing: .04em; line-height: 1.4; }
.contact a { text-decoration: none; overflow-wrap: anywhere; }