@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;
}