.flex {
  display: flex;
}

/* SP以外の幅 (Non-smartphone widths) */
@media (min-width: 768px) {
  .pc-flex {
    display: flex;
  }
}

/* SP相当幅 (Smartphone widths) */
@media (max-width: 767px) {
  .sp-flex {
    display: flex;
  }
}

.flex.bet,
.pc-flex.bet,
.sp-flex.bet {
  justify-content: space-between;
  /* アイテムを均等に揃える 両端を詰める */
}

.flex.aro,
.pc-flex.aro,
.sp-flex.aro {
  justify-content: space-around;
  /* 均等に揃える 両端も空ける */
}

.flex.vstart,
.pc-flex.vstart,
.sp-flex.vstart {
  align-items: flex-start;
  /* アイテムを上段に揃える */
}

.flex.vend,
.pc-flex.vend,
.sp-flex.vend {
  align-items: flex-end;
  /* アイテムを下段に揃える */
}

.flex.vcenter,
.pc-flex.vcenter,
.sp-flex.vcenter {
  align-items: center;
  /* アイテムを中段に揃える */
}

.flex.hstart,
.pc-flex.hstart,
.sp-flex.hstart {
  justify-content: flex-start;
  /* 左端に寄せる */
}

.flex.hcenter,
.pc-flex.hcenter,
.sp-flex.hcenter {
  justify-content: center;
  /* アイテムを水平上の中央に寄せる */
}

.flex.hend,
.pc-flex.hend,
.sp-flex.hend {
  justify-content: flex-end;
  /* 右端に揃える */
}

.flex.str,
.pc-flex.str,
.sp-flex.str {
  align-items: stretch;
  /* アイテムの高さを統一する */
}

.flex.vert,
.pc-flex.vert,
.sp-flex.vert {
  flex-direction: column;
  /* 上から並べていく */
}

.flex.break,
.pc-flex.break,
.sp-flex.break {
  flex-wrap: wrap;
  /* アイテムを折り返す */
}

/* SP以外の幅 (Non-smartphone widths) */
@media (min-width: 768px) {
  .flex.pc-bet,
  .pc-flex.pc-bet {
    justify-content: space-between;
    /* アイテムを均等に揃える 両端を詰める */
  }

  .flex.pc-aro,
  .pc-flex.pc-aro {
    justify-content: space-around;
    /* 均等に揃える 両端も空ける */
  }

  .flex.aro,
  .pc-flex.aro {
    justify-content: space-around;
    /* 均等に揃える 両端も空ける */
  }

  .flex.pc-vstart,
  .pc-flex.pc-vstart {
    align-items: flex-start;
    /* アイテムを上段に揃える */
  }

  .flex.pc-vend,
  .pc-flex.pc-vend {
    align-items: flex-end;
    /* アイテムを下段に揃える */
  }

  .flex.pc-vcenter,
  .pc-flex.pc-vcenter {
    align-items: center;
    /* アイテムを中段に揃える */
  }

  .flex.pc-hstart,
  .pc-flex.pc-hstart {
    justify-content: flex-start;
    /* 左端に寄せる */
  }

  .flex.pc-hcenter,
  .pc-flex.pc-hcenter {
    justify-content: center;
    /* アイテムを水平上の中央に寄せる */
  }

  .flex.pc-hend,
  .pc-flex.pc-hend {
    justify-content: flex-end;
    /* 右端に揃える */
  }

  .flex.pc-str,
  .pc-flex.pc-str {
    align-items: stretch;
    /* アイテムの高さを統一する */
  }

  .flex.pc-vert,
  .pc-flex.pc-vert {
    flex-direction: column;
    /* 上から並べていく */
  }

  .flex.pc-break,
  .pc-flex.pc-break {
    flex-wrap: wrap;
    /* アイテムを折り返す */
  }

  .flex > .pc-1,
  .pc-flex > .pc-1 {
    order: 1;
  }

  .flex > .pc-2,
  .pc-flex > .pc-2 {
    order: 2;
  }

  .flex > .pc-3,
  .pc-flex > .pc-3 {
    order: 3;
  }
}

/* SP相当幅 (Smartphone widths) */
@media (max-width: 767px) {
  .flex.sp-bet,
  .sp-flex.sp-bet {
    justify-content: space-between;
    /* アイテムを均等に揃える 両端を詰める */
  }

  .flex.sp-aro,
  .sp-flex.sp-aro {
    justify-content: space-around;
    /* 均等に揃える 両端も空ける */
  }

  .flex.aro,
  .sp-flex.aro {
    justify-content: space-around;
    /* 均等に揃える 両端も空ける */
  }

  .flex.sp-vstart,
  .sp-flex.sp-vstart {
    align-items: flex-start;
    /* アイテムを上段に揃える */
  }

  .flex.sp-vend,
  .sp-flex.sp-vend {
    align-items: flex-end;
    /* アイテムを下段に揃える */
  }

  .flex.sp-vcenter,
  .sp-flex.sp-vcenter {
    align-items: center;
    /* アイテムを中段に揃える */
  }

  .flex.sp-hstart,
  .sp-flex.sp-hstart {
    justify-content: flex-start;
    /* 左端に寄せる */
  }

  .flex.sp-hcenter,
  .sp-flex.sp-hcenter {
    justify-content: center;
    /* アイテムを水平上の中央に寄せる */
  }

  .flex.sp-hend,
  .sp-flex.sp-hend {
    justify-content: flex-end;
    /* 右端に揃える */
  }

  .flex.sp-str,
  .sp-flex.sp-str {
    align-items: stretch;
    /* アイテムの高さを統一する */
  }

  .flex.sp-vert,
  .sp-flex.sp-vert {
    flex-direction: column;
    /* 上から並べていく */
  }

  .flex.sp-break,
  .sp-flex.sp-break {
    flex-wrap: wrap;
    /* アイテムを折り返す */
  }

  .flex > .sp-1,
  .sp-flex > .sp-1 {
    order: 1;
  }

  .flex > .sp-2,
  .sp-flex > .sp-2 {
    order: 2;
  }

  .flex > .sp-3,
  .sp-flex > .sp-3 {
    order: 3;
  }
}