@charset "UTF-8";
/*
 * works.css
 *
 */

/* !施工事例1
---------------------------------------------------------- */
.works01 {
	width:100%;
	position: relative;
	padding:0 0 0 0;
}
	.works01 img.photo01 {
		position: absolute;
		display: block;
		width:32%;
		border-radius: 4px;
		top:0;
		left:10%;
		z-index: 2;
	}
	.works01 img.photo02 {
		position: relative;
		display: block;
		width:65%;
		border-radius: 4px 0 0 4px;
		padding-top:100px;
		margin-left: 35%;
		z-index: 1;
	}

@media screen and (max-width:1039px){
.works01 {
	padding:0 0 0 0;
}
	.works01 img.photo02 {
		padding-top:70px;
	}
}

@media screen and (max-width:767px){
.works01 {
	padding:0 0 0 0;
}
	.works01 img.photo02 {
		padding-top:50px;
	}
}

/* !施工事例2
---------------------------------------------------------- */
.works02 {
	width:100%;
	padding:0 50px 0 50px;
}
	.works02 div.inner {
		width:100%;
		max-width:1400px;
		margin:0 auto;
		display: flex;
	}
		.works02 div.inner div.left {
			width:31%;
			position: relative;
			padding-top:80px;
		}
			.works02 div.inner div.left img.photo03 {
				position: relative;
				display: block;
				width:85%;
				border-radius: 4px;
				z-index: 1;
			}
			.works02 div.inner div.left img.photo04 {
				position: absolute;
				display: block;
				width:65%;
				border-radius: 4px;
				top:380px;
				right: 0;
				z-index: 2;
			}
		.works02 div.inner div.center {
			width:38%;
			margin:0 auto;
			align-self: center;
		}
		.works02 div.inner div.center h2 {
			text-align: center;
			margin-bottom: 50px;
		}
			.works02 div.inner div.center h2 span {
				font-size:22px;
				font-weight: 600;
				padding:0.6em;
				border-top:1px solid #2E363B;
				border-bottom:1px solid #2E363B;
			}
		.works02 div.inner div.center p.read {
			text-align: center;
		}
		.works02 div.inner div.right {
			width:31%;
			position: relative;
		}
			.works02 div.inner div.right img.photo05 {
				position: absolute;
				display: block;
				width:80%;
				border-radius: 4px;
				z-index: 1;
				top:-50px;
				left:0;
			}
			.works02 div.inner div.right img.photo06 {
				position: relative;
				display: block;
				width:85%;
				border-radius: 4px;
				margin-top:350px;
				margin-left:15%;
				z-index: 2;
			}

@media screen and (max-width:1039px){
.works02 {
	padding:0 30px 0 30px;
}
		.works02 div.inner div.left {
			padding-top:50px;
		}
			.works02 div.inner div.left img.photo04 {
				top:280px;
			}
		.works02 div.inner div.center h2 {
			margin-bottom: 40px;
		}
			.works02 div.inner div.center h2 span {
				font-size:19px;
			}
			.works02 div.inner div.right img.photo05 {
				top:-40px;
			}
			.works02 div.inner div.right img.photo06 {
				margin-top:200px;
			}
}
	
@media screen and (max-width:767px){
.works02 {
	padding:0 25px 70px 25px;
}
	.works02 div.inner {
		flex-wrap: wrap;
	}
		.works02 div.inner div.left {
			width:100%;
			padding-top:50px;
		}
			.works02 div.inner div.left img.photo03 {
				width:180px;
				margin-left: calc(100% - 180px);
			}
			.works02 div.inner div.left img.photo04 {
				width:120px;
				top:180px;
				right: 140px;
			}
		.works02 div.inner div.center {
			width:100%;
			margin:90px auto 80px auto;
		}
		.works02 div.inner div.center h2 {
			margin-bottom: 40px;
		}
			.works02 div.inner div.center h2 span {
				font-size:17px;
			}
		.works02 div.inner div.center p.read {
			text-align: center;
		}
		.works02 div.inner div.right {
			width:100%;
		}
			.works02 div.inner div.right img.photo05 {
				width:45%;
				z-index: 2;
				top:-40px;
				left:auto;
				right:13%;
			}
			.works02 div.inner div.right img.photo06 {
				width:200px;
				margin-top:0px;
				margin-left:0;
				z-index: 1;
			}
}

/* !施工事例3
---------------------------------------------------------- */
.works03 {
	width:100%;
	padding:0 50px 40px 50px;
	margin-top: -50px;
}
	.works03 img.photo07 {
		display: block;
		position: relative;
		width:84%;
		margin-left:-50px;
		border-radius: 0 4px 4px 0;
		z-index: 1;
	}
	.works03 ul.worksList {
		position: relative;
		width:100%;
		max-width:1240px;
		margin:0 auto 0 auto;
		display: flex;
		justify-content: space-between;
		z-index: 2;
	}
		.works03 ul.worksList li:first-child {
			width:22%;
			margin-top: -60px;
		}
		.works03 ul.worksList li:nth-child(2) {
			width:40%;
			margin-top: -160px;
		}
		.works03 ul.worksList li:nth-child(3) {
			width:30%;
			margin-top: 60px;
		}
			.works03 ul.worksList li img {
				display: block;
				width:100%;
				border-radius: 4px;
			}

@media screen and (max-width:1039px){
.works03 {
	padding:0 30px 30px 30px;
}
	.works03 img.photo07 {
		width:84%;
		margin-left:-30px;
	}
		.works03 ul.worksList li:first-child {
			margin-top: -30px;
		}
		.works03 ul.worksList li:nth-child(2) {
			margin-top: -100px;
		}
		.works03 ul.worksList li:nth-child(3) {
			margin-top: 50px;
		}
}
	
@media screen and (max-width:767px){
.works03 {
	margin-top: -30px;
	padding:0 25px 20px 25px;
}
	.works03 img.photo07 {
		width:90%;
		margin-left:-25px;
	}
		.works03 ul.worksList li:first-child {
			margin-top: -20px;
		}
		.works03 ul.worksList li:nth-child(2) {
			margin-top: -50px;
		}
		.works03 ul.worksList li:nth-child(3) {
			margin-top: 30px;
		}
}