/*************************************
grid col
**************************************/
.grid.col-2>.box {
  width: calc((100% - 25px) / 2);
}

.grid.col-3>.box {
  width: calc((100% - 50px) / 3);
}

@supports (-ms-ime-align: auto) {
  .grid.col-3>.box {
    width: calc(-16.6px + 33.3%);
  }
}

.grid.col-4>.box {
  width: calc((100% - 75px) / 4);
}

.grid.col-2>.box:nth-child(2n+1),
.grid.col-3>.box:not(:nth-child(3n)),
.grid.col-4>.box:not(:nth-child(4n)) {
  margin-right: 25px;
}

.grid.col-2>.box:not(:nth-child(-n+2)),
.grid.col-3>.box:not(:nth-child(-n+3)),
.grid.col-4>.box:not(:nth-child(-n+4)) {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .grid.col-2:not(.grid-sp)>.box,
  .grid.col-3:not(.grid-sp)>.box,
  .grid.col-4:not(.grid-sp)>.box {
    width: 100%;
  }
  .grid.col-2:not(.grid-sp)>.box:nth-child(2n+1),
  .grid.col-3:not(.grid-sp)>.box:not(:nth-child(3n)),
  .grid.col-4:not(.grid-sp)>.box:not(:nth-child(4n)) {
    margin-right: 0;
  }
  .grid.col-2:not(.grid-sp)>.box+.box,
  .grid.col-3:not(.grid-sp)>.box+.box,
  .grid.col-4:not(.grid-sp)>.box+.box {
    margin-top: 20px;
  }

  .grid-sp.col-2>.box {
    width: calc((100% - 20px) / 2);
  }
  .grid-sp.col-3>.box {
    width: calc((100% - 40px) / 3);
  }
  .grid-sp.col-2>.box:nth-child(2n+1),
  .grid-sp.col-3>.box:not(:nth-child(3n)) {
    margin-right: 20px;
  }
  .grid-sp.col-2>.box:not(:nth-child(-n+2)),
  .grid-sp.col-3>.box:not(:nth-child(-n+3)) {
    margin-top: 20px;
  }
}