/*!
 * single-job.css — 求人詳細ページ
 *
 * design-comp-job.html セクション B 準拠。
 *
 *   .jd-crumb        パンくず
 *   .jd-wrap         本体ラッパ（max-width 1180px）
 *   .jd-hero         ヒーロー（バッジ+タイトル+メタ）
 *   .jd-gallery      ギャラリー（メイン1+サブ4、3カラム×2行）
 *   .jd-spec         スペックハイライト＋募集要項テーブル
 *   .jd-section      セクション共通（仕事内容、寮、1日の流れ、関連求人）
 *   .jd-apply        応募 CTA（黄色グラデ）
 */

.job-detail {
	background: var(--paper);
	padding-bottom: 64px;
}

/* ─── 文字化け根治：スマホ（≤768px）だけ Google Fonts の日本語主張を無効化 ───
   原因：Google Fonts は Yusei Magic / Zen Kaku Gothic を 600 個以上の小さい subset に分割し、
        全 CJK 漢字を unicode-range で「俺が描く」と宣言。iOS WebKit が一部 subset の
        描画に失敗 → ?? 化け。一つ直すと別字でまた化けるイタチごっこ。
   方針：スマホは @font-face を上書きして Yusei Magic / Zen Kaku Gothic を ASCII 限定。
        → 日本語は最初から Web Font 経由しない → 必ず Hiragino で描画される。
        → 化けゼロ。デザインフォントはタイトル英字部分（"WORK CONTENT" 等）のみ残る。
   PC は元のまま：Web Font 含む全フォントが普通に動く＆化けない。 */
@media (max-width: 768px) {
	@font-face {
		font-family: "Yusei Magic";
		src: local("Yusei Magic");
		unicode-range: U+0020-007F;
	}
	@font-face {
		font-family: "Zen Kaku Gothic New";
		src: local("Zen Kaku Gothic New");
		unicode-range: U+0020-007F;
	}
}

/* ─── 文字化け対策：本文系コンテナだけ Hiragino を直接指定（@font-face 上書きはしない）───
   ユーザー要件：タイトル/見出し/CTA は Yusei Magic（デザインフォント）を維持。
                本文の 費・送・等の漢字が iOS で化ける問題だけ防ぎたい。
   方針：Web Font はそのまま生かす（タイトル/CTA で日本語も Yusei Magic で描画される）。
        本文系コンテナ（.jd-row__v / .jd-section__body の本文文字 / .jd-content）に対してだけ
        PostScript 名「HiraginoSans-W3」を先頭に明示。これで iOS は確実に Hiragino を選ぶ。
   ＊ font-family に「Yusei Magic」を含めなければ unicode-range の影響も受けない。 */
/* 本文系コンテナを倍掛けクラスで特異度 0,3,0 にして、いかなる他ルールよりも勝つ。
   ★ font-family の頭に Hiragino を明示 → font-family チェーンに Zen Kaku Gothic が
     一切無いので、unicode-range hijack も発生せず化けない。 */
.job-detail .jd-row__v.jd-row__v,
.job-detail .jd-row__v.jd-row__v *:not([aria-hidden="true"]):not(strong):not(em):not(b):not(i),
.job-detail .jd-section__body.jd-section__body,
.job-detail .jd-section__body.jd-section__body p,
.job-detail .jd-section__body.jd-section__body li,
.job-detail .jd-section__body.jd-section__body td,
.job-detail .jd-section__body.jd-section__body th,
.job-detail .jd-section__body.jd-section__body dd,
.job-detail .jd-section__body.jd-section__body dt,
.job-detail .jd-section__body.jd-section__body strong,
.job-detail .jd-section__body.jd-section__body em,
.job-detail .jd-section__body.jd-section__body a,
.job-detail .jd-section__body.jd-section__body span,
.job-detail .jd-dorm-item__note.jd-dorm-item__note,
.job-detail .jd-dorm-item__text.jd-dorm-item__text,
.job-detail .jd-dorm-item__vl.jd-dorm-item__vl,
.job-detail .jd-dorm-item__lb.jd-dorm-item__lb,
.job-detail .jd-company__intro.jd-company__intro,
.job-detail .jd-company__v.jd-company__v,
.job-detail .jd-company__v.jd-company__v *:not([aria-hidden="true"]),
.job-detail .jd-company__note.jd-company__note,
.job-detail .jd-company__merits.jd-company__merits,
.job-detail .jd-company__merits.jd-company__merits *:not([aria-hidden="true"]) {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "HiraginoSans-W3", -apple-system, BlinkMacSystemFont, "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif !important;
}
/* strong/em/b/i は親が body 系の場合のみ Hiragino で上書き
   ＊ デザイン側にも strong は出てくる（CTA等）ので親で限定する。 */
.job-detail .jd-row__v.jd-row__v strong,
.job-detail .jd-row__v.jd-row__v em,
.job-detail .jd-row__v.jd-row__v b,
.job-detail .jd-row__v.jd-row__v i {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "HiraginoSans-W3", -apple-system, BlinkMacSystemFont, "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif !important;
}

/* ❌ 「.job-detail 全部 Hiragino」の wildcard は廃止（タイトル/CTAも巻き込んでしまうため）。
   ★ 代わりに上の「本文系コンテナだけ」セレクタで Hiragino を明示する方式に変更。 */
.job-detail {
	-webkit-text-size-adjust: 100%;
}
/* デザインフォントを残す要素（タイトル/見出し/英字ラベル/バッジ/CTA/大きな金額）。
   ※ 同じクラスを 2 回書く（.x.x）ことで特異度を 0,3,0 に底上げし、上の wildcard (0,2,0) を確実に上回る。 */
.job-detail .jd-title.jd-title,
.job-detail .jd-title.jd-title *:not([aria-hidden="true"]),
.job-detail .jd-section__title.jd-section__title,
.job-detail .jd-section__title.jd-section__title *:not([aria-hidden="true"]),
.job-detail .jd-section__en.jd-section__en,
.job-detail .jd-badge.jd-badge,
.job-detail .jd-badge.jd-badge *:not([aria-hidden="true"]),
/* 応募セクション一帯（タイトル/タグ/各CTA ボタン全部デザインフォント） */
.job-detail .jd-apply.jd-apply,
.job-detail .jd-apply.jd-apply *:not([aria-hidden="true"]),
/* 単独 .btn 系（応募する/LINE 相談/電話で相談 など。.jd-apply 外でも保険を掛けて拾う） */
.job-detail .btn.btn,
.job-detail .btn.btn *:not([aria-hidden="true"]),
/* スペック大きな金額 */
.job-detail .jd-spec__val.jd-spec__val,
.job-detail .jd-spec__val.jd-spec__val *:not([aria-hidden="true"]),
.job-detail .jd-spec__lbl.jd-spec__lbl,
.job-detail .jd-spec__pre.jd-spec__pre,
.job-detail .jd-spec__sub.jd-spec__sub,
.job-detail .jd-rel-card__num.jd-rel-card__num,
.job-detail .jd-rel-card__pay.jd-rel-card__pay,
.job-detail .jd-rel-card__pre.jd-rel-card__pre,
.job-detail .jd-rel-card__cta.jd-rel-card__cta,
.job-detail .jd-search-bnr__h.jd-search-bnr__h,
.job-detail .jd-crumb.jd-crumb,
.job-detail .jd-crumb.jd-crumb *:not([aria-hidden="true"]) {
	font-family: var(--font-display) !important;
}

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

/* ============ 本体ラッパ ============ */
.jd-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px var(--gutter) 0;
}

/* ============ ① ヒーロー ============ */
.jd-hero {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 4px;  /* 求人カード等と揃えて四角でとういつ */
	padding: 28px 32px;
	box-shadow: 6px 6px 0 var(--ink);
	margin-bottom: 22px;
}
.jd-badges {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
/* スマホ：バッジは折り返さず横スワイプで全件見れる
   ・PC は flex-wrap: wrap のまま（画面が広いので折り返しでもOK）
   ・mask-image は iOS Safari で touch を吸って scroll できないバグがあるので削除
     （2026-07-01 修正）*/
@media (max-width: 768px) {
	.jd-badges {
		flex-wrap: nowrap !important;
		overflow-x: auto !important;
		overflow-y: hidden;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		/* iOS 対策：親幅を明示 + touch-action で横パンを許可 */
		max-width: 100%;
		min-width: 0;
		touch-action: pan-x pan-y;
	}
	.jd-badges::-webkit-scrollbar { display: none; }
	.jd-badges > .jd-badge {
		flex-shrink: 0 !important;
		white-space: nowrap;
	}
}
.jd-badge {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: bold;
	padding: 6px 14px;
	border: 2px solid var(--ink);
	border-radius: 6px;
	box-shadow: 2px 2px 0 var(--ink);
	background: var(--paper);
	color: var(--ink);
	white-space: nowrap;
}
.jd-badge--red    { background: var(--red);     color: #fff; }                /* 緊急・お金 */
.jd-badge--orange { background: var(--accent);  color: #fff; }                /* 雇用形態 */
.jd-badge--yellow { background: #FFE082; }                                    /* 寮・住居 */
.jd-badge--green  { background: #A5D6A7; }                                    /* 未経験・入りやすさ */
.jd-badge--blue   { background: #90CAF9; color: var(--ink); }                 /* 環境 */
.jd-badge--teal   { background: #80CBC4; color: var(--ink); }                 /* シフト・勤務形態 */
.jd-badge--purple { background: #B39DDB; color: #fff; }                       /* 業種 */
.jd-badge--pink   { background: #F8BBD0; color: var(--ink); }                 /* 女性・年齢層 */
.jd-badge--brown  { background: #BCAAA4; color: var(--ink); }                 /* 雰囲気・社風 */
.jd-badge--dark   { background: #455A64; color: #fff; }                       /* サポート体制 */

.jd-title {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: bold;
	line-height: 1.4;
	margin: 0 0 10px;
	color: var(--ink);
}
.jd-title__mk {
	/* インライン要素の背景は font-size 基準でしか描画されないため、60-60 だと
	   実際の見た目は薄い下線になってしまう（line-height 比ではない）。
	   40-40 にして文字の下半分を黄色で塗り、本来の蛍光ペン感を出す。 */
	background: linear-gradient(transparent 40%, var(--sticky) 40%);
	padding: 0 4px;
}
.jd-meta {
	display: flex;
	gap: 18px;
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink2);
	flex-wrap: wrap;
}
.jd-meta span {
	display: flex;
	align-items: center;
	gap: 5px;
}

/* ============ ② ギャラリー（5枚） ============
 * 3 カラム × 2 行 グリッド。1 枚目はメインで row-span:2 + col-span:1
 * 残り 4 枚は 1 セル ずつ。 */
.jd-gallery {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	/* grid-template-rows を指定しない：サブセルの aspect-ratio が自動で行高を決める。
	   こうすると「サブ4枚 = 2行 × aspect 16:10」の合計高が確定し、
	   メインはその 2 行 + gap を span するだけで自動的に同じ高さに揃う。 */
	gap: 12px;
	margin-bottom: 22px;
}
.jd-gallery .ph,
.jd-gallery__photo {
	border-radius: 4px;  /* ヒーロー/求人カードと揃えて四角でとういつ */
	border: var(--bd-w-thick) solid var(--ink);
	background-color: var(--paper2);
	overflow: hidden;
	/* シャドウなし（写真自体に立体感を出さず、画像本体を主役に）*/
	/* ★ 全セル：16:10 で固定（メインは下で grid 追従に切替） */
	aspect-ratio: 16 / 10;
	/* img を絶対配置で受けるためのアンカー */
	position: relative;
	min-height: 0;
}
/* アイキャッチ画像（実画像）用：絶対配置でセル全体に被せる。
   ・position: absolute にすることで、画像の自然な高さでセルが膨らむのを防ぐ
   ・width/height 100% + object-fit: cover で完全にセルに収める
   これで「main セル＝grid 行サムの高さ」「画像はその枠に切り抜かれる」になる */
.jd-gallery__img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* メイン画像：左カラム（2fr）× 2行を占有。aspect-ratio: auto で 16/10 を上書きし、
   セル高は「サブ2段 + gap」（= grid 計算）に完全追従する */
.jd-gallery__main {
	grid-row: span 2;
	aspect-ratio: auto;
}

/* 写真欄が空 + アイキャッチのみの 1 枚パターン：
   グリッドを解除して、横幅 720px ぐらいで中央配置。
   通常レイアウト（メイン縦長スリム）だと寂しいので、見栄えを整える。 */
.jd-gallery--single {
	display: flex;
	justify-content: center;
}
.jd-gallery--single .jd-gallery__main,
.jd-gallery--single .jd-gallery__photo {
	width: 100%;
	max-width: 720px;
	aspect-ratio: 16 / 10;
	grid-row: auto;
}
.jd-gallery--single .jd-gallery__img {
	height: 100%;
}

/* ============ ③ スペックハイライト + 募集要項テーブル ============ */
.jd-spec {
	background: var(--paper2);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 18px;
	padding: 28px 28px 24px;
	margin-bottom: 22px;
}

/* 3 枚カード（寮なし求人で 2 枚／1 枚になる場合は中央寄せ） */
.jd-spec__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 20px;
}
/* カードが 2 枚のとき：2 列にして中央寄せ（max-width で広がりすぎ防止） */
.jd-spec__grid:has(> .jd-spec__card:nth-child(2):last-child) {
	grid-template-columns: repeat(2, 1fr);
	max-width: 66.66%;
	margin-left: auto;
	margin-right: auto;
}
/* カードが 1 枚のとき：1 列にして中央寄せ */
.jd-spec__grid:has(> .jd-spec__card:only-child) {
	grid-template-columns: 1fr;
	max-width: 33.33%;
	margin-left: auto;
	margin-right: auto;
}
.jd-spec__card {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 14px;
	padding: 18px 12px 14px;
	box-shadow: 4px 4px 0 var(--ink);
	text-align: center;
	font-family: var(--font-display);
	position: relative;
}
.jd-spec__card:nth-child(1) { background: #FFF1B8; transform: rotate(-1deg); }
.jd-spec__card:nth-child(2) { background: #FFCDB2; transform: rotate( .5deg); }
.jd-spec__card:nth-child(3) { background: #B5E45C; transform: rotate(-.5deg); }
.jd-spec__lbl {
	font-family: var(--font-display);
	font-size: 15px;       /* タイトルなので少し大きく */
	font-weight: bold;     /* 強調 */
	color: var(--ink);     /* 濃く（ink2→ink）*/
	margin-bottom: 6px;
	letter-spacing: .04em;
}
.jd-spec__val {
	font-family: var(--font-display);
	font-size: 24px;
	color: var(--ink);
	line-height: 1.1;
	font-weight: bold;
}
/* 数字の前のテキスト（例：「最大」「入社祝金」など）→ 小さく黒で */
.jd-spec__pre {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--ink);
	font-weight: bold;
	margin-right: 2px;
	vertical-align: middle;
}
.jd-spec__val b {
	font-family: var(--font-display);
	font-size: 48px;
	color: var(--red);
	padding: 0 2px;
	letter-spacing: -.02em;
	font-weight: bold;
}
/* 補足文（パーレン内）→ 視認性アップで 10.5px → 13px に */
.jd-spec__sub {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink2);
	margin-top: 8px;
	line-height: 1.4;
}

/* 募集要項テーブル */
.jd-table {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 14px;
	overflow: hidden;
	font-family: var(--font-display);
}
.jd-row {
	display: grid;
	/* ラベル列を 160px → 200px に拡大。PC で「勤務地」「仕事内容」が
	   詰まって見えるのを解消し、値とのバランスも整える。 */
	grid-template-columns: 200px 1fr;
	border-bottom: 1.5px dashed var(--ink3);
}
.jd-row:last-child {
	border-bottom: none;
}
.jd-row__k {
	background: var(--paper2);
	/* PC では padding と font-size を一回り大きく。 */
	padding: 18px 22px;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: bold;
	color: var(--ink);
	border-right: 1.5px dashed var(--ink3);
	display: flex;
	align-items: center;
	gap: 8px;
}
.jd-row__v {
	padding: 18px 22px;
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.75;
	color: var(--ink);
}

/* ============ ④〜⑥+⑧ セクション共通 ============ */
.jd-section {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 18px;
	padding: 32px;
	margin-bottom: 22px;
}
/* .jd-section--alt の独自背景は廃止。他のセクションと同じ var(--paper) で統一
 *   （2026-05-22：PC でも寮セクションが浮かないように）*/
.jd-section--alt {
	/* background: var(--paper2);  ← 廃止 */
}
.jd-section__title {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	margin: 0 0 18px;
	line-height: 1.3;
	position: relative;
	padding-top: 14px;
	color: var(--ink);
}
.jd-section__title::before {
	content: "";
	display: block;
	width: 60px;
	height: 5px;
	background: var(--ink);
	margin: 0 auto 12px;
	border-radius: 3px;
}
.jd-section__en {
	display: block;
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--accent);
	margin-bottom: 4px;
	letter-spacing: .15em;
}
.jd-section__body {
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 2;
	color: var(--ink);
	/* 内側の背景・枠線は撤去（スマホと同じフラットな見た目）。
	   外側 .jd-section の余白（padding: 32px）で十分な余白を確保。 */
	background: transparent;
	border: none;
	padding: 4px 0;
	letter-spacing: .02em;
}
.jd-section--alt .jd-section__body {
	background: transparent;
	border: none;
}
/* リッチテキスト要素のスタイル（wpautop / 見出し / リスト / 強調等） */
.jd-section__body > *:first-child { margin-top: 0; }
.jd-section__body > *:last-child  { margin-bottom: 0; }
.jd-section__body p {
	margin: 0 0 16px;
	padding-left: 14px;  /* 見出しに対して少しインデントして読みやすく */
}
/* 見出し（管理画面で h3/h4 を使えるように）*/
.jd-section__body h3,
.jd-section__body h4 {
	font-family: var(--font-display);
	font-weight: bold;
	margin: 24px 0 10px;
	padding-left: 12px;
	border-left: 4px solid var(--accent);
	line-height: 1.5;
}
.jd-section__body h3 { font-size: 18px; }
.jd-section__body h4 { font-size: 16px; color: var(--ink2); }
/* リスト：黄色の番号付き／チェック風（寮セクションの padding-left: 14px と統一）*/
.jd-section__body ul,
.jd-section__body ol {
	margin: 0 0 16px;
	padding-left: 14px;  /* 寮セクション・段落（p）と揃える */
	list-style: none;
}
.jd-section__body ul li,
.jd-section__body ol li {
	position: relative;
	padding: 4px 0 4px 20px;  /* チェックマーク分のスペース */
	margin-bottom: 4px;
	line-height: 1.7;
}
.jd-section__body ul li::before {
	content: "✔";
	position: absolute;
	left: 0;
	top: 4px;
	color: var(--accent);
	font-weight: bold;
}
.jd-section__body ol {
	counter-reset: jd-body;
}
.jd-section__body ol li {
	counter-increment: jd-body;
}
.jd-section__body ol li::before {
	content: counter(jd-body);
	position: absolute;
	left: 0;
	top: 4px;
	width: 22px;
	height: 22px;
	background: var(--accent);
	color: #fff;
	border-radius: 50%;
	font-size: 12px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
/* ===================================================================
 * 仕事内容 5 サブセクションのメリハリ（2026-05-22 追加）
 *
 *   各 H3 にクラス（mk-jc-*）が付いてるので、それを元にアイコン・色・装飾を変える。
 *   全部「✔」で統一されてた見た目に変化を出して、編集者・読み手に分かりやすく。
 * =================================================================== */

/* ──「主な業務」H3 自体は通常スタイル、本文は段落表示 */
.jd-section__body h3.mk-jc-main {
	border-left-color: #ff8c42;  /* オレンジ */
}

/* ──「仕事の特徴・職場環境」◎ アイコン */
.jd-section__body h3.mk-jc-features {
	border-left-color: #2196f3;  /* 青 */
}
.jd-section__body h3.mk-jc-features + ul li::before {
	content: "◎";
	color: #2196f3;
}

/* ──「こんな人におすすめ」👤 アイコン */
.jd-section__body h3.mk-jc-target {
	border-left-color: #e91e63;  /* ピンク */
}
.jd-section__body h3.mk-jc-target + ul li::before {
	content: "👤";
	color: #e91e63;
}

/* ──「1日の流れ（例）」⏰ タイムライン風 */
.jd-section__body h3.mk-jc-schedule {
	border-left-color: #9c27b0;  /* 紫 */
}
.jd-section__body h3.mk-jc-schedule + ul {
	border-left: 2px dashed #9c27b0;
	padding-left: 28px;
	margin-left: 10px;
}
.jd-section__body h3.mk-jc-schedule + ul li {
	padding-left: 8px;
}
.jd-section__body h3.mk-jc-schedule + ul li::before {
	content: "●";
	left: -34px;
	top: 8px;
	color: #9c27b0;
	font-size: 14px;
}

/* ──「PR」装飾枠で囲む */
.jd-section__body h3.mk-jc-pr {
	background: #fff8e1;  /* クリーム */
	padding: 12px 16px;
	border-radius: 8px;
	border-left: 6px solid #ff5722;
	margin-top: 32px;
}
.jd-section__body h3.mk-jc-pr + p {
	background: #fff8e1;
	padding: 14px 18px;
	border-radius: 8px;
	margin-top: 0;
	margin-bottom: 8px;
	line-height: 1.9;
}

/* ===================================================================
 * 1日の流れ：シフト別タブ（2交替＝早番/夜勤・3交替＝早番/遅番/夜勤）
 *   ・①番の時刻を各シフト開始時刻ぶん自動シフトしてタブで切替（PHP側で生成）
 *   ・縦に伸ばさず1枚分の高さで全シフトの流れを確認できる
 * =================================================================== */
.jd-flow-tabs { margin: 0 0 18px; }
.jd-flow-tabs__nav {
	display: flex;
	flex-wrap: nowrap;           /* スマホでも折り返さず常に1行 */
	gap: 8px;
	margin-bottom: 14px;
	overflow-x: auto;            /* 入り切らない時だけ横スクロール（折り返さない） */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;       /* Firefox：スクロールバー非表示 */
}
.jd-flow-tabs__nav::-webkit-scrollbar { display: none; }  /* WebKit：非表示 */
.jd-flow-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	flex-shrink: 0;              /* 1行維持（潰さない） */
	padding: 7px 16px;
	background: var(--paper);
	border: 1.5px solid #d9c9a8;
	border-radius: 10px;
	font-family: var(--font-display);
	color: var(--ink2);
	cursor: pointer;
	line-height: 1.25;
	white-space: nowrap;
	transition: background .15s, color .15s, border-color .15s;
}
.jd-flow-tab__name { font-size: 14px; font-weight: bold; }
.jd-flow-tab__time { font-size: 11px; opacity: .8; }
.jd-flow-tab:hover { border-color: #9c27b0; color: #9c27b0; }
.jd-flow-tab.is-active {
	background: #9c27b0;
	border-color: #9c27b0;
	color: #fff;
}
.jd-flow-tab.is-active .jd-flow-tab__time { opacity: .9; }
/* スマホ：3タブが1行に収まるようコンパクト化（早番/遅番/夜勤） */
@media (max-width: 768px) {
	.jd-flow-tabs__nav { gap: 6px; }
	.jd-flow-tab { padding: 6px 10px; border-radius: 8px; }
	.jd-flow-tab__name { font-size: 13px; }
	.jd-flow-tab__time { font-size: 10px; }
}

/* パネル：アクティブのみ表示。流れリストは mk-jc-schedule と同じタイムライン風（紫破線＋●） */
.jd-flow-panel { display: none; }
.jd-flow-panel.is-active { display: block; }
.jd-section__body .jd-flow-panel {
	border-left: 2px dashed #9c27b0;
	padding-left: 28px;
	margin: 0 0 0 10px;
	list-style: none;
}
.jd-section__body .jd-flow-panel li {
	position: relative;
	padding: 4px 0 4px 8px;
	margin-bottom: 4px;
	line-height: 1.7;
}
.jd-section__body .jd-flow-panel li::before {
	content: "●";
	position: absolute;
	left: -34px;
	top: 8px;
	color: #9c27b0;
	font-size: 14px;
	font-weight: normal;
}
.jd-flow-time {
	display: inline-block;
	min-width: 3.4em;
	font-family: var(--font-display);
	font-weight: bold;
	color: #7b1fa2;
	margin-right: 8px;
}

/* ===================================================================
 * 待遇・特典 5 サブセクションのメリハリ
 * =================================================================== */

/* ===================================================================
 * 3大特典セクションの豪華訴求デザイン（2026-05-22 改訂）
 *
 *   ・「3大特典」H3：グラデーション大バナー（中央寄せ・大きく目立つ）
 *   ・「応募/来場者/入社特典」H4：クリームグラデの大カード型ラベル
 *   ・「福利厚生」「その他」H3：既存スタイル維持（黄色マーカー風）
 * =================================================================== */

/* 「3大特典」H3：豪華バナー（全幅・グラデ背景）。
   上段に「KFSへのご応募で」の白ピル＋下段に大きく3大特典（主役）。 */
.jd-section__body--benefits h3.mk-bn-three {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 100%;
	background: linear-gradient(135deg, #ff5722 0%, #ff9800 100%);
	color: #fff;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	padding: 15px 24px 17px;
	border-radius: 14px;
	border-left: none;
	box-shadow: 0 6px 20px rgba(255, 87, 34, 0.35);
	margin: 32px 0 24px;
	letter-spacing: 0.08em;
	box-sizing: border-box;
}
/* 上段：KFS入社キッカー（白の無地ピル＋赤橙文字でしっかり目立たせる・🎁で挟む） */
.jd-section__body--benefits h3.mk-bn-three::before {
	content: "🎁 KFSからの入社で 🎁";
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: #e8480f;
	background: #fff;
	padding: 6px 18px;
	border-radius: 999px;
	box-shadow: 0 2px 7px rgba(0, 0, 0, 0.20);
}
/* 旧・末尾の🎁は廃止（キッカー側に集約） */
.jd-section__body--benefits h3.mk-bn-three::after { content: none; }

/* 3大特典の中身（H4）：応募/来場者/入社特典 のラベル風見出し
 *   見た目はラベル（文字幅にフィット）、ふるまいはブロック（次のテキストは下の行に改行）
 *   ※ inline-block だと直後の <strong> や地の文が同じ行に続いて崩れるので block + fit-content。 */
.jd-section__body--benefits h4.mk-bn-apply,
.jd-section__body--benefits h4.mk-bn-visit,
.jd-section__body--benefits h4.mk-bn-join {
	display: block;
	width: fit-content;
	max-width: 100%;
	background: linear-gradient(180deg, #fff8e1 0%, #ffe9b3 100%);
	color: var(--ink);
	font-size: 17px;
	font-weight: bold;
	padding: 10px 22px 10px 16px;
	border-radius: 8px;
	border-left: 6px solid var(--accent);
	box-shadow: none;
	margin: 28px 0 12px;
	box-sizing: border-box;
}
.jd-section__body--benefits h4.mk-bn-apply::before { content: "📨  "; font-size: 20px; vertical-align: middle; }
.jd-section__body--benefits h4.mk-bn-visit::before { content: "🎁  "; font-size: 20px; vertical-align: middle; }
.jd-section__body--benefits h4.mk-bn-join::before  { content: "🎉  "; font-size: 20px; vertical-align: middle; }

/* 「福利厚生」H3・「その他」H3：既存の inline-block ラベル風スタイル維持
 *   ただしアイコン付け足し */
.jd-section__body--benefits h3.mk-bn-welfare::before { content: "🏥 "; }
.jd-section__body--benefits h3.mk-bn-other::before   { content: "✨ "; }

/* 装飾（太字をハイライト風に、強調をアクセントカラーに）*/
.jd-section__body strong {
	font-weight: bold;
	background: linear-gradient(transparent 60%, var(--sticky) 60%);
	padding: 0 2px;
}
.jd-section__body em {
	font-style: normal;
	color: var(--accent2);
	font-weight: bold;
}
.jd-section__body a {
	color: var(--accent2);
	text-decoration: underline;
}
.jd-section__body blockquote {
	margin: 0 0 16px;
	padding: 12px 18px;
	background: var(--paper);
	border-left: 4px solid var(--ink2);
	border-radius: 6px;
	font-size: 14px;
	color: var(--ink2);
}

/* ============ ⑤ 寮情報 ============
 *   元の縦並び構造（ラベル上 / 値下）。ラベルが薄かった問題は色＋サイズを上げて解決。
 */
.jd-dorm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 18px;
}
.jd-dorm-card {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 14px;
	padding: 22px 24px;
	font-family: var(--font-display);
	box-shadow: 4px 4px 0 var(--ink);
}
.jd-dorm-card__lb {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: bold;
	color: var(--ink);
	margin-bottom: 4px;
	letter-spacing: .03em;
	display: inline-block;
	padding: 2px 8px;
	background: var(--paper2);
	border-radius: 4px;
	border-left: 3px solid var(--accent);
}
.jd-dorm-card__vl {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: bold;
	margin: 6px 0 16px;
	line-height: 1.6;
	color: var(--ink);
	word-break: break-word;
}
.jd-dorm-card__vl:last-child {
	margin-bottom: 0;
}
.jd-dorm-card__vl--red {
	color: var(--red);
}

/* ===================================================================
 * 寮セクション新レイアウト：縦 1 カラム・シンプル（2026-05-22 改訂）
 *
 *   ・全 6 項目を縦に並べる（左右バランス問題の解消）
 *   ・カード装飾ナシ・区切り線だけのミニマルデザイン
 *   ・値は nl2br + white-space:pre-line で複数行表示
 *   ・1 行目を ::first-line で太字（重要メッセージを強調）
 * =================================================================== */
.jd-dorm-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 18px;
	/* 背景・padding なし：.jd-section が既にカード背景を持っているので二重にしない */
}
.jd-dorm-item {
	padding: 18px 0;
	border-bottom: 1px solid var(--line, #e0d4b8);
}
.jd-dorm-item:last-child {
	border-bottom: none;
}
.jd-dorm-item__lb {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: bold;
	color: var(--ink);
	margin-bottom: 12px;
	letter-spacing: .03em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px;
	background: var(--paper2);
	border-radius: 6px;
	border-left: 4px solid var(--accent);
}
.jd-dorm-item__icon {
	font-size: 20px;
	line-height: 1;
}
.jd-dorm-item__text {
	font-size: 14px;
}
.jd-dorm-item__vl {
	/* 本文用フォントに切り替え：Yusei Magic（display）は装飾性が強く説明文には不向き */
	font-family: var(--font-body);
	font-size: 15px;
	margin: 0;
	padding-left: 14px;  /* ラベルのテキスト位置と揃える */
	line-height: 1.7;
	color: var(--ink);
	word-break: break-word;
}
/* 1 行目を自動で太字（重要メッセージの強調） */
.jd-dorm-item__vl::first-line {
	font-weight: bold;
}
.jd-dorm-item__vl--red {
	color: var(--red);
}
/* 寮費「無料」のハイライト：赤字＋太字＋ひと回り大きく */
.jd-fee-free {
	color: var(--red);
	font-weight: bold;
	font-size: 1.15em;
}

/* 箇条書き表示（設備・特徴 のような複数項目を持つフィールド） */
.jd-dorm-item__list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 14px;  /* .jd-dorm-item__vl と同じインデント */
}
.jd-dorm-item__list li {
	position: relative;
	padding: 2px 0 2px 20px;  /* チェックマーク分のスペース */
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink);
	word-break: break-word;
	font-family: var(--font-body);  /* 説明文と統一 */
}
.jd-dorm-item__list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 2px;
	color: var(--accent2);
	font-weight: bold;
	font-size: 14px;
}
/* 1 行目だけ太字（箇条書きの場合は「家具・家電無料完備」のような見出し的項目）*/
.jd-dorm-item__list li:first-child {
	font-weight: bold;
}
.jd-dorm-item__list--red li {
	color: var(--red);
}

/* 注釈段落（箇条書きの後にある「※～」のような注意書き）*/
.jd-dorm-item__note {
	font-size: 13px;
	color: var(--ink2, #666);
	margin: 10px 0 0;
	padding-left: 14px;  /* vl / list と同じインデント */
	line-height: 1.5;
}

/* 旧サムネ並び（互換用に残す）*/
.jd-dorm-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.jd-dorm-thumb {
	height: 110px;
	border-radius: 4px;
	border: 2px solid var(--ink);
	overflow: hidden;
	cursor: zoom-in;
	transition: transform .15s;
}
.jd-dorm-thumb:hover { transform: translate(-1px, -1px); }
.jd-dorm-thumb .ph { height: 100%; border: none; border-radius: 0; box-shadow: none; }
.jd-dorm-thumb__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* スライダー上部の「タップで拡大」ヒント */
.jd-dorm-slider__hint {
	display: inline-block;
	margin: 0 0 8px;
	padding: 4px 12px;
	background: var(--paper2);
	border: 1px dashed var(--ink2);
	border-radius: 16px;
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink2);
}

/* ─── 寮スライダー（最大10枚・矢印 + ドット + 枚数表示） ─── */
.jd-dorm-slider {
	position: relative;
	/* コンテナの枠は無し。各スライドが独立カードとして見えるように */
	/* 横スワイプはスライダー操作・縦は通常スクロール（指の横スワイプでページが縦に動くのを防ぐ） */
	touch-action: pan-y;
}
.jd-dorm-slider__viewport {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4 / 3;  /* スマホ：1枚表示（枠を縦に大きくして見やすく） */
}
.jd-dorm-slider__track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform .4s ease;
	gap: 16px;  /* スライド間の隙間（独立感を出すため広め） */
}
.jd-dorm-slider__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	position: relative;  /* 子の __caption を絶対配置するため */
	/* 各スライドにカード風の枠・角丸（影は廃止） */
	border: 2px solid var(--ink);
	border-radius: 6px;
	overflow: hidden;
	background: var(--paper2);  /* contain 時の余白色 */
	box-sizing: border-box;
}
/* スライダーの下に注釈を 1 行・右寄せ・小さい黒文字で */
.jd-dorm-slider__caption {
	display: block;
	margin-top: 6px;
	text-align: right;
	font-size: 11px;
	color: var(--ink2, #666);
	font-family: var(--font-body);
}
/* PC（>=769px）：3つ並び。各スライドは 1/3 幅 = 各 16:10 比率 */
@media (min-width: 769px) {
	.jd-dorm-slider__viewport {
		aspect-ratio: 48 / 10;  /* 16:10 × 3枚分 */
	}
	.jd-dorm-slider__slide {
		flex: 0 0 calc((100% - 32px) / 3);  /* 3枚 + gap×2 */
	}
}
.jd-dorm-slider__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;  /* ズームせず画像全体が見えるよう枠内にフィット */
	cursor: zoom-in;
}
/* 矢印：見た目の丸は ::before（約44px）、当たり判定はボタン自体を大きく（横56×縦88px）。
   こうすると「矢印のすぐ外を押すと画像拡大が誤発火」を防ぎ、かつ押しやすくなる。
   透明なボタンが画像の上に乗るので、矢印付近のタップは必ずページ送りになる。 */
.jd-dorm-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 88px;
	border: none;
	background: transparent;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	-webkit-tap-highlight-color: transparent;
}
.jd-dorm-slider__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	transition: background .15s, transform .15s;
	z-index: -1;
}
.jd-dorm-slider__arrow:hover::before { background: rgba(0, 0, 0, .8); }
.jd-dorm-slider__arrow:active::before { transform: translate(-50%, -50%) scale(.9); }
.jd-dorm-slider__arrow--prev { left: 2px; }
.jd-dorm-slider__arrow--next { right: 2px; }
.jd-dorm-slider__dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
}
.jd-dorm-slider__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(0, 0, 0, .35);
	cursor: pointer;
	padding: 0;
	transition: background .15s, transform .15s;
}
.jd-dorm-slider__dot:hover { background: rgba(255, 255, 255, .85); }
.jd-dorm-slider__dot.is-active {
	background: var(--accent, #ff8b3d);
	transform: scale(1.3);
}
.jd-dorm-slider__count {
	position: absolute;
	top: 10px;
	right: 10px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	padding: 3px 10px;
	border-radius: 12px;
	font-family: var(--font-display);
	font-size: 12px;
	z-index: 2;
}

/* ============ ⑥ 待遇・特典（BENEFITS & PERKS）============
 *   管理画面 wp_editor で書かれた自由文を表示。
 *   .jd-section__body--benefits 限定の見出しスタイルを強化。
 */
/* 待遇・特典セクション内の見出しは、通常の section__body より大きく目立たせる */
.jd-section__body--benefits h3,
.jd-section__body--benefits h4 {
	display: inline-block;
	background: var(--sticky);  /* 黄色マーカー風背景 */
	color: var(--ink);
	padding: 6px 18px 6px 12px;
	margin: 28px 0 14px;
	border-left: 5px solid var(--accent);
	border-radius: 0 6px 6px 0;
	box-shadow: 2px 2px 0 var(--ink);
	line-height: 1.4;
	font-weight: bold;
}
.jd-section__body--benefits h3 {
	font-size: 18px;
}
.jd-section__body--benefits h4 {
	font-size: 15px;
	background: var(--paper2);
	box-shadow: none;
}
.jd-section__body--benefits > h3:first-child,
.jd-section__body--benefits > h4:first-child {
	margin-top: 0;
}
.jd-section__body--benefits p {
	font-size: 15px;
	line-height: 1.95;
	margin: 0 0 14px;
}
.jd-section__body--benefits img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	margin: 14px 0;
	border: 2px solid var(--ink);
}

/* ⑦ 「1日の流れ」セクション関連 CSS（.jd-schedule / .jd-sch-step）は 2026-05-19 削除 */

/* ============ ⑦ 応募 CTA ============ */
.jd-apply {
	/* 黄色背景・黒フチ・影なし（枠なしでCTAだけ見せる） */
	background: none;
	border: none;
	border-radius: 0;
	padding: 34px 0 10px;
	box-shadow: none;
	margin: 48px 0 22px;   /* 上に余白（直前のセクションと近すぎ解消） */
	text-align: center;
	position: relative;
	scroll-margin-top: 80px;  /* 追尾ボタン #jd-apply で飛んだ時に固定ヘッダーへ隠れない */
}
.jd-apply__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;
	padding: 5px 18px;
	border-radius: 4px;
	letter-spacing: .1em;
	font-weight: bold;
}
.jd-apply__title {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: bold;
	margin: 6px 0 8px;
	color: var(--ink);
	line-height: 1.4;
}
.jd-apply__lead {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink2);
	margin: 0 0 14px;
}
/* 求人IDボックス（応募CTA内） */
.jd-apply__code {
	display: inline-block;
	margin: 0 auto 18px;
	background: #fff;
	border: 2px dashed var(--ink2);
	border-radius: 10px;
	padding: 10px 16px;
	font-family: var(--font-display);
	text-align: center;
}
.jd-apply__code-label {
	display: inline-block;
	font-size: 11px;
	color: var(--ink2);
	background: var(--paper2);
	padding: 2px 8px;
	border-radius: 3px;
	margin-right: 8px;
	vertical-align: middle;
	letter-spacing: .05em;
}
.jd-apply__code-id {
	font-family: Menlo, Consolas, monospace;
	font-size: 17px;
	font-weight: bold;
	color: var(--ink);
	letter-spacing: .04em;
	vertical-align: middle;
}
.jd-apply__code-copy {
	margin-left: 10px;
	background: var(--paper2);
	border: 1.5px solid var(--ink2);
	border-radius: 6px;
	padding: 4px 10px;
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--ink);
	cursor: pointer;
	vertical-align: middle;
	transition: all .15s;
}
.jd-apply__code-copy:hover { background: var(--ink); color: var(--paper); }
.jd-apply__code-copy.is-copied { background: var(--green, #00a32a); color: #fff; border-color: var(--green, #00a32a); }
.jd-apply__code-hint {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--ink2);
	line-height: 1.5;
	/* 「ください」などが文字の途中で折り返さないように（語のまとまりを保つ）。
	   スペース区切りの位置でだけ改行されるので「い」だけ落ちる現象を防ぐ。 */
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.jd-apply__code-hint strong {
	color: var(--accent);
	font-weight: bold;
	white-space: nowrap;
}
@media (max-width: 768px) {
	.jd-apply__code { display: block; padding: 12px 14px; }
	.jd-apply__code-copy { margin: 8px 0 0; display: inline-block; }
	/* スマホ：少し小さくして1〜2行にきれいに収める */
	.jd-apply__code-hint { font-size: 11px; line-height: 1.6; }
}
.jd-apply__row {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.jd-apply__row .btn {
	padding: 16px 30px;
	font-size: 15px;
	box-shadow: 4px 4px 0 var(--ink);
}

/* PC：応募CTAをもっと目立たせる（2026-07-09 視認性UP） */
@media (min-width: 769px) {
	.jd-apply {
		margin: 64px 0 32px;
		padding: 42px 0 18px;
	}
	.jd-apply__tag {
		font-size: 14px;
		padding: 7px 22px;
		top: -18px;
	}
	.jd-apply__title {
		font-size: 32px;
		margin: 10px 0 14px;
	}
	.jd-apply__row .btn {
		padding: 22px 44px;
		font-size: 18px;
		min-width: 220px;
		box-shadow: 6px 6px 0 var(--ink);
	}
}

/* ============ ⑧ 似ている求人 ============
 *   .jd-section--flat：外側のセクション枠／シャドウを撤去（タイトルだけ残す）。
 *   その分、中の関連求人カードを大きく見せる（画像高さUP・フォントUP・パディングUP）。
 */
.jd-section--flat {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 24px 0;
}
.jd-related {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.jd-rel-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);
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
	text-decoration: none;
	color: var(--ink);
	/* flex column でタイトルの長短に関係なくフッター（給与+ボタン）を必ず最下部に揃える */
	display: flex;
	flex-direction: column;
}
.jd-rel-card:hover {
	transform: translate(-3px, -3px);
	box-shadow: 9px 9px 0 var(--ink);
	text-decoration: none;
	color: var(--ink);
}
.jd-rel-card__img {
	/* 推奨 4:3 に統一 */
	aspect-ratio: 16 / 10;
	width: 100%;
	border-bottom: 2px solid var(--ink);
	background: var(--paper2);
	overflow: hidden;
}
.jd-rel-card__img .ph {
	height: 100%;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
.jd-rel-card__img .ph-icon { font-size: 32px; }
.jd-rel-card__img .ph-desc { font-size: 13px; padding: 4px 10px; }
/* 関連カードの実画像（アイキャッチ）：枠内にきっちりフィット */
.jd-rel-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jd-rel-card__ttl {
	padding: 18px 18px 6px;
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.55;
	font-weight: bold;
	color: var(--ink);
}
/* 下端：給与（左）と「この求人を見る」ボタン（右）の flex 配置。
   margin-top: auto でカード最下部に固定（タイトル長短に左右されない） */
.jd-rel-card__foot {
	padding: 16px 18px 18px;   /* 上の余白を増やしてスペックボックスと離す */
	margin-top: auto;
}
.jd-rel-card__pay {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--accent2);
	font-weight: bold;
	letter-spacing: .02em;
}
/* 「この求人を見る」ボタン：中央配置・横長（全幅）で押しやすく。白背景＋黒枠＋黒文字 */
.jd-rel-card__cta {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: var(--ink);      /* 最初から黒（濃インク） */
	color: var(--paper);
	border: 1.5px solid var(--ink);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: bold;
	padding: 12px;
	border-radius: 8px;
	letter-spacing: .02em;
	transition: background .15s, border-color .15s;
}
.jd-rel-card:hover .jd-rel-card__cta {
	background: #3d3a31;         /* ホバーでほんの少し明るく（手応え） */
	border-color: #3d3a31;
}

/* 似ている求人カード：メタ行＋スペックボックス（求人検索カード .ja-card と同じ見た目に統一）*/
.jd-rel-card__meta {
	display: flex;
	flex-wrap: nowrap;            /* 折り返さない（1行固定） */
	column-gap: 14px;
	margin-top: 2px;
	padding: 8px 18px 2px;
	border-top: 1.5px dashed var(--ink2);
	font-size: 13px;
	color: var(--ink2);
	overflow-x: auto;            /* 長い場合は横スライド */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;       /* Firefox：スクロールバー非表示 */
}
.jd-rel-card__meta::-webkit-scrollbar { display: none; }  /* WebKit：非表示 */
.jd-rel-card__mi { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; }
/* スペック（月収/特典/寮費）：点線枠＋クリーム背景のボックス（本家と同じ）*/
.jd-rel-card__spec {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 6px 18px 2px;
	padding: 8px 10px;
	background: var(--paper2);
	border: 1.5px dashed var(--ink2);
	border-radius: 6px;
	font-size: 12.5px;
	line-height: 1.5;
}
.jd-rel-card__sr {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 8px;
	align-items: baseline;
}
.jd-rel-card__sl { font-weight: bold; color: var(--ink); white-space: nowrap; }
.jd-rel-card__sv { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jd-rel-card__sr--pay .jd-rel-card__sv { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 2px; overflow: visible; }
.jd-rel-card__pre { font-weight: normal; color: var(--ink2); font-size: 12px; }
.jd-rel-card__num { color: var(--red); font-family: var(--font-display); font-size: 22px; font-weight: bold; padding: 0 2px; line-height: 1; }
.jd-rel-card__unit { font-weight: 700; color: var(--ink); }
.jd-rel-card__ssub { font-size: 10.5px; color: var(--ink2); font-weight: normal; margin-left: 4px; }

/* ============ ライトボックス（写真クリックで拡大）============
 *   JS（initJobDetailLightbox）がギャラリー＋寮サムネに付与。
 *   .ph（プレースホルダ）も <img> も両方対応。
 */
.jd-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(38, 36, 31, 0.88);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 40px;
	cursor: zoom-out;
}
.jd-lightbox.is-open {
	display: flex;
	animation: jd-lightbox-fade .18s ease-out;
}
@keyframes jd-lightbox-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.jd-lightbox__stage {
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: auto;  /* 中身はカーソル戻す */
}
.jd-lightbox__img {
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
	border: 3px solid var(--paper);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,.5);
	display: block;
}
.jd-lightbox__ph {
	width: min(640px, 80vw);
	height: min(480px, 70vh);
	border-radius: 12px;
	border: 3px solid var(--paper);
	box-shadow: 0 8px 24px rgba(0,0,0,.5);
	font-size: 18px;
}
.jd-lightbox__ph .ph-icon { font-size: 48px; }
.jd-lightbox__ph .ph-type { font-size: 14px; }
.jd-lightbox__ph .ph-desc { font-size: 14px; }
.jd-lightbox__close {
	position: fixed;
	top: 20px;
	right: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--paper);
	border: 3px solid var(--ink);
	box-shadow: 3px 3px 0 rgba(0,0,0,.4);
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: bold;
	color: var(--ink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0;
	z-index: 2;
}
.jd-lightbox__close:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 rgba(0,0,0,.4);
}
@media (max-width: 768px) {
	.jd-lightbox { padding: 16px; }
	.jd-lightbox__close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
		font-size: 20px;
	}
}

/* ギャラリー・寮サムネにズームヒント（シャドウなしの軽い浮き上がりだけ）*/
.jd-gallery .ph,
.jd-gallery img {
	cursor: zoom-in;
	transition: transform .15s;
}
.jd-gallery .ph:hover,
.jd-gallery img:hover {
	transform: translate(-2px, -2px);
}

/* ============ レスポンシブ ============ */
@media (max-width: 1024px) {
	.jd-wrap {
		max-width: 100%;
		padding: 22px 20px 0;
	}
	.jd-hero {
		padding: 24px 22px;
	}
	.jd-title {
		font-size: 26px;
	}
	.jd-spec__val b {
		font-size: 40px;
	}
}

@media (max-width: 768px) {
	.jd-crumb {
		padding: 12px 16px 0;
		font-size: 11px;
	}
	.jd-wrap {
		padding: 16px 16px 0;
	}

	/* ヒーロー：余白とフォントを縮める（角丸は 4px で四角統一） */
	.jd-hero {
		padding: 20px 18px;
		border-radius: 4px;
		box-shadow: 4px 4px 0 var(--ink);
	}
	.jd-badge {
		font-size: 11px;
		padding: 4px 10px;
		box-shadow: 1.5px 1.5px 0 var(--ink);
	}
	.jd-title {
		font-size: 20px;
		line-height: 1.5;
	}
	.jd-meta {
		font-size: 11px;
		gap: 8px;
		flex-direction: column;
	}

	/* ギャラリー：縦並びに（メイン上 + サブ4枚 2x2） */
	.jd-gallery {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto;
		gap: 8px;
	}
	/* スマホでもセルはすべて 16:10 固定 */
	.jd-gallery .ph,
	.jd-gallery__photo {
		aspect-ratio: 16 / 10;
	}
	/* メインはスマホでは横幅いっぱい。span 2 は解除し 1行目を占有 */
	.jd-gallery__main {
		grid-column: 1 / -1;
		grid-row: 1;
		aspect-ratio: 16 / 10;   /* スマホでは独立して 16:10 */
	}

	/* スペックハイライト：1 列スタック。
	   スマホでは内側枠を外したぶん、外側の背景を白（--paper）に固定して文字読みやすく。
	   PC のベージュ（--paper2）は内側にカード／テーブルがあって視認性が確保されていた前提。 */
	.jd-spec {
		background: var(--paper);
		padding: 20px 16px 18px;
		border-radius: 14px;
		box-shadow: none;
	}
	.jd-spec__grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	/* PC 用の「2枚で 66.66%」「1枚で 33.33%」max-width は
	   スマホでは横幅を狭めて縦長カードを生んでしまうので無効化。全パターン 1 列フル幅へ。 */
	.jd-spec__grid:has(> .jd-spec__card:nth-child(2):last-child),
	.jd-spec__grid:has(> .jd-spec__card:only-child) {
		max-width: 100%;
		grid-template-columns: 1fr;
	}
	.jd-spec__card {
		padding: 14px 12px 12px;
	}
	.jd-spec__val b {
		font-size: 36px;
	}

	/* ▼ 募集要項テーブル：スマホでは内側テーブルの枠／シャドウを外し、
	   外側の .jd-spec ボックスだけで囲む。横幅をフル活用 + 縦並び。
	   ラベルは accent オレンジの左罫線で目立たせ、フォントを 14px に UP。 */
	.jd-table {
		background: transparent;
		border: none;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
	}
	.jd-row {
		display: block;
		grid-template-columns: 1fr;
		padding: 14px 0;
		border-bottom: 1.5px solid var(--ink3);
	}
	.jd-row:last-child {
		border-bottom: none;
		padding-bottom: 4px;
	}
	/* ▼ ラベル（勤務地・仕事内容など）：
	   PC と同じシンプルなバッジ（paper2 背景＋オレンジ左バー、太枠／影なし）。
	   寮タイプなどのラベル（.jd-dorm-card__lb）と統一。 */
	.jd-row__k {
		background: var(--paper2);
		border: none;
		border-left: 3px solid var(--accent);
		border-radius: 4px;
		padding: 3px 10px;
		font-size: 13px;
		font-weight: bold;
		color: var(--ink);
		letter-spacing: .03em;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-bottom: 8px;
		box-shadow: none;
		width: auto;
		align-self: flex-start;
	}
	.jd-row__v {
		padding: 0 0 0 13px;
		font-size: 15px;
		line-height: 1.7;
		color: var(--ink);
	}

	/* セクション共通：パディング縮小。
	   スマホでは alt（DORMITORY）も白（--paper）に揃えて、内側カードを外したぶんの
	   背景コントラストを確保する。 */
	.jd-section {
		padding: 22px 18px;
		border-radius: 14px;
		box-shadow: none;
	}
	.jd-section--alt {
		background: var(--paper);
	}
	/* 似ている求人セクションはモバイルでも外枠なし／影なしを維持。
	   .jd-section の rule の後で再宣言して上書きする。*/
	.jd-section--flat {
		background: transparent;
		border: none;
		box-shadow: none;
		border-radius: 0;
		padding: 14px 0;
	}
	.jd-section__title {
		font-size: 20px;
		padding-top: 10px;
	}
	.jd-section__title::before {
		width: 44px;
		height: 4px;
		margin-bottom: 8px;
	}
	.jd-section__en {
		font-size: 11px;
	}

	/* ▼ 仕事内容（.jd-section__body）：スマホでは内側のダッシュ枠と背景を外し、
	   素のテキストとして表示。フォントは 15px に UP。 */
	.jd-section__body {
		background: transparent;
		border: none;
		padding: 4px 0;
		font-size: 15px;
		line-height: 1.9;
		letter-spacing: 0;
	}
	/* alt 背景（寮セクション内のテキストブロック）も同様にフラット化 */
	.jd-section--alt .jd-section__body {
		background: transparent;
		border: none;
	}

	/* ▼ 寮・住まい：スマホでは内側カードの枠／シャドウを完全除去。
	   ラベル（寮タイプなど）は accent 左罫線で識別。値は大きめフォント。 */
	.jd-dorm-grid {
		grid-template-columns: 1fr;
		gap: 4px;
		margin-bottom: 18px;
	}
	.jd-dorm-card {
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 0;
	}
	/* ▼ ラベル（寮タイプ・寮費など）：PC と同じシンプルなバッジ（paper2 背景＋オレンジ左バー）*/
	.jd-dorm-card__lb {
		background: var(--paper2);
		border: none;
		border-left: 3px solid var(--accent);
		border-radius: 4px;
		padding: 3px 10px;
		margin: 14px 0 8px;
		font-size: 13px;
		font-weight: bold;
		color: var(--ink);
		letter-spacing: .03em;
		display: inline-block;
		box-shadow: none;
	}
	.jd-dorm-card__vl {
		font-size: 16px;
		margin: 0 0 0 13px;
		padding: 0 0 14px;
		border-bottom: 1.5px solid var(--ink3);
		line-height: 1.7;
	}
	.jd-dorm-card__vl:last-child {
		border-bottom: none;
		padding-bottom: 4px;
		margin-bottom: 8px;
	}
	/* 2 つ目のカードの最初の項目は上余白を増やしてカード切り替わりを視認 */
	.jd-dorm-card + .jd-dorm-card .jd-dorm-card__lb:first-child {
		margin-top: 22px;
	}
	.jd-dorm-thumbs {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 待遇・特典：見出しを少しコンパクトに */
	.jd-section__body--benefits h3 {
		font-size: 16px;
		padding: 5px 14px 5px 10px;
		margin: 22px 0 10px;
	}
	.jd-section__body--benefits h4 {
		font-size: 14px;
	}
	.jd-section__body--benefits p {
		font-size: 14px;
		line-height: 1.9;
		margin: 0 0 12px;
	}

	/* 「1日の流れ」セクション関連スマホ CSS は 2026-05-19 削除 */

	/* 応募 CTA（枠なし） */
	.jd-apply {
		padding: 28px 0 10px;
		border-radius: 0;
		box-shadow: none;
	}
	.jd-apply__title {
		font-size: 19px;
	}
	.jd-apply__row {
		flex-direction: column;
		gap: 10px;
	}
	.jd-apply__row .btn {
		padding: 14px 20px;
		font-size: 14px;
		width: 100%;
	}

	/* 関連求人：1 列スタック。
	   .jd-section--flat の枠／影の撤去は上のセクション共通ブロックで設定済み。
	   ここではカード間スペースとカード自身のシャドウを少し控えめに調整する。 */
	.jd-related {
		grid-template-columns: 1fr;
		gap: 26px;  /* カード間のスペース広め */
	}
	.jd-rel-card {
		box-shadow: 4px 4px 0 var(--ink);  /* スマホでは少し控えめに */
	}
	.jd-rel-card:hover {
		box-shadow: 6px 6px 0 var(--ink);
	}
	.jd-rel-card__img {
		aspect-ratio: 16 / 10;
		height: auto;
	}
	.jd-rel-card__ttl {
		padding: 16px 16px 6px;
		font-size: 15px;
		min-height: auto;
	}
	.jd-rel-card__foot {
		padding: 14px 16px 16px;   /* 上に余白を確保（ボックスと詰まらないように） */
	}
	.jd-rel-card__pay {
		font-size: 17px;
	}
	.jd-rel-card__cta {
		font-size: 12px;
		padding: 11px;             /* 全幅・中央のまま押しやすい高さに */
	}
}

/* ============================================================
 *  ⑨ 求人検索バナー（求人詳細の最下部・絞り込み検索への動線）
 *
 *   ・関連求人の下に配置
 *   ・押すと /job/?open_filter=1 へ遷移
 *   ・右下フローティング「詳細に戻る」と役割を分担
 * ============================================================ */
.jd-search-bnr {
	margin-top: 40px;
	padding: 0;
}
.jd-search-bnr__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: var(--ink);
	color: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 14px;
	padding: 22px 26px;
	box-shadow: 5px 5px 0 var(--accent);
}
.jd-search-bnr__text { flex: 1; min-width: 0; }
.jd-search-bnr__h {
	font-family: var(--font-display);
	font-size: 18px;
	margin: 0 0 4px;
	color: var(--paper);
	letter-spacing: .03em;
}
.jd-search-bnr__p {
	font-size: 13px;
	color: var(--paper2);
	margin: 0;
	line-height: 1.5;
}
.jd-search-bnr__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 22px;
	background: var(--paper);
	color: var(--ink);
	border: 1.8px solid var(--paper);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s, box-shadow .15s, background .15s;
}
.jd-search-bnr__btn:hover {
	background: var(--sticky);
	color: var(--ink);
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--accent);
	text-decoration: none;
}
@media (max-width: 768px) {
	.jd-search-bnr { margin-top: 30px; }
	.jd-search-bnr__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		padding: 18px 18px 20px;
		gap: 14px;
		box-shadow: 4px 4px 0 var(--accent);
	}
	.jd-search-bnr__h { font-size: 16px; }
	.jd-search-bnr__p { font-size: 12px; }
	.jd-search-bnr__btn {
		justify-content: center;
		padding: 11px 18px;
		font-size: 13px;
	}
}

/* ============================================================
 *  本文系フォント上書き（最下部・後勝ち集約）
 *
 *   求人詳細の「読み物として読まれる文章」をシステムフォントスタックに変更。
 *   （apple-system / BlinkMacSystemFont / Helvetica Neue / YuGothic / Meiryo …）
 *   見出し（jd-section__title, jd-row__k, jd-section__body h3/h4 など）は
 *   個別に var(--font-display) を指定済みなので、そのセレクタの方が
 *   優先（カスケード順で後勝ち）→ 見出しは Yusei Magic 維持される。
 *
 *   対象：
 *     ・WP エディタで書く本文 .jd-section__body（仕事内容・福利厚生 等）
 *     ・募集要項テーブルの値 .jd-row__v
 * ============================================================ */
/* ❌ ここにあった旧フォント上書きルールはバグだったので削除した（2026-06-26）:
   ・"apple-system" が "-apple-system" のタイポ → CSS が無効値として無視
   ・フォントチェーンに Hiragino が一切無く、iOS で sans-serif フォールバック頼みで暴走
   ・結果として「寮費」の「費」等が絵文字フォントに化ける事故が継続発生
   このページの font-family 統制は本ファイル冒頭（line 27〜）の
   「.job-detail / .job-detail *」ルールに一本化したので、ここでの再宣言は不要。 */

/* 本文内の見出しは Yusei Magic を再宣言（冒頭の Hiragino 上書きより後で適用）。
   ＊ 親側を倍掛け（.jd-section__body.jd-section__body）で特異度を 0,2,1 に底上げし、
     冒頭ルール（0,2,0）に確実に勝つ。 */
.jd-section__body.jd-section__body h2,
.jd-section__body.jd-section__body h3,
.jd-section__body.jd-section__body h4,
.jd-section__body.jd-section__body h5 {
	font-family: var(--font-display) !important;
}

/* ============================================================
 *  会社情報（全求人共通の固定セクション・応募ボタン前）
 * ============================================================ */
.jd-company__table { margin: 4px 0 24px; border-top: 1.5px solid var(--ink2); }
.jd-company__row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 18px;
	padding: 15px 6px;
	border-bottom: 1.5px solid var(--ink2);
	align-items: start;
}
.jd-company__k { font-family: var(--font-display); font-weight: bold; font-size: 14px; color: var(--ink2); }
.jd-company__v { font-size: 14.5px; line-height: 1.75; color: var(--ink); }
.jd-company__intro p { font-size: 14.5px; line-height: 1.9; margin: 0 0 16px; }
.jd-company__merit-h {
	font-family: var(--font-display);
	font-weight: bold;
	font-size: 17px;
	margin: 22px 0 14px;
	padding-left: 12px;
	border-left: 5px solid var(--accent);
}
.jd-company__merits { list-style: none; margin: 0 0 18px; padding: 0; }
.jd-company__merits li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 4px;
	border-bottom: 1.5px dotted var(--ink3);
}
.jd-company__merit-no {
	flex: 0 0 auto;
	background: var(--accent2);
	color: #fff;
	font-family: var(--font-display);
	font-weight: bold;
	font-size: 12.5px;
	padding: 5px 12px;
	border-radius: 6px;
	white-space: nowrap;
}
.jd-company__merit-t { font-weight: bold; font-size: 15px; color: var(--accent2); line-height: 1.5; }
.jd-company__note { font-size: 12.5px; color: var(--ink2); line-height: 1.7; margin: 0; }
@media (max-width: 600px) {
	.jd-company__row { grid-template-columns: 84px 1fr; gap: 12px; padding: 13px 2px; }
	.jd-company__k, .jd-company__v { font-size: 13.5px; }
	.jd-company__merits li { gap: 10px; }
	.jd-company__merit-no { font-size: 11.5px; padding: 4px 9px; }
	.jd-company__merit-t { font-size: 14px; }
}