@charset "utf-8";
/* CSS Document */

body{
	line-height: 1.7;
}
.main-visual {
    text-align: center;
    background:#dddbdc;
}
.sub-title{
	font-size: 143%;
	text-align: center;
	margin-bottom: 30px;
}
.contents-title {
    text-align: center;
    margin: 50px 0;
}

/*--------contents-nav--------*/

.contents-nav li.list2{
	border-bottom: 2px solid #00acde;
	padding-bottom: 6px;
}
/*--------contents--------*/

.contents-wrapper01 {
    background: #dcf3fa;
}

.contents{
	margin: 0 auto;
	width: 770px;
    overflow: hidden;
    padding: 40px 0 40px;
}
.contents.box1{
	width: 524px;
}
.contents.box2{
	width: 1020px;
}

.contents.box3{
	width: 510px;
}

.contents-inner {
    overflow: hidden;
	width: 765px;
	margin: auto;
}
.contents-inner.section2{
	width: 1020px;
}
.contents-inner.section3{
	width: 770px;
}
.contents-inner.section4{
	width: 510px;
}
/*--------guid-box--------*/
.guide-box{
	background-color:#d8d8da;
}
.guid-bg{
	width: 960px;
	margin: auto;
	overflow: hidden;
	
}
.left-img{
	float: left;
}
.text-box{
	float: right;
	background: #ffffff;
	width:400px;
	height: 160px;
	padding: 40px 20px;
	margin: 40px 0;
}
.subtext{
	color: #666666;
	text-align: center;
	margin-bottom: 30px;
}
/*--------product-menu--------*/
.product-menu{
	background-color:#72cdec;
}
.product-menu ul{
	width: 1000px;
	margin: auto;
	padding: 15px 0;
	overflow: hidden;
}
.product-menu li{
	float: left;
	margin-right: 40px;
	background: url(../img/index_icon01.png) no-repeat left center;
	padding-left: 20px;
}
.product-menu li a{
	text-decoration: none;
}
.product-title{
	margin: auto;
	display: block;
	text-align: center;
	margin-bottom: 20px;
}
.product-title p.border{
	border-bottom: 2px solid #14acdd;
	display: inline-block;
	padding-bottom: 10px;
	font-size: 129%;
}
/*--------contents-box--------*/
.contents-box{
	padding: 40px 40px 0 40px;
	line-height: 1.7;
	overflow: hidden;
	background-color: #ffffff;
	margin-bottom: 50px;
}
.title{
	text-align: center;
	color: #13acdd;
	font-size: 143%;
	margin-bottom:20px; 
}
/*--------.product-box-------*/
.product-box{
	width:235px;
	float: left;
	margin-bottom: 20px;
	padding: 10px;
}
.product-box.last{
	margin-right: 0px;
}
.text-block{
	background-color: #ffffff;
	height: 210px;
	width: 235px;
	
}
.text-block.blue.bn{
	height: 290px;
}
.text-title{
	color: #10488b;
	margin-bottom: 10px;
	margin:0 0 15px 15px;
	padding-top: 15px;
}
.inner-text{
	font-size: 86%;
	line-height: 2;
	letter-spacing:-0.5px;
	margin: 0 0 15px 10px;
}
	.blue-icon{
		color:#10488b;
		margin-right: 3px;
	}

.left-indent{
	padding-left:4em;
	text-indent: -4em;
}
.contents-wrapper01.white{
	background-color: #ffffff;
}
.text-block.blue{
	background-color:#b8e6f5;
}
.left-wrap{
	float: left;
}
.right-wrap{
	float: right;
}
.attention{
	text-align: right;
}
@media screen and ( max-width: 1037px ){
.contents-inner.section2{
	max-width: 770px;
}
}
@media screen and ( max-width: 1000px ){
/*--------contents-nav-------*/
	.contents-nav{
		display: none;
	}
/*--------guide-box-------*/
	.guide-box{
		width: 100%;
		margin: auto;
		height: 100%;
		padding: 40px 0;
	}
	.guid-bg{
		margin: auto;
		height: 100%;
		width: 100%;
	}
	.left-img{
		float: none;
		margin-bottom: 20px;
		text-align: center;
		width: 100%;
		max-width: 1000px;
	}
	.text-box{
		float: none;
		margin: auto;
		max-width: 400px;
		width: 80%;
		height: 100%;
	}
/*--------product-menu-------*/
	.product-menu ul{
		width: 96%;
	}
	.product-menu li{
		margin-bottom: 10px;
	}
	.contents{
		width: 100%;
	}
	.contents,.contents.box1,.contents.box2,.contents.box3{
		width: 90%;
		margin: auto;
	}

		.contents-inner.section2{
		max-width: 1000px;
		width: 80%;
	}
		.contents-inner.section3{
		max-width: 1000px;
		width: 80%;
	}
		.contents-inner.section4{
		max-width: 1000px;
		width: 80%;
			margin: auto;
	}
	p.product-img img{
		width: 100%;
		height: 100%;
	}
.left-wrap {
	float: none;
	margin: auto;
	overflow: hidden;
	max-width: 255px;
}
.right-wrap{
	float: none;
	margin: auto;
	overflow: hidden;
	max-width: 255px;
	}
	.text-block{
		width: 100%;
		display: block;
	}
	.text-title{
		width: 90%;
	}
	.contents-inner{
		width: 100%;
		max-width: 765px;
	}
.contents-inner.section2{
	max-width: 765px;
	width: 100%;
}

}
@media screen and ( max-width: 866px ){
	.contents-inner,.contents-inner.section2{
		width: 100%;
		max-width: 510px;
	}
}
@media screen and ( max-width: 584px ){
	.contents-inner,.contents-inner.section2,.left-wrap,.right-wrap{
		width: 100%;
		max-width: 255px;
	}
}