@charset "UTF-8";

/*****************************************/
/** 親要素（Flexコンテナー）に指定するプロパティ **/
/*****************************************/
.fx {
  display: flex;
  justify-content: center;
}

/**** flex-direction … 子要素の並ぶ向き ****/
.fx-fd_r {
  flex-direction: row;
}

.fx-fd_rr {
  flex-direction: row-reverse;
}

.fx-fd_c {
  flex-direction: column;
}

.fx-fd_cr {
  flex-direction: column-reverse;
}

/**** flex-wrap … 子要素の折り返し ****/
.fx-wrap {
  flex-wrap: wrap;
}

.fx-wrap_n {
  flex-wrap: nowrap;
}

.fx-wrap_r {
  flex-wrap: wrap-reverse;
}

/**** justify-content … 水平方向の揃え ****/
.fx-jc_fs {
  justify-content: flex-start
}

.fx-jc_fe {
  justify-content: flex-end;
}

.fx-jc_c {
  justify-content: center;
}

.fx-jc_sb {
  justify-content: space-between;
}

.fx-jc_sa {
  justify-content: space-around;
}

/**** align-items … 垂直方向の揃え ****/
.fx-ai_s {
  align-items: stretch;
}

.fx-ai_fs {
  align-items: flex-start;
}

.fx-ai_fe {
  align-items: flex-end;
}

.fx-ai_c {
  align-items: center;
}

.fx-ai_b {
  align-items: baseline;
}

/**** align-content … 複数行にした時の揃え ****/
.fx-ac_s {
  align-content: stretch;
}

.fx-ac_fs {
  align-content: flex-start;
}

.fx-ac_fe {
  align-content: flex-end;
}

.fx-ac_c {
  align-content: center;
}

.fx-ac_sb {
  align-content: space-between;
}

.fx-ac_sa {
  align-content: space-around;
}

/*****************************************/
/**               Font Color            **/
/*****************************************/
.main-color {
  color: var(--main-color);
}

.second-color {
  color: var(--second-color);
}

.red-color {
  color: var(--red-color);
}

.-yellow-color {
  color: var(--yellow-color);
}

.f-c_white {
  color: #FFF;
}

.f-c_70 {
  color: #707070;
}

.f-c_F0 {
  color: #F0F0F0;
}

/*****************************************/
/**               Font Size            **/
/*****************************************/
.f-s_1rem {
  font-size: 1rem;
}

.f-s_2rem {
  font-size: 2rem;
}

.f-s_3rem {
  font-size: 3rem;
}

.f-s_4rem {
  font-size: 4rem;
}

.f-s_5rem {
  font-size: 5rem;
}

.f-s_6rem {
  font-size: 6rem;
}

.f-s_7rem {
  font-size: 7rem;
}