/* ---------------------------------------------------------------
start service CSS
--------------------------------------------------------------- */

/* --------------- service --------------- */

.col_ttl.service {
	background-image: url(../img/service/bg_pagettl.jpg);
}

.col_ttl.service .ttl .ja {
	padding-right: 270px;
}

.col_service1 {
	width: 90%;
	max-width: 990px;
	margin: 0px auto 83px;
	padding: 73px 0px 0px 0;
	font-size: 15px;
	font-weight: 350;
	line-height: 30px;
}

dl.lead_service1 {
	margin: 0 0 80px;
	padding: 0;
	text-align: center;
}

dl.lead_service1 dt {
	margin: 0 0 25px;
	padding: 0;
	font-size: 22px;
	line-height: 36px;
	font-weight: 700;
}

dl.lead_service1 dt h2 {
	font-size: inherit;
}

dl.lead_service1 dd {
	margin: 0;
	padding: 0;
	line-height: 30px;
}

.col_service1 .box1_service {
	margin: 0 175px 30px 0;
	padding: 60px 100px 40px;
	background-color: #f4f5f5;
	position: relative;
}

.col_service1 .box1_service .ttl {
	margin: 0 0 40px;
	font-size: 22px;
	font-weight: bold;
	display: flex;
	align-items: center;
}

.col_service1 .box1_service .ttl h3 {
	font-size: inherit;
}

.col_service1 .box1_service .ttl .icon1 {
	width: 58px;
	margin-right: 25px;
}

.col_service1 .box1_service .ttl .icon2 {
	width: 63px;
	margin-right: 25px;
}

.col_service1 .box1_service .ttl .icon3 {
	width: 58px;
	margin-right: 25px;
}

.col_service1 .box1_service .ttl .icon4 {
	width: 100px;
	margin-right: 25px;
}

.col_service1 .box1_service .border {
	width: 25px;
	padding: 0px 0 30px;
	border-top: solid 2px #d20011;
}

.col_service1 .box1_service .txt {
	max-width: 450px;
}

.col_service1 .box1_service .img {
	width: 100%;
	max-width: 360px;
	position: absolute;
	right: -175px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.col_service1 .box1_service:nth-child(odd) {
	margin: 0 0 30px 175px;
	padding: 60px 70px 40px 295px;
}

.col_service1 .box1_service:nth-child(odd) .img {
	left: -175px;
}

.col_service1 .box1_service:last-child {
	padding: 60px 70px 90px 295px;
}

/* ---------------------------------------------------------------
start max 1030px
--------------------------------------------------------------- */

@media print,screen and ( max-width: 1030px ) {

	.col_service1 .box1_service,
	.col_service1 .box1_service:nth-child(odd) {
		padding: 60px 5% 40px;
	}

	.col_service1 .box1_service .txt {
		max-width: 100%;
		width: 77%;
	}

	.col_service1 .box1_service .img {
		max-width: 300px;
	}

	.col_service1 .box1_service:nth-child(odd) .ttl {
		width: 77%;
		max-width: 100%;
		margin-left: auto;
	}

	.col_service1 .box1_service:nth-child(odd) .border {
		margin-left: 23%;
	}

	.col_service1 .box1_service:nth-child(odd) .txt {
		margin-left: auto;
	}



}

/* ---------------------------------------------------------------
end max 1030px
--------------------------------------------------------------- */
/* ---------------------------------------------------------------
start max 850px
--------------------------------------------------------------- */

@media print,screen and ( max-width: 850px ) {

	.col_service1 {
		width: 100%;
	}

	dl.lead_service1 {
		width: 90%;
		margin: 0 auto 50px;
	}

	.col_service1 .box1_service,
	.col_service1 .box1_service:nth-child(odd) {
		margin: 0 auto 230px;
		padding: 60px 5% 200px;
	}

	.col_service1 .box1_service .ttl {
		display: flex;
		flex-direction: column;
	}

	.col_service1 .box1_service .ttl .icon1,
	.col_service1 .box1_service .ttl .icon2,
	.col_service1 .box1_service .ttl .icon3,
	.col_service1 .box1_service .ttl .icon4 {
		margin: 0 0 10px 0;
	}

	.col_service1 .box1_service .border,
	.col_service1 .box1_service:nth-child(odd) .border {
		margin: 0 auto;
	}

	.col_service1 .box1_service .txt {
		width: 100%;
	}


	.col_service1 .box1_service .img,
	.col_service1 .box1_service:nth-child(odd) .img {
		width: 90%;
		max-width: 460px;
		position: absolute;
		left: 50%;
		top: auto;
		bottom: -180px;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}

	.col_service1 .box1_service:nth-child(odd) .ttl {
		width: 100%;
	}

}

/* ---------------------------------------------------------------
end max 850px
--------------------------------------------------------------- */
/* ---------------------------------------------------------------
start max 700px
--------------------------------------------------------------- */

@media print,screen and ( max-width: 700px ) {

	.col_ttl.service {
		height: 160px;
		background-image: url(../img/service/sp/bg_pagettl.jpg);
	}

	.col_ttl.service .ttl .ja {
		padding-right: 60px;
	}

	.col_service1 {
		width: 100%;
		padding: 33px 0px 0px 0;
	}

	dl.lead_service1 dt {
		margin: 0 0 12px;
		font-size: 18px;
	}

	.col_service1 .box1_service,
	.col_service1 .box1_service:nth-child(odd) {
		margin: 0 auto 205px;
		padding: 42px 5% 230px;
	}

	.col_service1 .box1_service .ttl {
		margin: 0 0 30px;
		font-size: 18px;
	}

	.col_service1 .box1_service .img,
	.col_service1 .box1_service:nth-child(odd) .img {
		bottom: -150px;
	}

	.col_service1 .box1_service:last-child {
		margin-bottom: 290px;
	}

}

/* ---------------------------------------------------------------
end max 700px
--------------------------------------------------------------- */
/* ---------------------------------------------------------------
start max 450px
--------------------------------------------------------------- */

@media print,screen and ( max-width: 450px ) {

	.col_service1 .box1_service,
	.col_service1 .box1_service:nth-child(odd) {
		margin: 0 auto 55px;
		padding: 42px 5%;
	}

	.col_service1 .box1_service .txt {
		padding-bottom: 30px;
	}

	.col_service1 .box1_service .img,
	.col_service1 .box1_service:nth-child(odd) .img {
		width: 100%;
		position: unset;
		transform: translateX(0%);
		-webkit-transform: translateX(0%);
		-ms-transform: translateX(0%);
	}

}

/* ---------------------------------------------------------------
end max 450px
--------------------------------------------------------------- */
