/* 横幅400pxで統一されたスライドスタイル */

.horizontal_scroll {
  /* PC・スマホ共通で400px幅に固定 */
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  
  /* スクロール設定 */
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  
  /* スクロールバーを非表示 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE, Edge */
  
  /* フレックスボックス */
  display: -ms-flexbox;
  display: flex;
  
  /* パディング */
  padding: 0 0 12px 8px;
}

/* Chromeなどのスクロールバーを非表示 */
.horizontal_scroll::-webkit-scrollbar {
  display: none;
}

/* PC表示でも400px幅を維持し、スクロールを有効にする */
@media screen and (min-width: 768px) {
  .horizontal_scroll {
    /* 400px幅を維持 */
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    
    /* スクロールを維持（解除しない） */
    overflow-x: scroll;
    
    /* パディング調整 */
    padding: 0 0 12px 8px;
  }
}

/* リストアイテム */
.horizontal_scroll > li {
  /* 各アイテムの幅 */
  flex: 0 0 auto;
  width: 100%;
  min-width: 220px;
  max-width: 280px;
}

/* PC表示でもアイテムサイズを維持 */
@media screen and (min-width: 768px) {
  .horizontal_scroll > li {
    min-width: 220px;
    max-width: 280px;
  }
}

/* アイテム間の余白 */
.horizontal_scroll > li:not(:last-child) {
  margin-right: 20px;
}

/* 最後のアイテムの右側余白 */
.horizontal_scroll > li:last-child {
  padding-right: 8px;
}

@media screen and (min-width: 768px) {
  .horizontal_scroll > li:last-child {
    padding-right: 8px;
  }
}

/* 画像の縦位置調整 */
.horizontal_scroll img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}