/**
 * Service page styles.
 */

.service-solution,
.service-option,
.service-model,
.service-detail {
	position: relative;
	overflow: visible;
}

.service-solution .deco-bg-group__inner,
.service-option .deco-bg-group__inner,
.service-model .deco-bg-group__inner,
.service-detail .deco-bg-group__inner {
	position: relative;
	overflow: visible;
}

.service-solution .deco-bg-group__inner::before,
.service-solution .deco-bg-group__inner::after,
.service-option .deco-bg-group__inner::before,
.service-option .deco-bg-group__inner::after,
.service-model .deco-bg-group__inner::before,
.service-model::after,
.service-detail .deco-bg-group__inner::before,
.service-detail .deco-bg-group__inner::after {
	position: absolute;
	content: "";
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.service-solution .deco-bg-group__inner::before,
.service-option .deco-bg-group__inner::before,
.service-model .deco-bg-group__inner::before,
.service-detail .deco-bg-group__inner::before {
	background-size: 100% 100%;
}

.service-solution > *,
.service-option > *,
.service-model > *,
.service-detail > *,
.service-solution .deco-bg-group__inner > *,
.service-option .deco-bg-group__inner > *,
.service-model .deco-bg-group__inner > *,
.service-detail .deco-bg-group__inner > * {
	position: relative;
	z-index: 2;
}

.service-solution .deco-bg-group__inner::before {
	right: auto;
	left: calc(100% - 1293px);
	bottom: -60px;
	z-index: 1;
	width: 1293px;
	aspect-ratio: 1293 / 58;
	background-image: url("../../img/service-solution_text.svg");
}

.service-solution .deco-bg-group__inner::after {
	right: 1%;
	bottom: 28%;
	z-index: 1;
	width: clamp(120px, 14vw, 176px);
	aspect-ratio: 176 / 337;
	background-image: url("../../img/service-solution_deco.svg");
}

.service-option .deco-bg-group__inner::before {
	bottom: -7px;
	left: 0;
	z-index: 1;
	width: 1148px;
	aspect-ratio: 1148 / 58;
	background-image: url("../../img/service-option_text.svg");
}

.service-option .deco-bg-group__inner::after {
	top: 8%;
	right: -14px;
	z-index: 1;
	width: clamp(120px, 16vw, 205px);
	aspect-ratio: 205 / 479;
	background-image: url("../../img/service-option_deco.svg");
}

.service-model::after {
	top: -7%;
	right: 0;
	z-index: 1;
	width: clamp(220px, 30vw, 549px);
	aspect-ratio: 549 / 410;
	background-image: url("../../img/service-model_deco.svg");
}

.service-model .deco-bg-group__inner::before {
	right: auto;
	left: calc(100% - 1551px);
	bottom: -60px;
	z-index: 1;
	width: 1551px;
	aspect-ratio: 1551 / 80;
	background-image: url("../../img/service-model_text.svg");
}

.service-detail .deco-bg-group__inner::before {
	bottom: -1.2%;
	left: 0;
	z-index: 1;
	width: 802px;
	aspect-ratio: 802 / 80;
	background-image: url("../../img/service-detail_text.svg");
}

.service-detail .deco-bg-group__inner::after {
	top: -72px;
	right: 2%;
	z-index: 1;
	width: clamp(180px, 24vw, 535px);
	aspect-ratio: 535 / 275;
	background-image: url("../../img/service-detail_deco.svg");
}

@media (max-width: 767px) {
	.service-development-card-list {
		gap: 48px !important;
		--wp--style--block-gap: 48px;
	}

	.service-solution .deco-bg-group__inner::before,
	.service-option .deco-bg-group__inner::before,
	.service-model .deco-bg-group__inner::before,
	.service-detail .deco-bg-group__inner::before {
		display: none !important;
		content: none !important;
	}

	.service-solution .deco-bg-group__inner::after {
		top: -78px;
		right: -4%;
		bottom: auto;
		width: 116px;
	}

	.service-option .deco-bg-group__inner::after {
		top: -54px;
		right: -12%;
		width: 128px;
	}

	.service-model::after {
		top: -72px;
		right: -7%;
		width: 220px;
	}

	.service-detail .deco-bg-group__inner::after {
		top: -64px;
		right: -4%;
		width: 190px;
	}

	.service-detail-button-sp .wp-block-button__link,
	.wp-block-button.service-detail-button-sp .wp-block-button__link {
		height: 54px !important;
		padding-right: 28px !important;
		padding-left: 28px !important;
		font-size: 14px !important;
		white-space: nowrap;
	}

	.service-detail-button-sp.wp-block-buttons,
	.wp-block-buttons.service-detail-button-sp {
		justify-content: center !important;
	}

	.wp-block-button.service-detail-button-sp {
		text-align: center;
	}

	.service-detail-image-sp {
		width: 86%;
		margin-right: auto !important;
		margin-left: auto !important;
	}

	.service-detail-image-sp img {
		width: 100%;
	}

	.vision-card-list > .wp-block-columns:nth-of-type(2) > .wp-block-column:nth-child(1) {
		margin-left: 42px !important;
	}

	.vision-card-list > .wp-block-columns:nth-of-type(2) > .wp-block-column:nth-child(2) {
		margin-left: 0 !important;
	}
}