@charset "utf-8";


div#serviceIntercom {
	display:flex;
	justify-content: space-between;
}
div#serviceIntercom div#serviceIntercomPhoto {
	width: calc((100% - 480px) - 5%);
	background: url("../../service/images/intercom.jpg") 50% 50% no-repeat;
	background-size: cover;
}
div#serviceIntercom div#serviceIntercomText {
	width:480px;
	padding:100px 0;
}

ul#serviceList {
	display:flex;
	flex-wrap:wrap;
	margin-top:150px;
}
ul#serviceList li {
	width: calc((100% - 80px) / 3);
	margin:80px 40px 0 0;
}
ul#serviceList li:first-child,
ul#serviceList li:nth-child(2),
ul#serviceList li:nth-child(3) {
	margin-top:0;
}
ul#serviceList li:nth-child(3n) {
	margin-right:0;
}
ul#serviceList li h3.title02 {
	margin-top:30px;
}



@media screen and (min-width:769px) and (max-width:1280px) {
	div#serviceIntercom {
		display:block;
	}
	div#serviceIntercom div#serviceIntercomPhoto {
		width: 100%;
		height: 350px;
	}
	div#serviceIntercom div#serviceIntercomText {
		width:100%;
		margin-top:50px;
		padding:0;
	}

	ul#serviceList li {
		width: calc((100% - 30px) / 2);
		margin-right:30px;
	}
	ul#serviceList li:nth-child(3) {
		margin-top:80px;
	}
	ul#serviceList li:nth-child(3n) {
		margin-right:30px;
	}
	ul#serviceList li:nth-child(even) {
		margin-right:0;
	}
}



@media screen and (max-width:768px) {
	div#serviceIntercom {
		display:block;
	}
	div#serviceIntercom div#serviceIntercomPhoto {
		width: 100%;
		height: 200px;
	}
	div#serviceIntercom div#serviceIntercomText {
		width:100%;
		margin-top:30px;
		padding:0;
	}

	ul#serviceList {
		display:block;
		margin-top:50px;
	}
	ul#serviceList li {
		width: 100%;
		margin-top:50px;
		margin-right:0;
	}
	ul#serviceList li:nth-child(2),
	ul#serviceList li:nth-child(3) {
		margin-top:50px;
	}
	ul#serviceList li:nth-child(3n) {
		margin-right:0;
	}
	ul#serviceList li:nth-child(even) {
		margin-right:0;
	}
	ul#serviceList li h3.title02 {
		margin-top:25px;
	}
}