/* ==========================================================================
   Page: Business
   ========================================================================== */

.business-page {
	width: 100%;
	padding-bottom: var(--cta-before-space);
}

/* ==========================================================================
   Section: Business Intro
   ========================================================================== */

.business-intro {
	--business-intro-top: 130px;
	--business-intro-content-width: 400px;
	--business-intro-gap: clamp(40px, calc((100vw - 1410px) * 0.4294 + 40px), 259px);
	--business-intro-right-space: clamp(25px, calc((100vw - 1410px) * 0.5706 + 25px), 316px);
	--business-intro-image-width: min(930px, calc(100vw - var(--business-intro-content-width) - var(--business-intro-gap) - var(--business-intro-right-space)));
	--business-intro-image-height: 580px;
	--business-intro-title-size: clamp(18px, calc(12px + 1vw), 24px);
	--business-intro-title-line-height: clamp(25.2px, calc(12px + 2.2vw), 38.4px);
	--business-intro-text-size: clamp(14px, calc(12px + 0.3333vw), 16px);
	--business-intro-text-line-height: clamp(22.4px, calc(16px + 1.0667vw), 28.8px);

	display: flex;
	align-items: center;
	gap: var(--business-intro-gap);
	min-height: var(--business-intro-image-height);
	margin-top: var(--business-intro-top);
	padding-right: var(--business-intro-right-space);
}

.business-intro__image {
	width: var(--business-intro-image-width);
	height: var(--business-intro-image-height);
	overflow: hidden;
}

.business-intro__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.business-intro__content {
	flex: 0 0 var(--business-intro-content-width);
	width: var(--business-intro-content-width);
	min-width: 0;
}

.business-intro__title {
	margin: 0;
	color: #1d1d1d;
	font-size: var(--business-intro-title-size);
	font-weight: 700;
	line-height: var(--business-intro-title-line-height);
	letter-spacing: 0;
}

.business-intro__text {
	margin: 18px 0 0;
	color: #1d1d1d;
	font-size: var(--business-intro-text-size);
	font-weight: 500;
	line-height: var(--business-intro-text-line-height);
	letter-spacing: 0;
}

@media (max-width: 1200px) {
	.business-intro {
		--business-intro-top: min(10.8333vw, 130px);
		--business-intro-content-width: min(33.3333vw, 400px);
		--business-intro-image-height: min(48.3333vw, 580px);
	}
}

@media (max-width: 600px) {
	.business-intro {
		--business-intro-top: min(1.1733vw, 14px);
		--business-intro-image-width: min(77.3333vw, 634px);
		--business-intro-image-height: min(48.2667vw, 396px);

		min-height: 0;
		padding-right: 0;
		display: block;
	}

	.business-intro__content {
		flex: none;
		width: calc(100% - 40px);
		max-width: 500px;
		margin: min(10.6667vw, 40px) auto 0;
	}

	.business-intro__text {
		margin-top: 16px;
	}
}

/* ==========================================================================
   Section: Business Service
   ========================================================================== */

.business-service {
	--business-service-top: min(18.3333vw, 220px);
	--business-service-inner-width: 1200px;
	--business-service-content-width: 440px;
	--business-service-gap: 80px;
	--business-service-image-width: 680px;
	--business-service-image-height: 500px;
	--business-service-title-size: min(3.3333vw, 40px);
	--business-service-label-size: min(1.3333vw, 16px);
	--c-lower-section-heading-title-size: var(--business-service-title-size);
	--c-lower-section-heading-label-size: var(--business-service-label-size);
	--business-service-text-size: clamp(14px, calc(12px + 0.3333vw), 16px);
	--business-service-text-line-height: 1.8;
	--business-service-text-top: min(1.6667vw, 20px);
	--business-service-details-top: min(3vw, 36px);
	--business-service-detail-height: 60px;
	--business-service-detail-gap: min(1.6667vw, 20px);
	--business-service-detail-term-width: 120px;
	--business-service-detail-size: clamp(14px, calc(12px + 0.3333vw), 16px);
	--business-service-link-top: min(4.1667vw, 50px);

	margin-top: var(--business-service-top);
}

.business-service + .business-service {
	--business-service-top: min(12.5vw, 150px);
}

.business-service__inner {
	display: grid;
	grid-template-columns: var(--business-service-content-width) var(--business-service-image-width);
	column-gap: var(--business-service-gap);
	width: var(--business-service-inner-width);
	margin-inline: auto;
}

.business-service__content {
	padding-top: min(1.25vw, 15px);
}

.business-service__text {
	margin: var(--business-service-text-top) 0 0;
	color: #1d1d1d;
	font-size: var(--business-service-text-size);
	font-weight: 400;
	line-height: var(--business-service-text-line-height);
	letter-spacing: 0;
}

.business-service__details {
	display: grid;
	row-gap: var(--business-service-detail-gap);
	width: 100%;
	min-width: 0;
	margin: var(--business-service-details-top) 0 0;
}

.business-service__detail {
	display: grid;
	grid-template-columns: var(--business-service-detail-term-width) minmax(0, 1fr);
	width: 100%;
	min-width: 0;
	min-height: var(--business-service-detail-height);
	margin: 0;
	border: 1px solid var(--color-link-blue);
}

.business-service__detail-term {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding-block: 12px;
	color: #fff;
	background: var(--color-link-blue);
	font-size: var(--business-service-detail-size);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
}

.business-service__detail-desc {
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 12px min(1.6667vw, 20px);
	color: var(--color-link-blue);
	font-size: var(--business-service-detail-size);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
}

.business-service__detail-desc-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.business-service__link {
	--c-more-link-icon-size: min(2.8333vw, 34px);
	--c-more-link-font-size: clamp(13px, 1.3333vw, 16px);

	display: flex;
	width: fit-content;
	margin-top: var(--business-service-link-top);
}

.business-service__image {
	width: var(--business-service-image-width);
	height: var(--business-service-image-height);
	overflow: hidden;
}

.business-service__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

@media (max-width: 1200px) {
	.business-service {
		--business-service-side-gutter: min(3.125vw, 50px);
		--business-service-gap: clamp(24px, 4vw, 50px);
		--business-service-image-width: clamp(350px, 58.3333vw, 680px);
		--business-service-image-height: calc(var(--business-service-image-width) * 0.7353);
		--business-service-detail-term-width: 120px;
	}

	.business-service__inner {
		grid-template-columns: minmax(0, calc(100% - var(--business-service-image-width) - var(--business-service-gap))) var(--business-service-image-width);
		width: min(calc(100% - (var(--business-service-side-gutter) * 2)), var(--business-service-inner-width));
	}
}

@media (max-width: 600px) {
	.business-service {
		--business-service-top: min(18.6667vw, 70px);
		--business-service-text-size: 16px;
		--business-service-text-top: 14px;
		--business-service-details-top: 24px;
		--business-service-detail-height: 60px;
		--business-service-detail-gap: 20px;
		--business-service-detail-term-width: 100px;
		--business-service-detail-size: 14px;
		--business-service-link-top: 22px;
	}

	.business-service + .business-service {
		--business-service-top: min(25.6vw, 96px);
	}

	.business-service__inner {
		display: block;
		width: calc(100% - 40px);
		max-width: 500px;
	}

	.business-service__content {
		padding-top: 0;
	}

	.business-service__text {
		line-height: 1.8;
	}

	.business-service__detail {
		grid-template-columns: var(--business-service-detail-term-width) minmax(0, 1fr);
	}

	.business-service__detail-desc {
		padding: 0 12px;
	}

	.business-service__link {
		--c-more-link-icon-size: 34px;
		--c-more-link-font-size: 13px;
	}

	.business-service__image {
		width: 100%;
		height: auto;
		aspect-ratio: 680 / 500;
		margin-top: 28px;
	}

}