@charset "utf-8";
#main{
	background-color: #9998982e;
}
.serviceCol .futura{
	font-size: 1.7rem;
    letter-spacing: 0;
    text-align: center;
	line-height: 1.3;
	margin: 30px 0;
}
.text{
		position: relative;
    overflow: hidden;
    padding: 0 0 30px 0;
}
.text:after{
 content: "";
    position: absolute;
    top: 0;
    right: -50px;
    width: 80%;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    border-radius: 50%; 
}
.text img{
	width: 80%;
    margin: auto;
    display: block;
	z-index: 1;
    position: sticky;
}
.text p{
	z-index: 1;
    position: sticky;
	margin: 20px auto;
}
.imgErea{
    position: relative;
    height: 250px;
    margin: 0 auto 50px;
}
.imgErea img{
	width: 48%;
	position: absolute
}
.imgErea img:first-child{
	top: 0;
	left: 0;
}
.imgErea img:last-child{
	bottom: 0;
	right: 0;
}
@media screen and (max-width: 768px) {
	.keyBox{
		background-image: url("../images/key/service.png");
	}
}
@media screen and (min-width: 769px) {
	.keyBox{
		background-image: url("../images/key/service_pc.png");
	}
	#renove .flexboxPC, #gaikou .flexboxPC, #owner .flexboxPC{
		flex-direction: row-reverse;
	}
	section .flexboxPC{
		width: 1100px;
		margin: auto;
	}
	.serviceCol .futura{
		font-size: 2.2rem;
		margin: 70px 0;
	}
	.imgErea{
		width: 45%;
		margin: 0;
	}
	.text {
		width: 55%;
        margin: 0;
		overflow: unset;	
	}
	.text img{
		width: 80%;
    margin: 30px 0 20px;
	}
	.text:after{
	left: -50px;
    width: 90%;	
	}
	.text p{
		margin: 0 0 0 300px;
		line-height: 2.1;
	}
	.imgErea img:first-child{
		top: 30px;
    left: 50px;
	}
	.imgErea img:last-child{
		bottom: -250px;
    right: 0;
	}
	section .flexboxPC{
		margin: 70px auto 150px;
	}
	#new .text img{
		
	}
	#renove .flexboxPC .text:after, #gaikou .flexboxPC .text:after, #owner .flexboxPC .text:after {
		left: 150px;
	}
	#renove .text img{
		margin: -70px 0 0 30%;
	}
	#renove .text p{
		margin: 0;
	}
	#reform .text img{
		width: 90%;
    margin: -70px 0 30px 10%;
	}
	#gaikou .text img{
		width: 85%;
        margin: -30px 0 20px 100px;
	}
	#gaikou .text p{
		margin: 0;
	}
	#kaitai .text img{
		width: 90%;
        margin: -50px 0 0;
	}
	#owner .text img{
		margin: -30px 0 20px 50px;
	}
	#owner .text p{
		margin: 0 0 0 200px;
	}
}