html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.daily-sale-container {
    text-align: center;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    overflow: visible; /* スライダーボタンのためにvisibleにする */
}

.remaining-time {
    font-size: 1.2em;
    font-weight: bold;
    margin: 10px auto;
    color: red;
    width: fit-content;
}

.daily-sale-slider {
    position: relative;
    /* width, left, padding はメディアクエリで制御 */
    margin: 0 auto;
    /* overflow: hidden; */ /* JSで制御するため削除またはコメントアウト */
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%; /* JS制御されるが、初期値として */
}

.slide {
    /* flex, min-width, padding, opacity はメディアクエリで制御 */
    transition: all 0.5s ease-in-out;
    box-sizing: border-box; /* パディングを含める */
}

.slide img {
    width: 100%;
    height: 250px; /*  適切な高さを指定してください */
    object-fit: cover;
    border-radius: 10px;
    object-position: center;
}

.daily-sale-slider button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: white;
    /* ボタンのサイズを大きくする */
    width: 50px;  /* PCサイズより小さく */
    height: 50px; /* PCサイズより小さく */
    font-size: 36px; /* font-sizeを少し大きく */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1;
    padding: 0;
}

.daily-sale-slider button:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* メディアクエリで PC, スマホ縦向き, スマホ横向き のスタイルを定義 */

/* PC表示（835px以上をPCとして扱う） */
@media (min-width: 835px) {
    .daily-sale-slider {
        width: calc(100% + 800px); /* PCの幅 */
        left: -400px;
    }
    .slide {
        flex: 0 0 calc(100% / 5); /* 5分割（前後1枚+メイン3枚） */
        min-width: calc(100% / 5);
        padding: 0 10px;
        /* opacity は JS で制御 */
    }
    /* ボタンの位置調整 */
    .daily-sale-slider button {
        width: 80px;
        height: 80px;
        font-size: 48px;
    }
    .daily-sale-slider button.prev {
        left: 420px;
    }
    .daily-sale-slider button.next {
        right: 420px;
    }
}

/* スマホ表示（縦向き・横向き共通、834px以下をスマホとして扱う）*/
@media (max-width: 834px) {
    .daily-sale-slider {
        width: 100%; /* スマホは横に広げない */
        left: 0; /* 左位置をリセット */
    }
     /* ボタンの位置調整（スマホ） */
    .daily-sale-slider button.prev {
        left: 10px;
    }
    .daily-sale-slider button.next {
        right: 10px;
    }
}

/* スマホ縦向き専用スタイル */
@media (max-width: 834px) and (orientation: portrait) {
     .slide {
        flex: 0 0 100%; /* 1列表示 */
        min-width: 100%;
        padding: 0 10px; /* パディング調整 */
        opacity: 1; /* 常に表示 */
    }
}

/* スマホ横向き専用スタイル */
@media (orientation: landscape) and (max-width: 834px) {
    .slide {
        flex: 0 0 50%; /* 2列表示 */
        min-width: 50%;
        padding: 0 5px; /* パディング調整 */
        opacity: 1; /* 常に表示 */
    }
     /* ボタンの位置調整（2列表示に合わせて外側に移動） */
     .daily-sale-slider button.prev {
         left: -25px; /* 外側に移動 */
     }
     .daily-sale-slider button.next {
         right: -25px; /* 外側に移動 */
     }
}


/* 人気ランキングの見出しスタイル */
.popular-items-heading {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}

/* デイリーセールの見出しスタイル */
.daily-sale-heading {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}

/* 「ジャンルで絞る」ボタンのスタイル */
#toggle-genre-filters {
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid #ccc;
    background-color: #eee;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 5px;
}

/* ギチギチに詰めて表示 (daily-sale.php の #genre-filters 内の div にのみ適用) */
#daily-sale #genre-filters > div { /*  #daily-sale を追加 */
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
  }
  
  #daily-sale #genre-filters label { /* #daily-sale を追加 */
     font-size: 0.8em;
      margin: 0;
      padding: 2px 5px;
      border: 1px solid #ddd;
      border-radius: 3px;
      display: inline-block;
      cursor:pointer;
  }
  
  #daily-sale #genre-filters label:hover{ /* #daily-sale を追加 */
   background-color: #E0E0E0;
  }