/* topImgWrap */

.topImgWrap {
	width: 100%;
	background-repeat: no-repeat;
	background-position: 50% 0;
	-webkit-background-size: contain;
	background-size: contain;
	border-bottom: 6px solid #114956;
	margin-bottom: 25px;
}


/* service */

#service h2 {
	background-repeat: no-repeat;
	background-position: 50%;
	background-image: url(../img/service/service.png);
	-webkit-background-size: contain;
	background-size: contain;
}


/* overviewWrap */

.overviewWrap {
	width: 100%;
}

.overviewWrap .graBox {
	padding: 10px;
	border: 1px solid #999;
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
	background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
	filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
}

.overviewWrap .title {
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	color: #114956;
}

.overviewWrap .center {
	font-size: 14px;
	color: #114956;
}


/* listWrap */

.listWrap {
	width: 100%;
}

.listWrap .listBox {
	margin-bottom: 30px;
	padding-bottom: 40px;
	border-bottom: 1px solid #333;
}

.listWrap .title {
	width: 100%;
}

.listWrap .img img {
	max-width: 100%;
}


/* PCの場合 */

@media screen and (min-width: 980px) {
	/* topImgWrap */
	.topImgWrap {
		height: 150px;
		background-image: url(../img/service/top.jpg);
	}
	/* service */
	#service h2 {
		height: 50px;
	}
	#service>p.center {
		font-size: 20px;
		margin-bottom: 45px;
	}
	/* overviewWrap */
	.overviewWrap {
		margin-bottom: 80px;
	}
	.overviewWrap .graBox {
		width: 570px;
	}
	/* listWrap */
	.listWrap {
		margin-bottom: 150px;
	}
	.listWrap .listBox {
		width: 100%;
	}
	.listWrap .listBox:first-child {
		background-image: url(../img/service/thumbnail01.jpg);
		background-repeat: no-repeat;
		background-position: 100% 95%;
	}
	.listWrap .title {
		font-size: 40px;
		margin-bottom: 30px;
	}
	listWrap .img {
		width: 340px;
	}
	.listWrap .text {
		padding: 5px;
		font-size: 18px;
		width: 860px;
	}
}


/* SPの場合 */

@media screen and (max-width: 980px) {
	/* topImgWrap */
	.topImgWrap {
		height: 22.5vw;
		background-image: url(../img/service/sp_top.png);
		-webkit-background-size: cover;
		background-size: cover;
	}
	/* service */
	#service,
	#service>p.center {
		margin-bottom: 25px;
	}
	/* overviewWrap */
	.overviewWrap .graBox {
		width: 90%;
		margin: 0 auto 15px;
	}
	.overviewWrap .title {
		font-size: 16px;
	}
	/* listWrap */
	.listWrap {
		padding: 10px;
	}
	.listWrap .title {
		font-size: 20px;
		padding-left: 10px;
		margin-bottom: 10px;
	}
	.listWrap .listBox {
		margin-bottom: 10px;
		padding-bottom: 10px;
	}
	.listWrap .img {
		width: 50%;
	}
	.listWrap .text {
		padding: 5px;
		font-size: 14px;
		width: 50%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}


/* 縦長の場合 */

@media only screen and (max-width: 980px) and (orientation: portrait) {
	/* service */
	#service h2 {
		height: 6vh;
	}
	/* listWrap */
	.listWrap .listBox:first-child {
		background-image: url(../img/service/thumbnail01.jpg);
		background-repeat: no-repeat;
		background-position: 0 95%;
		-webkit-background-size: 35%;
		background-size: 35%;
	}
	.listWrap .text {
		height: 30vh;
	}
}


/* 横長の場合 */

@media only screen and (max-width: 980px) and (orientation: landscape) {
	/* service */
	#service h2 {
		height: 12vh;
	}
	/* listWrap */
	.listWrap .text {
		height: 58vh;
		font-size: 16px;
	}
}