/*!
 * feature.css — 求人特集ページ（一覧 + 詳細）
 *
 * design-comp-feature.html 準拠。
 *   .feature-archive      → archive-feature.php（一覧）
 *   .feature-detail       → single-feature.php（詳細）
 *
 * 共通：
 *   .fd-section__title    各セクション見出し共通
 *   .fa- プレフィックス   一覧用クラス（Feature Archive）
 *   .fd- プレフィックス   詳細用クラス（Feature Detail）
 */

/* ============================================================
 * 一覧（feature-archive）
 * ============================================================ */
.feature-archive {
	background: var(--paper);
	padding-bottom: 60px;
}
.fa-crumb {
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px var(--gutter) 0;
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink2);
}
.fa-crumb a {
	color: var(--ink2);
	text-decoration: none;
}
.fa-crumb a:hover { color: var(--ink); text-decoration: underline; }
.fa-crumb__sep { margin: 0 8px; color: var(--ink3); }
.fa-crumb__cur { color: var(--ink); }

.fa-head {
	max-width: 1280px;
	margin: 0 auto;
	padding: 30px var(--gutter) 28px;
	text-align: center;
}
.fa-head__title {
	font-family: var(--font-display);
	font-size: 38px;
	line-height: 1.3;
	font-weight: bold;
	position: relative;
	padding-top: 16px;
	color: var(--ink);
}
.fa-head__title::before {
	content: "";
	display: block;
	width: 80px;
	height: 5px;
	background: var(--ink);
	margin: 0 auto 14px;
	border-radius: 3px;
}
.fa-head__en {
	display: block;
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--accent);
	margin-bottom: 6px;
	letter-spacing: .15em;
	font-weight: bold;
}
.fa-head__lead {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink2);
	margin-top: 8px;
}

/* グリッド */
.fa-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--gutter) 40px;
}
.fa-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.fa-card {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 6px 6px 0 var(--ink);
	font-family: var(--font-display);
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
	text-decoration: none;
	color: var(--ink);
}
.fa-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 9px 9px 0 var(--ink);
	text-decoration: none;
	color: var(--ink);
}
.fa-card__visual {
	aspect-ratio: 16 / 10; /* 他カード（求人カード等）と統一 */
	border-bottom: var(--bd-w-thick) solid var(--ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 20px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.fa-card__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(rgba(255,255,255,.18) 2px, transparent 2px);
	background-size: 22px 22px;
	pointer-events: none;
	z-index: 1;
}
/* アイキャッチ画像（あれば背景一面に表示） */
.fa-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	z-index: 0;
}
/* 画像あり時：ドット模様もKICKER/タイトルも非表示にして、画像をクリーンに見せる */
.fa-card__visual--with-image::before { display: none; }
.fa-card__visual--with-image .fa-card__kicker,
.fa-card__visual--with-image .fa-card__ttl { display: none; }
/* バッジは画像の上に残す（人気No.1 などの小さな目印は維持）*/
.fa-card__kicker, .fa-card__ttl, .fa-card__badge {
	position: relative;
	z-index: 2;
}
.fa-card__kicker {
	position: relative;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: .15em;
	background: rgba(0,0,0,.3);
	padding: 5px 14px;
	border-radius: 4px;
	margin-bottom: 12px;
	border: 1.5px solid rgba(255,255,255,.4);
	font-weight: bold;
}
.fa-card__ttl {
	position: relative;
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.35;
	font-weight: bold;
	text-shadow: 3px 3px 0 rgba(0,0,0,.3);
}
.fa-card__badge {
	align-self: flex-start;       /* 本文の左上に配置（アイキャッチには被せない） */
	display: inline-flex;
	align-items: center;
	background: var(--sticky);
	color: var(--ink);
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: bold;
	border: 2px solid var(--ink);
	font-family: var(--font-display);
}

/* 6 色のグラデーション */
.fa-card__visual--c1 { background: linear-gradient(135deg, #FF8B3D, #E5550D); }
.fa-card__visual--c2 { background: linear-gradient(135deg, #1976D2, #0D47A1); }
.fa-card__visual--c3 { background: linear-gradient(135deg, #43A047, #1B5E20); }
.fa-card__visual--c4 { background: linear-gradient(135deg, #E53935, #B71C1C); }
.fa-card__visual--c5 { background: linear-gradient(135deg, #7B1FA2, #4A148C); }
.fa-card__visual--c6 { background: linear-gradient(135deg, #5C5648, #26241F); }

.fa-card__body {
	padding: 22px 22px 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.fa-card__lead {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink2);
	line-height: 1.8;
	margin: 0;
}
.fa-card__stat {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--paper2);
	border: 1.8px dashed var(--ink2);
	border-radius: 10px;
	padding: 10px 16px;
	font-family: var(--font-display);
}
.fa-card__stat-lb {
	font-size: 12px;
	color: var(--ink2);
}
.fa-card__stat-vl {
	font-size: 13px;
	color: var(--ink);
}
.fa-card__stat-vl b {
	font-family: var(--font-display);
	font-size: 26px;
	color: var(--red);
	padding: 0 4px;
	font-weight: bold;
}
.fa-card__stat-more {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--accent);
	font-weight: bold;
}

/* バナー */
.fa-banner {
	max-width: 1280px;
	margin: 30px auto 0;
	padding: 0 var(--gutter);
}
.fa-banner__inner {
	background: var(--ink);
	color: var(--paper);
	padding: 24px 28px;
	border-radius: 14px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 18px;
	align-items: center;
	font-family: var(--font-display);
	border: var(--bd-w-thick) solid var(--ink);
	box-shadow: 6px 6px 0 var(--accent);
}
.fa-banner__h {
	font-family: var(--font-display);
	font-size: 22px;
	margin: 0 0 4px;
	font-weight: bold;
}
.fa-banner__p {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--paper2);
	margin: 0;
}

/* ============================================================
 * 詳細（feature-detail）
 * ============================================================ */
.feature-detail {
	background: var(--paper);
}
.fd-crumb {
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px var(--gutter) 0;
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink2);
}
.fd-crumb a {
	color: var(--ink2);
	text-decoration: none;
}
.fd-crumb a:hover { color: var(--ink); text-decoration: underline; }
.fd-crumb__sep { margin: 0 8px; color: var(--ink3); }
.fd-crumb__cur { color: var(--ink); }

/* セクション共通見出し */
.fd-section__title {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	margin: 0 0 12px;
	line-height: 1.3;
	position: relative;
	padding-top: 14px;
	color: var(--ink);
}
.fd-section__title::before {
	content: "";
	display: block;
	width: 70px;
	height: 5px;
	background: var(--ink);
	margin: 0 auto 12px;
	border-radius: 3px;
}
.fd-section__en {
	display: block;
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--accent);
	margin-bottom: 4px;
	letter-spacing: .15em;
	font-weight: bold;
}
.fd-section__sub {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink2);
	text-align: center;
	margin: 0 0 32px;
}

/* ① ヒーロー */
.fd-hero {
	position: relative;
	padding: 60px 22px 50px;
	text-align: center;
	color: #fff;
	background: linear-gradient(135deg, #FF8B3D 0%, #E5550D 100%);
	border-bottom: var(--bd-w-thick) solid var(--ink);
	overflow: hidden;
	margin-top: 24px;
}
.fd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.18) 2.5px, transparent 2.5px);
	background-size: 28px 28px;
	pointer-events: none;
}
.fd-hero--c1 { background: linear-gradient(135deg, #FF8B3D 0%, #E5550D 100%); }
.fd-hero--c2 { background: linear-gradient(135deg, #1976D2 0%, #0D47A1 100%); }
.fd-hero--c3 { background: linear-gradient(135deg, #43A047 0%, #1B5E20 100%); }
.fd-hero--c4 { background: linear-gradient(135deg, #E53935 0%, #B71C1C 100%); }
.fd-hero--c5 { background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%); }
.fd-hero--c6 { background: linear-gradient(135deg, #5C5648 0%, #26241F 100%); }

.fd-hero__kicker {
	position: relative;
	display: inline-block;
	background: rgba(0,0,0,.3);
	padding: 7px 22px;
	border-radius: 6px;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: .15em;
	margin-bottom: 18px;
	border: 1.8px solid rgba(255,255,255,.5);
	font-weight: bold;
}
/* ヒーロー内：タイトルのすぐ上に置くアイキャッチ（求人特集の表紙） */
.fd-hero__visual {
	position: relative;
	max-width: 540px;
	margin: 0 auto 22px;
}
.fd-hero__visual-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: var(--bd-w-thick) solid var(--ink);
	background: #fff;
}
@media (max-width: 768px) {
	.fd-hero__visual { max-width: 100%; }
}
.fd-hero__title {
	position: relative;
	font-family: var(--font-display);
	font-size: 52px;
	font-weight: bold;
	line-height: 1.35;
	text-shadow: 4px 4px 0 rgba(0,0,0,.3);
	margin: 0 0 18px;
	color: #fff;
}
.fd-hero__title em {
	font-style: normal;
	background: var(--sticky);
	color: var(--ink);
	padding: 2px 14px;
	border-radius: 8px;
	border: var(--bd-w-thick) solid var(--ink);
	display: inline-block;
	transform: rotate(-2deg);
	margin: 0 4px;
	box-shadow: 3px 3px 0 rgba(0,0,0,.35);
	text-shadow: none;
}
.fd-hero__lead {
	position: relative;
	font-family: var(--font-display);
	font-size: 15px;
	max-width: 680px;
	margin: 0 auto;
	line-height: 1.8;
}
.fd-hero__stats {
	position: relative;
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-top: 32px;
	flex-wrap: wrap;
}
.fd-stat-card {
	background: var(--paper);
	color: var(--ink);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 4px;
	padding: 16px 28px;
	box-shadow: 4px 4px 0 rgba(0,0,0,.35);
	font-family: var(--font-display);
	text-align: center;
	min-width: 160px;
}
.fd-stat-card__lb {
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--ink2);
	margin-bottom: 2px;
}
.fd-stat-card__vl {
	font-family: var(--font-display);
	font-size: 42px;
	color: var(--accent2);
	font-weight: bold;
	line-height: 1;
	letter-spacing: -.02em;
}
.fd-stat-card__sub {
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--ink2);
	margin-top: 4px;
}

/* ② WHY */
.fd-why {
	padding: 60px var(--gutter) 50px;
	background: var(--paper2);
	border-bottom: 1.5px solid var(--ink2);
}
.fd-why__inner {
	max-width: 1180px;
	margin: 0 auto;
}
.fd-why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 32px;
}
.fd-why-card {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 16px;
	padding: 26px 22px;
	box-shadow: 5px 5px 0 var(--ink);
	font-family: var(--font-display);
	text-align: center;
	position: relative;
}
.fd-why-card:nth-child(1) { transform: rotate(-.5deg); }
.fd-why-card:nth-child(3) { transform: rotate(.5deg); }
.fd-why-card__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: #fff;
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 50%;
	width: 52px;
	height: 52px;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 14px;
	box-shadow: 3px 3px 0 var(--ink);
}
.fd-why-card__h {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 10px;
	line-height: 1.4;
	color: var(--ink);
}
.fd-why-card__p {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink2);
	line-height: 1.8;
	margin: 0;
}

/* ③ JOBS */
.fd-jobs {
	padding: 60px var(--gutter) 50px;
	border-bottom: 1.5px solid var(--ink2);
}
.fd-jobs__inner {
	max-width: 1180px;
	margin: 0 auto;
}
.fd-job-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 8px;
}
.fd-job {
	display: grid;
	grid-template-columns: 180px 1fr 140px;
	gap: 18px;
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 4px;
	box-shadow: 5px 5px 0 var(--ink);
	padding: 16px;
	transition: transform .15s, box-shadow .15s;
}
.fd-job:hover {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 var(--ink);
}
/* JS フィルタで非表示にされたカードを確実に隠す。
   .fd-job 自体が display: grid を持っているため、HTML5 の [hidden] 属性
   （ブラウザ既定 display: none）の特異度が負けて見えてしまうのを防ぐ */
.fd-job[hidden] {
	display: none !important;
}
.fd-job__img {
	/* 推奨 4:3 に統一 */
	aspect-ratio: 16 / 10;
	width: 100%;
	border: var(--bd-w) solid var(--ink);
	border-radius: 4px;
	overflow: hidden;
}
.fd-job__img .ph {
	height: 100%;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.fd-job__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fd-job__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: var(--font-display);
	min-width: 0;
}
.fd-job__company {
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--ink2);
}
.fd-job__badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.fd-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;
	background: var(--paper);
	color: var(--ink);
}
.fd-badge--red    { background: var(--red);     color: #fff; }
.fd-badge--orange { background: var(--accent);  color: #fff; }
.fd-badge--yellow { background: #FFE082; }
.fd-badge--green  { background: #A5D6A7; }
/* badge1/2/3：求人メタの badge1_label/2_label/3_label と対応。
   1=赤（急募・高待遇など最重要）、2=黄（条件系）、3=緑（雰囲気系） */
.fd-badge--1 { background: var(--red);    color: #fff; }
.fd-badge--2 { background: #FFE082;       color: var(--ink); }
.fd-badge--3 { background: #A5D6A7;       color: var(--ink); }
.fd-job__title {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: bold;
	line-height: 1.45;
	margin: 0;
	color: var(--ink);
}
.fd-job__meta {
	display: flex;
	gap: 14px;
	font-family: var(--font-display);
	font-size: 13px;
	flex-wrap: wrap;
	border-top: 1.5px dashed var(--ink2);
	padding-top: 8px;
	color: var(--ink);
}
/* スペック行：月収・特典・寮費の3項目を縦並び。ラベル+値の左右レイアウト */
.fd-job__spec {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 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;
}
.fd-job__spec-row {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 8px;
	align-items: baseline;
}
.fd-job__spec-lb {
	font-weight: bold;
	color: var(--ink);
	white-space: nowrap;
}
.fd-job__spec-vl {
	color: var(--ink);
	font-weight: 600;
	word-break: break-word;
}
/* 月収 spec row：数字を大きく赤くハイライト（求人検索一覧と同じスタイル） */
.fd-job__spec-row--pay .fd-job__spec-vl {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px;
}
.fd-job__spec-pre {
	font-weight: normal;
	color: var(--ink2);
	font-size: 12px;
}
.fd-job__spec-num {
	color: var(--red);
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: bold;
	padding: 0 2px;
	line-height: 1;
}
.fd-job__spec-unit {
	font-weight: 700;
	color: var(--ink);
}
.fd-job__spec-sub {
	font-size: 10.5px;
	color: var(--ink2);
	font-weight: normal;
	margin-left: 4px;
}
.fd-job__side {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}
.fd-job__fav {
	font-family: var(--font-display);
	font-size: 12px;
	border: 1.8px solid var(--ink);
	padding: 8px;
	text-align: center;
	border-radius: 8px;
	color: var(--ink);
	background: var(--paper);
}
.fd-job__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;
	text-align: center;
	border-radius: 10px;
	text-decoration: none;
	transition: transform .15s;
}
.fd-job__detail:hover {
	transform: translate(-1px, -1px);
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   求人特集カード（PC 769px〜）：右上アイキャッチ＋右下ボタン横並び
   （求人検索一覧カードと同じレイアウト思想）
   ・grid-template-areas で 左:本文 / 右上:画像(16:10) / 右下:ボタン
   ・左本文は元幅キープのため右カラムを 320px 確保
   ・詳細度 .fd-job .fd-job__side で後段の column 指定に勝たせる
   ============================================================ */
@media (min-width: 769px) {
	.fd-job {
		grid-template-columns: 1fr 320px;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"body img"
			"body side";
		gap: 14px 18px;
		align-items: start;
	}
	.fd-job .fd-job__body { grid-area: body; }
	.fd-job .fd-job__img  { grid-area: img; align-self: start; }
	.fd-job .fd-job__side {
		grid-area: side;
		flex-direction: row;
		gap: 8px;
		align-self: end;
	}
	.fd-job .fd-job__fav,
	.fd-job .fd-job__detail {
		flex: 1;
		text-align: center;
		justify-content: center;
	}
}

/* ============================================================
   求人特集カードも全体クリックで詳細ページへ（PC・SP共通）
   ・.fd-job に position: relative を付与（元々無いので必須）
   ・詳細リンクの ::after をカード全面に拡張（ストレッチドリンク）
   ・お気に入りボタンは z-index で前面に出して個別に押せる
   ============================================================ */
.fd-job {
	position: relative;
	cursor: pointer;
}
.fd-job__detail::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.fd-job__fav {
	position: relative;
	z-index: 2;
}

.fd-jobs__more {
	text-align: center;
	margin-top: 30px;
}
.fd-jobs__more .btn {
	padding: 16px 36px;
	font-size: 14px;
}

/* ============================================================
 *  都道府県プルダウン（特集内 JS フィルタ・リロード無し）
 *    ・ラベル + select ボックスのインライン配置
 *    ・select は OS 標準矢印を消し、独自の ▾ を absolute で重ねる
 *    ・タブと違い、県が増えてもごちゃつかない
 * ============================================================ */
.fd-pref-filter {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 22px;
	padding: 14px 16px;
	background: var(--paper);
	border: 1.5px solid var(--ink);
	border-radius: 10px;
	box-shadow: 3px 3px 0 var(--ink);
}
.fd-pref-filter__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: bold;
	color: var(--ink);
}
.fd-pref-filter__icon { font-size: 16px; }
.fd-pref-filter__select-wrap {
	position: relative;
	flex: 1;
	min-width: 220px;
	max-width: 380px;
}
.fd-pref-filter__select {
	width: 100%;
	padding: 10px 36px 10px 14px;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	background: var(--paper2);
	border: 1.5px solid var(--ink);
	border-radius: 8px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: background .12s;
}
.fd-pref-filter__select:hover { background: #fff; }
.fd-pref-filter__select:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}
.fd-pref-filter__caret {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink);
	pointer-events: none;
	font-size: 14px;
	font-weight: bold;
}

/* ============================================================
 *  「もっと見る」展開ボタン（JS で +10 ずつ追加表示）
 * ============================================================ */
.fd-more {
	text-align: center;
	margin-top: 28px;
}
.fd-more__btn {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: bold;
	padding: 14px 32px;
	color: var(--ink);
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 10px;
	box-shadow: 4px 4px 0 var(--ink);
	cursor: pointer;
	transition: transform .12s, box-shadow .12s, background .12s;
}
.fd-more__btn:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--ink);
	background: var(--accent);
	color: #fff;
}

/* ============================================================
 *  該当0件メッセージ（県絞り込みで結果が無くなった時に JS が表示）
 * ============================================================ */
.fd-no-result {
	margin: 20px 0;
	padding: 22px 18px;
	font-family: var(--font-display);
	font-size: 14px;
	text-align: center;
	color: var(--ink);
	background: var(--paper2);
	border: 1.5px dashed var(--ink2);
	border-radius: 10px;
}
.fd-no-result__icon { font-size: 22px; display: block; margin-bottom: 6px; }
.fd-no-result__reset {
	display: inline-block;
	margin-left: 8px;
	padding: 6px 14px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: bold;
	color: var(--ink);
	background: var(--paper);
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	cursor: pointer;
}
.fd-no-result__reset:hover { background: var(--accent); color: #fff; }

/* ④ VOICES */
.fd-voices {
	padding: 60px var(--gutter) 50px;
	background: var(--paper2);
	border-bottom: 1.5px solid var(--ink2);
}
.fd-voices__inner {
	max-width: 1180px;
	margin: 0 auto;
}
.fd-voice-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 32px;
}
.fd-voice-card {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 14px;
	padding: 22px;
	font-family: var(--font-display);
	box-shadow: 5px 5px 0 var(--ink);
	position: relative;
}
.fd-voice-card::before {
	content: "\201C";
	position: absolute;
	top: -8px;
	left: 16px;
	font-size: 60px;
	color: var(--accent);
	font-family: Georgia, serif;
	line-height: 1;
}
.fd-voice-card__head {
	display: flex;
	justify-content: space-between;
	align-items: start;
	margin-bottom: 10px;
	padding-left: 36px;
}
.fd-voice-card__person {
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink2);
}
.fd-voice-card__stars {
	color: #FFB300;
	font-size: 16px;
	white-space: nowrap;
}
.fd-voice-card__title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 12px;
	padding-left: 36px;
	color: var(--ink);
}
.fd-voice-card__body {
	background: var(--paper2);
	border: 1.5px dashed var(--ink2);
	padding: 14px 16px;
	border-radius: 8px;
	color: var(--ink2);
	font-family: var(--font-display);
	font-size: 13px;
	line-height: 1.8;
	min-height: 80px;
}

/* ⑤ COLUMNS */
.fd-cols {
	padding: 60px var(--gutter) 50px;
	border-bottom: 1.5px solid var(--ink2);
}
.fd-cols__inner {
	max-width: 1180px;
	margin: 0 auto;
}
.fd-col-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 32px;
}
.fd-col-mini {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 14px;
	overflow: hidden;
	font-family: var(--font-display);
	box-shadow: 4px 4px 0 var(--ink);
	transition: transform .15s, box-shadow .15s;
	text-decoration: none;
	color: var(--ink);
}
.fd-col-mini:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--ink);
	text-decoration: none;
	color: var(--ink);
}
.fd-col-mini__img {
	position: relative;
	aspect-ratio: 16 / 10;   /* 関連コラムのアイキャッチを 16:10 に統一 */
	border-bottom: var(--bd-w) solid var(--ink);
	background: var(--paper2);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* 実コラム投稿のアイキャッチを枠いっぱいに表示 */
.fd-col-mini__imgel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fd-col-mini__img .ph {
	height: 100%;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.fd-col-mini__body {
	padding: 14px 16px;
}
.fd-col-mini__cat {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: bold;
	background: var(--ink);
	color: var(--paper);
	padding: 3px 9px;
	border-radius: 4px;
	display: inline-block;
	margin-bottom: 8px;
}
.fd-col-mini__ttl {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: bold;
	line-height: 1.5;
	color: var(--ink);
}

/* ⑥ CTA */
.fd-cta {
	padding: 60px var(--gutter);
	background: linear-gradient(180deg, #FFF1B8, #FFD25C);
	text-align: center;
	border-bottom: var(--bd-w-thick) solid var(--ink);
	position: relative;
}
.fd-cta__tag {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%) rotate(-2deg);
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: bold;
	padding: 5px 18px;
	border-radius: 4px;
	letter-spacing: .1em;
}
.fd-cta__title {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: bold;
	margin: 10px 0 10px;
	color: var(--ink);
}
.fd-cta__lead {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink2);
	margin: 0 0 24px;
}
.fd-cta__row {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.fd-cta__row .btn {
	padding: 16px 30px;
	font-size: 15px;
	box-shadow: 4px 4px 0 var(--ink);
}

/* ============================================================
 * レスポンシブ
 * ============================================================ */
@media (max-width: 1024px) {
	.fa-card__ttl { font-size: 24px; }
	.fd-hero__title { font-size: 38px; }
	.fa-banner__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
}

@media (max-width: 768px) {
	/* 一覧：1 列に */
	.fa-crumb { padding: 12px 16px 0; font-size: 11px; }
	.fa-head { padding: 22px 16px 18px; }
	.fa-head__title { font-size: 28px; padding-top: 12px; }
	.fa-head__title::before { width: 60px; height: 4px; margin-bottom: 10px; }
	.fa-head__en { font-size: 12px; }
	.fa-head__lead { font-size: 12px; }
	.fa-wrap { padding: 0 16px 30px; }
	.fa-grid { grid-template-columns: 1fr; gap: 18px; }
	.fa-card__visual { /* aspect-ratio: 16/10 をそのまま継承 */ }
	.fa-card__ttl { font-size: 22px; }
	.fa-card__kicker { font-size: 11px; padding: 4px 10px; }
	.fa-card__body { padding: 16px 16px 16px; }
	.fa-banner { padding: 0 16px; }
	.fa-banner__inner { padding: 18px 18px; gap: 14px; }
	.fa-banner__h { font-size: 18px; }

	/* 詳細：縦並びに */
	.fd-crumb { padding: 12px 16px 0; font-size: 11px; }
	.fd-hero { padding: 40px 18px 36px; }
	.fd-hero__title { font-size: 30px; }
	.fd-hero__lead { font-size: 13px; }
	/* 3 つの数字カードは必ず横 1 列に（2+1 のいびつな折り返しを防ぐ） */
	.fd-hero__stats { gap: 8px; margin-top: 24px; flex-wrap: nowrap; }
	.fd-stat-card { flex: 1 1 0; min-width: 0; padding: 12px 6px; }
	.fd-stat-card__lb { font-size: 10px; letter-spacing: -.02em; }
	.fd-stat-card__vl { font-size: 26px; }
	.fd-stat-card__sub { font-size: 10px; }

	.fd-section__title { font-size: 22px; padding-top: 10px; }
	.fd-section__title::before { width: 56px; height: 4px; margin-bottom: 10px; }
	.fd-section__en { font-size: 11px; }
	.fd-section__sub { font-size: 12px; margin-bottom: 22px; }

	.fd-why,
	.fd-jobs,
	.fd-voices,
	.fd-cols { padding: 40px 16px 36px; }
	.fd-why__grid { grid-template-columns: 1fr; gap: 14px; }
	.fd-why-card { padding: 22px 18px; }
	.fd-why-card:nth-child(1),
	.fd-why-card:nth-child(3) { transform: none; }
	.fd-why-card__num { width: 44px; height: 44px; font-size: 18px; }

	.fd-job { grid-template-columns: 1fr; gap: 10px; padding: 14px; overflow: hidden; }
	/* 画像はカード上端いっぱい（ja-card と同じ） */
	.fd-job__img {
		aspect-ratio: 16 / 10;
		height: auto;
		border: none;
		border-radius: 0;
		margin-top: -14px;
		margin-left: -14px;
		width: calc(100% + 28px);
		margin-right: 0;
	}
	.fd-job__title { font-size: 15px; }
	.fd-job__meta { font-size: 12px; }
	.fd-job__spec { font-size: 12px; padding: 7px 9px; }
	.fd-job__spec-row { grid-template-columns: 58px 1fr; gap: 6px; }
	.fd-job__side { flex-direction: row; gap: 8px; }
	.fd-job__fav,
	.fd-job__detail { flex: 1; padding: 11px 0; font-size: 12px; }

	/* 都道府県プルダウン：スマホは縦並びで select を全幅に */
	.fd-pref-filter {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 12px 14px;
		margin-bottom: 18px;
	}
	.fd-pref-filter__label { font-size: 13px; }
	.fd-pref-filter__select-wrap { max-width: none; }
	.fd-pref-filter__select { font-size: 14px; padding: 11px 36px 11px 12px; }

	/* もっと見るボタン：スマホは横幅を広めに */
	.fd-more__btn { padding: 13px 28px; font-size: 13px; width: 100%; max-width: 320px; }

	.fd-voice-grid { grid-template-columns: 1fr; gap: 14px; }
	.fd-voice-card { padding: 20px 18px; }
	.fd-voice-card__title { font-size: 15px; }

	/* スマホ：本文の薄いグレー（var(--ink2)）はコントラスト不足で見にくいので、
	   読みやすく濃インクに切り替え。本文・WHY 説明・サブテキストを対象に。 */
	.fd-why-card__p,
	.fd-voice-card__body,
	.fa-card__lead {
		color: var(--ink);
	}
	/* セクションのサブ説明は補助テキストなので、--ink2 → --ink の中間（少し濃く）*/
	.fd-section__sub {
		color: var(--ink);
	}

	.fd-col-grid { grid-template-columns: 1fr; gap: 14px; }

	.fd-cta { padding: 50px 16px 40px; }
	.fd-cta__title { font-size: 22px; }
	.fd-cta__row { flex-direction: column; gap: 10px; }
	.fd-cta__row .btn { padding: 14px 20px; font-size: 14px; width: 100%; }
}

/* ============================================================
 *  Key Visual：ヒーロー直下のアイキャッチ画像帯
 *    アイキャッチが設定されている特集のみ表示。
 * ============================================================ */
.fd-keyvisual {
	padding: 0;
	background: var(--paper, #f8f4ec);
	border-bottom: var(--bd-w-thick) solid var(--ink);
}
.fd-keyvisual__inner {
	max-width: 720px;            /* 求人詳細のアイキャッチ画像と同サイズに統一 */
	margin: 0 auto;
	padding: 32px 20px;
}
.fd-keyvisual__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;       /* 求人カード・コラム・特集カードと統一 */
	object-fit: cover;
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 0;            /* 四角（角丸なし） */
	background: #fff;
}
@media (max-width: 768px) {
	.fd-keyvisual__inner { padding: 20px 14px; max-width: 100%; }
}

/* ============================================================
 *  ページネーション（fd-pagination）2026-06-30 追加
 *  ・「もっと見る」JS 展開廃止後の新ナビ
 *  ・10件/ページ、前へ／次へ + ページ番号（先頭・現在±2・末尾）
 * ============================================================ */
.fd-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
	margin: 30px 0 10px;
	font-family: var(--font-display);
	font-size: 14px;
}
.fd-pagination__btn,
.fd-pagination__num,
.fd-pagination__current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 8px 14px;
	border: 1.5px solid var(--ink);
	border-radius: 6px;
	text-decoration: none;
	color: var(--ink);
	background: var(--paper);
	font-weight: bold;
	line-height: 1.2;
	transition: background .12s, color .12s;
}
.fd-pagination__btn:hover,
.fd-pagination__num:hover {
	background: var(--accent);
	color: #fff;
	text-decoration: none;
}
.fd-pagination__current {
	background: var(--ink);
	color: #fff;
	cursor: default;
}
.fd-pagination__gap {
	padding: 0 4px;
	color: var(--ink2);
}
.fd-pagination__btn--prev,
.fd-pagination__btn--next {
	padding: 8px 16px;
}
.fd-pagination__pages {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
@media (max-width: 640px) {
	.fd-pagination { font-size: 13px; gap: 6px; }
	.fd-pagination__btn,
	.fd-pagination__num,
	.fd-pagination__current { min-width: 36px; padding: 6px 10px; }
}