@charset "utf-8";

#home_scene {
	background: #ffffff;
	padding: 104px 20px 100px;
}

.ai-scene-section {
	max-width: 1080px;
	text-align: left;
}

.ai-scene-section::before {
	display: none;
}

.ai-scene-section__heading {
	margin: 0 auto 50px;
	max-width: 1080px;
	text-align: center;
}

.ai-scene-section__eyebrow {
	align-items: center;
	color: #2168c8;
	display: flex;
	font-size: 13px;
	font-weight: 700;
	gap: 12px;
	justify-content: center;
	letter-spacing: 0.14em;
	margin: 0 0 14px;
}

.ai-scene-section__eyebrow::after {
	background: #8eb8eb;
	content: "";
	height: 1px;
	width: 44px;
}

.ai-scene-section__heading h2 {
	color: #0f2d5c;
	font-size: 38px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5;
	margin: 0;
	white-space: normal;
}

.ai-scene-title-line {
	display: inline;
}

.ai-scene-title-line + .ai-scene-title-line::before {
	content: " ";
}

.ai-scene-section__heading > p:not(.ai-scene-section__eyebrow) {
	color: #52677d;
	font-size: 15px;
	letter-spacing: 0;
	line-height: 1.9;
	margin: 16px auto 0;
	max-width: 780px;
}

.ai-scene-cards {
	border-top: 1px solid #cad8e6;
	counter-reset: scene-card;
	display: block;
	margin: 0;
	max-width: 1080px;
	text-align: left;
}

.ai-scene-card {
	align-items: start;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #cad8e6;
	border-radius: 0;
	box-shadow: none;
	counter-increment: scene-card;
	display: grid;
	grid-template-columns: 72px 300px minmax(0, 1fr);
	grid-template-rows: auto auto;
	min-height: 0;
	padding: 28px 0;
	position: relative;
}

.ai-scene-card::before {
	color: #1767cc;
	content: "0" counter(scene-card);
	font-family: Roboto, sans-serif;
	font-size: 28px;
	font-weight: 700;
	grid-column: 1;
	grid-row: 1 / 3;
	line-height: 1;
	position: static;
}

.ai-scene-card__tag {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: #1767cc;
	display: block;
	font-size: 11px;
	font-weight: 700;
	grid-column: 2;
	grid-row: 1;
	height: auto;
	justify-content: flex-start;
	letter-spacing: 0.09em;
	line-height: 1.4;
	margin: 0 0 7px;
	min-width: 0;
	padding: 0;
}

.ai-scene-card h3 {
	color: #10274c;
	font-size: 20px;
	font-weight: 700;
	grid-column: 2;
	grid-row: 2;
	letter-spacing: 0;
	line-height: 1.5;
	margin: 0;
	padding-right: 28px;
}

.ai-scene-card p:not(.ai-scene-card__tag) {
	align-self: stretch;
	border-left: 1px solid #dbe5ef;
	color: #3e5369;
	font-size: 14px;
	grid-column: 3;
	grid-row: 1 / 3;
	letter-spacing: 0;
	line-height: 1.85;
	margin: 0;
	padding-left: 32px;
}

.ai-scene-section__badges {
	align-items: center;
	display: grid;
	gap: 16px 32px;
	grid-template-columns: auto repeat(2, minmax(0, auto));
	justify-content: start;
	margin: 24px 0 0;
	max-width: 1080px;
}

.ai-scene-section__badges::before {
	color: #6b7f93;
	content: "共通対応";
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.ai-scene-section__badges p {
	align-items: center;
	background: transparent;
	border-radius: 0;
	color: #173b62;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 9px;
	letter-spacing: 0;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	text-align: left;
}

.ai-scene-section__badges p::before {
	background: #2874fc;
	border-radius: 50%;
	content: "";
	flex: 0 0 7px;
	height: 7px;
	width: 7px;
}

@media (max-width: 767px) {
	#home_scene {
		padding: 68px 20px 72px;
	}

	.ai-scene-section__heading {
		margin-bottom: 32px;
	}

	.ai-scene-section__eyebrow {
		font-size: 12px;
		margin-bottom: 11px;
	}

	.ai-scene-section__heading h2 {
		font-size: 23px;
		line-height: 1.5;
		text-align: center;
	}

	.ai-scene-title-line {
		display: block;
	}

	.ai-scene-title-line + .ai-scene-title-line::before {
		content: none;
	}

	.ai-scene-section__heading > p:not(.ai-scene-section__eyebrow) {
		font-size: 14px;
		line-height: 1.85;
		margin-top: 14px;
	}

	.ai-scene-card {
		grid-template-columns: 46px minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		padding: 22px 0;
	}

	.ai-scene-card::before {
		font-size: 22px;
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.ai-scene-card__tag {
		font-size: 10px;
		grid-column: 2;
		grid-row: 1;
		margin-bottom: 6px;
	}

	.ai-scene-card h3 {
		font-size: 17px;
		grid-column: 2;
		grid-row: 2;
		line-height: 1.5;
		padding-right: 0;
	}

	.ai-scene-card p:not(.ai-scene-card__tag) {
		border-left: 0;
		font-size: 13px;
		grid-column: 2;
		grid-row: 3;
		line-height: 1.8;
		margin-top: 10px;
		padding-left: 0;
	}

	.ai-scene-section__badges {
		align-items: start;
		gap: 11px;
		grid-template-columns: 1fr;
		justify-content: stretch;
		margin-top: 20px;
	}

	.ai-scene-section__badges p {
		font-size: 13px;
	}
}

@media (min-width: 768px) and (max-width: 900px) {
	.ai-scene-section__heading h2 {
		font-size: 32px;
	}
}

@media (max-width: 375px) {
	.ai-scene-section__heading h2 {
		font-size: 21px;
	}
}