@charset "UTF-8";

/*================================================

　メインビジュアル

=================================================*/
@media screen and (max-width: 767px) {

	.mainvisual-text {
		width: 20.5%;
	}

}

/*================================================

　service

=================================================*/
.service {
	position: relative;
	max-width: 1280px;
	margin: -100px auto 0;
	padding: 100px 3.115625% 0;
	z-index: 9;
}
.service-inner {
	position: relative;
	margin: 25px 0;
	padding: 6px 2.586207% 2.727273%;
	border: 10px solid #00a0e9;
	border-radius: 29px;
}
.service-inner h2 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0 0 8px;
	color: #00A0E9;
	text-align: center;
	font-size: clamp(2rem, (100vw - 375px) * 7 / 905 + 20px, 2.7rem);
	font-weight: 600;
	border-bottom: 1px dotted #000;
}
.service-inner h2 span {
	padding: 0 5px;
}
.service-inner-box {
	padding: 3.636364% 2.727273% 0;
}
.service-inner-box h3 {
	margin: 0;
	padding: 0 0 10px;
	color: #00A0E9;
	text-align: center;
	font-size: clamp(3rem, (100vw - 1080px) * 8 / 200 + 30px, 3.8rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	border-bottom: 3px solid #00A0E9;
}
.service-inner-box p {
	margin: 10px 0 0;
	padding: 0 10px;
	font-size: clamp(1.2rem, (100vw - 375px) * 5 / 905 + 12px, 1.7rem);
	line-height: 1.7;
	letter-spacing: 0.05em;
}
.service-inner-example {
	width: 63.802752%;
	margin: 30px auto 0;
	padding: 0;
	color: #00A0E9;
}
.service-inner-example ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	color: #00A0E9;
}
.service-inner-example ul li {
	width: 48.5%;
	margin: 0 0 2.173913%;
}
.kaizen .service-inner-box p {
	margin: 3.181818% 0 0 4.454545%;
}

.kaizen figure:nth-of-type(1) {
	position: absolute;
	right: 10%;
	bottom: 0;
	width: 36.636364%;
}

.dx .service-inner-box ul {
	margin: 20px 0 0;
	padding: 0 0 0 7.692308%;
	color: #00A0E9;
}
.dx .service-inner-box ul li {
	position: relative;
	margin: 12px 0 0;
	padding: 0 0 0 3%;
	font-size: clamp(1.2rem, (100vw - 375px) * 5 / 905 + 12px, 1.7rem);
}
.dx .service-inner-box ul li::before {
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	content: '';
	width: 2.3%;
	height: 21px;
	background: url("../images/service/service_list_icon01.svg") center center / 100% auto no-repeat;
	transform: translateY(-50%);
}
.dx figure:nth-of-type(1) {
	position: absolute;
	left: 2%;
	bottom: 1.272727%;
	width: 11.818182%;
}
.dx figure:nth-of-type(2) {
	position: absolute;
	bottom: 10.5%;
	right: 2.454545%;
	width: 15.454545%;
}

.oa figure:nth-of-type(1) {
	position: absolute;
	top: 1.851852%;
	left: 0.454545%;
	width: 15%;
}
.oa figure:nth-of-type(2) {
	position: absolute;
	bottom: 0.54545455%;
	right: 1.818182%;
	width: 17%;
}
.oa .service-inner-box {
	padding: 10px 2.727273% 0 15%;
}
.oa .service-inner-box ul {
	display: flex;
	margin: 20px 0 0;
	padding: 0;
}
.oa .service-inner-box ul li {
	margin: 0 25px 0 0;
}

.oa .service-inner-example {
	width: 62%;
	margin: 30px auto 0;
	padding: 0;
	color: #00A0E9;
}
.oa .service-inner-example ul {
	display: block;
	margin: 5.131965% 0 4.727273%;
	padding: 0;
	text-align: center;
}
.oa .service-inner-example ul li {
	width: 100%;
	margin: 2.932551% auto 0;
	padding: 0 0 10px;
	color: #00A0E9;
	font-size: clamp(2.6rem, (100vw - 1080px) * 12 / 200 + 26px, 3.8rem);
	font-weight: 600;
	border-bottom: 3px solid #00A0E9;
}

@media screen and (max-width: 1080px) {

	.service-inner-box h3 {
		font-size: clamp(2rem, (100vw - 768px) * 10 / 312 + 20px, 3rem);
	}
	.dx .service-inner-box ul {
		margin: 20px 0 0;
		padding: 0 7.692308%;
	}
	.dx .service-inner-box ul li::before {
		height: 21px;
	}
	.dx figure:nth-of-type(1) {
		position: absolute;
		left: 2%;
		bottom: 1.272727%;
		width: 11.818182%;
	}
	.dx figure:nth-of-type(2) {
		position: absolute;
		bottom: 10.5%;
		right: 2.454545%;
		width: 15.454545%;
	}

	.kaizen .service-inner-box p {
		margin: 3.181818% 0 0;
	}
	.kaizen figure:nth-of-type(1) {
		right: 5%;
		width: 36.636364%;
	}

	.oa .service-inner-example ul li {
		font-size: clamp(2rem, (100vw - 768px) * 6 / 312 + 20px, 2.6rem);
	}

}

@media screen and (max-width: 767px) {

	.service-inner {
		border: 6px solid #00a0e9;
	}
	.service-inner-box h3 {
		padding: 0 0 5px;
		line-height: 1.5;
	}

	.service-inner-example ul {
		justify-content: center;
	}
	.service-inner-example ul li {
		width: 75%;
	}

	.dx .service-inner-box ul {
		margin: 20px 0 0;
		padding: 0 10px;
	}
	.dx .service-inner-box ul li {
		padding: 0 0 0 18px;
		line-height: 1.4;
	}
	.dx .service-inner-box ul li::before {
		top: 0.2em;
		width: 14px;
		height: 14px;
		transform: none;
	}
	.dx figure:nth-of-type(1) {
		left: 2%;
		bottom: 1.272727%;
		width: 18%;
	}
	.dx figure:nth-of-type(2) {
		bottom: 10.5%;
		right: 2%;
		width: 22%;
	}

	.service-inner.kaizen {
		padding: 6px 2.586207% 0;
	}
	.kaizen .service-inner-box p {
		margin: 3.181818% 0 0;
	}
	.kaizen figure:nth-of-type(1) {
		position: relative;
		left: 50%;
		width: 80%;
		text-align: center;
		transform: translateX(-50%);
	}

	.oa figure:nth-of-type(1) {
		float: left;
		position: static;
		width: 25%;
		margin-left: 15%;
	}
	.oa figure:nth-of-type(2) {
		float: right;
		position: static;
		width: 25%;
		margin-top: 5%;
		margin-right: 15%;
	}
	.oa .service-inner-box {
		padding: 10px 2.727273% 0;
	}
	.oa .service-inner-box ul {
		justify-content: center;
		flex-wrap: wrap;
		margin: 0 auto;
	}
	.oa .service-inner-box ul li {
		width: 80%;
		margin: 20px 0 0;
		text-align: center;
	}
	.oa .service-inner-example {
		width: 90%;
	}
	.oa .service-inner-example ul li {
		width: 90%;
		font-size: clamp(1.4rem, (100vw - 375px) * 6 / 392 + 14px, 2rem);
	}
	
}