/**
 * 求人掲載ページ
 * 料金プラン・他社比較・追加オプション
 *
 * @package Lilac_Pages
 */

/* =====================================================
   基本カラー
===================================================== */

.lilac-recruitment-pricing {
	--pricing-purple: #7653a6;
	--pricing-purple-dark: #4f376f;
	--pricing-purple-light: #f1eafb;
	--pricing-purple-pale: #faf7ff;
	--pricing-accent: #b89ad8;
	--pricing-text: #302938;
	--pricing-text-light: #625a69;
	--pricing-border: #e2d8ef;

	padding: 96px 24px;
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 8% 10%,
			rgba(118, 83, 166, 0.10) 0,
			rgba(118, 83, 166, 0) 30%
		),
		radial-gradient(
			circle at 92% 90%,
			rgba(202, 186, 232, 0.18) 0,
			rgba(202, 186, 232, 0) 34%
		),
		linear-gradient(
			180deg,
			#ffffff 0%,
			#faf7ff 48%,
			#f8f5ff 100%
		);
}

.lilac-recruitment-pricing__inner {
	width: min(1180px, 100%);
	margin: 0 auto;
}


/* =====================================================
   メイン見出し
===================================================== */

.lilac-recruitment-pricing__heading {
	max-width: 760px;
	margin: 0 auto 48px;
	text-align: center;
}

.lilac-recruitment-pricing__label {
	margin: 0 0 10px;
	color: var(--pricing-purple);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.lilac-recruitment-pricing__title {
	margin: 0;
	color: var(--pricing-text);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.04em;
}

.lilac-recruitment-pricing__lead {
	margin: 22px 0 0;
	color: var(--pricing-text-light);
	font-size: 16px;
	line-height: 1.9;
}


/* =====================================================
   メイン画像
===================================================== */

.lilac-recruitment-pricing__visual {
	width: min(100%, 980px);
	margin: 0 auto 76px;
	overflow: hidden;
	border: 1px solid var(--pricing-border);
	border-radius: 24px;
	background: #ffffff;
	box-shadow:
		0 20px 50px rgba(73, 52, 98, 0.10);
}

.lilac-recruitment-pricing__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}


/* =====================================================
   共通小見出し
===================================================== */

.lilac-recruitment-pricing__subheading {
	max-width: 820px;
	margin: 0 auto 32px;
	text-align: center;
}

.lilac-recruitment-pricing__sub-label {
	margin: 0 0 8px;
	color: var(--pricing-purple);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.lilac-recruitment-pricing__sub-title {
	margin: 0;
	color: var(--pricing-text);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.4;
}

.lilac-recruitment-pricing__sub-lead {
	margin: 16px 0 0;
	color: var(--pricing-text-light);
	font-size: 15px;
	line-height: 1.85;
}


/* =====================================================
   他社比較
===================================================== */

.lilac-recruitment-pricing__comparison {
	margin-bottom: 80px;
}

.lilac-recruitment-pricing__comparison-wrap {
	border: 1px solid var(--pricing-border);
}

.lilac-recruitment-pricing__comparison-table {
	min-width: 760px;
}

.lilac-recruitment-pricing__comparison-table thead th {
	background: var(--pricing-purple-dark);
}

.lilac-recruitment-pricing__comparison-table
.lilac-recruitment-pricing__comparison-highlight {
	background: #f0e8fa;
	color: var(--pricing-purple-dark);
}

.lilac-recruitment-pricing__comparison-table thead
.lilac-recruitment-pricing__comparison-highlight {
	background: linear-gradient(135deg, #7653a6 0%, #9d7ac8 100%);
	color: #ffffff;
}

.lilac-recruitment-pricing__comparison-table tbody
.lilac-recruitment-pricing__comparison-highlight strong {
	color: var(--pricing-purple-dark);
}

.lilac-recruitment-pricing__comparison-note {
	margin: 18px 0 0;
	color: var(--pricing-text-light);
	font-size: 12px;
	line-height: 1.8;
}


/* =====================================================
   プランエリア
===================================================== */

.lilac-recruitment-pricing__plan-section {
	margin-top: 0;
}

.lilac-recruitment-pricing__plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
}

.lilac-recruitment-pricing__plan {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--pricing-border);
	border-radius: 24px;
	background: #ffffff;
	box-shadow:
		0 14px 36px rgba(73, 52, 98, 0.08);
}

.lilac-recruitment-pricing__plan--recommended {
	border: 2px solid var(--pricing-purple);
	box-shadow:
		0 18px 44px rgba(93, 65, 128, 0.16);
}

.lilac-recruitment-pricing__badge {
	position: absolute;
	top: 0;
	right: 24px;
	z-index: 2;
	margin: 0;
	padding: 9px 20px;
	border-radius: 0 0 12px 12px;
	background: linear-gradient(135deg, #7653a6 0%, #9d7ac8 100%);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.lilac-recruitment-pricing__plan-header {
	padding: 40px 32px 26px;
	text-align: center;
	background:
		linear-gradient(
			135deg,
			#f4eefb 0%,
			#ffffff 100%
		);
}

.lilac-recruitment-pricing__plan--recommended
.lilac-recruitment-pricing__plan-header {
	padding-top: 54px;
	background:
		linear-gradient(
			135deg,
			#eee3f8 0%,
			#ffffff 100%
		);
}

.lilac-recruitment-pricing__plan-name {
	margin: 0;
	color: var(--pricing-purple-dark);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
}

.lilac-recruitment-pricing__plan-description {
	margin: 12px 0 0;
	color: var(--pricing-text-light);
	font-size: 14px;
	line-height: 1.75;
}


/* =====================================================
   料金表示
===================================================== */

.lilac-recruitment-pricing__price {
	padding: 30px 32px;
	border-top: 1px solid var(--pricing-border);
	border-bottom: 1px solid var(--pricing-border);
	text-align: center;
}

.lilac-recruitment-pricing__initial,
.lilac-recruitment-pricing__monthly {
	margin: 0;
	color: #625a69;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
}

.lilac-recruitment-pricing__monthly {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed #d2c1e5;
}

.lilac-recruitment-pricing__initial strong,
.lilac-recruitment-pricing__monthly strong {
	display: block;
	margin-top: 4px;
	color: var(--pricing-purple);
	font-size: clamp(29px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.3;
}

.lilac-recruitment-pricing__initial span,
.lilac-recruitment-pricing__monthly span {
	display: block;
	margin-top: 2px;
	color: #887d91;
	font-size: 12px;
	font-weight: 400;
}


/* =====================================================
   プラン内容
===================================================== */

.lilac-recruitment-pricing__list {
	flex: 1;
	margin: 0;
	padding: 30px 32px 36px;
	list-style: none;
}

.lilac-recruitment-pricing__list li {
	position: relative;
	margin: 0;
	padding: 14px 0 14px 32px;
	border-bottom: 1px solid #eee7f5;
	color: #51495a;
	font-size: 15px;
	line-height: 1.7;
}

.lilac-recruitment-pricing__list li:last-child {
	border-bottom: 0;
}

.lilac-recruitment-pricing__list li::before {
	position: absolute;
	top: 17px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--pricing-purple-light);
	color: var(--pricing-purple);
	content: "✓";
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}


/* =====================================================
   オプション
===================================================== */

.lilac-recruitment-pricing__options {
	margin-top: 80px;
}

.lilac-recruitment-pricing__table-wrap {
	overflow-x: auto;
	border: 1px solid var(--pricing-border);
	border-radius: 20px;
	background: #ffffff;
	box-shadow:
		0 12px 32px rgba(73, 52, 98, 0.07);
}

.lilac-recruitment-pricing__table {
	width: 100%;
	min-width: 760px;
	border-collapse: collapse;
}

.lilac-recruitment-pricing__table th,
.lilac-recruitment-pricing__table td {
	padding: 22px 24px;
	border-bottom: 1px solid #eee7f5;
	color: #574f5e;
	font-size: 15px;
	line-height: 1.7;
	text-align: left;
	vertical-align: middle;
}

.lilac-recruitment-pricing__table thead th {
	background: var(--pricing-purple-dark);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
}

.lilac-recruitment-pricing__table thead th:last-child {
	text-align: center;
}

.lilac-recruitment-pricing__table tbody th {
	width: 25%;
	background: var(--pricing-purple-pale);
	color: var(--pricing-purple-dark);
	font-weight: 700;
}

.lilac-recruitment-pricing__table tbody td:nth-child(2) {
	width: 48%;
}

.lilac-recruitment-pricing__table tbody td:last-child {
	width: 27%;
	text-align: center;
	white-space: nowrap;
}

.lilac-recruitment-pricing__table tbody tr:last-child th,
.lilac-recruitment-pricing__table tbody tr:last-child td {
	border-bottom: 0;
}

.lilac-recruitment-pricing__table td strong {
	display: block;
	color: var(--pricing-purple);
	font-size: 17px;
	font-weight: 700;
}

.lilac-recruitment-pricing__table td span {
	display: block;
	margin-top: 2px;
	color: #8a7f92;
	font-size: 12px;
}


/* =====================================================
   注意事項
===================================================== */

.lilac-recruitment-pricing__notes {
	margin-top: 42px;
	padding: 30px 32px;
	border: 1px solid #ddcfee;
	border-left: 5px solid var(--pricing-purple);
	border-radius: 16px;
	background: #ffffff;
	box-shadow:
		0 10px 28px rgba(73, 52, 98, 0.05);
}

.lilac-recruitment-pricing__notes-title {
	margin: 0 0 18px;
	color: var(--pricing-purple-dark);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

.lilac-recruitment-pricing__notes-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lilac-recruitment-pricing__notes-list li {
	position: relative;
	margin: 0;
	padding-left: 22px;
	color: #6b6272;
	font-size: 13px;
	line-height: 1.85;
}

.lilac-recruitment-pricing__notes-list li + li {
	margin-top: 7px;
}

.lilac-recruitment-pricing__notes-list li::before {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--pricing-purple);
	content: "※";
	font-weight: 700;
}


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

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

	.lilac-recruitment-pricing {
		padding: 80px 20px;
	}

	.lilac-recruitment-pricing__plans {
		grid-template-columns: 1fr;
		max-width: 680px;
		margin: 0 auto;
	}

	.lilac-recruitment-pricing__comparison,
	.lilac-recruitment-pricing__options {
		margin-bottom: 64px;
	}

	.lilac-recruitment-pricing__options {
		margin-top: 64px;
	}
}


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

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

	.lilac-recruitment-pricing {
		padding: 64px 16px;
	}

	.lilac-recruitment-pricing__heading {
		margin-bottom: 32px;
	}

	.lilac-recruitment-pricing__title {
		font-size: 29px;
	}

	.lilac-recruitment-pricing__lead,
	.lilac-recruitment-pricing__sub-lead {
		font-size: 14px;
		line-height: 1.8;
		text-align: left;
	}

	.lilac-recruitment-pricing__visual {
		margin-bottom: 52px;
		border-radius: 16px;
	}

	.lilac-recruitment-pricing__comparison {
		margin-bottom: 58px;
	}

	.lilac-recruitment-pricing__plans {
		gap: 22px;
	}

	.lilac-recruitment-pricing__plan {
		border-radius: 18px;
	}

	.lilac-recruitment-pricing__badge {
		right: 18px;
		padding: 8px 15px;
		font-size: 12px;
	}

	.lilac-recruitment-pricing__plan-header {
		padding: 34px 20px 22px;
	}

	.lilac-recruitment-pricing__plan--recommended
	.lilac-recruitment-pricing__plan-header {
		padding-top: 50px;
	}

	.lilac-recruitment-pricing__plan-name {
		font-size: 23px;
	}

	.lilac-recruitment-pricing__price {
		padding: 26px 20px;
	}

	.lilac-recruitment-pricing__initial strong,
	.lilac-recruitment-pricing__monthly strong {
		font-size: 31px;
	}

	.lilac-recruitment-pricing__list {
		padding: 22px 20px 28px;
	}

	.lilac-recruitment-pricing__list li {
		padding: 12px 0 12px 30px;
		font-size: 14px;
	}

	.lilac-recruitment-pricing__list li::before {
		top: 14px;
	}

	.lilac-recruitment-pricing__options {
		margin-top: 56px;
	}

	.lilac-recruitment-pricing__table-wrap {
		border-radius: 14px;
	}

	.lilac-recruitment-pricing__table th,
	.lilac-recruitment-pricing__table td {
		padding: 18px 16px;
		font-size: 14px;
	}

	.lilac-recruitment-pricing__comparison-note {
		font-size: 11px;
	}

	.lilac-recruitment-pricing__notes {
		margin-top: 30px;
		padding: 24px 20px;
		border-left-width: 4px;
	}

	.lilac-recruitment-pricing__notes-title {
		font-size: 16px;
	}

	.lilac-recruitment-pricing__notes-list li {
		font-size: 12px;
	}
}