/*=======================================

flexbox汎用

=======================================*/

/*---------------------------------------
親要素に指定するプロパティ
---------------------------------------*/
.flex{
	-js-display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
	display:flex;
}

.flex_inline{
	-js-display: inline-flex;
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
	display: inline-flex;
}

/*flex-direction 子要素の並ぶ向き------------------------*/
.fd_r{
	-webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
	-webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.fd_r_r{
	-webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

.fd_c{
	-webkit-box-orient: vertical;
  -webkit-box-direction: normal;
	-webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.fd_c_r{
	-webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
	-webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

/*flex-wrap 子要素の折り返し------------------------*/
.fw_w{
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.fw_nw{
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.fw_w_r{
	-webkit-flex-wrap: wrap-reverse;
	-ms-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;
}

/*justify-content 水平方向の揃え------------------------*/
.jc_fs{
	-webkit-box-pack: start;
	-webkit-justify-content: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.jc_fe{
	-webkit-box-pack: end;
	-webkit-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.jc_c{
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.jc_sb{
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.jc_sa{
	-webkit-justify-content: space-around;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

/*align-items 垂直方向の揃え------------------------*/
.ai_s{
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.ai_fs{
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.ai_fe{
	-webkit-box-align: end;
	-webkit-align-items: flex-end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.ai_c{
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

.ai_b{
	-webkit-box-align: baseline;
	-webkit-align-items: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
}

/*align-content 複数行にした時の揃え------------------------*/
.ac_s{
	-webkit-align-content: stretch;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
}

.ac_fs{
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
}

.ac_fe{
	-ms-flex-line-pack: end;
	align-content: flex-end;
}

.ac_c{
	-webkit-align-content: flex-end;
	-ms-flex-line-pack: center;
	align-content: center;
}

.ac_sb{
	-webkit-align-content: space-between;
	-ms-flex-line-pack: justify;
	align-content: space-between;
}

.ac_sa{
	-webkit-align-content: space-around;
	-ms-flex-line-pack: distribute;
	align-content: space-around;
}

/*---------------------------------------
子要素に指定するプロパティ
---------------------------------------*/

/*order 順序の指定------------------------*/
.order1{
	-webkit-box-ordinal-group:2;
	-webkit-order:1;
	-ms-flex-order:1;
	order:1;
}

.order2{
	-webkit-box-ordinal-group:2;
	-webkit-order:2;
	-ms-flex-order:2;
	order:2;
}

.order3{
	-webkit-box-ordinal-group:2;
	-webkit-order:3;
	-ms-flex-order:3;
	order:3;
}

.order4{
	-webkit-box-ordinal-group:2;
	-webkit-order:4;
	-ms-flex-order:4;
	order:4;
}

.order5{
	-webkit-box-ordinal-group:2;
	-webkit-order:5;
	-ms-flex-order:5;
	order:5;
}

.order6{
	-webkit-box-ordinal-group:2;
	-webkit-order:6;
	-ms-flex-order:6;
	order:6;
}

/*flex-grow 子要素の伸びる比率------------------------*/
.fg_1{
	-webkit-box-flex:1;
	-webkit-flex-grow:1;
	-ms-flex-positive:1;
	flex-grow:1;
}

.fg_2{
	-webkit-box-flex:2;
	-webkit-flex-grow:2;
	-ms-flex-positive:2;
	flex-grow:2;
}

.fg_3{
	-webkit-box-flex:3;
	-webkit-flex-grow:3;
	-ms-flex-positive:3;
	flex-grow:3;
}

/*flex-shrink 子要素の縮む比率------------------------*/
.fs_1{
	-webkit-flex-shrink:1;
	-ms-flex-negative:1;
	flex-shrink:1;
}

.fs_2{
	-webkit-flex-shrink:2;
	-ms-flex-negative:2;
	flex-shrink:2;
}

.fs_3{
	-webkit-flex-shrink:3;
	-ms-flex-negative:3;
	flex-shrink:3;
}

/*flex-basis 子要素のベースとなる幅の指定------------------------*/
.fb_auto{
	-webkit-flex-basis: auto;
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
}

.fb_10p{
	-webkit-flex-basis: 10%;
	-ms-flex-preferred-size: 10%;
	flex-basis: 10%;
	max-width: 10%;
}

.fb_30p{
	-webkit-flex-basis: 30%;
	-ms-flex-preferred-size: 30%;
	flex-basis: 30%;
	max-width: 30%;
}

.fb_60p{
	-webkit-flex-basis: 60%;
	-ms-flex-preferred-size: 60%;
	flex-basis: 60%;
	max-width: 60%;
}

/*align-self 子要素の垂直方向の揃え------------------------*/
.as_a{
	-webkit-align-self: auto;
	-ms-flex-item-align:auto;
	align-self:auto;
}

.as_fs{
	-webkit-align-self: flex-start;
	-ms-flex-item-align: start;
	align-self: flex-start;
}

.as_fe{
	-webkit-align-self: flex-end;
	-ms-flex-item-align: end;
	align-self: flex-end;
}

.as_c{
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;
}

.as_b{
	-webkit-align-self: baseline;
	-ms-flex-item-align: baseline;
	align-self: baseline;
}

.as_s{
	-webkit-align-self: stretch;
	-ms-flex-item-align: stretch;
	align-self: stretch;
}