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

.recomm{
    margin: 20px 0 60px;
}

ul.recommArea, .recommend .column-set, .layoutFrame .column-set{/*slick-initializedが付与されるまでは非表示*/
  display: none;
}

ul.recommArea.slick-initialized, .recommend .column-set.slick-initialized, .layoutFrame .column-set.slick-initialized {/*slick-initializedが付与されるまでは非表示*/
  display: block;
  position: relative;
}

ul.recommArea {
	width: 650px;
	margin: 10px 0 29px 28px;
}

ul.recommArea .slick-prev,
ul.recommArea .slick-next {top: 75px;}
.topTopicsList {
	width: 570px;
	overflow: hidden;
}
ul.recommArea, .layoutFrame .column-set{
	padding: 0;
	margin: 0 auto !important;
}
ul.recommArea li {
	padding: 0;
	font-size: 12px;
	list-style: none;
	list-style-type: none;
}

ul.recommArea li div.recommArea_box{
    margin: 10px 10px 0;
}

ul.recommArea li a {
	display: block;
	color: #000;
}
ul.recommArea li a:hover {color: #000;}

ul.recommArea .slick-slide p.recomm_img {
	height: auto;
	padding: 3%;
	margin: 0px;
	background: #FFFFFF;
	text-align: center;
	border: 1px solid #CCC;
}

ul.recommArea .slick-slide img{
    width: 100%;
}

ul.recommArea .slick-next::before, .recommend .column-set .slick-next::before, .layoutFrame .column-set .slick-next::before {
	content: "";
}
ul.recommArea .slick-next, .recommend .column-set .slick-next, .layoutFrame .column-set .slick-next {
    background: url("https://www.tfa-onlineshop.pro/pic-labo/slide_right2.png") no-repeat 50% 50%;
    color: #fff;
    height: 143px;
    right: -20px;
    top: 80px;
    transition: opacity 0.3s ease 0s;
    width: 15px;
}
ul.recommArea .slick-prev::before, .recommend .column-set .slick-prev::before, .layoutFrame .column-set .slick-prev::before {
	content: "";
}
ul.recommArea .slick-prev, .recommend .column-set .slick-prev, .layoutFrame .column-set .slick-prev {
    background: url("https://www.tfa-onlineshop.pro/pic-labo/slide_left2.png") no-repeat 50% 50%;
    z-index: 99;
    color: #fff;
    height: 143px;
    left: -20px;
    top: 80px;
    transition: opacity 0.3s ease 0s;
    width: 15px;
}


/*ECレコメンダー調整*/
.recomm h3{
	background: #dcdcdc;
	color: #333;
	font-size: 14px;
	padding: 10px 15px;
	margin: 40px 0 20px;
}
.recomm p{
	font-size: 14px;
	line-height: 130% !important;
	margin: 10px 0 5px 0;
	font-weight: 400;
}
.recomm p.price{
	font-size: 12px;
	line-height: 130%;
	margin-bottom: 3px;
	color: #c30000;
	font-weight: 400;
}
.recomm a{}
.recomm a .recomm_img{
    margin: 0 0 10px 0;
}
.recomm .slick-dots{
    bottom: -35px;
}
.layoutFrame .slick-dots{
    bottom: -35px;
}
.cart-article ul.recommArea,.cart-article .layoutFrame .column-set{
    width: 900px;
}

.cart-article .layoutFrame{}
.cart-article .layoutFrame .column-set{
    width: 900px;
    margin: 0 auto 80px !important;
}
.cart-article #center1 .centerbox .mainCont .layoutFrame .column-set h3{
    font-weight: 400 !important;
    margin: 15px 0 0 0 !important;
}
.cart-article #center1 .centerbox .mainCont .layoutFrame .column-set p{
    margin: 0;
}
.cart-article #center1 .centerbox .mainCont .layoutFrame .column-set p.price{
    margin: 5px 0 0 0;
}
.cart-article ul.recommArea .slick-next, .cart-article .layoutFrame .column-set .slick-next{
    height: 205px;
    top: 112px;
}
.cart-article ul.recommArea .slick-prev, .cart-article .layoutFrame .column-set .slick-prev{
    height: 205px;
    top: 112px;
}
article#Detail #main-column section.recommend .column5:nth-child(4n+1){
    clear: none;
}
article#Detail  section.recommend section.column5{
    margin: 10px 10px 0;
}


.cart-article .layoutFrame .column-set .column5:nth-child(4n+1){
    clear: none;
}
.cart-article .layoutFrame .column-set .column5{
	margin: 10px 10px 0 !important;
}
.recommend .column-set{
    width: 650px;
    margin: 0 auto;
    overflow: unset;
}

article#Detail #main-column section.recommend h2{
    display: none;
}
article#Detail #main-column #itemDetail-wrap+section.recommend h2{
    display: block;
}
#contact #center1 .centerbox .mainFrame .mainCont h4.SPS-cart-related_item{
    color: #222;
    font-size: 130%;
    font-weight: bold;
    margin: 20px 0;
    padding: 15px 15px;
    background: #dddddd;
    border: none;
    width: 920px;
}

@media screen and (max-width: 950px) {

.recomm{
    margin-top: 60px;
}

ul.recommArea, .recommend .column-set, #pi_relate ul.clearof>li{/*slick-initializedが付与されるまでは非表示*/
  display: block;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 12px 8px;
  display: -ms-flexbox;
  display: flex;
}

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

ul.recommArea {
	width: 569px;
	margin: 10px 0 29px 28px;
}

ul.recommArea .slick-prev,
ul.recommArea .slick-next {top: 75px;}
.topTopicsList {
	width: 570px;
	overflow: hidden;
}

ul.recommArea, .recommend .column-set, #pi_relate ul.clearof>li{
	padding: 0;
	margin: 0 10px 0;
	width: 94%;
}
#pi_relate .cataloglist .box{
    margin: 10px 5px 0;
    padding: 0;
    display: initial;
    width: 37.5vw;
}
#pi_relate .cataloglist .box>a{
	height: auto;
	padding: 5px;
	margin: 0px;
	background: #FFFFFF;
	text-align: center;
	border: 1px solid #DDDDDD;
	display: flex;
	width: 34vw;
}
#pi_relate .cataloglist .box a img{
    border: none;
}
.recommend .column-set{
    margin: 0 10px 0;
    justify-content: unset;
    flex-wrap: unset;
}
ul.recommArea li {
	padding: 0;
	font-size: 12px;
	list-style: none;
	list-style-type: none;
}

ul.recommArea li div.recommArea_box{
    margin: 10px 5px 0;
    width: 37vw;
}


ul.recommArea li a {
	display: block;
	color: #000;
}
ul.recommArea li a:hover {color: #000;}
ul.recommArea li a:hover p{background:#FFF;}
ul.recommArea p.recomm_img, section.recommend section.column5 p.itemThumb {
	height: 34vw;
	padding: 5px;
	margin: 0px;
	background: #FFFFFF;
	text-align: center;
	border: 1px solid #DDDDDD;
}

ul.recommArea img{

width: 100%;
}

ul.recommArea .slick-next::before, #pi_relate ul.clearof>li .slick-next::before {
	content: "";
}
ul.recommArea .slick-prev, .recommend .column-set .slick-prev {
    background: url("https://www.tfa-onlineshop.pro/pic-labo/slide_left2.png") no-repeat scroll 50% 0;
    color: #fff;
    height: auto;
    left: 0;
    top: auto;
    transition: opacity 0.3s ease 0s;
    width: 20px;
    z-index: 99;
    bottom: -43px;
}
	#pi_relate ul.clearof>li .slick-prev {
    background: url("https://www.tfa-onlineshop.pro/pic-labo/slide_left2.png") no-repeat scroll 50% 0;
    color: #fff;
    height: auto;
    left: 0;
    top: auto;
    transition: opacity 0.3s ease 0s;
    width: 20px;
    z-index: 99;
    bottom: -7px;
}
ul.recommArea .slick-prev::before, #pi_relate ul.clearof>li .slick-prev::before {
	content: "";
}
ul.recommArea .slick-next, .recommend .column-set .slick-next{
    background: url("https://www.tfa-onlineshop.pro/pic-labo/slide_right2.png") no-repeat scroll 50% 0;
    color: #fff;
    height: auto;
    right: 0;
    top: auto;
    transition: opacity 0.3s ease 0s;
    width: 20px;
    z-index: 99;
    bottom: -43px;
}
	#pi_relate ul.clearof>li .slick-next {
    background: url("https://www.tfa-onlineshop.pro/pic-labo/slide_right2.png") no-repeat scroll 50% 0;
    color: #fff;
    height: auto;
    right: 0;
    top: auto;
    transition: opacity 0.3s ease 0s;
    width: 20px;
    z-index: 99;
    bottom: -7px;
}
.title1{
    padding: 10px 0px 10px 20px;
    margin: 0;
    width: auto;
    line-height: 100%;
    font-weight: bold;
    font-size: 12px;
    vertical-align: middle;
    color: #FFFFFF;
    background: #000000;
    border-top: 1px solid #000000;
}

    ul.recommArea li div.recommArea_box p,article#Detail section.recommend section.column5 h3{
    line-height: 1.5em;
    display: -webkit-box;
    /* -webkit-box-orient: vertical; */
    /* -webkit-line-clamp: 2; */
    /* overflow: hidden; */
    font-size: 12px;
}
    ul.recommArea .slick-slide img{
    width: 100%;
    display: unset;
    vertical-align: bottom;
}
    ul.recommArea li div.recommArea_box p.price{
    /* display: none; */
}

/*ECレコメンダー調整*/
.recomm h3{
	background: #dcdcdc;
	color: #222;
	font-size: 14px;
	padding: 10px 15px;
	margin: 40px 0 10px;
	line-height: 150%;
	border: none;
}
#sps-smp-cart .recomm h3{
    background: #DDD;
}
.recomm p,article#Detail section.recommend section.column5 h3{
	font-size: 12px;
	line-height: 130% !important;
	margin: 10px 0 5px 0;
	font-weight: 400;
}
.recomm p.price{
	font-size: 12px;
	line-height: 130%;
	margin-bottom: 3px;
	color: #c30000;
	font-weight: 300;
}
.recomm a{}
.recomm a .recomm_img{
    margin: 0 0 10px 0;
}
.recomm .slick-dots, .recommend .column-set .slick-dots{
    bottom: -35px;
}
.cart-article ul.recommArea{
    width: 900px;
}
.cart-article ul.recommArea .slick-next{
    height: 205px;
    top: 112px;
}
.cart-article ul.recommArea .slick-prev{
    height: 205px;
    top: 112px;
}
article#Detail #main-column section.recommend .column5:nth-child(2n+1){
    clear: none;
}
article#Detail #main-column #itemDetail-wrap+section.recommend h2{
    margin: 0 0 10px;
    background: #dcdcdc;
    color: #333;
}
article#Detail section.recommend section.column5{
    margin: 10px 5px 0;
    width: 37vw;
}
article#Detail section.recommend section.column5 .itemThumb-wrap{
    margin: 0;
    width: 37vw;
}
article#Detail section.recommend section.column5 p.price{
    margin: 0;
}
}

/* :::::: DP追記 230523 :::::: */
/*** ipadでレコメンドエリアの画像幅揃え ***/
ul.recommArea img{
    width: 100%;
    display: block;
}