/**
 * 事業内容（page-business.php）用スタイル
 * エミオテクノロジーの強み・リード・一貫生産体制・事業内容詳細セクション
 *
 * @package emio-techno
 */

/* エミオテクノロジーの強みセクション */
.business-strengths {
	max-width: 100%;
	padding: 80px 20px 100px;
	margin-top: 48px;
	background-image: url("../img/bg-top-business.png");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.business-strengths__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.business-strengths__title {
	position: relative;
	margin: 0 0 40px;
	padding-bottom: 12px;
	font-size: 28px;
	font-size: 1.75rem;
	font-weight: 700;
	color: #0f3193;
	line-height: 1.3;
	text-align: center;
}

.business-strengths__title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 120px;
	height: 3px;
	background: linear-gradient(90deg, #ffbb5c 0%, rgba(255, 187, 92, 0.6) 100%);
	border-radius: 2px;
}

.business-strengths__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.business-strengths__card {
	padding: 32px 24px;
	background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(15, 49, 147, 0.1);
	text-align: center;
}

.business-strengths__icon {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	object-fit: contain;
}

.business-strengths__card-title {
	margin: 0 0 16px;
	padding-bottom: 12px;
	font-size: 18px;
	font-size: 1.125rem;
	font-weight: 700;
	color: #0f3193;
	line-height: 1.4;
	text-align: center;
	border-bottom: 1px solid #e5e9f0;
}

.business-strengths__card-desc {
	margin: 0;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #222222;
	text-align: left;
}

.page-business__lead {
	margin: 0 0 48px;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.9;
	color: #222222;
	text-align: center;
}

/* 一貫生産体制セクション */
.business-flow {
	margin: 0 -20px 64px;
	padding: 0;
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 16px rgba(15, 49, 147, 0.08);
	overflow: hidden;
}

.business-flow__title {
	margin: 0;
	padding: 16px 24px;
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 700;
	color: #0f3193;
	line-height: 1.3;
	text-align: left;
	background-image: url("../img/bg-top-business.png");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 8px 8px 0 0;
}

.business-flow__list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 0;
	margin: 0;
	padding: 32px 24px 40px;
	list-style: none;
	background-color: #ffffff;
}

.business-flow__item {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
}

/* とがった部分の上に乗せる矢印（steps 1–4のみ）Vector.svg 角度準拠 */
.business-flow__arrow {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	z-index: 2;
	pointer-events: none;
}

.business-flow__arrow svg {
	width: 24px;
	height: 24px;
	display: block;
}

/* 右向き五角形：左が平坦、右が尖る（step1のみ） */
.business-flow__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-width: 100px;
	padding: 24px 24px 24px 20px;
	background-image: linear-gradient(rgba(255, 255, 255, 0.35), rgba(232, 244, 252, 0.4)), url("../img/bg-top-business.png");
	background-size: 180% 180%;
	background-repeat: no-repeat;
	gap: 12px;
}

/* Vector.svg の形を参考：左へこみ(19.4% 50%)・右とがり(100% 50%) */
/* Step1: 左平坦・右とがり */
.business-flow__step--1 {
	background-position: 0% 0%;
	clip-path: polygon(0 0, 80.9% 0, 100% 50%, 80.9% 100%, 0 100%);
}

/* Steps 2–4: 左へこみ・右とがり（Vector.svgと同じ比率） */
.business-flow__step--2,
.business-flow__step--3,
.business-flow__step--4 {
	clip-path: polygon(0 0, 80.9% 0, 100% 50%, 80.9% 100%, 0 100%, 19.4% 50%);
}

.business-flow__step--2,
.business-flow__step--3,
.business-flow__step--4,
.business-flow__step--5 {
	margin-left: -19.4%;
}

.business-flow__step--2 {
	background-position: 50% 0%;
}

.business-flow__step--3 {
	background-position: 100% 50%;
}

.business-flow__step--4 {
	background-position: 0% 100%;
}

/* Step5: 左へこみ・右平坦 */
.business-flow__step--5 {
	background-position: 100% 100%;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 19.4% 50%);
}

.business-flow__icon {
	display: block;
	width: 100px;
	height: 100px;
	object-fit: contain;
}

.business-flow__label {
	margin: 0;
	font-size: 14px;
	font-size: 1.2rem;
	font-weight: 700;
	color: #0f3193;
	line-height: 1.3;
	text-align: center;
}

/* 事業内容詳細セクション（プリント基板実装・電子機器組立・検査・評価） */
.business-detail {
	position: relative;
	max-width: 100%;
	padding: 80px 20px 120px;
	background-image: url("../img/bg-top-business.png");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.business-detail__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.business-detail__block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px 64px;
	align-items: start;
	margin-bottom: 64px;
	background-color: #ffffff;
}

.business-detail__block:last-child {
	padding-bottom: 0;
}

.business-detail__content {
	order: 1;
	padding: 24px 0 24px 16px;
}

.business-detail__image-wrap {
	order: 2;
}

/* section-title テンプレート使用時もフォントサイズは24pxのまま */
.business-detail__content .business-detail__title {
	margin: 0 0 16px;
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: 700;
	color: #0f3193;
	line-height: 1.3;
}

.business-detail__desc {
	margin: 0 0 20px;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.8;
	color: #222222;
}

.business-detail__keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.business-detail__image {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
