@charset "UTF-8";
/* dlight */
.dm{}

/* SMARTPHONE
================================================== */
@media screen and (max-width: 768px) {
  
  .arrow-button-prev,
  .arrow-button-next {
    position: absolute;
    cursor: pointer;
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
    background: #757569;
    z-index: 10;
    &::after {
      position: absolute;
      top: 3px;
      display: block;
      content: '';
      width: 15px;
      height: 15px;
    }
  }
  .arrow-button-prev {
    left: 5%;
    &::after {
      right: -6px;
      border-bottom: 1px solid #C7C1B3;
      border-left: 1px solid #C7C1B3;
      -webkit-transform: rotate(45deg);
      transform: rotate(41deg) skew(-8deg, 0deg);
    }
  }
  .arrow-button-next {
    right: 5%;
    justify-content: flex-end;
    &::after {
      left: -6px;
      border-top: 1px solid #C7C1B3;
      border-right: 1px solid #C7C1B3;
      transform: rotate(41deg) skew(-8deg, 0deg);
    }
  }
  
}

/* DESKTOP
================================================== */
@media (768px < width) {
  
  .arrow-button-prev,
  .arrow-button-next {
    position: absolute;
    cursor: pointer;
    top: calc(50% - 14px);
    width: 36px;
    height: 36px;
    background: #757569;
    z-index: 10;
    &::after {
      position: absolute;
      top: 5px;
      display: block;
      content: '';
      width: 28px;
      height: 26px;
    }
  }
  .arrow-button-prev {
    left: 0;
    &::after {
      right: -13px;
      border-bottom: 1px solid #C7C1B3;
      border-left: 1px solid #C7C1B3;
      -webkit-transform: rotate(45deg);
      transform: rotate(41deg) skew(-8deg, 0deg);
    }
  }
  .arrow-button-next {
    right: 0;
    justify-content: flex-end;
    &::after {
      left: -13px;
      border-top: 1px solid #C7C1B3;
      border-right: 1px solid #C7C1B3;
      transform: rotate(41deg) skew(-8deg, 0deg);
    }
  }
  
}