@charset "UTF-8";

/* =========================================================
	英語版ソリューション一覧（/solutions/）。日本語版 /jp/solutions/ と同じ作りで、
	英語向けに字間だけ詰めている（末尾）
========================================================= */

#wrapper {
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.03em;
	color: #1b273b;
}

#wrapper a {
	text-decoration: none;
}

/* ---------------------------------------------------------
	visual
--------------------------------------------------------- */

#visual {
	margin-top: 44px;
	padding: 14vw 5vw 12vw;
	background: #03537e url(/jp/images/visual_sp.webp) no-repeat center 40% / cover;
	text-shadow: 0 1px 8px rgba(0, 30, 90, 0.5);
	position: relative;
	z-index: 0;
	color: #fff;
}

#visual .label {
	margin-bottom: 2vw;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.3em;
	color: #ffc9ad;
}

#visual h1 {
	margin-bottom: 7vw;
	font-weight: 700;
	font-size: 8.4vw;
	line-height: 1.35;
	color: #fff;
}

/* 画像の上に薄く青を重ねて白い文字を読みやすくする（トップページと同じ visual_sp.webp） */
#visual::before {
	content: "";
	background: rgba(0, 40, 130, 0.45);
	position: absolute;
	inset: 0;
	z-index: -1;
}

#visual .desc {
	text-align: left;
	font-size: 15px;
	line-height: 1.95;
}

#visual .desc br {
	display: none;
}

/* ---------------------------------------------------------
	見出し
--------------------------------------------------------- */

.tag {
	margin-bottom: 1vw;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.3em;
	color: #ee7546;
}

.h3 {
	margin-bottom: 8vw;
	font-weight: 700;
	font-size: 6.4vw;
	line-height: 1.45;
	color: #0591ab;
}

/* キャッチコピーだけ濃紺（ほかの見出しと区別する・2026-10-29 上司決定） */
#core > .container > .h3 {
	color: #13235f;
}

/* ---------------------------------------------------------
	section
--------------------------------------------------------- */

.section {
	padding: 14vw 0;
}

.section.blue {
	background: #d6e6f0;
}

.section .container {
	padding: 0 5vw;
}

.section p.center {
	margin: -4vw 0 6vw;
	text-align: left;
	font-size: 15px;
}

/* ---------------------------------------------------------
	core
--------------------------------------------------------- */

.core_list {
	display: flex;
	flex-direction: column;
	gap: 5vw;
	margin-bottom: 14vw;
}

.core_card {
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(3, 83, 126, 0.12);
	text-align: left;
	overflow: hidden;
}

.core_card figure {
	margin-bottom: 5vw;
	padding: 4vw;
	border-radius: 4px;
	border: solid 1px #dbe7ee;
	background: #fff;
	text-align: center;
}

.core_card figure img {
	max-width: 100%;
	width: auto;
	height: auto;
}

/* 自律分散AIセルの図は余白が少なく大きく見えるので、ほかの2枚に合わせて幅70%に */
.core_card:first-child figure img {
	width: 70%;
	max-width: 70%;
	max-height: none;
}

.core_card .body {
	padding: 5vw 5vw 6vw;
}

.core_card h4 {
	margin-bottom: 2vw;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.5;
	color: #0591ab;
}

.core_card p {
	margin-bottom: 4vw;
	font-size: 15px;
	line-height: 1.85;
}

.core_card .more {
	display: table;
	margin: 0 auto;
	padding: 3vw 10vw;
	border-radius: 999px;
	border: solid 1px #0591ab;
	background: #fff;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	color: #0591ab;
}

.core_overview .h3 {
	margin: 0 -5vw 8vw;
	padding: 4vw 5vw;
	background: #0591ab;
	font-size: 5.2vw;
	color: #fff;
	position: relative;
}

.core_overview .h3 br {
	display: none;
}

.core_overview .h3::after {
	content: "";
	border: solid 10px transparent;
	border-top: solid 10px #0591ab;
	transform: translateX(-50%);
	position: absolute;
	top: 100%;
	left: 50%;
}

.core_overview figure {
	margin-bottom: 5vw;
}

.core_overview img {
	width: 100%;
	height: auto;
}

.core_overview p {
	text-align: left;
	font-size: 15px;
}

/* ---------------------------------------------------------
	category
--------------------------------------------------------- */

#category {
	scroll-margin-top: 44px;
}

.cat_list {
	display: flex;
	flex-direction: column;
	gap: 2.5vw;
}

.cat_card {
	display: flex;
	align-items: center;
	gap: 4vw;
	padding: 4vw;
	border-left: solid 4px #ee7546;
	background: #fff;
	text-align: left;
	color: #1b273b;
}

.cat_icon {
	flex: 0 0 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #eef5f9;
}

.cat_icon img {
	width: 30px;
	height: 30px;
}

.cat_text {
	flex: 1;
	min-width: 0;
}

.cat_name,
.cat_name span,
.cat_desc {
	display: block;
}

.cat_name strong {
	display: block;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	color: #0591ab;
}

.cat_name span {
	font-size: 12px;
	color: #666;
}

.cat_desc {
	margin-top: 1vw;
	font-size: 12px;
	line-height: 1.6;
	color: #666;
}

/* ---------------------------------------------------------
	cat_section
--------------------------------------------------------- */

#cases {
	background: #eef5f9;
}

.cat_section {
	padding-bottom: 12vw;
}

.cat_head {
	margin-bottom: 9vw;
	padding: 7vw 5vw;
	background: #03537e;
	color: #fff;
	position: relative;
}

.cat_head::after {
	content: "";
	border: solid 10px transparent;
	border-top: solid 10px #03537e;
	transform: translateX(-50%);
	position: absolute;
	top: 100%;
	left: 50%;
}

.cat_head .container {
	display: flex;
	align-items: center;
	gap: 4vw;
	text-align: left;
}

.cat_head .cat_icon {
	flex-basis: 56px;
	width: 56px;
	height: 56px;
	background: #fff;
}

.cat_head .cat_icon img {
	width: 34px;
	height: 34px;
}

.cat_head .num {
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: #ffc9ad;
}

.cat_head h2 {
	margin-bottom: 1vw;
	font-weight: 700;
	font-size: 6.6vw;
	line-height: 1.3;
}

.cat_head p {
	font-size: 12px;
	line-height: 1.7;
}

/* ---------------------------------------------------------
	case
--------------------------------------------------------- */

.case {
	margin: 0 3vw 5vw;
	padding: 7vw 5vw;
	border-radius: 6px;
	background: #fff;
	text-align: left;
}

.case_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 3vw;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0;
}

.case_meta .no {
	padding: 3px 8px;
	background: #f35d5d;
	font-weight: 700;
	color: #fff;
}

.case_meta span {
	padding: 3px 6px;
	background: #f1f3f6;
	color: #000;
}

.case h3 {
	margin-bottom: 5vw;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.5;
	color: #4b4b4b;
}

.case .question,
.case .answer {
	padding-left: 1.8em;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.7;
	position: relative;
}

.case .question {
	margin-bottom: 2vw;
	color: #1c98c3;
}

.case .question::before {
	content: "Q";
	color: #1c98c3;
	position: absolute;
	top: 0;
	left: 0.2em;
}

.case .answer {
	margin-bottom: 7vw;
	color: #ee7546;
}

.case .answer::before {
	content: "A";
	position: absolute;
	top: 0;
	left: 0.2em;
}

.case_row {
	display: flex;
	flex-direction: column-reverse;
	gap: 6vw;
	margin-bottom: 6vw;
}

.case_fig {
	margin: 0;
}

.case_fig img {
	width: 100%;
	height: auto;
}

.case h4 {
	margin-bottom: 3vw;
	padding-left: 10px;
	border-left: solid 4px #4b4b4b;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	color: #4b4b4b;
}

.case h4.red {
	border-color: #df5656;
	color: #df5656;
}

/* 解決する手段：資料と同じ角丸の枠と STEP。スマホは幅が足りないので縦に並べて ▼ でつなぐ */
.steps {
	margin-bottom: 7vw;
}

.steps li {
	padding-top: 22px;
	text-align: center;
	position: relative;
}

.steps li + li {
	margin-top: 5vw;
}

.steps li + li::before {
	content: "";
	border: solid 7px transparent;
	border-top: solid 10px #4b4b4b;
	border-bottom: none;
	transform: translateX(-50%);
	position: absolute;
	top: calc(-5vw + 2px);
	left: 50%;
}

.steps .step {
	font-size: 13px;
	line-height: 1;
	color: #000;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.steps strong,
.steps p {
	border-left: solid 1px #4b4b4b;
	border-right: solid 1px #4b4b4b;
	background: #fff;
	color: #4b4b4b;
}

.steps strong {
	display: block;
	padding: 3.5vw 4vw 1vw;
	border-top: solid 1px #4b4b4b;
	border-radius: 10px 10px 0 0;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.5;
}

.steps p {
	padding: 0 4vw 3.5vw;
	border-bottom: solid 1px #4b4b4b;
	border-radius: 0 0 10px 10px;
	font-size: 14px;
	line-height: 1.7;
}

/* 期待できる効果：資料と同じく「1.」「2.」「3.」 */
.effects {
	counter-reset: effect;
}

.effects li {
	margin-bottom: 1.5vw;
	padding-left: 1.6em;
	font-size: 15px;
	line-height: 1.75;
	position: relative;
	color: #4b4b4b;
}

.effects li::before {
	counter-increment: effect;
	content: counter(effect) ".";
	color: #4b4b4b;
	position: absolute;
	top: 0;
	left: 0.1em;
}

.case .summary {
	padding: 4vw 4.5vw;
	border-left: solid 4px #1c98c3;
	background: #f0f8fc;
}

.case .summary p {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.75;
	color: #1c98c3;
}

.case .summary p.cta {
	margin-top: 2vw;
	font-size: 14px;
	color: #df5656;
}

.case .summary p.cta::before {
	content: "▶ ";
	font-size: 0.8em;
}

/* ---------------------------------------------------------
	back_toc
--------------------------------------------------------- */

.back_toc {
	padding-top: 3vw;
}

.back_toc a {
	display: inline-block;
	padding: 3vw 10vw;
	border-radius: 999px;
	border: solid 1px #0591ab;
	background: #fff;
	font-weight: 700;
	font-size: 14px;
	color: #0591ab;
}

.back_toc a::before {
	content: "▲ ";
	font-size: 0.8em;
}

/* ---------------------------------------------------------
	contact
--------------------------------------------------------- */

#contact_area {
	padding: 14vw 5vw 16vw;
	background: #03537e;
	color: #fff;
}

#contact_area h2 {
	margin-bottom: 4vw;
	font-weight: 700;
	font-size: 5.8vw;
	line-height: 1.5;
}

#contact_area p {
	margin-bottom: 8vw;
	text-align: left;
	font-size: 15px;
	line-height: 1.9;
}

#contact_area p br {
	display: none;
}

#contact_area a {
	display: block;
	padding: 4.5vw 0;
	border-radius: 999px;
	background: #ee7546;
	font-weight: 700;
	font-size: 17px;
	color: #fff;
}

#footer {
	margin-top: 0;
}

/* ---------------------------------------------------------
	英語向けの調整
--------------------------------------------------------- */

#wrapper,
#wrapper .tag,
#visual .label {
	letter-spacing: 0.01em;
}

#wrapper .tag,
#visual .label {
	letter-spacing: 0.2em;
}