/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position: relative;
    width: 100%; /* スライダー全体の幅 */
    height: 99vh; /* 画面の99%の高さ */
    max-height: 1000px; /* 最大1000pxまで */
    overflow: hidden;
    margin-bottom: 20px;
}

.slider-item {
    width: 100%; /* 横幅を全体に合わせる */
    height: 100%; /* 高さをスライダーに合わせる */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.slider-item img {
    width: 100%; /* 横幅をスライダーに合わせる */
    height: 100%; /* 高さもスライダーに合わせる */
    object-fit: cover; /* 画像がスライダー全体を埋める */
    display: block;
    margin: 0 auto;
}


/* 矢印の設定 */
.slick-prev, 
.slick-next {
    position: absolute;
    z-index: 3;
    top: 42%; /* スライダー中央付近に配置 */
    cursor: pointer;
    outline: none;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    height: 25px;
    width: 25px;
}

.slick-prev {
    left: 2.5%;
    transform: rotate(-135deg); /* 左矢印の形状 */
}

.slick-next {
    right: 2.5%;
    transform: rotate(45deg); /* 右矢印の形状 */
}

/* ドットナビゲーションの設定 */
.slick-dots {
    position: relative;
    z-index: 3;
    text-align: center;
    margin: -30px 0 0 0; /* 上のスライダーとドットナビゲーションとの間隔を縮める */
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 8px; /* ドットボタンのサイズ */
    height: 8px;
    display: block;
    border-radius: 50%;
    background: #ccc; /* ドットボタンの色 */
}

.slick-dots .slick-active button {
    background: #333; /* 現在地のドットボタンの色 */
}



/* モバイル用のスライダー調整 */
@media (max-width: 768px) {
    .slider {
        height: 60vh; /* モバイルでスライダーの高さを60vhに */
        max-height: 400px; /* 最大400pxまでに制限 */
    }

    .slider-item {
        height: 100%; /* スライダー内で高さを100%に */
    }

    .slider-item img {
        width: 100%; /* 横幅はスライダーに合わせる */
        height: 100%; /* 高さもスライダーに合わせる */
        object-fit: cover; /* 画像が親要素を埋めるように */
        max-height: 100%; /* スライダーの高さを超えない */
    }

    .slick-prev,
    .slick-next {
        top: 35%; /* 矢印を中央付近に */
        height: 20px;
        width: 20px;
    }

    .slick-dots {
        margin: -15px 0 0 0; /* ドットとスライダーの間隔を調整 */
    }
}

/* 小さなスマホ用 (480px以下) */
@media (max-width: 480px) {
    .slider {
        height: 50vh; /* 高さを50vhに縮小 */
    }

    .slider-item img {
        object-fit: contain; /* 拡大を防ぎ、全体を表示 */
    }

    .slick-prev,
    .slick-next {
        top: 30%; /* 矢印の位置調整 */
        height: 15px;
        width: 15px;
    }

    .slick-dots {
        margin: -10px 0 0 0; /* ドットの間隔をさらに縮小 */
    }
}

/* スライダーと商品リストの間隔調整 */
@media (max-width: 768px) {
    main {
        padding: 0 10px; /* 余白を縮小 */
        margin-top: -20px; /* スライダーと商品リストの隙間を減らす */
    }

    .product-list {
        padding: 10px 0; /* 商品リストの余白を縮小 */
    }

    .product-item {
        margin-bottom: 10px; /* 商品間の余白を縮小 */
    }
}

/* さらに小さなスマホ用 (480px以下) */
@media (max-width: 480px) {
    main {
        padding: 0 5px;
        margin-top: -10px; /* 隙間をさらに減らす */
    }

    .product-list {
        padding: 5px 0; /* 商品リストの余白をさらに縮小 */
    }

    .product-item {
        margin-bottom: 5px; /* 商品間の余白を縮小 */
    }
}