.mobile-works {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.mobile-works ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-works li {
  flex-shrink: 0;
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
}

/* スライダーのレスポンシブ設定 */
@media (min-width: 721px) {
  .mobile-works {
    display: none;
  }
}

@media (max-width: 720px) {
  .desktop-works {
    display: none;
  }

  .mobile-works {
    display: block;
  }
}

/* スライダーアニメーション */
.mobile-works ul {
  transition: transform 0.3s ease-in-out;
}

.mobile-works {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

.mobile-works ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: transform 0.3s ease-in-out;
  width: 100%;
  box-sizing: border-box;
}

.mobile-works li {
  width: 100%;
  flex: 0 0 100%;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.works-mockup-container {
  width: 100%;
  max-width: calc(100% - 30px); /* コンテナの最大幅を設定 */
  margin: 0 15px; /* 左右のマージンを設定 */
  box-sizing: border-box;
}

/* スライダーのレスポンシブ設定 */
@media (min-width: 721px) {
  .mobile-works {
    display: none;
  }
}

@media (max-width: 720px) {
  .desktop-works {
    display: none;
  }

  .mobile-works {
    display: block;
  }
}