.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(--font-t1);
    font-size: 150%;
    transition: .6s ease all;
    margin: 0 0 0px;
}
.rowitm .ttl ~ * {
    margin: 12px 0 0
}

.rowitm a {
    color: inherit;
    cursor: pointer
} 
.rowitm .bimg {
    padding-top: 64%;
    transition: all ease-in-out .4s;
    transform: scale(1); 
}
.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 {
    margin: 0 -15px
}
.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}

.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: 9px;
}
.tmp-3 .tmpttl{
    font-size: 130%;
    padding: 15px 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 {
    padding: 15px;
    border: 1px solid #ccc;
    border-top: 0;
}
.tmp-3 .btn {
    border: 0;
    background-color: #fff;
    color: var(--clr01);
    margin: 0; 
    padding: 9px 0;
}

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