#key {
	padding: 161px 0 109px;
	background: url(../img/service/key-bg.jpg) no-repeat center top;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
}

#key:before {
	position: absolute;
	bottom: -130px;
	left: 0;
	right: 0;
	content: '';
	background: #3ca9d6;
	height: 200px;
	-moz-transform: skewY(-4deg);
	-webkit-transform: skewY(-4deg);
	-o-transform: skewY(-4deg);
	-ms-transform: skewY(-4deg);
	transform: skewY(-4deg);
}

#key .txt {
	background: #FFF;
	margin: 50px 0 0 6px;
	width: 388px;
	padding: 28px 0 32px 58px;
}

#sec1 {
	position: relative;
	background: #3ca9d6;
	padding: 31px 0 29px;
	text-align: center;
	color: #FFF;
}

#sec1:before {
	position: absolute;
	bottom: -200px;
	left: 0;
	right: 0;
	top: 50%;
	content: '';
	background: #3ca9d6;
}

#sec1 .txt {
	padding-top: 22px;
	position: relative;
	z-index: 1;
	margin-left: -24px;
}

#sec1 .txt p { padding-bottom: 35px; }

#sec2 {
	position: relative;
	padding-bottom: 82px;
}

#sec2:before {
	position: absolute;
	top: 5px;
	bottom: 0;
	left: 0;
	right: 0;
	content: '';
	background: #0f8fba;
	-moz-transform: skewY(4deg);
	-webkit-transform: skewY(4deg);
	-o-transform: skewY(4deg);
	-ms-transform: skewY(4deg);
	transform: skewY(4deg);
}

#sec2:after {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: 50%;
	content: '';
	background: #0f8fba;
	z-index: -1;
}

#sec2 .wrap {
	width: 950px;
	padding: 52px 0 43px;
	background: #FFF;
}

#sec2 .txt {
	float: left;
	border-left: 3px solid #0eb8f1;
	padding-left: 19px;
}

#sec2 .txt span { color: #10b2e8; }

#sec3 {
	position: relative;
	overflow: hidden
}

#sec3:before {
	position: absolute;
	top: -88px;
	left: 0;
	right: 0;
	content: '';
	background: #07d9f8;
	height: 555px;
	-moz-transform: skewY(-6deg);
	-webkit-transform: skewY(-6deg);
	-o-transform: skewY(-6deg);
	-ms-transform: skewY(-6deg);
	transform: skewY(-6deg);
}

#sec3:after {
	position: absolute;
	top: -133px;
	left: 0;
	right: 0;
	content: '';
	background: #0eb8f1;
	height: 589px;
	-moz-transform: skewY(-7deg);
	-webkit-transform: skewY(-7deg);
	-o-transform: skewY(-7deg);
	-ms-transform: skewY(-7deg);
	transform: skewY(-7deg);
}

#sec3 .info1 {
	padding: 95px 0 136px;
	z-index: 1;
}

#sec3 .info1 .col_r { padding-left: 35px; }

#sec3 .info1 h2 {
	padding: 47px 0 0 82px;
	float: left;
}

#sec3 .info1 .txt {
	padding-top: 5px;
	font-size: 20px;
	line-height: 45px;
	color: #FFF;
}

#sec3 .info2 { min-height: 334px; }

#sec3 .info2 h3 {
	position: absolute;
	top: 0;
	right: 0;
}

#sec3 .info2 .bnr {
	position: absolute;
	top: 96px;
	right: 80px;
}

#sec3 .info2 .txt {
	position: absolute;
	top: 133px;
	left: 78px;
	color: #368cad;
}

#sec4 {
	padding: 171px 0 203px;
	background: #48c3d0;
	position: relative;
}

#sec4:before {
	background: url(../img/service/sec4-photo.jpg) no-repeat center top;
	position: absolute;
	top: 0;
	left: 50%;
	right: 0;
	bottom: 0;
	content: '';
	-webkit-background-size: cover;
	background-size: cover;
}

#sec4 .col_l {
	padding-left: 41px;
	text-align: center;
}

#sec4 .col_l .txt {
	padding-top: 15px;
	color: #FFF;
}

#sec5 { padding-top: 69px; }

#sec5 .item { position: relative; }

#sec5 .item .flowLine {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	background: url(../img/service/sec5-line.jpg) repeat-y center top;
	content: '';
	z-index: -1;
	height: 100%;
}

#sec5 .box {
	background: #48c3d0;
	width: 720px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

#sec5 .box .number img { margin-top: -17px; }

#sec5 .box .txt {
	padding: 13px 0 32px;
	color: #FFF;
}

#sec5 .txt2 {
	padding: 26px 31px 24px 41px;
	color: #3e4748;
	background: rgba(244,252,251,0.9);
	position: absolute;
	bottom: 87px;
	left: 0;
}

#sec5 .txt2 span {
	font-size: 18px;
	color: #1c93a0;
}

#sec5 .item1 .photo { padding: 30px 0 87px; }

#sec5 .item2 .photo {
	padding: 30px 0 107px;
	text-align: right;
}

#sec5 .item3 .photo {
	padding: 30px 0 123px;
	text-align: right;
}

#sec5 .item4 .photo { padding: 30px 0 87px; }

#sec5 .item5 .photo {
	padding: 30px 0 168px;
	text-align: right;
}

#sec5 .item6 { padding-bottom: 86px; }

#sec5 .item7 .photo {
	padding: 30px 0 87px;
	text-align: center;
}

#sec5 .item8 .photo {
	padding: 30px 0 92px;
	text-align: right;
}

#sec5 .item8 .txt2 { bottom: 38px; }

#sec6 {
	position: relative;
	padding-top: 78px;
}

#sec6 .main {
	background: #0eb8f1;
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
	bottom: 0;
}

#sec6:before {
	position: absolute;
	top: 11px;
	left: 0;
	right: 0;
	content: '';
	background: #8ddffb;
	height: 555px;
	-moz-transform: skewY(4.4deg);
	-webkit-transform: skewY(4.4deg);
	-o-transform: skewY(4.4deg);
	-ms-transform: skewY(4.4deg);
	transform: skewY(4.4deg);
}

#sec6:after {
	position: absolute;
	top: 28px;
	left: 0;
	right: 0;
	content: '';
	background: #0eb8f1;
	height: 589px;
	-moz-transform: skewY(3.3deg);
	-webkit-transform: skewY(3.3deg);
	-o-transform: skewY(3.3deg);
	-ms-transform: skewY(3.3deg);
	transform: skewY(3.3deg);
}

#sec6 ul.pad1 { margin-left: 5px; }

#sec6 ul {
	float: left;
	margin-right: 10px;
}

#sec6 ul li {
	margin-bottom: 5px;
	padding: 8px 0 0 32px;
	width: 208px;
	background: #4989b6;
	color: #FFF;
	min-height: 37px;
}

#sec6 .info1 {
	padding: 30px 0 45px;
	position: relative;
	z-index: 1;
}

#sec6 h3 {
	margin-bottom: 10px;
	text-align: center;
	background: #8ddffb;
}

#sec6 .info2 { padding-bottom: 103px; }

#sec6 .info2 .col_l {
	margin-left: 5px;
	margin-right: 0;
}

#sec6 .info2 .col_r {
	margin-right: 5px;
	float: right;
}

#sec6 .info2 ul li {
	padding: 18px 0 15px 0;
	width: 490px;
	color: #FFF;
	text-align: center;
	min-height: 37px;
	font-size: 20px;
	margin-bottom: 10px;
}

/* --------------------------------------------------------------------------------------
   タブレット
--------------------------------------------------------------------------------------- */

@media(max-width:1024px) and (min-width: 767px) {
	
	#key {
		padding: 20% 0 16%;
		background-size: 200% auto;
		background-position: 60% 0;
	}
	
	#key h2 { margin-left: 9%; }
	
	#key .txt {
		margin: 4% 0 0 11%;
		padding: 2% 4%;
		width: 46%;
	}
	
	#sec2 .txt br { display: none; }
	
	#sec1 { padding: 23% 0 0; }
	
	#sec2 .wrap {
		width: auto;
		padding: 6% 0 6% 6%;
	}
	
	#sec2 .txt { width: 61%; }
	
	#sec3 .info1 { padding: 0% 0; }
	
	#sec3 .info1 h2 {
		float: none;
		padding: 3% 0 0;
		text-align: center;
	}
	
	#sec3 .info1 .col_r {
		padding-left: 0;
		float: none;
		text-align: center;
	}
	
	#sec3 .info1 .txt {
		line-height: 2.0;
	}
	
	#sec3-2 { padding-top: 10%; }
	
	#sec3 .info2 {
		min-height: inherit;
		padding-bottom: 47%;
	}
	
	#sec3 .info2 .txt {
		top: 51%;
		left: 7%;
	}
	
	#sec4 { padding: 3% 0 61%; }
	
	#sec4 .col_l { float: none; }
	
	#sec4:before {
		bottom: 0;
		left: 0;
		width: 100%;
		top: auto;
		padding-bottom: 56%;
		background-size: 100% auto;
	}
}

/* --------------------------------------------------------------------------------------
   スマホ
--------------------------------------------------------------------------------------- */

@media (max-width: 766px) {
	
	#key {
		padding: 29% 0 16%;
		background-size: 189% auto;
		background-position: 56% 0;
	}
	
	#key h2 {
		margin-left: 9%;
		width: 50%;
	}
	
	#key .txt {
		margin: 19% 0 0;
		padding: 7% 14%;
		width: auto;
		font-size: 87%;
		line-height: 1.7;
	}
	
	#key br,
	#sec1 .txt br,
	#sec2 .txt br,
	#sec3 .info2 .txt br,
	#sec5 .box .txt br,
	#sec5 .txt2 br,
	#sec4 .col_l .txt br { display: none; }
	
	#sec1 { padding: 0; }
	
	#sec1 h2 {
		width: 80%;
		margin: 0 auto;
	}
	
	#sec1 .txt {
		margin: 0;
		line-height: 1.8;
		padding: 5% 16% 0;
	}
	
	#sec2 { padding-bottom: 10%; }
	
	#sec2 .wrap {
		width: auto;
		padding: 10% 0 10% 6%;
	}
	
	#sec2 .col_l {
		float: none;
		width: 54%;
		margin-left: 17%;
	}
	
	#sec2 .txt {
		border-top: 3px solid #0eb8f1;
		border-left: none;
		width: 87%;
		line-height: 1.8;
		padding-top: 4%;
	}
	
	#sec3 .info1 { padding: 0% 0; }
	
	#sec3 .info1 h2 {
		float: none;
		padding: 0;
		text-align: center;
		width: 78%;
		margin: 0 auto;
	}
	
	#sec3 .info1 .col_r {
		padding-left: 0;
		float: none;
		text-align: center;
	}
	
	#sec3 .info1 .col_r h3 {
		width: 80%;
		margin-left: 12%;
	}
	
	#sec3 .info1 .txt {
		line-height: 1.7;
		font-size: 90%;
	}
	
	#sec3-2 { padding-top: 21%; }
	
	#sec3 .info2 {
		min-height: inherit;
		padding-bottom: 31%;
	}
	
	#sec3 .info2 h3 {
		width: 79%;
		right: auto;
		margin-left: 17%;
		position: relative;
	}
	
	#sec3 .info2 .txt {
		top: 0;
		left: 17%;
		line-height: 1.7;
		width: 80%;
		position: relative;
	}
	
	#sec3 .info2 .bnr {
		right: auto;
		top: 71%;
		left: 17%;
	}
	
	#sec3:before { top: -34%; }
	
	#sec3:after { 	top: -42%; }
	
	#sec4 { padding: 6% 0 66%; }
	
	#sec4 h2 {
		width: 75%;
		margin: 0 auto;
	}
	
	#sec4 .col_l {
		float: none;
		padding: 0 12%;
	}
	
	#sec4:before {
		bottom: 0;
		left: 0;
		width: 100%;
		top: auto;
		padding-bottom: 56%;
		background-size: 100% auto;
	}
	
	#sec4 .col_l .txt { line-height: 1.7; }
	
	#sec5 .box { width: auto; }
	
	#sec5 .box .number {
		width: 14%;
		margin: 0 auto;
	}
	
	#sec5 .item1 h3 { width: 62%; margin: 0 auto; }
	#sec5 .item2 h3 { width: 62%; margin: 0 auto; }
	#sec5 .item3 h3 { width: 77%; margin: 0 auto; }
	#sec5 .item4 h3 { width: 93%; margin: 0 auto; }
	#sec5 .item6 h3 { width: 45%; margin: 0 auto; }
	#sec5 .item7 h3 { width: 45%; margin: 0 auto; }
	#sec5 .item8 h3 { width: 45%; margin: 0 auto; }
	
	#sec5 .box .txt {
		line-height: 1.7;
		padding: 0 14% 6%;
	}
	
	#sec5 .item8 .txt2 { top: 68%; }
	
	#sec5 .txt2 {
		padding: 4% 4%;
		bottom: auto;
		top: 62%;
		width: 76%;
		left: 13%;
		line-height: 1.7;
	}
	
	#sec5 .item2 .photo { padding-bottom: 66%; }
	#sec5 .item3 .photo { padding-bottom: 66%; }
	#sec5 .item8 .photo { padding-bottom: 45%; }
	
	#sec5 > .wow {
		width: 29%;
		margin: 0 auto;
	}
	
	#sec6 { padding-top: 14%; }
	
	#sec6 .info1 { padding-top: 6%; }
	
	#sec6:before {
		height: auto;
	}
	
	#sec6 h2 {
		width: 38%;
		margin: 0 auto;
	}
	
}