@charset "UTF-8";

/*-----------------------------------------------------
ranking.css
update 2016年9月5日
-------------------------------------------------------*/

#ranking {}

#ranking h2 {
    text-align: center;
    margin-top: 50px;
    /*191225 PAL*/
/*    border-bottom: 1px #999 solid;*/
/*    border-bottom: 1px #dadada solid;*/
    /*191226 PAL*/
    /*    padding-bottom: 40px;
    margin-bottom: 40px;*/
    padding-bottom: 0;
    margin-bottom: 60px;
}

/*191226 PAL*/
#ranking h2 img {
    display:none;
}
#ranking h2::before {
    content:"ランキング";
    font-weight: normal;
    font-family: 'Lato', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'Hiragino Kaku Gothic ProN', "メイリオ", Meiryo, "Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif !important;
    font-size: 22px !important;
    letter-spacing: 0.05em;
}

.ranking_brand__logo {
    margin-bottom: 20px;
    margin-top: -20px;
}

#ranking .rank_top {
    margin-bottom: 40px;
    margin-top: 40px;
}

#ranking .rank_top .bland_logo_img + ul {
    margin-top: 40px;
}

#ranking .rank_top li {
    width: 340px;
    float: left;
    text-align: center;
    /*191225 PAL*/
    /*    font-size: 14px;
    letter-spacing: 2px;*/
    font-size: 13px;
    position: relative;
    margin-right: 20px;
}

#ranking .rank_top li:last-child {
    margin-right: 0px;
}

#ranking li .price {
    /* margin:5px 0 0; */
    /* overflow:hidden; */
    /* text-overflow:ellipsis; */
    /* white-space:nowrap; */
    /* color:#6f6f6f; */
    /* text-align:center; */
}

#ranking .rank_number {
    position: absolute;
    top: -10px;
    left: 10px;
    z-index: 10;
}

#ranking .rank_btm {
    margin-bottom: 40px;
}

#ranking .rank_btm ul {
    width: 1070px;
    margin-right: -10px;
    /*  overflow: hidden;*/
}

#ranking .rank_btm li {
    width: 204px;
    height: 350px;
    float: left;
    text-align: center;
    /*191225 PAL*/
    /*    font-size: 14px;
    letter-spacing: 2px;*/
    position: relative;
    margin-right: 10px;
    /*    margin-bottom: 40px;*/
    margin-bottom: 30px;
}

#ranking .rank_top li a:hover,
#ranking .rank_btm li a:hover {
    text-decoration: none;
}
span.top_item_fav_btn{
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 3;
    border-radius: 50%;
}
span.top_item_fav_btn:before{
    font-family: var(--icon);
    content: var(--fav);
    font-size: 20px;
    color: var(--pink);
    position: relative;
    z-index: 3;
    top: 1px;

}
span.top_item_fav_btn.active:before{
    font-variation-settings: var(--fill);
    
}