@charset "utf-8";

/************************************************
 商品売れ筋ランキングブロックのスタイル
************************************************ */

/* --- Layout Containers --- */
#top-best-selling-rank {margin-top: 40px;}
#top-best-selling-rank .title_rank_update {font-size: 13px; font-weight: normal; letter-spacing: 0; margin-left: 10px;}

/* --- Tabs --- */
#top-best-selling-rank .tabs-container {margin-top: 10px;}
#top-best-selling-rank .tabs-nav {display: flex; gap: 10px; overflow-x: auto;}
#top-best-selling-rank .tab {white-space: nowrap; padding: 10px 24px 8px; color: #666; cursor: pointer; flex-shrink: 0; scroll-snap-align: start; font-weight: bold; background: #F8F8F8; border: 1px #DDD solid; line-height: 1; border-radius: 50px; font-size: 14px;}
#top-best-selling-rank .tab:hover {color: #e60000; background: #EEE;}
#top-best-selling-rank .tab.active {color: #fff; background: #e60000; border: 1px #e60000 solid; pointer-events: none;}
#top-best-selling-rank .tab-content-container {margin: 14px auto 15px;}
#top-best-selling-rank .tab-content {display: none;}
#top-best-selling-rank .tab-content.active {display: block;}

/* --- Slider --- */
#top-best-selling-rank .product-slider {position: relative; padding: 12px 12px 16px; border: 2px solid #ebebeb; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); box-sizing: border-box;}
#top-best-selling-rank .card-inner {background-color: #fff; padding: 0.5rem; height: 100%; display: flex; flex-direction: column; position: relative;}
#top-best-selling-rank .rank01, #top-best-selling-rank .rank02, #top-best-selling-rank .rank03, #top-best-selling-rank .rank04 {height: 22px;}

/*新商品アイコン*/
#top-best-selling-rank .listphoto_icon {display: flex; justify-content: flex-end; position: absolute; right: 8px; top: 11px;}
#top-best-selling-rank .newitem_info{width: 43px; margin-left: 3px;}
#top-best-selling-rank .newitembox {background: #F70004; color: #fff; line-height: 1.1; font-size: 10px; padding: 4px 0; text-align: center;}

/*クーポンアイコン*/
#top-best-selling-rank .coupon_list_info{margin-left: 3px;}

#top-best-selling-rank .card-img {width: 168px; height: auto; min-height: 160px; margin-bottom: 5px;}
#top-best-selling-rank .card-link {text-decoration: none;}
#top-best-selling-rank .card-title {font-weight: normal; font-size: 12px; color: #333; margin-bottom: 2px; line-height: 1.45; letter-spacing: 0.4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: calc(1.45em * 2); overflow-wrap: break-word;}
#top-best-selling-rank .card-link:hover .card-title{color: #e60000;}
#top-best-selling-rank .card-price {font-size: 16px; font-weight: bold; color: #e60000; }
#top-best-selling-rank .card-price-label {font-size: 16px; font-weight: bold;}
#top-best-selling-rank .card-old-price {font-size: 0.75rem; color: #333;  display: none;}
#top-best-selling-rank .list_point_box{margin-top:2px; display: none;}
#top-best-selling-rank .list_point_inner{color: #e60000; font-size: 11px;}
#top-best-selling-rank .list_point{font-size: 11.88px; font-weight: normal;}
#top-best-selling-rank .list_point_up{background: #e60012; color: #fff; padding: 1px 4px; margin-left: 2px; display: inline-flex; align-items: baseline;}
#top-best-selling-rank .list_point_up span{margin-left: 1px; font-weight: normal;}
#top-best-selling-rank .card-rating-section {margin-top: 2px; min-height: 17.5px;}

/* --- View More Button --- */
#top-best-selling-rank .view-more-container {text-align: right; padding-right: 8px;}
#top-best-selling-rank .view-more-container a {display: inline-block; font-size: 13px; padding: 0 24px 0 0; text-decoration: none; color: #e60000; position: relative; background-color: #fff; border: none; border-radius: 0; margin-bottom: 0;}
#top-best-selling-rank .view-more-container a:after{content:''; width:6px; height:6px; border-top:solid 1px #e60000; border-right:solid 1px #e60000; transform:rotate(45deg); position:absolute; top:0; right:6px; bottom:0; margin:auto;}
#top-best-selling-rank .view-more-container a:hover {opacity: 0.5; color: #333;}
#top-best-selling-rank .view-more-container a:hover:after {border-top-color: #333; border-right-color: #333; opacity: 0.5;}

/*商品詳細・カテゴリ*/
.detail_rank_b_bg #top-best-selling-rank .title_rank{line-height: 1.5; border-bottom: 3px solid #e60000; padding: 20px 0 0; position: relative;}
.detail_rank_b_bg #top-best-selling-rank .title_top,.l2_flex_04 #top-best-selling-rank .title_top{font-size: 18px; font-weight: normal;}
.detail_rank_b_bg #top-best-selling-rank .title_top_en,.l2_flex_04 #top-best-selling-rank .title_top_en{display: none;}
.detail_rank_b_bg #top-best-selling-rank .tab-content-container{margin: 0 auto;}
.detail_rank_b_bg #top-best-selling-rank .product-slider,.l2_flex_04 #top-best-selling-rank .product-slider{padding: 0 12px; border: none; box-shadow: none;}
.detail_rank_b_bg #top-best-selling-rank .slick-prev{background-color: transparent!important;}
.detail_rank_b_bg #top-best-selling-rank .card-price,.detail_rank_b_bg #top-best-selling-rank .card-price-label,.l2_flex_04 #top-best-selling-rank .card-price,.l2_flex_04 #top-best-selling-rank .card-price-label{font-weight: normal; margin-top: 2px;}
.detail_rank_b_bg #top-best-selling-rank .card-old-price,.detail_rank_b_bg #top-best-selling-rank .list_point_box,.l2_flex_04 #top-best-selling-rank .list_point_box{display: block;}
.detail_rank_b_bg #top-best-selling-rank .view-more-container,.l2_flex_04 #top-best-selling-rank .view-more-container{text-align: center; margin: 20px auto 40px; padding-right: 0;}
.detail_rank_b_bg #top-best-selling-rank .view-more-container a,.l2_flex_04 #top-best-selling-rank .view-more-container a{display: inline-block; width: 300px; padding: 6px; background-color: #fff; border: solid 2px #ddd; color: #000; border-radius: 10px; line-height: 1.6; font-size: 13px; transition: all 0.2s; -webkit-transition: all 0.2s;}
.detail_rank_b_bg #top-best-selling-rank .view-more-container a:after,.l2_flex_04 #top-best-selling-rank .view-more-container a:after{border-color: #000; right: 15px;}
.detail_rank_b_bg #top-best-selling-rank .view-more-container a:hover:after,.l2_flex_04 #top-best-selling-rank .view-more-container a:hover:after{opacity: 1; border-color: #e60000;}
.detail_rank_b_bg #top-best-selling-rank .view-more-container a:hover,.l2_flex_04 #top-best-selling-rank .view-more-container a:hover{opacity: 1; border: solid 2px #e60000;}

/* list2 */
.l2_flex_04 #top-best-selling-rank .title_rank .clearfix{border-bottom: 3px solid #000; width: 100%; padding: 20px 0 10px; position: relative; box-sizing: border-box; margin-bottom:15px;}