.of_flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.col_base_0 {
  box-sizing: border-box;
  flex: 0 0 0%;
  max-width: 0%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_1 {
  box-sizing: border-box;
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_2 {
  box-sizing: border-box;
  flex: 0 0 16.666666%;
  max-width: 16.666666%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_3 {
  box-sizing: border-box;
  flex: 0 0 24.999999%;
  max-width: 24.999999%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_4 {
  box-sizing: border-box;
  flex: 0 0 33.33332%;
  max-width: 33.33332%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_5 {
  box-sizing: border-box;
  flex: 0 0 41.66665%;
  max-width: 41.66665%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_6 {
  box-sizing: border-box;
  flex: 0 0 49.99998%;
  max-width: 49.99998%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_7 {
  box-sizing: border-box;
  flex: 0 0 58.33331%;
  max-width: 58.33331%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_8 {
  box-sizing: border-box;
  flex: 0 0 66.66664%;
  max-width: 66.66664%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_9 {
  box-sizing: border-box;
  flex: 0 0 74.99997%;
  max-width: 74.99997%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_10 {
  box-sizing: border-box;
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_11 {
  box-sizing: border-box;
  flex: 0 0 91.66663%;
  max-width: 91.66663%;
  min-width: 0;
  word-wrap: break-word;
}

.col_base_12 {
  box-sizing: border-box;
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
  word-wrap: break-word;
}

/* pc 0pxから1500pxまで適用 */
@media screen and (max-width: 1500px) {
  .col_pc_0 {
    box-sizing: border-box;
    flex: 0 0 0%;
    max-width: 0%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_1 {
    box-sizing: border-box;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_2 {
    box-sizing: border-box;
    flex: 0 0 16.666666%;
    max-width: 16.666666%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_3 {
    box-sizing: border-box;
    flex: 0 0 24.999999%;
    max-width: 24.999999%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_4 {
    box-sizing: border-box;
    flex: 0 0 33.33332%;
    max-width: 33.33332%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_5 {
    box-sizing: border-box;
    flex: 0 0 41.66665%;
    max-width: 41.66665%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_6 {
    box-sizing: border-box;
    flex: 0 0 49.99998%;
    max-width: 49.99998%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_7 {
    box-sizing: border-box;
    flex: 0 0 58.33331%;
    max-width: 58.33331%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_8 {
    box-sizing: border-box;
    flex: 0 0 66.66664%;
    max-width: 66.66664%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_9 {
    box-sizing: border-box;
    flex: 0 0 74.99997%;
    max-width: 74.99997%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_10 {
    box-sizing: border-box;
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_11 {
    box-sizing: border-box;
    flex: 0 0 91.66663%;
    max-width: 91.66663%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_pc_12 {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    word-wrap: break-word;
  }
}

/* spc 0pxから1200pxまで適用 */
@media screen and (max-width: 1200px) {
  .col_spc_0 {
    box-sizing: border-box;
    flex: 0 0 0%;
    max-width: 0%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_1 {
    box-sizing: border-box;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_2 {
    box-sizing: border-box;
    flex: 0 0 16.666666%;
    max-width: 16.666666%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_3 {
    box-sizing: border-box;
    flex: 0 0 24.999999%;
    max-width: 24.999999%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_4 {
    box-sizing: border-box;
    flex: 0 0 33.33332%;
    max-width: 33.33332%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_5 {
    box-sizing: border-box;
    flex: 0 0 41.66665%;
    max-width: 41.66665%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_6 {
    box-sizing: border-box;
    flex: 0 0 49.99998%;
    max-width: 49.99998%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_7 {
    box-sizing: border-box;
    flex: 0 0 58.33331%;
    max-width: 58.33331%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_8 {
    box-sizing: border-box;
    flex: 0 0 66.66664%;
    max-width: 66.66664%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_9 {
    box-sizing: border-box;
    flex: 0 0 74.99997%;
    max-width: 74.99997%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_10 {
    box-sizing: border-box;
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_11 {
    box-sizing: border-box;
    flex: 0 0 91.66663%;
    max-width: 91.66663%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_spc_12 {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    word-wrap: break-word;
  }
}

/* tablet 0pxから900pxまで適用 */
@media screen and (max-width: 900px) {
  .col_tab_0 {
    box-sizing: border-box;
    flex: 0 0 0%;
    max-width: 0%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_1 {
    box-sizing: border-box;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_2 {
    box-sizing: border-box;
    flex: 0 0 16.666666%;
    max-width: 16.666666%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_3 {
    box-sizing: border-box;
    flex: 0 0 24.999999%;
    max-width: 24.999999%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_4 {
    box-sizing: border-box;
    flex: 0 0 33.33332%;
    max-width: 33.33332%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_5 {
    box-sizing: border-box;
    flex: 0 0 41.66665%;
    max-width: 41.66665%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_6 {
    box-sizing: border-box;
    flex: 0 0 49.99998%;
    max-width: 49.99998%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_7 {
    box-sizing: border-box;
    flex: 0 0 58.33331%;
    max-width: 58.33331%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_8 {
    box-sizing: border-box;
    flex: 0 0 66.66664%;
    max-width: 66.66664%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_9 {
    box-sizing: border-box;
    flex: 0 0 74.99997%;
    max-width: 74.99997%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_10 {
    box-sizing: border-box;
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_11 {
    box-sizing: border-box;
    flex: 0 0 91.66663%;
    max-width: 91.66663%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_tab_12 {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    word-wrap: break-word;
  }
}

/* sp 0pxから600pxまで適用 */
@media screen and (max-width: 600px) {
  .col_sp_0 {
    box-sizing: border-box;
    flex: 0 0 0%;
    max-width: 0%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_1 {
    box-sizing: border-box;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_2 {
    box-sizing: border-box;
    flex: 0 0 16.666666%;
    max-width: 16.666666%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_3 {
    box-sizing: border-box;
    flex: 0 0 24.999999%;
    max-width: 24.999999%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_4 {
    box-sizing: border-box;
    flex: 0 0 33.33332%;
    max-width: 33.33332%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_5 {
    box-sizing: border-box;
    flex: 0 0 41.66665%;
    max-width: 41.66665%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_6 {
    box-sizing: border-box;
    flex: 0 0 49.99998%;
    max-width: 49.99998%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_7 {
    box-sizing: border-box;
    flex: 0 0 58.33331%;
    max-width: 58.33331%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_8 {
    box-sizing: border-box;
    flex: 0 0 66.66664%;
    max-width: 66.66664%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_9 {
    box-sizing: border-box;
    flex: 0 0 74.99997%;
    max-width: 74.99997%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_10 {
    box-sizing: border-box;
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_11 {
    box-sizing: border-box;
    flex: 0 0 91.66663%;
    max-width: 91.66663%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_sp_12 {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    word-wrap: break-word;
  }
}
/* ssp 0pxから400pxまで適用 */
@media screen and (max-width: 400px) {
  .col_ssp_0 {
    box-sizing: border-box;
    flex: 0 0 0%;
    max-width: 0%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_1 {
    box-sizing: border-box;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_2 {
    box-sizing: border-box;
    flex: 0 0 16.666666%;
    max-width: 16.666666%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_3 {
    box-sizing: border-box;
    flex: 0 0 24.999999%;
    max-width: 24.999999%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_4 {
    box-sizing: border-box;
    flex: 0 0 33.33332%;
    max-width: 33.33332%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_5 {
    box-sizing: border-box;
    flex: 0 0 41.66665%;
    max-width: 41.66665%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_6 {
    box-sizing: border-box;
    flex: 0 0 49.99998%;
    max-width: 49.99998%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_7 {
    box-sizing: border-box;
    flex: 0 0 58.33331%;
    max-width: 58.33331%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_8 {
    box-sizing: border-box;
    flex: 0 0 66.66664%;
    max-width: 66.66664%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_9 {
    box-sizing: border-box;
    flex: 0 0 74.99997%;
    max-width: 74.99997%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_10 {
    box-sizing: border-box;
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_11 {
    box-sizing: border-box;
    flex: 0 0 91.66663%;
    max-width: 91.66663%;
    min-width: 0;
    word-wrap: break-word;
  }

  .col_ssp_12 {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 0;
    word-wrap: break-word;
  }
}

/* flexレイアウト */

.of_flex_nowrap {
  display: flex;
  width: 100%;
}

.j_c_center {
  justify-content: center;
}

.a_i_center {
  justify-content: center;
  align-items: center;
}

/* パーツデザイン */

/* ボタンデフォルト */
a.of_btn {
  background-color: #444;
  color: #fff;
  padding: 1rem 1.5rem;
  text-decoration: none;
}