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

/*-----------------------------------------------------------
	csr eco
-----------------------------------------------------------*/
h1{
	background-image:url(../img/h-bg.jpg);
}


#large-stock .image{
	width:100%;	
}
#large-stock .image img{
	width:100%;
	height:auto;
}



table{
	width:100%;
}

.service-box{
	width:100%;
	overflow:hidden;
}
.service-box li{
	float:left;
	width: 288px;
	background-color:#eee;
	margin-right:18px;
	margin-bottom:10px;
	padding:10px;
}

.heading-p {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #1e2875;
    margin-bottom: 30px;
	line-height: 40px;
}

.service-box li:nth-child(3n){
	margin-right:0;
}

.inner p img{
width:100%}


.inner-green p img{
width:100%}

.c-local p {
	line-height:30px !important;
	margin-bottom:0 !important;
	}
	

 h4.bdLeft {
    height: 30px;
    line-height: 30px;
    margin-left: 0;
    padding-left: 0.5em;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 1em;
    border-left:8px solid #E5002D;
	border-bottom: 1px solid #ccc;
}

 h5.logo {
	 font-size:18px;
}

 h5.logo img{
	 width:auto;
	 margin-right:15px;
}	


.two-columns li p{
	line-height:1.6;
	font-size:14px;
	margin-top:10px;
	margin-bottom:10px;
}



.content-visual{
	width:100%;
	padding:60px 0;
	background-image:url(img/content-visual.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position: center center;
}

.half-tone{
	background-color:rgba(0,0,0,0.8);
	color:#fff;
	font-size:32px;
	font-weight:bold;
	width:20.0em;
	text-align:center;
	margin:0 auto;
	padding:45px;
}

.content-logo{
	margin:40px auto 0;
	width:180px;
}
.content-logo2{
	margin:0 auto 40px;
	width:180px;
}

.res-imgright { 
    width: 450px;
	height:auto;
	float:right;
	margin:0 0 20px 20px }
	
.res-imgleft { 
    width: 450px;
	height:300px;
	float:left;
	margin:0 20px 20px 0 }
	
.res-imgleft2 { 
    width: 450px;
	height:300px;
	float:left;
	margin:0 20px 50px 0 }
	
.eco {
	text-align:center;
 }		
	

@media only screen and (max-width: 768px) {
.service-box li{
	width:45%;
	margin:1%;
	padding:1.5%;
	font-size:14px;
}

section p.heading-p {
    font-size: 18px !important;
    line-height: 24px;
}

section p.heading-p br{
display:block}

.service-box li:nth-child(3n){
	margin-right:1%;
}

.c-local p {
  font-size:14px  !important;
	}
	
 h4.bdLeft {
    height: 30px;
    line-height: 30px;
    margin-left: 0;
    padding-left: 0.5em;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    border-left: 8px solid #E5002D;
}

.content-visual{
	padding:30px 0;
	
} 

.half-tone{
	font-size:18px;
	width:80%;
	margin:0 5%;
	padding:10px 5%;
}
section p.heading-p br{
display:block}

.content-logo{
	width:35%;
	margin:20px 33% 0;
}
.content-logo2{
	width:35%;
	max-width:180px;
	margin:0 auto 20px;
}
.content-logo img{
	width:100%;
	height:auto;
}

.res-imgright {
  width: 100%;
  margin:0 0 20px 20px;
  height:auto;
  }
  
.res-imgleft {
  width: 100%;
  margin:0 20px 20px 0 
  }
  
.res-imgleft2 {
  width: 100%;
  margin:0 20px 20px 0 
  }

.eco img{
	width:100%;
	height:auto;
 }     	

}

/*-----------------------------------------------------------
	タブ切り替え
-----------------------------------------------------------*/

div#area-box{
    transform: translateY(5.5%) translateX(5.5%); 
}


div#area-box ul {
    display:table-cell;
	margin: 0 auto;
}

div#area-box li {
	vertical-align: middle;
    float:left;
    width: 250px;
	color:#999;
	background:#FFF;
	margin:10px;
	border-radius: 5px;
	border: 1px solid #E5002D;
	transition: ease 0.2s opacity;
}

div#area-box li a {
    width:auto;
    background:#FFF;
    padding:10px;
    box-sizing:border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    color: #3a4140;
    text-align: center;
    text-decoration: none;
    display: block;
    position: relative;
    border-radius: 5px;
    }
	  
div#area-box li a::before{
	content: "> ";
	color:#f00;
}


div#area-box li a:checked
 {
  text-decoration: none;
  background:#E5002D;
  border: 1px solid #E5002D;
  }


div#area-box li a:hover{
    background: #E5002D;
	color: #FFF;
	border-radius: 0;
}
	

@media (max-width: 768px) and (min-width: 481px) {
div#area-box{
    transform: translateY(8.8%) translateX(8.8%);
}


div#area-box li {
	font-size:15px;
    width: 38%;
}

.one-columns li{
	margin-bottom:20px  !important;
}  
  
}


@media only screen and (max-width: 480px) {
div#area-box {
transform: translateY(0) translateX(0);
margin-left:0;
    
}

div#area-box li {
    width:100%;
	border-radius: 5px;
	font-size:14px;
	box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
div#area-box li:nth-child(even) {
margin-left:0;
}
div#area-box li:nth-child(odd) {
margin-left:0;
}

.one-columns li{
	margin-bottom:20px  !important;
}  

}