#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;
    max-width: 368px;
    padding: 28px 20px 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;
	max-width: 677px;
}
#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);
}
.english #sec3 .info1 {
	padding: 60px 0 136px;
}
#sec3 .info1 {
	padding: 95px 0 136px;
	z-index: 1;
}
#sec3 .info1 .col_r {
	max-width: 490px;
}
#sec3 .info1 h2 {
	padding: 47px 0 0;
	float: left;
}
#sec3 .info1 h3 {
	font-size: 28px;
	color: #0a6888;
	font-weight: bold;
	line-height: 40px;
}
#sec3 .info1 .txt {
	padding-top: 5px;
	font-size: 20px;
	line-height: 45px;
	color: #FFF;
}
#sec3 .info2 {
	position: relative;
	z-index: 1;
	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;
	max-height: none;
	width: 504px;
}
#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 {
	text-align: center;
	max-width: 470px;
}
#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 10px 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;
	max-width: 470px;
}
#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;
	}
	#sec1 .txt {
	    margin: 0 auto;
	}
	#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;
		margin: auto;
	}
	#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: 4%;
	    width: 80%;
	    padding-top: 20px;
	}
	#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% 2% 0;
	}
	#sec2 {
		padding-bottom: 10%;
	}
	#sec2 .wrap {
	    width: auto;
	    padding: 10% 2% 10% 2%;
	}
	#sec2 .col_l {
		float: none;
		width: 54%;
		margin-left: 17%;
	}
	#sec2 .txt {
		border-top: 3px solid #0eb8f1;
	    border-left: none;
	    line-height: 1.8;
	    padding-top: 4%;
	    margin-top: 10px;
	    padding: 4% 2% 0;
	}
	.english #sec3 .info1 {
		padding: 10px 0 0;
	}
	.english #sec3:before {
		top: -50px;
    	height: 60%;
	}
	.english #sec3:after {
		top: -50px;
		height: 59%;
	}
	#sec3 .info1 {
		padding: 0% 0;
	}
	#sec3 .info1 h2 {
		float: none;
		padding: 0;
		text-align: center;
		width: 78%;
		margin: 0 auto;
	}
	#sec3 .info1 .col_r {
	    float: none;
	    text-align: center;
	    max-width: inherit;
	    padding: 0 2%;
	}
	#sec3 .info1 .col_r h3 {
	    width: 90%;
	    font-size: 110%;
	    line-height: 1.5;
	    margin: auto;
	}
	#sec3 .info1 .txt {
		line-height: 1.7;
		font-size: 90%;
	}
	#sec3-2 {
		padding-top: 21%;
	}
	#sec3 .info2 {
		min-height: inherit;
	    padding-bottom: 31%;
	    padding-top: 20%;
	}
	#sec3 .info2 h3 {
		width: 79%;
		right: auto;
		margin-left: 17%;
		position: relative;
	}
	#sec3 .info2 .txt {
	    top: 0;
	    left: 10%;
	    line-height: 1.7;
	    width: 90%;
	    position: relative;
	}
	#sec3 .info2 .bnr {
	    right: auto;
	    top: 74%;
	    left: 10%;
	}
	#sec3:before {
		top: -50px;
		height: 55%;
	}
	#sec3:after {
		top: -50px;
		height: 54%;
	}
	#sec4 {
		padding: 6% 0 66%;
	}
	#sec4 .col_l {
		float: none;
		padding: 0 10%;
	}
	#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 .item h3 {
		max-width: 80%;
		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: 80%;
		margin: 0 auto;
	}
}