.flex{ display:flex; }

/* 方向 */
.flex								{ flex-direction:row; }
.flex.reverse						{ flex-direction:row-reverse; }
.flex.col							{ flex-direction:column; }
.flex.col.reverse					{ flex-direction:column-reverse; }
@media screen and (max-width: 768px){
	.flex:not(.keep),
	.flex:not(.keep).reverse,
	.flex:not(.keep).col,
	.flex:not(.keep).col.reverse	{ flex-direction:column; }
}

/* 余白 */
.flex.between{
	justify-content:space-between;
	margin:-20px;
}
.flex.around{
	justify-content:space-around;
	margin:20px;
}
.flex.between > *,
.flex.around > *{
	padding:20px;
	box-sizing:border-box;
}
@media screen and (max-width: 768px){
	.flex.half.between{ margin:-10px; }
	.flex.half.around{ margin:10px; }
	.flex.half.between > *,
	.flex.half.around > *{ padding:10px; }
}

/* 水平配置 */
.flex.center	{ justify-content:center; }
.flex.left		{ justify-content:flex-start; }
.flex.right		{ justify-content:flex-end; }

/* 垂直位置 */
.flex.top		{ align-items:flex-start; }
.flex.middle	{ align-items:center; }
.flex.bottom	{ align-items:flex-end; }

/* 水平垂直配置 */
.flex.centercenter{
	align-items:center;
	justify-content:center;
	align-content:center;
}

/* 複数段 */
.flex.grid{ flex-wrap:wrap; }
.flex.split2 > *					{ width:50%; }
.flex.split3 > *					{ width:33.3333%; }
.flex.split4 > *					{ width:25%; }
.flex.split5 > *					{ width:20%; }
.flex.split6 > *					{ width:16.6666%; }
.flex.split7 > *					{ width:14.2857%; }
.flex.split8 > *					{ width:10%; }
.flex.split9 > *					{ width:11.1111%; }
.flex.split2-1 > :nth-child(odd)	{ width:66.6666%; }
.flex.split2-1 > :nth-child(even)	{ width:33.3333%; }
.flex.split1-2 > :nth-child(odd)	{ width:33.3333%; }
.flex.split1-2 > :nth-child(even)	{ width:66.6666%; }
.flex.split3-1 > :nth-child(odd)	{ width:75%; }
.flex.split3-1 > :nth-child(even)	{ width:25%; }
.flex.split1-3 > :nth-child(odd)	{ width:25%; }
.flex.split1-3 > :nth-child(even)	{ width:75%; }
.flex.split4-2 > :nth-child(odd)	{ width:25%; }
.flex.split4-2 > :nth-child(even)	{ width:75%; }
.flex.split1-p > :nth-child(odd)	{ width:38.2%; }
.flex.split1-p > :nth-child(even)	{ width:61.8%; }
.flex.splitp-1 > :nth-child(odd)	{ width:61.8%; }
.flex.splitp-1 > :nth-child(even)	{ width:38.2%; }
@media screen and (max-width: 768px){
	.flex.split2:not(.keep) > *,
	.flex.split3:not(.keep) > *,
	.flex.split4:not(.keep) > *,
	.flex.split5:not(.keep) > *,
	.flex.split6:not(.keep) > *,
	.flex.split7:not(.keep) > *,
	.flex.split8:not(.keep) > *,
	.flex.split9:not(.keep) > *,
	.flex.split2-1:not(.keep) > :nth-child(n),
	.flex.split1-2:not(.keep) > :nth-child(n),
	.flex.split3-1:not(.keep) > :nth-child(n),
	.flex.split1-3:not(.keep) > :nth-child(n),
	.flex.split1-p:not(.keep) > :nth-child(n),
	.flex.splitp-1:not(.keep) > :nth-child(n)
	{ width:100%; }
}

/* 配分 */
/*
.flex.golden.between:not(.reverse) > *:nth-child(1),
.flex.golden.between.reverse > *:nth-child(2)				{ margin:0 20px 0 0; }
.flex.golden.between:not(.reverse) > *:nth-child(2),
.flex.golden.between.reverse > *:nth-child(1)				{ margin:0 0 0 20px; }
.flex.golden.around:not(.reverse) > *:nth-child(1)
.flex.golden.around:.reverse > *:nth-child(2)				{ margin:40px 20px 40px 40px; }
.flex.golden.around:not(.reverse) > *:nth-child(2),
.flex.golden.around:.reverse > *:nth-child(1)				{ margin:40px 40px 40px 20px; }
.flex.golden > :nth-child(2) ~ *							{ display:none; }
.flex.golden > :nth-child(odd)								{ width:61.8%; }
.flex.golden > :nth-child(even)								{ width:38.2%; }
@media screen and (max-width: 768px){
	.flex.golden > :nth-child(n)							{ width:100%; }
	.flex.golden.between:not(.reverse) > :nth-child(1),
	.flex.golden.between.reverse > :nth-child(2)			{ margin:0 0 20px 0; }
	.flex.golden.between:not(.reverse) > :nth-child(2),
	.flex.golden.between.reverse > :nth-child(1)			{ margin:20px 0 0 0; }
	.flex.golden.around:not(.reverse) > :nth-child(1),
	.flex.golden.around.reverse > :nth-child(2)				{ margin:40px 40px 20px 40px; }
	.flex.golden.around:not(.reverse) > :nth-child(2),
	.flex.golden.around.reverse > :nth-child(1)				{ margin:20px 40px 40px 40px; }
}
*/

/*
【justify-content】左右の整列方法
flex-start		左揃え
flex-end		右揃え
center			中央揃え
space-between	均等配置
space-around	均等配置(両端余白あり)

【align-items】上下の整列方法
flex-start		上揃え
flex-end		下揃え
center			中央揃え
baseline		文字のベースライン揃え
stretch			コンテンツ高に伸張

【align-self】

【align-content】
flex-start		 ⇒ flexコンテナの始端から並びます。
flex-end		 ⇒ flex コンテナの終端に、flexアイテムの終端が合うように並びます。
center			 ⇒ flex コンテナの中央に並びます。
space-between	 ⇒ flex コンテナの中で均等に分布されます。
space-around	 ⇒ 始端と終端に空間が生まれます。その空間はflexアイテム同士の間隔の半分の幅です。
stretch			 ⇒ flexコンテナ内に余白が生まれないようにflexアイテムが伸びます。
*/

/* オプション */
/*
.reverse{ flex-direction:row-reverse; }
.center{
	display:flex;
	justify-content:center;
}
.around{
	display:flex;
	justify-content:space-around;
}
.grid{
	display:flex;
	flex-wrap:wrap;
}
.golden{
	display:flex;
	margin-left:-40px;
}
.split{
	margin-left:-40px;
	margin-top:-40px;
}
.split > *{
	margin-left:40px;
	margin-top:40px;
}
.flexsplit > *{
	width:100%;
	margin-left:40px;
}
.flexgolden > img{
	width:61.8%;
	margin-left:40px;
	height:100%;
}
.flexgolden > :not(img){
	width:38.2%;
	margin-left:40px;
}
.flexgolden.small > img{ width:38.2%; }
.flexgolden.small > :not(img){ width:61.8%; }
[$bp('sp')]{
	.flex,
	.flexcenter,
	.flexaround,
	.flexgrid,
	.flexsplit,
	.flexgolden{ flex-direction:column; }
	.flexsplit,
	.flexsplit > *,
	.flexgolden,
	.flexgolden > img,
	.flexgolden > :not(img){ margin-left:0; }
	.split{
		margin-top:0;
		margin-left:0;
	}
	.flexsplit > *:not(:last-child),
	.flexgolden > *:not(:last-child){ margin-bottom:40px; }
	.flexgolden > img,
	.flexgolden > :not(img){ width:100%; }
}
*/