@charset "UTF-8";

/* PC */
.box1_product {
    width: 100%;
    margin: 0 auto;
    display: block;

}

.h3_product {
    width: 100%;
    font-size: 1rem;
    color: #707070;
    text-align: center;
    background-color: #d6d6d6;
    margin: 30px 0;
}

.list1_product {
    width: 100%;
}

.list1_product li {
    width: 220px;
    float: left;
    margin-right: 40px;
    margin-bottom: 40px;
    /* 列の間隔を40pxに設定 */
	min-height: 305px;
}

.list1_product li:nth-child(4n) {
    margin-right: 0;
    /* 4つ目ごとに右のマージンを消す */
}

.list1_product li:hover {
    opacity: 0.7;
}

.product_name {
    font-size: 1rem;
    text-align: center;
    color: #707070;
    margin: 10px 0 0 0;
    line-height: 1.2;
}

.price {
    font-size: 1.3rem;
    text-align: center;
    color: #707070;
    margin: 10px 0 0 0;
    line-height: 1.2;
}

.price span {
    font-size: 0.9rem;
}

.h3_2_product {
    font-size: 1rem;
    text-align: center;
    color: #707070;
    margin: 30px 0;
}



/* タブレット用のメディアクエリ - product */
@media screen and (max-width: 1000px) {
    .box1_product {
        width: 90%;
        margin: 0 auto;
    }

    .h3_product {
        font-size: 0.9rem;
        /* フォントサイズを少し調整 */
        margin: 20px 0;
    }

    .list1_product {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        /* フレックスボックスでアイテムを横並びにし、次の行に折り返し */
        justify-content: space-between;
        /* アイテム間のスペースを均等に */
    }

    .list1_product li {
        width: 23%;
        /* 横に4つ並ぶように幅を設定 */
        margin-right: 2%;
        margin-bottom: 40px;
    }

    .list1_product li:nth-child(4n) {
        margin-right: 0;
        /* 4つ目ごとに右のマージンを消す */
    }

    .list1_product li img {
        max-width: 100%;
        /* 画像が親要素にフィットするように */
        height: auto;
    }

    .product_name {
        font-size: 0.9rem;
        text-align: center;
        color: #707070;
        margin: 10px 0 0 0;
        line-height: 1.2;
    }

    .price {
        font-size: 1.2rem;
        text-align: center;
        color: #707070;
        margin: 10px 0 0 0;
        line-height: 1.2;
    }

    .price span {
        font-size: 0.8rem;
    }

    .h3_2_product {
        font-size: 0.9rem;
        text-align: center;
        color: #707070;
        margin: 30px 0;
    }
}


@media only screen and (max-width: 480px) {

    @media only screen and (max-width: 480px) {
        .box1_product {
            width: 95%;
            margin: 0 auto;
        }

        .h3_product {
            font-size: 0.8rem;
            /* フォントサイズをもう少し小さく調整 */
            margin: 15px 0;
        }

        .list1_product {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            /* フレックスボックスでアイテムを横並びにし、次の行に折り返し */
            justify-content: space-between;
            /* アイテム間のスペースを均等に */
        }

        .list1_product li {
            width: 48%;
            /* 横に2つ並ぶように幅を設定 */
            margin-right: 2%;
            margin-bottom: 20px;
            /* アイテム間に余白を追加 */
			min-height: auto;
        }

        .list1_product li:nth-child(2n) {
            margin-right: 0;
            /* 2つ目ごとに右のマージンを消す */
        }

        .list1_product li img {
            max-width: 100%;
            /* 画像が親要素にフィットするように */
            height: auto;
        }

        .product_name {
            font-size: 0.8rem;
            text-align: center;
            color: #707070;
            margin: 5px 0 0 0;
            line-height: 1.2;
        }

        .price {
            font-size: 1rem;
            text-align: center;
            color: #707070;
            margin: 5px 0 0 0;
            line-height: 1.2;
        }

        .price span {
            font-size: 0.7rem;
        }

        .h3_2_product {
            font-size: 0.8rem;
            text-align: center;
            color: #707070;
            margin: 20px 0;
        }
    }

}