/**
 * 求人掲載ページ
 * CTA
 *
 * @package Lilac_Pages
 */

/* =====================================================
 * CTA全体
 * ===================================================== */

.lilac-recruitment-cta {
	--cta-purple: #7653a6;
	--cta-purple-dark: #4f376f;
	--cta-purple-deep: #352447;
	--cta-purple-light: #f1eafb;
	--cta-gold: #d1b06a;
	--cta-gold-light: #f3dfad;
	--cta-white: #ffffff;
	--cta-text-light: rgba(255, 255, 255, 0.88);
	--cta-border: rgba(255, 255, 255, 0.24);

	position: relative;
	width: 100%;
	margin: 0;
	padding: clamp(72px, 9vw, 120px) 24px;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 15% 18%,
			rgba(255, 255, 255, 0.1) 0,
			rgba(255, 255, 255, 0) 30%
		),
		radial-gradient(
			circle at 88% 82%,
			rgba(215, 187, 232, 0.18) 0,
			rgba(215, 187, 232, 0) 34%
		),
		linear-gradient(
			135deg,
			#352447 0%,
			#5f4084 52%,
			#8060ad 100%
		);
}

/* 右上の円装飾 */
.lilac-recruitment-cta::before {
	position: absolute;
	top: -180px;
	right: -120px;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

/* 左下の円装飾 */
.lilac-recruitment-cta::after {
	position: absolute;
	bottom: -220px;
	left: -140px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.08) 0%,
			rgba(255, 255, 255, 0) 72%
		);
	content: "";
	pointer-events: none;
}

.lilac-recruitment-cta__inner {
	position: relative;
	z-index: 1;
	width: min(1120px, 100%);
	margin: 0 auto;
}

/* =====================================================
 * CTAカード
 * ===================================================== */

.lilac-recruitment-cta__content {
	position: relative;
	overflow: hidden;
	padding: clamp(46px, 7vw, 76px) clamp(26px, 6vw, 64px);
	border: 1px solid var(--cta-border);
	border-radius: 30px;
	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.13) 0%,
			rgba(255, 255, 255, 0.05) 100%
		);
	box-shadow:
		0 26px 64px rgba(35, 22, 49, 0.26),
		inset 0 1px 0 rgba(255, 255, 255, 0.16);
	text-align: center;
	backdrop-filter: blur(5px);
}

/* 上部アクセント */
.lilac-recruitment-cta__content::before {
	position: absolute;
	top: 0;
	left: 50%;
	width: 140px;
	height: 4px;
	border-radius: 0 0 999px 999px;
	background:
		linear-gradient(
			90deg,
			var(--cta-gold) 0%,
			var(--cta-gold-light) 100%
		);
	content: "";
	transform: translateX(-50%);
}

/* 右上の淡い装飾 */
.lilac-recruitment-cta__content::after {
	position: absolute;
	top: -80px;
	right: -70px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background:
		radial-gradient(
			circle,
			rgba(255, 255, 255, 0.09) 0%,
			rgba(255, 255, 255, 0) 72%
		);
	content: "";
	pointer-events: none;
}

/* =====================================================
 * 見出し
 * ===================================================== */

.lilac-recruitment-cta__label,
.lilac-recruitment-cta__title,
.lilac-recruitment-cta__text,
.lilac-recruitment-cta__actions,
.lilac-recruitment-cta__note {
	position: relative;
	z-index: 1;
}

.lilac-recruitment-cta__label {
	margin: 0 0 14px;
	color: var(--cta-gold-light);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.18em;
}

.lilac-recruitment-cta__title {
	max-width: 820px;
	margin: 0 auto;
	color: var(--cta-white);
	font-size: clamp(30px, 4.6vw, 50px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0.035em;
}

.lilac-recruitment-cta__text {
	max-width: 720px;
	margin: 24px auto 0;
	color: var(--cta-text-light);
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.02em;
}

/* =====================================================
 * ボタン
 * ===================================================== */

.lilac-recruitment-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;
	margin-top: 42px;
}

.lilac-recruitment-cta__button {
	display: inline-flex;
	gap: 18px;
	align-items: center;
	justify-content: center;
	min-width: 300px;
	padding: 18px 30px;
	border: 2px solid var(--cta-white);
	border-radius: 999px;
	background: var(--cta-white);
	box-shadow:
		0 15px 34px rgba(27, 17, 38, 0.22);
	color: var(--cta-purple-dark);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	transition:
		background-color 0.25s ease,
		border-color 0.25s ease,
		color 0.25s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.lilac-recruitment-cta__button:hover {
	border-color: var(--cta-gold-light);
	background: var(--cta-gold-light);
	box-shadow:
		0 20px 40px rgba(27, 17, 38, 0.28);
	color: var(--cta-purple-deep);
	transform: translateY(-3px);
}

.lilac-recruitment-cta__button:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.4);
	outline-offset: 5px;
}

.lilac-recruitment-cta__button-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cta-purple-light);
	color: var(--cta-purple-dark);
	font-size: 18px;
	transition:
		background-color 0.25s ease,
		transform 0.25s ease;
}

.lilac-recruitment-cta__button:hover
	.lilac-recruitment-cta__button-arrow {
	background: rgba(255, 255, 255, 0.72);
	transform: translateX(4px);
}

/* =====================================================
 * サブボタン
 * ===================================================== */

.lilac-recruitment-cta__button--secondary {
	border-color: rgba(255, 255, 255, 0.72);
	background: transparent;
	box-shadow: none;
	color: var(--cta-white);
}

.lilac-recruitment-cta__button--secondary:hover {
	border-color: var(--cta-white);
	background: rgba(255, 255, 255, 0.14);
	color: var(--cta-white);
}

/* =====================================================
 * 注記
 * ===================================================== */

.lilac-recruitment-cta__note {
	margin: 22px 0 0;
	color: rgba(255, 255, 255, 0.74);
	font-size: 13px;
	line-height: 1.8;
}

/* =====================================================
 * タブレット
 * ===================================================== */

@media screen and (max-width: 900px) {

	.lilac-recruitment-cta {
		padding: 76px 20px;
	}

	.lilac-recruitment-cta__content {
		padding: 58px 34px;
	}

	.lilac-recruitment-cta__title {
		max-width: 700px;
	}
}

/* =====================================================
 * スマートフォン
 * ===================================================== */

@media screen and (max-width: 600px) {

	.lilac-recruitment-cta {
		padding: 58px 16px;
	}

	.lilac-recruitment-cta__content {
		padding: 44px 20px;
		border-radius: 22px;
		text-align: left;
	}

	.lilac-recruitment-cta__content::before {
		left: 20px;
		width: 90px;
		transform: none;
	}

	.lilac-recruitment-cta__label {
		font-size: 12px;
	}

	.lilac-recruitment-cta__title {
		font-size: clamp(27px, 8vw, 34px);
		line-height: 1.55;
	}

	.lilac-recruitment-cta__text {
		margin-top: 20px;
		font-size: 14px;
		line-height: 1.9;
	}

	.lilac-recruitment-cta__actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 14px;
		margin-top: 32px;
	}

	.lilac-recruitment-cta__button {
		width: 100%;
		min-width: 0;
		padding: 17px 20px;
		font-size: 15px;
	}

	.lilac-recruitment-cta__note {
		font-size: 12px;
		text-align: left;
	}
}

/* =====================================================
 * 小型スマートフォン
 * ===================================================== */

@media screen and (max-width: 480px) {

	.lilac-recruitment-cta {
		padding-right: 14px;
		padding-left: 14px;
	}

	.lilac-recruitment-cta__content {
		padding: 40px 18px;
	}
}

/* =====================================================
 * 動きを減らす設定
 * ===================================================== */

@media (prefers-reduced-motion: reduce) {

	.lilac-recruitment-cta__button,
	.lilac-recruitment-cta__button-arrow {
		transition: none;
	}
}