@charset "utf-8";



.gridWrapper{
padding-bottom:20px;
overflow: hidden;
}

* html .gridWrapper{height:1%;}

.grid{
float:left;
background:#fff;
border-top:5px solid #ff8040;
border-bottom:5px solid #ff8040;
box-shadow:0 0 3px #ddd;
margin-bottom:10px;
}

.grid h3{
padding:10px 0;
font-weight:bold;
color:#fff;
background:#666666;
text-align:center;
}

.grid-m{
float:left;
background:#fff;
border-top:5px solid #CCCCCC;
border-bottom:5px solid #CCCCCC;
box-shadow:0 0 3px #ddd;
margin-bottom:10px;
}

.grid-m h3{
padding:10px 0;
font-weight:bold;
color:#fff;
background:#666666;
text-align:center;
}

/* PC用 */
@media only screen and (min-width:960px){	
	#wrapper,.inner{
	width:980px;
	padding:0;
	}
	
	#wrapper{padding-bottom:20px;}
	
	/* グリッド全体 */
	.gridWrapper{
	width:960px;
	margin:0 0 0 -20px;
	}
	
	/* グリッド共通 ベース:トップページ4カラム */
	
	.grid{
	float:left;
	width:220px;
	margin-left:20px;
	}
	
	.grid-m{
	float:left;
	width:140px;
	margin-left:20px;
	}
}


/* モニター幅940px以下 */
@media only screen and (max-width:940px){
	*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}
	
	.grid{
	float:left;
	width:48%;
	margin:10px 2% 0 0;
	}
	
	.grid-m{
	float:left;
	width:30%;
	margin:10px 2% 0 0;
	}

	
	.grid img{
	float:left;
	margin-right:5px;
	}
}

/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	#footer .grid p{text-align:center;}
	
	.grid img{
	float:none;
	margin:0 auto;
	width:100%;
	height:auto;
	}
	
	.grid-m img{
	float:none;
	margin:0 auto;
	width:100%;
	height:auto;
	}
}