@charset "UTF-8";
/* ==========================================================================
** AIプラストーク CS（コンタクトセンター）LP 専用スタイル
** - 共通のヘッダー/フッター/リセット/スクロール演出は common.css を利用
** - 画像は src="" の空パス。alt と直前コメントで差し込み先を明示
** - フォントサイズは common.css の :root（var(--Npx)）を利用
** - ブレークポイント: 769px 以上を PC（common.css と統一）
** ========================================================================== */

:root {
	--cs-magenta: #bd319b;
	--cs-magenta-l: #e577ca;
	--cs-orange: #ff8001;
	--cs-orange-l: #ffa600;
	--cs-ink: #14293c;
	--cs-pink: #fff0fb;
	--cs-gray: #888;
	--cs-border: #e6e6e6;
	--cs-grad-magenta: linear-gradient(90deg, #bd319b 0%, #e577ca 98%);
	--cs-grad-orange: linear-gradient(90deg, #ff8001 0%, #ffa600 100%);
	--cs-max: 1200px;
}

/* Base
--------------------------------------------------------*/
.cs-main {
	font-family: "Noto Sans JP", sans-serif;
	color: var(--cs-ink);
	line-height: 1.5;
}

.cs-main strong {
	font-weight: 700;
}

/* 蛍光ペン風マーカー */
.cs-marker {
	background: linear-gradient(transparent 60%, rgba(229, 119, 202, 0.4) 60%);
	font-weight: 700;
}

/* セクション枠 */
.cs-section {
	padding: 48px 20px;
	position: relative;
	overflow: clip;

	@media (48.0625rem <= width) {
		padding: 80px 120px;
	}
}

.cs-container {
	width: 100%;
	max-width: var(--cs-max);
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

/* セクション見出し（英ラベル + 日本語大見出し） */
.cs-heading {
	text-align: center;
}

.cs-heading__en {
	color: var(--cs-orange);
	font-size: var(--16px);
	font-weight: 700;
	line-height: 1.2;
}

.cs-heading__ja {
	color: var(--cs-ink);
	font-size: var(--30px);
	font-weight: 700;
	line-height: 1.2;
	margin-top: 8px;

	@media (48.0625rem <= width) {
		font-size: var(--48px);
	}
}

/* 資料ダウンロードボタン（オレンジのピル + ノートアイコン） */
.cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 310px;
	min-height: 60px;
	padding: 12px 24px;
	border-radius: 40px;
	background: var(--cs-grad-orange);
	color: #fff;
	font-size: var(--18px);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	transition: transform 0.3s ease;

	@media (48.0625rem <= width) {
		max-width: 368px;
		min-height: 70px;
		font-size: var(--20px);
	}

	&::before {
		content: "";
		flex-shrink: 0;
		width: 16px;
		height: 21px;
		background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/icon/icon_note.svg) no-repeat center / contain;
	}

	&:hover {
		transform: translateY(4px);
	}
}

/* テキストリンク（〜はこちら + 矢印） */
.cs-txtlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--cs-magenta);
	color: var(--cs-magenta);
	font-size: var(--16px);
	font-weight: 700;
	line-height: 1;

	&::after {
		content: "";
		width: 8px;
		height: 8px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: rotate(45deg);
	}

	&:hover {
		opacity: 0.8;
	}
}

/* FV下やCTA内のテキストリンク並び */
.cs-txtlinks {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ==========================================================================
** ヘッダー（CS専用・共通 .sec__header を流用。sticky ラッパーで固定）
** ========================================================================== */
.cs-header-wrap {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* PC: ナビの矢印色を CS マゼンタに（共通の #EC8403 を上書き） */
@media (48.0625rem <= width) {
	.cs-header-wrap .sec__header__nav__list > li a span::after {
		border-top-color: var(--cs-magenta);
		border-right-color: var(--cs-magenta);
	}
}

/* SP: ハンバーガー／メニューを CS マゼンタ配色に（共通の青紫を上書き） */
.cs-header-wrap .hamburger-line {
	background-color: var(--cs-magenta);
}

.cs-header-wrap .sp__nav {
	background: var(--cs-grad-magenta);
}

/* SP: ヘッダーの「お問い合わせ」ボタン（無料バッジを外しオレンジグラデのピルに） */
.cs-header-wrap .sec__header__logo__btn a {
	width: auto;
	padding: 8px 16px;
	background: var(--cs-grad-orange);
	font-size: var(--12px);
}

.cs-header-wrap .sec__header__logo__btn a::before {
	content: none;
}

/* PC: ヘッダー「お問い合わせ」ボタン（Figma 122:39: 160px / p-10 / rounded-60 / オレンジグラデ / 14px・バッジなし） */
.cs-header-wrap .nav__btn .btn-inner {
	justify-content: center;
	width: 160px;
	height: 40px;
	padding: 0;
	border-radius: 60px;
	background: var(--cs-grad-orange);
	font-size: var(--14px);
	font-weight: 700;
	letter-spacing: normal;
	color: #fff;
}

.cs-header-wrap .nav__btn .btn-inner::before {
	content: none;
}

/* ==========================================================================
** FV
** ========================================================================== */
.cs-fv {
	/* 背景は TOP(.sec__fv) の bg_fv_2.svg 配置を踏襲。地のグラデは Figma の白→#fff0fb */
	background:
		url(https://tp-img.imgix.net/s/ai-talk-plus/cs/sp/bg/bg_fv_2.svg) left top 13em / 60% no-repeat,
		linear-gradient(180deg, #fff 0%, var(--cs-pink) 100%);

	@media (48.0625rem <= width) {
		background:
			url(https://tp-img.imgix.net/s/ai-talk-plus/cs/pc/bg/bg_fv_2.svg) right top / contain no-repeat,
			linear-gradient(180deg, #fff 0%, var(--cs-pink) 100%);
	}
}

.cs-fv__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;

	@media (48.0625rem <= width) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"copy visual"
			"cta  visual";
		column-gap: 40px;
		row-gap: 24px;
		align-items: center;
		max-width: 1200px;
	}
}

.cs-fv__copy {
	container-type: inline-size;
	text-align: center;

	@media (48.0625rem <= width) {
		grid-area: copy;
		text-align: left;
		align-self: end;
	}
}

.cs-fv__badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 4px;
	background: var(--cs-grad-magenta);
	color: #fff;
	font-size: var(--20px);
	font-weight: 500;
	line-height: 1.2;

	@media (48.0625rem <= width) {
		padding: 8px 16px;
		border-radius: 8px;
		font-size: var(--24px);
	}
}

.cs-fv__title {
	margin-top: 8px;
	/* 左カラム幅(cqi)に追従して可変。white-space:nowrap で <br> 以外の折り返しを防ぐ */
	font-size: clamp(20px, 7.6cqi, 48px);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;

	@media (48.0625rem <= width) {
		margin-top: 16px;
	}
}

.cs-fv__title-accent {
	display: block;
	color: var(--cs-magenta);
	font-weight: inherit;
}

.cs-fv__lead {
	margin-top: 16px;
	font-size: var(--16px);
	line-height: 1.5;
	letter-spacing: 0.04em;

	@media (48.0625rem <= width) {
		margin-top: 24px;
	}
}

.cs-fv__visual {
	display: block;

	@media (48.0625rem <= width) {
		grid-area: visual;
	}

	img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.cs-fv__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;

	@media (48.0625rem <= width) {
		grid-area: cta;
		align-items: flex-start;
		align-self: start;
	}
}

/* ==========================================================================
** よくある課題
** ========================================================================== */
.cs-issues__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;

	@media (48.0625rem <= width) {
		gap: 48px;
	}
}

.cs-issues__intro {
	display: flex;
	flex-direction: column;
	gap: 24px;

	@media (48.0625rem <= width) {
		gap: 32px;
	}
}

.cs-issues__copy {
	text-align: center;
}

.cs-issues__copy-main {
	color: var(--cs-magenta);
	font-size: var(--24px);
	font-weight: 700;
	line-height: 1.5;

	@media (48.0625rem <= width) {
		font-size: var(--32px);
	}
}

.cs-issues__copy-sub {
	margin-top: 10px;
	font-size: var(--16px);
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.cs-issues__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;

	@media (48.0625rem <= width) {
		gap: 32px;
	}
}

.cs-issues__card {
	flex: 1 1 100%;
	padding: 16px 24px 20px;
	border-radius: 8px;
	background: var(--cs-grad-magenta);
	color: #fff;
	text-align: center;

	@media (48.0625rem <= width) {
		flex: 0 1 calc((100% - 64px) / 3);
		max-width: 378px;
	}
}

.cs-issues__card-title {
	font-size: var(--20px);
	font-weight: 700;
	line-height: 1.5;

	@media (48.0625rem <= width) {
		font-size: var(--24px);
	}
}

.cs-issues__card-desc {
	margin-top: 4px;
	font-size: var(--16px);
	line-height: 1.5;
}

/* ==========================================================================
** ソリューション
** ========================================================================== */
.cs-solution {
	/* 背景の装飾スワール（Figma: 左側）。TOP方式で地色に重ねる */
	background:
		url(https://tp-img.imgix.net/s/ai-talk-plus/cs/sp/bg/bg_solution.svg) left top 80px / auto no-repeat,
		var(--cs-pink);

	@media (48.0625rem <= width) {
		background:
			url(https://tp-img.imgix.net/s/ai-talk-plus/cs/pc/bg/bg_solution.svg) left top 80px / auto no-repeat,
			var(--cs-pink);
	}
}

.cs-solution__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;

	@media (48.0625rem <= width) {
		gap: 48px;
	}
}

.cs-solution__intro {
	display: flex;
	flex-direction: column;
	gap: 24px;

	@media (48.0625rem <= width) {
		gap: 32px;
	}
}

.cs-solution__copy {
	color: var(--cs-magenta);
	font-size: var(--24px);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;

	@media (48.0625rem <= width) {
		font-size: var(--32px);
	}
}

.cs-solution__list {
	display: flex;
	flex-direction: column;
	gap: 24px;

	@media (48.0625rem <= width) {
		gap: 48px;
	}
}

.cs-solution__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	background: #fff;
	border-left: 2px solid var(--cs-magenta-l);

	@media (48.0625rem <= width) {
		flex-direction: row;
		align-items: flex-start;
		gap: 40px;
		padding: 48px;
	}
}

.cs-solution__card--rev {
	border-left: 0;
	border-right: 2px solid var(--cs-magenta-l);

	@media (48.0625rem <= width) {
		flex-direction: row-reverse;
	}
}

.cs-solution__img {
	flex-shrink: 0;
	width: 100%;
	aspect-ratio: 400 / 263;
	background: #f5f5f5;
	overflow: hidden;

	@media (48.0625rem <= width) {
		width: 400px;
		height: 263px;
		aspect-ratio: auto;
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.cs-solution__body {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cs-solution__num {
	position: absolute;
	top: -0.3em;
	right: -8px;
	color: transparent;
	-webkit-text-stroke: 1px var(--cs-magenta-l);
	font-size: 100px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: right;
	pointer-events: none;

	@media (48.0625rem <= width) {
		font-size: 160px;
	}
}

.cs-solution__label {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	padding: 0 8px 2px;
	background: var(--cs-grad-magenta);
	color: #fff;
	font-size: var(--16px);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.cs-solution__title {
	position: relative;
	z-index: 1;
	font-size: var(--24px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;

	@media (48.0625rem <= width) {
		font-size: var(--32px);
	}
}

.cs-solution__desc {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	font-size: var(--16px);
	line-height: 1.5;
	letter-spacing: 0.02em;
}

/* ==========================================================================
** CTA（共通パーツ）
** 構造・配色は common.css の .sec__cta / .sec__cta--footer を流用（TOPと共通）。
** ========================================================================== */
.cs-main .sec__cta,
.cs-main .sec__cta--footer {
	background:
		url(https://tp-img.imgix.net/s/ai-talk-plus/pc/logo/logo_bg_cta_wht.svg) center / 65% no-repeat,
		var(--cs-grad-magenta);

	@media (48.0625rem <= width) {
		background:
			url(https://tp-img.imgix.net/s/ai-talk-plus/pc/logo/logo_bg_cta_wht.svg) -5% 50% / auto 110% no-repeat,
			var(--cs-grad-magenta);
	}
}
.cs-main .sec__cta--footer__phone {
	border-color: #FFF0FB;
	li:first-child {
		background: #FFF0FB;
	}
}

/* ==========================================================================
** 導入事例
** ========================================================================== */
.cs-case {
	background: linear-gradient(180deg, #fff 0%, var(--cs-pink) 100%);
}

.cs-case__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;

	@media (48.0625rem <= width) {
		gap: 48px;
	}
}

.cs-case__list {
	display: flex;
	flex-direction: column;
	gap: 40px;

	@media (48.0625rem <= width) {
		flex-direction: row;
		align-items: stretch;
		justify-content: center;
		gap: 48px;
	}
}

.cs-case__card {
	display: flex;
	flex-direction: column;

	@media (48.0625rem <= width) {
		flex: 1 1 0;
		min-width: 0;
		max-width: 33%;
	}
}

.cs-case__img {
	width: 100%;
	aspect-ratio: 400 / 240;
	border-radius: 8px;
	background: #f5f5f5;
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.cs-case__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	flex: 1;
}

.cs-case__company {
	align-self: flex-start;
	padding: 2px 8px;
	background: var(--cs-magenta);
	color: #fff;
	font-size: var(--16px);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.cs-case__title {
	color: var(--cs-magenta);
	font-size: var(--24px);
	font-weight: 700;
	line-height: 1.5;
}

.cs-case__desc {
	font-size: var(--16px);
	line-height: 1.5;
}

.cs-case__btn-wrap {
	margin-top: auto;
	padding-top: 8px;
	text-align: center;
}

.cs-case__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px 10px 24px;
	border: 1px solid var(--cs-border);
	border-radius: 20px;
	background: #fff;
	color: var(--cs-magenta);
	font-size: var(--16px);
	font-weight: 500;

	&:hover {
		opacity: 0.8;
	}
}

/* ==========================================================================
** 主な機能紹介
** ========================================================================== */
.cs-func {
	/* 背景の装飾スワール（Figma: 右側） */
	background:
		url(https://tp-img.imgix.net/s/ai-talk-plus/cs/sp/bg/bg_function_2.svg) right top 80px / auto no-repeat,
		#fff;

	@media (48.0625rem <= width) {
		background:
			url(https://tp-img.imgix.net/s/ai-talk-plus/cs/pc/bg/bg_function_2.svg) right top 80px / auto no-repeat,
			#fff;
	}
}

.cs-func__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;

	@media (48.0625rem <= width) {
		gap: 48px;
	}
}

.cs-func__list {
	display: flex;
	flex-direction: column;
	gap: 40px;

	@media (48.0625rem <= width) {
		flex-direction: row;
		align-items: stretch;
		gap: 48px;
	}
}

.cs-func__card {
	display: flex;
	flex-direction: column;

	@media (48.0625rem <= width) {
		flex: 1 1 0;
		min-width: 0;
	}
}

.cs-func__imgbox {
	padding: 16px;
	border-radius: 8px;
	background: #f5f5f5;
	box-shadow: 4px 4px 0 var(--cs-magenta-l);

	img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 534 / 377;
		object-fit: cover;
	}
}

.cs-func__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
}

.cs-func__title {
	color: var(--cs-magenta);
	font-size: var(--24px);
	font-weight: 700;
	line-height: 1.5;
}

.cs-func__desc {
	font-size: var(--16px);
	line-height: 1.5;
}

/* ==========================================================================
** 選ばれる理由
** ========================================================================== */
.cs-why {
	background: linear-gradient(180deg, var(--cs-pink) 0%, #fff 100%);
}

.cs-why__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;

	@media (48.0625rem <= width) {
		gap: 48px;
	}
}

.cs-why__list {
	display: flex;
	flex-direction: column;
	gap: 40px;

	@media (48.0625rem <= width) {
		flex-direction: row;
		align-items: flex-start;
		gap: 48px;
	}
}

.cs-why__item {
	display: flex;
	flex-direction: column;

	@media (48.0625rem <= width) {
		flex: 1 1 0;
		min-width: 0;
	}
}

.cs-why__img {
	width: 100%;
	aspect-ratio: 500 / 336;
	border: 1px solid #ccc;
	background: #f5f5f5;
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.cs-why__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
}

.cs-why__title {
	color: var(--cs-magenta);
	font-size: var(--24px);
	font-weight: 700;
	line-height: 1.5;
}

.cs-why__desc {
	font-size: var(--16px);
	line-height: 1.5;
}

.cs-why__note {
	color: var(--cs-gray);
	font-size: var(--12px);
	line-height: 1.5;
	text-align: center;
}

/* ==========================================================================
** flow 導入流れ
** ========================================================================== */
.cs-flow {
	background: #fff;
}

.cs-flow__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.cs-flow__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;

	@media (48.0625rem <= width) {
		gap: 32px;
	}
}

.cs-flow__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.cs-flow__copy-main {
	color: var(--cs-magenta);
	font-size: var(--24px);
	font-weight: 700;
	line-height: 1.2;

	@media (48.0625rem <= width) {
		font-size: var(--32px);
	}
}

.cs-flow__copy-note {
	color: var(--cs-gray);
	font-size: var(--14px);
	line-height: 1.5;
}

.cs-flow__list {
	display: flex;
	flex-direction: column;
	gap: 16px;

	@media (48.0625rem <= width) {
		position: relative;
		flex-direction: row;
		gap: 64px;
	}

	/* PC: 円の中心を結ぶライン */
	&::before {
		@media (48.0625rem <= width) {
			content: "";
			position: absolute;
			top: 120px;
			left: 16.66%;
			right: 16.66%;
			height: 2px;
			background: #f0b76a;
			z-index: 0;
		}
	}
}

.cs-flow__step {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	position: relative;
	z-index: 1;

	@media (48.0625rem <= width) {
		flex-direction: column;
		align-items: center;
		flex: 1 1 0;
		min-width: 0;
	}

	/* SP: 円の中心を縦に結ぶライン（PC は list::before を使用） */
	&:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 64px;
		left: 63px;
		z-index: -1;
		width: 2px;
		height: calc(100% + 16px);
		background: #f0b76a;

		@media (48.0625rem <= width) {
			content: none;
		}
	}
}

.cs-flow__circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: var(--cs-grad-magenta);
	color: #fff;

	@media (48.0625rem <= width) {
		width: 240px;
		height: 240px;
	}
}

.cs-flow__num {
	font-size: var(--24px);
	line-height: 1;
}

.cs-flow__icon {
	display: flex;
    align-items: center;
    justify-content: center;
	width: 120px;
	height: 120px;

	img {
		width: 60%;
		height: 60%;
		object-fit: contain;
		@media (48.0625rem <= width) {
			width: 100%;
			height: 100%;
		}
	}
}

.cs-flow__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;

	@media (48.0625rem <= width) {
		flex: initial;
		align-items: center;
		text-align: center;
	}
}

.cs-flow__title {
	font-size: var(--24px);
	font-weight: 700;
	line-height: 1.5;
}

.cs-flow__desc {
	font-size: var(--16px);
	line-height: 1.5;
}

/* ==========================================================================
** Q&A（FAQ）TOP の .sec__faq と同じ構成・CSS を CS 用に別途記述
** ========================================================================== */
.sec__faq {
	max-width: 1200px;
	width: 92%;
	margin: auto;
	background: #FFF0FB;
	background: url(https://tp-img.imgix.net/s/ai-talk-plus/cs/pc/bg/bg_question_2.svg) center top / 70% no-repeat,#FFF0FB;
	padding: 1.5em;
	margin-bottom: 2em;
	border-radius: 16px;

	@media (769px <= width) {
		width: 96%;
		padding: 4em;
		margin-bottom: 4em;
	}

	@media (1010px <= width) {
		width: 100%;
	}

	.sec__faq-h2 {
		font-size: var(--32px);
		color: #11273C;
		text-align: center;
		margin-bottom: 1em;

		@media (769px <= width) {
			font-size: var(--48px);
		}
	}

	.sec__faq__box {
		background: #ffffff;
		padding: 1em;
		border-radius: 16px;

		@media (769px <= width) {
			border-radius: initial;
			padding: 1.5em;
		}
	}

	.mb-15em {
		margin-bottom: 1.5em;
	}

	.sec__faq__box_content {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
		column-gap: 0.5em;
		row-gap: 1.8em;

		@media (769px <= width) {
			column-gap: 1em;
		}

		.sec__faq__box_content-q {
			align-self: start;
			color: #ffffff;
			width: 30px;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #719CDF;
			background: linear-gradient(270deg, rgba(113, 156, 223, 1) 0%, rgba(84, 67, 152, 1) 100%);
		}

		.sec__faq__box_content-a {
			color: #ffffff;
			width: 30px;
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #EC8403;
		}

		.sec__faq__box_content__list {
			margin-left: 1.6em;

			li {
				list-style-type: disc;
			}
		}
	}
}

/* ==========================================================================
** 料金（TOPと同じ構成を CS 用に別途記述。画像は CS 版を差し込み）
** ========================================================================== */
/*　料金
--------------------------------------------------------*/
.sec__price {
	background: linear-gradient(180deg, #FFF 0%, #FFF0FB 100%);
	padding: 48px 20px;

	@media (769px <= width) {
		padding: 80px 120px;
	}
	.sec__price-h2 {
		font-size: var(--32px);
		color: #11273C;
		text-align: center;
		margin-bottom: 0.5em;

		@media (769px <= width) {
			font-size: var(--48px);
		}
	}

	.sec__price-h3 {
		font-size: var(--24px);
		color: #9950A6;
		text-align: center;
		margin: 0 auto 0.5em;
		width: 92%;
		max-width: 80%;

		@media (769px <= width) {
			font-size: var(--32px);
			max-width: 299px;
		}
	}

	.sec__price-lead {
		color: #9950A6;
		text-align: center;
		font-size: var(--21px);
		font-style: normal;
		font-weight: 700;
		line-height: 120%;
		margin-bottom: 1em;
		@media (769px <= width) {
			font-size: var(--32px);
		}
		span {
			display: inline-block;
			font-weight: inherit;
			position: relative;
            z-index: 0;
			&::after {
				content: "";
				border-radius: 6px;
				background: #FEF43B;
				width: 100%;
                height: 110%;
                display: block;
                position: absolute;
                top: 50%;
                left: 45%;
                transform: translate(-50%, -50%);
                z-index: -1;
			}
		}
	}
	.sec__price__list {
		max-width: 1200px;
		width: 100%;
		margin: auto;
		display: grid;
		grid-template-columns: 1fr;
		gap: 40px;
		justify-content: center;
		position: relative;

		@media (769px <= width) {
			width: 100%;
			grid-template-columns: repeat(3,1fr);
			/* img / h4 / desc の3行。各行高はカード間で共有され揃う */
			grid-template-rows: auto auto auto;
		}

		li {
			display: grid;
			gap: 10px;
			position: relative;

			@media (769px <= width) {
				grid-row: span 3;
				grid-template-rows: subgrid;
				grid-template-columns: none;
				row-gap: 0;
			}
		}
	}
	.btn-inner {
		font-size: clamp(var(--14px),(100vw - 768px) * 4 / 331 + var(--16px),var(--16px));
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 310px;
		padding: 25px 0;
		border-radius: 50px;
		text-align: center;
		background: #EC8403;
		letter-spacing: -0.01em;
		position: relative;
		margin: 30px auto 15px;

		@media (769px <= width) {
			max-width: 360px;
			margin: 0 auto 1.5em;
		}

		&:hover {
			transform: translateY(4px);
		}

		span {
			color: #11273C;
			font-size: var(--15px);
			font-style: normal;
			font-weight: 600;
			line-height: normal;
			letter-spacing: 0.3px;
			border-radius: 40px;
			border: 1px solid #FFF;
			background: #F7DA24;
			position: absolute;
            transform: translate(-50%, -50%);
            top: 0;
            left: 50%;
			padding: 3px 10px;
			&::after {
				content: "";
				width: 10px;
				height: 10px;
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				background: #F7DA24;
				position: absolute;
				bottom: -10px;
				left: 50%;
				transform: translateX(-50%);
			}
		}

	}
}