@charset "utf-8";


/*================================================
 *  スマートフォンでは1カラム
 ================================================*/


.oneCol {
	overflow:hidden;

}
.oneColInner {
	overflow:hidden;
	margin-right:-3%;
}
.oneColInner div {
	width:97%;
	float:left;
	margin-right:2%;
}
.oneColInner div:nth-child(1n+1) {
	clear:both;
}
.oneColInner img {
	width:100%;
	margin-bottom:0;

}

/*================================================
 *  カラム
 ================================================*/
/* カラム */
.col_1{
	overflow:hidden;
}

.col_1 ul{
	overflow:hidden;
	margin:0% -2% 0 0;
}
.col_1 li{
	list-style:none;
	float:left;
	width:98%;
	margin:0 2% 0 0;


}
.col_1 li:nth-child(2n+1){
	clear:both;
}
.col_1 li img{
	width:100%;
	margin-bottom:2.5%;
}

/*================================================*/
.col_2 {
	overflow:hidden; 	

}
.col_2 p{
	text-align:center;
}

.col_2 ul {
	overflow:hidden;
	margin:2% -2% 0 0;
}
.col_2 li {
	list-style:none;
	float:left;
	width:48%;
	margin:0 2% 2% 0;
}
.col_2 li:nth-child(2n+1) {
	clear:both;
}
.col_2 li img {
	width:100%;
	margin-bottom:2.5%;
}

.col_2 li h4 {
text-align:left;
font-size:16px;
	font-weight: bold;	/*太字にする設定*/
}


/*================================================*/
.col_3{
	overflow:hidden;
}

.col_3 p{
	text-align:center;
}

.col_3 ul{
	overflow:hidden;
	margin:0 -3% 0 0;
}
.col_3 li{
	list-style:none;
	float:left;
	width:31%;
	margin:0 2% 2% 0;
}
.col_3 li:nth-child(3n+1){
	clear:both;
}
.col_3 li img{
	width:100%;
	margin-bottom:2.5%;
}
/*================================================*/
.col_4{
	overflow:hidden;
}

.col_4 ul{
	overflow:hidden;
	margin:2% -2% 0 0;
}
.col_4 li{
	list-style:none;
	float:left;
	width:23%;
	margin:0 2% 100px 0;
}
.col_4 li:nth-child(4n+1){
	clear:both;
}
.col_4 li img{
	width:100%;
	margin-bottom:2.5%;
}

.col_4 p{
text-align:left;

}

.col_4 a {

	text-decoration:none;
}
.col_4 a:hover {

	text-decoration:none;
}


/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {

/*================================================*/	
	.col1 ul{
		margin-right:0;
	}
	.col_1 li{
		width:100%;
	}
	.col_1 li:nth-child(2n+1){
		clear:both;
	}
	
/*================================================*/	
	.col_2 ul{
		margin-right:0;
	}
	.col_2 li{
		width:100%;
	}
	.col_2 li:nth-child(2n+1){
		clear:both;
	}


/*================================================*/	
.col_3{
	overflow:hidden;
}

.col_3 ul{
	overflow:hidden;
	margin:2% -2% 0 0;
}
.col_3 li{
	list-style:none;
	float:left;
	width:99%;
	margin:0 2% 2% 0;
}
.col_3 li:nth-child(3n+1){
	clear:both;
}
.col_3 li img{
	width:100%;
	margin-bottom:2.5%;
}
/*================================================*/
.col_4{
	overflow:hidden;
}

.col_4 ul{
	overflow:hidden;
	margin:2% -2% 0 0;
}
.col_4 li{
	list-style:none;
	float:left;
	width:98%;
	margin:0 2% 20% 0;
}
.col_4 li:nth-child(3n+1){
	clear:both;
}
.col_4 li img{
	width:100%;
	margin-bottom:2.5%;
}





}