/**
 * グリッド
 * @description 横グリッドクラス群
 * @version 1.0
 * @updated 2016.08.08
 * @class .grid:2〜9 ノーマルグリッド
 * @class .grid:2-1 2:1グリッド
 * @class .grid:1-2 1:2グリッド
 * @class .grid:right 右寄せ
 * @class .grid:inside10 内側の間隔
 * @class .grid:outside10 外側・内側の間隔
 * @caution 1つのボックス幅がネガティブマージン((グリッド数-1)*margin量)を下回った時、レイアウト崩れを起こす
----------------------------------------------------------------------------------------------------*/
@media all{

	/* 全体共通 */
	[class*="grid:"]{
		display:block;
		min-height:1px;
	}
	[class*="grid:"]::after{
		display:block;
		clear:both;
		height:0px;
		visibility:hidden;
		content:'.';
	}
	[class*="grid:"] > *{ float:left; }
	.grid\:right > *{ float:right; }
	
	/* 横幅 */
	.grid\:2-1 > :nth-child(2n+1),
	.grid\:1-2 > :nth-child(2n+2)	{ width:66.666%; }
	.grid\:2 > *					{ width:50.000%; }
	.grid\:2-1 > :nth-child(2n+2),
	.grid\:1-2 > :nth-child(2n+1),
	.grid\:3 > *					{ width:33.333%; }
	.grid\:4 > *					{ width:25.000%; }
	.grid\:5 > *					{ width:20.000%; }
	.grid\:6 > *					{ width:16.666%; }
	.grid\:7 > *					{ width:14.285%; }
	.grid\:8 > *					{ width:12.500%; }
	.grid\:9 > *					{ width:11.111%; }
	
	/* 内間隔 */
	.grid\:inside10.grid\:2-1,
	.grid\:inside10.grid\:1-2,
	.grid\:inside10.grid\:2								{ padding-right:10px; }
	.grid\:inside10.grid\:3								{ padding-right:20px; }
	.grid\:inside10.grid\:4								{ padding-right:30px; }
	.grid\:inside10.grid\:5								{ padding-right:40px; }
	.grid\:inside10.grid\:6								{ padding-right:50px; }
	.grid\:inside10.grid\:7								{ padding-right:60px; }
	.grid\:inside10.grid\:8								{ padding-right:70px; }
	.grid\:inside10.grid\:9								{ padding-right:80px; }
	.grid\:inside10 > *									{ margin-right:10px; }
	.grid\:inside10.grid\:2-1 > :not(:nth-child(-n+2)),
	.grid\:inside10.grid\:1-2 > :not(:nth-child(-n+2)),
	.grid\:inside10.grid\:2 > :not(:nth-child(-n+2)),
	.grid\:inside10.grid\:3 > :not(:nth-child(-n+3)),
	.grid\:inside10.grid\:4 > :not(:nth-child(-n+4)),
	.grid\:inside10.grid\:5 > :not(:nth-child(-n+5)),
	.grid\:inside10.grid\:6 > :not(:nth-child(-n+6)),
	.grid\:inside10.grid\:7 > :not(:nth-child(-n+7)),
	.grid\:inside10.grid\:8 > :not(:nth-child(-n+8)),
	.grid\:inside10.grid\:9 > :not(:nth-child(-n+9))	{ margin-top:10px; }
	.grid\:inside10.grid\:2-1 > :nth-child(2n),
	.grid\:inside10.grid\:1-2 > :nth-child(2n),
	.grid\:inside10.grid\:2 > :nth-child(2n)			{ margin-right:-10px; }
	.grid\:inside10.grid\:3 > :nth-child(3n)			{ margin-right:-20px; }
	.grid\:inside10.grid\:4 > :nth-child(4n)			{ margin-right:-30px; }
	.grid\:inside10.grid\:5 > :nth-child(5n)			{ margin-right:-40px; }
	.grid\:inside10.grid\:6 > :nth-child(6n)			{ margin-right:-50px; }
	.grid\:inside10.grid\:7 > :nth-child(7n)			{ margin-right:-60px; }
	.grid\:inside10.grid\:8 > :nth-child(8n)			{ margin-right:-70px; }
	.grid\:inside10.grid\:9 > :nth-child(9n)			{ margin-right:-80px; }
	
	/* 外間隔 */
	.grid\:outside10.grid\:2-1,
	.grid\:outside10.grid\:1-2,
	.grid\:outside10.grid\:2							{ padding:10px 20px 10px 10px; }
	.grid\:outside10.grid\:3							{ padding:10px 30px 10px 10px; }
	.grid\:outside10.grid\:4							{ padding:10px 40px 10px 10px; }
	.grid\:outside10.grid\:5							{ padding:10px 50px 10px 10px; }
	.grid\:outside10.grid\:6							{ padding:10px 60px 10px 10px; }
	.grid\:outside10.grid\:7							{ padding:10px 70px 10px 10px; }
	.grid\:outside10.grid\:8							{ padding:10px 80px 10px 10px; }
	.grid\:outside10.grid\:9							{ padding:10px 90px 10px 10px; }
	.grid\:outside10 > *								{ margin-right:10px; }
	.grid\:outside10.grid\:2-1 > :not(:nth-child(-n+2)),
	.grid\:outside10.grid\:1-2 > :not(:nth-child(-n+2)),
	.grid\:outside10.grid\:2 > :not(:nth-child(-n+2)),
	.grid\:outside10.grid\:3 > :not(:nth-child(-n+3)),
	.grid\:outside10.grid\:4 > :not(:nth-child(-n+4)),
	.grid\:outside10.grid\:5 > :not(:nth-child(-n+5)),
	.grid\:outside10.grid\:6 > :not(:nth-child(-n+6)),
	.grid\:outside10.grid\:7 > :not(:nth-child(-n+7)),
	.grid\:outside10.grid\:8 > :not(:nth-child(-n+8)),
	.grid\:outside10.grid\:9 > :not(:nth-child(-n+9))	{ margin-top:10px; }
	.grid\:outside10.grid\:2-1 > :nth-child(2n),
	.grid\:outside10.grid\:1-2 > :nth-child(2n),
	.grid\:outside10.grid\:2 > :nth-child(2n)			{ margin-right:-10px; }
	.grid\:outside10.grid\:3 > :nth-child(3n)			{ margin-right:-20px; }
	.grid\:outside10.grid\:4 > :nth-child(4n)			{ margin-right:-30px; }
	.grid\:outside10.grid\:5 > :nth-child(5n)			{ margin-right:-40px; }
	.grid\:outside10.grid\:6 > :nth-child(6n)			{ margin-right:-50px; }
	.grid\:outside10.grid\:7 > :nth-child(7n)			{ margin-right:-60px; }
	.grid\:outside10.grid\:8 > :nth-child(8n)			{ margin-right:-70px; }
	.grid\:outside10.grid\:9 > :nth-child(9n)			{ margin-right:-80px; }

}
@media screen and (max-width: 1024px){

	/* 横幅 */
	.grid\:8 > *					{ width:25.000%; }
	.grid\:9 > *					{ width:33.333%; }
	
	/* 内間隔 */
	.grid\:inside10.grid\:8								{ padding-right:30px; }
	.grid\:inside10.grid\:9								{ padding-right:20px; }
	.grid\:inside10.grid\:8 > :not(:nth-child(-n+8)),
	.grid\:inside10.grid\:9 > :not(:nth-child(-n+9))	{ margin-top:0; }
	.grid\:inside10.grid\:8 > :not(:nth-child(-n+4)),
	.grid\:inside10.grid\:9 > :not(:nth-child(-n+3))	{ margin-top:10px; }
	.grid\:inside10.grid\:8 > :nth-child(8n)			{ margin-right:0; }
	.grid\:inside10.grid\:9 > :nth-child(9n)			{ margin-right:0; }
	.grid\:inside10.grid\:8 > :nth-child(4n)			{ margin-right:-30px; }
	.grid\:inside10.grid\:9 > :nth-child(3n)			{ margin-right:-20px; }
	
	/* 外間隔 */
	.grid\:outside10.grid\:8							{ padding:10px 40px 10px 10px; }
	.grid\:outside10.grid\:9							{ padding:10px 30px 10px 10px; }
	.grid\:outside10.grid\:8 > :not(:nth-child(-n+8)),
	.grid\:outside10.grid\:9 > :not(:nth-child(-n+9))	{ margin-top:0; }
	.grid\:outside10.grid\:8 > :not(:nth-child(-n+4)),
	.grid\:outside10.grid\:9 > :not(:nth-child(-n+3))	{ margin-top:10px; }
	.grid\:outside10.grid\:8 > :nth-child(8n)			{ margin-right:-0; }
	.grid\:outside10.grid\:9 > :nth-child(9n)			{ margin-right:-0; }
	.grid\:outside10.grid\:8 > :nth-child(4n)			{ margin-right:-30px; }
	.grid\:outside10.grid\:9 > :nth-child(3n)			{ margin-right:-20px; }

}
@media screen and (max-width: 768px){

	[class*="grid:"] > :nth-child(n){ float:none; width:auto; }
	[class*="grid:"].grid\:inside10{ padding-right:0; }
	[class*="grid:"].grid\:outside10{ padding-right:10px; }
	[class*="grid:"].grid\:inside10 > :nth-child(n),
	[class*="grid:"].grid\:outside10 > :nth-child(n){ margin-right:0; }
	[class*="grid:"].grid\:inside10 > :not(:first-child),
	[class*="grid:"].grid\:outside10 > :not(:first-child){ margin-top:10px; }

}