@charset "utf-8";

/* CSS Document */

[data-tpl="pcTPL"] *{font-size:inherit;color:inherit;line-height:inherit;}
[data-tpl="pcTPL"]+[data-tpl="spTPL"]{padding-top:20px;}
[data-tpl="pcTPL"]>p{padding:10px 0;}

[data-id="ranking"]>div+div{padding:20px 0 0;}
[data-id="ranking"]>div p{font-weight:bold;color:#666;font-weight:normal;}


[data-id="ranking"] #man>p{color:#01b2e3;}
[data-id="ranking"] #woman>p{color:#e274a1;}

[data-id="ranking"] .tab-box{position:relative;}

[data-id="ranking"] .tab-box{position:relative;}


[data-id="ranking"] .tab-btns{display:block;padding:0 5px 0;margin:0;background:linear-gradient(0,#eee,#eee) repeat-x 100% 100%;background-size:2px 2px;
text-align:left;box-sizing:border-box;
}
[data-id="ranking"] .tab-btns li{display:inline-block;box-sizing:border-box;border-bottom:2px solid #eee;
width:calc(25% - 10px);padding:10px;cursor:pointer;transition:0.4s;text-align:center;
margin:0 5px;position:relative;}

[data-id="ranking"] .tab-btns li::after{
content:'';width:20px;height:20px;
background:linear-gradient(135deg,transparent 50%,#01b2e3 50%) no-repeat 0 0;
background-size:100% 100%;
display:block;position:absolute;margin-left:-10px;
left:50%;bottom:-10px;transform:rotate(45deg);
opacity:0;transition:0.4s;
}

[data-id="ranking"]  #woman .tab-btns li::after{
background:linear-gradient(135deg,transparent 50%,#e274a1 50%) no-repeat 0 0;
}



[data-id="ranking"] .tab-btns li{background:unset;}
[data-id="ranking"] .tab-btns li:hover,
[data-id="ranking"] .tab-btns li.is-active{border-color:#01b2e3;font-weight:bold;}

[data-id="ranking"] .tab-btns li:hover::after,
[data-id="ranking"] .tab-btns li.is-active::after{opacity:1;}



[data-id="ranking"] #woman .tab-btns li:hover,
[data-id="ranking"] #woman .tab-btns li.is-active{border-color:#e274a1}


[data-id="ranking"] .tab-contents>li{display:none;opacity}
[data-id="ranking"] .tab-contents>li.is-active{display:block;animation:fadeIn 1s ease 0s 1 both;}

[data-id="ranking"]>div ol.rank-list>li p.rank-link-text{font-size:12px;padding:10px;}

[data-id="ranking"]>div ol.rank-list>li a{position:relative;margin-top:30px;}


.rank-link-counter{position:absolute;top:-30px;display:block;box-sizing:border-box;height:20px;line-height:20px;
background:transparent no-repeat 0% 50%;background-size:contain;}
.rank-link-counter-01{color: #bc940a !important;background-image: url(../img/rank/icon_rank_01.png);padding-left:30px;}
.rank-link-counter-02{color: #9e9e9e !important;background-image: url(../img/rank/icon_rank_02.png);padding-left:30px;}
.rank-link-counter-03{color: #9b611d !important;background-image: url(../img/rank/icon_rank_03.png);padding-left:30px;}



@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}






.nav-inner > li.woman .nav-category{
  background: #e274a1 !important;
}
.nav-inner > li.woman .nav-category:hover {
  background: #eb9dbd !important;
}
.nav-inner > li.woman a:hover{
 color: #e274a1 !important;
}

.nav-content{padding:21px;margin:0;box-sizing:border-box;}

.nav-link-list{width:50%;letter-spacing:0;font-size:0;box-sizing:border-box;}
.nav-link-list-full{width:100%;padding-right:10px;box-shadow:0 0 0 0;}

.nav-link-list li{display:inline-block;box-sizing:border-box;margin:0 !important;padding:0 !important;width:50%;}
.nav-link-list-full li{display:inline-block;box-sizing:border-box;margin:0 !important;padding:0 !important;width:25%;}
.nav-link-list-75 li{display:inline-block;box-sizing:border-box;margin:0 !important;padding:0 !important;width:33.33%;}

.nav-link-list li:nth-of-type(odd){padding-right:10px !important;}
.nav-link-list li:nth-of-type(even){padding-left:10px !important;}



.nav-link-list-75.nav-link-list li{padding:0 !important;}
.nav-link-list-75 li:nth-of-type(3n+1){padding-right:15px !important;}
.nav-link-list-75 li:nth-of-type(3n+2){padding-left:5px !important;padding-right:10px !important;}
.nav-link-list-75 li:nth-of-type(3n){padding-left:10px !important;padding-right:5px !important;}


.nav-link-list-full li{padding-left:10px !important;}

.nav-link-list li a{;width:100%;vertical-align:top;
box-sizing:border-box;padding:5px;position:relative;
}

.nav-link-list-item-img{display:inline-block;width:53px;height:53px;vertical-align:middle;
margin-right:10px;
}
.nav-link-list-item-img img{max-width:53px;max-height:53px;}


.nav-recommend{width:50%;margin:0;padding-left:40px;border:0;}

.nav-recommend{box-sizing:border-box;text-align:left;font-size:0;letter-spacing:0;}
.nav-recommend >a{display:inline-block;width:210px;margin-left:20px;text-align:left;}


.nav-link-list-75{width:75% !important;}
.nav-link-list-75 + .nav-recommend{width:25%;padding-left:20px;}


.nav-recommend>*{display:inline-block;}


.nav-link-list-75.nav-link-list > li{position:relative;}
.nav-link-list-75.nav-link-list > li::before {content: "";display: block;width: 1px;height: 54%;background: #dbdbdb;position: absolute;top: 22%;right: -1px;}
.nav-link-list-75.nav-link-list > li:nth-of-type(3n)::before{display:none;}

:not(.nav-link-list-full).nav-link-list::after{content:'';display:block;width:1px;
background:#ddd;position:absolute;left:50%;top:21px;
height:calc(100% - 42px);margin-left:30px;}

:not(.nav-link-list-full).nav-link-list-75::after{left:75%;margin-left:5px;}