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

/*clearfix*/
.container:after,
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
	content: ""; 
	display: table; 
	clear: both; 
}

.row { padding-bottom: 0em;}

/*.span_と併用することでスマホ時100%表示*/
										  
.col { 
	display: block;
	float: left;
	width: 100%;
	
}

@media(max-width:640px){
	.col{
		padding:2%;}}

 @media ( min-width : 641px ) {
	.span_1 { width: 8.33333333333%; }
	.span_2 { width: 16.6666666667%; }
	.span_3 { width: 25%; }
	.span_4 { width: 33.3333333333%; }
	.span_5 { width: 41.6666666667%; }
	.span_6 { width: 50%; }
	.span_7 { width: 58.3333333333%; }
	.span_8 { width: 66.6666666667%; }
	.span_9 { width: 75%; }
	.span_10 { width: 83.3333333333%; }
	.span_11 { width: 91.6666666667%; }
	.span_12 { width: 100%; }
}

/*　スマホでも分割のまま使いたいとき用クラス、colと併用　*/
	.smart_1 { width: 8.33333333333%; }
	.smart_2 { width: 16.6666666667%; }
	.smart_3 { width: 25%; }
	.smart_4 { width: 33.3333333333%; }
	.smart_5 { width: 41.6666666667%; }
	.smart_6 { width: 50%; }
	.smart_7 { width: 58.3333333333%; }
	.smart_8 { width: 66.6666666667%; }
	.smart_9 { width: 75%; }
	.smart_10 { width: 83.3333333333%; }
	.smart_11 { width: 91.6666666667%; }
	.smart_12 { width: 100%; }