@charset "utf-8";

.service_body {
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	font-size: 1.7rem;
	line-height: 1.75;
	counter-reset: section;
	@media screen and (max-width: 743px) {
		font-size: 1.5rem;
	}

	&::after {
		content: "";
		display: table;
		clear: both;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	p {
		margin: 0 0 0.8lh;
		&:last-child {
			margin-bottom: 0;
		}
	}
	ul,
	ol {
		margin: 0 0 0.8lh 1.3333em;
		&:last-child {
			margin-bottom: 0;
		}
	}
	ul:not([class]) {
		margin-left: 0;
		& > li {
			position: relative;
			padding-left: 2rem;
			margin-bottom: 0.5rem;
			&:last-child {
				margin-bottom: 0;
			}
			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: calc(.5lh - .5rem);
				width: 1rem;
				height: 1rem;
				border-radius: 100%;
				background-color: #ea8c25;
			}
		}
	}
	ol {
		list-style: decimal;
	}
	li > ul,
	li > ol {
		margin-bottom: 0;
	}
	h2 {
		position: relative;
		margin-top: 9rem;
		margin-bottom: 4rem;
		padding-left: 6rem;
		font-size: 3rem;
		line-height: 1.5;
		font-weight: 700;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		&::before {
			counter-increment: section;
			content: counter(section, decimal-leading-zero);
			position: absolute;
			left: 0;
			top: .2rem;
			font-size: 4rem;
			line-height: 1;
			font-family: 'Outfit';
			font-weight: 600;
			font-style: normal;
			color: #d25d16;
		}
		@media screen and (max-width: 743px) {
			margin-top: 6rem;
			margin-bottom: 3rem;
			padding-left: 5.4rem;
			font-size: 2.2rem;
			&::before {
				top: .1rem;
				font-size: 3.4rem;
			}
		}
	}

	h3 {
		position: relative;
		margin-top: 8rem;
		margin-bottom: 4rem;
		padding-left: 4rem;
		font-size: 3rem;
		line-height: 1.5;
		font-weight: 700;
		h2 + & {
			margin-top: 5rem;
		}
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		&::before {
			content: "";
			position: absolute;
			top: calc(.5lh - .2rem);
			left: 0;
			width: 3rem;
			height: .4rem;
			border-radius: .2rem;
			background-color: #e88a24;
		}
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
			margin-bottom: 2rem;
			padding-left: 3rem;
			font-size: 2.2rem;
			h2 + & {
				margin-top: 3rem;
			}
			&::before {
				top: calc(.5lh - .1rem);
				width: 2.2rem;
				height: .3rem;
			}
		}
	}

	h4 {
		position: relative;
		margin-top: 4rem;
		margin-bottom: 2rem;
		padding-left: 2rem;
		font-size: 2.2rem;
		line-height: 1.5;
		font-weight: 700;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: calc(.5lh - .5rem);
			width: 1rem;
			height: 1rem;
			border-radius: 100%;
			background-color: #ea8c25;
		}
		@media screen and (max-width: 743px) {
			margin-bottom: 1.5rem;
			padding-left: 1.5rem;
			font-size: 1.8rem;
			&::before {
				top: calc(.5lh - .3rem);
				width: .6rem;
				height: .6rem;
			}
		}
	}

	.large_text {
		position: relative;
		margin-top: 4rem;
		margin-bottom: 2rem;
		font-size: 3rem;
		line-height: 1.5;
		font-weight: 700;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		@media screen and (max-width: 743px) {
			margin-top: 3rem;
			margin-bottom: 1rem;
			font-size: 2.2rem;
		}
	}

	.medium_text {
		position: relative;
		margin-top: 3rem;
		margin-bottom: 2rem;
		font-size: 2.2rem;
		line-height: 1.5;
		font-weight: 700;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		@media screen and (max-width: 743px) {
			margin-top: 3rem;
			font-size: 1.8rem;
		}
	}

	.bg_box {
		margin-block: 4rem;
		padding: 4rem;
		background-color: #fff;
		border-radius: 1.2rem;
		font-size: 1.6rem;
		line-height: 1.75;
		&:first-child {
			margin-top: 0 !important;
		}
		&:last-child {
			margin-bottom: 0 !important;
		}
		@media screen and (max-width: 743px) {
			margin-block: 2rem;
			padding: 3rem 2rem;
			border-radius: 0.8rem;
			font-size: 1.4rem;
		}
		&.-s {
			margin-block: 2rem;
			padding-block: 3rem;
			@media screen and (max-width: 743px) {
				margin-block: 1rem;
				padding-block: 2rem;
			}
			h4 {
				margin-bottom: 1rem;
			}
		}
	}
	.border_box {
		margin-block: 4rem;
		padding: 2rem;
		border: .4rem solid #f2f4f5;
		border-radius: 1rem;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		@media screen and (max-width: 743px) {
			margin-block: 2rem;
			padding: 2rem;
			border-radius: 0.6rem;
		}

		&.actual_results {
			padding: 2.5rem;
			text-align: center;
			font-weight: 700;
			font-size: 2rem;
			line-height: 1.5;
			@media screen and (max-width: 743px) {
				padding: 1.5rem 2rem;
				font-size: 1.6rem;
			}
			strong {
				margin: 0 0.1em;
				font-size: 200%;
				font-weight: 600;
				line-height: 1;
			}
			@media screen and (min-width: 744px), print {
				dl > * {
					display: inline-block;
				}
				dd {
					margin-left: 2rem;
				}
			}
			@media screen and (max-width: 743px) {
				dd {
					margin-top: 1rem;
				}
			}
		}
		&.partner {
			.img {
				text-align: center;
			}
		}
	}
	ul.bg_list {
		margin-left: 0;
		margin-block: 3rem;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		& > li {
			margin-block: 2rem;
			padding: 2rem 4rem;
			background-color: #fff;
			border-radius: 1.2rem;
			font-weight: 500;
			&:first-child {
				margin-top: 0;
			}
			&:last-child {
				margin-bottom: 0;
			}
			@media screen and (max-width: 743px) {
				margin-block: 1rem;
				padding: 1.5rem 2rem;
				border-radius: 0.8rem;
			}
		}
	}

	.metaverse_ico {
		.item {
			display: flex;
			align-items: center;
			gap: 1.6rem;
			margin-bottom: 4rem;
			font-size: 1.6rem;
			line-height: 1.6;
			@media screen and (max-width: 743px) {
				align-items: start;
				margin-bottom: 3rem;
				font-size: 1.4rem;
			}
			&:last-child {
				margin-bottom: 0;
			}
			.ico {
				width: 9rem;
				flex-shrink: 0;
				@media screen and (max-width: 743px) {
					width: 6rem;
				}
			}
			.title {
				margin-bottom: 1rem;
				font-weight: 700;
				font-size: 2.2rem;
				line-height: 1.5;
				@media screen and (max-width: 743px) {
					font-size: 1.8rem;
				}
			}
		}
	}

	.img_right_column {
		display: flex;
		flex-direction: row-reverse;
		gap: 4rem;
		@media screen and (min-width: 744px), print {
			& > * {
				width: 100%;
			}
		}
		@media screen and (max-width: 743px) {
			flex-direction: column;
			gap: 2rem;
		}
		img {
			border-radius: 1.6rem;
			@media screen and (max-width: 743px) {
				border-radius: 0.8rem;
			}
		}
	}

	.c_orange {
		color: #d25d16;
	}

	ul.notes{
		margin-left: 0;
		&  > li {
			position: relative;
			padding-left: 1.2em;
			font-size: 1.4rem;
			line-height: 1.75;
			list-style: none;
			&::before {
				content: "※";
				position: absolute;
				top: 0;
				left: 0;
			}
			@media screen and (max-width: 743px) {
				font-size: 1.2rem;
			}
		}
	}
	ol.komenum_notes {
		margin-left: 0;
		& > li {
			position: relative;
			padding-left: 2.2em;
			font-size: 1.4rem;
			line-height: 1.75;
			list-style: none;
			.komenum {
				position: absolute;
				top: 0;
				left: 0;
			}
			@media screen and (max-width: 743px) {
				font-size: 1.2rem;
			}
		}
	}

	.img {
		margin-block: 4rem;
		@media screen and (max-width: 743px) {
			margin-block: 3rem;
		}
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
	.more {
		margin-block: 4rem;
		@media screen and (max-width: 743px) {
			margin-block: 3rem;
		}
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
	.center {
		text-align: center;
	}
	.fzs {
		font-size: 1.4rem;
		@media screen and (max-width: 743px) {
			font-size: 1.2rem;
		}
	}

	.case {
		.user {
			font-weight: 500;
		}
		.title {
			margin-bottom: 1.5rem;
			font-size: 3rem;
			line-height: 1.5;
			font-weight: 700;
			@media screen and (max-width: 743px) {
				font-size: 2.2rem;
			}
		}
	}

	.price_ex {
		display: flex;
		background-color: #fff;
		margin-bottom: 1rem;
		border: 2px solid #d25d16;
		font-weight: 700;
		color: #d25d16;
		font-size: 2rem;
		line-height: 1.5;
		@media screen and (max-width: 743px) {
			font-size: 1.6rem;
		}
		& > * {
			padding: 1rem 2rem;
			@media screen and (max-width: 743px) {
				padding: 1rem 1rem;
			}
		}
		.title {
			background-color: #d25d16;
			color: #fff;
		}
		.s {
			display: block;
			font-size: 1.4rem;
			font-weight: 400;
			@media screen and (max-width: 743px) {
				font-size: 1.1rem;
			}
		}
		.tax {
			font-size: 1.4rem;
			@media screen and (max-width: 743px) {
				font-size: 1.1rem;
			}
		}
		@media screen and (min-width: 744px), print {
			.title {
				padding-right: 4rem;
			}
		}
	}

	.btn {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 25.5rem;
		max-width: 100%;
		height: 7rem;
		background: linear-gradient(90deg, #d25d16 0%, #e88a24 100%);
		border-radius: 3.5rem;
		color: #fff;
		font-size: 1.6rem;
		font-weight: 500;
		text-align: center;
		text-decoration: none;
		box-shadow: 0 1px 3px rgba(6,11,28,.2);
		cursor: pointer;
		z-index: 2;
		@media screen and (max-width: 743px) {
			height: 5.6rem;
			font-size: 1.5rem;
		}
		&::before {
			content: "";
			position: absolute;
			top: 2px;
			left: 2px;
			right: 2px;
			bottom: 2px;
			background-color: #fff;
			border-radius: 100rem;
			opacity: 0;
			z-index: -1;
		}
		&.-pr1 {
			padding-right: 1rem;
		}
		.btn-arrow {
			position: absolute;
			top: calc(50% - 1.1rem);
			right: 2.5rem;
			width: 2.2rem;
			height: 2.2rem;
			@media screen and (max-width: 743px) {
				width: 1.8rem;
			}
			svg {
				display: block;
				fill: #fff;
				width: 100%;
				height: 100%;
			}
		}
		&.-center {
			margin-inline: auto;
		}
		&.-sp-center {
			@media screen and (max-width: 743px) {
				margin-inline: auto;
			}
		}
		@media (hover) {
			&:hover {
				color: #d25d16;
				&::before {
					opacity: 1;
				}
				&.-tab::after {
					opacity: 0;
				}
				.btn-arrow svg,
				.btn-blank svg {
					fill: #e88a24;
				}
			}
		}
	}

	.ninja {
		margin-top: 6rem;
		margin-left: 0;
		@media screen and (max-width: 743px) {
			margin-top: 4rem;
		}
		li {
			position: relative;
			min-height: 10rem;
			margin: 0;
			padding: 0;
			padding-left: 14rem;
			padding-bottom: 5rem;
			@media screen and (max-width: 743px) {
				padding-bottom: 3rem;
				padding-left: 8rem;
				font-size: 1.4rem;
			}
			&::before {
				content: "";
				position: absolute;
				top: 1rem;
				left: calc(5rem - 1px);
				bottom: -1rem;
				border-left: 2px solid #d25d16;
				z-index: -1;
				@media screen and (max-width: 743px) {
					left: calc(3rem - 1px);
				}
			}
			&:last-child {
				padding-bottom: 0;
				&::before {
					content: none;
				}
			}
			.num {
				position: absolute;
				top: 0;
				left: 0;
				width: 10rem;
				z-index: 2;
				@media screen and (max-width: 743px) {
					width: 6rem;
				}
			}
			.title {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: .3rem 1rem;
				margin-bottom: 1rem;
				font-size: 2.4rem;
				line-height: 1.5;
				font-weight: 700;
				@media screen and (max-width: 743px) {
					font-size: 1.8rem;
				}
				.category {
					padding: .5rem 1.5rem;
					background-color: #d25d16;
					border-radius: 10rem;
					font-size: 1.8rem;
					color: #fff;
					@media screen and (max-width: 743px) {
						padding: .3rem 1.2rem;
						font-size: 1.4rem;
					}
				}
			}
		}
	}

	.smart-factory {
		margin-top: 6rem;
		@media screen and (max-width: 743px) {
			margin-top: 3rem;
		}
		.before {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			gap: 1.2rem;
			padding: 3rem;
			background-color: #d2d8dc;
			border-radius: 1.2rem;
			@media screen and (max-width: 743px) {
				gap: .6rem;
				flex-wrap: wrap;
				padding: 2rem 1rem 1rem;
				border-radius: 0.8rem;
			}
			.title {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				width: fit-content;
				margin-inline: auto;
				padding-inline: 2rem;
				background-color: #1f1f3d;
				border-radius: 10rem;
				font-weight: 500;
				color: #fff;
				transform: translateY(-50%);
			}
			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 6rem;
				width: calc((100% - 1.2rem * 3) / 4);
				font-size: 1.6rem;
				line-height: 1.5;
				background-color: #fff;
				border-radius: 1rem;
				text-align: center;
				font-weight: 500;
				@media screen and (max-width: 743px) {
					height: 4rem;
					width: calc((100% - .6rem * 1) / 2);
					font-size: 1.4rem;
				}
			}
		}
		.after {
			position: relative;
			margin-top: 6rem;
			padding: 2rem;
			background-color: #d25d16;
			border-radius: 1.2rem;
			text-align: center;
			font-size: 2rem;
			line-height: 1.5;
			font-weight: 700;
			color: #fff;
			@media screen and (max-width: 743px) {
				margin-top: 4rem;
				font-size: 1.6rem;
				br {
					display: none;
				}
			}
			&::before {
				content: "";
				position: absolute;
				right: 0;
				left: 0;
				top: -4.2rem;
				width: 6.4rem;
				height: 2.4rem;
				background-color: #e88a24;
				margin-inline: auto;
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				@media screen and (max-width: 743px) {
					top: -3rem;
					width: 5rem;
					height: 2rem;
				}
			}
		}
	}

	.metaanywhere {
		margin-top: 6rem;
		@media screen and (max-width: 743px) {
			margin-top: 3rem;
		}
		.before, .after {
			position: relative;
			display: flex;
			flex-wrap: wrap;
			gap: 1.2rem;
			padding: 3rem;
			background-color: #d2d8dc;
			border-radius: 1.2rem;
			@media screen and (max-width: 743px) {
				gap: .6rem;
				flex-wrap: wrap;
				padding: 2rem 1rem 1rem;
				border-radius: 0.8rem;
			}
			.title {
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				width: fit-content;
				margin-inline: auto;
				padding-inline: 2rem;
				background-color: #1f1f3d;
				border-radius: 10rem;
				font-weight: 500;
				color: #fff;
				transform: translateY(-50%);
			}
			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 8rem;
				width: calc((100% - 1.2rem * 2) / 3);
				font-size: 1.6rem;
				line-height: 1.5;
				background-color: #fff;
				border-radius: 1rem;
				text-align: center;
				font-weight: 500;
				@media screen and (max-width: 743px) {
					height: 6rem;
					width: 100%;
					font-size: 1.4rem;
				}
			}
		}
		.after {
			margin-top: 7rem;
			background-color: #d25d16;
			@media screen and (max-width: 743px) {
				margin-top: 5rem;
			}
			&::before {
				content: "";
				position: absolute;
				right: 0;
				left: 0;
				top: -5.2rem;
				width: 6.4rem;
				height: 2.4rem;
				background-color: #e88a24;
				margin-inline: auto;
				clip-path: polygon(0 0, 100% 0, 50% 100%);
				@media screen and (max-width: 743px) {
					top: -4rem;
					width: 5rem;
					height: 2rem;
				}
			}
		}
	}
	.col2_ph,
	.col4_ph {
		margin-top: 4rem;
		display: flex;
		flex-wrap: wrap;
		@media screen and (max-width: 743px) {
			margin-top: 2rem;
		}
		.caption {
			margin-top: 1.5rem;
			text-align: center;
			@media screen and (max-width: 743px) {
				margin-top: 1rem;
			}
		}
		img {
			border-radius: 1.6rem;
			@media screen and (max-width: 743px) {
				border-radius: 0.8rem;
			}
		}
	}
	.col2_ph {
		gap: 4rem;
		.item {
			width: calc((100% - 4rem * 1) / 2);
		}
		@media screen and (max-width: 743px) {
			gap: 2rem 1rem;
			.item {
				width: 100%;
			}
		}
	}
	.col4_ph {
		gap: 4rem 2rem;
		.item {
			width: calc((100% - 2rem * 3) / 4);
		}
		@media screen and (max-width: 743px) {
			gap: 2rem 1rem;
			.item {
				width: calc((100% - 1rem * 1) / 2);
			}
		}
	}
}