/* ===============================
   BootstrapっぽいCSS
================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

[class^="col-"] {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%; /* SPは全部縦並び */
}

/* ===============================
   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%; }

}