/* ==========================================================================
   TEYLL — 料金プラン /teyll/pricing/（作り直し 2026-10-15。Figma 06 TEYLL の 1345:93306・SP 1392:6196。page-teyll-pricing.php）
   PLAN（プラン3つ＋プランの比較の表）→ SNS → OPTION → STARTER（淡い黄の面）→ CONTRACT
   - セクションの形は layout.css の l-section-teyll。表は component-table.css の c-teyll-table--compare（SP は縦に積む）
   - 横に並ぶカードは高さをそろえる（grid の stretch。「お店・会社で行うこと」の箱とボタンはカードの下端に）
   - 1023px 以下は3列を1列（ご契約は2列）に。SP は 767px 以下
   ========================================================================== */

.p-teyll-pricing__head--l {
	margin-bottom: 96px; /* Size=L の見出しの行 → 中身 96 */
}

.p-teyll-pricing__note {
	font: var(--text-teyll-caption);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

/* ==========================================================================
   PLAN（プラン3つ → 96 → プランの比較）
   ========================================================================== */
.p-teyll-pricing__plan-body {
	display: flex;
	flex-direction: column;
	gap: 96px;
}

.p-teyll-pricing__plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.p-teyll-pricing__compare {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.p-teyll-pricing__compare-title {
	font: var(--text-teyll-h3);
	letter-spacing: var(--ls-teyll);
}

/* ==========================================================================
   SNS（3プラン。「お店・会社で行うこと」はカードの下端）
   ========================================================================== */
.p-teyll-pricing__sns-list,
.p-teyll-pricing__option-list,
.p-teyll-pricing__contract-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.p-teyll-pricing__sns-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

.p-teyll-pricing__sns-name {
	font: var(--text-teyll-h3);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-pricing__sns-desc {
	min-height: calc(var(--fs-teyll-body-s) * 1.8 * 2); /* 2行の高さ（金額の位置をそろえる） */
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

.p-teyll-pricing__sns-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

.p-teyll-pricing__sns-price-num {
	font: var(--text-teyll-en-price);
}

.p-teyll-pricing__sns-price-unit {
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-secondary);
}

.p-teyll-pricing__sns-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--teyll-border-default);
}

.p-teyll-pricing__sns-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-pricing__sns-check {
	flex: none;
	margin-top: calc((var(--fs-teyll-body-s) * 1.8 - 16px) / 2); /* 1行めの真ん中 */
}

.p-teyll-pricing__sns-own {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
	padding: 16px 20px;
	border-radius: 16px;
	background: var(--teyll-bg-subtle);
}

.p-teyll-pricing__sns-own-label {
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-secondary);
}

.p-teyll-pricing__sns-own-text {
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-pricing__sns-more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	margin-top: 64px;
}

.p-teyll-pricing__sns-more .p-teyll-pricing__note {
	flex: 1 1 320px;
}

/* ==========================================================================
   OPTION（上にサービスの色の面とイラスト、品目と金額、下端にボタン）
   ========================================================================== */
.p-teyll-pricing__option-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 16px 24px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

.p-teyll-pricing__option-visual {
	display: flex;
	flex: none;
	justify-content: center;
	height: 200px;
	overflow: hidden;
	border-radius: 24px;
	background: var(--teyll-bg-purple-pale);
}

.p-teyll-pricing__option-visual--yellow {
	background: var(--teyll-bg-yellow-pale);
}

.p-teyll-pricing__option-visual--green {
	background: var(--teyll-bg-green-pale);
}

.p-teyll-pricing__option-visual--sky {
	background: var(--teyll-bg-sky-pale);
}

.p-teyll-pricing__option-visual--indigo {
	background: var(--teyll-bg-indigo-pale);
}

.p-teyll-pricing__option-illust {
	width: auto;
	height: 100%;
	object-fit: contain;
}

.p-teyll-pricing__option-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px 8px 0;
}

.p-teyll-pricing__option-name {
	font: var(--text-teyll-h3);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-pricing__option-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--teyll-border-default);
}

.p-teyll-pricing__option-row:last-child {
	border-bottom: 0;
}

.p-teyll-pricing__option-term {
	flex: 1;
	min-width: 0;
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

.p-teyll-pricing__option-amount {
	flex: none;
	margin: 0;
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
}

.p-teyll-pricing__option-foot {
	margin-top: auto;
	padding: 0 8px;
}

/* ==========================================================================
   STARTER（淡い黄の面 1320・角 48。左に見出し・金額・含まれるもの・文、右にイラスト 420×360）
   ========================================================================== */
.p-teyll-pricing__starter {
	margin-top: 40px;
	padding-block: 80px;
}

.p-teyll-pricing__starter-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	grid-template-areas:
		". visual"
		"heading visual"
		"price visual"
		"items visual"
		"text visual"
		". visual";
	grid-template-rows: 1fr repeat(4, auto) 1fr; /* 左の中身をイラストの高さの真ん中に（Figma の面の中は上下中央） */
	column-gap: 48px;
}

.p-teyll-pricing__starter-heading {
	grid-area: heading;
}

.p-teyll-pricing__starter-heading,
.p-teyll-pricing__starter-price,
.p-teyll-pricing__starter-items {
	margin-bottom: 32px;
}

.p-teyll-pricing__starter-visual {
	display: flex;
	grid-area: visual;
	align-self: center;
	justify-content: center;
}

.p-teyll-pricing__starter-illust {
	width: 100%;
	max-width: 420px;
	height: auto;
	max-height: 360px;
	object-fit: contain;
}

.p-teyll-pricing__starter-price {
	display: flex;
	flex-wrap: wrap;
	grid-area: price;
	align-items: baseline;
}

.p-teyll-pricing__starter-price-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.p-teyll-pricing__starter-num {
	font: var(--text-teyll-en-price);
}

.p-teyll-pricing__starter-unit {
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-secondary);
}

.p-teyll-pricing__starter-items {
	display: flex;
	flex-wrap: wrap;
	grid-area: items;
	gap: 12px;
}

.p-teyll-pricing__starter-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px 12px 16px;
	border-radius: var(--radius-full);
	background: var(--teyll-bg-canvas);
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
}

.p-teyll-pricing__starter-check {
	flex: none;
}

.p-teyll-pricing__starter-text {
	grid-area: text;
	font: var(--text-teyll-body);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

/* ==========================================================================
   CONTRACT（6つ・3列×2行。アイコンの丸の下に題と文）
   ========================================================================== */
.p-teyll-pricing__contract-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

.p-teyll-pricing__contract-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.p-teyll-pricing__contract-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--teyll-bg-purple-pale);
}

.p-teyll-pricing__contract-icon--sky {
	background: var(--teyll-bg-sky-pale);
}

.p-teyll-pricing__contract-icon--yellow {
	background: var(--teyll-bg-yellow-pale);
}

.p-teyll-pricing__contract-icon--green {
	background: var(--teyll-bg-green-pale);
}

.p-teyll-pricing__contract-title {
	font: var(--text-teyll-h4);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-pricing__contract-text {
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

/* ==========================================================================
   1279px 以下（OPTION はボタンが入るよう2列に）
   ========================================================================== */
@media (max-width: 1279px) {
	.p-teyll-pricing__option-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   1023px 以下（3列は1列・ご契約は2列。STARTER は縦に）
   ========================================================================== */
@media (max-width: 1023px) {
	.p-teyll-pricing__head--l {
		margin-bottom: 64px;
	}

	.p-teyll-pricing__plan-body {
		gap: 64px;
	}

	.p-teyll-pricing__plans,
	.p-teyll-pricing__sns-list,
	.p-teyll-pricing__option-list {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
	}

	.p-teyll-pricing__contract-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-teyll-pricing__starter-body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"heading"
			"visual"
			"price"
			"items"
			"text";
		grid-template-rows: auto;
	}

	.p-teyll-pricing__starter-heading,
	.p-teyll-pricing__starter-visual,
	.p-teyll-pricing__starter-price,
	.p-teyll-pricing__starter-items {
		margin-bottom: 24px;
	}

	.p-teyll-pricing__starter-visual {
		justify-content: flex-start;
	}

	.p-teyll-pricing__starter-illust {
		width: auto;
		height: 280px;
	}
}

/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 767px) {
	.p-teyll-pricing__head--l {
		margin-bottom: 32px;
	}

	.p-teyll-pricing__plan-body {
		gap: 40px;
	}

	.p-teyll-pricing__plans,
	.p-teyll-pricing__sns-list,
	.p-teyll-pricing__option-list,
	.p-teyll-pricing__contract-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		max-width: none;
	}

	.p-teyll-pricing__plans {
		gap: 12px;
	}

	.p-teyll-pricing__compare {
		gap: 16px;
	}

	/* SNS：縦に1列なので、高さそろえの余白は外す */
	.p-teyll-pricing__sns-card {
		gap: 12px;
		padding: 24px;
	}

	.p-teyll-pricing__sns-desc {
		min-height: 0;
	}

	.p-teyll-pricing__sns-items {
		padding-top: 12px;
	}

	.p-teyll-pricing__sns-own {
		margin-top: 0;
		padding: 12px 16px;
	}

	.p-teyll-pricing__sns-more {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 24px;
	}

	.p-teyll-pricing__sns-more .p-teyll-pricing__note {
		flex: none;
	}

	/* OPTION */
	.p-teyll-pricing__option-visual {
		height: 180px;
	}

	.p-teyll-pricing__option-foot {
		padding: 8px 0 0;
	}

	.p-teyll-pricing__option-link {
		width: 100%;
	}

	/* STARTER：左右 12 あけて角 32・中の余白 上 48・左右 16・下 40。見出し → イラスト（幅 240）→ 金額（2行）→ 含まれるもの → 文 */
	.p-teyll-pricing__starter {
		margin-block: 24px;
		padding-block: 48px 40px;
	}

	.p-teyll-pricing__starter-heading,
	.p-teyll-pricing__starter-visual,
	.p-teyll-pricing__starter-price,
	.p-teyll-pricing__starter-items {
		margin-bottom: 20px;
	}

	.p-teyll-pricing__starter-visual {
		justify-content: center;
	}

	.p-teyll-pricing__starter-illust {
		height: 206px; /* Figma の SP：幅 240・高さ 206 の枠に収める */
	}

	.p-teyll-pricing__starter-price {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.p-teyll-pricing__starter-items {
		gap: 8px;
	}

	.p-teyll-pricing__starter-item {
		padding: 10px 16px 10px 12px;
	}

	/* CONTRACT：アイコン（48）と題を横に、その下に文 */
	.p-teyll-pricing__contract-card {
		gap: 12px;
		padding: 24px;
	}

	.p-teyll-pricing__contract-head {
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}

	.p-teyll-pricing__contract-icon {
		width: 48px;
		height: 48px;
	}
}