@charset "UTF-8";
strong {
	font-weight: bold;
}

.marker {
	color: #9950A6;
}


/*　FV
--------------------------------------------------------*/
.sec__fv {
	background: linear-gradient(180deg, rgba(237, 240, 255, 0) 0%, rgba(237, 240, 255, 1) 100%),url(https://tp-img.imgix.net/s/ai-talk-plus/sp/bg/bg_fv.svg);
	background-size: auto, 60%;
	background-repeat: no-repeat;
	background-position: left top 13em;
	padding: 20px 2% 80px;
	position: relative;
	z-index: 0;
	overflow-x: hidden;
}

@media (769px <= width) {
	.sec__fv {
		background: linear-gradient(180deg, rgba(237, 240, 255, 0) 0%, rgba(237, 240, 255, 1) 100%),url(https://tp-img.imgix.net/s/ai-talk-plus/pc/bg/bg_fv.svg);
		background-size: auto, contain;
		background-repeat: no-repeat;
		background-position: right top;
		padding: 20px 0 140px;
	}
}

.sec__fv__list {
	max-width: 1200px;
	width: 94%;
	margin: auto;

	@media (769px <= width) {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	li {

		&:last-child {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			position: relative;
			z-index: 1;
		}
	}
}

.cta_fv {
	width: fit-content;
	margin: auto;
	display: flex;
    flex-direction: column;
    align-items: center;
	@media (769px <= width) {
		align-items: start;
	}
}

.sec__fv-lead-01 {
	margin-bottom: 5px;
	max-width: 309px;
	@media (769px <= width) {
		max-width: 335px;
	}
}

.sec__fv-lead-02 {
	font-size: var(--24px);
	color: #14293C;

	@media (769px <= width) {
		font-size: clamp(24px, calc(-13.172px + 4.634vw), 40px);
	}
}

.sec__fv-title-01 {
	font-size: var(--48px);
	font-weight: bold;
	background: linear-gradient(to right, #544398 0%, #719CDF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	@media (769px <= width) {
		font-size: clamp(48px, calc(31.737px + 2.115vw), 55px);
	}
}

.sec__fv-title-02 {
	font-size: var(--32px);
	font-weight: bold;
	margin-left: -0.55em;
	margin-bottom: 12px;
	background: linear-gradient(to right, #544398 0%, #719CDF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	@media (769px <= width) {
		font-size: clamp(32px, calc(-0.526px + 4.23vw), 46px);
	}
}

.sec__fv__list__sub {
	margin-bottom: 1.2em;

	li {
		line-height: 1.6em;
		position: relative;
		padding-left: 1.5em;

		@media (769px <= width) {
			font-size: clamp(13px, calc(6.03px + 0.906vw), 16px);
		}

		&::before {
			content: "";
			display: inline-block;
			width: 16px;
			height: 16px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 0;
			background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/icon/icon_check_fv.svg) no-repeat center / contain;
		}
	}
}

.sec__fv__list__cta {
	max-width: 370px;
	display: flex;
	justify-content: space-around;

	@media (769px <= width) {
		max-width: clamp(270px, calc(37.674px + 30.211vw), 370px);
	}

	li {

		a {
			display: inline-block;
			position: relative;

			span {
				color: #9950A6;
				font-weight: bold;
				position: relative;
				padding-right: 15px;

				@media (769px <= width) {
					font-size: clamp(13px, calc(6.03px + 0.906vw), 16px);
				}

				&::after {
					content: '';
					width: 10px;
					height: 10px;
					border: 0;
					border-top: solid 1px #9950A6;
					border-right: solid 1px #9950A6;
					position: absolute;
					top: 8px;
					right: 0;
					transform: rotate(45deg);
					transition: all 0.2s ease-in-out 0s;
				}
			}

			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1px;
				background: #9950A6;
				transform: scaleX(0);
				transform-origin: left;
				transition: transform 0.3s;
				z-index: 1;
			}

			&:hover::after,
			&:focus::after {
				transform: scaleX(1);
			}
		}
	}
}

h1 {
	text-align: center;
}

h1 img {
	max-width: 320px;
	margin-bottom: 1em;
}

@media (414px <= width) {
	h1 img {
		max-width: 340px;
	}
}

@media (428px <= width) {
	h1 img {
		max-width: 350px;
	}
}

@media (769px <= width) {
	h1 img {
		max-width: 100%;
	}
}

.sec__fv .btn-inner {
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 370px;
	width: 100%;
	padding: 20px 0;
	border-radius: 50px;
	text-align: center;
	background: #EC8403;
	letter-spacing: -0.01em;
	position: relative;
	margin: 0 auto 15px;
}

@media (769px <= width) {
	.sec__fv .btn-inner {
		max-width: clamp(270px, calc(37.674px + 30.211vw), 370px);
		font-size: clamp(15px, calc(3.384px + 1.511vw), 20px);
		padding: 15px 0;
		margin: 0 0 1em;
	}
}

.sec__fv .btn-inner:hover {
	transform: translateY(4px);
	box-shadow: none;
	background: rgb(255,91,39);
	background: linear-gradient(180deg, rgba(255,91,39,1) 100%, rgba(235,148,21,1) 100%);
}

.sec__fv .btn-inner::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 21px;
	margin-right: 8px;
	background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/icon/icon_note.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	transition: all 0.3s ease-in-out 0s;
}


	/*　お知らせ
--------------------------------------------------------*/
.sec__news {
	background-color: #ffffff;
	margin: -3.2em auto 1em;
	padding: 20px 4%;
	width: 92%;
	border-top: solid 1px #9950A6;
	position: relative;
	z-index: 1;

	@media (769px <= width) {
		max-width: 1200px;
		display: flex;
		gap: 2em;
		padding: 30px 20px 17px 40px;
		margin: -4em auto 2em;
	}	
}

.sec__news-h2 {
	color: #11273C;
	font-size: var(--24px);
	margin-bottom: 1em;

	@media (769px <= width) {
		font-size: var(--18px);
		width: 90px;
		margin-bottom: initial;
	}	
}

.sec__news__list {
	width: 100%;
	height: 460px;
	overflow-y: scroll;
	padding-right: 15px;
	scrollbar-color: #9950A6 transparent;

	@media (769px <= width) {
		width: calc(100% - 90px);
		height: 250px;
		padding: 3px 20px 0 0;
	}
}

.sec__news__list::-webkit-scrollbar-thumb {
	background-color: #9950A6;
}

/* display scrollbar Mac */
::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}

::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(0,0,0,.5);
	box-shadow: 0 0 1px rgba(255,255,255,.5);
}

.sec__news__list__item {
	padding: 14px 0;
}

.sec__news__list__item:first-child {
	padding-top: 0;
}

.sec__news__list__item:last-child {
	padding-bottom: 0;
}

.sec__news__list__item + .sec__news__list__item {
	border-top: solid 1px #dddddd;
}

.sec__news__list__item a {
	width: 100%;
	
	@media (769px <= width) {
		/* display: flex;
		gap: 0 2em; */
	}
}

/* .sec__news__list__item a:hover {
	text-decoration: underline;
	text-decoration-color: #222222;
} */

.sec__news__list__item-heading {
	color: #11273C;
	font-family: "Noto Sans JP";
	/* font-size: var(--14px); */
	width: 100%;
	position: relative;
	padding-right: 20px;
	overflow: hidden;
	/* モバイル: 4行表示。1〜3行目は全幅、4行目だけ末尾にスペースを作り早めに...を表示 */
	line-height: 1.6;
	height: 6.4em; /* 1.6 × 4行 */

	&::before {
		content: "";
		float: right;
		width: 8em; /* 4行目の末尾に確保する余白 */
		height: 6.4em;
		shape-outside: inset(4.8em 0 0 0); /* 下から1行分（4行目）だけ回り込ませる */
	}

	&::after {
		content: "…";
		position: absolute;
		right: calc(20px + 7em);
		bottom: 0;
	}

	@media (769px <= width) {
		/* PC: 1行で省略（...） */
		display: block;
		height: auto;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding-right: 40px;

		&::before { content: none; }
		&::after { content: none; }
	}
}

.sec__news__list__item__box {
	display: flex;
	gap: 1em;
	margin-bottom: 5px;
}

.sec__news__list__item__box-date {
	color: #9950A6;
	/* font-size: var(--14px); */
}

.sec__news__list__item__box-cate {
	color: #9950A6;
	border: solid 1px #9950A6;
	border-radius: 4px;
	padding: 2px 5px 3px;
	font-size: var(--12px);
}

/* arrow purple */
.arrow-right {
	content: '';
	width: 14px;
	height: 14px;
	border: 0;
	border-top: solid 2px #EC8403;
	border-right: solid 2px #EC8403;
	position: absolute;
	top: 6px;
	right: 1em;
	transform: rotate(45deg);
	transition: all 0.2s ease-in-out 0s;

	@media (769px <= width) {
	}
}


	/*　AIトークプラスとは？
--------------------------------------------------------*/
.sec__about {
	width: min(1200px, 92%);
	margin: 0 auto;
	padding: 2em 4%;
	border-radius: 16px 16px 0 0;
	background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/logo/logo_bg_wht.svg) center top 2em / 60% no-repeat, #EDF0FF;
	position: relative;

	@media (769px <= width) {
		width: min(1200px, 100%);
		padding: 5em 0 3em;
		background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/logo/logo_bg_wht.svg) left 3em top 3em / 400px no-repeat, #EDF0FF;
	}

	.sec__about-lead {
		color: #11273C;
		text-align: center;

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

	.sec__about-h2 {
		font-size: var(--30px);
		color: #11273C;
		text-align: center;
		margin-bottom: 0.5em;

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

	.sec__about-desc {
		color: #11273C;
		text-align: center;
		margin-bottom: 2em;

		@media (769px <= width) {
			font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
		}
	}

	.sec__about-ttl-img {
		max-width: 260px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 1em;

		@media (769px <= width) {
			max-width: 590px;
			margin-bottom: clamp(30px, calc(99.698px + -9.063vw), 0px);
		}
	}

	.sec__about-caption {
		width: fit-content;
		font-size: clamp(14px, calc(12.092px + 0.509vw), 16px);
		color: #11273C;
		text-align: center;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0) linear-gradient(transparent 75%, #FEF43B 75%, #FEF43B 90%, transparent 90%)
    repeat scroll 0 0;
		margin: 0 auto 20px;
		position: relative;

		@media (769px <= width) {
			font-size: clamp(20px, calc(-3.233px + 3.021vw), 30px);
			margin: 0 auto 40px;
		}

		@media (1100px <= width) {
			margin: 0 auto 20px;
		}

		span {
			font-size: clamp(20px, calc(12.366px + 2.036vw), 28px);
			font-weight: bold;

			@media (769px <= width) {
				font-size: clamp(26px, calc(-25.112px + 6.647vw), 48px);
			}
		}

		&::before,&::after {
			content: "";
			display: inline-block;
			width: 16px;
			height: 61px;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			position: absolute;
			top: 50%;

			@media (769px <= width) {
				width: 30px;
				height: 115px;
			}
		}

		&::before {
			background-image: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/parts/parts_rectangle_left.svg);
			left: 0;
			transform: translate(calc(-100% - 10px), -50%);

			@media (769px <= width) {
				transform: translate(calc(-100% - 80px), -50%);
			}
		}

		&::after {
			background-image: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/parts/parts_rectangle_right.svg);
			right: 0;
			transform: translate(calc(100% + 10px), -50%);

			@media (769px <= width) {
				transform: translate(calc(100% + 80px), -50%);
			}
		}
	}

	.sec__about-robo {
		max-width: 46px;
		position: absolute;
		top: 80%;
		left: 100%;
		transform: translateY(-50%);
		margin-left: 10px;
		z-index: 1;

		@media (769px <= width) {
			max-width: 100px;
			margin-left: 120px;
		}
	}

	.sec__about-note {
		font-size: var(--14px);
		color: #9950A6;
		font-weight: bold;
		text-align: center;

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

	.sec__about-dots {
		width: 3px;
		height: auto;
		position: absolute;
		bottom: -14px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 3;

		@media (769px <= width) {
			width: 6px;
			bottom: -28px;
		}
	}

}

/* 貴社に眠るあらゆるデータを学習 */
.sec__learing {
	width: min(1200px, 92%);
	margin: 0 auto 2.5em;
	padding: 2em 4%;
	border-radius: 0 0 16px 16px;
	background: #719CDF;
	background: linear-gradient(270deg, rgba(113, 156, 223, 1) 0%, rgba(84, 67, 152, 1) 100%);
	position: relative;
	z-index: 2;

	@media (769px <= width) {
		width: min(1200px, 100%);
		padding: 3em clamp(10px, calc(33.233px + -3.021vw), 0px);
	}

	.sec__learing-h3 {
		width: fit-content;
		font-size: var(--15px);
		color: #ffffff;
		margin: 0 auto 1.5em;
		padding-bottom: 5px;
		position: relative;

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

		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 3px;
			background: #FFBF62;
			border-radius: 5px;

			@media (769px <= width) {
				height: 5px;
			}
		}
	}

	.sec__learing__list {
		max-width: 1120px;
		margin: 0 auto 1em;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 12px;
	}

	.sec__learing-img-arrow {
		max-width: 45px;
		display: block;
		margin-inline: auto;
		margin-bottom: 0.8em;

		@media (769px <= width) {
			max-width: 160px;
		}
	}

	.sec__learing-img-ai-persona {
		max-width: 275px;
		display: block;
		margin-inline: auto;
		margin-bottom: 0.5em;

		@media (769px <= width) {
			max-width: 480px;
		}
	}

	.sec__learing__list--2nd {
		max-width: 1120px;
		margin: auto;
		display: grid;
		grid-template-columns: 3fr 2fr;
		border-radius: 10px;
		border: 1px solid #FFF;
		background: rgba(253, 163, 163, 0.20);
		padding: 10px;

		@media (769px <= width) {
			grid-template-columns: 7fr 1fr;
			padding: 1em 5em;
		}

		li {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.sec__learing__list--2nd-desc {
			font-size: var(--13px);
			color: #ffffff;
			line-height: 1.4em;

			@media (769px <= width) {
				font-size: clamp(18px, calc(-9.879px + 3.625vw), 30px);
			}
		}

		.sec__learing__list--2nd-desc-marker {
			display: inline-block;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: -1px;
				width: 100%;
				height: 3px;
				background: #FFBF62;
				border-radius: 5px;

				@media (769px <= width) {
					height: 5px;
					bottom: -5px;
				}
			}
		}

		img {
			min-width: 105px;

			@media (769px <= width) {
				min-width: 300px;
				position: relative;
				bottom: -26px;
				left: 50%;
				transform: translateX(-50%);
				margin-top: -70px;
			}
		}
	}
}


	/*　活用されるシーン
--------------------------------------------------------*/
.sec__scene {
	background: #EDF0FF;
	position: relative;

	&::before {
		content: "";
		position: absolute;
		top: -12em;
		left: 0;
		width: 40%;
		aspect-ratio: 321 / 656;
		background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/bg/bg_scene.png?auto=format) left top / contain no-repeat;
		z-index: 0;
		pointer-events: none;

		@media (769px <= width) {
			width: 340px;
			top: -24em;
		}
	}

	.sec__scene__inner {
		max-width: 1200px;
		width: 92%;
		margin: auto;
		padding: 2em 0;
		position: relative;
		z-index: 1;

		@media (769px <= width) {
			width: 100%;
			padding: 5em clamp(10px, calc(33.233px + -3.021vw), 0px);
		}
	}

	.sec__scene__inner-lead {
		color: #11273C;
		text-align: center;

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

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

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

	.sec__scene__inner-desc {
		max-width: 870px;
		color: #11273C;
		text-align: center;
		margin: 0 auto 2em;

		@media (769px <= width) {
			font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
		}
	}

	.sec__scene__inner__list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 25px;

		@media (769px <= width) {
			width: 100%;
			grid-template-columns: repeat(2, 1fr);
		}

		@media (1010px <= width) {
			grid-template-columns: repeat(3, 1fr);
		}

		>li {
			border-radius: 16px;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			img {
				width: 100%;
			}
		}
	}

	.sec__scene__inner__list-box {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 10px 2em 30px;
		background: #ffffff;
	}

	.sec__scene__inner__list-num--pnk {
		font-size: var(--40px);
		font-weight: bold;
		text-align: center;
		color: transparent;
		-webkit-text-stroke: 1px #BD319B;
		text-stroke: 1px #BD319B;
	}

	.sec__scene__inner__list-num--purple {
		font-size: var(--40px);
		font-weight: bold;
		text-align: center;
		color: transparent;
		-webkit-text-stroke: 1px #6D5AAB;
		text-stroke: 1px #6D5AAB;
	}

	.sec__scene__inner__list-num--blu {
		font-size: var(--40px);
		font-weight: bold;
		text-align: center;
		color: transparent;
		-webkit-text-stroke: 1px #3B7DD8;
		text-stroke: 1px #3B7DD8;
	}

	.sec__scene__inner__list-h3 {
		font-size: var(--32px);
		text-align: center;
		margin-bottom: 0.3em;

		@media (769px <= width) {
			font-size: clamp(20px, calc(-7.879px + 3.625vw), 32px);
		}
	}

	.txt_pnk {
		color: #BD319B;
	}

	.txt_purple {
		color: #6D5AAB;
	}

	.txt_blu {
		color: #3B7DD8;
	}

	.sec__scene__inner__list-lead {
		font-size: var(--20px);
		color: #11273C;
		text-align: center;
		font-weight: bold;
		margin-bottom: 1.2em;
		padding-bottom: 25px;

		@media (769px <= width) {
			font-size: clamp(16px, calc(6.707px + 1.208vw), 20px);
		}
	}

	.border_pnk {
		width: 120%;
		margin-left: -10%;
		border-bottom: 2px solid;
		border-image: linear-gradient(to right, transparent, #BD319B 50%, transparent) 1;
	}

	.border_purple {
		width: 120%;
		margin-left: -10%;
		border-bottom: 2px solid; 
		border-image: linear-gradient(to right, transparent, #6D5AAB 50%, transparent) 1;
	}

	.border_blu {
		width: 120%;
		margin-left: -10%;
		border-bottom: 2px solid; 
		border-image: linear-gradient(to right, transparent, #3B7DD8 50%, transparent) 1;
	}

	.sec__scene__inner__list-h4 {
		font-size: var(--20px);
		color: #11273C;
		font-weight: normal;
		margin-bottom: 1em;

		@media (769px <= width) {
			font-size: clamp(16px, calc(6.707px + 1.208vw), 20px);
		}
	}

	.sec__scene__inner__list__sub {
		padding-left: 20px;
		margin-bottom: 1em;
		flex: 1;
		
		li {
			font-size: var(--15px);
			list-style-type: disc;

			@media (769px <= width) {
				font-size: clamp(13px, calc(6.03px + 0.906vw), 16px);
			}
		}
	}

	.bg_pnk {
		background: #BD319B;
	}

	.bg_purple {
		background: #6D5AAB;
	}

	.bg_blu {
		background: #3B7DD8;
	}

	a.hover_slide_line {
		display: block;
		width: fit-content;
		margin-inline: auto;
		position: relative;

		span {
			color: #9950A6;
			font-weight: bold;
			position: relative;
			padding-right: 15px;

			&::after {
				content: '';
				width: 10px;
				height: 10px;
				border: 0;
				border-top: solid 2px #9950A6;
				border-right: solid 2px #9950A6;
				position: absolute;
				top: 8px;
				right: 0;
				transform: rotate(45deg);
				transition: all 0.2s ease-in-out 0s;
			}
		}

		&::after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			background: #9950A6;
			transform: scaleX(0);
			transform-origin: left;
			transition: transform 0.3s;
			z-index: 1;
		}

		&:hover::after,
		&:focus::after {
			transform: scaleX(1);
		}
	}

}

/* CTA */
.sec__scene .btn-inner {
	font-size: clamp(var(--16px),(100vw - 768px) * 4 / 331 + var(--16px),var(--20px));
	color: #fff;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 370px;
	width: 100%;
	padding: 20px 0;
	border-radius: 50px;
	text-align: center;
	letter-spacing: -0.01em;
	position: relative;
	margin: 0 auto 15px;
}

.sec__scene .btn-inner::after {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	margin-left: 10px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}

@media (769px <= width) {
	.sec__scene .btn-inner {
		padding: 15px 0;
		margin: 0 0 1em;
	}
}

.sec__scene .btn-inner:hover {
	transform: translateY(4px);
}


	/*　3つの特徴
--------------------------------------------------------*/
.sec__feature {
	background: #EDF0FF;

	.sec__feature__inner {
		max-width: 1200px;
		width: 92%;
		margin: auto;
		padding: 2em 0;

		@media (769px <= width) {
			width: 100%;
			padding: 5em 0;
		}
	}

	.sec__feature__inner-lead {
		color: #11273C;
		text-align: center;

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

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

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

	.sec__feature__inner__list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 15px;
		background: #ffffff;
		padding: 20px;
		margin-bottom: 2em;

		@media (769px <= width) {
			grid-template-columns: 3.5fr 5.5fr;
			padding: 40px 25px clamp(10px, calc(-59.698px + 9.063vw), 40px) 25px;
			margin-bottom: 3em;
		}

		img {
			width: 100%;
		}
	}

	.sec__feature__inner__list--2nd {
		display: flex;
		flex-direction: column-reverse;
		gap: 15px;
		background: #ffffff;
		padding: 20px;
		margin-bottom: 2em;

		@media (769px <= width) {
			flex-direction: initial;
			display: grid;
			grid-template-columns: 5.5fr 3.5fr;
			padding: 40px 25px clamp(10px, calc(-59.698px + 9.063vw), 40px) 25px;
			margin-bottom: 3em;
		}

		img {
			width: 100%;
		}
	}

	.sec__feature__inner__list__box {
		position: relative;
	}

	.sec__feature__inner__list-num-sky {
		font-size: var(--130px);
		color: transparent;
		-webkit-text-stroke: 1px #3B7DD8;
		text-stroke: 1px #3B7DD8;
		position: absolute;
		top: -70px;
		right: 0;
		z-index: 0;

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

	.sec__feature__inner__list-h3 {
		font-size: var(--24px);
		color: #11273C;
		margin-bottom: 1em;
		margin-top: 1em;
		position: relative;
		z-index: 1;

		@media (769px <= width) {
			font-size: clamp(20px, calc(1.414px + 2.417vw), 32px);
			margin-top: initial;
			letter-spacing: 0.64px;
		}
	}

	.sec__feature__inner__list-desc {
		color: #11273C;
		position: relative;
		z-index: 1;
		margin-bottom: 1em;

		@media (769px <= width) {
			font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
			margin-bottom: 2.5em;
		}
	}

	.sec__feature__inner__list-note {
		color: #11273C;
		margin-bottom: 0.6em;

		@media (769px <= width) {
			font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
			margin-bottom: 2.5em;
		}

		span {
			width: fit-content;
			font-size: var(--12px);
			color: #ffffff;
			display: block;
			padding: 2px 6px 4px;
			margin-bottom: 10px;
			background: linear-gradient(270deg, rgba(113, 156, 223, 1) 0%, rgba(84, 67, 152, 1) 100%);

			@media (769px <= width) {
				font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
				display: inline-block;
				margin-right: 10px;
				margin-bottom: initial;
			}
		}
	}
}


	/*　導入事例 / 主な機能
--------------------------------------------------------*/
.sec__case-func__wrap {
	background: #ffffff;
	position: relative;

	&::before {
		content: "";
		position: absolute;
		top: 38%;
		transform: translateY(-50%);
		right: 0;
		width: 40%;
		aspect-ratio: 321 / 656;
		background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/bg/bg_case.png?auto=format) right top / contain no-repeat;
		z-index: 0;
		pointer-events: none;

		@media (769px <= width) {
			width: 340px;
			top: 50%;
		}
	}

	/* 導入事例 */
	.sec__case {
		max-width: 1200px;
		width: 92%;
		margin: auto;
		padding: 2em 0;
		position: relative;
		z-index: 1;

		@media (769px <= width) {
			width: 100%;
			padding: 5em clamp(10px, calc(33.233px + -3.021vw), 0px);
		}

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

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

		.sec__case__list {
			display: grid;
			grid-template-columns: 1fr;
			/* gap: 15px; */
			padding: 22px;
			border-radius: 16px;
			background: linear-gradient(180deg, #EDF0FF 0%, #FFF 100%);
			box-shadow: 4px 4px 0 0 #719CDF;
			+ .sec__case__list {
				margin-top: 4%;
			}

			@media (769px <= width) {
				grid-template-columns: 2fr 3fr;
				gap: clamp(15px, calc(-19.849px + 4.532vw), 30px);
				padding: 48px 48px 32px 48px;
			}

			img {
				width: 100%;
			}
		}

		.sec__case__list-name {
			width: fit-content;
			color: #ffffff;
			padding: 2px 6px 4px;
			margin-bottom: 1em;
			margin-top: 1.5em;
			background: linear-gradient(270deg, rgba(113, 156, 223, 1) 0%, rgba(84, 67, 152, 1) 100%);

			@media (769px <= width) {
				font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
				margin-top: initial;
			}
		}

		.sec__case__list-h3 {
			font-size: var(--24px);
			color: #11273C;
			margin-bottom: 0.5em;

			@media (769px <= width) {
				font-size: clamp(20px, calc(1.414px + 2.417vw), 28px);
			}
		}

		.sec__case__list-desc {
			color: #11273C;
			margin-bottom: 0.5em;

			@media (769px <= width) {
				font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
			}
		}

		a.hover_slide_line {
			display: block;
			width: fit-content;
			margin-left: auto;
			margin-right: 0;
			position: relative;

			span {
				font-size: var(--15px);
				color: #EC8403;
				font-weight: bold;
				position: relative;
				padding-right: 15px;

				@media (769px <= width) {
					font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
				}

				&::after {
					content: '';
					width: 10px;
					height: 10px;
					border: 0;
					border-top: solid 1px #EC8403;
					border-right: solid 1px #EC8403;
					position: absolute;
					top: 8px;
					right: 0;
					transform: rotate(45deg);
					transition: all 0.2s ease-in-out 0s;
				}
			}

			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1px;
				background: #EC8403;
				transform: scaleX(0);
				transform-origin: left;
				transition: transform 0.3s;
				z-index: 1;
			}

			&:hover::after,
			&:focus::after {
				transform: scaleX(1);
			}
		}
	}

	/* 主な機能 */
	.sec__function {
		max-width: 1200px;
		width: 92%;
		margin: auto;
		padding: 2em 0 3em;
		position: relative;
		z-index: 1;

		@media (769px <= width) {
			width: 100%;
			padding: 2em clamp(10px, calc(33.233px + -3.021vw), 0px) 5em;
		}

		.sec__function-lead {
			color: #11273C;
			text-align: center;

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

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

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

		.sec__function__list {
			display: grid;
			grid-template-columns: 1fr;
			gap: 35px;

			@media (769px <= width) {
				grid-template-columns: repeat(2,1fr);
			}

			@media (1010px <= width) {
				grid-template-columns: repeat(3, 1fr);
			}

			.sec__function__img-box {
				padding: 16px;
				border-radius: 8px;
				background: #EDF0FF;
				box-shadow: 4px 4px 0 0 #719CDF;
				margin-bottom: 1.2em;

				img {
					width: 100%;
				}
			}

			.sec__function__list-h3 {
				color: #9950A6;
				font-size: var(--24px);
				font-weight: 700;
				margin-bottom: 0.5em;

				@media (769px <= width) {
					font-size: clamp(20px, calc(1.414px + 2.417vw), 28px);
				}
			}

			.sec__function__list__sub {
				margin-left: 23px;

				li {
					font-size: var(--15px);
					color: #11273C;
					list-style-type: disc;

					@media (769px <= width) {
						font-size: clamp(14px, calc(11.677px + 0.302vw), 15px);
					}
				}
			}
		}
	}
}


	/*　活用事例
--------------------------------------------------------*/
.sec__work {
	background: #EDF0FF;

	.sec__work__inner {
		max-width: 1200px;
		width: 92%;
		margin: auto;
		padding: 2em 0 3em;

		@media (769px <= width) {
			width: 100%;
			padding: 5em clamp(10px, calc(33.233px + -3.021vw), 0px);
		}

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

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

		.sec__work-h3 {
			font-size: var(--24px);
			color: #9950A6;
			text-align: center;
			margin-bottom: 0.5em;

			@media (769px <= width) {
				font-size: clamp(24px, calc(5.414px + 2.417vw), 32px);
			}
		}

		.sec__work-lead {
			color: #11273C;
			text-align: center;
			margin-bottom: 2em;

			@media (769px <= width) {
				font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
				margin-bottom: 3em;
			}
		}

		.sec__work__list {
			display: grid;
			grid-template-columns: 1fr;
			gap: 35px;

			@media (769px <= width) {
				grid-template-columns: repeat(2,1fr);
				grid-template-rows: repeat(3, auto);
				gap: 30px;
			}

			@media (1010px <= width) {
				gap: 50px;
			}

			li {
				display: grid;
				grid-template-rows: subgrid;
				grid-row: span 3;
				text-align: center;
				border-radius: 8px;
				background: #ffffff;
				overflow: hidden;
				padding-bottom: 60px;
			}

			img {
				width: 90%;
				justify-self: center;
				align-self: start;

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

			.sec__work_box__ttl {
				color: #ffffff;
				padding: 20px;
				background: linear-gradient(270deg, rgba(113, 156, 223, 1) 0%, rgba(84, 67, 152, 1) 100%);

				.sec__work__list-h4 {
					font-size: var(--24px);
					margin-bottom: 0.3em;
				}
			}

			.sec__work__list-desc {
				color: #11273C;
				text-align: left;
				padding: 0 2.5em;

				@media (769px <= width) {
					font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
				}
			}
		}
	}
}


	/*　「使えるロープレ」にできる理由
--------------------------------------------------------*/
.sec__rollplay {
	background: #ffffff;
	padding: 2em 0;

	@media (769px <= width) {
		padding: 5em 0;
	}

	.sec__rollplay-lead {
		color: #11273C;
		text-align: center;

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

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

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

	.sec__rollplay__wrap {
		background: #EDF0FF;
		background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/bg/bg_reason_01.png?auto=format) right center / 45% no-repeat,linear-gradient(90deg,rgba(237, 240, 255, 0) 30%, rgba(237, 240, 255, 1) 100%);
		background-origin: content-box, border-box;
		background-clip: content-box, border-box;
		padding: 1.5em 0;

		@media (769px <= width) {
			background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/bg/bg_reason_01.png?auto=format) right center / contain no-repeat,linear-gradient(90deg,rgba(237, 240, 255, 0) 30%, rgba(237, 240, 255, 1) 100%);
			padding: 4em clamp(10px, calc(33.233px + -3.021vw), 0px);
		}

		.sec__rollplay__wrap__list {
			max-width: 1200px;
			width: 92%;
			margin: auto;
			display: grid;
			grid-template-columns: 1fr;
			gap: 15px;

			@media (769px <= width) {
				width: 100%;
				grid-template-columns: 4.5fr 5.5fr;
				gap: 30px;
			}

			img {
				width: 100%;
			}
		}
	}

	.sec__rollplay__wrap--2nd {
		background: #EDF0FF;
		background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/bg/bg_reason_02.png?auto=format) left center / 45% no-repeat,linear-gradient(270deg,rgba(237, 240, 255, 0) 30%, rgba(237, 240, 255, 1) 100%);
		background-origin: content-box, border-box;
		background-clip: content-box, border-box;
		padding: 1.5em 0;

		@media (769px <= width) {
			background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/bg/bg_reason_02.png?auto=format) left center / contain no-repeat,linear-gradient(270deg,rgba(237, 240, 255, 0) 30%, rgba(237, 240, 255, 1) 100%);
			padding: 4em clamp(10px, calc(33.233px + -3.021vw), 0px);
		}

		.sec__rollplay__wrap__list--2nd {
			max-width: 1200px;
			width: 92%;
			margin: auto;
			display: flex;
			flex-direction: column-reverse;
			gap: 15px;

			@media (769px <= width) {
				width: 100%;
				flex-direction: initial;
				display: grid;
				grid-template-columns: 4.5fr 5.5fr;
				gap: 30px;
			}

			img {
				width: 100%;
			}
		}
	}

	.sec__rollplay__wrap__list-name {
		width: fit-content;
		color: #ffffff;
		padding: 2px 6px 4px;
		margin-bottom: 0.5em;
		background: linear-gradient(270deg, rgba(113, 156, 223, 1) 0%, rgba(84, 67, 152, 1) 100%);

		@media (769px <= width) {
			font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
			margin-bottom: 1em;
		}
	}

	.sec__rollplay__wrap__list-h3 {
		font-size: var(--24px);
		color: #11273C;
		margin-bottom: 0.6em;

		@media (769px <= width) {
			font-size: clamp(22px, calc(8.06px + 1.813vw), 28px);
		}
	}

	.sec__rollplay__wrap__list-desc {
		color: #11273C;
		margin-bottom: 1em;

		@media (769px <= width) {
			font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
		}
	}

	.sec__rollplay__wrap__list-note {
		font-size: var(--14px);
		color: #888888;

		@media (769px <= width) {
			font-size: clamp(12px, calc(7.353px + 0.604vw), 14px);
		}
	}
}


	/*　料金
--------------------------------------------------------*/
.sec__price {
	background: #ffffff;
	padding: 0 0 3em;

	@media (769px <= width) {
		padding: 0 clamp(10px, calc(33.233px + -3.021vw), 0px) 5em;
	}
	.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: 92%;
		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%);
			}
		}

	}
}

	/*　導入流れ
--------------------------------------------------------*/
.sec__flow {
	background: #ffffff;
	padding: 0 0 3em;

	@media (769px <= width) {
		padding: 0 clamp(10px, calc(33.233px + -3.021vw), 0px) 5em;
	}

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

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

	.sec__flow-h3 {
		font-size: var(--24px);
		color: #9950A6;
		text-align: center;
		margin-bottom: 0.5em;

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

	.sec__flow-lead {
		font-size: var(--14px);
		color: #11273C;
		text-align: center;
		margin-bottom: 3em;

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

	.sec__flow__list {
		max-width: 1200px;
		width: 92%;
		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;
			grid-template-columns: 3fr 7fr;
			gap: 10px;
			position: relative;

			@media (769px <= width) {
				grid-row: span 3;
				grid-template-rows: subgrid;
				grid-template-columns: none;
				row-gap: 0;
			}
		}

		li:not(:last-child)::after {
			content: "";
			position: absolute;
			background: #EC8403;
			z-index: 0;
			/* SP: 縦線（円の下から次の円へ） */
			top: 64px;
			left: 64px;
			width: 2px;
			height: calc(100% + 40px);
			transform: translateX(-50%);

			@media (480px <= width) {
				left: 15%;
			}

			@media (769px <= width) {
				/* PC: 横線（円の右から次の円へ） */
				top: clamp(90px, calc(20.302px + 9.063vw), 120px);
				left: 50%;
				width: calc(100% + 40px);
				height: 2px;
				transform: none;
			}
		}

		.sec__flow__list-img {
			width: 128px;
			height: 128px;
			aspect-ratio: 1/1;
			background: linear-gradient(269deg, #719CDF 1.55%, #544398 100%);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto 1em;
			position: relative;
			z-index: 1;

			@media (769px <= width) {
				width: clamp(180px, calc(40.604px + 18.127vw), 240px);
				height: clamp(180px, calc(40.604px + 18.127vw), 240px);
			}

			img {
				width: 60%;
				height: 60%;
				object-fit: contain;

				@media (769px <= width) {
					width: clamp(100px, calc(53.535px + 6.042vw), 120px);
					height: clamp(100px, calc(53.535px + 6.042vw), 120px);
				}
			}
		}

		.sec__flow__list__box {

			@media (769px <= width) {
				/* ラッパーを透過し h4 / desc を親グリッドの行に乗せる */
				display: contents;
			}
		}

		.sec__flow__list-h4 {
			font-size: var(--24px);
			color: #11273C;
			margin-bottom: 0.3em;

			@media (769px <= width) {
				font-size: clamp(20px, calc(10.707px + 1.208vw), 24px);
				text-align: center;
			}
		}

		.sec__flow__list-desc {
			color: #11273C;

			@media (769px <= width) {
				font-size: clamp(14px, calc(9.353px + 0.604vw), 16px);
				text-align: center;
			}
		}
	}
}


	/*　よくある質問
--------------------------------------------------------*/
.sec__faq {
	max-width: 1200px;
	width: 92%;
	margin: auto;
	background: #EDF0FF;
	background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/bg/bg_question.png?auto=format) center top / 70% no-repeat,#EDF0FF;
	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;
			}
		}
	}
}


/* CTA include .sec__cta */
.sec__cta {
	padding: 2em 0;
	background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/logo/logo_bg_cta_wht.svg) center / 65% no-repeat, linear-gradient(270deg, rgba(113, 156, 223, 1) 0%, rgba(84, 67, 152, 1) 100%);
	position: relative;

	@media (769px <= width) {
		background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/logo/logo_bg_cta_wht.svg) left 10em top -1em / 340px no-repeat, linear-gradient(270deg, rgba(113, 156, 223, 1) 0%, rgba(84, 67, 152, 1) 100%);
		padding: 3em 0;
	}

	.sec__cta-h2 {
		font-size: var(--32px);
		color: #ffffff;
		text-align: center;
		margin-bottom: 0.6em;

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

	.btn-inner {
		font-size: clamp(var(--16px),(100vw - 768px) * 4 / 331 + var(--16px),var(--20px));
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 310px;
		padding: 20px 0;
		border-radius: 50px;
		text-align: center;
		background: #EC8403;
		letter-spacing: -0.01em;
		position: relative;
		margin: 0 auto 15px;

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

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

		&::before {
			content: "";
			flex-shrink: 0;
			width: 16px;
			height: 21px;
			margin-right: 8px;
			background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/icon/icon_note.svg);
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			transition: all 0.3s ease-in-out 0s;
		}
	}

	.sec__cta__wrap {
		max-width: 370px;
		margin: auto;
		position: relative;
	}

	.sec__cta__wrap__list {
		max-width: 370px;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;

		@media (769px <= width) {
			flex-direction: row;
			align-items: initial;
			justify-content: space-around;
			gap: 0;
		}

		li {

			a {
				display: inline-block;
				position: relative;

				span {
					color: #ffffff;
					font-weight: bold;
					position: relative;
					padding-right: 15px;

					&::after {
						content: '';
						width: 10px;
						height: 10px;
						border: 0;
						border-top: solid 1px #ffffff;
						border-right: solid 1px #ffffff;
						position: absolute;
						top: 8px;
						right: 0;
						transform: rotate(45deg);
						transition: all 0.2s ease-in-out 0s;
					}
				}

				&::after {
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 1px;
					background: #ffffff;
					transform: scaleX(0);
					transform-origin: left;
					transition: transform 0.3s;
					z-index: 1;
				}

				&:hover::after,
				&:focus::after {
					transform: scaleX(1);
				}
			}
		}
	}

	img {
		max-width: 94px;
		position: absolute;
		top: 0;
		left: 75%;

		@media (769px <= width) {
			max-width: 154px;
			margin-left: 20px;
			top: -80%;
			left: 100%;
			transform: translateY(-50%);
		}
	}
}


/* CTA include .sec__cta--footer */
.sec__cta--footer {
	padding: 2em 0 3em;
	background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/logo/logo_bg_cta_wht.svg) center / 65% no-repeat, linear-gradient(270deg, rgba(113, 156, 223, 1) 0%, rgba(84, 67, 152, 1) 100%);
	position: relative;

	@media (769px <= width) {
		background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/logo/logo_bg_cta_wht_large.svg) left center / 550px no-repeat, linear-gradient(270deg, rgba(113, 156, 223, 1) 0%, rgba(84, 67, 152, 1) 100%);
		padding: 3em 0;
	}

	.sec__cta--footer-h2 {
		font-size: var(--32px);
		color: #ffffff;
		text-align: center;
		margin-bottom: 0.6em;

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

	.btn-inner {
		font-size: clamp(var(--16px),(100vw - 768px) * 4 / 331 + var(--16px),var(--20px));
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 310px;
		padding: 20px 0;
		border-radius: 50px;
		text-align: center;
		background: #EC8403;
		letter-spacing: -0.01em;
		position: relative;
		margin: 0 auto 15px;

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

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

		&::before {
			content: "";
			flex-shrink: 0;
			width: 16px;
			height: 21px;
			margin-right: 8px;
			background: url(https://tp-img.imgix.net/s/ai-talk-plus/pc/icon/icon_note.svg);
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			transition: all 0.3s ease-in-out 0s;
		}
	}

	.sec__cta--footer__wrap {
		max-width: 370px;
		margin: auto;
		position: relative;
	}

	.sec__cta--footer__wrap__list {
		max-width: 370px;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;

		@media (769px <= width) {
			flex-direction: row;
			align-items: initial;
			justify-content: space-around;
			gap: 0;
		}

		li {

			a {
				display: inline-block;
				position: relative;

				span {
					color: #ffffff;
					font-weight: bold;
					position: relative;
					padding-right: 15px;

					&::after {
						content: '';
						width: 10px;
						height: 10px;
						border: 0;
						border-top: solid 1px #ffffff;
						border-right: solid 1px #ffffff;
						position: absolute;
						top: 8px;
						right: 0;
						transform: rotate(45deg);
						transition: all 0.2s ease-in-out 0s;
					}
				}

				&::after {
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 1px;
					background: #ffffff;
					transform: scaleX(0);
					transform-origin: left;
					transition: transform 0.3s;
					z-index: 1;
				}

				&:hover::after,
				&:focus::after {
					transform: scaleX(1);
				}
			}
		}
	}

	img {
		max-width: 94px;
		position: absolute;
		top: 0;
		left: 72%;

		@media (769px <= width) {
			max-width: 154px;
			margin-left: 20px;
			top: -80%;
			left: 100%;
			transform: translateY(-50%);
		}
	}
}

.sec__cta--footer__phone {
	width: min(1200px, 92%);
	margin: 2em auto 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	border-radius: 16px;
	border: 2px solid #EDF0FF;
	overflow: hidden;
	
	@media (769px <= width) {
		width: min(1200px, 96%);
		margin: 4em auto 0;
	}

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

	li {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px 0;

		@media (48.0625rem <= width) {
			padding: 18px 0 20px;
		}

		&:first-child {
			background: #EDF0FF;
		}

		.sec__cta--footer__phone-h3 {
			font-size: var(--24px);
			color: #11273C;
			text-align: center;

			@media (600px <= width) {
				font-size: clamp(20px, calc(-52px + 12vw), 32px);
			}

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

		.sec__cta--footer__phone-desc {
			color: #11273C;
			text-align: center;

			@media (600px <= width) {
				font-size: clamp(13px, calc(-5px + 3vw), 16px);
			}
		}

		.sec__cta--footer__phone-num {
			font-size: var(--32px);
			color: #ffffff;
			text-align: center;

			@media (600px <= width) {
				font-size: clamp(20px, calc(-52px + 12vw), 32px);
			}
		}

		.sec__cta--footer__phone-time {
			color: #ffffff;
			text-align: center;

			@media (600px <= width) {
				font-size: clamp(13px, calc(-5px + 3vw), 16px);
			}
		}
	}
}