/* ==========================================================================
   TEYLL — サービスのページ（5つ共通）/teyll/services/{website|design|photo-video|sns|web-system}/
   （作り直し 2026-10-15。Figma 06 TEYLL の 1343:90867・1343:91021・1343:91175・1343:91329・1343:91483、SP は各 PC の真下。
   page-teyll-service.php・template-parts/teyll/service-*.php）
   こんな方に → できること（横に送るカード）→ 料金の目安（淡いサービスの色の面）→ 進め方 → よくある質問 → ほかのサービス
   - セクションの形は layout.css の l-section-teyll（PC 上 120・下 80／SP 上 64・下 48）
   - サービスの色（淡い色）は data-teyll-tone（ホームページ制作＝紫・デザイン制作＝黄・写真・動画制作＝緑・SNS運用＝空色・Webシステム開発＝インディゴ）
   - 1023px 以下は2列・3列を1列に（見出しの下に説明の文）。SP は 767px 以下
   ========================================================================== */

[data-teyll-tone="purple"] {
	--teyll-service-tone: var(--teyll-bg-purple-pale);
}

[data-teyll-tone="yellow"] {
	--teyll-service-tone: var(--teyll-bg-yellow-pale);
}

[data-teyll-tone="green"] {
	--teyll-service-tone: var(--teyll-bg-green-pale);
}

[data-teyll-tone="sky"] {
	--teyll-service-tone: var(--teyll-bg-sky-pale);
}

[data-teyll-tone="indigo"] {
	--teyll-service-tone: var(--teyll-bg-indigo-pale);
}

/* ==========================================================================
   こんな方に（PC：左に写真 564×420＋右下 24 に淡い形、右にカード3つ。SP：写真が上）
   ========================================================================== */
.p-teyll-service-target__body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 24px;
}

.p-teyll-service-target__visual {
	position: relative;
	padding: 0 24px 24px 0;
}

.p-teyll-service-target__shape {
	position: absolute;
	inset: 24px 0 0 24px;
	border-radius: var(--radius-teyll-panel);
	background: var(--teyll-service-tone);
}

.p-teyll-service-target__photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: 564 / 420;
	border-radius: var(--radius-teyll-panel);
}

.p-teyll-service-target__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-teyll-service-target__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.p-teyll-service-target__item {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 28px 32px 28px 28px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

.p-teyll-service-target__check {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--teyll-service-tone);
	color: var(--teyll-text-primary);
}

.p-teyll-service-target__item-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

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

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

/* ==========================================================================
   できること（見出し Size=L・見出しの右に説明と丸い矢印。カード 384・間 24 を横に送る）
   ========================================================================== */
.p-teyll-service-feature__head,
.p-teyll-service-others__head {
	align-items: start;
}

.p-teyll-service-feature__head {
	margin-bottom: 96px; /* Size=L の見出しの行 → 中身 96（ひな形の注記） */
}

.p-teyll-service-feature__intro,
.p-teyll-service-others__intro {
	display: flex;
	grid-column: 2;
	flex-direction: column;
	align-items: flex-end;
	gap: 24px;
}

.p-teyll-service-feature__lead,
.p-teyll-service-others__lead {
	align-self: stretch;
	font: var(--text-teyll-body);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

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

.p-teyll-service-feature__item-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.p-teyll-service-feature__item-number {
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
	font: var(--text-teyll-en-step);
	background: var(--teyll-gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.p-teyll-service-feature__item-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--teyll-service-tone);
	color: var(--teyll-text-primary);
}

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

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

/* ---------- 作れるページの例（ホームページ制作。札はリンクではない） ---------- */
.p-teyll-service-feature__pages {
	margin-top: 64px;
}

.p-teyll-service-feature__pages-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	margin-bottom: 16px;
}

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

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

.p-teyll-service-feature__pages-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.p-teyll-service-feature__page {
	padding: 10px 20px;
	border: 1px solid var(--teyll-border-default);
	border-radius: var(--radius-full);
	background: var(--teyll-bg-canvas);
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
}

/* ---------- 実績（SNS運用。TRUSS株式会社の Instagram） ---------- */
.p-teyll-service-feature__case {
	margin-top: 64px;
}

.p-teyll-service-feature__case-label {
	margin-bottom: 16px;
	font: var(--text-teyll-h4);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-service-feature__case-card {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 24px 40px 24px 24px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

.p-teyll-service-feature__case-photo {
	flex: 0 1 400px;
	overflow: hidden;
	aspect-ratio: 400 / 260;
	border-radius: 24px;
}

.p-teyll-service-feature__case-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-teyll-service-feature__case-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

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

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

.p-teyll-service-feature__case-link {
	margin-top: 8px;
}

/* ==========================================================================
   料金の目安（淡いサービスの色の面 1320・角 48。上 40 あけて、面の中は上下 80）
   ========================================================================== */
.p-teyll-service-price {
	margin-top: 40px;
	padding-block: 80px;
	background: var(--teyll-service-tone);
	scroll-margin-top: 0; /* #price で来たとき、浮いたヘッダーの分は foundation.css の scroll-padding-top */
}

.p-teyll-service-price__body {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

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

/* 見出し（h3）と説明（お引き受けする範囲・ご依頼の前にお伝えすること） */
.p-teyll-service-price__scope,
.p-teyll-service-price__notice {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.p-teyll-service-price__block-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

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

/* ---------- お引き受けする範囲（標準・オプション・対応外の3列。高さをそろえる） ---------- */
.p-teyll-service-price__scope-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.p-teyll-service-price__scope-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px 32px 24px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

.p-teyll-service-price__scope-col-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
}

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

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

.p-teyll-service-price__scope-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 11px 0;
	border-bottom: 1px solid var(--teyll-border-default);
}

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

.p-teyll-service-price__scope-icon {
	flex: none;
	color: var(--teyll-text-primary);
}

.p-teyll-service-price__scope-name {
	flex: 1;
	min-width: 0;
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-service-price__scope-value {
	flex: none;
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
	text-align: right;
}

/* ---------- 金額のカード（写真・動画制作・Webシステム開発） ---------- */
.p-teyll-service-price__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

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

.p-teyll-service-price__card-amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin-top: auto;
}

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

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

.p-teyll-service-price__card-quote {
	font: var(--text-teyll-h2);
	letter-spacing: var(--ls-teyll);
}

/* ---------- SNS運用の3プラン（「お店・会社で行うこと」の箱はカードの下端にそろえる） ---------- */
.p-teyll-service-price__plan {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 36px 32px 32px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

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

.p-teyll-service-price__plan-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-service-price__plan-amount {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
}

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

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

.p-teyll-service-price__plan-list {
	padding-top: 8px;
	border-top: 1px solid var(--teyll-border-default);
}

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

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

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

.p-teyll-service-price__plan-own-label {
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
}

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

/* ---------- ご依頼の前にお伝えすること（4つ・高さをそろえる） ---------- */
.p-teyll-service-price__notice-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.p-teyll-service-price__notice-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px;
	border-radius: 24px;
	background: var(--teyll-bg-canvas);
}

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

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

/* ---------- 毎月、撮影してほしい方へ（写真・動画制作。左にアイコン、真ん中に題と文、右にボタン） ---------- */
.p-teyll-service-price__monthly {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	grid-template-areas:
		"icon title button"
		"icon text button";
	align-items: center;
	column-gap: 24px;
	row-gap: 6px;
	padding: 28px 32px 28px 28px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

.p-teyll-service-price__monthly-head {
	display: contents;
}

.p-teyll-service-price__monthly-icon {
	display: flex;
	grid-area: icon;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--teyll-service-tone);
}

.p-teyll-service-price__monthly-title {
	grid-area: title;
	align-self: end;
	font: var(--text-teyll-h4);
	letter-spacing: var(--ls-teyll);
}

.p-teyll-service-price__monthly-text {
	grid-area: text;
	align-self: start;
	font: var(--text-teyll-body-s);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

.p-teyll-service-price__monthly-link {
	grid-area: button;
}

/* ---------- 月額プランに含まれない注意（Webシステム開発。role="note"） ---------- */
.p-teyll-service-price__info {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 32px 24px 24px;
	border-radius: var(--radius-teyll-card);
	background: var(--teyll-bg-canvas);
}

.p-teyll-service-price__info-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--teyll-service-tone);
}

.p-teyll-service-price__info-text {
	font: var(--text-teyll-body);
	letter-spacing: var(--ls-teyll);
}

/* ---------- ボタン（主な「このサービスについて相談する」と料金のページ）と注 ---------- */
.p-teyll-service-price__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.p-teyll-service-price__note {
	flex: 1 1 320px;
	font: var(--text-teyll-caption);
	letter-spacing: var(--ls-teyll);
	color: var(--teyll-text-secondary);
}

/* ==========================================================================
   進め方（手順 184 を両端そろえで並べ、丸の中心を Ring の点線でつなぐ）
   ========================================================================== */
.p-teyll-service-flow__steps-wrap {
	--teyll-step-gap: 16px;
	--teyll-step-half: min(92px, (100% - (var(--teyll-step-count, 6) - 1) * var(--teyll-step-gap)) / var(--teyll-step-count, 6) / 2);
	position: relative;
}

.p-teyll-service-flow__line {
	position: absolute;
	top: 55px;
	right: var(--teyll-step-half);
	left: var(--teyll-step-half);
	height: 2px;
	background: var(--teyll-gradient-ring);
	-webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 9px);
	mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 9px);
}

.p-teyll-service-flow__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--teyll-step-count, 6), minmax(0, 184px));
	justify-content: space-between;
	gap: var(--teyll-step-gap);
}

.p-teyll-service-flow__link,
.p-teyll-service-faq__link {
	margin-top: 64px;
}

/* ==========================================================================
   ほかのサービス（カード 384 を横に送る）・業種から探す
   ========================================================================== */
.p-teyll-service-others__industries {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 64px;
}

.p-teyll-service-others__industries-title {
	margin-right: 8px;
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
}

.p-teyll-service-others__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   1279px 以下（ご依頼の前にお伝えすることは2列）
   ========================================================================== */
@media (max-width: 1279px) {
	/* できること：Size=L の WHAT WE DO（幅 約 600）が説明の文の列に重ならないよう、説明は見出しの下に */
	.p-teyll-service-feature__head {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.p-teyll-service-feature__intro {
		grid-column: 1;
		align-items: flex-start;
	}

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

	.p-teyll-service-feature__case-card {
		padding-right: 24px;
	}
}

/* ==========================================================================
   1023px 以下（見出しの下に説明の文・2列と3列は1列に）
   ========================================================================== */
@media (max-width: 1023px) {
	.p-teyll-service-feature__intro,
	.p-teyll-service-others__intro {
		grid-column: 1;
		align-items: flex-start;
	}

	.p-teyll-service-feature__head {
		margin-bottom: 64px;
	}

	.p-teyll-service-target__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.p-teyll-service-target__visual {
		width: min(100%, 588px);
	}

	.p-teyll-service-price__plans,
	.p-teyll-service-price__list,
	.p-teyll-service-price__scope-list {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
	}

	.p-teyll-service-price__monthly {
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-areas:
			"icon title"
			"icon text"
			". button";
		row-gap: 6px;
	}

	.p-teyll-service-price__monthly-link {
		justify-self: start;
		margin-top: 10px;
	}

	.p-teyll-service-feature__case-card {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 24px;
	}

	.p-teyll-service-feature__case-photo {
		flex: none;
		width: min(100%, 400px);
	}

	.p-teyll-service-flow__steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		justify-content: stretch;
		row-gap: 40px;
	}

	.p-teyll-service-flow__line {
		display: none;
	}
}

/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 767px) {
	/* こんな方に：写真（315×236・角 32・右下 20 に淡い形）→ 24 → カード（縦に・間 16） */
	.p-teyll-service-target__visual {
		width: auto;
		padding: 0 20px 20px 0;
	}

	.p-teyll-service-target__shape {
		inset: 20px 0 0 20px;
		border-radius: var(--radius-teyll-card);
	}

	.p-teyll-service-target__photo {
		aspect-ratio: 315 / 236;
		border-radius: var(--radius-teyll-card);
	}

	.p-teyll-service-target__item {
		gap: 12px;
		padding: 20px;
	}

	.p-teyll-service-target__check {
		width: 32px;
		height: 32px;
	}

	.p-teyll-service-target__check .c-icon-svg {
		width: 16px;
		height: 16px;
	}

	.p-teyll-service-target__item-body {
		gap: 4px;
	}

	/* できること：見出しは SP では Size=M（WHAT WE DO が長いため。Figma の SP の注記）・カード 280・間 16 */
	.p-teyll-service-feature__head {
		margin-bottom: 32px;
	}

	.p-teyll-service-feature .c-teyll-heading--l {
		gap: 2px;
	}

	.p-teyll-service-feature .c-teyll-heading--l .c-teyll-heading__en {
		font: var(--text-teyll-en-h1);
		letter-spacing: var(--ls-teyll-en-h1);
	}

	.p-teyll-service-feature__item {
		flex-basis: 280px;
		gap: 12px;
		padding: 24px 20px;
	}

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

	.p-teyll-service-feature__item-icon .c-icon-svg {
		width: 22px;
		height: 22px;
	}

	.p-teyll-service-feature__pages {
		margin-top: 32px;
	}

	.p-teyll-service-feature__pages-head {
		flex-direction: column;
		gap: 4px;
		margin-bottom: 12px;
	}

	.p-teyll-service-feature__pages-list {
		gap: 8px;
	}

	.p-teyll-service-feature__page {
		padding: 8px 14px;
	}

	.p-teyll-service-feature__case {
		margin-top: 32px;
	}

	.p-teyll-service-feature__case-label {
		margin-bottom: 12px;
	}

	.p-teyll-service-feature__case-card {
		gap: 16px;
		padding: 16px 16px 24px;
	}

	.p-teyll-service-feature__case-photo {
		width: auto;
		aspect-ratio: 303 / 200;
	}

	.p-teyll-service-feature__case-body {
		gap: 8px;
		padding: 0 4px;
	}

	.p-teyll-service-feature__case-link {
		align-self: stretch;
	}

	/* 料金の目安：左右 12 あけて角 32・中の余白 上 48・左右 16・下 40 */
	.p-teyll-service-price {
		margin-block: 24px;
		padding-block: 48px 40px;
	}

	.p-teyll-service-price__body {
		gap: 32px;
	}

	.p-teyll-service-price__plans,
	.p-teyll-service-price__list,
	.p-teyll-service-price__scope-list,
	.p-teyll-service-price__notice-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		max-width: none;
	}

	.p-teyll-service-price__scope,
	.p-teyll-service-price__notice {
		gap: 16px;
	}

	.p-teyll-service-price__scope-col {
		gap: 8px;
		padding: 24px 16px 12px;
	}

	.p-teyll-service-price__scope-col-head {
		gap: 0 8px;
	}

	.p-teyll-service-price__scope-row {
		padding: 12px 0;
	}

	.p-teyll-service-price__card {
		gap: 4px;
		padding: 20px 24px;
	}

	.p-teyll-service-price__card-amount {
		gap: 4px;
	}

	.p-teyll-service-price__plan {
		gap: 12px;
		padding: 28px 24px 24px;
	}

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

	.p-teyll-service-price__plan-amount {
		gap: 4px;
	}

	.p-teyll-service-price__plan-list {
		padding-top: 6px;
	}

	.p-teyll-service-price__plan-own {
		margin-top: 0;
		padding: 14px 16px;
	}

	.p-teyll-service-price__notice-item {
		gap: 4px;
		padding: 20px;
	}

	.p-teyll-service-price__monthly {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 24px 20px;
	}

	.p-teyll-service-price__monthly-head {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.p-teyll-service-price__monthly-icon {
		flex: none;
		width: 48px;
		height: 48px;
	}

	.p-teyll-service-price__monthly-icon .c-icon-svg {
		width: 22px;
		height: 22px;
	}

	.p-teyll-service-price__monthly-link {
		margin-top: 0;
	}

	.p-teyll-service-price__info {
		align-items: flex-start;
		gap: 12px;
		padding: 20px;
	}

	.p-teyll-service-price__info-icon {
		width: 40px;
		height: 40px;
	}

	.p-teyll-service-price__info-icon .c-icon-svg {
		width: 18px;
		height: 18px;
	}

	.p-teyll-service-price__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.p-teyll-service-price__note {
		flex: none;
	}

	/* 進め方：縦に（左に丸と線。c-teyll-step の SP の形） */
	.p-teyll-service-flow__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.p-teyll-service-flow__link,
	.p-teyll-service-faq__link {
		margin-top: 24px;
	}

	/* ほかのサービス：業種から探すの3つは縦に */
	.p-teyll-service-others__industries {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 32px;
	}

	.p-teyll-service-others__industries-title {
		margin-right: 0;
	}

	.p-teyll-service-others__pills {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}