/* common style
------------------------------------------------------------*/
#product_02 a:active {background-color: red; margin-top: 11%;}


.products_spa_01{ margin-top:5%; clear:both;}


.products_spa_02{ padding-top:30%;}

.products_color_01{ background-color:#bfbfbf}

@media screen and (min-width: 769px) {
.products_spa_02{ padding-top:0}

}


/* #header_products
------------------------------------------------------------*/

#header_products{
	position:relative;
	background: url(../img/products/products_mv.jpg) no-repeat 100% 100% ;
	background-size:cover;
	-webkit-background-size: cover;
}


#header_products #slogan{
	color: #fff;
	line-height: 1.2;
	text-align: center;
	padding:13% 0 5% 0;
}

#header_products #slogan h1{
	font-size:500%;
	font-weight:bold;
	text-shadow:  3px 3px 10px rgba(0,0,0,.9);
}


@media screen and (max-width:767px) {
#header_products{
	background: url(../img/products/products_sp_mv.jpg) no-repeat 100% 100%;
	background-size: cover;
	-webkit-background-size: cover;
}
#header_products #slogan{padding:30% 0 20% 0;
}
#header_products #slogan h1{
	font-size:300%;
	font-weight:bold;
}
}

/* .inner 
------------------------------------------------------------*/

.inner{
	width: 94%;
	margin: 0 auto;
}

/* RESPONSIVE*/
@media only screen and (min-width: 1200px){
	.inner{
		width:1350px;
	}
}

.inner h2{
	margin:15% 3% 13% 3% ;
	font-size:180%;
	font-weight: bold;
}

@media screen and (min-width:800px) {
	.inner h2{font-size:250%;}
}

 .inner .secTtlEng {
 display: block;
 font-size:1.6rem;
 font-weight: normal;
 color:#003268;
 font-family:"Roboto",sans-serif;
 margin:-3% 0 0 0;
}


.inner h3{
	font-size: 180%;
	font-weight: bold;
	position:relative;
	color:#003466;
}



.inner img{
	margin:0;
	width:100%

}

.inner p{
	font-size: 100%;}

.inner .container{ margin: 0 0}

.inner .container li{ 
width:100%;
margin-right:0; 
display:block;
 }



@media screen and (min-width:800px) {
	
.inner h2{margin-bottom: 3% ;}

.inner .secTtlEng {
	display: inline;
	margin: 0 0 0 3%;
	vertical-align: middle;}
	
.inner h3{
	margin:0 0 2% 0;
}

.inner img{
    margin:0;
}
.inner .container{margin:5% 4% 0 4%;}
.inner .container li{ width:37%; margin-right:3%; display: inline-block;vertical-align: middle;}
.inner .container li:last-child{width:auto;}
	
	
}


/* .table-example-1
------------------------------------------------------------*/

.slice{ 
	display: block;
	margin:15% 0 4% 4% ;
	padding-left:10%;
	background: url(../img/products/hand.jpg) no-repeat 0 0 ;
	background-size: contain;
	-webkit-background-size: contain;
	font-weight:bold
	}

table{ width: 130%; }

thead{background-color:#0f5193; color:white;}

thead th{border-top:1px solid white; border-left:1px solid white; border-right:1px solid white}

tbody{background-color:#eeeeee; border-left:1px solid white; border-right:1px solid white}


.table-example-1 { 
  border-collapse: collapse; 
}

.table-example-1 th, 
.table-example-1 td { 
  padding: 0.8rem 2rem;
}
.table-example-1 td {
  white-space: nowrap;
}
.table-example-1 th { 
  font-weight: normal; 
}
.table-example-1 td { 
  vertical-align: top; 
}
.table-example-1 th { 
  padding: 0.4em 0.2em; 
  vertical-align: middle; 
  text-align: center; 
}


.secProductBoxTbl {
 position:relative;
 display:block;
 overflow-x:scroll;
 white-space:nowrap;
 -webkit-overflow-scrolling:touch;
 margin-bottom:20px
}


@media screen and (min-width: 769px) {
.slice{ display:none}/**/
table{ width: 100%; margin-bottom:0}

 .secProductBoxTbl {
  overflow-x:inherit;
  white-space:inherit
 }
}