/* ---------------
 grid system
--------------- */
// コンテナー
.acms-container{
	max-width: 940px;
	margin-right: auto;
	margin-left: auto;
	padding-right: @grid-space;
	padding-left: @grid-space;
}

.acms-grid-r .acms-container {
	@media screen and (max-width: 479px){
		padding-right: @mobile-grid-space;
		padding-left: @mobile-grid-space;
	}
}

// グリッド
.acms-grid,
.acms-grid-r {
	margin-right: @negative-grid-space;
	margin-left: @negative-grid-space;
	.clearfix();
}

[class*='acms-col'] {
	float: left;
	min-height: 1px;
	padding-right: @grid-space;
	padding-left: @grid-space;
}

.acms-grid-r {

	[class*='acms-col'] {
		@media screen and (max-width: 479px){
			padding-right: @mobile-grid-space;
			padding-left: @mobile-grid-space;
		}
	}
}

[class*='acms-col'],
.acms-col-1:before,
.acms-col-2:before,
.acms-col-3:before,
.acms-col-4:before,
.acms-col-5:before,
.acms-col-6:before,
.acms-col-7:before,
.acms-col-8:before,
.acms-col-9:before,
.acms-col-10:before,
.acms-col-11:before,
.acms-col-12:before,
.acms-col-1:after,
.acms-col-2:after,
.acms-col-3:after,
.acms-col-4:after,
.acms-col-5:after,
.acms-col-6:after,
.acms-col-7:after,
.acms-col-8:after,
.acms-col-9:after,
.acms-col-10:after,
.acms-col-11:after,
.acms-col-12:after{
	.box-sizing(border-box);
}

// --------------- 
// 幅
// ---------------
// 1カラム
.acms-col-1{
	width: @acms-col-1;
}
// 2カラム
.acms-col-2{
	width: @acms-col-2;
}
// 3カラム
.acms-col-3{
	width: @acms-col-3;
}
// 4カラム
.acms-col-4{
	width: @acms-col-4;
}
// 5カラム
.acms-col-5{
	width: @acms-col-5;
}
// 6カラム
.acms-col-6{
	width: @acms-col-6;
}
// 7カラム
.acms-col-7{
	width: @acms-col-7;
}
// 8カラム
.acms-col-8{
	width: @acms-col-8;
}
// 9カラム
.acms-col-9{
	width: @acms-col-9;
}
// 10カラム
.acms-col-10{
	width: @acms-col-10;
}
// 11カラム
.acms-col-11{
	width: @acms-col-11;
}
// 12カラム
.acms-col-12{
	float: none;
	width: @acms-col-12;
}

// --------------- 
// pushとpull
// ---------------
[class*='acms-push'],
[class*='acms-pull']{
	position: relative;
}
// --------------- 
// push 左の位置
// ---------------
// 1カラム
.acms-push-1{
	left: @acms-col-1;
}
// 2カラム
.acms-push-2{
	left: @acms-col-2;
}
// 3カラム
.acms-push-3{
	left: @acms-col-3;
}
// 4カラム
.acms-push-4{
	left: @acms-col-4;
}
// 5カラム
.acms-push-5{
	left: @acms-col-5;
}
// 6カラム
.acms-push-6{
	left: @acms-col-6;
}
// 7カラム
.acms-push-7{
	left: @acms-col-7;
}
// 8カラム
.acms-push-8{
	left: @acms-col-8;
}
// 9カラム
.acms-push-9{
	left: @acms-col-9;
}
// 10カラム
.acms-push-10{
	left: @acms-col-10;
}
// 11カラム
.acms-push-11{
	left: @acms-col-11;
}

// --------------- 
// pull 右の位置
// ---------------
// 1カラム
.acms-pull-1{
	right: @acms-col-1;
}
// 2カラム
.acms-pull-2{
	right: @acms-col-2;
}
// 3カラム
.acms-pull-3{
	right: @acms-col-3;
}
// 4カラム
.acms-pull-4{
	right: @acms-col-4;
}
// 5カラム
.acms-pull-5{
	right: @acms-col-5;
}
// 6カラム
.acms-pull-6{
	right: @acms-col-6;
}
// 7カラム
.acms-pull-7{
	right: @acms-col-7;
}
// 8カラム
.acms-pull-8{
	right: @acms-col-8;
}
// 9カラム
.acms-pull-9{
	right: @acms-col-9;
}
// 10カラム
.acms-pull-10{
	right: @acms-col-10;
}
// 11カラム
.acms-pull-11{
	right: @acms-col-11;
}

// --------------- 
// スマートフォンのとき
// ---------------
@media (max-width: 768px) {
	// コンテナー
	.acms-container{
		width: auto;
	}
	.acms-grid-r [class*='acms-col']{
		float: none;
		width: @mobile-grid;
		margin-bottom: 10px;
	}
	// pull カラム
	.acms-grid-r [class*='acms-pull']{
		position: static;
		left: auto;
		right: auto;
	}
}

@media (max-width: 479px) {
	// カラム
	.acms-grid-r [class*='acms-col']{
		float: none;
		width: @acms-col-12;
		margin-bottom: 10px;
	}
}

//--------------- 
//タブレット幅のグリッド
//--------------- 
@media (max-width: 768px) {
	.acms-grid-r {

		[class*='acms-col-md'] {
			float: left;
			padding-right: @grid-space;
			padding-left: @grid-space;
		}

		// --------------- 
		// 幅
		// ---------------

		// 1カラム
		.acms-col-md-1{
			width: @acms-col-1;
		}
		// 2カラム
		.acms-col-md-2{
			width: @acms-col-2;
		}
		// 3カラム
		.acms-col-md-3{
			width: @acms-col-3;
		}
		// 4カラム
		.acms-col-md-4{
			width: @acms-col-4;
		}
		// 5カラム
		.acms-col-md-5{
			width: @acms-col-5;
		}
		// 6カラム
		.acms-col-md-6{
			width: @acms-col-6;
		}
		// 7カラム
		.acms-col-md-7{
			width: @acms-col-7;
		}
		// 8カラム
		.acms-col-md-8{
			width: @acms-col-8;
		}
		// 9カラム
		.acms-col-md-9{
			width: @acms-col-9;
		}
		// 10カラム
		.acms-col-md-10{
			width: @acms-col-10;
		}
		// 11カラム
		.acms-col-md-11{
			width: @acms-col-11;
		}
		// 12カラム
		.acms-col-md-12{
			float: none;
			width: @acms-col-12;
		}

		// --------------- 
		// push 左の位置
		// ---------------
		[class*='acms-push-md'] {
			position: relative;
			right: auto;
		}
		// pushしない
		.acms-push-md-auto{
			left: auto;
		}
		// 1カラム
		.acms-push-md-1{
			left: @acms-col-1;
		}
		// 2カラム
		.acms-push-md-2{
			left: @acms-col-2;
		}
		// 3カラム
		.acms-push-md-3{
			left: @acms-col-3;
		}
		// 4カラム
		.acms-push-md-4{
			left: @acms-col-4;
		}
		// 5カラム
		.acms-push-md-5{
			left: @acms-col-5;
		}
		// 6カラム
		.acms-push-md-6{
			left: @acms-col-6;
		}
		// 7カラム
		.acms-push-md-7{
			left: @acms-col-7;
		}
		// 8カラム
		.acms-push-md-8{
			left: @acms-col-8;
		}
		// 9カラム
		.acms-push-md-9{
			left: @acms-col-9;
		}
		// 10カラム
		.acms-push-md-10{
			left: @acms-col-10;
		}
		// 11カラム
		.acms-push-md-11{
			left: @acms-col-11;
		}

		// --------------- 
		// pull 右の位置
		// ---------------
		[class*='acms-pull-md'] {
			position: relative;
			left: auto;
		}
		// pullしない
		.acms-pull-md-auto{
			right: auto;
		}
		// 1カラム
		.acms-pull-md-1{
			right: @acms-col-1;
		}
		// 2カラム
		.acms-pull-md-2{
			right: @acms-col-2;
		}
		// 3カラム
		.acms-pull-md-3{
			right: @acms-col-3;
		}
		// 4カラム
		.acms-pull-md-4{
			right: @acms-col-4;
		}
		// 5カラム
		.acms-pull-md-5{
			right: @acms-col-5;
		}
		// 6カラム
		.acms-pull-md-6{
			right: @acms-col-6;
		}
		// 7カラム
		.acms-pull-md-7{
			right: @acms-col-7;
		}
		// 8カラム
		.acms-pull-md-8{
			right: @acms-col-8;
		}
		// 9カラム
		.acms-pull-md-9{
			right: @acms-col-9;
		}
		// 10カラム
		.acms-pull-md-10{
			right: @acms-col-10;
		}
		// 11カラム
		.acms-pull-md-11{
			right: @acms-col-11;
		}
	}
}

//--------------- 
//スマートフォン幅のグリッド
//--------------- 
@media (max-width: 479px) {
	// カラム
	.acms-grid-r {
		[class*='acms-col-sm'] {
			float: left;
			padding-right: @grid-space;
			padding-left: @grid-space;
		}
		// --------------- 
		// 幅
		// ---------------
		// 1カラム
		.acms-col-sm-1{
			width: @acms-col-1;
		}
		// 2カラム
		.acms-col-sm-2{
			width: @acms-col-2;
		}
		// 3カラム
		.acms-col-sm-3{
			width: @acms-col-3;
		}
		// 4カラム
		.acms-col-sm-4{
			width: @acms-col-4;
		}
		// 5カラム
		.acms-col-sm-5{
			width: @acms-col-5;
		}
		// 6カラム
		.acms-col-sm-6{
			width: @acms-col-6;
		}
		// 7カラム
		.acms-col-sm-7{
			width: @acms-col-7;
		}
		// 8カラム
		.acms-col-sm-8{
			width: @acms-col-8;
		}
		// 9カラム
		.acms-col-sm-9{
			width: @acms-col-9;
		}
		// 10カラム
		.acms-col-sm-10{
			width: @acms-col-10;
		}
		// 11カラム
		.acms-col-sm-11{
			width: @acms-col-11;
		}
		// 12カラム
		.acms-col-sm-12{
			float: none;
			width: @acms-col-12;
		}

		// --------------- 
		// push 左の位置
		// ---------------
		[class*='acms-push-sm'] {
			position: relative;
			right: auto;
		}
		// pushしない
		.acms-push-sm-auto{
			left: auto;
		}
		// 1カラム
		.acms-push-sm-1{
			left: @acms-col-1;
		}
		// 2カラム
		.acms-push-sm-2{
			left: @acms-col-2;
		}
		// 3カラム
		.acms-push-sm-3{
			left: @acms-col-3;
		}
		// 4カラム
		.acms-push-sm-4{
			left: @acms-col-4;
		}
		// 5カラム
		.acms-push-sm-5{
			left: @acms-col-5;
		}
		// 6カラム
		.acms-push-sm-6{
			left: @acms-col-6;
		}
		// 7カラム
		.acms-push-sm-7{
			left: @acms-col-7;
		}
		// 8カラム
		.acms-push-sm-8{
			left: @acms-col-8;
		}
		// 9カラム
		.acms-push-sm-9{
			left: @acms-col-9;
		}
		// 10カラム
		.acms-push-sm-10{
			left: @acms-col-10;
		}
		// 11カラム
		.acms-push-sm-11{
			left: @acms-col-11;
		}

		// --------------- 
		// pull 右の位置
		// ---------------
		[class*='acms-pull-sm'] {
			position: relative;
			left: auto;
		}
		// pullしない
		.acms-pull-sm-auto{
			right: auto;
		}
		// 1カラム
		.acms-pull-sm-1{
			right: @acms-col-1;
		}
		// 2カラム
		.acms-pull-sm-2{
			right: @acms-col-2;
		}
		// 3カラム
		.acms-pull-sm-3{
			right: @acms-col-3;
		}
		// 4カラム
		.acms-pull-sm-4{
			right: @acms-col-4;
		}
		// 5カラム
		.acms-pull-sm-5{
			right: @acms-col-5;
		}
		// 6カラム
		.acms-pull-sm-6{
			right: @acms-col-6;
		}
		// 7カラム
		.acms-pull-sm-7{
			right: @acms-col-7;
		}
		// 8カラム
		.acms-pull-sm-8{
			right: @acms-col-8;
		}
		// 9カラム
		.acms-pull-sm-9{
			right: @acms-col-9;
		}
		// 10カラム
		.acms-pull-sm-10{
			right: @acms-col-10;
		}
		// 11カラム
		.acms-pull-sm-11{
			right: @acms-col-11;
		}

	}
}

// --------------- 
// エントリー(.acms-entry)内グリッド
// ---------------

.acms-entry .acms-grid-r .acms-col-12 {
	clear: both;
}

// エントリーの幅になったときは全体を1カラムにするが、
// エントリー内は保ったまま
@media screen and (max-width: 768px){ 
.acms-grid-r .acms-entry {

		[class*='acms-col'] {
			float: left;
		}

		.acms-col-12 {
			width: @acms-col-12;
		}

		.acms-col-11 {
			width: @acms-col-11;
		}

		.acms-col-10 {
			width: @acms-col-10;
		}

		.acms-col-9 {
			width: @acms-col-9;
		}

		.acms-col-8 {
			width: @acms-col-8;
		}

		.acms-col-7 {
			width: @acms-col-7;
		}

		.acms-col-6 {
			width: @acms-col-6;
		}

		.acms-col-5 {
			width: @acms-col-5;
		}

		.acms-col-4 {
			width: @acms-col-4;
		}

		.acms-col-3 {
			width: @acms-col-3;
		}

		.acms-col-2 {
			width: @acms-col-2;
		}

		.acms-col-1 {
			width: @acms-col-1;
		}

		[class*='acms-col-md'] {
			float: left;
			padding-right: @grid-space;
			padding-left: @grid-space;
		}

		// --------------- 
		// 幅
		// ---------------

		// 1カラム
		.acms-col-md-1{
			width: @acms-col-1;
		}
		// 2カラム
		.acms-col-md-2{
			width: @acms-col-2;
		}
		// 3カラム
		.acms-col-md-3{
			width: @acms-col-3;
		}
		// 4カラム
		.acms-col-md-4{
			width: @acms-col-4;
		}
		// 5カラム
		.acms-col-md-5{
			width: @acms-col-5;
		}
		// 6カラム
		.acms-col-md-6{
			width: @acms-col-6;
		}
		// 7カラム
		.acms-col-md-7{
			width: @acms-col-7;
		}
		// 8カラム
		.acms-col-md-8{
			width: @acms-col-8;
		}
		// 9カラム
		.acms-col-md-9{
			width: @acms-col-9;
		}
		// 10カラム
		.acms-col-md-10{
			width: @acms-col-10;
		}
		// 11カラム
		.acms-col-md-11{
			width: @acms-col-11;
		}
		// 12カラム
		.acms-col-md-12{
			float: none;
			width: @acms-col-12;
		}

		// --------------- 
		// push 左の位置
		// ---------------
		[class*='acms-push-md'] {
			position: relative;
			right: auto;
		}
		// 1カラム
		.acms-push-md-1{
			left: @acms-col-1;
		}
		// 2カラム
		.acms-push-md-2{
			left: @acms-col-2;
		}
		// 3カラム
		.acms-push-md-3{
			left: @acms-col-3;
		}
		// 4カラム
		.acms-push-md-4{
			left: @acms-col-4;
		}
		// 5カラム
		.acms-push-md-5{
			left: @acms-col-5;
		}
		// 6カラム
		.acms-push-md-6{
			left: @acms-col-6;
		}
		// 7カラム
		.acms-push-md-7{
			left: @acms-col-7;
		}
		// 8カラム
		.acms-push-md-8{
			left: @acms-col-8;
		}
		// 9カラム
		.acms-push-md-9{
			left: @acms-col-9;
		}
		// 10カラム
		.acms-push-md-10{
			left: @acms-col-10;
		}
		// 11カラム
		.acms-push-md-11{
			left: @acms-col-11;
		}

		// --------------- 
		// pull 右の位置
		// ---------------
		[class*='acms-pull-md'] {
			position: relative;
			left: auto;
		}
		// 1カラム
		.acms-pull-md-1{
			right: @acms-col-1;
		}
		// 2カラム
		.acms-pull-md-2{
			right: @acms-col-2;
		}
		// 3カラム
		.acms-pull-md-3{
			right: @acms-col-3;
		}
		// 4カラム
		.acms-pull-md-4{
			right: @acms-col-4;
		}
		// 5カラム
		.acms-pull-md-5{
			right: @acms-col-5;
		}
		// 6カラム
		.acms-pull-md-6{
			right: @acms-col-6;
		}
		// 7カラム
		.acms-pull-md-7{
			right: @acms-col-7;
		}
		// 8カラム
		.acms-pull-md-8{
			right: @acms-col-8;
		}
		// 9カラム
		.acms-pull-md-9{
			right: @acms-col-9;
		}
		// 10カラム
		.acms-pull-md-10{
			right: @acms-col-10;
		}
		// 11カラム
		.acms-pull-md-11{
			right: @acms-col-11;
		}
	}
}

// スマートフォンの幅になったときは1カラムにする
@media screen and (max-width: 479px){ 

	.acms-grid-r .acms-entry {
			[class*='acms-col']{
			float: none;
			width: @mobile-grid;
		}

		[class*='acms-col-sm'] {
			float: left;
			padding-right: @grid-space;
			padding-left: @grid-space;
		}

		// --------------- 
		// 幅
		// ---------------
		// 1カラム
		.acms-col-sm-1{
			width: @acms-col-1;
		}
		// 2カラム
		.acms-col-sm-2{
			width: @acms-col-2;
		}
		// 3カラム
		.acms-col-sm-3{
			width: @acms-col-3;
		}
		// 4カラム
		.acms-col-sm-4{
			width: @acms-col-4;
		}
		// 5カラム
		.acms-col-sm-5{
			width: @acms-col-5;
		}
		// 6カラム
		.acms-col-sm-6{
			width: @acms-col-6;
		}
		// 7カラム
		.acms-col-sm-7{
			width: @acms-col-7;
		}
		// 8カラム
		.acms-col-sm-8{
			width: @acms-col-8;
		}
		// 9カラム
		.acms-col-sm-9{
			width: @acms-col-9;
		}
		// 10カラム
		.acms-col-sm-10{
			width: @acms-col-10;
		}
		// 11カラム
		.acms-col-sm-11{
			width: @acms-col-11;
		}
		// 12カラム
		.acms-col-sm-12{
			float: none;
			width: @acms-col-12;
		}

		// --------------- 
		// push 左の位置
		// ---------------
		[class*='acms-push-sm'] {
			position: relative;
			right: auto;
		}
		// 1カラム
		.acms-push-sm-1{
			left: @acms-col-1;
		}
		// 2カラム
		.acms-push-sm-2{
			left: @acms-col-2;
		}
		// 3カラム
		.acms-push-sm-3{
			left: @acms-col-3;
		}
		// 4カラム
		.acms-push-sm-4{
			left: @acms-col-4;
		}
		// 5カラム
		.acms-push-sm-5{
			left: @acms-col-5;
		}
		// 6カラム
		.acms-push-sm-6{
			left: @acms-col-6;
		}
		// 7カラム
		.acms-push-sm-7{
			left: @acms-col-7;
		}
		// 8カラム
		.acms-push-sm-8{
			left: @acms-col-8;
		}
		// 9カラム
		.acms-push-sm-9{
			left: @acms-col-9;
		}
		// 10カラム
		.acms-push-sm-10{
			left: @acms-col-10;
		}
		// 11カラム
		.acms-push-sm-11{
			left: @acms-col-11;
		}

		// --------------- 
		// pull 右の位置
		// ---------------
		[class*='acms-pull-sm'] {
			position: relative;
			left: auto;
		}
		// 1カラム
		.acms-pull-sm-1{
			right: @acms-col-1;
		}
		// 2カラム
		.acms-pull-sm-2{
			right: @acms-col-2;
		}
		// 3カラム
		.acms-pull-sm-3{
			right: @acms-col-3;
		}
		// 4カラム
		.acms-pull-sm-4{
			right: @acms-col-4;
		}
		// 5カラム
		.acms-pull-sm-5{
			right: @acms-col-5;
		}
		// 6カラム
		.acms-pull-sm-6{
			right: @acms-col-6;
		}
		// 7カラム
		.acms-pull-sm-7{
			right: @acms-col-7;
		}
		// 8カラム
		.acms-pull-sm-8{
			right: @acms-col-8;
		}
		// 9カラム
		.acms-pull-sm-9{
			right: @acms-col-9;
		}
		// 10カラム
		.acms-pull-sm-10{
			right: @acms-col-10;
		}
		// 11カラム
		.acms-pull-sm-11{
			right: @acms-col-11;
		}
	}
}
