.postItem.first .infobx {
    padding: 35px; 
    background-color: #fff;
    width: 70%;
    margin: -13% 0 0 auto
}
.postItem * {
    position: relative
}
.postItem [posturl] {
    cursor: pointer;
}
.postItem [posturl]:hover .bimg {
    scale: 1.1
}
.postItem [posturl]:hover :is(.taste, h3) {
    color: var(--clr01)
}
.postItem [posturl]:hover .taste .line {
    background-color: var(--clr01);
}
.postItem .bimg {
    padding-top: 63%;
    transition: .6s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.postItem .taste {
    line-height: 1;
    font-family: var(--ft-t1);
    margin: 25px 0 0;
}
.postItem .taste .line {
    width: 45px;
    height: 1px;
    background-color: #000;
    translate: 0 -2px;
    margin: 0 6px 0 0;
}
.postItem .content {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #888;
    line-height: 1.7;
}
.postItem .lrw {
    width: 100%;
}
.postItem ~ .postItem {
    padding-top: 30px;
    margin-top: 30px
}
.postItem.first + .postItem {
    border-top: 1px solid #ccc;
    padding-top: 60px;
    margin-top: 60px
}
.postItem .lr- {
    flex: 0 0 50%;
    max-width: 50%
}
.postItem.first .content {
    -webkit-line-clamp: 4;
    line-height: inherit;
}
.postItem.first .lr- {
    flex: 0 0 100%;
    max-width: 100%
}
.postItem:not(.first) .lr- h3{
    font-size: 150%
}
.postItem:not(.first) .lr-.l{
    padding-right: 30px;
}

@media (max-width: 575px) {
    .postItem.first .infobx {
        padding: 20px; 
        width: calc(100% - 30px); 
    }
    .postItem:not(.first) .lr- h3 {
        margin: 9px 0;
    }
    .postItem:not(.first) .lr-.l {
        padding-right: 0;
    }
    .postItem .lr- {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .postItem .content {
        font-size: 80%;
    }
}
/* =========================== */
.rowitm {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0; 
}
.rowitm ~ .rowitm { 
    padding-top: 30px; 
    margin-top: 35px;
    border-top: 1px solid #ccc 
}

.rowitm>* {
    height: 100%; 
}
.rowitm .lr-w {
    margin: 0 -9px
}

.rowitm .l {
    flex: 0 0 35%;
    max-width: 35%
}
.rowitm .r {
    flex: 0 0 65%;
    max-width: 65%;
    flex-direction: column;
}
.rowitm .l,
.rowitm .r {
    padding: 0 9px
}

.rowitm .txt {
    padding: 15px 0 ;
    transition: all ease-in-out .4s;
    width: 100%; 
    flex: 1 0 0; 
}
.rowitm .txt .smr { 
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; 
} 

.rowitm .h4 {
    line-height: 1.1;
    font-family: var(--ft-t1);
    font-size: 150%;
    transition: .6s ease all;
    margin: 0 0 0px;
}
.rowitm .ttl ~ * {
    margin: 12px 0 0
}

.rowitm a {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
} 
.rowitm .bimg.objimg {
    padding-top: 64%;
    transition: all ease-in-out .4s;
    transform: scale(1); 
    background-color: #eee;
}
.rowitm .bimg-w { 
    overflow: hidden;
}
.rowitm .bimgm {
    z-index: 1; 
    max-width: calc(100% - 30px);
}
.rowitm .bimgm:after { 
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 11px;
left: 11px;
    background-color: var(--clr01);
    z-index: -1;
}

.rowitm a:hover .bimg {
    transform: scale(1.05)
} 
.rowitm .date {
    font-size: 80%;
    font-family: var(--font-t1);
    margin: 0 0 9px;
} 
.rowitm > *:hover .btn-gen{ 
    background-color: var(--clr02); 
border: 2px solid var(--clr02);
}
.rowitm .taste {
    margin-top: auto
}
.rowitm .taste i {
    font-size: 150%;
    margin: 0 6px 0 0;
} 

@media screen and (max-width: 575px) {
    .rowitm .l,
    .rowitm .r {
        flex: 0 0 100%;
        max-width: 100%
    }
} 
/* =========================== */
.relatedw,
.itemlistw {
    --item-padding: 9px; 
    margin-left: calc(var(--item-padding) * -1);
    margin-right: calc(var(--item-padding) * -1);
}
.relatedw a,
.itemlistw a{
    text-decoration: none;
}
.itmbx * {
    position: relative;
}
.itmbx {
    flex: 0 0 300px;
    max-width: 100%;
    padding: 15px;
    line-height: 1;
}
.itmbx .bimgbx {
    background-color: #f7f7f7;
    padding: 45px 15px 45px;
    overflow: hidden; 
}

.itmbx .hoverimg {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transition: 1.5s opacity cubic-bezier(0.075, 0.82, 0.165, 1),
    3.2s scale cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
    background-color: #fff;
    pointer-events: none;
}
.itmbx [iurl] {
    cursor: pointer;
}
.itmbx [iurl]:hover .hoverimg {
    cursor: pointer;
    opacity: 1;
    scale: 1.1;
}
.itmbx .infobx {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 9px;
    pointer-events: none;
}
.itmbx .infobx button { 
    pointer-events: all;
}
.itmbx .price {
    font-family: var(--ft-t1);
    font-size: 75%; 
}
.itmbx .title {
    font-family: var(--ft-t1);
    font-size: 150%;
    width: 141px; 
    translate: -25px 0;
}
.itmbx [iurl]:hover :is(.price, .title){
    text-shadow: 0 0 6px #fff, 0 0 15px #fff, 0 0 30px #fff, 0 0 30px #fff;
}
.itmbx .taste {
    overflow: hidden;
    padding: 9px 0 0;
}
.itmbx .taste > * {
    translate: 0 150%;
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.itmbx [iurl]:hover .taste > * {
    translate: 0 0
}
.itmbx .taste button {
    display: inline-flex;
    border: 1px solid #000;
    width: auto;
    min-width: auto;
    margin: 0;
    padding: 6px 6px;
    text-transform: inherit;
    font-size: 70%;
    justify-content: center;
    align-items: center;
    background-color: #fff
}
.itmbx .taste button:hover {
    background-color: #ccc
}
.itmbx button ~ button{
    border-left: 0 !important;

}
@media (max-width: 767px) {
    .itmbx {
        flex: 0 0 33.333%;
        max-width: 33.333%; 
    }  
    .itmbx {
        flex: 0 0 50%;
        max-width: 50%; 
    } 
    .itmbx .infobx {
        position: relative;
        padding: 9px 0
    }
    .itmbx .price {
        width: 100%;
    }
    .itmbx .title {
        translate: 0;
        width: 100%;
        font-size: 90%;

        display: block;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;  
    }
    .itmbx .bimgbx {
        padding: 35px 15px;
    }
    .itmbx .taste > * {
        translate: 0;
    }
    .itmbx .taste button {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .itmbx .bimg {
        --bpt: 140%
    }
}
/* =========================== */

.tmplistw{line-height:1}
.tmplistw a {color: inherit; text-decoration: none;}
.tmplistw a .bimg {transition: .3s all ease;scale: 1.15;}
.tmplistw a:hover .bimg {scale: 1}

.tmp-1{--div:4;margin:0 -9px}.tmp-1 .subttl{font-size:70%;margin:3px 0 0;font-family:var(--ft-t2)}.tmp-1 .tmpttl{padding:30px 9px 9px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.75) 0,rgba(0,0,0,0) 100%);font-family:var(--ft-t3);position:absolute;left:0;bottom:0;width:100%}.tmp-1 .tmpw{overflow:hidden;border-radius:9px;box-shadow:0 25px 30px -28px rgba(0,0,0,.7)}.tmp-1 .tmp{flex:0 0 calc(100% / var(--div));max-width:calc(100% / var(--div));padding:9px}.tmp-1 .tmpw:hover .bimg{scale:1.08}.tmp-1 .bimg{padding-top:66%;transition:1.6s all cubic-bezier(.075,.82,.165,1)}.tmp-1 .infobx .vbtn-{font-family:inherit;flex:0 0 50%;max-width:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin:0;border:0;background-color:#666;color:#fff;padding:9px 3px;transition:.6s all ease;text-transform:uppercase}.tmp-1 .infobx .vbtn-:nth-child(2){color:var(--clr01);background-color:#fff}.tmp-1 .infobx .vbtn-:hover{color:#fff;background-color:var(--clr01)}@media (max-width:991px){.tmp-1{--div:3}}@media (max-width:767px){.tmp-1{--div:2}}@media (max-width:575px){.tmp-1{--div:1}}

.tmp-2{--div:4;margin:0 -9px}.tmp-2 .subttl{font-size:70%;margin:3px 0 0;font-family:var(--ft-t2)}.tmp-2 .tmp .bimgw{background-color:#eee;padding:30px}.tmp-2 .tmpttl{padding:21px 0;font-family:var(--ft-t3);left:0;bottom:0;width:100%}.tmp-2 .tmpw{overflow:hidden}.tmp-2 .tmp{flex:0 0 calc(100% / var(--div));max-width:calc(100% / var(--div));padding:9px}.tmp-2 .bimg{padding-top:120%}.tmp-2 .infobx .vbtn-{font-family:inherit;max-width:100%;width:150px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin:0;border:0;background-color:var(--clr01);color:#fff;padding:9px 35px 9px 12px;transition:.6s all ease;text-transform:uppercase;text-decoration:none;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 100%,0 100%);position:relative}.tmp-2 .infobx .vbtn-:after{content:'';position:absolute;left:0;top:0;max-width:100%;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 100%,0 100%);width:calc(100% - 9px);height:100%;background-color:#000;z-index:-1;transition:.6s all ease}.tmp-2 .infobx .vbtn-:hover:after{background-color:var(--clr01)}.tmp-2 .infobx .vbtn-:nth-child(2){color:var(--clr01);background-color:#fff}.tmp-2 .infobx .vbtn-:hover{color:#fff;background-color:#000}@media (max-width:991px){.tmp-2{--div:3}}@media (max-width:767px){.tmp-2{--div:2}}@media (max-width:575px){.tmp-2{--div:2}}

.tmp-3{
    --div: 3;
}
.tmp-3 .tmp{
    flex: 0 0 calc(100% / var(--div));
    max-width: calc(100% / var(--div));
    padding: var(--item-padding);
}
.tmp-3 .bimgbx{
    border: 1px solid #ccc;
    border-bottom: 0;
    padding: 15px;
    background-color: #ddd;
}
.tmp-3 .tmpttl{
    font-size: 130%;
    padding: 9px 6px;;
    color: #fff;
    background-color: var(--clr01);
    text-align: center;
    font-family: var(--ft-t1);
    flex: 1 0 0;
}
.tmp-3 .tmpw.f {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
}
.tmp-3 .btm { 
    border-top: 0;
}
.tmp-3 .btn {
    border: 0;
    background-color: #fff;
    color: var(--clr01);
    margin: 0; 
    padding: 9px 0;
}
.tmp-3 .bimg {
    --bpt: 60%
}

@media (max-width: 767px) {
    .tmp-3{
        --div: 2;
    }
}
@media (max-width: 575px) {
    .tmp-3{
        --div: 1;
    }
}

/* ============== */
.tmp-4{ 
    --count: var(--tmpCount_default, 3);
    --itemGap: 15px;
    /* margin: 0 calc(-1 * var(--itemGap) * 2); */

    @media (max-width: 991px) { 
        --count: var(--tmpCount_991, 3);
    }
    @media (max-width: 767px) { 
        --count: var(--tmpCount_767, 3);
    }
    @media (max-width: 575px) { 
        --count: var(--tmpCount_575, 2);
    }

    a{
        text-decoration: none!important;
    }
    .bimgbx{
        margin: 0 0 12px;
        /* border: 1px solid #ccc; */
        /* border-bottom: 12px solid var(--clr01); */
        /* background-color: #eee; */
        
        .bimg{
            --bpt: 66%;
        } 
    }
    .tmp{
        flex: 0 0 calc(100% / var(--count));
        max-width: calc(100% / var(--count));
        padding: calc(2 * var(--itemGap)) var(--itemGap);
    }
    .date {
        font-size: 80%; 
        margin: 3px 0 0
    }
    .tmpttl{  
        flex: 1 0 0;  
        margin: 6px 0 9px;
        font-size: 120%;
        .ttl{
            font-family: var(--ft-t2);
            line-height: 1.2;
        }
    }
    
    .tmpw.f {
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
        /* border-radius: 15px; */
        /* box-shadow: 0px 6px 23px -12px rgba(0,0,0,.5); */
        /* overflow: hidden; */
        /* background-color: #fff; */
        /* padding: 15px; */


    } 
    
    .contentbx{
        margin: 0 0 9px;
    }
    /* .btn {
        border: 0;
        background-color: #fff;
        color: var(--clr01);
        margin: 0; 
        padding: 9px 0;
    } */ 
    /* ============================== */
    /* ============================== */
    .tmp-4-1{
        .bimgbx{
            margin: 0;
        }
        a.tmpw.f {
            box-shadow: 0 0 15px -9px rgba(0,0,0,.47);
        }
        .tmpttl{
            margin: 0 0 9px;
        }
        .taste {
            margin: auto 0 0;
            color: var(--clr01); 
            padding: 15px;
            padding-top: 0;
        }
        .infobx{
            padding: 15px;
        }
    }
    .tmp-4-2{
        .tmpw.f { 
            box-shadow: none; 
            padding: 0;
        } 
        .bimgbx{
            border: 0;
            background-color: transparent;
        }
        .desc{
            display: none;
        }
        .btn{
            /* padding: 0;
            background-color: transparent;
            font-size: 80%;
            --btnclr: #000;
            --btnhovclr: #000; */

            &:after{
                --square: 12px;
                margin: 0 0 0 6px;
            }
        }
        .taste{
            margin: 9px 0 0;
        }
        .date{
            z-index: 10;
            border: 1px solid #ccc;
            background-color: #fff;
            font-weight: bold;
            padding: 6px; 
            margin-top: -15px;
        }
    }
}

/* ============== */

.tmp-ecom{
    --div: 3;
}
.tmp-ecom a {
    text-decoration: none;
    color: inherit;
}
.tmp-ecom .highlightbx {
    text-align: center;
}
.tmp-ecom .highlight{ 
    font-size: 10px;
    background: linear-gradient(0deg, rgba(251,24,203,1) 0%, rgba(234,19,59,1) 100%);
    /* position: absolute;
    right: 0;
    bottom: 0; */
    border-radius: 50px;
    padding: 5px 12px;
    line-height: 1;
    color: #fff;
    font-family: var(--ft-t1); 
    display: inline-table;
    margin: 3px;
} 
.tmp-ecom .tmp{
    flex: 0 0 calc(100% / var(--div));
    max-width: calc(100% / var(--div));
    padding: 9px;
    position: relative
} 
.tmp-ecom .tmp:hover {
    z-index: 9;
} 
.tmp-ecom .tmpw.f {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
} 

@media (max-width: 767px) {
    .tmp-ecom{
        --div: 2;
    }
}
@media (max-width: 575px) {
    .tmp-ecom{
        --div: 1;
    }
}
.tmp-ecom .cartingw > * ~ * {
    margin-left: 6px;
}
.tmp-ecom .selectdisplaybx > *{ 
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 3px;
    font-family: var(--ft-t2);
} 
.tmp-ecom .selectdisplayw.main {
    background-color: #eee;
}
.tmp-ecom .selectdisplayw.main:hover {
    background-color: #ccc;
}
.tmp-ecom .selectdisplayw {
    padding: 9px;
    line-height: 1; 
} 
.tmp-ecom .selectdisplayw:hover {
    background-color: #ccc;
} 
.tmp-ecom .selectdisplayw > * {
    padding: 3px;
    margin: 0 -3px; 
}
.tmp-ecom .selectdisplayw.main > *:last-child {
    padding-right: 15px; 
}
.tmp-ecom .selectdisplayw.main i {
    position: absolute;
    right: 0;
    top: 50%;
    translate: 0 calc(-50% - 5px);
}
.tmp-ecom [productid],
.tmp-ecom .selectdisplayw.main {
    cursor: pointer;
}  
.tmp-ecom .bimg {
    transition: .6s all ease;
}  
.tmp-ecom a:hover .bimg {
    scale: 1.05
}  
.tmp-ecom .unit {
    color: var(--clr01)
}  
.tmp-ecom input[name="quantity"] {
    width: 45px;
    text-align: center;
    border: 0;
    margin: 0 !important;
    font-family: var(--ft-t2);
    font-size: 110%;
    padding: 0;
}
.tmp-ecom .quantitybx {
    line-height: 0;
}

.tmp .cartingbx {
    margin: 9px 0 0;
}
.tmp .cartingbx .btnAdjust,
.tmp .cartingbx .btnCart {
    border: 0;
    background-color: var(--clr01);
    margin: 0;
    padding: 9px;
    width: 45px;
    min-width: auto;
    border-radius: 3px;
}
.tmp .cartingbx .btnAdjust {
    padding: 0;
    background-color: transparent;
}
.tmp .cartingbx .btnAdjust .bg-mask{
    background-color: var(--bdclr); 
}
.tmp .cartingbx .btnAdjust:hover .bg-mask{ 
    background-color: var(--clr02) ;
}
.tmp .cartingbx .btnCart .img-cart{ 
    background-color: #fff; 
}
.tmp .cartingbx .btnCart:hover { 
    background-color: var(--clr02); 
}
/* ================================= */
/* ================================= */

.tmp-ecom-1{
    --div: 3; 
}
.tmp-ecom-1 .cartbx {
    margin: auto 0 0;
    padding: 0;
    border: 0;
}
.tmp-ecom-1 .tmp{
    flex: 0 0 calc(100% / var(--div));
    max-width: calc(100% / var(--div));
    padding: 15px;
}
.tmp-ecom-1 .infobx {
    margin-top: auto;
}
.tmp-ecom-1 .tmpttl{ 
    padding: 6px;
    text-align: center; 
    flex: 1 0 0;
    letter-spacing: -.5px;
    font-family: var(--ft-t1);
    text-transform: uppercase;
    
}
.tmp-ecom-1 .top .bimgbx { 
    width: 100%;
    border-radius: 15px; 
    overflow: hidden;
} 



@media (max-width: 767px) {
    .tmp-ecom-1{
        --div: 2;
    }
}
@media (max-width: 575px) {
    .tmp-ecom-1{
        --div: 1;
        padding: 15px !important;
    }
}

.img-account {
-webkit-mask-image: url(src/account.png)!important; 
    mask-image: url(src/account.png)!important
}
.img-cart {
-webkit-mask-image: url(src/cart.png)!important; 
    mask-image: url(src/cart.png)!important
}
.img-add {
-webkit-mask-image: url(src/circle_plus.png)!important; 
    mask-image: url(src/circle_plus.png)!important
}
.img-minus {
-webkit-mask-image: url(src/circle_minus.png)!important; 
    mask-image: url(src/circle_minus.png)!important
}