/* =====================
  Original grid system
===================== */
/* =====
.row.row-col-sp-five-gutter-10：スマートフォンサイズのときに、rowの左右余白を10pxにするために利用。rowの直上要素のpaddingが15pxであることが前提。

.col-xl-five：xlサイズでの表示を5カラム表示にする。カラム同士のpaddingのデフォルトは10px。

.row-col-xl-five：col-xl-fiveを囲うrowに当てるclass。col-xl-fiveのデフォルトpaddingを10pxにしているので、ネガティブマージンを合わせるために利用。
===== */

@media screen and (max-width: 767px) {
  /*
  .row.row-col-sp-five-gutter-10{
      padding-left: 10px !important;
      padding-right: 10px !important;
  }
  */
  .row.row-col-sp-five-gutter-10{
      /* 通常、rowの左右ガターは「直上要素のpadding」 + 「直下col-*のpadding」 - 「rowのネガティブmargin」なので、ネガティブマージンを10px減らすことでガターを10px増やすことができる */
      margin-left: -5px;
      margin-right: -5px;
  }
}
@media screen and (min-width: 1200px) {
  .row.row-col-xl-five{
    margin-left: -10px;
    margin-right: -10px;
  }
  .row.row-col-xl-five .col-xl-five {
    width: 20%;
    flex: 0 0 20%;
    float: left;
    padding-left: 10px;
    padding-left: 10px;
  }
  .col-xl-five img{
    width: 100%;
    height: auto;
  }
}