@charset "utf-8";

/* Float Clear */
.cf:before,.cf:after {
	content:"";display:table;
}
.cf:after {
	clear:both;
}

.cf {
	*zoom:1;
}

/* Float */
.f-left{
  float:left;
}

.f-right{
  float:right;
}

/* color */
.red{
  color:#FF0000;
}

.l-red{
	color:#ff8d7a;
}

.blue{
  color:#0000FF;
}

.green{
  color:#006600;
}

.glay{
  color:#666666;
}

/* text-align */

.center{
  text-align:center;
}

.left{
  text-align:left;
}

.right{
  text-align:right;
}

.middle{
  vertical-align:middle;
}

/* margin */

.m-top20{
  margin-top:20px;
}

.m-btm20{
  margin-bottom:20px;
}

.m-all10{
  margin:10px;
}

.m-tb10{
  margin:10px 0;
}

/* font */

.font-b{
  font-weight:bold;
}

.font-l{
  font-size:large;
}

.font-lb{
  font-weight:bold;
  font-size:large;
}

/* width */

.w100{
  width:100%;
}

.w50{
  width:50%;
}

/* FlexBox */
/*
親要素指定：display:flex-box;
justify-content:flex-start,flex-end,center,space-around,space-between　アイテム間の配置
align-items:flex-start,flex-end,center,bace-line,stretch　アイテムの縦配置
align-content:flex-start,flex-end,center,space-between,space-around,stretch　行間の配置
flex-direction:row,row-reverse,column,column-revese　アイテムの並び変更
flex-wrap:nowrap,wrap,wrap-reverse　折り返しの指定
flex-flow:[flex-direction] [flex-wrap]　アイテムの並びと折り返し指定

子要素指定
align-self:flex-start,flex-end,center,bace-line,stretch　アイテムの個別縦配置
order:1,2,-1,-2…　個別に並び順の変更
flex-grow: 他要素よりも拡大する
flex-shrink:他要素よりも縮小する
flex-basis:メインとなるサイズを元に、幅と高さのプロパティを同じ値にする

*/

.flex{
  display: flex;
}

.inline-flex{
  display:inline-flex;
}


.justify-between{ /*左右スペースなし、等幅配置*/
  justify-content: space-between;
}

.justify-end{/*終了位置*/
  justify-content: flex-end;
}

.justify-around{/*等幅配置*/
  justify-content:space-around;
}

.justify-center{/*中央配置*/
  justify-content:center;
}

.justify-start{/*開始位置 default*/
  justify-content:flex-start;;
}

.align-start{/*縦開始位置*/
  align-items:flex-start;
}

.align-end{/*縦終了位置*/
  align-items:flex-end;
}

.align-center{/*縦中央配置*/
  align-items:center;
}

.align-stretch{/*縦全体指定 default */
  align-items:stretch;
}