@charset "UTF-8";

/*	12 COLUMN : RESPONSIVE GRID SYSTEM
	DEVELOPER : DENIS LEBLANC
	URL : http://responsive.gs
	VERSION : 3.0
	LICENSE : GPL & MIT */
/* 	SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(/scripts/boxsizing.htc);
	/*	If you need support for IE7 and lower make
  	sure the boxsizing.htc file is linked properly.
  	More info here:  https://github.com/Schepp/box-sizing-polyfill */
}

/*	MAIN CONTAINER
	Set the width to whatever you want the width of your site to be. */
.container {
	max-width: 1120px;
	margin: 0 auto;
	position: relative;
	padding: 0;

	@media (min-width : 769px) {
		padding: 0 10px;
	}
}

.container_990 {
	max-width: 990px;
	margin: 0 auto;
	position: relative;
}
.container_820 {
	max-width: 790px;
	margin: 0 auto;
	position: relative;
}
.container-fluid {
	margin: 0 auto;
	padding: 0 3%;
	position: relative;
}

/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.container:after,
.container-fluid:after,
.container_1280:after,
.row:after,
.col:after,
.clr:after,
.group:after {
	content: "";
	display: table;
	clear: both;
}

/* 	DEFAULT ROW STYLES
	Set bottom padding according to preference */
.row {
	padding-bottom: 0em;
}

/* DEFAULT COLUMN STYLES */
.col {
	display: block;
	float: left;
	width: 100%;
}

@media (min-width: 768px) {
	.gutters .col {
		margin-left: 2%;
	}

	.gutters .col:first-child {
		margin-left: 0;
	}
}

@media (min-width: 769px) {
	.sp_only {
		display: none;
	}
}

/*	COLUMN WIDTH ON DISPLAYS +768px
	You might need to play with media queries here to suite your design. */
/******************************************************************************************
  PC用のデザインに適用
*******************************************************************************************/
@media (min-width: 768px) {
	.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%;
	}

	.gutters .span_1 {
		width: 6.5%;
	}

	.gutters .span_2 {
		width: 15.0%;
	}

	.gutters .span_3 {
		width: 23.5%;
	}

	.gutters .span_4 {
		width: 32.0%;
	}

	.gutters .span_5 {
		width: 40.5%;
	}

	.gutters .span_6 {
		width: 49.0%;
	}

	.gutters .span_7 {
		width: 57.5%;
	}

	.gutters .span_8 {
		width: 66.0%;
	}

	.gutters .span_9 {
		width: 74.5%;
	}

	.gutters .span_10 {
		width: 83.0%;
	}

	.gutters .span_11 {
		width: 91.5%;
	}

	.gutters .span_12 {
		width: 100%;
	}
}