/* =============================================================
   工場勤務じゃダメですか？ メインスタイル
   設計：SP-first（モバイルファースト）、CSS Variables、低コスト実装
   ============================================================= */

:root {
	/* リアンコネクト準拠：ダークネイビー + 黄色アクセント + オレンジ寄り赤 CTA */
	--color-primary: #1a3a5c;
	--color-primary-dark: #0d2640;
	--color-primary-light: #e8eef5;
	--color-secondary: #f5a623;          /* World Creation ロゴ色 */
	--color-cta: #ef5a24;                /* リアンコネクトの「無料相談する」風 */
	--color-cta-dark: #c44a1a;
	--color-text: #1f1f1f;
	--color-text-muted: #5f6368;
	--color-bg: #ffffff;
	--color-bg-soft: #f5f7fa;
	--color-border: #e1e4e8;
	--color-link: #1a3a5c;

	--font-base: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
		"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);

	--header-h: 72px;
	--floating-cta-h: 64px;
}

/* リセット */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-base);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.7;
	font-size: 15px;
	padding-top: var(--header-h);
	padding-bottom: 0; /* 追随CTA廃止のため下余白の確保は不要 */
}

a {
	color: var(--color-link);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 var(--space-md);
}

/* スクリーンリーダー専用 */
.screen-reader-text {
	border: 0;
	clip: rect(1px,1px,1px,1px);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	background: var(--color-primary);
	color: #fff;
	padding: 8px 16px;
	z-index: 10000;
}

.skip-link:focus {
	top: 0;
}

/* レイアウト */
.container {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--space-md);
}

.site-main {
	min-height: 60vh;
	padding: var(--space-lg) 0;
}

/* フロントページ：FV をヘッダー直下に密着させ、白い隙間を消す */
.home .site-main {
	padding-top: 0;
}

/* =============================================================
   ヘッダー
   ============================================================= */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--header-h);
	background: #fff;
	border-bottom: 1px solid var(--color-border);
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	color: var(--color-text);
}

/* WordPress 管理バー表示時のズレ（白い隙間）を解消 */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

.site-header__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--space-md);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-header__logo a {
	color: var(--color-text);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	display: flex;
	align-items: center;
}

.site-header__logo-text {
	display: inline-block;
}

.site-header__logo-img {
	display: block;
	height: 44px;
	width: auto;
	max-width: 220px;
	transition: transform .2s ease;
}

.site-header__logo a:hover .site-header__logo-img {
	transform: scale(1.03);
}

.site-header__menu-toggle {
	background: transparent;
	border: 0;
	padding: 8px;
	cursor: pointer;
}

/* スマホ常設 CTA（追随CTAの代替）。ヘッダー右・ハンバーガーの手前に常時表示。 */
.site-header__cta {
	margin-left: auto;
	margin-right: var(--space-sm);
	padding: 9px 16px;
	background: var(--color-cta);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 3px 10px rgba(239, 90, 36, .35);
}
.site-header__cta:hover {
	background: var(--color-cta-dark);
	color: #fff;
	text-decoration: none;
}

/* 求人詳細では下部の追従CTA（応募相談する）に一本化するため、ヘッダー常設CTAは隠す */
.single-job_posting .site-header__cta {
	display: none;
}

.site-header__menu-icon {
	display: inline-block;
	width: 24px;
	height: 18px;
	position: relative;
}

.site-header__menu-icon span {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--color-primary);
	transition: transform .2s, top .2s;
}

.site-header__menu-icon span:nth-child(1) { top: 0; }
.site-header__menu-icon span:nth-child(2) { top: 8px; }
.site-header__menu-icon span:nth-child(3) { top: 16px; }

[data-menu-toggle][aria-expanded="true"] .site-header__menu-icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
[data-menu-toggle][aria-expanded="true"] .site-header__menu-icon span:nth-child(2) { opacity: 0; }
[data-menu-toggle][aria-expanded="true"] .site-header__menu-icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.site-header__nav {
	position: fixed;
	top: var(--header-h);
	left: 0; right: 0;
	background: #fff;
	border-bottom: 1px solid var(--color-border);
	max-height: 0;
	overflow: hidden;
	transition: max-height .25s ease;
}

.site-header__nav.is-open {
	max-height: 100vh;
}

.site-header__menu {
	list-style: none;
	margin: 0;
	padding: var(--space-md) 0;
}

.site-header__menu li {
	border-bottom: 1px solid var(--color-border);
}

.site-header__menu a {
	display: block;
	padding: var(--space-md);
	color: var(--color-text);
	text-decoration: none;
}

/* ヘッダー CTA（メニュー内の相談ボタン）。汎用リンク装飾を上書き */
.site-header__menu-cta {
	padding: var(--space-md);
	text-align: center;
	border-bottom: 0 !important;
}

.site-header__menu-cta a.button {
	display: inline-block;
	width: auto;
	padding: 9px 18px;
	color: #fff;
}

.site-header__menu-cta a.button:hover {
	color: #fff;
	text-decoration: none;
}

/* =============================================================
   ボタン
   ============================================================= */
.button {
	display: inline-block;
	padding: 12px 20px;
	border-radius: var(--radius-md);
	background: var(--color-cta);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	font-size: 15px;
	text-align: center;
	transition: background .2s;
}

.button:hover {
	background: var(--color-cta-dark);
	color: #fff;
	text-decoration: none;
}

.button--block { display: block; width: 100%; }

.button--secondary {
	background: var(--color-primary);
}

.button--secondary:hover {
	background: var(--color-primary-dark);
}

.button--outline {
	background: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.button--outline:hover {
	background: var(--color-primary);
	color: #fff;
}

/* =============================================================
   求人カード
   ============================================================= */
.job-card {
	display: block;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	margin-bottom: var(--space-md);
	text-decoration: none;
	color: var(--color-text);
	transition: box-shadow .2s, transform .1s;
}

.job-card:hover {
	box-shadow: var(--shadow-md);
	text-decoration: none;
	color: var(--color-text);
}

.job-card__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--color-bg-soft);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-sm);
	overflow: hidden;
}

.job-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.job-card__title {
	font-size: 16px;
	margin: 0 0 var(--space-sm);
	font-weight: 700;
	line-height: 1.4;
}

.job-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-md);
	font-size: 13px;
	color: var(--color-text-muted);
}

.job-card__meta strong {
	color: var(--color-cta);
	font-weight: 700;
	font-size: 15px;
}

/* =============================================================
   求人詳細
   ============================================================= */
.job-detail__title {
	font-size: 20px;
	line-height: 1.4;
	margin: 0 0 var(--space-md);
}

.job-detail__company {
	color: var(--color-text-muted);
	font-size: 14px;
	margin-bottom: var(--space-lg);
}

.job-detail__hero-meta {
	background: var(--color-primary-light);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	margin-bottom: var(--space-lg);
}

.job-detail__hero-meta dl {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm);
}

.job-detail__hero-meta dt {
	font-size: 12px;
	color: var(--color-text-muted);
	font-weight: 700;
}

.job-detail__hero-meta dd {
	margin: 0;
	font-size: 18px;          /* 給与・勤務地でサイズ統一 */
	font-weight: 700;
	color: var(--color-text); /* 黒文字で統一 */
}

.job-detail__hero-meta dd.salary {
	color: var(--color-text); /* 給与も黒に統一（オレンジを解除） */
	font-size: 18px;
}

.job-detail__section {
	margin-bottom: var(--space-xl);
}

.job-detail__section h2 {
	font-size: 17px;
	color: var(--color-primary-dark);
	border-left: 4px solid var(--color-primary);
	padding-left: var(--space-sm);
	margin-bottom: var(--space-md);
}

.job-detail__section p,
.job-detail__section .body {
	white-space: pre-wrap;
}

.job-detail__images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.job-detail__images img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

/* 画像が 1 枚だけ（＝バナー運用）のときは全幅・原寸比で表示（ワイヤー「ジャストサイズ」準拠）。
   複数枚のときは上記の 4:3・2 列ギャラリーを維持。 */
.job-detail__images:has(img:only-child) {
	grid-template-columns: 1fr;
}
.job-detail__images img:only-child {
	aspect-ratio: auto;
	object-fit: contain;
}

.job-detail__eeat {
	background: var(--color-bg-soft);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	font-size: 13px;
	color: var(--color-text-muted);
	margin-top: var(--space-2xl);
}

.job-detail__modified {
	font-size: 12px;
	color: var(--color-text-muted);
	text-align: right;
	margin-top: var(--space-md);
}

.job-detail__form {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 2px solid var(--color-border);
}

.job-detail__form h2 {
	font-size: 18px;
	color: var(--color-cta);
	text-align: center;
}

/* =============================================================
   一覧アーカイブ
   ============================================================= */
.archive-hero {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: #fff;
	padding: var(--space-xl) var(--space-md);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-lg);
	text-align: center;
}

.archive-hero h1 {
	color: #fff;
	font-size: 22px;
	margin-bottom: var(--space-sm);
}

.archive-hero p {
	margin: 0 0 var(--space-md);
	font-size: 14px;
	opacity: .95;
}

.archive-filter {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	margin-bottom: var(--space-lg);
}

.archive-filter h2 {
	font-size: 14px;
	margin: 0 0 var(--space-sm);
	color: var(--color-text-muted);
}

.archive-filter__group {
	margin-bottom: var(--space-sm);
}

.archive-filter__tags a {
	display: inline-block;
	padding: 4px 12px;
	background: var(--color-bg-soft);
	border-radius: 999px;
	font-size: 13px;
	color: var(--color-text);
	margin: 2px;
}

.archive-filter__tags a:hover {
	background: var(--color-primary-light);
	text-decoration: none;
}

/* ページャ */
.pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-xs);
	margin: var(--space-xl) 0;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	padding: 8px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--color-text);
	text-decoration: none;
	font-size: 14px;
}

.pagination .page-numbers.current {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

.pagination .page-numbers:hover:not(.current) {
	background: var(--color-bg-soft);
	text-decoration: none;
}

/* =============================================================
   TOP ページ
   ============================================================= */
.fv {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
	color: #fff;
	padding: var(--space-2xl) var(--space-md);
	text-align: center;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	margin-bottom: var(--space-lg);
}

.fv__title {
	color: #fff;
	font-size: 24px;
	margin-bottom: var(--space-md);
	line-height: 1.35;
}

.fv__desc {
	margin: 0 0 var(--space-lg);
	font-size: 15px;
	opacity: .95;
}

.section {
	margin-bottom: var(--space-2xl);
}

.section__title {
	font-size: 18px;
	color: var(--color-primary-dark);
	border-bottom: 2px solid var(--color-primary);
	padding-bottom: var(--space-sm);
	margin-bottom: var(--space-md);
}

.section__more {
	text-align: right;
	margin-top: var(--space-sm);
}

.magazine-card {
	display: flex;
	gap: var(--space-md);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-sm);
	margin-bottom: var(--space-sm);
	text-decoration: none;
	color: var(--color-text);
}

.magazine-card__thumb {
	flex: 0 0 80px;
	aspect-ratio: 1;
	background: var(--color-bg-soft);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.magazine-card__body {
	flex: 1;
	min-width: 0;
}

.magazine-card__title {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 var(--space-xs);
	line-height: 1.4;
}

.magazine-card__date {
	font-size: 12px;
	color: var(--color-text-muted);
}

/* =============================================================
   サンキューページ
   ============================================================= */
.thanks {
	text-align: center;
	padding: var(--space-2xl) var(--space-md);
}

.thanks__icon {
	font-size: 48px;
	color: var(--color-secondary);
	margin-bottom: var(--space-md);
}

.thanks__title {
	font-size: 22px;
	margin-bottom: var(--space-md);
}

.thanks__desc {
	color: var(--color-text-muted);
	margin-bottom: var(--space-xl);
}

/* =============================================================
   404
   ============================================================= */
.error-404 {
	text-align: center;
	padding: var(--space-2xl) var(--space-md);
}

.error-404__title {
	font-size: 24px;
	margin-bottom: var(--space-md);
}

.error-404__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 300px;
	margin: var(--space-xl) auto;
}

/* =============================================================
   追従 CTA（SP のみ表示）
   ============================================================= */
/* 追従 CTA：全幅バー → 中央寄せのピル型ボタン（幅を抑える）。 */
.floating-cta {
	position: fixed;
	bottom: 12px; left: 0; right: 0;
	background: transparent;
	display: flex;
	justify-content: center;
	padding: 0 var(--space-md);
	z-index: 90;
	pointer-events: none;            /* 透明エリアは下のコンテンツに透過 */
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

/* 応募フォームが画面内のときは非表示（入力の邪魔をしない） */
.floating-cta.is-hidden {
	opacity: 0;
	transform: translateY(24px);
	visibility: hidden;
}

.floating-cta a {
	pointer-events: auto;
	width: auto;
	max-width: 360px;
	padding: 14px 36px;
	border-radius: 999px;
	background: var(--color-cta);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(239, 90, 36, .45);
}

/* =============================================================
   フッター
   ============================================================= */
.site-footer {
	background: var(--color-text);
	color: #cccccc;
	padding: var(--space-xl) var(--space-md);
	text-align: center;
	font-size: 13px;
}

.site-footer__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.site-footer__menu {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-md);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	justify-content: center;
}

.site-footer__menu a {
	color: #cccccc;
}

.site-footer__copyright {
	margin: 0 0 var(--space-xs);
	opacity: .8;
}

.site-footer__operator {
	margin: 0;
	opacity: .8;
}

/* =============================================================
   PC ブレイクポイント
   ============================================================= */
@media (min-width: 768px) {

	body {
		font-size: 16px;
	}

	.site-header__menu-toggle {
		display: none;
	}

	/* PC はナビ内に CTA があるので、スマホ常設 CTA は隠す */
	.site-header__cta {
		display: none;
	}

	/* PC はロゴを大きく */
	.site-header__logo-img {
		height: 64px;
		max-width: 280px;
	}

	.site-header__nav {
		position: static;
		max-height: none;
		border: 0;
		background: transparent;
	}

	.site-header__menu {
		display: flex;
		align-items: center;
		gap: var(--space-xs);
		padding: 0;
	}

	.site-header__menu li {
		border: 0;
	}

	.site-header__menu a {
		padding: var(--space-sm) var(--space-md);
	}

	.site-header__menu a:hover:not(.button) {
		color: var(--color-primary);
		text-decoration: none;
	}

	/* PC：CTA は余白を詰めて右端のボタンとして */
	.site-header__menu-cta {
		padding: 0 0 0 var(--space-sm);
	}
	.site-header__menu-cta a.button {
		padding: 9px 18px;
	}

	.fv__title { font-size: 32px; }
	.archive-hero h1 { font-size: 26px; }
	.job-detail__title { font-size: 24px; }
	.job-detail__hero-meta dl { grid-template-columns: repeat(2, 1fr); }

	/* PC では追従 CTA を非表示 */
	body { padding-bottom: 0; }
	.floating-cta { display: none; }

	/* 求人カードを 2 列 → 大きい画面で 3 列 */
	.job-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}

	.job-list .job-card {
		margin-bottom: 0;
	}
}

@media (min-width: 1024px) {
	.job-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =============================================================
   ワイヤー反映：追加スタイル（LP / フォーム / 求人票 / 著者）
   ============================================================= */

/* パンくず */
.breadcrumb {
	font-size: 12px;
	color: var(--color-text-muted);
	margin: var(--space-md) 0;
}
.breadcrumb a {
	color: var(--color-text-muted);
}

/* === 相談フォーム === */
.inquiry-form {
	background: #fff;
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin: var(--space-lg) 0;
}
.inquiry-form__title {
	font-size: 16px;
	margin: 0 0 var(--space-md);
	color: var(--color-primary-dark);
	text-align: center;
	line-height: 1.5;
}
.inquiry-form__row {
	margin-bottom: var(--space-md);
}
.inquiry-form__label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--space-xs);
}
.inquiry-form__label .required {
	display: inline-block;
	background: var(--color-cta);
	color: #fff;
	font-size: 10px;
	padding: 0 6px;
	border-radius: 2px;
	margin-left: 4px;
	font-weight: 700;
	vertical-align: middle;
}
/* CF7 のラッパー span は既定 inline で size=40 が効いて横はみ出しする → ブロック化して幅制御 */
.inquiry-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.inquiry-form input[type="text"],
.inquiry-form input[type="tel"],
.inquiry-form input[type="email"],
.inquiry-form input.wpcf7-text,
.inquiry-form input.wpcf7-tel,
.inquiry-form input.wpcf7-email,
.inquiry-form select {
	width: 100%;
	max-width: 100%;
	padding: 10px;
	font-size: 15px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: #fff;
	font-family: inherit;
}
/* 生年月日：年/月/日を横並びに。
   ※CF7 が中身を <p> で包むため、<p> を flex 化し各ラッパーを均等幅にする。 */
.inquiry-form__dob,
.inquiry-form__dob > p {
	display: flex;
	gap: var(--space-sm);
	margin: 0;
}
.inquiry-form__dob .wpcf7-form-control-wrap {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
}
.inquiry-form__dob select {
	width: 100%;
	min-width: 0;
	padding-left: 6px;
	padding-right: 2px;
}
.inquiry-form__policy {
	font-size: 12px;
	color: var(--color-text-muted);
	text-align: center;
	margin: var(--space-md) 0;
}
.inquiry-form__policy a {
	color: var(--color-link);
	text-decoration: underline;
}
.inquiry-form__submit {
	text-align: center;
}
.inquiry-form .button {
	min-width: 220px;
}
.inquiry-form__placeholder {
	background: #fff8e7;
	border: 1px dashed #d4a017;
	padding: var(--space-md);
	text-align: center;
	color: #8a6d12;
	border-radius: var(--radius-sm);
	font-size: 12px;
	line-height: 1.6;
}

/* === TOP の LP セクション === */
.lp-section {
	margin: var(--space-2xl) 0;
}
.lp-section__title {
	font-size: 20px;
	color: var(--color-primary-dark);
	text-align: center;
	margin-bottom: var(--space-lg);
	position: relative;
	padding-bottom: var(--space-sm);
}
.lp-section__title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 50px;
	height: 3px;
	background: var(--color-primary);
}

/* 悩み・サービス・実績の共通グリッド */
.feature-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}
.feature-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
}
.feature-card__icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	background: var(--color-primary-light);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
	font-size: 18px;
	font-weight: 700;
}
.feature-card__icon .kk-icon {
	width: 23px;
	height: 23px;
}
.feature-card__body h3 {
	font-size: 15px;
	margin: 0 0 var(--space-xs);
	color: var(--color-primary-dark);
}
.feature-card__body p {
	margin: 0;
	font-size: 13px;
	color: var(--color-text-muted);
	line-height: 1.6;
}

/* KPI バー */
.kpi-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
}
.kpi-card {
	background: var(--color-primary-light);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	text-align: center;
}
.kpi-card__num {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-primary-dark);
	display: block;
	line-height: 1.3;
}
.kpi-card__label {
	font-size: 11px;
	color: var(--color-text-muted);
	margin-top: var(--space-xs);
	display: block;
}

/* === 求人カード（ワイヤー反映版） === */
.job-list--vertical {
	display: block;
}
/* ワイヤー準拠：横型カード（左＝小さめ正方形サムネ／右＝テキスト）。
   全幅16:9バナーだと巨大化するため、左サムネに変更。 */
.job-list--vertical .job-card {
	margin-bottom: var(--space-md);
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
}
.job-list--vertical .job-card__thumb {
	flex: 0 0 30%;
	width: auto;
	max-width: 180px;
	aspect-ratio: 1 / 1;          /* 正方形サムネ */
	margin-bottom: 0;
}
.job-list--vertical .job-card__body {
	flex: 1 1 auto;
	min-width: 0;                 /* テキスト折返し用 */
}
.job-card__thumb--placeholder {
	background: var(--color-bg-soft);
}
.job-card__tags {
	margin-bottom: var(--space-xs);
}
.job-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
.job-card__row {
	font-size: 13px;
	color: var(--color-text-muted);
}
.job-card__row strong {
	color: var(--color-cta);
	font-size: 15px;
	font-weight: 700;
}
.job-card__more {
	margin-top: var(--space-xs);
	text-align: right;
}
.button--sm {
	padding: 6px 14px;
	font-size: 13px;
}

/* === 求人タグ === */
.job-tag {
	display: inline-block;
	background: var(--color-cta);
	color: #fff;
	padding: 2px 8px;
	border-radius: 2px;
	font-size: 11px;
	font-weight: 700;
	margin-right: 4px;
	margin-bottom: 4px;
}
.job-detail__tags {
	margin-bottom: var(--space-sm);
}

/* === 求人票テーブル === */
.job-spec {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin: var(--space-lg) 0;
}
.job-spec dt,
.job-spec dd {
	margin: 0;
	padding: var(--space-sm) var(--space-md);
}
.job-spec dt {
	background: var(--color-bg-soft);
	font-size: 12px;
	color: var(--color-text-muted);
	font-weight: 700;
	border-bottom: 1px solid var(--color-border);
}
.job-spec dd {
	font-size: 14px;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
	white-space: pre-wrap;
}
.job-spec dd:last-of-type {
	border-bottom: 0;
}

/* === マガジン著者ボックス === */
.author-box {
	background: var(--color-bg-soft);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
	margin: var(--space-xl) 0;
}
.author-box__avatar {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-border);
	overflow: hidden;
}
.author-box__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.author-box__body {
	flex: 1;
	min-width: 0;
}
.author-box__body h3 {
	font-size: 14px;
	margin: 0 0 var(--space-xs);
	color: var(--color-text);
}
.author-box__kana {
	font-size: 11px;
	color: var(--color-text-muted);
	margin: 0 0 var(--space-xs);
}
.author-box__profile {
	font-size: 12px;
	color: var(--color-text-muted);
	line-height: 1.6;
	margin: 0;
}

/* === フッター追加 === */
.site-footer {
	text-align: left;
}
.site-footer__company {
	margin-bottom: var(--space-md);
}
.site-footer__company-name {
	font-size: 15px;
	color: #fff;
	margin: 0 0 var(--space-sm);
	font-weight: 700;
}
/* フッターの World Creation ロゴ（黄ワードマーク） */
.site-footer__logo {
	display: block;
	width: 168px;
	height: auto;
	max-width: 70%;
}
.site-footer__company-detail {
	font-size: 12px;
	color: #cccccc;
	margin: 0;
	line-height: 1.7;
}
.site-footer__contact {
	font-size: 12px;
	color: #cccccc;
	border-top: 1px solid #444;
	padding-top: var(--space-md);
	margin-bottom: var(--space-md);
	line-height: 1.7;
}
.site-footer__contact p {
	margin: 0 0 var(--space-xs);
}
.site-footer__nav {
	margin-bottom: var(--space-md);
}
.site-footer__menu {
	justify-content: flex-start;
	border-top: 1px solid #444;
	padding-top: var(--space-md);
}
.site-footer__copyright {
	border-top: 1px solid #444;
	padding-top: var(--space-md);
	margin-top: var(--space-md);
	text-align: center;
}

/* === FV：背景に collapse する CSS だが lp/ TOP 用に微調整 === */
.fv__title {
	font-size: 26px;
	line-height: 1.3;
}

/* === PC 768px === */
@media (min-width: 768px) {
	.feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.kpi-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.job-spec {
		display: grid;
		grid-template-columns: 220px 1fr;
	}
	.job-spec dt,
	.job-spec dd {
		border-bottom: 1px solid var(--color-border);
	}
	.inquiry-form {
		max-width: 560px;
		margin: var(--space-lg) auto;
	}
	.lp-section__title { font-size: 24px; }
	.fv__title { font-size: 36px; }
	.kpi-card__num { font-size: 22px; }
}

/* =============================================================
   FV 強化版（質感アップ：CSS のみ・上書き）
   ============================================================= */
.fv {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: calc(var(--space-2xl) + var(--space-md)) var(--space-md) var(--space-2xl);
	background:
		radial-gradient(120% 90% at 80% -10%, rgba(245, 166, 35, 0.18), transparent 55%),
		linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* 斜めの薄いストライプ装飾 */
.fv::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.04) 0,
		rgba(255, 255, 255, 0.04) 1px,
		transparent 1px,
		transparent 14px
	);
	pointer-events: none;
}

.fv .container {
	position: relative;
	z-index: 1;
}

.fv__eyebrow {
	margin: 0 0 var(--space-sm);
	font-size: 12px;
	letter-spacing: 0.18em;
	font-weight: 700;
	color: var(--color-secondary);
	text-transform: uppercase;
}

.fv__title {
	color: #fff;
	font-size: 29px;
	line-height: 1.28;
	margin-bottom: var(--space-md);
	letter-spacing: 0.01em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* キーワードに黄色アンダーライン（マーカー風） */
.fv__title-accent {
	position: relative;
	display: inline-block;
	white-space: nowrap;
}

/* 蛍光マーカー：水平・ベタ塗りで、分割された2つが連続して見えるように
   （隣接スパンを少し重ねて継ぎ目の段差・隙間を解消） */
.fv__title-accent::after {
	content: '';
	position: absolute;
	left: -0.08em;
	right: -0.08em;
	bottom: 0.06em;
	height: 0.34em;
	background: var(--color-secondary);
	border-radius: 3px;
	z-index: -1;
}

.fv__desc {
	margin: 0 0 var(--space-lg);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.92);
}

.fv__desc strong {
	color: #fff;
	font-weight: 700;
}

.fv__cta {
	margin-top: var(--space-lg);
}

.fv__cta .button--lg {
	box-shadow: 0 6px 18px rgba(239, 90, 36, 0.45);
	white-space: nowrap;
}

.fv__cta-note {
	margin: var(--space-sm) 0 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
}

/* FV（SP：人物は非表示・テキストのみ全幅左寄せ。人物は PC で復活） */
.fv__grid {
	display: block;
	position: relative;
}

.fv__body {
	position: relative;
	z-index: 1;
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
}

.fv__media {
	display: none;
}

/* 人物切り抜き：背景に馴染ませる（後光＋足元影＋下端を溶かす） */
.fv__media {
	position: relative;
}

/* 後ろのソフトな光（スポットライト）で背景と一体化 */
.fv__media::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 118%;
	height: 92%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse 58% 60% at 50% 42%,
		rgba(125, 165, 205, 0.28), rgba(125, 165, 205, 0) 70%);
	z-index: 0;
	pointer-events: none;
}

/* 足元の接地影 */
.fv__media::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 66%;
	height: 26px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0) 72%);
	filter: blur(3px);
	z-index: 0;
	pointer-events: none;
}

.fv__img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	/* 下端をネイビーへ溶かして「立ち上がる」質感に */
	-webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
	filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.22));
}

/* 大きめ CTA ボタン + 矢印 */
.button--lg {
	padding: 15px 32px;
	font-size: 17px;
	border-radius: 999px;
}

.button__arrow {
	display: inline-block;
	transition: transform .2s ease;
}

.button:hover .button__arrow {
	transform: translateX(4px);
}

@media (min-width: 768px) {
	.fv {
		/* テキストのみFV：上下に余白を取った中央ヒーロー */
		padding: calc(var(--space-2xl) + var(--space-md)) var(--space-md);
	}
	/* PC は見出しを 1 行に（SP の改行は無効化） */
	.fv__title {
		font-size: 38px;
		white-space: nowrap;
	}
	.fv__title br { display: none; }
	.fv__eyebrow { font-size: 13px; }
	.fv__desc { font-size: 16px; }

	/* テキストのみFV：中央寄せヒーロー */
	.fv__grid {
		display: block;
		max-width: none;
	}
	.fv__body {
		max-width: 760px;
	}
	.fv__media {
		display: none;
	}
}

/* =============================================================
   FV：人物画像を復活（帯の右・帯の高さに合わせる）/ 2026-06-16
   透過カットアウト（fv-people.png）をテキストの横に配置。
   ============================================================= */

/* SP：テキストの下に縦積み（横並びは崩れるため）。中央・控えめサイズ */
.fv__media {
	display: block;
	margin: var(--space-lg) auto 0;
	max-width: 300px;
}
.fv__img {
	width: 100%;
	height: auto;
	/* カットアウトなので下端フェードのマスクは外す */
	-webkit-mask-image: none;
	mask-image: none;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.28));
}

/* スマホ（≤767px）：テキストは中央のまま、人物を少し大きく＆帯の下端へブリード。
   PC の「人物が帯の下端に立つ」見せ方をスマホでも踏襲する。 */
@media (max-width: 767px) {
	.fv {
		padding-bottom: 0;             /* 人物を帯の下端まで届かせる */
	}
	.fv__body {
		max-width: 460px;              /* テキスト幅を引き締めて中央に */
	}
	.fv__media {
		margin: var(--space-md) auto 0; /* 下マージン0＝下端ブリード */
		max-width: min(360px, 84vw);   /* 少し大きく */
	}
	.fv__img {
		filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.28));
	}
}

/* PC（≥1000px）：テキストは帯の「ど真ん中」に固定。人物は中央見出しの右隣〜右端ゾーンに配置。
   テキストとは重ならず、人物は帯の下端へブリード。
   ※1000px未満は人物ゾーンが狭く極小化するため、既存のテキスト中心ヒーローに委ねる。 */
@media (min-width: 1000px) {
	.fv {
		position: relative;
		overflow: hidden;
		min-height: 460px;
		padding: var(--space-lg) var(--space-md) 0; /* 下0で人物を帯下端までブリード */
		display: flex;
		align-items: center;           /* テキストを縦中央に */
	}
	.fv .fv__grid {
		position: static;              /* 人物の絶対配置を .fv（帯）基準に */
		width: 100%;
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}
	.fv__body {
		position: relative;
		z-index: 2;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;            /* テキストブロックを帯のど真ん中に */
		text-align: center;            /* センター揃え（CTAも中央） */
		padding: 0;
	}
	.fv__title {
		white-space: nowrap;           /* PCは1行に */
		font-size: clamp(30px, 3.2vw, 38px);
	}
	.fv__title-br { display: none; }   /* PCは改行を消して1行（SPは2行のまま） */
	.fv__cta {
		display: flex;
		flex-direction: column;
		align-items: center;           /* CTA を中央 */
	}
	/* 人物：画面中央(50%)から見出し半幅ぶん右にずらした位置〜右端のゾーン。
	   中央のテキストには重ならず、右側に寄せて下端ブリード。 */
	.fv__media {
		position: absolute;
		top: 0;                        /* 帯の全高を確保（高さ基準で人物を大きく） */
		bottom: 0;
		left: calc(50% + 243px);       /* 中央見出しの右端ギリギリ（人物本体が文字に接する） */
		right: 0;                      /* 右端（拡大ぶんのあふれは overflow:hidden で見切れ） */
		z-index: 1;
		margin: 0;
		display: flex;
		align-items: flex-end;         /* 下端ぞろえ＝帯下端にブリード */
		justify-content: flex-start;   /* 左詰め＝女性側から見せる（見出しに被らない） */
	}
	.fv__img {
		height: 100%;                  /* 帯の高さ基準で大きく */
		max-height: 460px;
		width: auto;
		/* 画面幅に応じて伸縮。やや小さめ＝右側は見切れず収まる（中央テキストとは非重複）。 */
		max-width: min(calc(50vw - 280px), 520px);
		object-fit: contain;
		object-position: bottom left;
	}
}

/* =============================================================
   TOP：FV以外のセクションに薄い色味＋アイコンの差し色 / 2026-06-16
   配色は FV パレット（ネイビー／オレンジ／黄）に統一。派手すぎない極薄ティント。
   ※相談フォームも <section> のため nth-of-type は使わず aria-label で確実に指定。
   ============================================================= */
.home .lp-section {
	padding: var(--space-xl) var(--space-lg);
	border-radius: var(--radius-lg);
}

/* こんな悩み → 薄ブルー（ネイビー寄り）×ネイビーアイコン */
.home .lp-section[aria-label="こんな悩み"] {
	background: #f2f6fc;
}
.home .lp-section[aria-label="こんな悩み"] .feature-card__icon {
	background: #e3ecf7;
	color: var(--color-primary);
}

/* 解決策 → 薄オレンジ × オレンジ（CTA色）アイコン */
.home .lp-section[aria-label="解決策"] {
	background: #fdf5f0;
}
.home .lp-section[aria-label="解決策"] .feature-card__icon {
	background: #fbe2d4;
	color: var(--color-cta);
}

/* サポート体制 → 薄クリーム × アンバー（黄系）アイコン */
.home .lp-section[aria-label="サポート体制"] {
	background: #fefaf0;
}
.home .lp-section[aria-label="サポート体制"] .feature-card__icon {
	background: #f8e8c4;
	color: #b9791a;
}

/* 再度の相談 CTA → 薄ブルーで締める */
.home .lp-section[aria-label="再度の相談 CTA"] {
	background: #f2f6fc;
}

/* =============================================================
   プライバシーポリシー モーダル / 2026-06-17
   ============================================================= */
.kk-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
}
.kk-modal.is-open { display: flex; }
.kk-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}
.kk-modal__dialog {
	position: relative;
	background: #fff;
	border-radius: var(--radius-md);
	width: 100%;
	max-width: 560px;
	max-height: 82vh;
	overflow-y: auto;
	padding: var(--space-lg);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
.kk-modal__close {
	position: absolute;
	top: 6px;
	right: 12px;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	color: var(--color-text-muted);
	cursor: pointer;
}
.kk-modal__title {
	font-size: 18px;
	color: var(--color-primary-dark);
	margin: 0 0 var(--space-md);
}
.kk-modal__body { font-size: 13px; line-height: 1.8; color: var(--color-text); }
.kk-modal__body h3 {
	font-size: 14px;
	color: var(--color-primary-dark);
	margin: var(--space-md) 0 var(--space-xs);
}
.kk-modal__body p { margin: 0 0 var(--space-sm); }
.kk-modal__dates { margin-top: var(--space-md); color: var(--color-text-muted); font-size: 12px; }

/* =============================================================
   スマホ（≤767px）：応募フォームを1画面に収める（余白を詰める＋CTA中央大きめ）
   ============================================================= */
@media (max-width: 767px) {
	.inquiry-form {
		padding: var(--space-md);
		margin: var(--space-md) 0;
	}
	.inquiry-form__title {
		font-size: 15px;
		margin-bottom: var(--space-sm);
	}
	.inquiry-form__row { margin-bottom: var(--space-sm); }
	.inquiry-form__label { margin-bottom: 2px; }
	.inquiry-form input[type="text"],
	.inquiry-form input[type="tel"],
	.inquiry-form input[type="email"],
	.inquiry-form select {
		padding: 9px 10px;
	}
	.inquiry-form__policy { margin: var(--space-sm) 0; }
	/* CTA：中央＆大きめ（ほぼ全幅のピル型） */
	.inquiry-form__submit { margin-top: var(--space-sm); }
	.inquiry-form .button {
		display: block;
		width: 100%;
		max-width: 360px;
		min-width: 0;
		margin: 0 auto;
		padding: 16px 24px;
		font-size: 18px;
		border-radius: 999px;
	}
}

/* 同意チェック前は送信ボタンを無効化（CF7のacceptance必須）。無効状態を視覚的に明示。 / 2026-06-18 */
.inquiry-form .button[disabled],
.inquiry-form .wpcf7-submit[disabled],
.wpcf7-submit:disabled {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
}