/* ---- Clearfixes ---- */
.row:before,.row:after,.clearfix:before,.clearfix:after{content:'';display:table}
.row:after,.clearfix:after{clear:both}
.row,.clearfix{zoom:1}

/* ---- GRID Layout ---- */
*{box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

.grid{margin:0 auto; max-width:1200px; width:100%;} /* You can choose the grid 1200 or 1140 or 1024 or 960 as per your requirement */
.g1140{margin:0 auto; max-width:1140px; width:100%;}
.g1024{margin:0 auto; max-width:1024px; width:100%;}
.g960{margin:0 auto; max-width:960px; width:100%;}
.row{width:100%; margin:0 auto;}
.c1{width:8.33%;}
.c2{width:16.66%;}
.c3{width:25%;}
.c4{width:33.33%;}
.c5{
	width:41.66%;
	height: 280px;
	padding: 5px;
}
.c6{width:50%;}
.c7{width:58.33%;}
.c8{
	width:66.66%;
	color: #666666;
	font-size: 12px;
	letter-spacing: 1px;
}

.c9{width:75%;}
.c10{width:83.33%;}
.c11{width:91.66%;}
.c12{
	width:100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 30px;
}
.c12 .one_half {
	text-align: left;
	margin-left: 0px;
}
.c12 .one_half img {
	margin-left: 5px;
}
.c12 img {
	margin-left: auto;
	margin-bottom: 100px;
	margin-right: auto;
	width: 100%;
}
.c12 .one_half p {
	text-align: left;
	padding-right: 15px;
}
.c12 h2 {
	font-size: 45px;
	line-height: 60px;
	margin-right: 5%;
	margin-left: 5%;
	text-align: center;
	color: #666666;
	font-family: "メイリオ";
	margin-bottom: 70px;
}
.c12 p {
	font-size: 20px;
	line-height: 30px;
	text-align: center;
	margin-bottom: 100px;
}

.c12 h3 {
	font-size: 40px;
	line-height: 60px;
	margin-right: 3%;
	margin-left: 3%;
	text-align: center;
	color: #666666;
	font-family: "メイリオ";
}
.c12 p {
	font-size: 20px;
	line-height: 30px;
	text-align: left;
	margin-bottom: 50px;
}

.c1-5{width:20%;}/* This column can be used as a one fifth of the row */
.c1-8{width:12.5%;}/* This column can be used as a one eigth of the row */ 
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12,.c1-5,.c1-8 {min-height:1px; float:left; padding-left:10px; padding-right:10px; position:relative;}
.row .row{margin-left:-10px;}


/* =Media query for 960 Screens - sets nested grids to 100%
-------------------------------------------------------------- */
@media only screen and (max-width:960px){
.row .row .c1,.row .row .c2,.row .row .c3,.row .row .c4,.row .row .c5,.row .row .c6,.row .row .c7,.row .row .c8,.row .row .c9,.row .row .c10,.row .row .c11,.row .row .c12,.row .row .c1-5,.row .row .c1-8{width:100%;margin-bottom:20px;margin-left:0px;margin-right:0px; }
.row .row > div:last-child{margin-bottom:0 !important}
}

/* =Media query for iPad and tablets
-------------------------------------------------------------- */
@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){
body{font-size:90%}
.row{margin-bottom:0!important}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12,.c1-5,.c1-8{width:100%;margin-right:0;margin-left:0;margin-bottom:5px}
}