/*! flex v2.0.0| MIT License | https://github.com/plus-agc-service-yamauchi/flex */
/* ============================================
  flex - Flexible CSS Grid System
============================================ */
/*
 Settings
--------------------------------- */
/*
  Base
--------------------------------- */
/*
  <div class="flex">
    <div class="flex__item">A</div>
    <div class="flex__item">B</div>
    <div class="flex__item">C</div>
  </div>
*/
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.flex__item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0;
}

/*
  Direction
--------------------------------- */
/*
  <div class="flex" data-dir="reverse">
    <div class="flex__item">A</div>
    <div class="flex__item">B</div>
    <div class="flex__item">C</div>
  </div>
*/
.flex[data-dir="normal"] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flex[data-dir="reverse"] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

/*
  Alignment
--------------------------------- */
/*
  <div class="flex" data-align="center">
    <div class="flex__item">A</div>
    <div class="flex__item">B</div>
    <div class="flex__item" data-align="end middle">C</div>
  </div>
*/
.flex[data-align~="start"] {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.flex[data-align~="center"] {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex[data-align~="end"] {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.flex[data-align~="justify"] {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex[data-align~="top"] {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.flex[data-align~="middle"] {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex[data-align~="bottom"] {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.flex__item[data-align~="start"] {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.flex__item[data-align~="center"] {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.flex__item[data-align~="end"] {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.flex__item[data-align~="top"] {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
              -ms-grid-row-align: stretch;
          align-self: stretch;
}

.flex__item[data-align~="middle"] {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
              -ms-grid-row-align: stretch;
          align-self: stretch;
}

.flex__item[data-align~="bottom"] {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
              -ms-grid-row-align: stretch;
          align-self: stretch;
}

/*
  Grid
--------------------------------- */
/*
  <div class="flex" data-gutter="normal">
    <div class="flex__item" data-grid="sp12 tab4 lap6">A</div>
    <div class="flex__item" data-grid="sp6 tab4 lap3">B</div>
    <div class="flex__item" data-grid="sp6 tab4 lap3">C</div>
  </div>
*/
.flex[data-gutter] {
  width: auto;
}

.flex[data-gutter] > .flex__item {
  border: solid transparent;
  background-clip: padding-box;
}

.flex[data-gutter="small"] {
  margin: -1.25vw;
}

.flex[data-gutter="small"] > .flex__item {
  border-width: 1.25vw;
}

.flex[data-gutter="normal"] {
  margin: -2.5vw;
}

.flex[data-gutter="normal"] > .flex__item {
  border-width: 2.5vw;
}

.flex[data-gutter="large"] {
  margin: -3.75vw;
}

.flex[data-gutter="large"] > .flex__item {
  border-width: 3.75vw;
}

.flex__item[data-grid~="sp1"] {
  width: 8.33333%;
}

.flex__item[data-grid~="sp2"] {
  width: 16.66667%;
}

.flex__item[data-grid~="sp3"] {
  width: 25%;
}

.flex__item[data-grid~="sp4"] {
  width: 33.33333%;
}

.flex__item[data-grid~="sp5"] {
  width: 41.66667%;
}

.flex__item[data-grid~="sp6"] {
  width: 50%;
}

.flex__item[data-grid~="sp7"] {
  width: 58.33333%;
}

.flex__item[data-grid~="sp8"] {
  width: 66.66667%;
}

.flex__item[data-grid~="sp9"] {
  width: 75%;
}

.flex__item[data-grid~="sp10"] {
  width: 83.33333%;
}

.flex__item[data-grid~="sp11"] {
  width: 91.66667%;
}

.flex__item[data-grid~="sp12"] {
  width: 100%;
}

.flex__item[data-grid~="spFive"] {
  width: 20%;
}

@media screen and (min-width: 576px) {
  .flex__item[data-grid~="sm1"] {
    width: 8.33333%;
  }
  .flex__item[data-grid~="sm2"] {
    width: 16.66667%;
  }
  .flex__item[data-grid~="sm3"] {
    width: 25%;
  }
  .flex__item[data-grid~="sm4"] {
    width: 33.33333%;
  }
  .flex__item[data-grid~="sm5"] {
    width: 41.66667%;
  }
  .flex__item[data-grid~="sm6"] {
    width: 50%;
  }
  .flex__item[data-grid~="sm7"] {
    width: 58.33333%;
  }
  .flex__item[data-grid~="sm8"] {
    width: 66.66667%;
  }
  .flex__item[data-grid~="sm9"] {
    width: 75%;
  }
  .flex__item[data-grid~="sm10"] {
    width: 83.33333%;
  }
  .flex__item[data-grid~="sm11"] {
    width: 91.66667%;
  }
  .flex__item[data-grid~="sm12"] {
    width: 100%;
  }
  .flex__item[data-grid~="smFive"] {
    width: 20%;
  }
  .flex__item[data-grid~="smAuto"] {
    width: auto;
  }
}

@media screen and (min-width: 768px) {
  .flex__item[data-grid~="md1"] {
    width: 8.33333%;
  }
  .flex__item[data-grid~="md2"] {
    width: 16.66667%;
  }
  .flex__item[data-grid~="md3"] {
    width: 25%;
  }
  .flex__item[data-grid~="md4"] {
    width: 33.33333%;
  }
  .flex__item[data-grid~="md5"] {
    width: 41.66667%;
  }
  .flex__item[data-grid~="md6"] {
    width: 50%;
  }
  .flex__item[data-grid~="md7"] {
    width: 58.33333%;
  }
  .flex__item[data-grid~="md8"] {
    width: 66.66667%;
  }
  .flex__item[data-grid~="md9"] {
    width: 75%;
  }
  .flex__item[data-grid~="md10"] {
    width: 83.33333%;
  }
  .flex__item[data-grid~="md11"] {
    width: 91.66667%;
  }
  .flex__item[data-grid~="md12"] {
    width: 100%;
  }
  .flex__item[data-grid~="mdFive"] {
    width: 20%;
  }
  .flex__item[data-grid~="mdAuto"] {
    width: auto;
  }
}

@media screen and (min-width: 992px) {
  .flex__item[data-grid~="lg1"] {
    width: 8.33333%;
  }
  .flex__item[data-grid~="lg2"] {
    width: 16.66667%;
  }
  .flex__item[data-grid~="lg3"] {
    width: 25%;
  }
  .flex__item[data-grid~="lg4"] {
    width: 33.33333%;
  }
  .flex__item[data-grid~="lg5"] {
    width: 41.66667%;
  }
  .flex__item[data-grid~="lg6"] {
    width: 50%;
  }
  .flex__item[data-grid~="lg7"] {
    width: 58.33333%;
  }
  .flex__item[data-grid~="lg8"] {
    width: 66.66667%;
  }
  .flex__item[data-grid~="lg9"] {
    width: 75%;
  }
  .flex__item[data-grid~="lg10"] {
    width: 83.33333%;
  }
  .flex__item[data-grid~="lg11"] {
    width: 91.66667%;
  }
  .flex__item[data-grid~="lg12"] {
    width: 100%;
  }
  .flex__item[data-grid~="lgFive"] {
    width: 20%;
  }
  .flex__item[data-grid~="lgAuto"] {
    width: auto;
  }
}

@media screen and (min-width: 1200px) {
  .flex__item[data-grid~="xl1"] {
    width: 8.33333%;
  }
  .flex__item[data-grid~="xl2"] {
    width: 16.66667%;
  }
  .flex__item[data-grid~="xl3"] {
    width: 25%;
  }
  .flex__item[data-grid~="xl4"] {
    width: 33.33333%;
  }
  .flex__item[data-grid~="xl5"] {
    width: 41.66667%;
  }
  .flex__item[data-grid~="xl6"] {
    width: 50%;
  }
  .flex__item[data-grid~="xl7"] {
    width: 58.33333%;
  }
  .flex__item[data-grid~="xl8"] {
    width: 66.66667%;
  }
  .flex__item[data-grid~="xl9"] {
    width: 75%;
  }
  .flex__item[data-grid~="xl10"] {
    width: 83.33333%;
  }
  .flex__item[data-grid~="xl11"] {
    width: 91.66667%;
  }
  .flex__item[data-grid~="xl12"] {
    width: 100%;
  }
  .flex__item[data-grid~="xlFive"] {
    width: 20%;
  }
  .flex__item[data-grid~="xlAuto"] {
    width: auto;
  }
}

@media screen and (min-width: 1400px) {
  .flex__item[data-grid~="xxl1"] {
    width: 8.33333%;
  }
  .flex__item[data-grid~="xxl2"] {
    width: 16.66667%;
  }
  .flex__item[data-grid~="xxl3"] {
    width: 25%;
  }
  .flex__item[data-grid~="xxl4"] {
    width: 33.33333%;
  }
  .flex__item[data-grid~="xxl5"] {
    width: 41.66667%;
  }
  .flex__item[data-grid~="xxl6"] {
    width: 50%;
  }
  .flex__item[data-grid~="xxl7"] {
    width: 58.33333%;
  }
  .flex__item[data-grid~="xxl8"] {
    width: 66.66667%;
  }
  .flex__item[data-grid~="xxl9"] {
    width: 75%;
  }
  .flex__item[data-grid~="xxl10"] {
    width: 83.33333%;
  }
  .flex__item[data-grid~="xxl11"] {
    width: 91.66667%;
  }
  .flex__item[data-grid~="xxl12"] {
    width: 100%;
  }
  .flex__item[data-grid~="xxlFive"] {
    width: 20%;
  }
  .flex__item[data-grid~="xxlAuto"] {
    width: auto;
  }
}
/*# sourceMappingURL=flex.css.map */