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

Grid 996px (PC

*********************************************************************************************/
.container-12 {
	margin: 0 auto;
	width: 996px;
	*zoom: 1;
}

.paragraph,
.container-12:before,
.container-12:after{
	content: " ";
	display: table;
}
.paragraph,
.container-12:after{
	clear: both;
}

.paragraph{
	clear: both;
	width: 100%;
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 {
	display: inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

.alpha {
	margin-left: 0 !important;
}
.omega {
	margin-right: 0 !important;
}
.beta {
	margin-left: 0;
	margin-right: 0;
}


/* 記事部分grid 
------------------------------------------------------------------*/
#article .colm-1,
#article .colm-2,
#article .colm-3,
#article .colm-4,
#article .colm-5,
#article .colm-6,
#article .colm-7,
#article .colm-8,
#article .colm-9,
#article .colm-10,
#article .colm-11,
#article .colm-12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}
#article .colm-1 {
	width:63px;
}

#article .colm-2 {
	width:146px;
}

#article .colm-3 {
	width:229px;
}

#article .colm-4 {
	width:312px;
}

#article .colm-5 {
	width:395px;
}

#article .colm-6 {
	width:478px;
}

#article .colm-7 {
	width:561px;
}

#article .colm-8 {
	width:644px;
}

#article .colm-9 {
	width:727px;
}

#article .colm-10 {
	width:810px;
}

#article .colm-11 {
	width:893px;
}

#article .colm-12 {
	width:976px;
}

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

5.  Grid lt 720px (スマホ

*********************************************************************************************/
	
@media only screen and (max-width: 719px) {


.container-12, .container-16 {
	width: 90%;
}
#article{
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

.colm-1, .colm-2, .colm-3, .colm-4, .colm-5, .colm-6, .colm-7, .colm-8, .colm-9, .colm-10, .colm-11, .colm-12,
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16 {
	clear: both;
	width:100%;
	margin-left: 0px !important;
	margin-right: 0px !important;
}
.alpha {
	margin-left: 0;
}
.omega {
	margin-right: 0;
}
.beta {
	margin-left: 0;
	margin-right: 0;
}
#article .colm-1,#article .colm-2,#article .colm-3,#article .colm-4,#article .colm-5,#article .colm-6,#article .colm-7,#article .colm-8,#article .colm-9,#article .colm-10,#article .colm-11,#article .colm-12,
.container-16 .grid-1, .container-16 .grid-2, .container-16 .grid-3, .container-16 .grid-4, .container-16 .grid-5, .container-16 .grid-6, .container-16 .grid-7, .container-16 .grid-8, .container-16 .grid-9, .container-16 .grid-10, .container-16 .grid-11, .container-16 .grid-12, .container-16 .grid-13, .container-16 .grid-14, .container-16 .grid-15, .container-16 .grid-16, .container-12 .grid-1, .container-12 .grid-2, .container-12 .grid-3, .container-12 .grid-4, .container-12 .grid-5, .container-12 .grid-6, .container-12 .grid-7, .container-12 .grid-8, .container-12 .grid-9, .container-12 .grid-10, .container-12 .grid-11, .container-12 .grid-12 {
	width:100%;
}


}


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

6.  Responsive Image

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


img.scale, img.responsive {
	max-width: 100%;
	height: auto;
}




/* clearfix */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}