@charset "utf-8";



/********************************************

 column

********************************************/

[class^=column_no]{
	width:100%;
	display:block;
	@include clearfix;
	>li{
		float:left;
		@include box-sizing(border-box);
		img{
			max-width:100%;
		}
	}
}
.column_no4{
	>li{
		width:25%;
		$column_padding:1%;
		padding-bottom:20px;
		&:before{
			left:auto!important;
		}
		&:nth-child(4n+1){
			padding-right:$column_padding * 1.25;
			clear:left;
			//background:olive;
		}
		&:nth-child(4n+2){
			padding-right:$column_padding * .75;
			padding-left:$column_padding * .75;
			//background:red;
		}
		&:nth-child(4n+3){
			padding-right:$column_padding * .75;
			padding-left:$column_padding * .75;
			//background:green;
		}
		&:nth-child(4n+4){
			padding-left:$column_padding * 1.25;
			//background:yellow;
		}
		&:nth-last-child(-n+4){
			padding-bottom:0;
		}
	}
}
.column_no3{
	>li{
		width:33.3%;
		$column_padding:4%;
		padding-bottom:$column_padding * 1.5;
		&:nth-child(3n+1){
			padding-right:$column_padding;
		}
		&:nth-child(3n+2){
			padding-right:$column_padding / 2;
			padding-left:$column_padding / 2;
		}
		&:nth-child(3n+3){
			padding-left:$column_padding;
		}
		&:nth-last-child(-n+3){
			padding-bottom:0;
		}
	}
}
.column_no2{
	>li{
		width:50%;
		$column_padding:2%;
		padding-bottom:$column_padding * 2;
		&:nth-child(2n+1){
			padding-right:$column_padding;
		}
		&:nth-child(2n+2){
			padding-left:$column_padding;
		}
		&:nth-last-child(-n+2){
			padding-bottom:0;
		}
	}
}