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

/* !電気設備工事事業
---------------------------------------------------------- */
.service01 {
	width:100%;
	padding:0 50px 100px 50px;
}
	.service01 div.titArea {
		position: relative;
		width:100%;
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		padding-left: 5%;
		margin-bottom: 220px;
	}
		.service01 div.titArea img {
			position: relative;
			display: block;
			width:90%;
			height: 530px;
			object-fit: cover;
			border-radius: 6px 0 0 6px;
			margin-right: -50px;
			z-index: 1;
		}
		.service01 div.titArea div.titBox {
			position: absolute;
			width:500px;
			padding:40px 60px;
			background: #FFF;
			border-radius: 4px;
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
			z-index: 2;
			bottom:-150px;
			left:0;
		}
			.service01 div.titArea div.titBox p.enTit {
				font-size:16px;
				font-weight: 600;
				color: #007EC0;
				letter-spacing: 0.04em;
				position: relative;
				padding-left:16px;
			}
				.service01 div.titArea div.titBox p.enTit:before {
					position: absolute;
					content:"";
					width:5px;
					height: 5px;
					background: #FDD000;
					border-radius: 50%;
					top:47%;
					left:0;
				}
				.service01 div.titArea div.titBox h2 {
					font-size:40px;
					font-weight: 600;
					line-height: 1.6;
					margin-bottom: 40px;
				}
				.service01 div.titArea div.titBox h3 {
					font-size:26px;
					font-weight: 600;
					line-height: 1.6;
					color: #004E8A;
				}
	.service01 div.inner {
		width:100%;
		max-width:1240px;
		margin: 0 auto;
	}
		.service01 div.inner p.read {
			font-size:18px;
			margin-bottom: 80px;
		}
		.service01 div.inner h3 {
			text-align: center;
			margin-bottom: 50px;
		}
			.service01 div.inner h3 span {
				font-size:22px;
				font-weight: 600;
				padding:0.6em;
				border-top:1px solid #2E363B;
				border-bottom:1px solid #2E363B;
			}
		.service01 div.inner ul.flow {
			width:780px;
			height: 210px;
			display: flex;
			margin: 0 auto;
		}
			.service01 div.inner ul.flow li {
				height: 210px;
			}
			.service01 div.inner ul.flow li.step {
				width:10%;
			}
				.service01 div.inner ul.flow li.step p {
					width:100%;
					height: 100%;
					font-size:22px;
					color: #004E8A;
					writing-mode: vertical-rl;
					text-align: center;
					line-height: 3.3;
					border:1px solid #99B8D0;
				}
			.service01 div.inner ul.flow li.arrow {
				width:8%;
			}
				.service01 div.inner ul.flow li.arrow span {
					position: relative;
					display: block;
					width:32px;
					height: 32px;
					background: #EFF7FC;
					border-radius: 50%;
					top:50%;
					margin: -16px auto 0 auto;
				}
					.service01 div.inner ul.flow li.arrow span:before {
						position: absolute;
						content:"";
						width: 0;
						height: 0;
						border-style: solid;
						border-top: 6px solid transparent;
						border-bottom: 6px solid transparent;
						border-left: 10px solid #FDD000;
						border-right: 0;
						top:10px;
						left:12px;
					}

@media screen and (max-width:1039px){
.service01 {
	padding:0 30px 80px 30px;
}
	.service01 div.titArea {
		margin-bottom: 180px;
	}
		.service01 div.titArea img {
			height: 360px;
			margin-right: -30px;
		}
		.service01 div.titArea div.titBox {
			width:400px;
			padding:30px 40px;
			bottom:-120px;
		}
			.service01 div.titArea div.titBox p.enTit {
				font-size:15px;
			}
				.service01 div.titArea div.titBox h2 {
					font-size:34px;
					margin-bottom: 30px;
				}
				.service01 div.titArea div.titBox h3 {
					font-size:22px;
				}
		.service01 div.inner p.read {
			font-size:16px;
			margin-bottom: 60px;
		}
			.service01 div.inner h3 span {
				font-size:20px;
			}
		.service01 div.inner ul.flow {
			width:710px;
			height: 210px;
		}
			.service01 div.inner ul.flow li {
				height: 190px;
			}
				.service01 div.inner ul.flow li.step p {
					font-size:20px;
					line-height: 3.4;
				}

}

@media screen and (max-width:767px){
.service01 {
	padding:0 25px 70px 25px;
}
	.service01 div.titArea {
		padding-left: 0;
		margin-bottom: 180px;
	}
		.service01 div.titArea img {
			width:100%;
			height: 200px;
			object-fit: cover;
			border-radius: 6px;
			margin-right: 0;
		}
		.service01 div.titArea div.titBox {
			width:250px;
			padding:20px;
			bottom:-140px;
			left:50%;
			margin-left: -125px;
		}
			.service01 div.titArea div.titBox p.enTit {
				font-size:14px;
				padding-left:14px;
			}
				.service01 div.titArea div.titBox p.enTit:before {
					top:48%;
				}
				.service01 div.titArea div.titBox h2 {
					font-size:20px;
					margin-bottom: 20px;
				}
				.service01 div.titArea div.titBox h3 {
					font-size:16px;
					line-height: 1.8;
				}
		.service01 div.inner p.read {
			font-size:14px;
			margin-bottom: 50px;
		}
			.service01 div.inner p.read br {
				display: none;
			}
		.service01 div.inner h3 {
			margin-bottom: 40px;
		}
			.service01 div.inner h3 span {
				font-size:17px;
			}
		.service01 div.inner ul.flow {
			width:250px;
			height: auto;
			flex-wrap: wrap;
			margin: 0 auto;
		}
			.service01 div.inner ul.flow li {
				height: 44px;
			}
			.service01 div.inner ul.flow li.step {
				width:100%;
			}
				.service01 div.inner ul.flow li.step p {
					width:100%;
					height: 100%;
					font-size:16px;
					writing-mode: horizontal-tb;
					line-height: 44px;
				}
			.service01 div.inner ul.flow li.arrow {
				width:100%;
			}
				.service01 div.inner ul.flow li.arrow span {
					transform: rotate(90deg);
				}
}

/* !電気設備工事事業 詳細
---------------------------------------------------------- */
.service01ListWrap {
	width:100%;
	position: relative;
}
.service01ListWrap div.bgTop {
	display: block;
	width:100%;
	line-height: 1;
	margin-bottom: -1px;
}
.service01ListWrap div.bgBtm {
	display: block;
	width:100%;
	line-height: 1;
}
.service01List {
	width:100%;
	background: #EFF7FC;
	padding:80px 50px 55px 50px;
}
	.service01List div.inner {
		width:100%;
		max-width:1240px;
		margin:0 auto ;
		position: relative;
	}
		.service01List div.inner ul.serviceList {
			width:100%;
			display: flex;
			flex-wrap: wrap;
		}
			.service01List div.inner ul.serviceList li {
				width:32%;
				margin-right: 2%;
				margin-bottom: 25px;
				display: block;
				min-height: 350px;
				background: #FFF;
				border-radius: 6px;
				position: relative;
				align-self: stretch;
			}
			.service01List div.inner ul.serviceList li:nth-child(3n) {
				margin-right: 0;
			}
					.service01List div.inner ul.serviceList li div.top {
						width:auto;
						padding:35px;
						border-bottom: 1px solid #DBE8EF;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
						.service01List div.inner ul.serviceList li div.top div.left {
							width:50%;
						}
							.service01List div.inner ul.serviceList li div.top div.left p.num {
								font-family: "Shippori Mincho", serif;
								font-size:16px;
								font-weight: 600;
								color: #007EC0;
							}
							.service01List div.inner ul.serviceList li div.top div.left h3 {
								font-family: "Shippori Mincho", serif;
								font-size:20px;
								font-weight: 600;
								line-height: 1.5;
							}
						.service01List div.inner ul.serviceList li div.top div.right {
							width:46%;
						}
							.service01List div.inner ul.serviceList li div.top div.right div.photo {
								display: block;
								width:100%;
								border-radius: 50%;
								overflow: hidden;
							}
								.service01List div.inner ul.serviceList li div.top div.right div.photo img {
									display: block;
									width:100%;
									transition: .3s;
								}
					.service01List div.inner ul.serviceList li div.btm {
						width:auto;
						padding:25px 35px 25px 35px;
					}
						.service01List div.inner ul.serviceList li div.btm p.read {
							font-size:15px;
							line-height: 1.8;
						}

@media screen and (max-width:1039px){
.service01List {
	padding:60px 30px 40px 30px;
}
			.service01List div.inner ul.serviceList li {
				margin-bottom: 20px;
				min-height: 250px;
			}
			.service01List div.inner ul.serviceList li:nth-child(3n) {
				margin-right: 0;
			}
					.service01List div.inner ul.serviceList li div.top {
						padding:25px 20px;
					}
						.service01List div.inner ul.serviceList li div.top div.left {
							width:50%;
						}
							.service01List div.inner ul.serviceList li div.top div.left h3 {
								font-size:17px;
							}
						.service01List div.inner ul.serviceList li div.top div.right {
							width:45%;
						}
					.service01List div.inner ul.serviceList li div.btm {
						padding:20px 20px 20px 20px;
					}
						.service01List div.inner ul.serviceList li div.btm p.read {
							font-size:14px;
						}
}
	
@media screen and (max-width:767px){
.service01List {
	padding:50px 25px 40px 25px;
}
		.service01List div.inner h2 {
			font-size:28px;
			margin-bottom: 30px;
		}
		.service01List div.inner ul.serviceList {
			width:100%;
			max-width:360px;
			margin: 0 auto;
		}
			.service01List div.inner ul.serviceList li {
				width:100%;
				min-height: auto;
				margin-right: 0;
				margin-bottom: 20px;
			}
			.service01List div.inner ul.serviceList li:nth-child(3n) {
				margin-right: 0;
			}
						.service01List div.inner ul.serviceList li a div.top div.left {
							width:60%;
						}
						.service01List div.inner ul.serviceList li a div.top div.right {
							width:35%;
						}
}

/* !再生可能エネルギー事業
---------------------------------------------------------- */
.service02 {
	width:100%;
	padding:100px 50px 40px 50px;
}
	.service02 div.titArea {
		position: relative;
		width:100%;
		display: flex;
		justify-content: space-between;
		padding-right: 5%;
		margin-bottom: 220px;
	}
		.service02 div.titArea img {
			position: relative;
			display: block;
			width:90%;
			height: 530px;
			object-fit: cover;
			border-radius: 0 6px 6px 0;
			margin-left: -50px;
			z-index: 1;
		}
		.service02 div.titArea div.titBox {
			position: absolute;
			width:590px;
			padding:40px 60px;
			background: #FFF;
			border-radius: 4px;
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.12);
			z-index: 2;
			bottom:-150px;
			right:0;
		}
			.service02 div.titArea div.titBox p.enTit {
				font-size:16px;
				font-weight: 600;
				color: #007EC0;
				letter-spacing: 0.04em;
				position: relative;
				padding-left:16px;
			}
				.service02 div.titArea div.titBox p.enTit:before {
					position: absolute;
					content:"";
					width:5px;
					height: 5px;
					background: #FDD000;
					border-radius: 50%;
					top:47%;
					left:0;
				}
				.service02 div.titArea div.titBox h2 {
					font-size:40px;
					font-weight: 600;
					line-height: 1.6;
					margin-bottom: 40px;
				}
				.service02 div.titArea div.titBox h3 {
					font-size:26px;
					font-weight: 600;
					line-height: 1.6;
					color: #004E8A;
				}
	.service02 div.inner {
		width:100%;
		max-width:1240px;
		margin: 0 auto;
	}
		.service02 div.inner p.read {
			font-size:18px;
		}

@media screen and (max-width:1039px){
.service02 {
	padding:80px 30px 20px 30px;
}
	.service02 div.titArea {
		margin-bottom: 180px;
	}
		.service02 div.titArea img {
			height: 360px;
			margin-left: -30px;
		}
		.service02 div.titArea div.titBox {
			width:480px;
			padding:30px 40px;
			bottom:-120px;
		}
			.service02 div.titArea div.titBox p.enTit {
				font-size:15px;
			}
				.service02 div.titArea div.titBox h2 {
					font-size:34px;
					margin-bottom: 30px;
				}
				.service02 div.titArea div.titBox h3 {
					font-size:22px;
				}
		.service02 div.inner p.read {
			font-size:16px;
		}
			.service02 div.inner h3 span {
				font-size:20px;
			}
}

@media screen and (max-width:767px){
.service02 {
	padding:70px 25px 20px 25px;
}
	.service02 div.titArea {
		padding-right: 0;
		margin-bottom: 210px;
	}
		.service02 div.titArea img {
			width:100%;
			height: 200px;
			object-fit: cover;
			border-radius: 6px;
			margin-left: 0;
		}
		.service02 div.titArea div.titBox {
			width:250px;
			padding:20px;
			bottom:-165px;
			left:50%;
			margin-left: -125px;
		}
			.service02 div.titArea div.titBox p.enTit {
				font-size:14px;
				padding-left:14px;
			}
				.service02 div.titArea div.titBox p.enTit:before {
					top:48%;
				}
				.service02 div.titArea div.titBox h2 {
					font-size:19px;
					margin-bottom: 20px;
				}
				.service02 div.titArea div.titBox h3 {
					font-size:16px;
					line-height: 1.8;
				}
		.service02 div.inner p.read {
			font-size:14px;
		}
			.service02 div.inner p.read br {
				display: none;
			}
		.service02 div.inner h3 {
			margin-bottom: 40px;
		}
			.service02 div.inner h3 span {
				font-size:17px;
			}
}