@charset "utf-8";
/* CSS Document */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.content-wrap{
    max-width: 100%;
    width: 100%;
    margin: 0 auto 60px;
}
.content-ttl{
/*    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 20px;*/
    font-size: calc(18px + 8*((100vw - 320px) / 1120));
    font-weight: bold;
    color: #006600;
    border-bottom: 2px solid #006600;
    padding-bottom: 10px;
}
.content-wrap img{
    width: 100%;
}
.content-wrap li{
    list-style-type: none;
}
.content-wrap a{
    text-decoration: none;
}
/*バナーエリア*/
.banner_area{
    width: 100%;
}
.banner_area_list{
    display: block;
}
.banner_area_list .banner_area_listitem{
    width: 100%;
    margin-bottom: 16px;
}

/*ドリ★コンおすすめアイテム*/
.recommend_area{
    width: 100%;
}
.recommend_item{
    max-width: 1100px;
    width: 100%;
    margin: 0 auto 30px;
}
.recommend_list{
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.recommend_listitem{
    width: calc(100% / 4 - 10px);
}
@media screen and (max-width:768px){
    .recommend_listitem{
        width: calc(100% / 3 - 10px);
    }
}
@media screen and (max-width:512px){
    .recommend_listitem{
        width: calc(100% / 2 - 10px);
    }
}

/*商品から選ぶ*/
.category_area{
    width: 100%;
}
.category_list{
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.category_listitem{
    width: calc(100% / 4 - 10px);
}
@media screen and (max-width:768px){
    .category_listitem{
        width: calc(100% / 3 - 10px);
    }
}
@media screen and (max-width:512px){
    .category_listitem{
        width: calc(100% / 2 - 10px);
    }
}


/*メーカーから選ぶ*/
.maker_area{
    width: 100%;
}
.maker_list{
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}
.maker_listitem{
    width: calc(100% / 6 - 10px);
}
@media screen and (max-width:768px){
    .maker_listitem{
        width: calc(100% / 3 - 10px);
    }
}
@media screen and (max-width:512px){
    .maker_listitem{
        width: calc(100% / 2 - 10px);
    }
}

/*商品一覧*/
.product_listitem {
    margin-left: 16px;
}
.product_name{
    overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    color: #000;
}
.product_price{
    color: #bf0000;
}
 
/*ネコの日*/
.neko_area h2{
    max-width: 780px;
    width: 100%;
    margin: 0 auto 20px; 
}


        .product_area {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .product_slider {
            position: relative;
            overflow: hidden; /* スクロールバー非表示 */
            cursor: grab;
        }

        .product_list {
            display: flex;
            transition: transform 0.3s ease-out;
        }

        /* PC：5個表示 */
        .product_listitem {
            flex: 0 0 calc(20% - 12px); /* 5個表示 + 余白調整 */
            margin-right: 15px;
            cursor: pointer;
        }

        .product_listitem:last-child {
            margin-right: 0; /* 最後のアイテムのマージンを削除 */
        }

        .product_listitem img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* スマホ：3個表示 */
        @media (max-width: 768px) {
            .product_listitem {
                flex: 0 0 calc(33.33% - 10px); /* 3個表示 */
                margin-right: 10px;
            }
        }

        /* ドラッグ中のスタイル */
        .product_slider.active {
            cursor: grabbing;
            user-select: none;
        }