/*!
 * job-archive.css — 求人アーカイブ（求人検索結果）
 *
 * デザインカンプ準拠：
 *   ┌─────────────────────────────────────────┐
 *   │  パンくず                                  │
 *   │  「愛知県」の工場求人（マーカー）            │
 *   │  リード文                                   │
 *   ├──────────┬──────────────────────────────┤
 *   │ サイドバー │ 黄色サマリー＋チップ           │
 *   │ 絞り込み   │ ソート + 件数                   │
 *   │   エリア   │ 求人カード（横長×N）            │
 *   │   職種     │ ページネーション                │
 *   │   条件     │                                │
 *   │   給与     │                                │
 *   │   フリー   │                                │
 *   │   CTA      │                                │
 *   └──────────┴──────────────────────────────┘
 */

.job-archive {
	background: var(--paper);
}

/* ============ パンくず ============ */
.ja-crumb {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px var(--gutter) 0;
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink2);
}
.ja-crumb a {
	color: var(--ink2);
	text-decoration: none;
}
.ja-crumb a:hover {
	color: var(--ink);
	text-decoration: underline;
}
.ja-crumb__sep {
	margin: 0 8px;
	color: var(--ink3);
}
.ja-crumb__cur {
	color: var(--ink);
}

/* ============ ページ見出し ============ */
.ja-head {
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px var(--gutter) 28px;
}
.ja-head__title {
	font-family: var(--font-display);
	font-size: 34px;
	line-height: 1.3;
	margin: 0;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.ja-head__mk {
	background: linear-gradient(transparent 60%, var(--sticky) 60%);
	padding: 0 6px;
}
.ja-head__lead {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink2);
	margin: 6px 0 0;
}

/* ============ メインレイアウト（サイドバー + 結果）============ */
.ja-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--gutter) 64px;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 24px;
	align-items: start;
}

/* ============ サイドバー（絞り込みフィルター）============ */
/*
 * 構造（PC）：
 *   .ja-side が sticky + overflow-y auto でサイドバー全体をスクロール可能に。
 *   検索ボタン（.ja-side__action）はこだわり条件の直後に普通のフロー配置で並ぶので、
 *   初期表示で見える位置にある。サイドバーをスクロールすると検索ボタンも一緒に上に動く。
 */
.ja-side {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 14px;
	box-shadow: 5px 5px 0 var(--ink);
	padding: 20px;
	position: sticky;
	top: 90px;
	align-self: start;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
	/* JS が scrollIntoView でこの要素にジャンプした時、sticky ヘッダーの後ろに隠れないよう
	   上側の余白を確保（topbar の高さ + 視覚的バッファ）*/
	scroll-margin-top: 110px;
	/* overscroll-behavior: auto がデフォルト。
	   サイドバー内スクロールが端まで到達したら、その後の wheel/タッチ は
	   親（ページ）にチェインしてページ全体がスクロールされる。
	   サイドバー自体の sticky 追従はそのまま維持される。 */
	overscroll-behavior: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--ink3) transparent;
}
.ja-side::-webkit-scrollbar {
	width: 6px;
}
.ja-side::-webkit-scrollbar-thumb {
	background: var(--ink3);
	border-radius: 3px;
}
.ja-side::-webkit-scrollbar-track {
	background: transparent;
}
/* PC ではトグル / × ボタンは非表示（スマホ専用） */
.ja-side__toggle,
.ja-side__close {
	display: none;
}
.ja-side__title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 10px;
	margin: 0 0 14px;
	border-bottom: var(--bd-w) solid var(--ink);
}
.ja-side__title::before {
	content: "🔍";
}

/* ============ カード型フィルター（エリア / 職種 / こだわり条件）============ */
.ja-card-filter {
	/* 背景・シャドウなしのフラットデザイン。境界線も薄く */
	border-bottom: 1.5px dashed var(--ink3);
	padding: 14px 0;
	margin-bottom: 0;
	/* フッターからの #ja-filter-XXX アンカー遷移時、sticky なヘッダー（約 80px）の
	   裏に隠れないよう、スクロール先のマージンを確保しておく */
	scroll-margin-top: 100px;
}
body.admin-bar .ja-card-filter { scroll-margin-top: 132px; }
@media (max-width: 768px) {
	.ja-card-filter { scroll-margin-top: 80px; }
	body.admin-bar .ja-card-filter { scroll-margin-top: 126px; }
}
.ja-card-filter:last-of-type {
	border-bottom: none;
}
.ja-card-filter__head {
	display: flex;
	align-items: center;
	justify-content: flex-start;  /* 左揃えに変更 */
	gap: 8px;
	margin-bottom: 10px;
}
.ja-card-filter__icon {
	font-size: 18px;
	line-height: 1;
}
.ja-card-filter__label {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: bold;
	color: var(--ink);
}
.ja-card-filter__toggle {
	width: 100%;
	background: var(--paper);
	border: 1.5px solid var(--ink2);
	border-radius: 8px;
	padding: 8px 12px;
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink2);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background .15s;
}
.ja-card-filter__toggle:hover {
	background: var(--paper2);
}
.ja-card-filter__caret {
	font-size: 12px;
	color: var(--ink3);
	transition: transform .2s;
}
.ja-card-filter.is-open .ja-card-filter__caret {
	transform: rotate(180deg);
}
.ja-card-filter__list {
	display: none;
	margin-top: 10px;
	max-height: 220px;
	overflow-y: auto;
	scrollbar-width: thin;
	background: var(--paper);
	border: 1.5px solid var(--ink3);
	border-radius: 8px;
	padding: 6px;
}
.ja-card-filter.is-open .ja-card-filter__list {
	display: block;
}
.ja-card-filter__item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 4px;
	font-family: var(--font-display);
	font-size: 12px;
	cursor: pointer;
	color: var(--ink);
}
.ja-card-filter__item:hover {
	background: var(--paper2);
}
.ja-card-filter__item input[type="checkbox"] {
	accent-color: var(--accent);
	width: 14px;
	height: 14px;
	margin: 0;
	flex-shrink: 0;
}
.ja-card-filter__count {
	/* 絞り込み欄では件数は出さない（クリックすると見た目より少なくて混乱の元）。
	   非表示だけにして DOM は残す（JS/PHP の構造はそのまま）。 */
	display: none !important;
}
/* 「全○○」項目（一番上の絞り込み解除）*/
.ja-card-filter__item--all {
	font-weight: 700;
	border-bottom: 1px dashed var(--ink5, #d8d4cb);
	margin-bottom: 4px;
	padding-bottom: 8px;
}
.ja-card-filter__item--all.is-active {
	background: var(--paper2);
}

/* ===== エリア：県の下に市区町村を開閉表示 ===== */
.ja-pref__row {
	display: flex;
	align-items: center;
	gap: 4px;
	border-radius: 4px;
}
/* 県のチェックボックス（絞り込み選択用・開閉とは独立） */
.ja-pref__cb {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin: 0 0 0 8px;
	accent-color: var(--accent);
	cursor: pointer;
}
/* 県名ボタン＝市の開閉トグル（クリックで開く/閉じる） */
.ja-pref__toggle {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	border: none;
	background: transparent;
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
	padding: 7px 8px;
	border-radius: 4px;
	transition: background .15s;
}
.ja-pref__toggle:hover {
	background: var(--paper2);
}
.ja-pref__toggle--plain {
	cursor: pointer;
}
.ja-pref__name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ja-pref__toggle .ja-card-filter__count {
	margin-left: auto;
}
.ja-pref__caret {
	flex: 0 0 auto;
	font-size: 10px;
	color: var(--ink3);
	transition: transform .18s ease, color .15s;
}
.ja-pref.is-open .ja-pref__caret {
	transform: rotate(180deg);
	color: var(--accent);
}
.ja-pref__row.is-disabled {
	opacity: .38;
}
.ja-pref__cities {
	margin: 1px 0 5px 18px;
	padding-left: 8px;
	border-left: 2px solid var(--paper3);
	flex-direction: column;
	gap: 1px;
}
.ja-pref__cities:not([hidden]) {
	display: flex;
}
.ja-pref__cities[hidden] {
	display: none;
}
.ja-pref__city {
	font-size: 11.5px;
	padding: 5px 8px;
	color: var(--ink2);
}
.ja-pref__city .ja-card-filter__count {
	font-size: 9.5px;
}

/* ファセット：0件の選択肢はグレーアウトして選べなくする（誤解防止） */
.ja-card-filter__item.is-disabled,
.ja-simple-filter__item.is-disabled {
	opacity: .38;
	cursor: not-allowed;
}
.ja-card-filter__item.is-disabled input,
.ja-simple-filter__item.is-disabled input {
	cursor: not-allowed;
}
/* 選択チップ表示エリア */
.ja-card-filter__selected {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 10px;
	min-height: 0;
}
.ja-card-filter__selected:empty {
	display: none;
}
.ja-card-filter__chip {
	font-family: var(--font-display);
	font-size: 11px;
	background: var(--paper);
	border: 1.5px solid var(--ink);
	padding: 4px 8px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	box-shadow: 1px 1px 0 var(--ink);
	color: var(--ink);
}
.ja-card-filter__chip-x {
	background: var(--ink);
	color: var(--paper);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	line-height: 1;
	cursor: pointer;
}

/* ============ シンプルフィルター（給与・雇用形態・フリーワード）============ */
.ja-simple-filter {
	margin-bottom: 14px;
}
.ja-simple-filter__head {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: bold;
	color: var(--ink);
	margin-bottom: 6px;
	padding-bottom: 4px;
	border-bottom: 1.5px dashed var(--ink3);
}
.ja-simple-filter__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ja-simple-filter__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 12px;
	padding: 4px 6px;
	border-radius: 4px;
	cursor: pointer;
	color: var(--ink);
}
.ja-simple-filter__item:hover {
	background: var(--paper2);
}
.ja-simple-filter__item input[type="checkbox"],
.ja-simple-filter__item input[type="radio"] {
	accent-color: var(--accent);
	width: 14px;
	height: 14px;
	margin: 0;
	flex-shrink: 0;
}
.ja-simple-filter__input {
	width: 100%;
	padding: 8px 12px;
	border: 1.5px solid var(--ink2);
	border-radius: 6px;
	font-family: var(--font-display);
	font-size: 13px;
	background: var(--paper);
	color: var(--ink);
	outline: none;
}
.ja-simple-filter__input:focus {
	border-color: var(--accent);
}

/* 検索ボタン領域：
 *   ・初期位置はこだわり条件の直後（給与の上）に普通のフロー配置
 *   ・サイドバー内をスクロールして、検索ボタンが画面下端に達したら sticky で底に固定
 *   ・さらにスクロールすると、検索ボタンは底に張り付いたまま、給与・雇用形態・FW が下から出てくる
 *
 * 注意：sticky 中も背景色（var(--paper)）で下の要素を隠す。上に dash 罫線で区切り感。
 *       下の dash 罫線は sticky 中に下の要素と被って見える可能性があるので border-bottom は付けない。
 */
.ja-side__action {
	position: sticky;
	bottom: 0;
	background: var(--paper);
	padding: 14px 0 4px;
	margin: 14px 0 0;
	border-top: 1.5px dashed var(--ink3);
	z-index: 10;
}

/* サイドバーの CTA */
.ja-side__cta {
	width: 100%;
	padding: 14px;
	background: var(--accent);
	color: #fff;
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 10px;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: bold;
	box-shadow: 4px 4px 0 var(--ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: transform .15s, box-shadow .15s;
}
.ja-side__cta:hover {
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--ink);
}
.ja-side__cta::after {
	content: "→";
}
/* 検索しても0件になる条件のとき：CTA を少し弱めて気づかせる */
.ja-side__cta.is-zero {
	background: var(--ink3, #9C927E);
}
.ja-side__reset {
	display: block;
	text-align: center;
	margin-top: 10px;
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink2);
	text-decoration: underline;
}

/* ============ メイン結果エリア ============ */
.ja-main {
	min-width: 0;
}

/* 黄色サマリーパネル（傾き演出付き） */
.ja-summary {
	background: var(--sticky);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 14px;
	padding: 18px 22px;
	margin-bottom: 18px;
	position: relative;
	transform: rotate(-0.3deg);
	/* JS が scrollIntoView でジャンプしてきた時、sticky ヘッダーの後ろに隠れないよう余白 */
	scroll-margin-top: 110px;
}

/* WP 管理バーが表示中の時は + 32px ぶん下に余白を確保 */
@media (min-width: 783px) {
	body.admin-bar .ja-summary,
	body.admin-bar .ja-side {
		scroll-margin-top: 142px;  /* 110 + 32 (admin-bar) */
	}
	body.admin-bar .ja-side {
		top: 122px;  /* base 90 + admin-bar 32 */
		max-height: calc(100vh - 142px);  /* 110 + 32 */
	}
}
.ja-summary::before {
	content: "📌";
	position: absolute;
	top: -12px;
	left: 14px;
	font-size: 20px;
	transform: rotate(15deg);
}
.ja-summary__lead {
	font-family: var(--font-display);
	font-size: 15px;
	margin: 0 0 10px;
	padding-left: 20px;
}
.ja-summary__count {
	font-family: var(--font-display);
	font-size: 28px;
	color: var(--accent2);
	font-weight: bold;
	padding: 0 4px;
}
.ja-summary__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-left: 20px;
}
.ja-chip {
	font-family: var(--font-display);
	font-size: 12px;
	background: var(--paper);
	border: 1.8px solid var(--ink);
	padding: 6px 12px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow: 2px 2px 0 var(--ink);
	color: var(--ink);
	text-decoration: none;
}
.ja-chip__x {
	background: var(--ink);
	color: var(--paper);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	cursor: pointer;
}

/* ツールバー（ソート + 件数）*/
.ja-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	flex-wrap: wrap;
	gap: 10px;
}
.ja-sort {
	display: flex;
	border: 2px solid var(--ink);
	border-radius: 8px;
	overflow: hidden;
	font-family: var(--font-display);
	font-size: 13px;
	background: var(--paper);
}
.ja-sort__btn {
	padding: 9px 16px;
	border-right: 1.5px solid var(--ink);
	cursor: pointer;
	background: transparent;
	color: var(--ink);
	font-family: inherit;
	font-size: inherit;
	border-top: none;
	border-bottom: none;
	border-left: none;
}
.ja-sort__btn:last-child {
	border-right: none;
}
.ja-sort__btn.is-active {
	background: var(--ink);
	color: var(--paper);
}
.ja-sort__btn:hover:not(.is-active) {
	background: var(--paper2);
}
.ja-view {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink2);
}

/* ============ 求人カード（横長 3 カラム）============ */
.ja-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.ja-card {
	display: grid;
	grid-template-columns: 200px 1fr 150px;
	gap: 20px;
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 4px;  /* 四角でとういつ（似ている求人カードと揃える）*/
	box-shadow: 6px 6px 0 var(--ink);
	padding: 18px;
	transition: transform .15s, box-shadow .15s;
	position: relative;
}
.ja-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--ink);
}
/* JS フィルタ（特集詳細：都道府県プルダウン）で hidden 属性が付いたら確実に隠す。
   .ja-card は display:grid なので UA の [hidden]{display:none} が効かない → 明示的に上書き。 */
.ja-card[hidden] { display: none !important; }
/* 左：画像（<a> 化してクリックで詳細へ飛ぶ） */
.ja-card__img {
	/* 推奨アップロード 1200×900 (4:3) に合わせてコンテナも 4:3 固定。
	   違う比率の画像は object-fit:cover で中央クロップ。 */
	aspect-ratio: 16 / 10;
	width: 100%;
	border: var(--bd-w) solid var(--ink);
	border-radius: 4px;
	overflow: hidden;
	/* <a> 化しているので block 表示＋下線除去＋指カーソル。
	   これで画像クリック/タップ＝詳細ページへ。 */
	display: block;
	text-decoration: none;
	cursor: pointer;
}

/* PC（769px〜）：右上アイキャッチ＋右下に横3ボタン レイアウト
   ┌─────────────┬──────────┐
   │             │  画像     │  ← 右上：16:10 のまま（クロップなし）
   │   本文       ├──────────┤
   │（左カラム）   │ [☆][詳細][応募] │  ← 右下：横一列3ボタン
   └─────────────┴──────────┘
   ・grid-template-areas で DOM 順（img→body→side）を組み替え
   ・本文が縦に長くても、画像＋ボタンの右カラムと上下が揃って空白が出ない */
/* ※ スコープを .ja-list .ja-card に限定（求人検索一覧・お気に入り一覧のみ）。
   HOME オススメ求人（.job-slider--ja-card .ja-card）は別レイアウトなので
   この grid-template-areas を当てない（漏らすと崩れる）。 */
@media (min-width: 769px) {
	.ja-list .ja-card {
		/* 左本文は元の幅（約370px）をキープしたいので、右カラムを 360px 確保して
		   body(1fr) が ≒380px に収まるようにする（元の 200+gap+150 とほぼ同じ占有幅）。
		   → タイトルの折り返し位置・spec 枠幅が元のサイズ感のまま保たれる。 */
		grid-template-columns: 1fr 360px;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"body img"
			"body side";
		gap: 14px 20px;
		align-items: start;
	}
	.ja-list .ja-card__body { grid-area: body; }
	/* 右上：アイキャッチ（16:10 のまま・クロップなし）*/
	.ja-list .ja-card__img  { grid-area: img; align-self: start; }
	/* 右下：ボタンを横一列3つ・右カラム下端に揃える */
	.ja-list .ja-card__side {
		grid-area: side;
		flex-direction: row;
		gap: 8px;
		align-self: end;
	}
	.ja-list .ja-card__fav,
	.ja-list .ja-card__detail,
	.ja-list .ja-card__apply {
		flex: 1;
		padding: 11px 4px;
		font-size: 12px;
		text-align: center;
	}
}

/* スマホ：画像だけカードの上端いっぱいに広げる（カード全体のサイズは変えない）
   ・カードの padding(14px)・border(3px) はそのまま
   ・画像の独立した枠を削除
   ・負マージンで左上にシフト＋ width を拡張して、画像をカードの内縁いっぱいに */
@media (max-width: 768px) {
	.ja-card { overflow: hidden; }                  /* 角丸で画像をクリップ */
	.ja-card__img {
		border: none;
		border-radius: 0;
		margin-top: -14px;                          /* カード上 padding 相殺 */
		margin-left: -14px;                         /* カード左 padding 相殺 */
		width: calc(100% + 28px);                   /* 左右 padding 分（14×2）拡張して右端まで */
		margin-right: 0;
	}
}
.ja-card__img .ph {
	height: 100%;
	border: none;
}
.ja-card__img .ph::before,
.ja-card__img .ph::after { display: none; }
.ja-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 中央：内容 */
.ja-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: var(--font-display);
	min-width: 0;
}
.ja-card__badges {
	display: flex;
	gap: 6px;
	flex-wrap: nowrap;       /* 1行固定。カード高さは統一する */
	overflow-x: auto;        /* 末尾が見切れず、横スワイプで見える（スマホ対応） */
	overflow-y: hidden;
	min-height: 28px;        /* バッジが0個でも領域を確保して他カードと高さを揃える */
	scrollbar-width: none;   /* Firefox：スクロールバー非表示 */
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch; /* iOS：慣性スクロール */
	scroll-snap-type: x proximity;
	padding-bottom: 3px;     /* box-shadow が切れないように余白 */
}
.ja-card__badges::-webkit-scrollbar { display: none; }  /* Chrome/Safari：スクロールバー非表示 */
.ja-card__badges > .ja-badge {
	scroll-snap-align: start;
	flex-shrink: 0;          /* 縮まない＝はみ出して横スワイプで見える */
}
.ja-badge {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: bold;
	padding: 4px 10px;
	border: 1.5px solid var(--ink);
	border-radius: 4px;
	box-shadow: 1.5px 1.5px 0 var(--ink);
	white-space: nowrap;
}
.ja-badge--red    { background: var(--red);     color: #fff; }                /* 緊急・お金 */
.ja-badge--orange { background: var(--accent);  color: #fff; }                /* 雇用形態 */
.ja-badge--yellow { background: #FFE082; }                                    /* 寮・住居 */
.ja-badge--green  { background: #A5D6A7; }                                    /* 未経験・入りやすさ */
.ja-badge--blue   { background: #90CAF9; color: var(--ink); }                 /* 環境 */
.ja-badge--teal   { background: #80CBC4; color: var(--ink); }                 /* シフト・勤務形態 */
.ja-badge--purple { background: #B39DDB; color: #fff; }                       /* 業種 */
.ja-badge--pink   { background: #F8BBD0; color: var(--ink); }                 /* 女性・年齢層 */
.ja-badge--brown  { background: #FFCCBC; color: var(--ink); }                 /* 雰囲気・社風（アットホームの温かみ） */
.ja-badge--dark   { background: #455A64; color: #fff; }                       /* サポート体制 */
.ja-card__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: bold;
	line-height: 1.45;
	color: var(--ink);
	/* 2行固定でカード高さを統一（短いタイトルは空白で揃え、長いタイトルは末尾省略）*/
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(1.45em * 2);
}
.ja-card__company {
	/* 会社名は「株式会社KFS」で全求人共通 → 情報量ゼロなので非表示（2026-07-01 ユーザー指示）*/
	display: none;
}
/* 月収数字を大きく赤くハイライト */
.ja-card__spec-row--pay .ja-card__spec-vl {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px;
}
.ja-card__spec-pre {
	font-weight: normal;
	color: var(--ink2);
	font-size: 12px;
}
.ja-card__spec-num {
	color: var(--red);
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: bold;
	padding: 0 2px;
	line-height: 1;
}
.ja-card__spec-unit {
	font-weight: 700;
	color: var(--ink);
}
.ja-card__spec-sub {
	font-size: 10.5px;
	color: var(--ink2);
	font-weight: normal;
	margin-left: 4px;
}
.ja-card__meta {
	display: flex;
	column-gap: 14px;
	font-size: 13px;
	flex-wrap: nowrap;        /* 1行固定。カード間で高さがズレないように */
	overflow-x: auto;         /* 長い場合は横スクロール（タグ行と同じ仕様）*/
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;    /* Firefox */
	border-top: 1.5px dashed var(--ink2);
	padding-top: 8px;
	padding-bottom: 2px;
}
.ja-card__meta::-webkit-scrollbar { display: none; }  /* WebKit */
.ja-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	flex-shrink: 0;           /* 縮めず、はみ出したら横スクロールで対応 */
}
.ja-card__meta-num {
	color: var(--red);
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: bold;
	padding: 0 2px;
	/* うっすらパルス：拡大はほぼ気づかないレベル、グローも控えめ。
	   主役にはしないが「なんか光ってる気がする」程度の存在感に */
	display: inline-block;
	transform-origin: center;
	animation: ja-pay-pulse 3.6s ease-in-out infinite;
	will-change: opacity;
}
@keyframes ja-pay-pulse {
	0%, 100% {
		transform: scale(1);
		text-shadow: 0 0 0 rgba(214, 49, 49, 0);
	}
	50% {
		transform: scale(1.015);
		text-shadow: 0 0 6px rgba(214, 49, 49, 0.22);
	}
}
/* アクセシビリティ：アニメを抑止する設定の人にはアニメなし */
@media (prefers-reduced-motion: reduce) {
	.ja-card__meta-num {
		animation: none;
	}
}
/* 給与の括弧補足「（時給1,800円〜）」：小さく黒文字でメインの「月収38万円可」を引き立てる */
.ja-card__pay-sub {
	font-size: 11px;
	color: var(--ink);
	font-weight: normal;
	margin-left: 2px;
}
/* spec rows（月収/特典/寮費）：特集ページのカードと同じ構造で点線枠ボックス */
.ja-card__spec {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 10px;
	background: var(--paper2, #fff8ec);
	border: 1.5px dashed var(--ink2);
	border-radius: 6px;
	font-family: var(--font-display);
	font-size: 12.5px;
	line-height: 1.5;
}
.ja-card__spec-row {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 8px;
	align-items: baseline;
}
.ja-card__spec-lb {
	font-weight: bold;
	color: var(--ink);
	white-space: nowrap;
}
.ja-card__spec-vl {
	color: var(--ink);
	font-weight: 600;
	/* 1行固定。長い場合はサブ文字小さく＋末尾省略でカード高さを統一 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	display: block;
}
.ja-card__tags {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}
.ja-card__tag {
	font-family: var(--font-display);
	font-size: 10px;            /* spec rows と共存させるため小型化（旧 11px → 10px） */
	background: var(--paper2);
	border: 1px solid var(--ink3);
	padding: 2px 7px;            /* 旧 3px 9px → 2px 7px */
	border-radius: 3px;
	color: var(--ink2);
	line-height: 1.4;
}

/* 右：3 ボタン縦並び */
.ja-card__side {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}
.ja-card__fav {
	font-family: var(--font-display);
	font-size: 12px;
	border: 1.8px solid var(--ink);
	background: var(--paper);
	padding: 8px;
	border-radius: 8px;
	cursor: pointer;
	color: var(--ink);
	text-decoration: none;
	transition: background .15s, color .15s;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
}
.ja-card__fav:hover {
	background: var(--sticky);
	text-decoration: none;
	color: var(--ink);
}
/* お気に入りボタンの2状態：未登録（☆ お気に入り）/ 登録済み（★ 登録済み）。
   登録済みは「詳細を見る」のオレンジと被らないよう、黄色（sticky 色）+ 黒文字に */
.ja-card__fav-text     { display: inline; }
.ja-card__fav-text-on  { display: none; }
.ja-card__fav.is-active {
	background: var(--sticky);     /* 薄黄色 */
	border-color: var(--ink);
	color: var(--ink);
	font-weight: bold;
}
.ja-card__fav.is-active:hover {
	background: #FFE08A;            /* hover 時はやや濃い黄 */
	color: var(--ink);
}
.ja-card__fav.is-active .ja-card__fav-text    { display: none; }
.ja-card__fav.is-active .ja-card__fav-text-on { display: inline; }
.ja-card__detail {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: bold;
	background: var(--accent);
	color: #fff;
	border: var(--bd-w-thick) solid var(--ink);
	padding: 14px 0;
	border-radius: 10px;
	/* シャドウは撤去（ボタン同士のヒエラルキーを軽く） */
	box-shadow: none;
	text-decoration: none;
	transition: transform .15s;
	/* テキストと矢印を確実に中央配置（inline <a> でも flex で揃える）*/
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
}
.ja-card__detail:hover {
	transform: translate(-1px, -1px);
	color: #fff;
	text-decoration: none;
}
.ja-card__apply {
	font-family: var(--font-display);
	font-size: 12px;
	background: var(--ink);
	color: var(--paper);
	border: 2px solid var(--ink);
	padding: 9px 0;
	border-radius: 8px;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
}
.ja-card__apply:hover {
	background: var(--ink2);
	color: var(--paper);
	text-decoration: none;
}

/* ============================================================
   クリック可能なのは「アイキャッチ画像」と「3ボタン」だけ（PC・SP共通）
   ・カード全体クリック（旧：詳細リンクの ::after をカード全面に広げる
     ストレッチドリンク方式）は廃止した。
     → 本文テキストの上では通常の矢印カーソルに戻り、誤クリックも防げる。
   ・アイキャッチ ＝ <a class="ja-card__img">（cursor:pointer は別途設定済み）
   ・お気に入り(button) / 詳細を見る(a) / 応募する(a) ＝ それぞれ素のリンク・
     ボタンなので、標準で pointer になり個別に押せる。
   ・カード自体には cursor:pointer も ::after オーバーレイも付けない。
     （オーバーレイが無くなったので、タグ列のスクロールを邪魔する要素も無くなり、
      タグの z-index 前面化ハックも不要になった）
   ============================================================ */

/* ============ ページネーション ============ */
.ja-pager {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
	font-family: var(--font-display);
	flex-wrap: wrap;
}
.ja-pager .page-numbers {
	min-width: 42px;
	height: 42px;
	border: 2px solid var(--ink);
	background: var(--paper);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	border-radius: 8px;
	cursor: pointer;
	padding: 0 12px;
	box-shadow: 2px 2px 0 var(--ink);
	color: var(--ink);
	text-decoration: none;
}
.ja-pager .page-numbers:hover {
	background: var(--sticky);
	text-decoration: none;
	color: var(--ink);
}
.ja-pager .page-numbers.current {
	background: var(--ink);
	color: var(--paper);
}
.ja-pager .page-numbers.dots {
	border: none;
	box-shadow: none;
	background: transparent;
}

/* ============ 検索結果なし ============ */
.ja-empty {
	text-align: center;
	padding: 60px 20px;
	background: var(--paper2);
	border: 1.5px dashed var(--ink2);
	border-radius: 16px;
}
.ja-empty__icon {
	font-size: 48px;
	margin: 0 0 16px;
}
.ja-empty__text {
	font-family: var(--font-display);
	font-size: 16px;
	color: var(--ink);
	margin: 0 0 24px;
}
.ja-empty__cta {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink);
	background: var(--sticky);
	border: var(--bd-w) solid var(--ink);
	border-radius: 999px;
	padding: 10px 24px;
	text-decoration: none;
	box-shadow: 3px 3px 0 var(--ink);
}
.ja-empty__cta:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--ink);
	text-decoration: none;
	color: var(--ink);
}

/* ============ レスポンシブ ============ */

@media (max-width: 1024px) {
	.ja-wrap {
		grid-template-columns: 260px 1fr;
		gap: 20px;
	}
	.ja-card {
		grid-template-columns: 160px 1fr 130px;
		gap: 14px;
		padding: 14px;
	}
	.ja-card__img { aspect-ratio: 16 / 10; height: auto; }  /* タブレットは PC と同じ 4:3 */
	.ja-card__title { font-size: 16px; }
}

@media (max-width: 768px) {
	.ja-crumb { padding: 12px 16px 0; font-size: 11px; }
	.ja-head { padding: 18px 16px 20px; }
	.ja-head__title { font-size: 24px; gap: 8px; }
	.ja-head__lead { font-size: 12px; }

	/* スマホ：1 カラム化、サイドバーは「絞り込みを開く」ボタンで展開 */
	.ja-wrap {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0 16px 40px;
	}
	/* スマホでは「絞り込み検索（サイドバー）」を最上部に置く UI に。
	   サイドバーは折りたたみボタンなので、閉じてる間はコンパクトに収まる。
	   その下に結果サマリ + 求人カードリストが続く。 */
	.ja-side { order: 1; }
	.ja-main { order: 2; }

	/* スマホサイドバー：折りたたみ + 通常スクロール（追従なし）。
	   PC で使った max-height + 内部スクロールを全部解除する */
	.ja-side {
		position: static;
		padding: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		max-height: none;
		overflow: visible;
	}
	.ja-side__inner {
		position: relative;  /* 右上の × ボタンの基準 */
	}
	/* スマホ専用：右上の × 閉じるボタン。
	   絞り込み検索が「開いている間」は画面右上に position:fixed で追従させる。
	   スクロールしてもボタンが見える位置にあって、いつでも閉じられる */
	.ja-side__close {
		display: none;  /* 閉じてる時は非表示。.is-open のときだけ表示 */
		position: fixed;
		top: 76px;        /* スマホヘッダー(~64px) のすぐ下 */
		right: 14px;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--ink);  /* 視認性を上げるため濃いめの色 */
		border: var(--bd-w) solid var(--ink);
		box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18);
		font-family: var(--font-display);
		font-size: 20px;
		font-weight: bold;
		color: #fff;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		padding: 0;
		line-height: 1;
		z-index: 110;  /* フローティングCTA(95)・ヘッダー(100)より上 */
	}
	.ja-side.is-open .ja-side__close {
		display: flex;
	}
	/* 絞り込み検索の領域が画面外までスクロールしたら × も消す
	   （JS の IntersectionObserver が .is-out-of-view を付与）*/
	.ja-side.is-open.is-out-of-view .ja-side__close {
		display: none;
	}
	.ja-side__close:active {
		transform: translate(1px, 1px);
		box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
	}
	/* スマホでは検索ボタンは「こだわり条件と給与の間」に挟まる位置のまま、
	   sticky は解除（スマホはサイドバー自体が追従しないので不要）*/
	.ja-side__action {
		position: static;
		margin: 14px 0;
		padding: 16px 0;
		border-bottom: 1.5px dashed var(--ink3);
		z-index: auto;
	}
	.ja-side__title {
		display: none;  /* スマホでは「絞り込みを開く」ボタンに置き換え */
	}
	.ja-side__inner {
		display: none;
		background: var(--paper);
		border: var(--bd-w) solid var(--ink);
		border-radius: 12px;
		padding: 16px;
		box-shadow: 3px 3px 0 var(--ink);
		margin-top: 10px;
	}
	.ja-side.is-open .ja-side__inner {
		display: block;
	}
	/* 「絞り込みを開く」ボタン：気づかれず素通りされないよう、
	   サイズ大きめ＋オレンジ＋脈動アニメで目立たせる。
	   サイドバーを開いた状態（.is-open）ではアニメを止め、控えめなトーンに戻す。 */
	.ja-side__toggle {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		gap: 10px;
		padding: 18px 14px;
		font-family: var(--font-display);
		font-size: 16px;
		font-weight: bold;
		background: var(--accent);
		color: #fff;
		border: var(--bd-w-thick) solid var(--ink);
		border-radius: 12px;
		box-shadow: 5px 5px 0 var(--ink);
		cursor: pointer;
		letter-spacing: .03em;
		animation: ja-toggle-pulse 2.2s ease-in-out infinite;
	}
	.ja-side__toggle::before {
		content: "🔍";
		font-size: 20px;
		line-height: 1;
		animation: ja-toggle-shake 1.8s ease-in-out infinite;
	}
	.ja-side__toggle::after {
		content: "▼ タップして開く";
		font-size: 13px;
		transition: transform .2s;
		margin-left: 4px;
	}
	/* 開いた状態：アニメ停止＋ラベル切替＋色を控えめに */
	.ja-side.is-open .ja-side__toggle {
		background: var(--sticky);
		color: var(--ink);
		animation: none;
	}
	.ja-side.is-open .ja-side__toggle::before {
		animation: none;
	}
	.ja-side.is-open .ja-side__toggle::after {
		content: "▲ 閉じる";
	}
	@keyframes ja-toggle-pulse {
		0%, 100% {
			box-shadow: 5px 5px 0 var(--ink);
			transform: translate(0, 0);
		}
		50% {
			box-shadow: 7px 7px 0 var(--ink), 0 0 0 6px rgba(255, 139, 61, 0.25);
			transform: translate(-1px, -1px);
		}
	}
	@keyframes ja-toggle-shake {
		0%, 100% { transform: rotate(0); }
		25%      { transform: rotate(-12deg); }
		50%      { transform: rotate(0); }
		75%      { transform: rotate(12deg); }
	}
	/* アクセシビリティ：アニメを減らす設定の人にはアニメなし */
	@media (prefers-reduced-motion: reduce) {
		.ja-side__toggle,
		.ja-side__toggle::before { animation: none; }
	}

	/* サマリーパネル */
	.ja-summary { padding: 14px 16px; }
	.ja-summary__lead { font-size: 13px; padding-left: 16px; }
	.ja-summary__count { font-size: 22px; }
	.ja-summary__chips { padding-left: 16px; }
	.ja-chip { font-size: 11px; padding: 5px 10px; }

	/* ツールバー */
	.ja-toolbar { gap: 8px; }
	.ja-sort {
		font-size: 11px;
		flex-wrap: wrap;
		width: 100%;
	}
	.ja-sort__btn {
		flex: 1;
		padding: 8px 6px;
		text-align: center;
		min-width: 0;
	}
	.ja-view { font-size: 11px; width: 100%; text-align: right; }

	/* スマホカード：縦積み（画像上→内容→ボタン縦並びの右） */
	.ja-card {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 14px;
		box-shadow: 4px 4px 0 var(--ink);
	}
	/* スマホも PC と同じ 4:3 で統一（HOMEオススメ求人と同じ見え方）*/
	.ja-card__img { aspect-ratio: 16 / 10; height: auto; }
	.ja-card__body { gap: 6px; }
	.ja-card__title { font-size: 15px; }
	/* 折り返した時の行間（row-gap）は詰めて自然な改行に。
	   横方向の gap（column-gap）は 10px のまま。 */
	.ja-card__meta { font-size: 12px; column-gap: 10px; row-gap: 4px; }
	.ja-card__meta-num { font-size: 16px; }

	/* スマホでは meta 行（📍エリア / 💴月収 / 🏠寮費）を 1 行に収めたい。
	   給与の括弧補足「（時給1,800円〜）」だけは情報量を下げて非表示。
	   時給は詳細ページに行けば見える＋月収が主役なので、UX 上もこっちが正解。
	   ついでに各 meta-item は単独で改行禁止にして「月収 38万円可」が分断されないようにする。 */
	.ja-card__pay-sub { display: none; }
	.ja-card__meta-item { white-space: nowrap; }

	/* タグ列：スマホは1行横スクロールに収める（折り返すと縦が伸びて見栄え悪い）。
	   ・flex-wrap: nowrap で折り返し禁止
	   ・overflow-x: auto で横スワイプ可能
	   ・各タグ flex-shrink: 0 で潰さない
	   ・スクロールバーは見た目クリーンに非表示
	   ・margin-right の負値でカード padding を相殺、画面右端ギリギリまで流す
	     → タグがはみ出ているのが視覚的に分かり、横スクロール可能なヒントになる */
	.ja-card__tags {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		gap: 6px;
		padding-bottom: 2px;
		margin-right: -14px;
		padding-right: 14px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;       /* Firefox */
	}
	.ja-card__tags::-webkit-scrollbar { display: none; }  /* WebKit */
	.ja-card__tag {
		flex-shrink: 0;
		white-space: nowrap;
		font-size: 10px;        /* スマホでもさらに小さめ */
		padding: 2px 6px;
	}
	/* スマホでは色付きバッジ（.ja-card__badges）で情報は十分伝わるため、
	   ボタン前の小さなタグ列（.ja-card__tags）は非表示にして視覚をスッキリ。
	   タクソノミー（condition）は DB に残っており、こだわり条件フィルターは
	   通常通り機能する（2026-07-01 ユーザー指示）*/
	.ja-card__tags {
		display: none !important;
	}

	/* スマホの色付きバッジも横スクロール確保（2026-07-01 修正）
	   PC/base の設定を明示的に上書きして iOS でも確実に動くように
	   touch-action: pan-x pan-y で iOS Safari で横パンを明示的に許可 */
	.ja-card__badges {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		max-width: 100%;
		min-width: 0;
		touch-action: pan-x pan-y;
	}
	.ja-card__badges > .ja-badge {
		flex-shrink: 0 !important;
		white-space: nowrap;
	}
	/* spec rows：スマホでも見やすく */
	.ja-card__spec { font-size: 12px; padding: 7px 9px; }
	.ja-card__spec-row { grid-template-columns: 58px 1fr; gap: 6px; }
	/* 月収行はスマホでも1行横並びキープ：
	   ・grid 構造（label 58px + value 1fr）は他 spec-row と揃えて維持
	   ・value 内の flex-wrap を nowrap にして「（時給1500円〜）」が折り返さないように
	   ・数字と括弧補足のサイズを詰めて value 幅に収める */
	.ja-card__spec-row--pay .ja-card__spec-vl {
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
	}
	.ja-card__spec-row--pay .ja-card__spec-num { font-size: 15px; padding: 0 1px; }
	.ja-card__spec-row--pay .ja-card__spec-unit { font-size: 12px; }
	.ja-card__spec-row--pay .ja-card__spec-sub { font-size: 10px; margin-left: 2px; }
	.ja-card__side {
		flex-direction: row;
		gap: 8px;
	}
	.ja-card__fav,
	.ja-card__detail,
	.ja-card__apply {
		flex: 1;
		padding: 11px 0;
		font-size: 12px;
	}
	.ja-card__detail { font-size: 13px; }

	/* ページネーション */
	.ja-pager { gap: 6px; margin-top: 24px; }
	.ja-pager .page-numbers {
		min-width: 36px;
		height: 36px;
		font-size: 12px;
		padding: 0 10px;
	}
}