@charset "utf-8";

h2 span{
	font-size:2.3rem;
	border-radius:0.9em;
	background:#1BA0B2;
	color:white;
	display:inline-block;
	padding:0.4em 1.5em 0.3em;
	line-height:1;
	font-weight:600;
	margin-bottom:1.5%;
}

p.supervision{
	margin-top:-3.5%;
	margin-bottom:1.5%;
}
.pointList{
	margin-bottom:4.5%;
}
.pointList dt{
	position:relative;
	margin-bottom:0.6em;
	font-weight:600;
}
.pointList dt .ph{
	border-radius:0.8em;
	border:1px solid #002B49;
	font-weight:600;
	padding:0 1em;
	margin-right:1em;
	background:white;
	position:relative;
}
.pointList dt .ph::before{
	content:"";
	display:block;
	position:absolute;
	bottom:-1px;
	left:0.8em;
	border-bottom:1px solid #002B49;
	width:700px;
	width:calc(700px - 1em);
}

.pointList dd{
	text-indent:-1em;
	padding-left:1em;
	margin-left:1em;
}

.imgList{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	align-items:flex-end;
}

.imgList > li{
	width:300px;
	text-align:center;
	margin:0 2% 3%;
}
.imgList > li h5{
	text-align:left;
	color:#EE312F;
	font-size:1.6rem;
	text-indent:-1.5em;
	padding-left:1.5em;
	margin-bottom:0.6em;
}
.imgList > li p{
	padding-left:1.5em;
	text-align:left;
	margin-bottom:0.6em;
}
.imgList > li img{
	width:auto;
	height:175px;
}
.imgListBox > p{
	text-align:center;
}

.pointImgList{
	border-radius:20px;
	border:1px solid #1BA0B2;
	padding-bottom:4%;
	margin-top:9%;
}
.pointImgList h4{
	font-size:2rem;
	line-height:1;
	background:#1BA0B2;
	color:white;
	border-radius:0.7em;
	display:inline-block;
	padding:0.3em 1em 0.2em;
	margin-left:4%;
	position:relative;
	top:-0.7em;
}

.supervisionBox{
	display:flex;
	align-items:center;
	width:700px;
	background:url(../images/cleaning/box1.png) no-repeat;
	background-size:100% 100%;
	position:relative;
}
.supervisionBox::before{
	content:"";
	display:block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:16px;
	background:url(../images/cleaning/box0.png) no-repeat;
	background-size:100%;
}
.supervisionBox::after{
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	height:16px;
	background:url(../images/cleaning/box2.png) no-repeat;
	background-size:100%;
}
.supervisionBox > p{
	margin:0 2em 0 3em;
	text-align:center;
}
.supervisionBox > p img{
	width:100%;
}
.supervisionBox > dl{
	width:830px;
	padding:2em 40px 2em 0;
}
.supervisionBox > dl dt{
	border-bottom: 1px solid #002B49;
	margin-bottom:0.6em;
}

@media screen and (max-width:768px){
	h2 span{
		font-size:1.7rem;
	}
	p.supervision{
		margin-top:-1%;
	}
	.imgListBox > p{
		text-align:left;
	}
	.imgListBox > p.txtCenter{
		text-align:center;
	}
	.imgList > li{
		width:90%;
	}
	.pointImgList{
		margin-top:4em;
	}
	.pointList dt{
	}
	.pointList dt .ph{
		position:relative;
	}
	.pointList dt .ph::before{
		display:none;
	}
	.pointList dt .pd{
		display:block;
		margin-top:0.6em;
	}
	.pointList dt::before{
		content:"";
		display:block;
		position:absolute;
		top:0.75em;
		left:0.8em;
		border-bottom:1px solid #002B49;
		width:100%;
		width:calc(100% - 1em);
	}

	
	.supervisionBox{
		display:block;
		width:100%;
		background-image:url(../images/cleaning/box1_sp.png);
	}
	.supervisionBox::before{
		height:0;
		padding-bottom:5.5459%;
		background-image:url(../images/cleaning/box0_sp.png);
	}
	.supervisionBox::after{
		height:0;
		padding-bottom:5.5459%;
		background-image:url(../images/cleaning/box2_sp.png);
	}

	.supervisionBox > p{
		margin:0 30% 3%;
		padding-top:10%;
	}
	.supervisionBox > dl{
		margin:5% 8%;
		padding:0;
		padding-bottom:10%;
		width:auto;
	}
}