/* =====================================
   LP GRID SYSTEM
===================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --gutter: 20px;
}

/* Container */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-fluid {
  width: 100%;
  padding: 0 var(--gutter);
}

/* Row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
}

.row > * {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}

/* =====================================
   12 Grid (PC 768px〜)
===================================== */

@media (min-width: 768px) {

  .col-1  { width: 8.333%; }
  .col-2  { width: 16.666%; }
  .col-3  { width: 25%; }
  .col-4  { width: 33.333%; }
  .col-5  { width: 41.666%; }
  .col-6  { width: 50%; }
  .col-7  { width: 58.333%; }
  .col-8  { width: 66.666%; }
  .col-9  { width: 75%; }
  .col-10 { width: 83.333%; }
  .col-11 { width: 91.666%; }
  .col-12 { width: 100%; }

}

/* =====================================
   Alignment
===================================== */

.align-items-center { align-items: center; }
.align-items-end    { align-items: flex-end; }

.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }

/* =====================================
   Gutter control
===================================== */

.g-0 { --gutter: 0; }
.g-1 { --gutter: 10px; }
.g-2 { --gutter: 20px; }
.g-3 { --gutter: 30px; }