@charset "UTF-8";

/*------------------------------------------------------------

960 Responsive Grid Style

コーディング

<div class="container">
	<div class="row">
		<div class="col_** col_sm_**">
	</div>
</div>

------------------------------------------------------------*/
/*画面幅959pxまではスマホ・タブレット用*/
@media screen and ( max-width : 959px ) {
	.container{
	width:100%;
	padding-right:.8%;
	padding-left:.8%;
	margin-right:auto;
	margin-left:auto;
	}

	.row{
	margin-right:-.8%;
	margin-left:-.8%;
	}

	.col_sm_1,.col_sm_2,.col_sm_3,.col_sm_4,.col_sm_5,.col_sm_6,.col_sm_7,.col_sm_8,.col_sm_9,.col_sm_10,.col_sm_11,.col_sm_12{
		margin:0 .8%;
	}

	.col_sm_1{ width:6.667%; }
	.col_sm_2{ width:15%; }
	.col_sm_3{ width:23.333%; }
	.col_sm_4{ width:31.667%; }
	.col_sm_5{ width:40%; }
	.col_sm_6{ width:48.333%; }
	.col_sm_7{ width:56.667%; }
	.col_sm_8{ width:65%; }
	.col_sm_9{ width:73.333%; }
	.col_sm_10{ width:81.667%; }
	.col_sm_11{ width:90%; }
	.col_sm_12{ width:98.333%; }
}


/*960pxからはPC*/
@media screen and ( min-width : 960px ){
	.container{
		width:960px;
		padding-right:8px;
		padding-left:8px;
		margin-right:auto;
		margin-left:auto;
	}

	.row{
		margin-right:-8px;
		margin-left:-8px;
	}

	.col_1,.col_2,.col_3,.col_4,.col_5,.col_6,.col_7,.col_8,.col_9,.col_10,.col_11,.col_12{
		margin:0 8px;
	}

	/*12col px指定*/
	.col_1{ width:64px; }
	.col_2{ width:144px; }
	.col_3{ width:224px; }
	.col_4{ width:304px; }
	.col_5{ width:384px; }
	.col_6{ width:464px; }
	.col_7{ width:544px; }
	.col_8{ width:624px; }
	.col_9{ width:704px; }
	.col_10{ width:784px; }
	.col_11{ width:864px; }
	.col_12{ width:944px; }
}