/*!
 * front.css — トップページ専用スタイル
 *   ヒーロー / かんたん求人検索 / 人気のこだわり条件 / バナーストリップ
 *   （Phase 4-B 以降で求人スライダー・特集・急募・コラム等を追加）
 */

/* ============ Hero（メインビジュアル）============ */

.hero {
	position: relative;
	background: var(--paper2);
	overflow: hidden;
}
.hero-bg {
	position: relative;
	height: 520px;
}
.hero-bg .ph {
	position: absolute;
	inset: 0;
	border: none;
	background: linear-gradient(135deg, #D4C4A4 0%, #A8916B 100%);
}
.hero-bg .ph::before,
.hero-bg .ph::after { display: none; }

/* 実画像（picture/img）：背景としてフルカバー表示。
   ・object-fit: cover で画角に合わせて切り抜き
   ・object-position: right で人物（右側）を優先して見せる */
.hero-bg__picture,
.hero-bg__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.hero-bg__img {
	object-fit: cover;
	object-position: center right;
}

/* PC：オーバーレイの左端を、下の「かんたん求人検索（.easy-search）」の
   左端と縦ライン揃いに配置する。
   ・.easy-search は max-width: 1080px で中央配置されているので、
     左端の x 座標 = (100% - 1080px) / 2 で求まる
   ・1100px 未満では fallback として 4% に */
.hero-overlay {
	position: absolute;
	left: calc((100% - 1080px) / 2);
	top: 36px;
	width: 380px;          /* キャンペーンバナーと幅を完全一致させるため固定 */
	max-width: 92vw;
	background: rgba(251, 247, 238, .96);
	padding: 20px 22px 18px;
	border: var(--bd-w-thick) solid var(--ink);
}
@media (max-width: 1100px) {
	.hero-overlay {
		left: 4%;
	}
}
.hero-overlay .kicker {
	display: inline-block;
	background: var(--sticky);
	border: var(--bd-w) solid var(--ink);
	padding: 3px 12px;
	font-family: var(--font-display);
	font-size: 11px;
	margin-bottom: 10px;
	transform: rotate(-1deg);
	box-shadow: var(--shadow-sm);
}
.hero-overlay h1 {
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.35;
	margin-bottom: 10px;
	letter-spacing: .01em;
}
.hero-overlay h1 .mk {
	background: linear-gradient(transparent 60%, var(--sticky) 60%);
	padding: 0 2px;
	margin: 0 2px;
}
.hero-overlay h1 .accent {
	color: var(--accent2);
}
.hero-overlay p {
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink2);
	line-height: 1.7;
}

/* ============ Hero キャンペーンバナー（縦積み・カード型）============
   PC：コピーオーバーレイ（max-width:380px）と同じ幅で直下に配置。
       badge → main → note を縦積みして、視認性のある縦幅を確保。
   SP：ヒーロー下端に置きつつ、求人検索（負マージンで重なる .easy-search）に
       被らない位置（bottom:90px 程度）へ移動。 */
/* ────────────────────────────────────────────────
 * Hero キャンペーンバナー（PC）
 *   構造：
 *     main { left[ badge / 生活支援 ] | num[ 最大 10 万円分 ] }
 *     note（下）
 *     arrow（右端絶対）
 * ──────────────────────────────────────────────── */
.hero-campaign {
	position: absolute;
	left: calc((100% - 1080px) / 2);
	top: 270px;
	width: 420px;          /* 380px → 420px に拡張（10万円分が縦積みにならないよう） */
	max-width: 92vw;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 44px 12px 20px;

	background: linear-gradient(135deg, #ff8c42 0%, #ff6b1a 100%);
	color: #fff;
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 14px;
	text-decoration: none;
	/* ヒーローと同じフォントスタックに統一 */
	font-family: var(--font-display);

	z-index: 3;
	transform-origin: center center;
	animation: heroCampaignPulse 1.8s ease-in-out infinite;
	transition: transform .15s ease, filter .15s ease;
}
.hero-campaign:hover,
.hero-campaign:focus,
.hero-campaign:active {
	text-decoration: none !important;   /* a:hover の下線を無効化 */
}
.hero-campaign:hover {
	animation-play-state: paused;
	filter: brightness(1.05);
	transform: scale(1.04);
}
.hero-campaign:active {
	animation-play-state: paused;
	transform: scale(.98);
}
@keyframes heroCampaignPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-campaign { animation: none; }
}

/* main：左右 2カラム。下端揃え（baseline）で「生活支援」と「10万円分」が同じ底辺に */
.hero-campaign__main {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 14px;
}

/* 左カラム：バッジ＋生活支援を縦積み（バッジが上、3px 下に生活支援） */
.hero-campaign__left {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}
.hero-campaign__badge {
	background: #fff;
	color: #ff6b1a;
	padding: 3px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .05em;
	line-height: 1.2;
	white-space: nowrap;
}
.hero-campaign__lead {
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}

/* 右カラム：「最大 10 万円分」。10 が主役・黄色 */
.hero-campaign__num {
	display: inline-flex;
	align-items: flex-end;       /* baseline → flex-end：「10」の下端に揃える */
	gap: 4px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}
.hero-campaign__num,
.hero-campaign__num-pre,
.hero-campaign__num strong {
	flex-shrink: 0;
	line-height: 1;              /* 行間ゼロで下端を正確に揃える */
}
.hero-campaign__num-pre {
	font-size: 14px;
	font-weight: 700;
}
.hero-campaign__num strong {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif !important;
	font-size: 55px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	color: #fff200;
	margin: 0 2px -0.12em;       /* 下の descender 余白を相殺し、他テキストと下端を揃える */
	font-feature-settings: "tnum" 1;
	position: relative;
	top: 0.04em;                 /* 微調整：さらに下に押し下げる */
}

/* note：下、中央 */
.hero-campaign__note {
	font-size: 11px;
	opacity: .95;
	line-height: 1.3;
}

/* 矢印：右端中央に絶対配置 */
.hero-campaign__arrow {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	font-weight: 900;
	line-height: 1;
}

@media (max-width: 1100px) {
	.hero-campaign { left: 4%; }
}
@media (max-width: 768px) {
	/* SP：元の横長 1 行レイアウト [badge | 生活支援 最大10万円分] + 下に注釈 + 右端矢印 */
	.hero-campaign {
		left: 50%;
		top: auto;
		bottom: 60px;
		width: 92%;
		padding: 8px 36px 8px 10px;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		animation: heroCampaignPulseSP 1.8s ease-in-out infinite;
	}
	.hero-campaign:hover  { transform: translateX(-50%) scale(1.03); }
	.hero-campaign:active { transform: translateX(-50%) scale(.98); }
	@keyframes heroCampaignPulseSP {
		0%, 100% { transform: translateX(-50%) scale(1); }
		50%      { transform: translateX(-50%) scale(1.025); }
	}
	/* main：横並び。__left のラッパーは display: contents で解いて、
	   badge / 生活支援(lead) / 最大10万円分(num) を main の直接子にして
	   align-items: flex-end で全部を「下揃え」に。10 の底辺に他も揃う。 */
	.hero-campaign__main {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
		gap: 8px;
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	.hero-campaign__left {
		display: contents;        /* ラッパー解除：badge と lead が main の直接子になる */
	}
	.hero-campaign__badge {
		font-size: 10px;
		padding: 3px 8px;
		white-space: nowrap;
	}
	.hero-campaign__lead { font-size: 15px; font-weight: 800; line-height: 1; }
	.hero-campaign__num {
		font-size: 17px;
		gap: 3px;
	}
	.hero-campaign__num-pre { font-size: 11px; }
	.hero-campaign__num strong {
		font-size: 28px;
		color: #fff200;
		text-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
		line-height: 1;
		letter-spacing: -.02em;
		margin: 0 1px -0.12em;       /* PCと同じく descender 余白を相殺 */
		position: relative;
		top: 0.04em;                 /* 微調整でさらに下へ */
	}
	.hero-campaign__note  {
		font-size: 10px;
		line-height: 1.3;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.hero-campaign__arrow { right: 12px; font-size: 20px; }
}

/* ============ Easy Search（かんたん求人検索）============ */

/* PC：横長・中央寄せ・ヒーロー下端に重ねる */
.easy-search {
	max-width: 1180px;
	margin: -105px auto 0;
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: var(--radius-xl);
	padding: 24px 32px 26px;
	box-shadow: none;
	position: relative;
	z-index: 5;
}

/* PC とスマホの表示切替 */
.es-desktop { display: block; }
.es-mobile  { display: none; }
@media (max-width: 768px) {
	.es-desktop { display: none; }
	.es-mobile  { display: block; }
}

/* ============ PC：3カード横並び＋連結マーク ============ */

.es-fields {
	display: flex;
	align-items: stretch;
	gap: 14px;
	margin-bottom: 18px;
}

/* es-field-wrap: ボタン＋ドロップダウンを包む。flex item として .es-field と同じ振る舞いに */
.es-field-wrap {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	display: flex;
}
.es-field-wrap .es-field {
	flex: 1 1 auto;
	width: 100%;
}

.es-field {
	flex: 1 1 0;
	min-width: 0;
	background: var(--paper);
	border: var(--bd-w) solid var(--ink);
	border-radius: var(--radius-lg);
	padding: 18px 14px 14px;
	text-align: center;
	box-shadow: 3px 3px 0 var(--ink);
	text-decoration: none;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transition: transform .15s, box-shadow .15s, background .15s;
	min-height: 140px;
}
.es-field:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--ink);
	background: var(--sticky);
	text-decoration: none;
}

.es-field__icon {
	font-size: 42px;
	line-height: 1;
}

.es-field__label {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: bold;
	color: var(--ink);
}

.es-field__select {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink2);
	background: var(--paper2);
	border: 1.5px solid var(--ink2);
	border-radius: 8px;
	padding: 8px 14px;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.es-field__caret {
	font-size: 12px;
	color: var(--ink3);
}

/* フリーワード（form 要素・入力フィールド込み） */
.es-field--input {
	cursor: default;
}
.es-field--input:hover {
	background: var(--paper); /* 入力カードはホバーで黄色に染まらない */
}
.es-field__select--input {
	width: 100%;
	padding: 4px 10px;
}
.es-field__select--input:focus-within {
	border-color: var(--accent);
	background: var(--paper);
}
.es-field__input {
	flex: 1;
	width: 100%;
	background: transparent;
	border: none;
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink);
	outline: none;
	min-width: 0;
	padding: 0;
	text-align: left;
}
.es-field__input::placeholder {
	color: var(--ink3);
}
/* iOS Safari は 16px 未満の input をタップするとページ全体を自動ズームする。
   スマホでは 16px 以上にして自動ズームを防ぐ（PC はデザイン通り 12px 維持）*/
@media (max-width: 768px) {
	.es-field__input {
		font-size: 16px;
	}
}

/* ============ ネイティブ <select> 重ね合わせ ============ */
/* iOS Safari なら画面下からのスクロール選択 UI、PC なら標準ドロップダウンが出る。
   <select> 自体は装飾フィールドの上に opacity:0 で重ね、見た目はカスタム要素を表示 */
.es-field__native {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
	font-size: 16px;  /* iOS の自動ズーム防止 */
	border: none;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
}
.es-field__native:focus + .es-field,
.es-field__native:focus + .es-card {
	background: var(--sticky);
}
/* 装飾フィールドはクリックを下の <select> に通すよう pointer-events 制御 */
.es-field-wrap .es-field,
.es-card-wrap .es-card {
	pointer-events: none;
}
/* 選択値表示の省略表示（長い文字は ... ） */
.es-field__value,
.es-card__value {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}
/* 何か選択されたら値を強調表示 */
.es-field-wrap.is-selected .es-field__value,
.es-card-wrap.is-selected .es-card__value {
	color: var(--ink);
	font-weight: bold;
}
.es-field-wrap.is-selected .es-field,
.es-card-wrap.is-selected .es-card {
	background: var(--sticky);
}
.easy-search__title {
	font-family: var(--font-display);
	font-size: 22px;
	text-align: center;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: normal;
}
.easy-search__title::before {
	content: "🔍";
	font-size: 22px;
}

/* 2カード横並び（+ 印で連結） */
.es-cards {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	margin-bottom: 14px;
}
/* es-card-wrap: ボタン＋ドロップダウンを包む */
.es-card-wrap {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	display: flex;
}
.es-card-wrap .es-card {
	flex: 1 1 auto;
	width: 100%;
}

.es-card {
	flex: 1 1 0;
	min-width: 0;
	background: var(--paper);
	border: var(--bd-w) solid var(--ink);
	border-radius: var(--radius-lg);
	padding: 18px 14px 14px;
	text-align: center;
	box-shadow: 3px 3px 0 var(--ink);
	text-decoration: none;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	transition: transform .15s, box-shadow .15s, background .15s;
}
.es-card:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--ink);
	background: var(--sticky);
	text-decoration: none;
}
.es-card__icon {
	font-size: 42px;
	line-height: 1;
}
.es-card__label {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: bold;
	color: var(--ink);
}
.es-card__select {
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--ink2);
	background: var(--paper2);
	border: 1.5px solid var(--ink2);
	border-radius: 6px;
	padding: 4px 10px;
	margin-top: auto;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.es-card__caret {
	font-size: 9px;
	color: var(--ink3);
}

/* + マーク（カード間の連結記号） */
.es-plus {
	width: 32px;
	height: 32px;
	background: var(--accent);
	color: #fff;
	border: var(--bd-w) solid var(--ink);
	border-radius: 50%;
	box-shadow: 2px 2px 0 var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: bold;
	flex-shrink: 0;
	align-self: center;
	margin: 0 -10px;
	position: relative;
	z-index: 2;
}

/* フリーワード検索フォーム */
.es-keyword {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--paper2);
	border: var(--bd-w) solid var(--ink);
	border-radius: 10px;
	padding: 6px 14px;
	box-shadow: 2px 2px 0 var(--ink);
	max-width: 560px;
	margin: 0 auto 16px;
}
.es-keyword__icon {
	font-size: 16px;
	flex-shrink: 0;
}
.es-keyword input {
	flex: 1;
	border: none;
	background: transparent;
	padding: 8px 0;
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink);
	outline: none;
	min-width: 0;
	/* Safari の input[type="search"] 専用 UA スタイルを解除 */
	-webkit-appearance: none;
	appearance: none;
}
.es-keyword input::placeholder {
	color: var(--ink3);
}

/* 検索ボタン */
.es-cta {
	text-align: center;
	margin-top: 4px;
}
.es-cta .search-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-display);
	font-size: 17px;
	padding: 14px 44px;
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 999px;
	box-shadow: 5px 5px 0 var(--accent);
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
	text-decoration: none;
}
.es-cta .search-btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 6px 6px 0 var(--accent);
	text-decoration: none;
}

/* ============ Section（共通レイアウト）============ */

.section {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px var(--gutter);  /* 上下 64px で統一、セクション間が窮屈にならない */
}
/* .section.section--alt で specificity を上げて、モバイル .section { padding... } に勝たせる */
.section.section--alt,
.section--alt {
	background: var(--paper2);
	max-width: none;
	padding: 0;  /* .section のデフォルト padding を打ち消す（.section__inner が padding 担当） */
}
.section--alt > .section__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px var(--gutter);  /* 通常 section と上下統一 */
}
/* .section--voices: URGENT(--alt) と差別化するための薄い水色背景 */
.section.section--voices,
.section--voices {
	background: #EAF3F8;
	max-width: none;
	padding: 0;
}
.section--voices > .section__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px var(--gutter);
}
.section--no-top { padding-top: 0; }

.sec-title {
	font-family: var(--font-display);
	font-size: 36px;
	text-align: center;
	margin-bottom: 8px;
	line-height: 1.3;
	position: relative;
	padding-top: 18px;
	font-weight: normal;
}
.sec-title::before {
	content: "";
	display: block;
	width: 80px;
	height: 5px;
	background: var(--ink);
	margin: 0 auto 14px;
	border-radius: 3px;
}
.sec-title .deco-en {
	display: block;
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--accent);
	margin-bottom: 6px;
	letter-spacing: .15em;
}
.sec-sub {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink2);
	text-align: center;
	margin-bottom: 36px;
}

/* ============ こだわり条件で選ぶ（軽量・タグフロー型）============ */

.conditions-section {
	padding: 50px var(--gutter) 36px;
}
.conditions-block {
	max-width: 1080px;
	margin: 0 auto;
}
.conditions-block__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1.5px dashed var(--ink2);
}
.conditions-block__icon {
	display: inline-flex;
	width: 28px;
	height: 28px;
	background: var(--accent);
	color: #fff;
	border-radius: 6px;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: bold;
	box-shadow: 2px 2px 0 var(--ink);
	border: 1.5px solid var(--ink);
	flex-shrink: 0;
}
.conditions-block__title {
	font-family: var(--font-display);
	font-size: 20px;
	margin: 0;
	font-weight: normal;
	line-height: 1.3;
}
.conditions-block__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: center;
}
.conditions-tag {
	font-family: var(--font-display);
	font-size: 13px;
	padding: 7px 16px;
	background: var(--paper);
	border: 1.8px solid var(--ink);
	border-radius: 999px;
	text-decoration: none;
	color: var(--ink);
	transition: background .15s, transform .15s, box-shadow .15s;
	white-space: nowrap;
	line-height: 1.4;
}
.conditions-tag:hover {
	background: var(--sticky);
	text-decoration: none;
	transform: translate(-1px, -1px);
	box-shadow: 2px 2px 0 var(--ink);
}
.conditions-tag.is-extra {
	display: none;
}
.conditions-block.is-expanded .conditions-tag.is-extra {
	display: inline-block;
}

/* もっと見るボタン：タグの並びに混ぜる（タグと並列） */
.conditions-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-size: 13px;
	padding: 7px 14px;
	background: var(--ink);
	color: var(--paper);
	border: 1.8px solid var(--ink);
	border-radius: 999px;
	box-shadow: 2px 2px 0 var(--accent);
	cursor: pointer;
	transition: transform .15s, box-shadow .15s, background .15s;
	line-height: 1.4;
	white-space: nowrap;
}
.conditions-more-btn:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--accent);
	background: var(--accent);
}
.conditions-more-btn__plus {
	font-size: 14px;
	line-height: 1;
	transition: transform .2s;
}
.conditions-block.is-expanded .conditions-more-btn__plus {
	transform: rotate(45deg);
}
.conditions-block.is-expanded .conditions-more-btn__label::after {
	content: "を閉じる";
}

/* ============ Banner Strip（バナー4本）============ */

.banner-strip-wrap {
	position: relative;
	max-width: 1180px;
	margin: 18px auto 0;
}
.banner-arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(38, 36, 31, .28);
	color: #fff;
	border: none;
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: none;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	transition: background .15s, transform .15s;
}
.banner-arrow:hover {
	background: rgba(38, 36, 31, .5);
}
.banner-arrow:active {
	transform: translateY(-50%) scale(.92);
}
.banner-arrow--prev { left: 6px; }
.banner-arrow--next { right: 6px; }
.banner-arrow span {
	display: inline-block;
	transform: translateY(-2px);
}
.banner-arrow--prev span { margin-right: 1px; }
.banner-arrow--next span { margin-left: 1px; }

.banner-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.banner-card {
	/* 2:1 比率（横幅 ≈ 286px のとき高さ 143px）。
	   ・aspect-ratio で横幅追従にし、画面サイズが変わっても比率を維持
	   ・height: 143px はフォールバック（aspect-ratio 非対応ブラウザ用）*/
	aspect-ratio: 2 / 1;
	height: auto;
	min-height: 143px;
	border: var(--bd-w) solid var(--ink);
	border-radius: 0;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 14px 18px;
	cursor: pointer;
	transition: transform .15s;
	text-decoration: none;
}
.banner-card:hover {
	transform: translate(-1px, -1px);
	text-decoration: none;
}
.banner-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.banner-card .bc-text {
	position: relative;
	z-index: 2;
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.4;
	color: var(--ink);
	background: rgba(255, 255, 255, .85);
	padding: 8px 12px;
	border: 1.5px solid var(--ink);
	border-radius: 6px;
}
/* 画像未設定時のデフォルト背景（グラデーション）。
   画像が設定された場合は、インライン style="background-image:..." がより高い特異度で上書きする。
   ※ 以前 .banner-card--has-image に background:none !important を当てていたが、
      その !important がインライン style の background-image まで打ち消していたためバグになっていた。
      画像セット時は背景プロパティ全体を inline で上書きするので、別途 has-image 用ルールは不要。 */
.banner-card--b1 .banner-card__bg { background: linear-gradient(135deg, #FFE082, #FFB300); }
.banner-card--b2 .banner-card__bg { background: linear-gradient(135deg, #A5D6A7, #4CAF50); }
.banner-card--b3 .banner-card__bg { background: linear-gradient(135deg, #90CAF9, #1976D2); }
.banner-card--b4 .banner-card__bg { background: linear-gradient(135deg, #F8BBD0, #E91E63); }

/* PC：クローンを隠す（ループ用なのでスマホ専用） */
@media (min-width: 769px) {
	.banner-card[data-clone] {
		display: none;
	}
}

/* PC：こだわり条件「もっと見る」を隠し、全タグを表示 */
@media (min-width: 769px) {
	.conditions-more-btn {
		display: none;
	}
	.conditions-tag.is-extra {
		display: inline-block;
	}
}

/* ============ Responsive ============ */

@media (max-width: 1024px) {
	.hero-bg { height: 460px; }
	.hero-overlay {
		max-width: 300px;
		padding: 16px 18px 14px;
	}
	.hero-overlay h1 { font-size: 24px; }
	.hero-overlay p { font-size: 11px; }
	.easy-search {
		max-width: 540px;
		margin-top: -300px;
		margin-right: 3%;
		padding: 20px 22px;
	}
	.es-card__icon { font-size: 36px; }
	.sec-title { font-size: 30px; }
	.banner-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
 *  タブレット中間サイズ（769〜1279px）：FV と検索バーを完全分離
 *
 *   ・上の @media (max-width: 1024px) の負マージン -300px が
 *     検索バーを FV の人物に思い切り重ねてしまうので、ここで打ち消す
 *   ・FV はやや低めに（イラストが見やすい範囲）
 *   ・検索バーは FV の下に普通に並べる
 * ============================================================ */
@media (min-width: 769px) and (max-width: 1279px) {
	.hero-bg { height: 420px; }
	.hero-overlay {
		max-width: 320px;
		left: 18px;             /* エリア縦揃いは PC 時のみ。中間サイズは画面端寄せ */
		top: 24px;
	}
	.easy-search {
		max-width: 96%;
		margin: -56px auto 0;   /* FV 下端に少し重ねて配置 */
		margin-right: auto;
	}
}

@media (max-width: 768px) {
	/* スマホ：オーバーレイは画像に重ねる構成のまま。
	   ただし画像内の人物がオーバーレイ（左上）と被るので、
	   ・画像を画面右側 65% に縮めて配置
	   ・左 35% は画像と同系統の薄いベージュで埋める
	   これで左上のオーバーレイと人物が完全に分離する */
	.hero-bg {
		height: 320px;
		background-color: #D6C09C;  /* 画像の背景と同色（指定値） */
	}
	.hero-bg__img {
		left: auto;          /* 既存の inset:0 の left をリセット */
		right: 0;
		width: 92%;          /* 画像はほんの僅かに右寄せ。左 8% を背景色帯に */
		object-position: center;
	}
	.hero-overlay {
		position: absolute;
		left: 4%;
		right: auto;
		top: 14px;
		max-width: 62%;     /* 横幅を抑えて右側に人物スペースを確保 */
		margin: 0;
		padding: 12px 14px 10px;
	}
	.hero-overlay .kicker {
		font-size: 10px;
		padding: 2px 10px;
		margin-bottom: 6px;
	}
	.hero-overlay h1 { font-size: 19px; line-height: 1.3; margin-bottom: 6px; }
	.hero-overlay p { font-size: 11px; line-height: 1.55; }

	/* easy-search はヒーロー下部にちょい重ねで配置（ヒーローと一緒に視界に入る） */
	.easy-search {
		max-width: none;
		margin: -34px 4% 0;
		padding: 16px 14px 16px;
		border-radius: var(--radius-lg);
	}
	.easy-search__title {
		font-size: 17px;
		margin-bottom: 12px;
	}
	.easy-search__title::before { font-size: 18px; }

	.es-cards {
		margin-bottom: 12px;
	}
	.es-card {
		padding: 12px 6px 10px;
		gap: 5px;
		box-shadow: 2px 2px 0 var(--ink);
	}
	.es-card__icon { font-size: 32px; }
	.es-card__label { font-size: 13px; }
	/* 選択値の pill：横幅をカード内いっぱいに広げ、文字も大きく */
	.es-card__select {
		font-size: 13px;
		padding: 8px 12px;
		width: 100%;
		justify-content: center;
	}
	.es-card__value {
		flex: 1 1 auto;
		text-align: center;
	}
	.es-card__caret { font-size: 11px; }
	.es-plus {
		width: 26px;
		height: 26px;
		font-size: 15px;
		margin: 0 -6px;
	}
	.es-keyword {
		padding: 3px 12px;
		margin-bottom: 10px;
	}
	.es-keyword input {
		/* iOS Safari の自動ズーム防止：16px 必須、!important で UA スタイル確実上書き */
		font-size: 16px !important;
		padding: 7px 0;
	}
	/* スマホ全 input/textarea でも保険：iOS は font-size 16px 未満で自動ズーム */
	input[type="search"],
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	textarea {
		font-size: 16px !important;
	}
	.es-keyword__icon { font-size: 14px; }

	.es-cta .search-btn { padding: 12px 32px; font-size: 15px; }

	.sec-title { font-size: 24px; }
	.section { padding: 36px 16px 36px; }  /* 上下とも 36px（下は少しゆとり） */
	.section--alt > .section__inner { padding: 36px 16px 26px; }
	.section--voices > .section__inner { padding: 36px 16px 36px; }
	.sec-sub { margin-bottom: 10px; }
	.sec-title { font-size: 22px; padding-top: 6px; }
	.sec-title::before { width: 50px; height: 4px; margin-bottom: 4px; }
	.sec-title .deco-en { margin-bottom: 2px; }

	/* 人気のこだわり条件チップをコンパクト化（より多くを1行に収める） */
	.pop-chips {
		gap: 6px;
		padding: 0 4px;
	}
	.pop-chip {
		font-size: 12px;
		padding: 6px 12px;
		gap: 4px;
		box-shadow: 2px 2px 0 var(--ink);
		border-width: 1.5px;
	}
	.pop-chip .ic {
		font-size: 12px;
	}

	/* バナーを横スクロールスライダーに */
	/* wrap には padding を入れない（バナーが広く取れるように） */
	.banner-strip-wrap {
		padding: 0;
	}
	.banner-strip {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
		padding: 2px 0 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.banner-strip::-webkit-scrollbar {
		display: none;
	}
	/* バナーは strip 幅の 85%（残り 7.5% × 2 が左右のピーク）。
	   高さはベースの aspect-ratio: 2/1 に追従させる（min-height で下限保証） */
	.banner-card {
		flex: 0 0 85%;
		scroll-snap-align: center;
		scroll-snap-stop: always;  /* 強くスワイプしても1枚ずつしか進まない */
		min-height: 0;             /* PC のフォールバックを解除 */
		padding: 18px 20px;
		border-radius: 0;
	}
	.banner-card .bc-text {
		font-size: 18px;
	}

	/* 矢印を wrap の左右はじ（=画面はじ近く）に配置・バナー領域の外側に */
	.banner-arrow {
		display: inline-flex;
	}
	.banner-arrow--prev { left: -4px; }
	.banner-arrow--next { right: -4px; }

	/* バナーセクションの上下余白を圧縮 */
	.section.section--no-top {
		padding-top: 0;
		padding-bottom: 18px;
	}

	/* こだわり条件で選ぶ（スマホ最適化） */
	.conditions-section {
		padding: 32px 16px 24px;
	}
	.conditions-block__header {
		gap: 10px;
		margin-bottom: 12px;
		padding-bottom: 10px;
	}
	.conditions-block__icon {
		width: 24px; height: 24px;
		font-size: 15px;
	}
	.conditions-block__title {
		font-size: 17px;
	}
	.conditions-block__tags {
		gap: 6px 8px;
	}
	.conditions-tag {
		font-size: 12px;
		padding: 5px 12px;
	}
	.conditions-more-btn {
		font-size: 12px;
		padding: 5px 12px;
	}
	.conditions-more-btn__plus {
		font-size: 13px;
	}
	/* スマホでは「もっと見る」不要 → 全タグを最初から表示 */
	.conditions-more-btn {
		display: none;
	}
	.conditions-tag.is-extra {
		display: inline-block;
	}
}

@media (max-width: 480px) {
	.banner-card {
		flex: 0 0 86%;
		padding: 14px 16px;
		/* height は base の aspect-ratio に任せる（自動 = 横幅 × 0.5） */
	}
	.banner-card .bc-text {
		font-size: 16px;
	}
	.banner-arrow--prev { left: -2px; }
	.banner-arrow--next { right: -2px; }
}

/* ============ 今月のオススメ求人（PICKUP JOBS）============ */

.job-slider {
	position: relative;
	padding: 0 60px;
	max-width: 1280px;
	margin: 0 auto;
}
/* スライダー本体：3カード表示・矢印で1枚ずつスライド */
.job-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 22px;
	padding: 6px 0;  /* シャドー潰れ防止 */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.job-track::-webkit-scrollbar { display: none; }
.job-card {
	flex: 0 0 calc((100% - 44px) / 3);  /* 3カード表示（22px×2gap分を引く）*/
	scroll-snap-align: start;
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 0;                    /* 四角（角丸なし） */
	background: var(--paper);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .15s;
	text-decoration: none;
	color: var(--ink);
	min-height: 440px;                   /* タイトル長さに依存しない統一高さ（PC基準）*/
}
.job-card:hover {
	transform: translate(-1px, -1px);
	text-decoration: none;
}
.job-card__img {
	/* 推奨 4:3 に統一。違う比率の画像は object-fit:cover で中央クロップ。 */
	aspect-ratio: 16 / 10;
	width: 100%;
	border-bottom: var(--bd-w) solid var(--ink);
	position: relative;
	overflow: hidden;
}
.job-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.job-card__img .ph {
	height: 100%;
	border: none;
}
.job-card__img .ph::before,
.job-card__img .ph::after { display: none; }
/* バッジ：タイトル上に通常フローで配置（旧 absolute は廃止） */
.job-card__badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.job-badge {
	font-family: var(--font-display);
	font-size: 11px;
	padding: 4px 10px;
	border: 1.5px solid var(--ink);
	background: var(--paper);
	box-shadow: var(--shadow-sm);
}
.job-badge--new { background: var(--red); color: #fff; }
.job-badge--urg { background: #FFE082; }
.job-badge--in  { background: #B5E45C; }
/* archive 側の ja-badge と同じ5色をミラー（job-meta.php の mitsukarukun_badge_color_map に対応） */
.job-badge--red    { background: var(--red);    color: #fff; }
.job-badge--orange { background: var(--accent); color: #fff; }
.job-badge--yellow { background: #FFE082; }
.job-badge--green  { background: #A5D6A7; }
.job-badge--blue   { background: #90CAF9; color: var(--ink); }   /* 環境・働き方系 */

.job-card__body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.job-card__title {
	font-family: var(--font-display);
	font-size: 16px;
	line-height: 1.5;
}
.job-card__company {
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--ink2);
}
/* 月収数字を大きく赤くハイライト（HOMEオススメ求人） */
.job-card__spec-row--pay .job-card__spec-vl {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px;
}
.job-card__spec-pre {
	font-weight: normal;
	color: var(--ink2);
	font-size: 12px;
}
.job-card__spec-num {
	color: var(--red);
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: bold;
	padding: 0 2px;
	line-height: 1;
}
.job-card__spec-unit {
	font-weight: 700;
	color: var(--ink);
}
.job-card__spec-sub {
	font-size: 10.5px;
	color: var(--ink2);
	font-weight: normal;
	margin-left: 4px;
}
.job-card__meta {
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 4px;
	align-items: baseline;
	font-family: var(--font-display);
	font-size: 12px;
	border-top: 1.5px dashed var(--ink2);
	padding-top: 8px;
	color: var(--ink);
}
/* spec rows（月収/特典/寮費）：特集ページのカードと同じ構造で点線枠ボックス */
.job-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;
	margin-top: auto;   /* カード下端に張りつけ、上の余白はストレッチで吸収 */
}
.job-card__spec-row {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 8px;
	align-items: baseline;
}
.job-card__spec-lb {
	font-weight: bold;
	color: var(--ink);
	white-space: nowrap;
}
.job-card__spec-vl {
	color: var(--ink);
	font-weight: 600;
	word-break: break-word;
}
/* レガシー残置（互換）：旧 .job-card__pay / .job-card__tags の見え方は最小限保持。
   新カード構造に置き換わっているので使われないが、削除はせず後方互換 */
.job-card__pay {
	font-size: 17px;
	color: var(--accent2);
	font-weight: bold;
}
.job-card__tags {
	display: none;   /* 新UI ではタグ列は廃止（spec rows で情報集約） */
}
.job-card__cta {
	display: block;
	margin: 0 18px 18px;
	padding: 11px;
	text-align: center;
	background: var(--accent);
	color: #fff;
	font-family: var(--font-display);
	font-size: 14px;
	border: var(--bd-w) solid var(--ink);
	border-radius: 10px;
	box-shadow: 3px 3px 0 var(--ink);
	text-decoration: none;
	transition: transform .15s;
}
.job-card__cta:hover {
	transform: translate(-1px, -1px);
	text-decoration: none;
	color: #fff;
}

/* スライダー矢印（PICKUP JOBS / 他のスライダーでも流用可） */
.slide-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	font-family: var(--font-display);
	font-size: 24px;
	box-shadow: var(--shadow);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	z-index: 3;
	padding: 0;
	transition: transform .15s, box-shadow .15s, background .15s;
}
.slide-arrow:hover {
	transform: translateY(calc(-50% - 1px)) translateX(-1px);
	box-shadow: 5px 5px 0 var(--ink);
	background: var(--sticky);
}
.slide-arrow--prev { left: 0; }
.slide-arrow--next {
	right: 0;
	background: var(--sticky);  /* デフォルトで黄色 */
}

/* slide-controls：矢印＋ドットを横並びにまとめる
   PC では display:contents で「無い」状態にして、従来の絶対配置を維持 */
.slide-controls {
	display: contents;
}

/* スライダーのドットインジケーター */
.slide-dots {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 20px;
}
.slide-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--paper);
	border: 2px solid var(--ink);
	padding: 0;
	cursor: pointer;
	transition: background .15s, transform .15s;
}
.slide-dot:hover {
	transform: scale(1.2);
}
.slide-dot.is-active {
	background: var(--ink);
}

/* 「もっと見る」ボタン */
.viewmore {
	text-align: center;
	margin-top: 28px;
}
.viewmore a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 13px;
	padding: 8px 22px;
	background: transparent;
	border: 1.5px solid var(--ink);
	border-radius: 0;          /* 四角 */
	color: var(--ink);
	text-decoration: none;
	transition: background .15s;
}
.viewmore a:hover {
	background: var(--sticky);
	text-decoration: none;
}
.viewmore a::after {
	content: "→";
	font-size: 14px;
}

/* ============ 求人特集（FEATURE）============ */

/* ============================================================
 *  特集スライダー（FEATURE SLIDER）— 雑誌風 / ページめくり感
 *    ・他セクションと異なるエディトリアル調（影なし・細い罫線）
 *    ・前後の特集が左右にチラ見えして「ページめくり」のニュアンスを出す
 *    ・スライドは scroll-snap で中央配置、矢印クリックで scrollIntoView
 *    ・JS は IntersectionObserver で現在位置を検知してタブ/下部表示を更新
 * ============================================================ */
.feat-slider-section {
	padding: 70px 16px 60px;
	background: var(--paper);
}
.feat-slider {
	max-width: 1280px;
	margin: 0 auto;
}

/* ━━━ タブナビ（上の小サムネ列）─ 雑誌の目次ふう ━━━ */
.feat-slider__tabs {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.feat-slider__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	width: 96px;
	transition: opacity .2s;
	opacity: .55;
}
.feat-slider__tab:hover { opacity: .85; }
.feat-slider__tab.is-current { opacity: 1; }
.feat-slider__tab-thumb {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--paper2);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ink2);
	transition: border-color .15s, transform .15s;
}
.feat-slider__tab-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.feat-slider__tab.is-current .feat-slider__tab-thumb {
	border: 2px solid var(--accent);
	transform: translateY(-2px);
}
.feat-slider__tab-ph { font-size: 16px; opacity: .35; }
.feat-slider__tab-num {
	font-family: var(--font-display);
	font-size: 10.5px;
	font-weight: bold;
	color: var(--ink);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.feat-slider__tab.is-current .feat-slider__tab-num {
	color: var(--accent);
	border-bottom: 1.5px solid var(--accent);
	padding-bottom: 1px;
}

/* ━━━ ステージ（前後ピーク付き scroll-snap スライダー） ━━━ */
.feat-slider__stage {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0;
}
.feat-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	background: var(--paper);
	color: var(--ink);
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
}
.feat-slider__arrow:hover {
	background: var(--ink);
	color: var(--paper);
}
.feat-slider__arrow span { display: block; margin-top: -2px; }
.feat-slider__arrow--prev { left: 8px; }
.feat-slider__arrow--next { right: 8px; }

.feat-slider__viewport {
	flex: 1;
	min-width: 0;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	gap: 24px;
	padding: 4px 8%;             /* 左右パディングで前後スライドのピークが見える */
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}
.feat-slider__viewport::-webkit-scrollbar { display: none; }

.feat-slider__track {
	display: contents;            /* flex 親としては .feat-slider__viewport 側を使う */
}

.feat-slider__slide {
	flex: 0 0 84%;                /* 中央スライドが約84%、左右 8% ずつピーク */
	scroll-snap-align: center;
	scroll-snap-stop: always;
	transition: opacity .35s ease, transform .35s ease;
	opacity: .35;                  /* 非アクティブはうっすら */
	transform: scale(.96);
}
.feat-slider__slide.is-current {
	opacity: 1;
	transform: scale(1);
}

.feat-slider__slide-link {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	color: var(--ink);
	text-decoration: none;
	background: var(--paper);
	/* 枠線は他カードと統一（太い黒線・わずかに角丸）。影は雑誌セクションの落ち着いた雰囲気のためなし */
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 4px;
	overflow: hidden;
	transition: transform .15s;
}
.feat-slider__slide-link:hover {
	color: var(--ink);
	text-decoration: none;
	transform: translate(-2px, -2px);
}
.feat-slider__slide-image {
	aspect-ratio: 16 / 10;
	background: var(--paper2);
	overflow: hidden;
}
.feat-slider__slide-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.feat-slider__slide-ph {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	opacity: .35;
}
.feat-slider__slide-info {
	padding: 36px 40px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
	background: #fff;
}
/* タグは "FEATURE 01" 風の英数字＋アンダーラインで雑誌見出しふう */
.feat-slider__slide-tag {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: bold;
	color: var(--accent);
	background: transparent;
	padding: 0 0 6px;
	border-bottom: 1.5px solid var(--accent);
	letter-spacing: .15em;
	align-self: flex-start;
	text-transform: uppercase;
	border-radius: 0;
}
.feat-slider__slide-title {
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: bold;
	line-height: 1.4;
	margin: 0;
	color: var(--ink);
	letter-spacing: .01em;
	/* タイトルが長い時のみ2行まで（短い場合は自然な高さでOK）*/
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}
.feat-slider__slide-sub {
	font-family: var(--font-display);
	font-size: 13.5px;
	line-height: 1.8;
	margin: 0;
	color: var(--ink2);
	/* 2行固定でカード高さを統一（足りない場合は空白、超える場合は末尾省略）*/
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(1.8em * 2);
}
.feat-slider__slide-cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: bold;
	color: var(--ink);
	background: transparent;
	border: none;
	border-bottom: 1.5px solid var(--ink);
	padding: 4px 0 4px;
	border-radius: 0;
	letter-spacing: .1em;
	margin-top: 6px;
	transition: color .15s, border-color .15s, transform .15s;
}
.feat-slider__slide-link:hover .feat-slider__slide-cta {
	color: var(--accent);
	border-bottom-color: var(--accent);
	transform: translateX(4px);
}

/* ━━━ インジケーター（下の◯/◯）─ シンプルなテキスト型 ━━━ */
.feat-slider__indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink2);
	letter-spacing: .04em;
}
.feat-slider__indicator-pos {
	background: transparent;
	color: var(--ink);
	padding: 0;
	border-radius: 0;
	font-weight: bold;
	letter-spacing: .15em;
}
.feat-slider__indicator-pos [data-feat-cur] {
	color: var(--accent);
	font-size: 18px;
}
.feat-slider__indicator-sep { color: var(--ink2); }
.feat-slider__indicator-name {
	color: var(--ink);
	font-weight: 600;
	font-size: 13px;
}

/* ━━━ 「特集をもっと見る」ボタン（雑誌風・テキストリンク調） ━━━ */
.feat-slider__more {
	text-align: center;
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--ink2);
}
.feat-slider__more-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: bold;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: .12em;
	padding: 10px 24px;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	background: transparent;
	transition: background .15s, color .15s;
}
.feat-slider__more-btn:hover {
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
}
.feat-slider__more-btn span { font-size: 16px; transition: transform .15s; }
.feat-slider__more-btn:hover span { transform: translateX(4px); }

/* ============================================================
 *  旧グリッドレイアウト（残置されてた .feat-grid 内のスタイルは
 *  もう使われないが、別箇所で使用される可能性を考えて残す）
 * ============================================================ */
.feat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	max-width: 1180px;
	margin: 0 auto;
}
.feat-card {
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 16px;
	box-shadow: var(--shadow-lg);
	font-family: var(--font-display);
	color: var(--ink);
	overflow: hidden;
	transition: transform .15s, box-shadow .15s;
	text-decoration: none;
	background: var(--paper);
}
.feat-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--ink);
	text-decoration: none;
}

/* ========================
   メディア領域（画像）
   ・画像は 16:10 で固定枠に切り抜き表示
   ・自然サイズに左右されない
======================== */
.feat-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--paper2);
	overflow: hidden;
}
.feat-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.feat-card__media-ph {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 38px;
	opacity: .4;
}

/* ========================
   本文領域（タグ・タイトル・サブ・CTA）
======================== */
.feat-card__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ========================
   ヒーロー（1番目）：左に画像、右に本文（PC）
======================== */
.feat-card--big {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
.feat-card--big .feat-card__media {
	aspect-ratio: 16 / 10;
	height: 100%;
}
.feat-card--big .feat-card__body {
	padding: 28px 32px;
	justify-content: center;
	gap: 12px;
}

/* ========================
   小カード（2-5番目）：縦並び（画像上＋本文下）
======================== */
.feat-card--small {
	display: flex;
	flex-direction: column;
}
.feat-card__tag {
	font-size: 11px;
	background: var(--ink);
	color: var(--paper);
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	align-self: flex-start;
	letter-spacing: .05em;
}
.feat-card__title {
	font-size: 17px;
	line-height: 1.4;
	margin: 0;
	font-weight: bold;
}
.feat-card--big .feat-card__title {
	font-size: 26px;
	line-height: 1.3;
}
.feat-card__sub {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ink2);
	margin: 0;
}
.feat-card--big .feat-card__sub {
	font-size: 14px;
	color: var(--ink);
}
.feat-card__cta {
	font-size: 12px;
	background: var(--paper);
	border: var(--bd-w) solid var(--ink);
	padding: 7px 14px;
	border-radius: 999px;
	align-self: flex-start;
	box-shadow: 2px 2px 0 var(--ink);
	margin-top: 4px;
}
.feat-card--big .feat-card__cta {
	font-size: 13px;
	padding: 9px 18px;
	box-shadow: 3px 3px 0 var(--ink);
	margin-top: 6px;
}
/* カラーアクセント：本文領域の左ボーダーまたは見出しの下線で色を効かせる */
.feat-card--c1 .feat-card__body { border-top: 4px solid #FFE082; }
.feat-card--c2 .feat-card__body { border-top: 4px solid #A5D6A7; }
.feat-card--c3 .feat-card__body { border-top: 4px solid #FFAB91; }
.feat-card--c4 .feat-card__body { border-top: 4px solid #81D4FA; }
.feat-card--c5 .feat-card__body { border-top: 4px solid #CE93D8; }
/* ヒーローは本文左に縦ボーダーで色付け（横並びレイアウト用） */
.feat-card--big.feat-card--c1 .feat-card__body { border-top: none; border-left: 6px solid #FFE082; }
.feat-card--big.feat-card--c2 .feat-card__body { border-top: none; border-left: 6px solid #A5D6A7; }
.feat-card--big.feat-card--c3 .feat-card__body { border-top: none; border-left: 6px solid #FFAB91; }
.feat-card--big.feat-card--c4 .feat-card__body { border-top: none; border-left: 6px solid #81D4FA; }
.feat-card--big.feat-card--c5 .feat-card__body { border-top: none; border-left: 6px solid #CE93D8; }

/* ============ 急募・特別案件ピックアップ（URGENT）============ */

.urgent-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 1180px;
	margin: 0 auto;
}
.urgent-card {
	display: grid;
	/* 画像列を 170px → 240px に拡大（16:10 のまま大きく＝クロップなし）。
	   本文(1fr)はそのぶん右にずれる。※ スマホは下の媒体クエリで別グリッドに上書き。 */
	grid-template-columns: 90px 240px 1fr auto;
	gap: 20px;
	align-items: center;
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 4px;  /* 求人カードは四角でとういつ */
	padding: 18px 22px;
	box-shadow: var(--shadow-lg);
	color: var(--ink);
}
/* カード自体は div なので hover 効果は不要（リンクは CTA のみ） */
.urgent-card__badge {
	font-family: var(--font-display);
	font-size: 15px;
	color: #fff;
	text-align: center;
	padding: 18px 8px;
	border-radius: 10px;
	line-height: 1.2;
	/* 点滅じゃなく「光る」演出。バッジ周囲に色付きの glow が広がる */
	animation: urgent-glow 1.6s ease-in-out infinite;
	transform-origin: center;
	/* デフォルトの光色（赤系）。バッジ色に合わせて --glow で上書き */
	--glow: 244, 67, 54;
}
@keyframes urgent-glow {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(var(--glow), 0);
	}
	50% {
		transform: scale(1.06);
		box-shadow:
			0 0 14px 3px rgba(var(--glow), 0.75),
			0 0 28px 8px rgba(var(--glow), 0.35);
	}
}
/* アニメーション抑制設定のユーザーには動きを止める */
@media (prefers-reduced-motion: reduce) {
	.urgent-card__badge {
		animation: none;
	}
}
.urgent-badge--red    { background: var(--red);  --glow: 244, 67, 54; }
.urgent-badge--orange { background: #FB8C00;     --glow: 251, 140, 0; }
.urgent-badge--yellow { background: #F9A825; color: var(--ink); --glow: 249, 168, 37; }
.urgent-badge--green  { background: #43A047; --glow: 67, 160, 71; }
.urgent-badge--blue   { background: #1E88E5; --glow: 30, 136, 229; }

.urgent-card__img {
	/* 推奨 4:3 に統一 */
	aspect-ratio: 16 / 10;
	width: 100%;
	border-radius: 0;        /* 角丸なし・四角 */
	overflow: hidden;        /* 枠線なし */
}
.urgent-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.urgent-card__img .ph {
	height: 100%;
	border: none;
	background: linear-gradient(135deg, #FFE9C7, #FFD89A);
}
.urgent-card__img .ph::before,
.urgent-card__img .ph::after { display: none; }

.urgent-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: var(--font-display);
	min-width: 0;
}
/* 急募カードのヘッドライン：ラベル + 数字 + 単位 + 括弧補足 を 1 行横並び
   （2026-06-30 ユーザー指示で PC/スマホ両方横組みに統一。旧 A 案の縦組みは廃止）
   inline-block + vertical-align: bottom で下端揃え（Safari 含む全ブラウザ確実） */
.urgent-card__headline {
	display: block;
	white-space: nowrap;
	line-height: 1;
}
.urgent-card__label {
	display: inline-block;
	vertical-align: bottom;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: bold;
	color: var(--ink);
	letter-spacing: .08em;
	background: var(--paper2, #fff8ec);
	padding: 3px 10px 3px 8px;
	border-left: 3px solid var(--accent);
	border-radius: 0 4px 4px 0;
	margin-right: 8px;
	line-height: 1.2;
}
.urgent-card__amount {
	display: inline-block;
	vertical-align: bottom;
	line-height: 1;
}
.urgent-card__num {
	font-family: var(--font-display);
	font-size: 44px;
	color: var(--red);
	font-weight: bold;
	padding: 0 2px;
	letter-spacing: -.02em;
	line-height: 1;
	vertical-align: bottom;
}
.urgent-card__unit {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--ink);
	font-weight: bold;
	letter-spacing: .02em;
	vertical-align: bottom;
}
/* 括弧補足「（時給1,400円〜）」：数字の後に小さくインラインで続ける（横並び統一） */
.urgent-card__sub {
	display: inline;
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink2);
	font-weight: normal;
	letter-spacing: .02em;
	margin-left: 4px;
	vertical-align: bottom;
	white-space: nowrap;
}
.urgent-card__title {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
}
.urgent-card__meta {
	display: flex;
	gap: 16px;
	font-size: 12px;
	color: var(--ink2);
	flex-wrap: wrap;
}
.urgent-card__deadline {
	font-size: 12px;
	background: #FFF1B8;
	border: 1.5px dashed var(--ink);
	padding: 4px 12px;
	border-radius: 4px;
	align-self: flex-start;
	color: var(--ink);
}
.urgent-card__cta {
	font-family: var(--font-display);
	font-size: 14px;
	background: var(--accent);
	color: #fff;
	border: var(--bd-w-thick) solid var(--ink);
	padding: 16px 26px;
	border-radius: 12px;
	box-shadow: none;
	white-space: nowrap;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.urgent-card__cta:hover {
	text-decoration: none;
	color: #fff;
}

/* ============ レスポンシブ（求人系3セクション）============ */

@media (max-width: 1024px) {
	.job-card { flex: 0 0 calc((100% - 22px) / 2); }  /* タブレットは2カード表示 */
	/* タブレット：ヒーロー上＋下4枚を 2×2 に折り返し */
	.feat-grid {
		grid-template-columns: 1fr 1fr;
	}
	.feat-card--big {
		grid-column: 1 / -1;
		/* タブレットも左右レイアウトを維持（画面幅あるので2カラム維持） */
	}
}

@media (max-width: 768px) {
	/* スマホ：バナーと同じく「中央カード+左右チラ見え」のネイティブ scroll-snap 方式
	   - flex: 0 0 82% で残り 18% を左右 9% ずつ前後カードの覗き見に
	   - scroll-snap-align: center で中央スナップ
	   - 矢印は slider 端の peek 領域に絶対配置
	   - 無限ループは JS で DOM クローン方式（バナーと同じ） */
	.job-slider {
		margin: 24px -16px 0;
		padding: 0;
		position: relative;
	}
	.job-track {
		position: relative;
		display: flex;
		align-items: flex-start;       /* 各カード自然サイズ、stretch しない */
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
		padding: 4px 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.job-track::-webkit-scrollbar { display: none; }

	/* 中央カードがメイン、左右に隣カードのフチがチラ見え
	   高さ：内容に応じた自然サイズ。不自然な余白を作らない */
	.job-card {
		position: relative;
		flex: 0 0 82%;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		height: auto;
		min-height: 0;
		margin: 0;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition: none;
	}
	.job-card__img { aspect-ratio: 16 / 10; height: auto; }
	/* body：固定要素を min-height で揃えて全カード共通の高さに */
	.job-card__body {
		flex: 0 0 auto;
		min-height: 0;
		padding: 14px;
		gap: 10px;
	}
	/* タイトル：常に 2 行分の高さを固定確保
	   1 行でも 2 行ぶんのスペース、3 行以上は line-clamp:2 で切り捨て */
	.job-card__title {
		font-size: 15px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		min-height: 45px;
	}
	/* タグ：1段固定（高さ 28px）。max 4 個、文字数で横幅オーバーすると
	   2段目に押し出されるが overflow:hidden で見えなくなる
	   → 結果として「2段にならず、入りきらないタグは非表示」を実現 */
	.job-card__tags {
		margin-top: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		overflow: hidden;
		height: 28px;
		align-items: flex-start;
		align-content: flex-start;
	}
	.job-card__tags span:nth-child(n+5) {
		display: none;
	}
	/* CTA：flow 配置でタグの直下、適切なマージン。全カード共通の見た目 */
	.job-card__cta {
		position: static;
		margin: 14px 24px 18px;
		padding: 10px;
		font-size: 13px;
	}

	/* slide-controls は display:contents で「無い扱い」（PC とスマホで同じ）
	   → 矢印は絶対配置、ドットは通常フローで track の下に表示 */
	.slide-controls { display: contents; }

	/* スマホ矢印：ピークを隠さないよう小さく＆半透明に */
	.slide-arrow {
		display: flex;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: rgba(253, 247, 224, 0.85);
		color: var(--ink);
		border: 1.5px solid var(--ink);
		box-shadow: none;
		font-family: var(--font-display);
		font-size: 16px;
		line-height: 1;
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: none;
		cursor: pointer;
		z-index: 10;
		padding: 0;
		align-items: center;
		justify-content: center;
		transition: background .15s, transform .15s, box-shadow .15s;
	}
	.slide-arrow:hover,
	.slide-arrow:active {
		background: var(--sticky);
		transform: translateY(-50%) translate(-1px, -1px);
		box-shadow: 3px 3px 0 var(--ink);
	}
	/* peek 領域内に完全に収まる位置（左右見切れなし）*/
	.slide-arrow--prev { left: 6px; right: auto; }
	.slide-arrow--next {
		right: 6px;
		left: auto;
		background: var(--sticky);  /* デフォルトで黄色 */
	}

	/* スマホ：ドットを小さく */
	.slide-dots { gap: 8px; margin-top: 18px; }
	.slide-dot { width: 9px; height: 9px; }

	/* スマホ：特集スライダー（雑誌風） */
	.feat-slider-section { padding: 44px 0 36px; }
	.feat-slider__tabs {
		gap: 8px;
		margin-bottom: 20px;
		padding: 0 14px;
		/* 最大5枚なので画面幅に収めて中央寄せ。折り返さない */
		flex-wrap: nowrap;
		justify-content: center;
	}
	.feat-slider__tab {
		/* 5枚均等：(画面幅 - パディング28px - gap×4) / 5。
		   1fr で配分すれば計算不要だが、最大幅を制限して大きくなりすぎない */
		flex: 1 1 0;
		max-width: 72px;
		min-width: 0;
	}
	.feat-slider__tab-num { font-size: 9.5px; letter-spacing: .05em; }

	/* 矢印：ピークを隠さないよう小さく＆半透明に */
	.feat-slider__arrow {
		width: 28px; height: 28px;
		font-size: 14px;
		background: rgba(255, 255, 255, 0.85);
		border-width: 1px;
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}
	.feat-slider__arrow--prev { left: 2px; }
	.feat-slider__arrow--next { right: 2px; }

	/* 中央スナップを完璧にするための計算：
	   slide 幅 82vw → 両側 padding 9vw で 1枚目/最後もぴたり中央＋左右にピーク 9vw ぶん見える */
	.feat-slider__viewport {
		padding: 4px 9vw;
		gap: 12px;
		scroll-padding-inline: 9vw;
	}
	.feat-slider__slide { flex: 0 0 82vw; }
	/* スマホは非アクティブもくっきり見せる（ぼかしすぎない）*/
	.feat-slider__slide { opacity: .55; transform: scale(.98); }
	.feat-slider__slide.is-current { opacity: 1; transform: scale(1); }

	/* リンクは縦並び（画像→本文の上下） */
	.feat-slider__slide-link { grid-template-columns: 1fr; }

	/* バナーは詳細ページ（.fd-keyvisual__img）と同じ 16:10 に統一 */
	.feat-slider__slide-image { aspect-ratio: 16 / 10; }

	.feat-slider__slide-info { padding: 16px 18px 20px; gap: 8px; }
	.feat-slider__slide-tag { font-size: 10px; padding: 0 0 4px; letter-spacing: .12em; }
	.feat-slider__slide-title {
		font-size: 17px;
		line-height: 1.4;
	}
	.feat-slider__slide-sub {
		font-size: 12.5px;
		line-height: 1.7;
		/* SP も2行固定 */
		min-height: calc(1.7em * 2);
	}
	.feat-slider__slide-cta { font-size: 11px; letter-spacing: .08em; }

	.feat-slider__indicator { font-size: 11px; gap: 10px; margin-top: 20px; padding: 0 14px; }
	.feat-slider__indicator-pos [data-feat-cur] { font-size: 18px; }
	.feat-slider__indicator-name { font-size: 12.5px; }

	/* もっと見るボタン：スマホはコンパクトに */
	.feat-slider__more { margin-top: 28px; padding-top: 20px; margin-left: 14px; margin-right: 14px; }
	.feat-slider__more-btn { font-size: 12px; padding: 9px 20px; letter-spacing: .1em; }

	/* （旧）スマホ：大1枚を上にフル幅 + 小4枚を 2×2 グリッド */
	.feat-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		max-width: 100%;
	}
	.feat-card {
		border-radius: 12px;
	}
	/* ヒーローもスマホでは縦並びに（画像→本文の上下構成）*/
	.feat-card--big {
		grid-column: 1 / -1;
		grid-template-columns: 1fr;
	}
	.feat-card--big.feat-card--c1 .feat-card__body,
	.feat-card--big.feat-card--c2 .feat-card__body,
	.feat-card--big.feat-card--c3 .feat-card__body,
	.feat-card--big.feat-card--c4 .feat-card__body,
	.feat-card--big.feat-card--c5 .feat-card__body {
		border-left: none;
		border-top: 4px solid;
	}
	.feat-card--big.feat-card--c1 .feat-card__body { border-top-color: #FFE082; }
	.feat-card--big.feat-card--c2 .feat-card__body { border-top-color: #A5D6A7; }
	.feat-card--big.feat-card--c3 .feat-card__body { border-top-color: #FFAB91; }
	.feat-card--big.feat-card--c4 .feat-card__body { border-top-color: #81D4FA; }
	.feat-card--big.feat-card--c5 .feat-card__body { border-top-color: #CE93D8; }
	.feat-card__body {
		padding: 12px 14px;
		gap: 6px;
	}
	.feat-card--big .feat-card__body {
		padding: 16px 18px;
		gap: 8px;
	}
	.feat-card__tag {
		font-size: 10px;
		padding: 3px 8px;
	}
	.feat-card__title {
		font-size: 14px;
		line-height: 1.35;
	}
	.feat-card--big .feat-card__title {
		font-size: 20px;
		line-height: 1.3;
	}
	.feat-card__sub {
		font-size: 11px;
	}
	.feat-card--big .feat-card__sub {
		font-size: 12.5px;
	}
	.feat-card__cta {
		font-size: 11px;
		padding: 5px 11px;
		box-shadow: 1px 1px 0 var(--ink);
		border-width: 1px;
	}
	.feat-card--big .feat-card__cta {
		font-size: 12px;
		padding: 7px 14px;
		box-shadow: 2px 2px 0 var(--ink);
		border-width: 1.5px;
	}

	.urgent-card {
		grid-template-columns: 70px 1fr;
		grid-template-areas:
			"badge   img"
			"body    body"
			"cta     cta";
		gap: 12px;
		padding: 14px 16px;
	}
	.urgent-card__badge {
		grid-area: badge;
		padding: 12px 6px;
		font-size: 13px;
	}
	.urgent-card__img { grid-area: img; aspect-ratio: 16 / 10; height: auto; }
	.urgent-card__body { grid-area: body; }
	.urgent-card__cta {
		grid-area: cta;
		text-align: center;
		padding: 12px 18px;
		font-size: 13px;
	}
	.urgent-card__num { font-size: 32px; }
	.urgent-card__headline { font-size: 15px; }
	.urgent-card__title { font-size: 17px; }

	/* スマホでは font-size だけ縮小（レイアウトはベースで横並び統一済み）
	   ユーザー指示 2026-06-30：数字は少し大きめに */
	.urgent-card__label {
		font-size: 11px;
		padding: 2px 6px;
		margin-right: 6px;
	}
	.urgent-card__num { font-size: 26px; }
	.urgent-card__unit { font-size: 13px; }
	.urgent-card__sub { font-size: 11px; }
}

/* ============ 口コミ（VOICES）============ */

/* スライダー本体（PC: 3 カード並列＋矢印スライド、スマホ: scroll-snap）
 *   矢印用のスペースを確保するため左右に padding。
 *   max-width: 1180px から外向きに矢印を出すと box-shadow が右端で切れるため
 *   slider 内側に矢印を絶対配置するパターンに変更。
 *   さらに：voice-track の overflow-x: auto で box-shadow がクリップされる問題対策で
 *   左右 padding を 70px に増やし、track 末尾にも余白を確保。 */
.voice-slider {
	position: relative;
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px 70px;  /* 矢印スペース + box-shadow 用の余白を増やす */
}
/* PC でも 6 件あれば矢印スライドで残り 3 件を見られるよう、
 * 縦並びの flex 横スクロール + scroll-snap に変更（grid は撤去）。
 * 3 カード並列表示・幅 = (100% - gap * 2) / 3。
 * スクロールバーは非表示にして矢印で操作。
 */
.voice-track {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* box-shadow ぶんの余白を上下左右に確保
	 *   左右 10px で 1〜3 枚目の影もキレイに見えるように */
	padding: 4px 10px 14px;
}
.voice-track::-webkit-scrollbar { display: none; }
.voice-card {
	flex: 0 0 calc((100% - 44px) / 3);  /* gap 22px × 2 = 44px */
	min-width: 0;
	scroll-snap-align: start;
}
/* PC スライダー：矢印は slider の padding 領域内（カードの外側）に配置。
 * ドットは下部中央に並べて、現在何枚目かを示す（PICKUP JOBS と同じ仕様）。
 */
.voice-slider .slide-controls { display: contents; }
.voice-slider .slide-arrow {
	display: flex;
	top: 50%;
	transform: translateY(-50%);
}
/* slider の padding (60px) 内側に矢印を配置 = カードに被らない */
.voice-slider .slide-arrow--prev { left: 8px; }
.voice-slider .slide-arrow--next { right: 8px; }

/* PC でもドットを表示（PICKUP JOBS と同じく下中央） */
.voice-slider .slide-dots {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 22px;
}
/* ============================================================
 *  口コミカード（POP・雑誌風）
 *    ・写真をタイトルの上にデカく配置（4:3）
 *    ・写真下端に「#タグ + 星」帯をオーバーレイ
 *    ・本文に大きな引用符（『 』）を装飾で添える
 *    ・色付きアクセントで楽しさを演出
 * ============================================================ */
.voice-card {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 12px;
	padding: 0;                  /* 写真がカード端まで届く */
	box-shadow: none;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.voice-card:hover {
	/* シャドウ削除指示によりホバー演出は無効化 */
}

/* ━━━ 写真エリア（タイトル上にデカく） ━━━ */
.voice-card__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--paper2);
	overflow: hidden;
	border-bottom: var(--bd-w) solid var(--ink);
}
.voice-card__photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 人物（顔）が上部にある写真が多いので上寄せでクロップ＝顔が見切れない */
	object-position: center top;
	display: block;
}
/* 写真未設定時：イニシャル大表示＋カラフル背景 */
.voice-card__photo.is-placeholder {
	background: var(--ph-color, #FFE082);
	display: flex;
	align-items: center;
	justify-content: center;
}
.voice-card__photo-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.voice-card__photo-initial {
	font-family: var(--font-display);
	font-size: 80px;
	font-weight: bold;
	color: var(--ink);
	line-height: 1;
	opacity: .8;
}

/* 写真下端の帯：タグ + 星 */
.voice-card__photo-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 14px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.voice-card__tag {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: bold;
	padding: 4px 10px;
	background: var(--accent);
	color: #fff;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	letter-spacing: .03em;
}
.voice-card__stars {
	display: inline-flex;
	gap: 1px;
	background: rgba(0,0,0,0.5);
	padding: 4px 8px;
	border-radius: 999px;
}
.voice-card__star {
	font-size: 13px;
	color: rgba(255,255,255,0.35);
	line-height: 1;
}
.voice-card__star.is-on {
	color: #FFD54F;
	text-shadow: 0 0 6px rgba(255, 213, 79, 0.6);
}

/* ━━━ 本文エリア ━━━ */
.voice-card__body {
	padding: 20px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.voice-card__title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	margin: 0;
	color: var(--ink);
	/* タイトルの左にオレンジ縦線（POPアクセント） */
	border-left: 4px solid var(--accent);
	padding-left: 10px;
}
.voice-card__comment {
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--ink);
	margin: 0;
	padding: 0;
	border: none;
	position: relative;
	flex: 1;
	/* 巨大な引用符で「読んでみたくなる」装飾 */
}
.voice-card__comment::before {
	content: '\201C';                /* " 」 */
	font-family: serif;
	font-size: 48px;
	color: var(--accent);
	opacity: .25;
	line-height: 1;
	position: absolute;
	top: -8px;
	left: -4px;
	pointer-events: none;
}
.voice-card__comment p {
	margin: 0;
	padding-left: 18px;          /* 引用符と重ならない位置 */
}
.voice-card__footer {
	padding-top: 12px;
	border-top: 1.5px dashed var(--ink3);
	font-family: var(--font-display);
}
.voice-card__name {
	font-size: 13px;
	font-weight: bold;
	color: var(--ink);
}
.voice-card__age {
	font-size: 11px;
	font-weight: normal;
	color: var(--ink2);
	margin-left: 2px;
}
.voice-card__job {
	font-size: 11px;
	color: var(--ink2);
	margin-top: 3px;
}

/* ============ よくある質問（FAQ）============ */

/* カテゴリフィルター：5 色の pill ボタン横並び
 *
 *   FAQ セクション内で sticky 追従：
 *     ・「すべて」表示時に縦に長くなっても、画面上部にタグが残る
 *     ・親要素 <section.section> を抜けたら離れる（=section スコープ内追従）
 *     ・サイト sticky ヘッダー（≒80px）の下にぴったり貼り付く
 *     ・後ろの質問カードが透けないよう、背景＋影で立体化
 */
.faq-filters {
	max-width: 880px;
	margin: 0 auto 24px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 10px;
	/* PC では追尾しない（通常のフローに置く）。
	   スマホでは下のメディアクエリで sticky を復活させ、長い FAQ を読みながら
	   カテゴリ切替できる UX を保つ。 */
	position: static;
	z-index: 5;
	padding: 12px 14px;
	background: transparent;     /* 帯の背景なし。個別ピル単体に paper 背景を持たせる */
	border-radius: 999px;
}
/* スマホ：sticky を復活させて画面上端に追尾 */
@media (max-width: 768px) {
	.faq-filters {
		position: sticky;
		top: 80px;
	}
	body.admin-bar .faq-filters { top: 126px; }
}
.faq-filter {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: bold;
	padding: 8px 18px;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	background: var(--paper);    /* 個別ピルにのみ背景（後ろの記事が透けない） */
	color: var(--ink);
	cursor: pointer;
	white-space: nowrap;
	transition: transform .15s, box-shadow .15s, background .15s;
}
.faq-filter:hover {
	transform: translate(-1px, -1px);
	box-shadow: 2px 2px 0 var(--ink);
}
/* アクティブ時：塗りつぶして反転表示 */
.faq-filter.is-active {
	background: var(--ink);
	color: var(--paper);
	box-shadow: 2px 2px 0 var(--ink);
}
/* 5 色のバリエーション（枠線 + 文字色のみ。背景は透明のまま） */
.faq-filter--all    { border-color: #C9A100; color: #8A6F00; }
.faq-filter--green  { border-color: #43A047; color: #2E7D32; }
.faq-filter--blue   { border-color: #1976D2; color: #1565C0; }
.faq-filter--pink   { border-color: #E91E63; color: #C2185B; }
.faq-filter--orange { border-color: #FF8B3D; color: #E5550D; }
/* アクティブ時は全 variant 共通の黒塗りで上書き（is-active を後勝ち） */
.faq-filter--all.is-active,
.faq-filter--green.is-active,
.faq-filter--blue.is-active,
.faq-filter--pink.is-active,
.faq-filter--orange.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

/* 質問リスト */
.faq-list {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* フィルターで非表示にされたアイテム、または「もっと見る」未展開のアイテム */
.faq-item.is-hidden,
.faq-item.is-collapsed {
	display: none;
}
.faq-item {
	background: var(--paper);
	border: var(--bd-w) solid var(--ink);
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.faq-item[open] {
	box-shadow: 4px 4px 0 var(--ink);
}
/* 1 列レイアウト：[タグ] [Q] [タイトル] [+]、タイトルは折り返し可 */
.faq-item__q {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-display);
	font-weight: bold;
}
.faq-item__q::-webkit-details-marker { display: none; }

/* カテゴリタグ：薄色 pill、黒縁細め */
.faq-item__cat {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: bold;
	padding: 5px 12px;
	border: 1.2px solid var(--ink);  /* 細めに */
	border-radius: 999px;
	background: transparent;
	color: var(--ink);
	white-space: nowrap;
	flex-shrink: 0;
}
/* 4 色のバリエーション（枠線 + 文字色のみ） */
.faq-item__cat--green  { border-color: #43A047; color: #2E7D32; }
.faq-item__cat--blue   { border-color: #1976D2; color: #1565C0; }
.faq-item__cat--pink   { border-color: #E91E63; color: #C2185B; }
.faq-item__cat--orange { border-color: #FF8B3D; color: #E5550D; }

/* Q マーク：背景なし、黒文字大きめ */
.faq-item__q-mark {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: bold;
	color: var(--ink);
	flex-shrink: 0;
	line-height: 1;
}
/* タイトル：大きく＋折り返し可 */
.faq-item__q-text {
	flex: 1 1 0;
	min-width: 0;
	font-size: 17px;
	line-height: 1.5;
	overflow-wrap: break-word;
}
.faq-item__caret {
	font-family: var(--font-display);
	font-size: 24px;
	color: var(--ink2);
	transition: transform .2s;
	flex-shrink: 0;
	width: 24px;
	text-align: center;
	line-height: 1;
}
.faq-item[open] .faq-item__caret {
	transform: rotate(45deg);
}
.faq-item__a {
	display: flex;
	gap: 14px;
	padding: 0 20px 18px 20px;
	border-top: 1.5px dashed var(--ink3);
	padding-top: 16px;
	background: var(--paper2);
}
.faq-item__a-mark {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: bold;
	color: var(--accent);
	flex-shrink: 0;
	line-height: 1;
}
.faq-item__a-text {
	flex: 1;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink);
	margin: 0;
}

/* 「もっと見る」ボタン */
.faq-show-more-wrap {
	max-width: 880px;
	margin: 20px auto 0;
	text-align: center;
}
.faq-show-more {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: bold;
	padding: 10px 28px;
	background: var(--ink);
	color: #fff;
	border: var(--bd-w) solid var(--ink);
	border-radius: 999px;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
}
.faq-show-more:hover {
	transform: translate(-1px, -1px);
	box-shadow: 3px 3px 0 var(--ink);
}
.faq-show-more[hidden] {
	display: none;
}
/* PC / SP で「もっと見る」の動作を切り替え。
   ・PC：FAQ アーカイブページへのリンク（faq-show-more--pc）
   ・SP：その場で +5 件展開するボタン（faq-show-more--sp） */
.faq-show-more--pc { display: inline-block; text-decoration: none; }
.faq-show-more--sp { display: none; }
@media (max-width: 768px) {
	.faq-show-more--pc { display: none; }
	.faq-show-more--sp { display: inline-block; }
}

/* ============================================================
   HOME「よくある質問」 2カラムUI（.faq2 でスコープ）
   ・左：カテゴリ縦リスト（テキストリンク調・アクティブにアクセントの丸）
   ・右：Q丸バッジ＋質問＋「＋」トグル、行は細い区切り線
   ・JS（.faq-filter / .faq-item / data-cat）は据え置き。CSSとmarkupだけ刷新。
   ・FAQアーカイブ(page-faq)は .faq2 が付かないので従来スタイルのまま。
   ============================================================ */
.faq2 .faq2__wrap {
	max-width: 1040px;
	margin: 6px auto 0;
	display: grid;
	grid-template-columns: 210px 1fr;
	gap: 40px;
	align-items: start;
	text-align: left;
}

/* ── 左：カテゴリ縦リスト ──
   消え方を HOME コラムのタブ（.col-tabs）に合わせる：
   PC では追尾しない（position:sticky なし）＝ページの流れどおり、そのまま
   上へ流れて消える。帯の背景も持たせない（透明）。 */
.faq2 .faq2__nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
}
.faq2 .faq2__nav .faq-filter {
	border: none;
	border-bottom: 1px solid rgba(24, 24, 24, .12);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: left;
	white-space: normal;
	padding: 13px 4px;
	font-size: 14px;
	color: var(--ink3);
	transition: color .15s;
}
.faq2 .faq2__nav .faq-filter:hover {
	transform: none;
	box-shadow: none;
	background: transparent;
	color: var(--ink);
}
.faq2 .faq2__nav .faq-filter.is-active {
	background: transparent;
	color: var(--ink);
	box-shadow: none;
	font-weight: bold;
}
.faq2 .faq2__nav .faq-filter.is-active::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	margin-right: 9px;
	vertical-align: middle;
}

/* ── 右：質問リスト ── */
.faq2 .faq2__main { min-width: 0; }
.faq2 .faq-list {
	max-width: none;
	margin: 0;
	gap: 0;
}
.faq2 .faq-item {
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(24, 24, 24, .12);
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}
.faq2 .faq-item:first-child { border-top: 1px solid rgba(24, 24, 24, .12); }
.faq2 .faq-item[open] { box-shadow: none; }
.faq2 .faq-item__q {
	padding: 20px 2px;
	gap: 16px;
	align-items: center;
}
/* カテゴリチップは右では出さない（カテゴリは左ナビに集約） */
.faq2 .faq-item__cat { display: none; }
/* Q：丸バッジ */
.faq2 .faq-item__q-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	font-size: 15px;
}
.faq2 .faq-item__q-text {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.55;
}
/* 「＋」：細め・右端、open で × 回転 */
.faq2 .faq-item__caret {
	font-size: 26px;
	font-weight: normal;
	color: var(--ink2);
}
/* 回答：A はオレンジの丸バッジ。Q（黒）の真下に揃える */
.faq2 .faq-item__a {
	border-top: none;
	background: transparent;
	padding: 0 2px 22px 2px;
	gap: 16px;
	align-items: flex-start;
}
.faq2 .faq-item__a-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--accent);   /* A はオレンジ */
	color: #fff;
	font-size: 15px;
	flex-shrink: 0;
}
.faq2 .faq-item__a-text { font-size: 14px; }

/* もっと見る：右カラム内・左寄せ */
.faq2 .faq-show-more-wrap {
	max-width: none;
	margin: 18px 0 0;
	text-align: left;
}

/* ── スマホ：1カラム、左ナビは横スクロールのピルに戻す ── */
@media (max-width: 768px) {
	.faq2 .faq2__wrap {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.faq2 .faq2__nav {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		position: sticky;
		top: 80px;
		background: transparent;   /* 帯の背景は無し（コラムの .col-tabs と同じ） */
		padding: 8px 0;
		-webkit-overflow-scrolling: touch;
	}
	body.admin-bar .faq2 .faq2__nav { top: 126px; }
	.faq2 .faq2__nav .faq-filter {
		flex: 0 0 auto;
		border: 1.5px solid var(--ink3);
		border-radius: 999px;
		background: var(--paper);   /* 背景は帯ではなくピル単体に（追従中も後ろが透けない） */
		padding: 7px 15px;
		font-size: 13px;
		white-space: nowrap;
	}
	.faq2 .faq2__nav .faq-filter.is-active {
		background: var(--ink);
		color: #fff;
		border-color: var(--ink);
	}
	.faq2 .faq2__nav .faq-filter.is-active::before { display: none; }
	.faq2 .faq-item__q { padding: 16px 2px; gap: 12px; }
	.faq2 .faq-item__q-text { font-size: 15px; }
	.faq2 .faq-item__a { padding-left: 44px; }
}

/* ============ コラム（COLUMN）============ */

/* ────────── タブ式コラムセクション（新仕様）──────────
 *  オススメ / 人気 / 最新 の 3 タブで記事リスト切替。
 *  アイキャッチを大きく見せて、目に入りやすいデザインに。
 *  PC：タブごとに 3 カード横並び
 *  スマホ：タブごとに 1 カードずつ縦並び
 */
/* タブ：PC は追従なし（普通に表示）、スマホのみ sticky 追従。
 *   ・PC：ページ流れ通り
 *   ・スマホ：ヘッダー高さに合わせて top: 56px で貼り付き
 *   ・背景は帯ではなく、各ピル単体に持たせる
 */
.col-tabs {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin: 0 auto 28px;
	flex-wrap: nowrap;
	padding: 8px 4px;
	background: transparent;
	width: fit-content;
	transition: opacity .25s ease, transform .25s ease;
}
.col-tabs.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
}
body.admin-bar .col-tabs { top: 112px; }
@media (max-width: 782px) {
	body.admin-bar .col-tabs { top: 126px; }
}
.col-tab {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: bold;
	padding: 6px 18px;            /* 縦幅コンパクト */
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	background: var(--paper);     /* ピル個別に背景（追従中も後ろが透けない） */
	color: var(--ink);
	cursor: pointer;
	white-space: nowrap;
	transition: transform .15s, box-shadow .15s, background .15s;
}
.col-tab:hover {
	transform: translate(-1px, -1px);
	box-shadow: 2px 2px 0 var(--ink);
}
.col-tab.is-active {
	background: var(--ink);
	color: var(--paper);
	box-shadow: 2px 2px 0 var(--ink);
}

/* パネル：JS で is-active 切り替え */
.col-panel { display: none; }
.col-panel.is-active { display: block; }

/* タブカード（アイキャッチ重視デザイン）*/
.col-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
}
.col-tcard {
	background: var(--paper);
	border: var(--bd-w-thick) solid var(--ink);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 5px 5px 0 var(--ink);
	text-decoration: none;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	transition: transform .15s, box-shadow .15s;
}
.col-tcard:hover {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 var(--ink);
	text-decoration: none;
	color: var(--ink);
}
/* ホバー時はタイトルだけ下線でアクセント（archive の .col-card と統一） */
.col-tcard:hover .col-tcard__h {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.col-tcard__img {
	position: relative;
	aspect-ratio: 16 / 10;   /* 4:2.5 に近い、アイキャッチを大きめに */
	background: repeating-linear-gradient(135deg, #FFE9C7, #FFE9C7 12px, #FFD89A 12px, #FFD89A 13px);
	border-bottom: 2.5px solid var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	overflow: hidden;
}
/* 実アイキャッチ（コラム投稿のアイキャッチ画像）を枠いっぱいに表示 */
.col-tcard__img.has-img { padding: 0; }
.col-tcard__imgel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* カテゴリタグは画像内ではなく、本文 meta 行（日付の左）に配置 */
.col-tcard__cat {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: bold;
	padding: 3px 10px;
	border: 1.5px solid var(--ink);
	border-radius: 4px;
	background: var(--ink);
	color: var(--paper);
	letter-spacing: .04em;
	white-space: nowrap;
}
/* カテゴリカラー（archive のものと統一） */
.col-tcard__cat.c-money { background: var(--accent); color: #fff; }
.col-tcard__cat.c-dorm  { background: #1976D2; color: #fff; }
.col-tcard__cat.c-job   { background: #43A047; color: #fff; }
.col-tcard__cat.c-story { background: #7B1FA2; color: #fff; }
.col-tcard__cat.c-howto { background: #E53935; color: #fff; }
.col-tcard__phlabel {
	display: inline-block;
	background: rgba(255, 255, 255, .9);
	border: 1.2px solid var(--ink2);
	padding: 4px 10px;
	border-radius: 4px;
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--ink);
	white-space: pre-wrap;
	text-align: center;
}
.col-tcard__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
/* meta 行：カテゴリタグ + 日付 を横並びに */
.col-tcard__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--ink2);
	letter-spacing: .04em;
}
.col-tcard__date {
	display: inline-flex;
	align-items: center;
	color: var(--ink2);
}
.col-tcard__h {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: bold;
	line-height: 1.55;
	margin: 0;
	color: var(--ink);
	flex: 1;
	overflow-wrap: anywhere;
	word-break: break-word;
	/* iOS Safari で <a> 親から下線を継承するのを明示的に打ち消す（2026-07-01） */
	text-decoration: none;
}
/* iOS Safari 対策：ancestor <a> の下線が h3/span に継承されるのを全体で防ぐ */
.col-tcard,
.col-tcard * {
	text-decoration: none !important;
}
/* HOME コラムの「記事を読む」：カラム一覧ページのボタンと統一
   （2026-07-01 ユーザー指示）横長中央・オレンジ塗り CTA・影なし */
.col-tcard__more {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	background: var(--accent);
	border: 1.8px solid var(--ink);
	border-radius: 8px;
	padding: 11px 20px;
	box-shadow: none;
	align-self: stretch;
	margin-top: 10px;
	text-align: center;
	transition: transform .15s, background .15s;
}
.col-tcard:hover .col-tcard__more {
	background: var(--accent2);
	transform: translateY(-1px);
	box-shadow: none;
}

/* スマホ：タブごとに 1 カードずつ縦並び（最大 3 件まで）+ タブ sticky 追従 */
@media (max-width: 768px) {
	.col-tabs {
		gap: 6px;
		margin-bottom: 20px;
		padding: 6px 2px;
		position: sticky;
		top: 56px;  /* スマホヘッダー高さに揃える */
		z-index: 5;
	}
	body.admin-bar .col-tabs { top: 102px; }
	.col-tab {
		font-size: 12px;
		padding: 5px 14px;
	}
	.col-cards {
		grid-template-columns: 1fr;
		gap: 18px;
		max-width: 100%;
	}
	/* スマホでは 4 件目以降を非表示（PC は 6 件全部表示） */
	.col-tcard:nth-child(n+4) { display: none; }
	.col-tcard__img { aspect-ratio: 16 / 9; }
	.col-tcard__h { font-size: 15px; }
}

/* ─────────── 旧 .columns-grid / .column-card（後方互換用に残す） ─────────── */
.columns-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);  /* PC 4列 → 3列 でカード拡大 */
	gap: 28px;
	max-width: 1180px;
	margin: 0 auto;
}
.column-card {
	background: var(--paper);
	border: var(--bd-w) solid var(--ink);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	transition: transform .15s, box-shadow .15s;
}
.column-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--ink);
	text-decoration: none;
	color: var(--ink);
}
.column-card__img {
	position: relative;
	/* ブログのアイキャッチ標準（OGP/サムネ共通の 16:9 横長比率）に統一。
	   実画像が入っても比率が崩れず、横幅に応じて高さが自動調整される */
	aspect-ratio: 16 / 9;
	border-bottom: 1.5px solid var(--ink);
	background: linear-gradient(135deg, #FFE082, #FFB300);
}
.column-card__img .ph {
	height: 100%;
	border: none;
	background: transparent;
}
.column-card__img .ph::before,
.column-card__img .ph::after { display: none; }
.column-card__cat {
	position: absolute;
	top: 10px;
	left: 10px;
	font-family: var(--font-display);
	font-size: 11px;
	padding: 4px 12px;
	background: var(--ink);
	color: var(--paper);
	border-radius: 4px;
	letter-spacing: 0.04em;
}
.column-card__body {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.column-card__date {
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink2);
	letter-spacing: 0.04em;
}
.column-card__title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	margin: 0;
	color: var(--ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* 「記事を読む」ボタン：白背景・黒縁の控えめな pill */
.column-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	align-self: flex-start;
	padding: 7px 16px;
	background: var(--paper);
	color: var(--ink);
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: bold;
	transition: background .15s;
}
.column-card:hover .column-card__cta {
	background: var(--ink);
	color: var(--paper);
}

/* ============ お知らせ（INFO）============ */

.info-list {
	max-width: 880px;
	margin: 0 auto;
	list-style: none;
	padding: 0;
	background: var(--paper);
	border: var(--bd-w) solid var(--ink);
	border-radius: 12px;
	box-shadow: none;
	overflow: hidden;
}
.info-list__item {
	border-bottom: 1.5px dashed var(--ink3);
}
.info-list__item:last-child {
	border-bottom: none;
}
.info-list__link {
	display: grid;
	grid-template-columns: 100px 90px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 14px 18px;
	color: var(--ink);
	text-decoration: none;
	transition: background .15s;
}
.info-list__link:hover {
	background: var(--paper2);
	text-decoration: none;
	color: var(--ink);
}
.info-list__date {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--ink2);
	letter-spacing: 0.03em;
}
.info-list__cat {
	font-family: var(--font-display);
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 4px;
	text-align: center;
	font-weight: bold;
	white-space: nowrap;
	background: transparent;         /* 背景なし、細い色付き枠線のみ */
	border: 1.2px solid var(--ink);
	color: var(--ink);
}
.info-list__cat--news { border-color: #C9A100; color: #8A6F00; }   /* 山吹 */
.info-list__cat--job  { border-color: var(--accent); color: var(--accent2); }
.info-list__cat--cp   { border-color: var(--line-green); color: #2E7D32; }
.info-list__title {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.info-list__chevron {
	color: var(--ink3);
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 1;
}

/* ============ レスポンシブ（情報系セクション）============ */

@media (max-width: 1024px) {
	.columns-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	/* 口コミ：スマホは横スクロール scroll-snap（PICKUP JOBS と同じ方式）*/
	.voice-slider {
		margin: 0 -16px;
		padding: 0;
		position: relative;
	}
	.voice-track {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 10px;
		padding: 4px 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.voice-track::-webkit-scrollbar { display: none; }
	.voice-card {
		flex: 0 0 82%;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		padding: 0;       /* 写真を端まで届かせる */
		min-height: 0;
	}
	.voice-card__photo { aspect-ratio: 4 / 3; }
	.voice-card__photo-overlay { padding: 18px 12px 10px; }
	.voice-card__tag { font-size: 10px; padding: 3px 8px; }
	.voice-card__stars { padding: 3px 6px; }
	.voice-card__star { font-size: 12px; }
	.voice-card__photo-initial { font-size: 60px; }

	.voice-card__body { padding: 16px 18px 18px; gap: 10px; }
	.voice-card__title { font-size: 16px; padding-left: 9px; border-left-width: 3px; }
	.voice-card__comment { font-size: 12.5px; line-height: 1.75; }
	.voice-card__comment::before { font-size: 38px; top: -6px; }
	.voice-card__comment p { padding-left: 15px; }

	/* スマホ用スライダーコントロール表示 */
	.voice-slider .slide-controls {
		display: contents;  /* 矢印は absolute、ドットは下に */
	}
	.voice-slider .slide-arrow {
		display: flex;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: var(--paper);
		border: 2px solid var(--ink);
		box-shadow: 2px 2px 0 var(--ink);
		font-family: var(--font-display);
		font-size: 22px;
		line-height: 1;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 10;
		padding: 0;
		color: var(--ink);
	}
	.voice-slider .slide-arrow--prev { left: 6px; }
	.voice-slider .slide-arrow--next {
		right: 6px;
		background: var(--sticky);
	}
	.voice-slider .slide-dots {
		display: flex;
		gap: 8px;
		justify-content: center;
		margin: 16px 0 0;
	}
	.voice-slider .slide-dot {
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--paper);
		border: 1.5px solid var(--ink);
		padding: 0;
		cursor: pointer;
	}
	.voice-slider .slide-dot.is-active {
		background: var(--ink);
	}

	/* FAQ：スマホはフィルター 5 個を 1 行に均等配置（sticky 用の縦 padding は維持）
	 *  スマホのヘッダー高さは約 56px（ロゴ 38px + padding 6×2 + 余白）なので
	 *  top をスマホ実測値に合わせる */
	.faq-filters {
		gap: 6px;
		margin-bottom: 18px;
		padding: 10px 6px;
		top: 56px;
	}
	body.admin-bar .faq-filters { top: 102px; }  /* + admin-bar 46px */
	.faq-filter {
		flex: 1 1 0;
		min-width: 0;
		font-size: 12px;
		padding: 7px 4px;
		text-align: center;
	}
	/* 質問行：[タグ][Q][タイトル][+] を 1 列、タイトルは折り返し可 */
	.faq-item__q {
		gap: 10px;
		padding: 14px 14px;
	}
	.faq-item__cat {
		font-size: 11px;
		padding: 4px 10px;
	}
	.faq-item__q-mark {
		font-size: 18px;
	}
	.faq-item__q-text {
		font-size: 14px;
		line-height: 1.45;
	}
	.faq-item__caret {
		font-size: 20px;
	}
	.faq-item__a {
		gap: 10px;
		padding: 13px 14px;
	}
	.faq-item__a-mark { font-size: 18px; }
	.faq-item__a-text { font-size: 13px; }
	/* もっと見るボタンはコンパクト */
	.faq-show-more {
		font-size: 13px;
		padding: 9px 24px;
	}

	/* コラム：スマホは 4 件まで（5 件目以降を非表示）*/
	.columns-grid {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.column-card:nth-child(n+5) { display: none; }
	/* スマホでも 16:9 のアイキャッチ比率を維持（height 指定なし、aspect-ratio に任せる）*/
	.column-card__body { padding: 12px 14px 14px; gap: 6px; }
	.column-card__date { font-size: 10px; }
	.column-card__title { font-size: 13px; line-height: 1.4; }
	.column-card__cat { font-size: 10px; padding: 2px 8px; }
	.column-card__cta { font-size: 11px; padding: 5px 12px; }

	/* お知らせ：スマホは 2 行レイアウト（日付+カテゴリ / タイトル）*/
	.info-list__link {
		grid-template-columns: auto auto 1fr auto;
		grid-template-areas:
			"date  cat   .       chevron"
			"title title title   title";
		gap: 6px 10px;
		padding: 12px 14px;
		align-items: center;
	}
	.info-list__date {
		grid-area: date;
		font-size: 11px;
	}
	.info-list__cat {
		grid-area: cat;
		font-size: 10px;
		padding: 2px 8px;
	}
	.info-list__title {
		grid-area: title;
		font-size: 13px;
		white-space: normal;
		line-height: 1.4;
	}
	.info-list__chevron {
		grid-area: chevron;
	}
}


/* ============================================================
 * TOP：ピックアップ案件セクション（section-pickup.php）
 *   求人特集（カラフルグラデカード）と差別化するため、
 *   ダーク基調 + マガジン的なミニマル構成にする。
 * ============================================================ */
.section-pickup {
	background: var(--ink);
	color: var(--paper);
	padding: 70px 0;
	position: relative;
	overflow: hidden;
}
.section-pickup::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
	background-size: 28px 28px;
	pointer-events: none;
}
.section-pickup .section__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--gutter);  /* 他のセクションと同じ横余白 */
	position: relative;
	z-index: 1;
}

/* セクションヘッダー */
.section-pickup__head {
	text-align: center;
	margin-bottom: 50px;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.section-pickup__en {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--accent);
	letter-spacing: .3em;
	font-weight: bold;
	margin-bottom: 12px;
}
.section-pickup__title {
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: bold;
	color: var(--paper);
	margin: 0 0 10px;
	letter-spacing: -.01em;
}
.section-pickup__sub {
	font-family: var(--font-display);
	font-size: 13px;
	color: var(--paper2);
	margin: 0 0 22px;
	opacity: .8;
}
.section-pickup__rule {
	width: 60px;
	height: 3px;
	background: var(--accent);
	margin: 0 auto;
	border-radius: 2px;
}

/* ============================================================
 *  フィーチャー（1 件目を大きく）— 16:10 バナーを主役に
 * ============================================================ */
.sp-feature {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 0;
	margin: 0 auto 36px;
	max-width: 1100px;
	background: var(--paper);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	box-shadow: 0 12px 36px rgba(0,0,0,.28);
	transition: transform .2s, box-shadow .2s;
}
.sp-feature:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 48px rgba(0,0,0,.42);
	color: var(--ink);
	text-decoration: none;
}

/* 表紙バナー（16:10・暗幕オーバーレイなし・クリーン） */
.sp-feature__cover,
.sp-card__cover {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: rgba(255,255,255,.92);
	font-family: var(--font-display);
}
.sp-feature__media,
.sp-card__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sp-ph-icon { font-size: 30px; opacity: .7; }
.sp-ph-en   { font-size: 12px; letter-spacing: .2em; opacity: .9; }
.sp-feature__cover--c1, .sp-card__cover--c1 { background: linear-gradient(135deg, #FF8B3D, #E5550D); }
.sp-feature__cover--c2, .sp-card__cover--c2 { background: linear-gradient(135deg, #1976D2, #0D47A1); }
.sp-feature__cover--c3, .sp-card__cover--c3 { background: linear-gradient(135deg, #43A047, #1B5E20); }
.sp-feature__cover--c4, .sp-card__cover--c4 { background: linear-gradient(135deg, #E53935, #B71C1C); }
.sp-feature__cover--c5, .sp-card__cover--c5 { background: linear-gradient(135deg, #7B1FA2, #4A148C); }
.sp-feature__cover--c6, .sp-card__cover--c6 { background: linear-gradient(135deg, #5C5648, #26241F); }

/* No. チップ（画像に被せず本文側に） */
/* No. = 順位メダル（金・銀・銅）。テーマ色は使わず「順位」を色＋メダルで表現 */
.sp-no {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 15px;
	line-height: 1;
	letter-spacing: .01em;
	color: #fff;
	background: var(--ink);            /* 4 位以降の既定（ダーク） */
	padding: 7px 13px;
	border-radius: 999px;
}
.sp-no::before { content: "🏅"; font-size: 14px; }
.sp-no--rank1 { color: #5a4500; background: linear-gradient(135deg, #FFF3BE 0%, #FFD24D 46%, #E5A200 100%); }
.sp-no--rank1::before { content: "🥇"; }
.sp-no--rank2 { color: #2f343b; background: linear-gradient(135deg, #FBFCFE 0%, #D6DBE2 46%, #A7AFB9 100%); }
.sp-no--rank2::before { content: "🥈"; }
.sp-no--rank3 { color: #4a2a12; background: linear-gradient(135deg, #F8DBB7 0%, #D89C66 46%, #AF6932 100%); }
.sp-no--rank3::before { content: "🥉"; }

/* バッジ（黒フチ・吹き出しの尻尾なし／フラットなピル＋ピコンアニメ） */
@keyframes spPop {
	0%, 64%, 100% { transform: scale(1) rotate(0deg); }
	72%           { transform: scale(1.18) rotate(-3deg); }
	80%           { transform: scale(0.94) rotate(2deg); }
	88%           { transform: scale(1.07) rotate(0deg); }
}
.sp-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-weight: bold;
	font-size: 12.5px;
	line-height: 1;
	letter-spacing: .02em;
	padding: 7px 14px;
	border-radius: 999px;
	white-space: nowrap;
	transform-origin: center;
	will-change: transform;
	animation: spPop 2.6s ease-in-out infinite;
}
.sp-tag--red    { background: #E53935; color: #fff; }
.sp-tag--orange { background: #FF8B3D; color: #fff; }
.sp-tag--yellow { background: #FFD700; color: var(--ink); }
.sp-tag--green  { background: #43A047; color: #fff; }
.sp-tag--blue   { background: #1976D2; color: #fff; }
.sp-tag--pink   { background: #FF6B9D; color: #fff; }
@media (prefers-reduced-motion: reduce) { .sp-tag { animation: none; } }

/* フィーチャー本文 */
.sp-feature__body {
	padding: 30px 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sp-feature__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
.sp-feature__tag {
	font-family: var(--font-display);
	font-size: 10.5px;
	font-weight: bold;
	color: var(--accent);
	letter-spacing: .22em;
}
.sp-feature__h {
	font-family: var(--font-display);
	font-size: 27px;
	font-weight: bold;
	color: var(--ink);
	line-height: 1.3;
	margin: 0 0 12px;
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.sp-feature__lead {
	font-family: var(--font-display);
	font-size: 13.5px;
	color: var(--ink2);
	line-height: 1.85;
	margin: 0 0 12px;
}
.sp-feature__sub {
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--ink3);
	line-height: 1.6;
	margin: 0 0 20px;
	padding-top: 12px;
	border-top: 1.5px dashed var(--ink3);
}
.sp-feature__more {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: bold;
	color: var(--ink);
	background: var(--sticky);
	border: 2px solid var(--ink);
	border-radius: 999px;
	padding: 12px 26px;
	align-self: flex-start;
	transition: transform .15s, background .15s;
}
.sp-feature:hover .sp-feature__more { transform: translateY(-2px); }

/* ============================================================
 *  2-3 件目グリッド
 * ============================================================ */
.sp-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px;
	max-width: 1100px;
	margin: 0 auto;
}
.sp-card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	box-shadow: 0 8px 24px rgba(0,0,0,.24);
	transition: transform .2s, box-shadow .2s;
}
.sp-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(0,0,0,.4);
	color: var(--ink);
	text-decoration: none;
}
.sp-card__body {
	padding: 16px 18px 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.sp-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
.sp-card__en {
	font-family: var(--font-display);
	font-size: 11px;
	color: var(--accent);
	letter-spacing: .16em;
	font-weight: bold;
	margin-bottom: 6px;
}
.sp-card__h {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: bold;
	color: var(--ink);
	line-height: 1.4;
	margin: 0 0 8px;
	letter-spacing: -.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.sp-card__lead {
	font-family: var(--font-display);
	font-size: 12.5px;
	color: var(--ink2);
	line-height: 1.7;
	margin: 0 0 14px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sp-card__more {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: bold;
	color: var(--ink);
	background: var(--sticky);
	border: 2px solid var(--ink);
	border-radius: 999px;
	padding: 8px 17px;
	align-self: flex-start;
	margin-top: auto;
	transition: transform .15s, background .15s;
}
.sp-card:hover .sp-card__more { transform: translateX(2px); }

/* 「すべて見る」リンク */
.section-pickup__more {
	text-align: center;
	margin-top: 40px;
}
.section-pickup__more-link {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: bold;
	color: var(--paper);
	background: transparent;
	border: 2px solid var(--paper);
	padding: 14px 32px;
	border-radius: 4px;
	text-decoration: none;
	letter-spacing: .05em;
	transition: background .2s, color .2s;
}
.section-pickup__more-link:hover {
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
}

/* レスポンシブ：1024 以下 / 768 以下 */
@media (max-width: 1024px) {
	.sp-feature {
		grid-template-columns: 1fr;
	}
	.sp-feature__h { font-size: 22px; }
}
@media (max-width: 768px) {
	.section-pickup { padding: 50px 0; }
	/* スマホは左右の余白を詰めてカードをもう少し広く */
	.section-pickup .section__inner { padding: 0 14px; }
	.section-pickup__head { margin-bottom: 34px; }
	.section-pickup__title { font-size: 28px; }
	.section-pickup__sub { font-size: 12px; }
	.sp-feature { margin-bottom: 28px; }
	.sp-feature__body { padding: 22px 20px; }
	.sp-feature__h { font-size: 20px; }
	.sp-feature__lead { font-size: 13px; }
	.sp-feature__more { font-size: 14px; padding: 11px 22px; }
	.sp-grid { grid-template-columns: 1fr; gap: 18px; }
	.sp-card__h { font-size: 17px; }
	.section-pickup__more { margin-top: 28px; }
	.section-pickup__more-link { padding: 12px 24px; font-size: 13px; }
}


/* ============================================================
   HOME オススメ求人セクション：求人検索カード(.ja-card)を流用
   口コミスライダー(.voice-slider)と同じ「中央スナップ」方式
   ============================================================ */

/* HOME オススメ求人の「詳細を見る」ボタンの矢印を非表示
   （他ページ：求人検索一覧・お気に入り一覧では矢印は表示する）*/
.job-slider--ja-card .ja-card__detail-arrow {
	display: none;
}
.job-slider--ja-card .job-track > .ja-card {
	flex: 0 0 calc((100% - 44px) / 3);
	scroll-snap-align: center;     /* 中央スナップ（口コミと統一）*/
	scroll-snap-stop: always;
	min-width: 0;
	box-shadow: none;              /* カードの影はナシ（全カード共通）*/
	/* スライダー内では縦積みレイアウト固定（archive の SP 同等）*/
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 14px;
}
/* HOME オススメ求人スライダー内のアイキャッチを、SPと同じ
   「カード端まで届くフルブリード」スタイルに統一。
   ・別枠の border / border-radius を解除
   ・カード padding 14px を負マージンで相殺して上端＋左右ぴったり */
.job-slider--ja-card .job-track > .ja-card { overflow: hidden; }
.job-slider--ja-card .job-track > .ja-card .ja-card__img {
	border: none;
	border-radius: 0;
	margin-top: -14px;                /* カード上 padding を相殺 */
	margin-left: -14px;               /* カード左 padding を相殺 */
	margin-right: -14px;              /* カード右 padding を相殺 */
	width: calc(100% + 28px);         /* 左右 padding 分を拡張 */
}

/* HOME オススメ求人スライダー内では、カード末尾の3ボタンを
   PCでも横並びに統一（SPと同じ見た目）。
   通常の .ja-card__side は縦積みなので、ここだけ上書き。 */
.job-slider--ja-card .job-track > .ja-card .ja-card__side {
	flex-direction: row;
	gap: 8px;
}
.job-slider--ja-card .job-track > .ja-card .ja-card__fav,
.job-slider--ja-card .job-track > .ja-card .ja-card__detail,
.job-slider--ja-card .job-track > .ja-card .ja-card__apply {
	flex: 1;
	padding: 11px 0;
	font-size: 12px;
	text-align: center;
}
.job-slider--ja-card .job-track > .ja-card .ja-card__detail { font-size: 13px; }
/* タブレット：2枚表示 */
@media (max-width: 1024px) {
	.job-slider--ja-card .job-track > .ja-card {
		flex: 0 0 calc((100% - 22px) / 2);
	}
}
/* スマホ：中央1枚＋左右に少しずつ覗くピーク表示（口コミと同じ）
   セクションの 16px padding を打ち消して 100vw を確保 → vw 計算が正しく効く */
@media (max-width: 768px) {
	.job-slider--ja-card {
		margin: 0 -16px;        /* section.padding 16px を相殺して 100vw を確保 */
		padding: 0;
	}
	.job-slider--ja-card .job-track {
		gap: 10px;
		padding: 4px 9vw;       /* 両側 9vw padding で 82vw カードを中央化 */
		scroll-padding-inline: 9vw;
	}
	.job-slider--ja-card .job-track > .ja-card {
		flex: 0 0 82vw;
		/* 非アクティブは opacity だけで軽くフェード（filter は重いので使わない）*/
		opacity: 0.5;
		transition: none;          /* 即時切替（フェードラグなし）*/
	}
	.job-slider--ja-card .job-track > .ja-card.is-current {
		opacity: 1;
	}
}

/* ============ Hero 新FV画像対応（2026-07-03 v2） ============
   - 左のキャッチコピー（.hero-overlay）は非表示（あとで復活予定）
   - 新PC画像 1672x941 は画像内に既にキャッチが入っているので、
     切らずに全体表示。max-width 1100px でセンター配置。
   - キャンペーンバナー(.hero-campaign)は画像下端に重ねる */
.hero-overlay { display: none !important; }

.hero {
	/* 画像の外周サンバースト色に合わせた暖色クリーム。
	   ここが画像左右のフェード先になるので画像端と同色なほど境目が消える。 */
	background: #FDEEB4;
}
.hero-bg {
	height: auto !important;
	/* 1200px 到達後は画像サイズを固定（左右のフェード + hero 背景色だけが伸びる） */
	max-width: 1200px;
	margin: 0 auto;
	aspect-ratio: 1730 / 909;   /* 新PC画像 10_40_36.png のサイズ */
}
.hero-bg__picture,
.hero-bg__img {
	position: relative !important;   /* absolute から相対に戻す */
	inset: auto !important;
}
.hero-bg__img {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	object-position: center center !important;
	/* 左右エッジをフェード → 背景色（#FDEEB4）に自然に溶け込ませる */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
			mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
/* PC/タブレットは画像高さを 95% に抑える（下側に少し余白ができる） */
@media (min-width: 769px) {
	.hero-bg__img { height: 95%; }
}
/* SP：正方形寄り画像 1391x1131 に切り替わる */
@media (max-width: 768px) {
	.hero-bg {
		aspect-ratio: 1391 / 1131;
		max-width: 100%;
	}
	/* SPは左右のフェードマスクを外す（画像をそのまま端まで表示） */
	.hero-bg__img {
		-webkit-mask-image: none !important;
		        mask-image: none !important;
	}
}
/* キャンペーンバナー：PC は「画像内の女性の体位置」に常に配置。 */
.hero-campaign {
	left: min(72%, calc(40% + 264px)) !important;
	transform: translateX(-50%);
	top: auto !important;
	bottom: 126px;
	width: min(420px, 80vw);
}
/* 中間サイズ（900〜1199px）はよりコンパクト＆左寄りに */
@media (min-width: 900px) and (max-width: 1199px) {
	.hero-campaign {
		left: min(72%, calc(30% + 264px)) !important;
		bottom: 86px;
		width: min(370px, 80vw);
	}
}
/* 761〜899px（タブレット〜小型PC）はさらにコンパクト */
@media (min-width: 761px) and (max-width: 899px) {
	.hero-campaign {
		left: min(72%, calc(26% + 264px)) !important;
		bottom: 73px;
		width: min(360px, 80vw);
	}
}
/* 枠線を外し、影で自然なボタン感を出す（PC/SP 共通） */
.hero-campaign {
	border: none !important;
	box-shadow: 0 6px 18px rgba(255, 107, 26, .35), 0 2px 4px rgba(0, 0, 0, .12);
}
/* 注釈：長文になったので極小サイズに */
.hero-campaign__note {
	font-size: 7px !important;
	line-height: 1.35 !important;
}

@media (max-width: 768px) {
	.hero-campaign {
		left: 50% !important;      /* SP は中央（新しい !important を上書き） */
		bottom: 23px;              /* 画像底部（工場イラスト付近） */
		width: 78% !important;     /* 横幅だけ短く（サイズ自体は元のまま） */
	}
	/* かんたん求人検索を上に詰める（キャンペーンバナー直下） */
	.easy-search {
		margin: -15px 4% 0 !important;
	}
}
/* purge: 1783057000 */