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

/*#keyImage{
	background: url(../images/main/keyImage01.jpg) 0 0 no-repeat;
	background-size: contain;
	height: 0;
	padding-top: 43.26%;
	z-index:1200;
}*/

.slides{
	width: 1024px;
	height: auto;
	margin: 0 auto 30px auto;
}

.slides div img{
	max-width: 100%;
	height: auto;
}

.catch{
	margin: 0 auto 30px auto;
}

.catch h1{
	font-size: 30px;
	text-align :center;
}

.strength{
	margin: 0 auto 50px auto;
}

.strength ul{
	width: 100%;
	height: auto;
}

.strength ul li{
	width: 30%;
	float: left;
	margin-right: 5%;
}

.strength ul li:last-child{
	margin-right: 0;
}

.strength ul li a{
	display: block;
	width: 100%;
	height: auto;
}

.strength ul li a:hover{
	opacity: 0.6;
}

.strength ul li a img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.service{
	margin: 0 auto 50px auto;
	padding: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	/*background: rgba(39,147,156,.8);*/
	background: url(../images/service/bg.png) 0 0 no-repeat;
	background-size: cover;
}

.ctg-box{
	width: 49%;
	height: auto;
	padding: 10px 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	background: rgba(255,255,255,.8);
	float: left;
	margin-right: 2%;
}

.ctg-box:last-child{
	margin-right: 0;
}

.product > h1, .manuf > h1{
	font-size: 20px;
	font-weight: bold;
}

.product ul li{
	width: 100%;
	height: auto;	
}

.product ul li a{
	display: block;
	color: #313131;
	text-decoration: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 10px;
	line-height: 3.0;
}

.product ul li a:hover{

	background: rgba(39,78,156,.5);
	color: #FFF;
}

.product ul li a i{
	
	margin-right: 10px;
}

.manuf ul li{
	width: 100%;
	height: auto;	
}

.manuf ul li a{
	display: block;
	color: #313131;
	text-decoration: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 10px;
	line-height: 3.0;
}

.manuf ul li a:hover{

	background: rgba(39,78,156,.5);
	color: #FFF;
}

.manuf ul li a i{
	
	margin-right: 10px;
}

.palletBand{
	font-size: 12px;
	color: #4ca0ef;
}

.palletBand > h1{
	font-size: 22px;
	font-weight: bold;
	color: #4ca0ef;
	line-height: 1.0;
	border-bottom: 1px solid #4ca0ef;
	padding-bottom:5px;
}

.palletBand .p-exp{
	font-size: 12px;
}

.palletBand .sub{
	vertical-align: sub;
	font-size: 9px;
}

.palletBand figure{
	width: 100%;
	height: auto;
	text-align: center;
	margin-top: 20px;
}

.palletBand figure a{
	display: block;
	width: 100%;
	height: auto;
}

.palletBand figure a:hover{
	opacity: 0.6;
}

.palletBand figure img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.toContact{
	margin: 0 auto 50px auto;
}

.toContact .mail{
	float: left;
	width: 48%;
	height: auto;
	text-align: center;
	margin-right: 4%;
	background: #3875e4;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	padding: 25px 10px;
	-moz-box-shadow:3px 3px 6px 0px #cdcdcd;
	-webkit-box-shadow:3px 3px 6px 0px #cdcdcd;
	box-shadow:3px 3px 6px 0px #cdcdcd;
}

.toContact .mail a{
	display: block;
	width: 100%;
	height: auto;
	color: #FFF;
	text-decoration: none;
	font-weight: normal;
	font-size: 24px;
}

.toContact .phone{
	float: left;
	width: 48%;
	height: auto;
	text-align: center;
	background: #3875e4;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	padding: 25px 10px;
	-moz-box-shadow:3px 3px 6px 0px #cdcdcd;
	-webkit-box-shadow:3px 3px 6px 0px #cdcdcd;
	box-shadow:3px 3px 6px 0px #cdcdcd;
}

.toContact .phone a{
	display: block;
	width: 100%;
	height: auto;
	color: #FFF;
	text-decoration: none;
	font-weight: normal;
	font-size: 24px;
}

@media screen and (max-width: 1024px){
	.slides{
		width: 768px;
	}
	
	.product > h1, .manuf > h1{
		font-size: 18px;
		font-weight: bold;
	}
}

@media screen and (max-width: 768px){
	.slides{
		width: 480px;
	}
	
	.catch h1{
		font-size: 18px;
	}
	
	.ctg-box{
		width: 100%;
		height: auto;
		padding: 10px 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
		box-sizing: border-box;
		background: rgba(255,255,255,.7);
		float: none;
		margin-right: 0;
	}
	
	.toContact .mail{
	  float: none;
	  width: 100%;
	  height: auto;
	  text-align: center;
	  margin-right: 0;
	  margin-bottom: 30px;
	  padding: 15px 0;
	}

  .toContact .mail a{
	  display: block;
	  width: 100%;
	  height: auto;
	  color: #FFF;
	  text-decoration: none;
	  font-weight: normal;
	  font-size: 18px;
  }
  
  .toContact .phone{
	  float: none;
	  width: 100%;
	  height: auto;
	  text-align: center;
	  padding: 15px 0;

  }
  
    .toContact .phone a{
		font-size: 18px;
	}
	
	
}

@media screen and (max-width: 480px){
	.slides{
		width: 320px;
	}
	
	.strength{
		margin: 0 auto 50px auto;
	}
	
	.strength ul{
		width: 100%;
		height: auto;
		text-align :center;
	}
	
	.strength ul li{
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 20px;
	}
	
	.strength ul li a{
		display: block;
		width: 100%;
		height: auto;
	}
	
	.strength ul li a:hover{
		opacity: 0.6;
	}
	
	.strength ul li a img{
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
}
}