@charset "UTF-8";
/* CSS Document */

.recomm_slide{/*slick-initializedが付与されるまでは非表示*/
  display: none;
}
.recomm_slide.slick-initialized{
  display: block; /*slick-initializedが付与されたら表示*/
}

.recomm_wrap {
    width: 860px;
    margin: 100px auto 100px;
}

.recomm_wrap h3{
    font-weight: bold;
    font-size: 16px;
}

.recomm_slide{
	padding: 0 !important;
	margin-top: 20px;
    width: 895px;
}

.recomm_list{
	margin-right: 40px;
    list-style-type: none;
    width: 259px !important;
}

.recomm_list img {
    width: 260px;
}

.recomm_list:last-child{
	margin-right: 0;
}

.recomm_list a{
    text-decoration: none !important;
}
.recomm_list a:hover p, 
.others_img_cont_pc a:hover p, 
.custom_link a:hover p{
	color: #333031;
    text-decoration: none !important;
}
.recomm_list a:hover img, 
.others_img_cont_pc a:hover img, 
.custom_link a:hover img{
	opacity: 0.7;
}

.recomm_list_name{
    font-size: 12px !important;
    line-height: 24px !important;
    margin: 10px 0 0 !important;
}
.recomm_list_price{
    margin: 0 !important;
    font-size: 11.2px !important;
}

.slick-prev{
    left: 0;
    top:auto;
    bottom:-35px;
    z-index: 99;
}

.slick-next{
    right: 40px;
    top:auto;
    bottom:-35px;
    z-index: 99;
}
.slick-prev:before, 
.slick-next:before{
    width: 17px;
    height: 27px;
    line-height: 27px;
    display: block;
    font-size: 0;

}

.slick-prev:before{
    background: url(https://www.touch-and-flow.jp/img/thumb_arrow_l.svg) no-repeat left center;
    background-size: auto 60%;
    left: 0;
}

.slick-next:before{
    background: url(https://www.touch-and-flow.jp/img/thumb_arrow.svg) no-repeat right center;
    background-size: auto 60%;
    right: 0;
}

.slick-dots{
    left: -15px;
}

/*PC TOPの背景処理*/
#fsrecommenddiv5 section{width: 100%; background: #f6f5f4; z-index: 1; position: relative;}
#fsrecommenddiv5 .recomm_wrap{margin: 0 auto; background: #f6f5f4; z-index: 1; padding: 30px;}


@media screen and (max-width:480px) { 
.slick-track{display: flex;}
.recomm_wrap {width: auto; margin: 50px auto 60px;}
.recomm_slide{
    width: auto;
    height: 190px;}
.slick-dots li { margin:0;
    width: 15px;
    height: 15px;}
.slick-prev{left: 0;}
.slick-next{right: 0;}
.slick-dots li button{
    width: 15px;
    height: 15px;
    }
.slick-prev:before, .slick-next:before{    
    width: 20px;
    height: 32px;
}

.recomm_list{
    margin:0 10px;
    overflow: hidden;
}
.recomm_wrap h3{
    font-size: 4.0625vw;
    }
.recomm_list_name{
    font-size: 3.4375vw !important;
    margin: 3.4375vw 0 0 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    }
.recomm_list_price{
    font-size: 3.4375vw !important;
    display: none;
    }

/*カテゴリページのナビの下「人気急上昇商品」*/
#fsrecommenddiv4 .recomm_wrap{
    margin:50px 0 100px;
    }
}

/*SP TOPの処理*/
#fsrecommenddiv7 section{ 
    margin: 0 5% 15.625vw;
    width: auto;
}
#fsrecommenddiv7 .recomm_wrap{ margin: 0 auto 80px;}

#fsrecommenddiv7 .recomm_wrap h3 {
    font-size: 4.0625vw;
    margin-top: 0;
}