:root{
    --red:#e60011;
    --dullRed:#af4233;
    --btnActive:#eb503c;
    --fontBaseSize:clamp(.875rem, .591rem + 1.42vw, 1.5rem);
}

.cart-btn{
    background:var(--dullRed); 
}   

.tanehyoLpWrapper{
    font-size:var(--fontBaseSize);

    min-height:100vh;
    display: grid;
    grid-template-columns:1fr; grid-template-rows:100px 1fr 100px;

    header{
        display: flex; align-items: center; justify-content: center; color:#fff;
    }

    main{
        
    }

    footer{
        /* background:#ea6; display: flex; align-items: center; justify-content: center;
        color:#fff; */
    }

    .block{
        width:clamp(375px, 100%, 1840px); margin:0 auto; padding:min(20px, 4vw);
    }
    .itemList{
        display:flex; flex-wrap:wrap; gap:min(15px, 3vw);

        .topic{
            background:#fff; padding:min(15px, 3vw); border:1px solid #ccc;
            width:calc((100% / 4) - min(15px, 3vw));

            .pict{
                width:100%; aspect-ratio:4/3; background:#ccc; margin-bottom: .5em; overflow: hidden;

                img{
                    width:100%; height:100%; object-fit:cover; object-position: center;
                    transition-duration:.3s;
                }
            }
            .cont{
                margin-bottom: 1em;

                .title{
                    font-size:110%; font-weight:600; margin-bottom: .25em;
                }
                .text{
                    margin-bottom: .75em; font-size:75%;
                }
            }/*cont*/
            .data{
                margin-bottom: .75em;

                p{
                    color:#999; font-size:75%;
                }
            }

            .price{
                color:var(--red); font-weight:600; font-size:125%;
            }
            .cart-btn{
                display: flex; align-items: center; justify-content: center;
                width:100%; height:2.5em; color:#fff;
            }
        }
    }/*itemList*/

}/*tanehyoLpWrapper*/




@media screen and (width <= 1280px){
    .tanehyoLpWrapper{
        .itemList{
            gap:3vw;

            .topic{
                width:calc((100% / 3) - 2vw);
            }
        }
    }
}/*〜1280*/



@media screen and (width <= 768px){
    .tanehyoLpWrapper{
        .itemList{

            .topic{
                width:calc((100% / 2) - 1.5vw);
            }
        }
    }
}/*〜1280*/



@media (hover){
    .tanehyoLpWrapper{
        .itemList{
            .topic{
                &:has(.cart-btn:hover){
                     .pict{
                        img{
                            transform:scale(1.1);
                        }
                    }
                }  
            }
        }/*itemList*/

        .cart-btn{
            &:hover{
                background:var(--btnActive);
            }
        }
    }/*tanehyoLpWrapper*/
    

    
}









/* カテゴリページ使用 *******************************************************/

#lpHeader{
    display:none;
}
iframe{
    width:100%;
}

[id*="lppage"]{

    font-size:var(--fontBaseSize);

    min-height:100vh;
    display: grid;
    grid-template-columns:1fr; grid-template-rows:150px 1fr 100px;

    #lpHeader{
        display: flex; align-items: center; justify-content: center; color:#fff;
        /* background-image:url(images/smple-headerBG-vege.jpg); */
        background-image:url(https://gigaplus.makeshop.jp/tanehyo/images/LP/sample/smple-headerBG-vege.jpg);
        background-position:center; background-size:cover;
    }

    &[id*="ct140"]{
        #lpHeader{
            background-image: url(https://gigaplus.makeshop.jp/tanehyo/images/LP/sample/smple-headerBG-tomato.jpg);
        }
    }

    main{
        
    }

    footer{
        /* background:#ea6; display: flex; align-items: center; justify-content: center;
        color:#fff; */
    }



    main{

       .product-container{
        .side-bar{
            display:none !important;
        }
       }
       .product-contents-wrap{
        width:100%;
        .product-caption{
            color:red;
        }
       }

    }/*main*/


    .cart-btn{
        &:hover{
            cursor: pointer;
        }
    }  

}