@charset "utf-8";

ul,li {
    list-style:none;
    margin: 0;
    padding: 0;
}

/* タブ 切り替え部分 */
.tab_wrap_outer {
    background-color: #f3f3f3;
    width: 100%;
    padding: 12px 10px 12px 10px;
    margin: 0 auto;
    box-sizing: border-box;
}
.tab_wrap{width:100%; margin:0 auto;}
input[type="radio"]{display:none;}
.tab_area{font-size:0; margin:0 0;}
.tab_area label{width:64px; margin:0 2px; display:inline-block; border-radius: 8px 8px 0 0;
    padding:8px 1px; color:#777; background:#ccc; text-align:center; font-size:10px; cursor:pointer; transition:ease 0.2s opacity;}
.tab_area label:hover{opacity:7;}
.panel_area{background:#fff; padding: 5px 12px 1px 10px; border-radius: 4px; box-shadow: 0 2px 2px #ccc;}
.tab_panel{width:100%; padding: 0 0; display:none;}
.tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;}

#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;}

#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#fff; color:#000;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#fff; color:#000;}
#tab3:checked ~ .panel_area #panel3{display:block;}
#tab4:checked ~ .tab_area .tab4_label{background:#fff; color:#000;}
#tab4:checked ~ .panel_area #panel4{display:block;}

/* レディースタブ メンズタブ を指定する場合のスタイル */
/* #tab1:checked ~ .tab_area .tab_ladies,
#tab2:checked ~ .tab_area .tab_ladies,
#tab3:checked ~ .tab_area .tab_ladies,
#tab4:checked ~ .tab_area .tab_ladies { color: #900; } */
/* レディース用class付与されたタブの文字は赤文字 */

/* #tab1:checked ~ .tab_area .tab_mens,
#tab2:checked ~ .tab_area .tab_mens,
#tab3:checked ~ .tab_area .tab_mens,
#tab4:checked ~ .tab_area .tab_mens { color: #009; } */
/* レディース用class付与されたタブの文字は赤文字 */
/* タブ切り替え部分 */




/* ランキング メイン部分 */
.da_walbag_ranking_show,
.co_walbag_ranking_show,
.ge_walbag_ranking_show,
.al_walbag_ranking_show,
.pm_walbag_ranking_show,
.bp_walbag_ranking_show {
    display: none;/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/* デフォルトでは非表示にする。Dakota関連検索結果では別途下記パーツのjs
https://sentire.itembox.design/item/_js/brand_switch.js
でdisplay:block（出現）にする。 */
    /* margin-bottom: 30px; */
    margin: 15px;
    box-sizing: border-box;
}

.brand_walbag_ranking_inner {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.brand_rank_horizontal_scroll_wrap {
    width: 100%;
    overflow-x:scroll;
    -webkit-overflow-scrolling: touch;
/*    padding: 15px 12px 16px 15px;*/
    box-sizing: border-box;
}

.brand_rank_horizontal_scroll {
    padding: 15px 12px 18px 15px;
}




.brand_rank_horizontal_scroll_tit {
    border-left: 3px solid #900;
    padding-left: 15px;
    font-size: 14px;
    margin-top: 0;
}

.brand_rank_horizontal_scroll {
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
}


/* ランキング順番表示 */
.brand_rank_horizontal_scroll .item:nth-child(n) {
    position: relative;
}
/* ランキング順番表示 */
.brand_rank_horizontal_scroll .item:nth-child(n)::before {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -15px;
left: -15px;
background-color: #f1f1f1;
border-radius: 15px;
color:#555;
width:30px;
height:30px;
z-index: 1;
}
/* ランキング順番表示 */
.brand_rank_horizontal_scroll .item:nth-child(1)::before { content: "1"; background-color: #E3AB00; color: #fff; }
.brand_rank_horizontal_scroll .item:nth-child(2)::before { content: "2"; background-color: #BCBCBC; color: #fff; }
.brand_rank_horizontal_scroll .item:nth-child(3)::before { content: "3"; background-color: #BA6E40; color: #fff; }
.brand_rank_horizontal_scroll .item:nth-child(4)::before { content: "4"; }
.brand_rank_horizontal_scroll .item:nth-child(5)::before { content: "5"; }
.brand_rank_horizontal_scroll .item:nth-child(6)::before { content: "6"; }
.brand_rank_horizontal_scroll .item:nth-child(7)::before { content: "7"; }
.brand_rank_horizontal_scroll .item:nth-child(8)::before { content: "8"; }
.brand_rank_horizontal_scroll .item:nth-child(9)::before { content: "9"; }
.brand_rank_horizontal_scroll .item:nth-child(10)::before { content: "10"; }
.brand_rank_horizontal_scroll .item:nth-child(11)::before { content: "11"; }
.brand_rank_horizontal_scroll .item:nth-child(12)::before { content: "12"; }
.brand_rank_horizontal_scroll .item:nth-child(13)::before { content: "13"; }
.brand_rank_horizontal_scroll .item:nth-child(14)::before { content: "14"; }
.brand_rank_horizontal_scroll .item:nth-child(15)::before { content: "15"; }
.brand_rank_horizontal_scroll .item:nth-child(16)::before { content: "16"; }
.brand_rank_horizontal_scroll .item:nth-child(17)::before { content: "17"; }
.brand_rank_horizontal_scroll .item:nth-child(18)::before { content: "18"; }
.brand_rank_horizontal_scroll .item:nth-child(19)::before { content: "19"; }
.brand_rank_horizontal_scroll .item:nth-child(20)::before { content: "20"; }

.brand_rank_horizontal_scroll .item {
    margin-right: 23px;
    text-align: center;
    font-size: 10px;
}

/* ランキング順番表示 */
.brand_rank_horizontal_scroll .item a:link,
.brand_rank_horizontal_scroll .item a:visited,
.brand_rank_horizontal_scroll .item a:hover,
.brand_rank_horizontal_scroll .item a:active {
    text-decoration: none;
    color: #333;
}

.brand_rank_horizontal_scroll .item,
.brand_rank_horizontal_scroll .item img {
    width: 105px;
    min-width: 105px;
}
.brand_rank_horizontal_scroll .item img {
    border: 1px solid #ddd;
}


@media screen and (min-width: 768px) {
/* =============== PCのとき ここから =============== */

/* タブ 切り替え部分 */

.tab_area{font-size:0; margin:0 10px;}

.tab_wrap_outer {
    width: 1200px;
    padding: 25px 25px 25px 25px;
}

.da_walbag_ranking_show,
.co_walbag_ranking_show,
.ge_walbag_ranking_show,
.al_walbag_ranking_show,
.pm_walbag_ranking_show,
.cr-cl_walbag_ranking_show,
.fw_walbag_ranking_show,
.bp_walbag_ranking_show {
    margin-bottom: 50px;
}
.brand_rank_horizontal_scroll_wrap {
    /* width: 1180px; */
    padding: 5px 0 15px;
}

.brand_rank_horizontal_scroll_tit {
    font-size: 20px;
}

/* pcのときだけ表示 */
.brand_rank_horizontal_scroll_tit::after {
    display: inline-block;
    content:"※ランキングは、ドラッグで左右にスライドできます。";
    font-size: 13px;
    color: #999;
    margin-left: 20px;
}

.brand_walbag_ranking_inner {
    width: 1180px;
}    

.brand_rank_horizontal_scroll .item,
.brand_rank_horizontal_scroll .item img {
    width: 150px;
    min-width: 150px;
}

.brand_rank_horizontal_scroll .item {
    font-size: 14px;
}

.tab_area label{
    font-size:15px;
    padding: 8px 8px;
}
.tab_area label {
    width:110px;
    margin: 0 4px;
}


}/* PCのとき ここまで */