.row {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  max-width: 64rem
}

body.media-sp .row{
  max-width: none;
}

.row:after {
  clear: both;
}
.row:before {
  margin-bottom: -1px;
}
.row:before, .row:after {
  content: "";
  display: table;
}
@media (min-width: 768px) {
  .row .row{
    margin-left: -10px;
    margin-left: -0.625rem;
    margin-right: -10px;
    margin-right: -0.625rem
  }

  body.media-sp .row .row{
    margin-left: auto;
    margin-right: auto;
  }
  }

  body.media-pc .row .row{
    margin-left: -10px;
    margin-left: -0.625rem;
    margin-right: -10px;
    margin-right: -0.625rem
  }

.col {
  float: left;
  width: 100%;
}

@media (max-width: 767px) {
  .main .col {
    float: none;
    margin-top: 20px;
  }

  .main .col:first-child {
    margin-top: 0;
  }
}

.col--right {
  width: 100%;
  float: right
}


@media (min-width: 768px) {
  .col{
    padding-left: 0.625rem;
    padding-right: 0.625rem
  }

  body.media-sp .col{
    padding-left: 0;
    padding-right: 0
  }
  }

  body.media-pc .col{
    padding-left: 0.625rem;
    padding-right: 0.625rem
  }

.col--centered {
}

@media (min-width: 768px) {
  .col--centered{
    float: none;
    margin: auto
  }
  }

  body.media-pc .col--centered{
    float: none;
    margin: auto
  }

.col--collapsed {
}

@media (min-width: 768px) {
  .col--collapsed{
    padding: 0
  }
  }

  body.media-pc .col--collapsed{
    padding: 0
  }

[class*="col--pull"], [class*="col--push"] {
  position: relative;
}

.col--small-6 {
  width: 50%;
}

@media (min-width: 768px) {
  .col--1 {
    width: 8.33333%;
  }

  .col--push-1 {
    left: 8.33333%;
  }

  .col--pull-1 {
    left: -8.33333%;
  }

  .col--offset-1 {
    margin-left: 8.33333%;
  }
  
  .col--offset-1-right {
    margin-right: 8.33333%;
  }

  .col--2 {
    width: 16.66667%;
  }

  .col--push-2 {
    left: 16.66667%;
  }

  .col--pull-2 {
    left: -16.66667%;
  }

  .col--offset-2 {
    margin-left: 16.66667%;
  }

  .col--3 {
    width: 25%;
  }

  .col--push-3 {
    left: 25%;
  }

  .col--pull-3 {
    left: -25%;
  }

  .col--offset-3 {
    margin-left: 25%;
  }

  .col--4 {
    width: 33.33333%;
  }

  .col--push-4 {
    left: 33.33333%;
  }

  .col--pull-4 {
    left: -33.33333%;
  }

  .col--offset-4 {
    margin-left: 33.33333%;
  }

  .col--5 {
    width: 41.66667%;
  }

  .col--push-5 {
    left: 41.66667%;
  }

  .col--pull-5 {
    left: -41.66667%;
  }

  .col--offset-5 {
    margin-left: 41.66667%;
  }

  .col--6 {
    width: 50%;
  }

  .col--push-6 {
    left: 50%;
  }

  .col--pull-6 {
    left: -50%;
  }

  .col--offset-6 {
    margin-left: 50%;
  }

  .col--7 {
    width: 58.33333%;
  }

  .col--push-7 {
    left: 58.33333%;
  }

  .col--pull-7 {
    left: -58.33333%;
  }

  .col--offset-7 {
    margin-left: 58.33333%;
  }

  .col--8 {
    width: 66.66667%;
  }

  .col--push-8 {
    left: 66.66667%;
  }

  .col--pull-8 {
    left: -66.66667%;
  }

  .col--offset-8 {
    margin-left: 66.66667%;
  }

  .col--9 {
    width: 75%;
  }

  .col--push-9 {
    left: 75%;
  }

  .col--pull-9 {
    left: -75%;
  }

  .col--offset-9 {
    margin-left: 75%;
  }

  .col--10 {
    width: 83.33333%;
  }

  .col--push-10 {
    left: 83.33333%;
  }

  .col--pull-10 {
    left: -83.33333%;
  }

  .col--offset-10 {
    margin-left: 83.33333%;
  }

  .col--11 {
    width: 91.66666%;
  }

  .col--push-11 {
    left: 91.66666%;
  }

  .col--pull-11 {
    left: -91.66666%;
  }

  .col--offset-11 {
    margin-left: 91.66666%;
  }

  body.media-sp .col--1 {
    width: 100%;
  }

  body.media-sp .col--push-1 {
    left: 0;
  }

  body.media-sp .col--pull-1 {
    left: 0;
  }

  body.media-sp .col--offset-1 {
    margin-left: 0;
  }
  
  body.media-sp .col--offset-1-right {
    margin-right: 0;
  }

  body.media-sp .col--2 {
    width: 100%;
  }

  body.media-sp .col--push-2 {
    left: 0;
  }

  body.media-sp .col--pull-2 {
    left: 0;
  }

  body.media-sp .col--offset-2 {
    margin-left: 0;
  }

  body.media-sp .col--3 {
    width: 100%;
  }

  body.media-sp .col--push-3 {
    left: 0;
  }

  body.media-sp .col--pull-3 {
    left: 0;
  }

  body.media-sp .col--offset-3 {
    margin-left: 0;
  }

  body.media-sp .col--4 {
    width: 100%;
  }

  body.media-sp .col--push-4 {
    left: 0;
  }

  body.media-sp .col--pull-4 {
    left: 0;
  }

  body.media-sp .col--offset-4 {
    margin-left: 0;
  }

  body.media-sp .col--5 {
    width: 100%;
  }

  body.media-sp .col--push-5 {
    left: 0;
  }

  body.media-sp .col--pull-5 {
    left: 0;
  }

  body.media-sp .col--offset-5 {
    margin-left: 0;
  }

  body.media-sp .col--6 {
    width: 100%;
  }

  body.media-sp .col--push-6 {
    left: 0;
  }

  body.media-sp .col--pull-6 {
    left: 0;
  }

  body.media-sp .col--offset-6 {
    margin-left: 0;
  }

  body.media-sp .col--7 {
    width: 100%;
  }

  body.media-sp .col--push-7 {
    left: 0;
  }

  body.media-sp .col--pull-7 {
    left: 0;
  }

  body.media-sp .col--offset-7 {
    margin-left: 0;
  }

  body.media-sp .col--8 {
    width: 100%;
  }

  body.media-sp .col--push-8 {
    left: 0;
  }

  body.media-sp .col--pull-8 {
    left: 0;
  }

  body.media-sp .col--offset-8 {
    margin-left: 0;
  }

  body.media-sp .col--9 {
    width: 100%;
  }

  body.media-sp .col--push-9 {
    left: 0;
  }

  body.media-sp .col--pull-9 {
    left: 0;
  }

  body.media-sp .col--offset-9 {
    margin-left: 0;
  }

  body.media-sp .col--10 {
    width: 100%;
  }

  body.media-sp .col--push-10 {
    left: 0;
  }

  body.media-sp .col--pull-10 {
    left: 0;
  }

  body.media-sp .col--offset-10 {
    margin-left: 0;
  }

  body.media-sp .col--11 {
    width: 100%;
  }

  body.media-sp .col--push-11 {
    left: 0;
  }

  body.media-sp .col--pull-11 {
    left: 0;
  }

  body.media-sp .col--offset-11 {
    margin-left: 0;
  }
}

  body.media-pc .col--1 {
    width: 8.33333%;
  }

  body.media-pc .col--push-1 {
    left: 8.33333%;
  }

  body.media-pc .col--pull-1 {
    left: -8.33333%;
  }

  body.media-pc .col--offset-1 {
    margin-left: 8.33333%;
  }
  
  body.media-pc .col--offset-1-right {
    margin-right: 8.33333%;
  }

  body.media-pc .col--2 {
    width: 16.66667%;
  }

  body.media-pc .col--push-2 {
    left: 16.66667%;
  }

  body.media-pc .col--pull-2 {
    left: -16.66667%;
  }

  body.media-pc .col--offset-2 {
    margin-left: 16.66667%;
  }

  body.media-pc .col--3 {
    width: 25%;
  }

  body.media-pc .col--push-3 {
    left: 25%;
  }

  body.media-pc .col--pull-3 {
    left: -25%;
  }

  body.media-pc .col--offset-3 {
    margin-left: 25%;
  }

  body.media-pc .col--4 {
    width: 33.33333%;
  }

  body.media-pc .col--push-4 {
    left: 33.33333%;
  }

  body.media-pc .col--pull-4 {
    left: -33.33333%;
  }

  body.media-pc .col--offset-4 {
    margin-left: 33.33333%;
  }

  body.media-pc .col--5 {
    width: 41.66667%;
  }

  body.media-pc .col--push-5 {
    left: 41.66667%;
  }

  body.media-pc .col--pull-5 {
    left: -41.66667%;
  }

  body.media-pc .col--offset-5 {
    margin-left: 41.66667%;
  }

  body.media-pc .col--6 {
    width: 50%;
  }

  body.media-pc .col--push-6 {
    left: 50%;
  }

  body.media-pc .col--pull-6 {
    left: -50%;
  }

  body.media-pc .col--offset-6 {
    margin-left: 50%;
  }

  body.media-pc .col--7 {
    width: 58.33333%;
  }

  body.media-pc .col--push-7 {
    left: 58.33333%;
  }

  body.media-pc .col--pull-7 {
    left: -58.33333%;
  }

  body.media-pc .col--offset-7 {
    margin-left: 58.33333%;
  }

  body.media-pc .col--8 {
    width: 66.66667%;
  }

  body.media-pc .col--push-8 {
    left: 66.66667%;
  }

  body.media-pc .col--pull-8 {
    left: -66.66667%;
  }

  body.media-pc .col--offset-8 {
    margin-left: 66.66667%;
  }

  body.media-pc .col--9 {
    width: 75%;
  }

  body.media-pc .col--push-9 {
    left: 75%;
  }

  body.media-pc .col--pull-9 {
    left: -75%;
  }

  body.media-pc .col--offset-9 {
    margin-left: 75%;
  }

  body.media-pc .col--10 {
    width: 83.33333%;
  }

  body.media-pc .col--push-10 {
    left: 83.33333%;
  }

  body.media-pc .col--pull-10 {
    left: -83.33333%;
  }

  body.media-pc .col--offset-10 {
    margin-left: 83.33333%;
  }

  body.media-pc .col--11 {
    width: 91.66666%;
  }

  body.media-pc .col--push-11 {
    left: 91.66666%;
  }

  body.media-pc .col--pull-11 {
    left: -91.66666%;
  }

  body.media-pc .col--offset-11 {
    margin-left: 91.66666%;
  }
