/*
 * 求人一覧（/jobs/・業種/都道府県の一覧）と求人詳細検索（/search/）。
 * 値: docs/design/03-job-archive.md（PC 238:72046 / SP 238:73332）、05-job-search-modals.md §1・§2。
 * SP を基準に書き、768px 以上で PC の値に上書きする。
 */

/* ---------- 本体 ---------- */
.p-job-archive { padding: 60px 20px 80px; }
/* 詳細検索 SP は見出しがパンくず下 40（Figma 238:75864 の見出し y≒135。一覧 SP 238:73332 は 60 のまま） */
@media (max-width: 767px) { .p-search { padding-top: 40px; } }
.p-job-archive__inner { max-width: var(--jn-container); margin: 0 auto; }
.p-job-archive__head { position: relative; }
.p-job-archive__title,
.p-search__title { margin: 0; }
/* 詳細検索 SP の見出しだけ Figma 238:75864 は x16・幅 343（下線 16〜358 を実測。一覧 SP は x20 のまま。pp2 search S1） */
@media (max-width: 767px) { .p-search__title { width: auto; margin-inline: -4px; } } /* 幅 335 の指定を外して下線を 16〜359 に */
.p-job-archive__change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  color: var(--jn-color-contact);
  position: relative;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* 当たり判定 44px（B1 UX M1）: 見た目は変えず ::before で上下に広げる（条件を変更・すべて解除・並び替え） */
.p-job-archive__change::before,
.p-conditions__clear::before,
.p-sort__tag::before { content: ""; position: absolute; inset: -11px -4px; }
.p-sort__tag::before { inset: -8px 0; }
.p-conditions__clear::before { inset: -12px -4px; }
.p-job-archive__change-icon { width: 16px; height: 16px; }
.p-job-archive__results { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- 条件チップ（決定 D1: 特徴チップと同じ見た目） ---------- */
.p-conditions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.p-conditions__label { margin: 0; font-size: 12px; font-weight: 700; color: var(--jn-color-navy); }
.p-conditions__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.p-conditions__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 3px 6px 3px 12px;
  border: 1px solid var(--jn-color-navy);
  border-radius: var(--jn-radius-pill);
  background: var(--jn-color-white);
  color: var(--jn-color-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}
.p-conditions__remove {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--jn-color-navy);
}
.p-conditions__remove:hover,
.p-conditions__remove:focus-visible { background: var(--jn-color-corp-bg); }
.p-conditions__remove-icon { width: 12px; height: 12px; }
/* × の当たり判定 44×44（B1 UX 2 回目 M）: 絵は 24 のまま ::before で 10px ずつ広げる（チップ右余白 6＋チップ間 8＞10 なので隣を奪わない） */
.p-conditions__remove::before { content: ""; position: absolute; inset: -10px; }
.p-conditions__clear { position: relative; display: inline-block; font-size: 12px; color: var(--jn-color-text); text-decoration: underline; }

/* ---------- 件数・ページャ・並び替え行 ---------- */
/* SP: 1 段目 件数＋並び替え（高さ 30）、24 空けて 2 段目にページャ中央 */
.p-job-archive__bar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "count sort" "pager pager";
  align-items: center;
  row-gap: 24px;
}
.p-job-archive__count {
  grid-area: count;
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  min-height: 30px;
  align-self: center;
}
.p-job-archive__count-label { font-size: 12px; font-weight: 400; line-height: 1.6; color: var(--jn-color-text-strong); }
.p-job-archive__count-num { font-family: var(--jn-font-latin); font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--jn-color-primary); }
.p-job-archive__pager--top { grid-area: pager; }
.p-job-archive__sort { grid-area: sort; justify-self: end; }
.p-job-archive__pager { display: flex; justify-content: center; }
.p-job-archive__list { display: flex; flex-direction: column; gap: 40px; }

/* ---------- 並び替え（details） ---------- */
.p-sort { position: relative; }
.p-sort__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  min-width: 90px;
  height: 30px;
  padding: 8px 12px;
  border: 1px solid var(--jn-color-text);
  border-radius: 18px;
  background: var(--jn-color-white);
  color: var(--jn-color-text-muted);
  font-size: 12px; /* 日本語の最小 12（B1 UX M2。Figma SP は 10） */
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.p-sort__tag::-webkit-details-marker { display: none; }
.p-sort__arrow { width: 8px; height: 8px; flex: none; transition: transform .15s; }
.p-sort[open] .p-sort__arrow { transform: rotate(180deg); }
.p-sort__menu {
  position: absolute;
  right: 3px;
  bottom: 100%;
  z-index: 20;
  min-width: 84px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--jn-color-white);
  box-shadow: 2px 4px 10px rgba(0, 0, 0, .2);
}
.p-sort__item {
  display: block;
  padding: 8px 12px;
  color: var(--jn-color-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
  text-decoration: none;
}
.p-sort__item:hover,
.p-sort__item:focus-visible,
.p-sort__item[aria-current="true"] { background: var(--jn-color-corp-bg); color: var(--jn-color-text-muted); }

/* ---------- ページャ（§1-2） ---------- */
.p-pager__list { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.p-pager__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--jn-radius-pill);
  color: var(--jn-color-contact);
  font-family: var(--jn-font-latin);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .05em;
  text-decoration: none;
}
.p-pager__num.is-current { background: rgba(3, 135, 168, .2); }
/* 番号の当たり判定 44×44（B1 UX 2 回目 M）: 丸 40 のまま ::before で 2px ずつ広げる（番号間 12 なので重ならない） */
.p-pager__num::before { content: ""; position: absolute; inset: -2px; }
a.p-pager__num:hover,
a.p-pager__num:focus-visible { background: rgba(3, 135, 168, .1); }
.p-pager__arrows { display: flex; gap: 4px; }
.p-pager__arrow { display: grid; place-items: center; width: 20px; height: 40px; color: var(--jn-color-contact); }
/* SP は矢印の当たり判定を 44×44 に（B1 UX M1）。矢印の絵は 20 のまま、外側の余白は負のマージンで相殺 */
@media (max-width: 767px) {
  /* -8: 番号の ::before（外へ 2px）と矢印 44 が重ならないよう余白を残す（B1 UX 2 回目 M） */
  .p-pager__arrows { gap: 0; margin: 0 -8px; }
  .p-pager__arrow { width: 44px; height: 44px; }
  /* 並び替えの選択肢は縦に接しているので ::before では広げられない → SP だけ行の高さを 44 に（B1 UX 2 回目 M） */
  .p-sort__item { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
  /* /search/ のチェック: 行間 16 の半分ずつ ::before で広げ、1 行の項目は min-height 28 で 28+16=44 にする（B1 UX 2 回目 M） */
  .p-search__check { position: relative; min-height: 28px; }
  .p-search__check::before { content: ""; position: absolute; inset: -8px 0; }
}
.p-pager__arrow.is-flip .p-pager__icon { transform: scaleX(-1); }
.p-pager__icon { width: 20px; height: 20px; }

/* ---------- 求人カード（一覧） SP §4 ---------- */
.c-job-card.c-job-card--list {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  border: 1px solid var(--jn-color-border);
  border-radius: var(--jn-radius-md);
  background: var(--jn-color-white);
}
.c-job-card__band {
  margin: 0;
  padding: 12px 20px;
  background: var(--jn-color-secondary);
  font-family: var(--jn-font-base);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
}
.c-job-card__band-link { color: var(--jn-color-white); text-decoration: none; }
.c-job-card__band-link:hover,
.c-job-card__band-link:focus-visible { text-decoration: underline; }
.c-job-card--list .c-job-card__body { display: flex; flex-direction: column; gap: 16px; padding: 0 20px; }
.c-job-card__features { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.c-job-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.c-job-card__chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 24px;
  padding: 4px 10px;
  border: 1px solid var(--jn-color-navy);
  border-radius: var(--jn-radius-pill);
  background: var(--jn-color-white);
  color: var(--jn-color-navy);
  font-size: 12px; /* 日本語の最小 12（B1 UX M2。Figma SP は 10） */
  font-weight: 700;
  line-height: 14px;
  white-space: nowrap;
}
.c-job-card__more { color: var(--jn-color-text); font-size: 12px; font-weight: 500; line-height: 1.6; text-decoration: none; }
.c-job-card__main { display: flex; align-items: flex-start; gap: 16px; }
.c-job-card--list .c-job-card__photo {
  flex: none;
  width: 100px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--jn-color-placeholder);
}
.c-job-card--list .c-job-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-job-card__desc {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--jn-color-contact);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}
/* ボタン: 1 段目 応募する（全幅）、2 段目 キープ 94＋詳細を見る（残り）、gap 12 */
.c-job-card__actions {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "apply apply" "keep detail";
  gap: 12px;
  padding: 0 20px 24px;
}
.c-job-card__keep,
.c-job-card__apply,
.c-job-card__detail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 48px;
  border-radius: var(--jn-radius-pill);
  font-family: var(--jn-font-base);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.c-job-card__keep {
  grid-area: keep;
  gap: 4px;
  width: 94px;
  padding: 10px 12px;
  border: 1px solid var(--jn-color-primary);
  background: var(--jn-color-white);
  color: var(--jn-color-text);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .05em;
}
.c-job-card__keep.is-kept { width: 108px; background: var(--jn-color-primary-soft); }
.c-job-card__keep-icon { width: 14px; height: 14px; flex: none; }
.c-job-card__apply {
  grid-area: apply;
  gap: 24px;
  padding: 0 36px 0 48px;
  border: 0;
  background: var(--jn-color-primary);
  color: var(--jn-color-white);
  font-size: 16px;
  line-height: 1.4;
}
.c-job-card__apply-icon { width: 18px; height: 18px; flex: none; }
.c-job-card__detail {
  grid-area: detail;
  justify-content: space-between;   /* 文字左・矢印右の両端寄せ（Figma SP pad 0/28/0/36、PC pad 0 36） */
  gap: 16px;
  padding: 0 28px 0 36px;
  border: 1px solid var(--jn-color-primary);
  background: var(--jn-color-white);
  color: var(--jn-color-primary);
  font-size: 14px;
  line-height: 1.4;
}
.c-job-card__detail-icon { width: 10px; height: 20px; flex: none; }
/* 360 未満は キープ 94＋詳細を見る がカード幅を 9px 越える（320 で右端 309 > 300） */
@media (max-width: 359px) {
  .c-job-card__detail { gap: 8px; padding: 0 16px 0 20px; }
}
.c-job-card__keep:hover,
.c-job-card__detail:hover { background: var(--jn-color-primary-soft); }
.c-job-card__apply:hover { opacity: .85; }

/* ---------- 0 件 ---------- */
.p-job-empty { display: flex; flex-direction: column; gap: 24px; }
.p-job-empty__message { margin: 0; }
.p-job-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---------- 求人詳細検索（/search/） SP §2 ---------- */
.p-search__form { margin-top: 40px; }   /* 見出し下線→表 40（Figma SP 238:75864） */
/* SP の項目名バーは画面幅いっぱい（375×38）、中身は pad 16/20/28/20 → ボタン 335 */
.p-search__table { display: flex; flex-direction: column; margin: 0 -20px; }
.p-search__label {
  padding: 10px 20px;
  border-radius: 4px;
  background: var(--jn-color-corp-bg);
  color: var(--jn-color-text-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .05em;
}
.p-search__label label { cursor: pointer; }
.p-search__field { padding: 16px 20px 28px; }
.p-search__text,
.p-search__selectbox {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--jn-color-border);
  border-radius: var(--jn-radius-sm);
  background: var(--jn-color-white);
  color: var(--jn-color-text-strong);
  font: 500 16px/1.4 var(--jn-font-base);
}
.p-search__select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between; /* SP: 文字左寄せ・＋は右端（05 §2 / Figma 238:75864） */
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 20px 0 28px; /* ＋の図形が右端から 25（アイコン 20 の内側余白込み。Figma 238:75864、pp2 search S2） */
  text-align: left;
  border: 0;
  border-radius: var(--jn-radius-pill);
  background: var(--jn-color-primary-soft);
  color: var(--jn-color-text);
  font: 400 14px/1.4 var(--jn-font-base);
  cursor: pointer;
}
.p-search__select-icon { width: 20px; height: 20px; color: var(--jn-color-primary); flex: none; }
/* 業種・勤務地の選択内容。未選択（空）のときは出さない（Figma に「指定なし」の表示は無い） */
.p-search__summary:empty { display: none; }
.p-search__summary { margin: 8px 0 0; color: var(--jn-color-text-muted); font-size: 13px; line-height: 1.6; }
.p-search__help { margin: 8px 0 0; color: var(--jn-color-text-muted); font-size: 12px; line-height: 1.6; }
.p-search__checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
.p-search__checks--wide { grid-template-columns: 1fr; }
/* Figma に無い 375 未満は 3 列だと列幅 80 で国名が 1 字ずつ落ちるので 2 列（14 幅点検） */
@media (max-width: 374px) { .p-search__checks:not(.p-search__checks--wide) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-search__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--jn-color-text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .05em;
  cursor: pointer;
}
.p-search__check-input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  /* 箱は白・1px #CCC・r2（Figma 238:74625。標準描画だと濃い灰の枠。pp2 jobs #4）。チェック時は同意チェックと同じティール地に白のレ点。
     input のまま appearance だけ外すので Tab・Space とフォーカスリングはそのまま */
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background: var(--jn-color-white);
  border: 1px solid var(--jn-color-border);
  border-radius: 2px;
  cursor: pointer;
}
.p-search__check-input[type="radio"] { border-radius: 50%; }
.p-search__check-input:checked { border-color: var(--jn-color-secondary); }
.p-search__check-input[type="checkbox"]:checked {
  background: var(--jn-color-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.p-search__check-input[type="radio"]:checked { background: radial-gradient(circle, var(--jn-color-secondary) 0 4px, var(--jn-color-white) 4.5px); }
.p-search__check-input:focus-visible { outline: 2px solid var(--jn-color-focus); outline-offset: 2px; }
/* 強制カラー（Windows ハイコントラスト）では背景画像が消えるので、チェック時は枠を太くして状態を残す */
@media (forced-colors: active) {
  .p-search__check-input { border-color: CanvasText; }
  .p-search__check-input:checked { background: Highlight; border: 4px solid CanvasText; }
}
.p-search__submit-wrap { display: flex; justify-content: center; margin-top: 40px; }
.p-search__submit { width: 100%; max-width: 335px; }
.p-search__submit-icon { width: 20px; height: 20px; flex: none; } /* SP は字形 14（Figma 238:75864。pixel-C2 #2） */

/* ---------- PC ---------- */
@media (min-width: 768px) {
  .p-job-archive { padding: 60px 40px 80px; }
  .p-search__submit-icon { width: 24px; height: 24px; }
  .p-job-archive__change { position: absolute; right: 0; top: 4px; margin-top: 0; font-size: 14px; }
  .p-job-archive__results { margin-top: 40px; gap: 28px; }

  .p-job-archive__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 0 20px;
  }
  .p-job-archive__count-label { font-size: 14px; font-weight: 350; } /* Figma PC は Noto Sans JP 350（report-list#9）。SP は 400 のまま */
  .p-job-archive__count-num { font-size: 20px; line-height: 35px; } /* Figma 行高 35（pp2 jobs#9） */
  .p-sort__item { padding: 6px; line-height: 18px; } /* PC の行は Figma 84×30（pp2 jobs#8。SP は押せる高さ 44 のまま＝先方了承 1-5） */
  .p-sort__tag { min-width: 100px; font-size: 12px; }

  /* カード PC §2 */
  .c-job-card__band { padding: 12px 28px; }
  .c-job-card--list .c-job-card__band { padding-block: 11px; } /* 帯 50.8・カード間隔 451（Figma 238:72046。12＋28.8＋12 だと 1 枚 +2 ずつ溜まる。pixel-A2 M1） */
  .c-job-card--list .c-job-card__body { padding: 0 28px; }
  .c-job-card__chips { gap: 12px; }
  .c-job-card__chip { height: 28px; padding: 4px 12px 5px; font-size: 12px; line-height: 1.6; }
  .c-job-card__main { gap: 28px; }
  .c-job-card--list .c-job-card__photo { width: 280px; }
  .c-job-card__desc { font-size: 16px; -webkit-line-clamp: 8; }
  .c-job-card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding: 0 28px 24px;
  }
  .c-job-card__keep { order: 1; gap: 8px; width: 115px; padding: 12px 16px; font-size: 14px; }
  .c-job-card__keep.is-kept { width: 130px; }
  .c-job-card__keep:not(.is-kept) { justify-content: flex-start; padding-left: 20px; } /* 未キープは星＋文字を左寄せ（Figma 左 21・右 28。pixel-A2 M2） */
  .c-job-card__keep-icon { width: 16px; height: 16px; }
  /* 応募する・詳細を見る は文字左・アイコン右の両端寄せ（Figma PC） */
  .c-job-card__apply { order: 2; justify-content: space-between; width: 240px; padding: 0 36px; font-size: 18px; }
  .c-job-card__apply-icon { width: 24px; height: 24px; }
  .c-job-card__detail { order: 3; width: 240px; padding: 0 36px; font-size: 18px; }

  /* 求人詳細検索 PC §1: ラベル列 226＋値列、罫線 1px #CCC */
  .p-search { padding-top: 41px; } /* 見出し上端 y168（Figma 238:74625。pp2 search P1） */
  .p-search__form { margin-top: 20px; }
  .p-search .p-search__form { margin-top: 40px; } /* 下線→表 40 */
  .p-search__table { margin: 0; border-top: 1px solid var(--jn-color-border); }
  .p-search__row {
    display: grid;
    grid-template-columns: 226px 1fr;
    border: 1px solid var(--jn-color-border);
    border-top: 0;
  }
  .p-search__label {
    display: flex;
    align-items: center;
    padding: 16px 28px;
    border-radius: 0;
    border-right: 1px solid var(--jn-color-border);
    color: var(--jn-color-text);
    font-size: 18px;
    line-height: 1.4;
  }
  .p-search__field { padding: 20px 28px; }
  .p-search__field--select { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
  .p-search__select { justify-content: space-between; width: 240px; padding: 0 19px 0 28px; font-size: 18px; } /* ＋の図形が右端から 25（pp2 search P2） */
  .p-search__select-icon { width: 24px; height: 24px; }
  .p-search__summary { margin: 0; flex: 1; min-width: 200px; font-size: 14px; }
  .p-search__text,
  .p-search__selectbox { max-width: 560px; }
  .p-search__checks { grid-template-columns: repeat(3, 265px); gap: 28px 20px; }
  .p-search__checks--wide { grid-template-columns: repeat(3, 265px); }
  .p-search__check { font-size: 14px; }
  .p-search__submit { width: 240px; }
}
@media (min-width: 1200px) {
  .p-job-archive { padding: 60px 0 80px; }
  .p-search { padding-top: 41px; } /* 上の一覧用 60 に上書きされていた（見出し y187→168。pixel-A3 #1） */
}

/* C1 レスポンシブ: 768〜1199 で詳細検索の選択肢列（265px×3）が値列からはみ出す（1080 で scrollWidth 1158）のを抑止。768〜1199 は 200px 以上の自動列、1200 以上は従来どおり 265px×3。 */
@media (min-width: 768px) {
  .p-search__row { grid-template-columns: 226px minmax(0, 1fr); }
  .p-search__checks,
  .p-search__checks--wide { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  /* 「在留資格（ざいりゅうしかく）」の「く）」だけが次行に落ちるのを防ぐ（読みを括弧ごと 2 行目へ） */
  .p-search__label { word-break: keep-all; overflow-wrap: anywhere; }
}
/* 768〜1199 はラベル列の左右を 20 に詰める（1200 以上は Figma どおり 28・中央揃え） */
@media (min-width: 768px) and (max-width: 1199px) {
  .p-search__label { padding-inline: 20px; }
}
/* 768〜1023 は値列が 404px 前後しかなく 200px だと 1 列になりフォームが倍に伸びるため 160px（768 で 2 列・900 で 3 列） */
@media (min-width: 768px) and (max-width: 1023px) {
  .p-search__checks,
  .p-search__checks--wide { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (min-width: 1200px) {
  .p-search__checks,
  .p-search__checks--wide { grid-template-columns: repeat(3, 265px); }
  /* ラベルは左寄せ・左右 pad 28（Figma PC 238:74625 の複数行ラベルの重ねで行頭がそろう。pp2 jobs #1） */
  .p-search__label { padding-inline: 28px; }
}

/* 検索結果 PC の左右あしらい（ティールの霞。Figma `238:72047`・`238:72060`・`238:72073` 各 335×851、#00CAC2 実効 15%）。
   1440 基準で左 x=-91・右 x=1197、y=253（ページ上端）から 980 刻み×3（3 組目の ±12 のずれは同じ刻みに丸める）。
   .p-job-archive の上端は 122（ヘッダー 88＋パンくず 34）なので top 131。はみ出しはこのラッパで clip。SP は Figma 未確認のため出さない */
@media (min-width: 1200px) {
  .p-job-archive { position: relative; isolation: isolate; overflow: clip; }
  .p-job-archive::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 131px;
    left: 0;
    width: 100%;               /* 1440 固定の箱だと広い画面で箱の端で霞が縦に切れる（先方指摘 TOP⑦ の横展開）。位置は中央基準 */
    bottom: 0;                 /* 一覧の下端まで敷く（固定 2811 だと 27 件で下半分が無地。pp2 jobs#7） */
    background:
      url("../img/deco-kasumi-teal.svg") calc(50% - 643.5px) 0 / 335px 980px repeat-y,
      url("../img/deco-kasumi-teal.svg") calc(50% + 644.5px) 0 / 335px 980px repeat-y;
    pointer-events: none;
  }
  /* 詳細検索（Figma 238:74625）は霞の 1 組目が y213・左右とも 13 左（pp2 search P3） */
  .p-search::before {
    top: 91px;
    background-position: calc(50% - 656.5px) 0, calc(50% + 631.5px) 0;
  }
}

/* 検索結果 SP も左右の端に霞がのぞく（Figma SP `238:73332` 2x。カードの外 20px と余白に見える。pp2 jobs #6）。
   SP の霞は PC と別形で同じ絵では一致しない → 同じ絵を 0.92 倍（308×902）にし周期と端からの出を合わせた近似（インタビュー SP と同じ）。
   詳細検索 SP は Figma に霞が無いので出さない */
@media (max-width: 767px) {
  .p-job-archive:not(.p-search) { position: relative; isolation: isolate; overflow: clip; }
  .p-job-archive:not(.p-search)::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
      url("../img/deco-kasumi-teal.svg") left -178px top -70px / 308px 902px repeat-y,
      url("../img/deco-kasumi-teal.svg") right -190px top -260px / 308px 902px repeat-y;
    pointer-events: none;
  }
}