@charset "utf-8";

/*
 * File       : modules/recipe/style.css
 * Author     : STUDIO-JT (Sumi)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) JT RECIPE LIST
 * 2) RWD
 */



/* **************************************** *
 * JT RECIPE LIST
 * **************************************** */
.article-recipe .article-header {padding-bottom:140rem;}
.article-recipe .jt-search {top:-238rem;}
.jt-recipe-list__wrap {}
.jt-recipe-list {position:relative;font-size: 0;margin: -40rem -16rem;}
.jt-recipe-list__item {display:inline-block; vertical-align:top; width: -webkit-calc(33.33% - 32rem); width: calc(33.33% - 32rem);margin: 40rem 16rem;}

.jt-recipe-list__link {display: block;position: relative;}
.jt-recipe-list__date {margin-top: 30rem;font-size: 15rem;line-height: 1;font-weight: 500;color: #bbb;display:block;letter-spacing: -0.03em;}
.jt-recipe-list__thumb {display: block;margin: 0;}
.jt-recipe-list__thumb img {display: block;width: 100%;webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -webkit-transform: scale(1) rotate( 0deg ); transform: scale(1) rotate( 0deg ); -webkit-transition: -webkit-transform .6s; transition: -webkit-transform .6s; transition: transform .6s; transition: transform .6s, -webkit-transform .6s; will-change:transform;}
html.desktop .jt-recipe-list__item:hover .jt-recipe-list__thumb img{-webkit-transform: scale(1.05) rotate(0.01deg);-ms-transform: scale(1.05) rotate(0.01deg);transform: scale(1.05) rotate(0.01deg);}
.jt-recipe-list__title {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-size: 26rem;line-height: 1.47;font-weight: 500;color: #222;letter-spacing: -0.03em;margin-top: 22rem;}
.jt-recipe-list__desc {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;overflow: hidden;height: 3.3em;font-size: 18rem;font-weight: 400;line-height: 1.7;color: #666;letter-spacing: -0.03em;margin-top: 9rem;}

/* Lazyload */
.jt-recipe-list__thumb.jt-lazyload {padding-top: 64.6%;}



/* **************************************** *
 * RWD
 * **************************************** */

 @media (max-width: 1480px){
    .article-recipe .article-header { padding-bottom: 120rem;}
    .article-recipe .jt-search {top:-218rem;}
    .jt-recipe-list__title {font-size:20rem;}
    .jt-recipe-list__desc {font-size:17rem;}
    .jt-recipe-list__date {margin-top:20rem;}
}

 

 @media (max-width: 1023px){
    .article-recipe .jt-search {top:-162rem;}
    .jt-recipe-list__title {font-size:20rem;}
    .jt-recipe-list__desc {font-size:17rem;}
}


@media (max-width: 860px){
    .article-recipe .jt-search { margin-bottom:65rem;}
    .article-recipe .article-header {padding-bottom:60rem;}
    .jt-recipe-list__item { width: -webkit-calc(50% - 32rem); width: calc(50% - 32rem); }

}

@media (max-width: 540px){

    .article-recipe .article-header  {padding-bottom:40rem;}
    .jt-recipe-list { margin: -20rem -10rem;}
    .jt-recipe-list__item { width: -webkit-calc(50% - 20rem); width: calc(50% - 20rem); margin: 20rem 10rem; }
    .jt-recipe-list__title {font-size:16rem; margin-top:10rem;}
    .jt-recipe-list__date {font-size:14rem; margin-top:12rem;}

}