/* ============================================================
   タケダ自動車 求人LP v4 — /recruiting/page-recruiting.php
   接頭辞: .rec-  |  アニメーション接頭辞: .rec-anim-
   ============================================================ */

/* ============================================================
   CSS カスタムプロパティ（.rec-wrapper, .rec-line-float スコープ）
   ============================================================ */
.rec-wrapper,
.rec-line-float {
	/* ブランドカラー */
	--rec-blue: #005DAD;
	--rec-blue-dk: #004A8A;
	--rec-blue-lt: #DCE9F5;
	--rec-blue-xlt: #EEF4FA;
	--rec-yellow: #FFF100;
	--rec-yellow-dk: #E6D900;
	--rec-yellow-lt: #FFFDE0;

	/* LINE ブランドカラー（LINE 誘導要素のみ） */
	--rec-line: #06C755;
	--rec-line-dk: #05A847;
	--rec-line-lt: #E6F9ED;

	/* ニュートラル */
	--rec-black: #0D0F12;
	--rec-white: #FFFFFF;
	--rec-gray-50: #F5F7FA;
	--rec-gray-100: #EEF0F4;
	--rec-gray-200: #DDE0E6;
	--rec-gray-400: #9EA4B0;
	--rec-gray-600: #565D6B; /* opacity 廃止後の NOTE テキスト用 */
	--rec-gray-700: #3C424F; /* 本文テキスト */

	/* 白地に乗せる補助テキスト（opacity 不使用） */
	--rec-on-blue-sub: #B8D2EC; /* 青背景上の補助テキスト */
	--rec-on-blue-note: #7FAACC; /* 青背景上のNOTE */
	--rec-on-yellow-sub: #4A7A9B; /* 黄背景上の補助テキスト */
	--rec-on-yellow-note: #5E87A2; /* 黄背景上のNOTE */
	--rec-on-green-sub: #C8F0D8; /* 緑背景上の補助テキスト */
	--rec-on-green-note: #9ADBB9; /* 緑背景上のNOTE */

	/* タイポグラフィ */
	--rec-font: "Yu Gothic", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

	/* 角丸 */
	--rec-r-sm: 6px;
	--rec-r-md: 14px;
	--rec-r-lg: 24px;
	--rec-r-xl: 32px;

	/* トランジション */
	--rec-ease: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	--rec-ease-bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   .rec-wrapper スコープ内リセット（既存テーマ干渉防止）
   ============================================================ */
.rec-wrapper,
.rec-wrapper *,
.rec-wrapper *::before,
.rec-wrapper *::after {
	box-sizing: border-box;
}

:where(.rec-wrapper h1),
:where(.rec-wrapper h2),
:where(.rec-wrapper h3),
:where(.rec-wrapper p),
:where(.rec-wrapper ul),
:where(.rec-wrapper li),
:where(.rec-wrapper details),
:where(.rec-wrapper table),
:where(.rec-wrapper th),
:where(.rec-wrapper td) {
	margin: 0;
	padding: 0;
}

.rec-wrapper ul {
	list-style: none;
}

.rec-wrapper a {
	text-decoration: none;
}

.rec-wrapper img {
	display: block;
	max-width: 100%;
}

/* モバイル基本: 14px */
.rec-wrapper {
	font-family: var(--rec-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--rec-black);
	line-height: 1.75;
	overflow-x: hidden;
	position: relative;
}

/* ============================================================
   共通ユーティリティ
   ============================================================ */
.rec-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
}

/* セクションラベル（OUR TEAM / FEATURES 等） */
.rec-label {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: var(--rec-blue);
	border-bottom: 2.5px solid var(--rec-yellow);
	padding-bottom: 3px;
	margin-bottom: 18px;
}

/* 青背景上のラベル */
.rec-label--light {
	color: #B8D2EC;
	border-color: var(--rec-yellow);
}

/* セクション H2 */
.rec-section-h2 {
	font-size: clamp(26px, 5.5vw, 44px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: var(--rec-black);
	margin-bottom: 28px;
}

.rec-section-h2--light {
	color: var(--rec-white);
}

/* 手書き風アンダーライン強調 em */
.rec-em {
	font-style: normal;
	position: relative;
	display: inline-block;
	color: var(--rec-blue);
}

.rec-em::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px;
	height: 7px;
	background: var(--rec-yellow);
	border-radius: 3px;
	z-index: -1;
	transform: rotate(-0.6deg);
	pointer-events: none;
}

/* 青背景上（黄で強調） */
.rec-em--light {
	color: var(--rec-yellow);
}

.rec-em--light::after {
	background: rgba(255, 241, 0, 0.25);
}

/* FV コピー ハイライト（黄背景）*/
.rec-highlight {
	position: relative;
	display: inline-block;
	color: var(--rec-blue);
	padding: 10px 8px;
	margin-right: 0.15em;
}

.rec-highlight::before {
	content: '';
	position: absolute;
	left: -4px;
	right: -4px;
	top: 2px;
	bottom: 2px;
	background: var(--rec-yellow);
	z-index: -1;
	transform: rotate(-1.5deg) skewX(-2deg);
	border-radius: 4px;
}

/* バッジタグ */
.rec-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	padding: 5px 14px;
	background: var(--rec-yellow);
	color: var(--rec-blue);
	border-radius: 20px;
}

/* プレースホルダー画像枠 */
.rec-placeholder {
	background: var(--rec-blue-lt);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4A7299;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	border-radius: var(--rec-r-md);
}

.rec-placeholder--photo {
	border-radius: var(--rec-r-lg);
}

/* ============================================================
   ボタン共通
   ============================================================ */
.rec-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--rec-font);
	font-weight: 700;
	letter-spacing: 0.04em;
	border: none;
	cursor: pointer;
	border-radius: 50px;
	transition:
		transform var(--rec-ease-bounce),
		box-shadow var(--rec-ease),
		background-color var(--rec-ease);
	text-decoration: none;
	line-height: 1;
}

.rec-btn__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* LINE グリーンボタン（汎用） */
.rec-btn--line {
	background: var(--rec-line);
	color: var(--rec-white);
	padding: 15px 30px;
	font-size: 15px;
}

.rec-btn--line:hover {
	background-color: var(--rec-line-dk);
	color: var(--rec-white);
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(6, 199, 85, 0.40);
}

.rec-btn--line:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(6, 199, 85, 0.35);
}

/* CTA 大ボタン（緑背景上の白ボタン） */
.rec-btn--cta {
	background: var(--rec-white);
	color: var(--rec-line-dk);
	padding: 18px 52px;
	font-size: 16px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}

.rec-btn--cta:hover {
	background-color: #F0FBF4;
	color: var(--rec-line-dk);
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.rec-btn--cta:active {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

/* ============================================================
   ① FIRST VIEW
   ── 修正: min-height を 100svh → calc でヘッダー高を引いた適切な値に
            コンテンツが間延びせず収まる高さ
   ============================================================ */
.rec-fv {
	position: relative;
	/* ヘッダー高 ~70px を考慮し、viewport の 90% を上限にする */
	min-height: min(calc(100svh - 70px), 780px);
	background-color: var(--rec-blue);
	display: flex;
	align-items: center;
	overflow: hidden;
	/* 上: ヘッダー分 + 余白, 下: スクロールヒント分 */
	padding: 28px 24px 72px;
	z-index: 1;
}

/* 右下の黄色アクセント円 */
.rec-fv__bg-yellow {
	position: absolute;
	bottom: -80px;
	right: -80px;
	width: min(50vw, 560px);
	height: min(50vw, 560px);
	background: var(--rec-yellow);
	border-radius: 50%;
	opacity: 0.10;
	pointer-events: none;
}

/* 斜めストライプ */
.rec-fv::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(-45deg,
			transparent 0px, transparent 22px,
			rgba(255, 255, 255, 0.02) 22px, rgba(255, 255, 255, 0.02) 23px);
	pointer-events: none;
}

.rec-fv__layout {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* --- FV テキスト --- */
.rec-fv__eyebrow {
	margin-bottom: 16px;
}

.rec-fv__copy {
	font-size: clamp(30px, 7.5vw, 56px);
	font-weight: 700;
	color: var(--rec-white);
	line-height: 1.2;
	letter-spacing: -0.035em;
	margin-bottom: 14px;
	position: relative;
	z-index: 1;
}

/* opacity廃止: rgba で明示 */
.rec-fv__sub {
	font-size: 15px;
	color: #ffffff;
	line-height: 1.9;
	margin-bottom: 20px;
}

.rec-fv__actions {
	width: fit-content;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-inline: auto;
}

.rec-fv__actions::before {
	content: 'まずは気軽にひと言どうぞ!';
	font-size: 15px;
	color: var(--rec-white);
	margin-inline: auto;
}

/* opacity廃止: rgba で明示 */
.rec-fv__note {
	font-size: 15px;
	color: #ffffff;
}

/* FV 統計バー */
.rec-fv__stats {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 36px;
	padding: 20px 22px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--rec-r-md);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.rec-fv__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex: 1;
}

.rec-fv__stat-val {
	font-size: 26px;
	font-weight: 700;
	color: var(--rec-yellow);
	/* 青背景 × 黄テキスト ✓ */
	line-height: 1;
	letter-spacing: -0.03em;
}

.rec-fv__stat-val small {
	font-size: 13px;
	letter-spacing: 0;
}

/* opacity廃止 */
.rec-fv__stat-label {
	font-size: 13px;
	color: #deebf5;
	/* 青背景上の補助ラベル */
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.rec-fv__stat-divider {
	width: 1px;
	height: 36px;
	background: rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}

/* FV 写真エリア */
.rec-fv__photo-area {
	position: relative;
}

.rec-fv__photo-frame {
	position: relative;
	display: block;
	transform: rotate(1.5deg);
}

.rec-fv__photo {
	width: 100%;
	height: 240px;
	border-radius: var(--rec-r-lg);
	border: 4px solid var(--rec-white);
	box-shadow: 8px 8px 0 var(--rec-yellow);
    overflow: hidden;
}

.rec-fv__photo-deco {
	position: absolute;
	inset: -8px;
	border: 2px dashed rgba(255, 255, 255, 0.22);
	border-radius: calc(var(--rec-r-lg) + 8px);
	pointer-events: none;
	animation: rec-rotate-slow 22s linear infinite;
	z-index: -1;
}

/* FV バブルバッジ */
.rec-fv__bubble {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	border-radius: 50%;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.rec-fv__bubble--a {
	width: 72px;
	height: 72px;
	background: var(--rec-yellow);
	color: var(--rec-blue);
	/* 黄背景 × 濃い青文字 ✓ */
	top: -22px;
	right: -18px;
}

.rec-fv__bubble--b {
	width: 78px;
	height: 78px;
	background: var(--rec-white);
	color: var(--rec-blue);
	/* 白背景 × 濃い青文字 ✓ */
	bottom: -22px;
	left: -18px;
}

/* FV スクロールヒント */
.rec-fv__scroll-hint {
	position: absolute;
	bottom: 4px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #7FAACC;
	/* opacity廃止 */
	font-size: 9px;
	letter-spacing: 0.2em;
	z-index: 3;
	pointer-events: none;
}

.rec-fv__scroll-line {
	width: 1px;
	height: 36px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
	animation: rec-scroll-pulse 2s ease-in-out infinite;
}

/* ============================================================
   ② TEAM INTRO / JOBS
   ============================================================ */
.rec-intro {
	padding: 96px 0 80px;
	background: var(--rec-white);
	position: relative;
	z-index: 1;
}

/* 右上ドットテクスチャ */
.rec-intro::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 280px;
	height: 280px;
	background-image: radial-gradient(circle, rgba(0, 93, 173, 0.10) 1.5px, transparent 1.5px);
	background-size: 20px 20px;
	pointer-events: none;
}

.rec-intro__layout {
	display: flex;
	flex-direction: column;
	gap: 48px;
	margin-bottom: 64px;
}

.rec-intro__lead {
	font-size: 15px;
	color: var(--rec-gray-700);
	line-height: 2.0;
	margin-top: 4px;
}

/* 傾き写真コラージュ */
.rec-intro__photos {
	position: relative;
	height: 260px;
	margin: 0 -8px;
}

.rec-photo-tilt {
	position: absolute;
}

.rec-photo-tilt--a {
	width: 54%;
	top: 0;
	left: 0;
	transform: rotate(-2.5deg);
}

.rec-photo-tilt--b {
	width: 50%;
	bottom: 0;
	left: 0;
	transform: rotate(2deg) translateX(50%);
}

.rec-photo-tilt--c {
	width: 50%;
	top: 0;
	right: 0;
	transform: rotate(3deg);
}

.rec-photo-tilt .rec-placeholder--photo {
	height: 190px;
	border: 3px solid var(--rec-white);
	box-shadow: 4px 4px 0 var(--rec-yellow);
}

.rec-intro__deco-text {
	position: absolute;
	font-size: 80px;
	font-weight: 700;
	color: rgba(0, 93, 173, 0.05);
	letter-spacing: -0.05em;
	bottom: -12px;
	right: 8px;
	pointer-events: none;
	user-select: none;
	line-height: 1;
}

/* --- 職種カード --- */
.rec-jobs {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.rec-job-card {
	position: relative;
	border-radius: var(--rec-r-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition:
		transform var(--rec-ease-bounce),
		box-shadow var(--rec-ease);
	cursor: default;
}

.rec-job-card:hover {
	transform: translateY(-6px) rotate(0.3deg);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}

/* カード 01: 青背景 */
.rec-job-card--01 {
	background: var(--rec-blue);
	color: var(--rec-white);
	/* 青背景 × 白文字 ✓ */
}

/* カード 02: 黄背景 */
.rec-job-card--02 {
	background: var(--rec-yellow);
	color: var(--rec-blue);
	/* 黄背景 × 濃い青文字 ✓ */
}

/* カード 03: 白背景 */
.rec-job-card--03 {
	background: var(--rec-white);
	color: var(--rec-black);
	border: 2.5px solid var(--rec-blue);
}

/* 背景ナンバー */
.rec-job-card__num-bg {
	position: absolute;
	font-size: 120px;
	font-weight: 700;
	opacity: 0.055;
	right: -12px;
	top: -16px;
	line-height: 1;
	letter-spacing: -0.06em;
	pointer-events: none;
	user-select: none;
}

/* 白文字カードでは白 */
.rec-job-card--01 .rec-job-card__num-bg { color: var(--rec-white); }
/* 青文字カードでは青 */
.rec-job-card--02 .rec-job-card__num-bg { color: var(--rec-blue); }
.rec-job-card--03 .rec-job-card__num-bg { color: var(--rec-blue); }

.rec-job-card__photo {
	width: 100%;
	height: 200px;
	border-radius: 0;
	flex-shrink: 0;
	overflow: hidden;
	align-items: center;
}

.rec-job-card--01 .rec-job-card__photo {
	background: rgba(255, 255, 255, 0.10);
	color: #B8D2EC;
}

.rec-job-card--02 .rec-job-card__photo {
	background: rgba(0, 93, 173, 0.08);
	color: #4A7299;
}

.rec-job-card--03 .rec-job-card__photo {
	background: var(--rec-blue-lt);
	color: #4A7299;
}

.rec-job-card__body {
	padding: 28px 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

/* opacity廃止: 明示的な色指定 */
.rec-job-card__role-en {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	margin-bottom: 2px;
}

.rec-job-card--01 .rec-job-card__role-en { color: #B8D2EC; }
.rec-job-card--02 .rec-job-card__role-en { color: #4A7299; }
.rec-job-card--03 .rec-job-card__role-en { color: var(--rec-gray-400); }

.rec-job-card__title {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.rec-job-card--01 .rec-job-card__title {
	color: var(--rec-white);
}

.rec-job-card__catch {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.rec-job-card--01 .rec-job-card__catch { color: var(--rec-white); }
.rec-job-card--02 .rec-job-card__catch { color: var(--rec-blue-dk); }
.rec-job-card--03 .rec-job-card__catch { color: var(--rec-gray-700); }

.rec-job-card__desc {
	font-size: 15px;
	line-height: 1.85;
}

.rec-job-card--01 .rec-job-card__desc { color: var(--rec-white); }
.rec-job-card--02 .rec-job-card__desc { color: #3A6880; }
.rec-job-card--03 .rec-job-card__desc { color: var(--rec-gray-600); }

.rec-job-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 4px;
}

.rec-job-card__tags li {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 13px;
	border-radius: 20px;
}

.rec-job-card--01 .rec-job-card__tags li {
	background: rgba(255, 255, 255, 0.15);
	color: var(--rec-white);
}

.rec-job-card--02 .rec-job-card__tags li {
	background: rgba(0, 93, 173, 0.10);
	color: var(--rec-blue-dk);
}

.rec-job-card--03 .rec-job-card__tags li {
	background: var(--rec-gray-50);
	color: var(--rec-blue);
}

/* ============================================================
   ③ FEATURES — 青背景 + ドットテクスチャ
   ── 修正: アイコン → タイトル の縦並びを flex で完全整列
   ============================================================ */
.rec-features {
	background: var(--rec-blue);
	padding: 68px 0;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.rec-features__dot-overlay {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
}

.rec-features::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: rgba(255, 241, 0, 0.06);
	pointer-events: none;
}

.rec-features::after {
	content: '';
	position: absolute;
	bottom: -80px;
	left: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.03);
	pointer-events: none;
}

.rec-features__header {
	margin-bottom: 36px;
}

.rec-features__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	/* 全カードが同じ高さになるよう stretch */
	align-items: stretch;
}

/* カード: flexbox で内部を縦整列 */
.rec-feature {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--rec-r-lg);
	padding: 16px 11px 22px;
	display: flex;
	flex-direction: column;
	font-feature-settings: "palt";
	text-align: justify;
	/* アイコン → タイトル → 説明文の順に整列 */
	/*   align-items: flex-start; */
	gap: 0;
	transition: background var(--rec-ease), transform var(--rec-ease-bounce);
}

/* アイコン丸 */
.rec-feature__icon-wrap {
	margin-inline: auto;
	margin-bottom: 10px;
	flex-shrink: 0;
}

.rec-feature__icon-circle {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--rec-yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* タイトル */
.rec-feature__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--rec-white);
	/* 青背景 × 白文字 ✓ */
	line-height: 1.5;
	margin-bottom: 12px;
	text-align: center;
}

/* 説明文: opacity廃止 → 明示的な薄い水色 */
.rec-feature__desc {
	font-size: 15px;
	color: #f3f9ff;
	/* 青背景上の副テキスト ✓ */
	line-height: 1.6;
	/* margin-top: auto;  /* 高さが不均一でも説明文が下に寄らず自然に並ぶ */
}

/* ============================================================
   ④ NUMBERS — 黄背景
   ── opacity廃止: 黄背景上のテキストは全て明示色
   ============================================================ */
.rec-numbers {
	background: var(--rec-yellow);
	padding: 42px 0;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.rec-numbers::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(0, 93, 173, 0.06);
	pointer-events: none;
}

.rec-numbers__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.rec-number {
	text-align: center;
	padding: 20px 0;
}

.rec-number__val {
	font-size: 54px;
	font-weight: 700;
	color: var(--rec-blue);
	/* 黄背景 × 濃い青 ✓ */
	line-height: 1;
	letter-spacing: -0.05em;
	margin-bottom: 10px;
}

.rec-number__val span {
	font-size: 24px;
	letter-spacing: -0.02em;
}

.rec-number__val small {
	font-size: 18px;
}

/* opacity廃止 */
.rec-number__label {
	font-size: 16px;
	font-weight: 700;
	color: #2A5C8A;
	/* 黄背景上の中程度の青 ✓ */
	letter-spacing: 0.08em;
	margin-bottom: 6px;
}

.rec-number__note {
	font-size: 14px;
	color: #3A6880;
	/* 黄背景上の補助テキスト ✓ */
	line-height: 1.6;
}

/* opacity廃止 */
.rec-numbers__sep {
	font-size: 22px;
	font-weight: 700;
	color: #9BB8CE;
	/* 黄背景上の淡い区切り ✓ */
}

/* ============================================================
   社員旅行スライダー
   ── JS 不使用・純 CSS 無限スクロール
   ── 7枚 × 2セット = 14スライドを横に並べ、
      1セット分（7枚）移動したら瞬時にリセット
   ============================================================ */

.rec-trip {
	padding: 68px 0 10px;
	background: var(--rec-gray-50);
	position: relative;
	z-index: 1;
	overflow: hidden;
	/* track がはみ出さないようマスク */
}

/* 見出しブロック */
.rec-trip__header {
	margin-bottom: 48px;
}

/* スライダー外枠（フル幅・左右グラデーションマスクで自然に消える） */
.rec-trip__track-wrap {
	width: 100%;
	/* overflow: hidden; */
	/* 左右端をフェードアウト */
	-webkit-mask-image: linear-gradient(to right,
			transparent 0%,
			#000 8%,
			#000 92%,
			transparent 100%);
	mask-image: linear-gradient(to right,
			transparent 0%,
			#000 8%,
			#000 92%,
			transparent 100%);
}


/*
 * トラック: スライド 14枚（7×2）を横一列に配置
 * translateX で 1セット分（= スライド1枚幅×7 + gap×7）左へ移動
 * → animation は CSS変数 --rec-slide-w で制御
 */
/* .rec-trip__track {
/* 	display: flex;
/* 	gap: 0;
/* 	width: max-content;
/* 	will-change: transform;
/* }
/* .rec-trip__track--travel {
/* 	animation: rec-trip-scroll--travel 16s linear infinite;
/* }
/* @keyframes rec-trip-scroll--travel {
/* 	0% { transform: translateX(0); }
/* 	100% { transform: translateX(-784px); }
/* }
/* @media (min-width: 640px) {
/* 	.rec-trip__track--travel {
/* 		animation: rec-trip-scroll--travel 12s linear infinite;
/* 	}
/* 	@keyframes rec-trip-scroll--travel {
/* 		0% { transform: translateX(0); }
/* 		100% { transform: translateX(-1280px); }
/* 	}
/* }
/* .rec-trip__track--company { animation: rec-trip-scroll--company 36s linear infinite; }
/* @keyframes rec-trip-scroll--company {
/* 	0% { transform: translateX(-130px); }
/* 	100% { transform: translateX(-1894px); }
/* }
/* @media (min-width: 640px) {
/* 	.rec-trip__track--company { animation: rec-trip-scroll--company 27s linear infinite; }
/* 	@keyframes rec-trip-scroll--company {
/* 		0% { transform: translateX(-212px); }
/* 		100% { transform: translateX(-3092px); }
/* 	}
/* }
/* .rec-trip__track--thanksgiving {
/* 	animation: rec-trip-scroll--thanksgiving 28s linear infinite;
/* }
/* @keyframes rec-trip-scroll--thanksgiving {
/* 	0% { transform: translateX(-65px); }
/* 	100% { transform: translateX(-1437px); }
/* }
/* @media (min-width: 640px) {
/* 	.rec-trip__track--thanksgiving { animation: rec-trip-scroll--thanksgiving 21s linear infinite; }
/* 	@keyframes rec-trip-scroll--thanksgiving {
/* 		0% { transform: translateX(-106px); }
/* 		100% { transform: translateX(-2346px); }
/* 	}
/* }
/* 
/* .rec-trip__slide {
/* 	flex-shrink: 0;
/* 	width: 180px;
/* 	height: 126px;
/* 	margin-right: 16px;
/* 	margin-bottom: 16px;
/* 	border-radius: var(--rec-r-md);
/* 	overflow: hidden;
/* 	background: var(--rec-blue-lt);
/* 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
/* 	transition: transform var(--rec-ease), box-shadow var(--rec-ease);
/* 	transform-origin: top;
/* }
/* 
/* .rec-trip__slide:hover {
/* 	transform: scale(1.03) translateY(-4px);
/* 	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
/* }
/* 
/* .rec-trip__slide img {
/* 	width: 100%;
/* 	height: 100%;
/* 	object-fit: cover;
/* 	display: block;
/* 	-webkit-user-drag: none;
/* 	user-select: none;
/* }
/* 
/* .rec-trip__slide span {
/* 	width: fit-content;
/* 	font-size: 14px;
/* 	color: var(--rec-blue);
/* 	line-height: 1;
/* 	display: block;
/* 	background: #fffd;
/* 	padding: 0.5em 0.75em;
/* 	margin-inline: auto 0;
/* 	border-radius: .3em 0 0 0;
/* 	position: relative;
/* 	bottom: 2em;
/* }
/* 
/* @media (min-width: 640px) {
/* 	
/* 	.rec-trip__track-wrap:hover .rec-trip__track {
/* 		animation-play-state: paused; /* ホバーで一時停止 */
/* 	}
/* 	.rec-trip__slide {
/* 		width: 300px;
/* 		height: 210px;
/* 		margin-right: 20px;
/* 		margin-bottom: 20px;
/* 	}
/* } */

.rec-photos {
    padding: 68px 0 10px;
    background: var(--rec-gray-50);
}
.rec-photos__header {
    margin-bottom: 28px;
}
.rec-photos__subtext {
	text-align: center;
}
.rec-photos__wrap {
	display: grid;
	grid-template-columns: repeat(2, min(420px, 40vw));
	gap: 1px;
	justify-content: center;
    width: fit-content;
    margin-inline: auto;
    border-radius: var(--rec-r-md);
    overflow: hidden;
	position: relative;
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.1);
}
.rec-photos__wrap a {
	overflow: hidden;
	/* border-radius: var(--rec-r-md); */
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
	transition: transform var(--rec-ease), box-shadow var(--rec-ease);
	position: relative;
}
.rec-photos__wrap img{
	transition: all .4s ease;
}
.rec-photos__wrap a:hover img{
	transform: scale(1.02);
    filter: saturate(1.2);
    opacity: 0.8;
}
.rec-photos__link {
	display: block;
    width: fit-content;
    font-size: 1.125em;
	color: var(--rec-blue);
    font-weight: bold;
    text-align: center;
    margin: 2em auto 0;
    padding: 1em 3em 1em 1.9em;
    border: solid 1px;
    border-radius: var(--rec-r-md);
    background: white;
	position: relative;
    box-shadow: 0 0 2em rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease-in-out;
}
.rec-photos__link::before {
    content: "";
    position: absolute;
    display: block;
    width: 1.35em;
    aspect-ratio: 1;
    border-radius: 9999px;
    background-color: var(--rec-yellow);
    top: 50%;
    right: 0.9em;
    transform: translateY(-50%);
    transform-origin: center;
	transition: all 0.2s ease-in-out;
}
.rec-photos__link::after {
	content: "";
    position: absolute;
    display: block;
    width: 0.5em;
    aspect-ratio: 1;
    border-right: solid .13em var(--rec-blue);
    border-top: solid .13em var(--rec-blue);
    top: 50%;
    right: 1.4em;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center;
	transition: all 0.2s ease-in-out;
}
.rec-photos__link:hover {
    padding: 1em 2.7em 1em 2.2em;
	opacity: .6;
}
.rec-photos__link:hover::before {
    right: .7em;
}
.rec-photos__link:hover::after {
    right: 1.2em;
    /* transform:
		translateY(-50%) rotate(45deg)
		scaleY(50%); */
}
.rec-photos__image {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1;
}
.rec-photos__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    font-size: 1.5rem;
    color: var(--rec-blue);
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 .2em #fffa;
    line-height: 1.4;
}
.rec-photos__text::before {
    content: "";
    display: block;
    background: #fff9;
    height: 100%;
    aspect-ratio: 1;
    padding: 3em;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
	z-index: -1;
}

.rec-gallery {
    padding: 68px 0 80px;
    background: var(--rec-gray-50);
}

.rec-gallery__header {
    margin-bottom: 32px;
    text-align: center;
}

.rec-gallery__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 32px;
    max-width: 760px;
}

.rec-gallery__filter {
    appearance: none;
    border: 1px solid var(--rec-blue);
    background: #fff;
    color: var(--rec-blue);
    border-radius: 999px;
    padding: 0.72rem 1rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.rec-gallery__filter:hover {
    background: var(--rec-blue-lt);
}

.rec-gallery__filter.is-active {
    background: var(--rec-blue);
    color: #fff;
}

.rec-gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.rec-gallery__item {
    background: #fff;
    overflow: hidden;
    border-radius: var(--rec-r-sm);
    box-shadow: 0 10px 24px rgba(20, 20, 20, 0.03);
}

.rec-gallery__item.is-hidden {
    display: none;
}

.rec-gallery__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--rec-blue-lt);
}

.rec-gallery__image--placeholder {
    background:
        linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%),
        var(--rec-blue-lt);
}

.rec-gallery__text {
    padding: 1rem 1rem 1.2rem;
    font-size: 1.4rem;
    line-height: 1.7;
    color: var(--rec-gray-700);
    text-align: left;
    font-weight: bold;
}

.rec-gallery__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--rec-gray-600);
    padding: 32px 0;
}

@media (min-width: 640px) {
	.rec-photos__header {
		margin-bottom: 48px;
	}
    .rec-photos {
        padding: 96px 0 80px;
    }
	.rec-photos__image {
		aspect-ratio: 4 / 3;
	}
	.rec-photos__text {
		font-size: 2.4rem;
	}
    .rec-gallery {
        padding: 96px 0 100px;
    }

    .rec-gallery__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
	.rec-gallery__item {
		border-radius: var(--rec-r-md);
	}
}
/* ============================================================
   ⑤ FAQ
   ============================================================ */
.rec-faq {
	padding: 76px 0;
	background: var(--rec-gray-50);
	position: relative;
	z-index: 1;
}

.rec-faq::before {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 220px;
	height: 220px;
	background-image: radial-gradient(circle, rgba(255, 241, 0, 0.45) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	pointer-events: none;
}

.rec-faq__layout {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.rec-faq__subtext {
	font-size: 15px;
	color: var(--rec-gray-600);
	line-height: 1.85;
	margin-top: 8px;
	text-align: center;
}

/* アコーディオン */
.rec-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rec-faq-item {
	background: var(--rec-white);
	border: 2px solid var(--rec-gray-200);
	border-radius: var(--rec-r-md);
	overflow: hidden;
	transition: border-color var(--rec-ease), box-shadow var(--rec-ease);
}

.rec-faq-item[open] {
	border-color: var(--rec-blue);
	box-shadow: 0 4px 20px rgba(0, 93, 173, 0.10);
}

.rec-faq-item__q {
	font-family: var(--rec-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--rec-black);
	padding: 16px 56px 16px 22px;
	cursor: pointer;
	list-style: none;
	position: relative;
	line-height: 1.6;
}

.rec-faq-item__q::-webkit-details-marker {
	display: none;
}

.rec-faq-item__q::before {
	content: 'Q.';
	color: var(--rec-blue);
	font-weight: 700;
	margin-right: 10px;
}

.rec-faq-item__q::after {
	content: '';
	position: absolute;
	right: 22px;
	top: calc(50% - 7px);
	width: 11px;
	height: 11px;
	border-right: 2.5px solid var(--rec-blue);
	border-bottom: 2.5px solid var(--rec-blue);
	transform: rotate(45deg);
	transition: transform var(--rec-ease);
}

.rec-faq-item[open] .rec-faq-item__q::after {
	transform: rotate(-135deg);
	top: calc(50% - 3px);
}

.rec-faq-item__a {
	padding: 18px 22px 24px;
	border-top: 1px solid var(--rec-gray-100);
}

.rec-faq-item__a p {
	font-size: 15px;
	color: var(--rec-gray-700);
	line-height: 1.9;
}

.rec-faq-item__a p::before {
	content: 'A. ';
	color: var(--rec-gray-400);
	font-weight: 700;
}

/* ============================================================
   ⑥ REQUIREMENT
   ============================================================ */
.rec-req {
	padding: 68px 0;
	background: var(--rec-white);
	position: relative;
	z-index: 1;
}

.rec-req__header {
	margin-bottom: 36px;
}

.rec-req__table-wrap {
	overflow-x: auto;
	border-radius: var(--rec-r-md);
	border: 2px solid var(--rec-gray-200);
	-webkit-overflow-scrolling: touch;
}

.rec-req__table-wrap+.rec-req__table-wrap {
	margin-top: 30px;
}

.rec-req__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--rec-font);
	font-size: 15px;
	border-spacing: 0;
}

.rec-req__table tr {
	border-bottom: 1px solid var(--rec-gray-100);
}

.rec-req__table tr:last-child {
	border-bottom: none;
}

.rec-req__table th {
	width: 110px;
	padding: 16px 12px;
	background: var(--rec-blue);
	color: var(--rec-white);
	/* 青背景 × 白 ✓ */
	font-family: var(--rec-font);
	font-weight: 700;
	font-size: 13px;
	text-align: left;
	vertical-align: top;
	white-space: nowrap;
	border: none;
}

.rec-req__table td {
	padding: 16px 12px;
	color: var(--rec-black);
	font-family: var(--rec-font);
	line-height: 1.8;
	vertical-align: top;
	border: none;
}

.rec-req__table td small {
	display: block;
	font-size: 12px;
	color: var(--rec-gray-600);
	margin-top: 5px;
}

/* ============================================================
   ⑦ CTA — LINE グリーン背景
   ============================================================ */
.rec-cta {
	background: var(--rec-line);
	padding: 96px 0 104px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	/* 上辺を斜めにカット: */
	clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%);
	/* clip-path 分だけ上に余白を追加して視覚的に補正 */
	margin-top: -2px;
}

/* 装飾円（前景レイヤー） */
.rec-cta::before {
	content: '';
	position: absolute;
	top: -80px;
	right: -80px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	pointer-events: none;
}

.rec-cta::after {
	content: '';
	position: absolute;
	bottom: -60px;
	left: -60px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.05);
	pointer-events: none;
}

.rec-cta__inner {
	text-align: center;
	position: relative;
	z-index: 1;
}

.rec-cta__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.28em;
	color: #C8F0D8;
	margin-bottom: 20px;
}

.rec-cta__title {
	font-size: clamp(24px, 5.5vw, 42px);
	font-weight: 700;
	color: var(--rec-white);
	line-height: 1.3;
	letter-spacing: -0.03em;
	margin-bottom: 20px;
}

.rec-cta__title-accent {
	display: inline-block;
	background: var(--rec-yellow);
	color: #069235;
	padding: 0 10px 2px;
	border-radius: 6px;
	transform: rotate(-1deg);
}

.rec-cta__desc {
	font-size: 15px;
	color: var(--rec-white);
	line-height: 2.0;
	margin-bottom: 40px;
}

.rec-cta__note {
	margin-top: 20px;
	font-size: 14px;
	color: var(--rec-white);
}

/* ============================================================
   LINE フローティングボタン
   ── 修正: スマホ=円形・PCは右端タブ、それぞれに合ったホバー
   ============================================================ */
.rec-line-float {
	position: fixed;
	z-index: 950;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	background: var(--rec-line);
	/* LINE グリーン ✓ */
	text-decoration: none;
	transition:
		background-color var(--rec-ease),
		box-shadow var(--rec-ease),
		transform var(--rec-ease);

	/* スマホ: 円形 */
	width: 64px;
	height: 64px;
	border-radius: 50%;
	box-shadow: 0 4px 20px rgba(6, 199, 85, 0.50);

	/* 既存 #page_top (bottom:20px; right:20px) と重ならない位置 */
	bottom: 92px;
	right: 20px;
}

.rec-line-float:hover {
	background-color: var(--rec-line-dk);
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(6, 199, 85, 0.55);
}

.rec-line-float:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(6, 199, 85, 0.45);
}

.rec-line-float__label {
	font-family: var(--rec-font);
	font-size: 9px;
	font-weight: 700;
	color: var(--rec-white);
	text-align: center;
	line-height: 1.3;
}

/* ============================================================
   アニメーション定義
   ============================================================ */

/* FV フェードイン */
.rec-anim-fadein {
	opacity: 0;
	transform: translateY(16px);
	animation: rec-fadein 0.7s ease forwards;
	animation-delay: var(--delay, 0s);
}

@keyframes rec-fadein {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* スクロールリビール（JS で .rec-anim-reveal--in を付与） */
.rec-anim-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--delay, 0s);
}

.rec-anim-reveal--in {
	opacity: 1;
	transform: translateY(0);
}

/* FV バブル浮遊 */
.rec-anim-float-a {
	animation: rec-float-a 4.5s ease-in-out infinite;
}

.rec-anim-float-b {
	animation: rec-float-b 5.2s ease-in-out infinite;
}

@keyframes rec-float-a {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-12px) rotate(3deg);
	}
}

@keyframes rec-float-b {
	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(10px) rotate(-2deg);
	}
}

/* 背景図形の浮遊 */
@keyframes rec-float-slow {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-22px);
	}
}

@keyframes rec-float-drift {

	0%,
	100% {
		transform: translateX(0) rotate(20deg);
	}

	50% {
		transform: translateX(15px) rotate(25deg);
	}
}

@keyframes rec-rotate-slow {
	to {
		transform: rotate(360deg);
	}
}

/* スクロールライン */
@keyframes rec-scroll-pulse {
	0% {
		opacity: 1;
		transform: scaleY(1);
	}

	100% {
		opacity: 0;
		transform: scaleY(0.3);
	}
}

/* ============================================================
   レスポンシブ — mb: 〜640px
   ============================================================ */
@media (max-width: 639px) {
	.rec-container .rec-section-h2 {
		letter-spacing: -.04em;
	}

	.rec-fv__text {
		display: contents;
	}

	.rec-fv__layout {
		gap: 0;
	}

	.rec-fv__copy {
		font-feature-settings: "palt";
		letter-spacing: 0;
	}

	.rec-fv__eyebrow {
		order: -1;
	}

	.rec-fv__photo-area {
		order: -1;
		margin-block: 10px 40px;
	}

	.rec-intro__layout {
		gap: 10px;
		margin-bottom: 45px;
	}

	.rec-intro__deco-text {
		bottom: 170px;
	}

	.rec-intro__photos {
		height: 160px;
	}

	.rec-placeholder--photo {
		overflow: hidden;
	}

	.rec-photo-tilt .rec-placeholder--photo {
		height: 174px;
	}

	.rec-photo-tilt--a {
		left: -2%;
		top: -1%;
		transform: rotate(-3.1deg);
	}

	.rec-photo-tilt--c {
		right: -2%;
		transform: rotate(5deg);
	}

	.rec-photo-tilt--b {
		display: none;
	}

	.rec-photo-tilt--a,
	.rec-photo-tilt--c {
		width: 54.5%;
	}
}

/* ============================================================
   レスポンシブ — md: 640px〜
   ============================================================ */
@media (min-width: 640px) {

	.rec-wrapper {
		font-size: 15px;
	}

	.rec-container {
		padding: 0 32px;
	}

	.rec-fv {
		padding: 96px 40px 80px;
	}

	.rec-fv__photo {
		height: 320px;
	}

	.rec-fv__stats {
		gap: 24px;
	}

	.rec-fv__stat-val {
		font-size: 30px;
	}

	.rec-jobs {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.rec-features {
		padding: 96px 0;
	}

	.rec-features__header {
		margin-bottom: 52px;
	}

	.rec-features__grid {
		gap: 18px;
	}

	.rec-feature {
		padding: 16px;
		text-align: justify;
	}

	.rec-feature__title {
		margin-bottom: 6px;
	}

	.rec-feature__desc {
		line-height: 1.5;
	}

	.rec-numbers__inner {
		flex-direction: row;
		justify-content: center;
		gap: 30px;
	}

	.rec-feature__icon-wrap {
		margin-bottom: 20px;
	}

	.rec-numbers {
		padding: 72px 0;
	}

	.rec-faq {
		padding: 96px 0;
	}

	.rec-faq__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 60px;
	}

	.rec-faq__heading {
		flex: 0 0 240px;
		position: sticky;
		top: 80px;
	}

	.rec-faq__list {
		flex: 1;
	}

	.rec-req {
		padding: 96px 0;
	}

	.rec-req__table th {
		padding: 12px 18px;
	}

	.rec-req__table td {
		padding: 12px 18px;
	}
}

/* ============================================================
   レスポンシブ — lg: 1024px〜  PC
   ============================================================ */
@media (min-width: 1024px) {

	/* PC基本: 16px */
	.rec-wrapper {
		font-size: 16px;
	}

	.rec-container {
		padding: 0 40px;
	}

	/* FV: 左右2カラム */
	.rec-fv {
		padding: 72px 60px 80px;
		min-height: min(calc(100svh - 70px), 760px);
	}

	.rec-fv__layout {
		flex-direction: row;
		align-items: center;
		gap: 56px;
	}

	.rec-fv__text {
		flex: 1 1 54%;
	}

	.rec-fv__photo-area {
		flex: 1 1 44%;
	}

	.rec-fv__photo {
		height: 460px;
	}

	.rec-fv__bubble--a {
		width: 80px;
		height: 80px;
		font-size: 13.5px;
		right: -22px;
		top: -26px;
	}

	.rec-fv__bubble--b {
		width: 84px;
		height: 84px;
		font-size: 13.5px;
		left: -22px;
		bottom: -26px;
	}

	.rec-fv__stat-val {
		font-size: 32px;
	}

	/* Intro: 左右2カラム */
	.rec-intro__layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 30px;
	}

	.rec-intro__text {
		flex: 1 1 48%;
	}

	.rec-intro__photos {
		flex: 1 1 52%;
		height: auto;
		margin: 0;
		align-self: stretch;
	}

	.rec-photo-tilt--a {
		width: 46%;
	}

	.rec-photo-tilt--b {
		width: 45%;
	}

	.rec-photo-tilt--c {
		width: 45%;
	}

	.rec-photo-tilt .rec-placeholder--photo {
		height: fit-content;
		overflow: hidden;
		padding-block: 18px;
	}

	/* Jobs: 3列 */
	.rec-jobs {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Features: 4列 */
	.rec-features__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/*
   * LINE フローティングボタン — PC右端タブ
   * transform を translateY(-50%) のみに統一してホバー崩れを防ぐ
   */
	.rec-line-float {
		/* 円形を解除してタブ形状へ */
		border-radius: 14px 0 0 14px;
		width: 60px;
		height: 88px;
		/* 位置を右端中央に */
		bottom: auto;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		box-shadow: -4px 0 22px rgba(6, 199, 85, 0.42);
	}

	/* PC ホバー: 左にスライド（translateY を維持） */
	.rec-line-float:hover {
		transform: translateY(-50%);
		background-color: var(--rec-line-dk);
		box-shadow: -8px 0 28px rgba(6, 199, 85, 0.52);
	}

	.rec-line-float:active {
		transform: translateY(-50%) translateX(-2px);
		box-shadow: -4px 0 16px rgba(6, 199, 85, 0.40);
	}

}

/* ============================================================
   アクセシビリティ: prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.rec-anim-fadein {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.rec-anim-reveal {
		transition: none;
		opacity: 1;
		transform: none;
	}
}