@charset "utf-8";

/* ROOFTG石付金属屋根材と熱の抑制について
------------------------------------------------------------*/
.box_all{
width:100%;
margin:20px auto;
}

.box_l_30{
width:29%;
float:left;
}

.box_r_70{
width:69%;
float:right;
padding:0 10px;
}

.box_l_30 img{
width:98%;
margin:0 auto;
}

.box_r_70 img{
width:98%;
margin:0 auto;
}

.box_r_30{
width:29%;
float:right;
}

.box_l_70{
width:69%;
float:left;
padding:0 10px;
}

.box_r_30 img{
width:98%;
margin:0 auto;
}

.box_l_70 img{
width:98%;
margin:0 auto;
}

@media only screen and (max-width:800px){
.box_l_30{
width:98%;
float:none;
margin:15px auto;
}

.box_r_70{
width:98%;
float:none;
margin:15px auto;
padding:0;
}

.box_r_30{
width:98%;
float:none;
margin:15px auto;
}

.box_l_70{
width:98%;
float:none;
margin:15px auto;
}
}


/* 3件画像記事
------------------------------------------------------------*/
.thumbWrap3{
width:1060px;
margin:20px auto;
}

.thumbWrap3 li{
width:33%;
margin:0;
padding:2px 0 40px;
background:none;
text-align:center;
display:inline-block;
/display:inline;
/zoom:1;
vertical-align:top;
}

.thumbWrap3 li img{
margin:5px auto;
width:94%;
height:auto;
display: block;
padding: 0;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
opacity: 1;
}

.thumbWrap3 li a img{
margin:5px auto;
width:96%;
height:auto;
display: block;
padding: 0;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
opacity: 1;
}

.thumbWrap3 li a:hover img {
-webkit-transform: scale(1.03, 1.03);
-moz-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-o-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
opacity: 1;
}


/* 最新記事リンク */
ul.thumb3 h3{
margin-top:10px;
padding:3px;
font-weight:normal;
font-size:100%;
text-align:center;
border:1px solid #e2e2e2;
border-radius:4px;
}

ul.thumb3 h3 span{
display:block;
padding:5px 3px;
border-radius:3px;
}

ul.thumb3 h3 a{color:#8d7066;}
ul.thumb3 h3:hover span{background:#8d7066;color:#fff}

@media only screen and (max-width:1100px){
.thumbWrap3{
width:96%;
margin:5px auto;}

.thumbWrap3 ul{

}

.thumbWrap3 li{
display:inline-block; 
/display:inline; 
/zoom:1;
width:48%;
vertical-align:top
}
}

@media only screen and (max-width:600px){
.thumbWrap3{
width:100%;
margin:5px auto;}
.thumbWrap3 li{
float:left;
width:98%;
margin:0 auto;
padding:2px 0 40px;
background:none;
text-align:center;
}
}