/*
---------------------- display: flex;関係 -----------------------------
*/

.flex{
  display: flex !important;
  display: -webkit-flex !important;
}

/* ------------------------------- Fexbox（親）に対して指定できるCSS  -------------------------------*/

/*  --------------- flex-direction（flex item全体の配置方向） --------------- */

.flex-d_r{
  flex-direction: row !important;
  -webkit-flex-direction: row !important;
}

.flex-d_r-re{
  flex-direction: row-reverse !important;
  -webkit-flex-direction: row-reverse !important;
}

.flex-d_c{
  flex-direction: column !important;
  -webkit-flex-direction: column !important;
}

.flex-d_c-re{
  flex-direction: column-reverse !important;
  -webkit-flex-direction: column-reverse !important;
}

/*  --------------- flex-wrap（flex item全体の折り返しかた） --------------- */

.flex-w_no{
  flex-wrap: nowrap !important;
  -webkit-flex-wrap: nowrap !important;
}

.flex-w_w{
  flex-wrap: wrap !important;
  -webkit-flex-wrap: wrap !important;
}

.flex-w_w-re{
  flex-wrap: wrap-reverse !important;
  -webkit-flex-wrap: wrap-reverse !important;
}

/*  --------------- justify-content（flexbox（親に対する） flex itemの横の揃え）  --------------- */

.flex-jc_fs{
  justify-content: flex-start !important;
  -webkit-justify-content: flex-start !important;
}

.flex-jc_fe{
  justify-content: flex-end !important;
  -webkit-justify-content: flex-end !important;
}

.flex-jc_c{
  justify-content: center !important;
  -webkit-justify-content: center !important;
}

.flex-jc_sb{
  justify-content: space-between !important;
  -webkit-justify-content: space-between !important;
}

.flex-jc_sa{
  justify-content: space-around !important;
  -webkit-justify-content: space-around !important;
}


/*  --------------- align-content（flexbox（親に対する） flex itemの縦の揃え） ---------------  */

.flex-ac_fs {
  align-content: flex-start !important;
  -webkit-align-content: flex-start !important;
}

.flex-ac_fe {
  align-content: flex-end !important;
  -webkit-align-content: flex-end !important;
}

.flex-ac_c {
  align-content: center !important;
  -webkit-align-content: center !important;
}

.flex-ac_sb {
  align-content: space-between !important;
  -webkit-align-content: space-between !important;
}

.flex-ac_sa {
  align-content: space-around !important;
  -webkit-align-content: space-around !important;
}

/*  --------------- align-items  --------------- */

.flex-ai_fs{
  align-items: flex-start !important;
  -webkit-align-items: flex-start !important;
}

.flex-ai_fe{
  align-items: flex-end !important;
  -webkit-align-items: flex-end !important;
}

.flex-ai_c{
  align-items: center !important;
  -webkit-align-items: center !important;
}

.flex-ai_b{
  align-items: baseline !important;
  -webkit-align-items: baseline !important;
}

.flex-ai_s{
  align-items: stretch !important;
  -webkit-align-items: stretch !important;
}

/* ------------------------------- Fexitem（子）に対して指定できるCSS  -------------------------------*/

/*  --------------- .align-self  ---------------*/

.flex-as_fs{
  align-self: flex-start !important;
  -webkit-align-self: flex-start !important;
}

.flex-as_fe{
  align-self: flex-end !important;
  -webkit-align-self: flex-end !important;
}

.flex-as_c{
  align-self: center !important;
  -webkit-align-self: center !important;
}

.flex-as_b{
  align-self: baseline !important;
  -webkit-align-self: baseline !important;
}

.flex-as_s{
  align-self: stretch !important;
  -webkit-align-self: stretch !important;
}

/* --------------- .order  --------------- */

.order01{ order: 1 !important; -webkit-order: 1 !important; }
.order02{ order: 2 !important; -webkit-order: 2 !important; }
.order03{ order: 3 !important; -webkit-order: 3 !important; }
.order04{ order: 4 !important; -webkit-order: 4 !important; }
.order05{ order: 5 !important; -webkit-order: 5 !important; }
.order06{ order: 6 !important; -webkit-order: 6 !important; }
.order07{ order: 7 !important; -webkit-order: 7 !important; }
.order08{ order: 8 !important; -webkit-order: 8 !important; }
.order09{ order: 9 !important; -webkit-order: 9 !important; }
.order10{ order: 10 !important; -webkit-order: 10 !important; }
.order11{ order: 11 !important; -webkit-order: 11 !important; }
.order12{ order: 12 !important; -webkit-order: 12 !important; }
.order13{ order: 13 !important; -webkit-order: 13 !important; }
.order14{ order: 14 !important; -webkit-order: 14 !important; }
.order15{ order: 15 !important; -webkit-order: 15 !important; }
.order16{ order: 16 !important; -webkit-order: 16 !important; }
.order17{ order: 17 !important; -webkit-order: 17 !important; }
.order18{ order: 18 !important; -webkit-order: 18 !important; }
.order19{ order: 19 !important; -webkit-order: 19 !important; }
.order20{ order: 20 !important; -webkit-order: 20 !important; }

/*  --------------- .flex-g --------------- */

.flex-g01{ flex-grow: 1 !important; -webkit-flex-grow: 1 !important; }

/* pc */
@media all and (min-width: 951px) {
/*
---------------------- display: flex;関係 -----------------------------
*/

.pc_flex{
  display: flex !important;
  display: -webkit-flex !important;
}

/* ------------------------------- Fexbox（親）に対して指定できるCSS  -------------------------------*/

/*  --------------- flex-direction（flex item全体の配置方向） --------------- */

.pc_flex-d_r{
  flex-direction: row !important;
  -webkit-flex-direction: row !important;
}

.pc_flex-d_r-re{
  flex-direction: row-reverse !important;
  -webkit-flex-direction: row-reverse !important;
}

.pc_flex-d_c{
  flex-direction: column !important;
  -webkit-flex-direction: column !important;
}

.pc_flex-d_c-re{
  flex-direction: column-reverse !important;
  -webkit-flex-direction: column-reverse !important;
}

/*  --------------- flex-wrap（flex item全体の折り返しかた） --------------- */

.pc_flex-w_no{
  flex-wrap: nowrap !important;
  -webkit-flex-wrap: nowrap !important;
}

.pc_flex-w_w{
  flex-wrap: wrap !important;
  -webkit-flex-wrap: wrap !important;
}

.pc_flex-w_w-re{
  flex-wrap: wrap-reverse !important;
  -webkit-flex-wrap: wrap-reverse !important;
}

/*  --------------- justify-content（flexbox（親に対する） flex itemの横の揃え）  --------------- */

.pc_flex-jc_fs{
  justify-content: flex-start !important;
  -webkit-justify-content: flex-start !important;
}

.pc_flex-jc_fe{
  justify-content: flex-end !important;
  -webkit-justify-content: flex-end !important;
}

.pc_flex-jc_c{
  justify-content: center !important;
  -webkit-justify-content: center !important;
}

.pc_flex-jc_sb{
  justify-content: space-between !important;
  -webkit-justify-content: space-between !important;
}

.pc_flex-jc_sa{
  justify-content: space-around !important;
  -webkit-justify-content: space-around !important;
}


/*  --------------- align-content（flexbox（親に対する） flex itemの縦の揃え） ---------------  */

.pc_flex-ac_fs {
  align-content: flex-start !important;
  -webkit-align-content: flex-start !important;
}

.pc_flex-ac_fe {
  align-content: flex-end !important;
  -webkit-align-content: flex-end !important;
}

.pc_flex-ac_c {
  align-content: center !important;
  -webkit-align-content: center !important;
}

.pc_flex-ac_sb {
  align-content: space-between !important;
  -webkit-align-content: space-between !important;
}

.pc_flex-ac_sa {
  align-content: space-around !important;
  -webkit-align-content: space-around !important;
}

/*  --------------- align-items  --------------- */

.pc_flex-ai_fs{
  align-items: flex-start !important;
  -webkit-align-items: flex-start !important;
}

.pc_flex-ai_fe{
  align-items: flex-end !important;
  -webkit-align-items: flex-end !important;
}

.pc_flex-ai_c{
  align-items: center !important;
  -webkit-align-items: center !important;
}

.pc_flex-ai_b{
  align-items: baseline !important;
  -webkit-align-items: baseline !important;
}

.pc_flex-ai_s{
  align-items: stretch !important;
  -webkit-align-items: stretch !important;
}

/* ------------------------------- Fexitem（子）に対して指定できるCSS  -------------------------------*/

/*  --------------- .pc_align-self  ---------------*/

.pc_flex-as_fs{
  align-self: flex-start !important;
  -webkit-align-self: flex-start !important;
}

.pc_flex-as_fe{
  align-self: flex-end !important;
  -webkit-align-self: flex-end !important;
}

.pc_flex-as_c{
  align-self: center !important;
  -webkit-align-self: center !important;
}

.pc_flex-as_b{
  align-self: baseline !important;
  -webkit-align-self: baseline !important;
}

.pc_flex-as_s{
  align-self: stretch !important;
  -webkit-align-self: stretch !important;
}

/* --------------- .pc_order  --------------- */

.pc_order01{ order: 1 !important; -webkit-order: 1 !important; }
.pc_order02{ order: 2 !important; -webkit-order: 2 !important; }
.pc_order03{ order: 3 !important; -webkit-order: 3 !important; }
.pc_order04{ order: 4 !important; -webkit-order: 4 !important; }
.pc_order05{ order: 5 !important; -webkit-order: 5 !important; }
.pc_order06{ order: 6 !important; -webkit-order: 6 !important; }
.pc_order07{ order: 7 !important; -webkit-order: 7 !important; }
.pc_order08{ order: 8 !important; -webkit-order: 8 !important; }
.pc_order09{ order: 9 !important; -webkit-order: 9 !important; }
.pc_order10{ order: 10 !important; -webkit-order: 10 !important; }
.pc_order11{ order: 11 !important; -webkit-order: 11 !important; }
.pc_order12{ order: 12 !important; -webkit-order: 12 !important; }
.pc_order13{ order: 13 !important; -webkit-order: 13 !important; }
.pc_order14{ order: 14 !important; -webkit-order: 14 !important; }
.pc_order15{ order: 15 !important; -webkit-order: 15 !important; }
.pc_order16{ order: 16 !important; -webkit-order: 16 !important; }
.pc_order17{ order: 17 !important; -webkit-order: 17 !important; }
.pc_order18{ order: 18 !important; -webkit-order: 18 !important; }
.pc_order19{ order: 19 !important; -webkit-order: 19 !important; }
.pc_order20{ order: 20 !important; -webkit-order: 20 !important; }

/*  --------------- .pc_flex-g --------------- */

.pc_flex-g01{ flex-grow: 1 !important; -webkit-flex-grow: 1 !important; }
}

/* pad */
@media screen and (min-width: 701px ) and (max-width: 950px) {
/*
---------------------- display: flex;関係 -----------------------------
*/

.pad_flex{
  display: flex !important;
  display: -webkit-flex !important;
}

/* ------------------------------- Fexbox（親）に対して指定できるCSS  -------------------------------*/

/*  --------------- flex-direction（flex item全体の配置方向） --------------- */

.pad_flex-d_r{
  flex-direction: row !important;
  -webkit-flex-direction: row !important;
}

.pad_flex-d_r-re{
  flex-direction: row-reverse !important;
  -webkit-flex-direction: row-reverse !important;
}

.pad_flex-d_c{
  flex-direction: column !important;
  -webkit-flex-direction: column !important;
}

.pad_flex-d_c-re{
  flex-direction: column-reverse !important;
  -webkit-flex-direction: column-reverse !important;
}

/*  --------------- flex-wrap（flex item全体の折り返しかた） --------------- */

.pad_flex-w_no{
  flex-wrap: nowrap !important;
  -webkit-flex-wrap: nowrap !important;
}

.pad_flex-w_w{
  flex-wrap: wrap !important;
  -webkit-flex-wrap: wrap !important;
}

.pad_flex-w_w-re{
  flex-wrap: wrap-reverse !important;
  -webkit-flex-wrap: wrap-reverse !important;
}

/*  --------------- justify-content（flexbox（親に対する） flex itemの横の揃え）  --------------- */

.pad_flex-jc_fs{
  justify-content: flex-start !important;
  -webkit-justify-content: flex-start !important;
}

.pad_flex-jc_fe{
  justify-content: flex-end !important;
  -webkit-justify-content: flex-end !important;
}

.pad_flex-jc_c{
  justify-content: center !important;
  -webkit-justify-content: center !important;
}

.pad_flex-jc_sb{
  justify-content: space-between !important;
  -webkit-justify-content: space-between !important;
}

.pad_flex-jc_sa{
  justify-content: space-around !important;
  -webkit-justify-content: space-around !important;
}


/*  --------------- align-content（flexbox（親に対する） flex itemの縦の揃え） ---------------  */

.pad_flex-ac_fs {
  align-content: flex-start !important;
  -webkit-align-content: flex-start !important;
}

.pad_flex-ac_fe {
  align-content: flex-end !important;
  -webkit-align-content: flex-end !important;
}

.pad_flex-ac_c {
  align-content: center !important;
  -webkit-align-content: center !important;
}

.pad_flex-ac_sb {
  align-content: space-between !important;
  -webkit-align-content: space-between !important;
}

.pad_flex-ac_sa {
  align-content: space-around !important;
  -webkit-align-content: space-around !important;
}

/*  --------------- align-items  --------------- */

.pad_flex-ai_fs{
  align-items: flex-start !important;
  -webkit-align-items: flex-start !important;
}

.pad_flex-ai_fe{
  align-items: flex-end !important;
  -webkit-align-items: flex-end !important;
}

.pad_flex-ai_c{
  align-items: center !important;
  -webkit-align-items: center !important;
}

.pad_flex-ai_b{
  align-items: baseline !important;
  -webkit-align-items: baseline !important;
}

.pad_flex-ai_s{
  align-items: stretch !important;
  -webkit-align-items: stretch !important;
}

/* ------------------------------- Fexitem（子）に対して指定できるCSS  -------------------------------*/

/*  --------------- .pad_align-self  ---------------*/

.pad_flex-as_fs{
  align-self: flex-start !important;
  -webkit-align-self: flex-start !important;
}

.pad_flex-as_fe{
  align-self: flex-end !important;
  -webkit-align-self: flex-end !important;
}

.pad_flex-as_c{
  align-self: center !important;
  -webkit-align-self: center !important;
}

.pad_flex-as_b{
  align-self: baseline !important;
  -webkit-align-self: baseline !important;
}

.pad_flex-as_s{
  align-self: stretch !important;
  -webkit-align-self: stretch !important;
}

/* --------------- .pad_order  --------------- */

.pad_order01{ order: 1 !important; -webkit-order: 1 !important; }
.pad_order02{ order: 2 !important; -webkit-order: 2 !important; }
.pad_order03{ order: 3 !important; -webkit-order: 3 !important; }
.pad_order04{ order: 4 !important; -webkit-order: 4 !important; }
.pad_order05{ order: 5 !important; -webkit-order: 5 !important; }
.pad_order06{ order: 6 !important; -webkit-order: 6 !important; }
.pad_order07{ order: 7 !important; -webkit-order: 7 !important; }
.pad_order08{ order: 8 !important; -webkit-order: 8 !important; }
.pad_order09{ order: 9 !important; -webkit-order: 9 !important; }
.pad_order10{ order: 10 !important; -webkit-order: 10 !important; }
.pad_order11{ order: 11 !important; -webkit-order: 11 !important; }
.pad_order12{ order: 12 !important; -webkit-order: 12 !important; }
.pad_order13{ order: 13 !important; -webkit-order: 13 !important; }
.pad_order14{ order: 14 !important; -webkit-order: 14 !important; }
.pad_order15{ order: 15 !important; -webkit-order: 15 !important; }
.pad_order16{ order: 16 !important; -webkit-order: 16 !important; }
.pad_order17{ order: 17 !important; -webkit-order: 17 !important; }
.pad_order18{ order: 18 !important; -webkit-order: 18 !important; }
.pad_order19{ order: 19 !important; -webkit-order: 19 !important; }
.pad_order20{ order: 20 !important; -webkit-order: 20 !important; }

/*  --------------- .pad_flex-g --------------- */

.pad_flex-g01{ flex-grow: 1 !important; -webkit-flex-grow: 1 !important; }
}

/* sp */
@media screen and (max-width: 700px) {
/*
---------------------- display: flex;関係 -----------------------------
*/

.sp_flex{
  display: flex !important;
  display: -webkit-flex !important;
}

/* ------------------------------- Fexbox（親）に対して指定できるCSS  -------------------------------*/

/*  --------------- flex-direction（flex item全体の配置方向） --------------- */

.sp_flex-d_r{
  flex-direction: row !important;
  -webkit-flex-direction: row !important;
}

.sp_flex-d_r-re{
  flex-direction: row-reverse !important;
  -webkit-flex-direction: row-reverse !important;
}

.sp_flex-d_c{
  flex-direction: column !important;
  -webkit-flex-direction: column !important;
}

.sp_flex-d_c-re{
  flex-direction: column-reverse !important;
  -webkit-flex-direction: column-reverse !important;
}

/*  --------------- flex-wrap（flex item全体の折り返しかた） --------------- */

.sp_flex-w_no{
  flex-wrap: nowrap !important;
  -webkit-flex-wrap: nowrap !important;
}

.sp_flex-w_w{
  flex-wrap: wrap !important;
  -webkit-flex-wrap: wrap !important;
}

.sp_flex-w_w-re{
  flex-wrap: wrap-reverse !important;
  -webkit-flex-wrap: wrap-reverse !important;
}

/*  --------------- justify-content（flexbox（親に対する） flex itemの横の揃え）  --------------- */

.sp_flex-jc_fs{
  justify-content: flex-start !important;
  -webkit-justify-content: flex-start !important;
}

.sp_flex-jc_fe{
  justify-content: flex-end !important;
  -webkit-justify-content: flex-end !important;
}

.sp_flex-jc_c{
  justify-content: center !important;
  -webkit-justify-content: center !important;
}

.sp_flex-jc_sb{
  justify-content: space-between !important;
  -webkit-justify-content: space-between !important;
}

.sp_flex-jc_sa{
  justify-content: space-around !important;
  -webkit-justify-content: space-around !important;
}


/*  --------------- align-content（flexbox（親に対する） flex itemの縦の揃え） ---------------  */

.sp_flex-ac_fs {
  align-content: flex-start !important;
  -webkit-align-content: flex-start !important;
}

.sp_flex-ac_fe {
  align-content: flex-end !important;
  -webkit-align-content: flex-end !important;
}

.sp_flex-ac_c {
  align-content: center !important;
  -webkit-align-content: center !important;
}

.sp_flex-ac_sb {
  align-content: space-between !important;
  -webkit-align-content: space-between !important;
}

.sp_flex-ac_sa {
  align-content: space-around !important;
  -webkit-align-content: space-around !important;
}

/*  --------------- align-items  --------------- */

.sp_flex-ai_fs{
  align-items: flex-start !important;
  -webkit-align-items: flex-start !important;
}

.sp_flex-ai_fe{
  align-items: flex-end !important;
  -webkit-align-items: flex-end !important;
}

.sp_flex-ai_c{
  align-items: center !important;
  -webkit-align-items: center !important;
}

.sp_flex-ai_b{
  align-items: baseline !important;
  -webkit-align-items: baseline !important;
}

.sp_flex-ai_s{
  align-items: stretch !important;
  -webkit-align-items: stretch !important;
}

/* ------------------------------- Fexitem（子）に対して指定できるCSS  -------------------------------*/

/*  --------------- .sp_align-self  ---------------*/

.sp_flex-as_fs{
  align-self: flex-start !important;
  -webkit-align-self: flex-start !important;
}

.sp_flex-as_fe{
  align-self: flex-end !important;
  -webkit-align-self: flex-end !important;
}

.sp_flex-as_c{
  align-self: center !important;
  -webkit-align-self: center !important;
}

.sp_flex-as_b{
  align-self: baseline !important;
  -webkit-align-self: baseline !important;
}

.sp_flex-as_s{
  align-self: stretch !important;
  -webkit-align-self: stretch !important;
}

/* --------------- .sp_order  --------------- */

.sp_order01{ order: 1 !important; -webkit-order: 1 !important; }
.sp_order02{ order: 2 !important; -webkit-order: 2 !important; }
.sp_order03{ order: 3 !important; -webkit-order: 3 !important; }
.sp_order04{ order: 4 !important; -webkit-order: 4 !important; }
.sp_order05{ order: 5 !important; -webkit-order: 5 !important; }
.sp_order06{ order: 6 !important; -webkit-order: 6 !important; }
.sp_order07{ order: 7 !important; -webkit-order: 7 !important; }
.sp_order08{ order: 8 !important; -webkit-order: 8 !important; }
.sp_order09{ order: 9 !important; -webkit-order: 9 !important; }
.sp_order10{ order: 10 !important; -webkit-order: 10 !important; }
.sp_order11{ order: 11 !important; -webkit-order: 11 !important; }
.sp_order12{ order: 12 !important; -webkit-order: 12 !important; }
.sp_order13{ order: 13 !important; -webkit-order: 13 !important; }
.sp_order14{ order: 14 !important; -webkit-order: 14 !important; }
.sp_order15{ order: 15 !important; -webkit-order: 15 !important; }
.sp_order16{ order: 16 !important; -webkit-order: 16 !important; }
.sp_order17{ order: 17 !important; -webkit-order: 17 !important; }
.sp_order18{ order: 18 !important; -webkit-order: 18 !important; }
.sp_order19{ order: 19 !important; -webkit-order: 19 !important; }
.sp_order20{ order: 20 !important; -webkit-order: 20 !important; }

/*  --------------- .sp_flex-g --------------- */

.sp_flex-g01{ flex-grow: 1 !important; -webkit-flex-grow: 1 !important; }
}



/*---------------------- 基本メディアクエリー --------------------- */

/* pc */
@media all and (min-width: 951px) {
}

/* pad */
@media screen and (min-width: 701px ) and (max-width: 950px) {
}

/* sp */
@media screen and (max-width: 700px) {
}