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

.ranking-wrap.wpp-ranking-container { margin: 20px 0; position: relative; z-index: 10; }
.wpp-ranking-container .wpp-tab-nav { display: flex; list-style: none; margin: 0; padding: 0; position: relative; z-index: 50; }
.wpp-ranking-container .wpp-nav-item { flex: 1; list-style: none; margin-right: 2px; }

.wpp-ranking-container .wpp-nav-btn { background: #f0f0f0; border: none; border-radius: 5px 5px 0 0; color: #666; cursor: pointer; display: block; font-size: 14px; font-weight: bold; outline: none; padding: 12px 0; pointer-events: auto !important; position: relative; transition: background 0.2s; width: 100%; }

/*下線カラー*/
.wpp-ranking-container .wpp-btn-monthly { border-bottom: 3px solid #E6A56F; }
.wpp-ranking-container .wpp-btn-weekly { border-bottom: 3px solid #6dbf6b; }
.wpp-ranking-container .wpp-btn-daily { border-bottom: 3px solid #3d8dcc; }

/*アクティブ時*/
.wpp-ranking-container .wpp-nav-btn.is-active { color: #fff; }
.wpp-ranking-container .wpp-btn-monthly.is-active { background: #E6A56F; }
.wpp-ranking-container .wpp-btn-weekly.is-active { background: #6dbf6b; }
.wpp-ranking-container .wpp-btn-daily.is-active { background: #3d8dcc; }

.wpp-ranking-container .wpp-content-area { background: #fff; border: 1px solid #eee; border-top: none; padding: 15px; position: relative; z-index: 20; }
.wpp-ranking-container .wpp-pane { display: none; }
.wpp-ranking-container .wpp-pane.is-active { animation: wppFadeIn 0.3s; display: block; }

@keyframes wppFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* リスト内部のデザイン */
.wpp-ranking-container .ranking-contents { border-bottom: 1px solid #f2f2f2; display: flex; padding: 12px 0; }
.wpp-ranking-container .ranking-contents:last-of-type { border-bottom: none;}

.wpp-ranking-container .ranking-contents-div { flex-shrink: 0; height: 80px; margin-right: 12px; position: relative; width: 80px; }
.wpp-ranking-container .ranking-contents-div img { border-radius: 4px; height: 100%; object-fit: cover; width: 100%; }

/*ランキング数字*/
.wpp-ranking-container .ranking-contents-div:before { background: rgba(0,0,0,0.7); border-radius: 4px 0 0 0; color: #fff; font-size: 11px; height: 22px; left: 0; line-height: 22px; position: absolute; text-align: center; top: 0; width: 22px; z-index: 1; }
.wpp-ranking-container [class*="ranking-num-k-"] { counter-reset: wpp-rank; margin: 0; padding: 0; }
.wpp-ranking-container [class*="ranking-num-k-"] li { counter-increment: wpp-rank; list-style: none; }
.wpp-ranking-container [class*="ranking-num-k-"] li .ranking-contents-div:before { content: counter(wpp-rank); }

/*記事タイトル・日付*/
.wpp-ranking-container .rankink__title a { color: #2D2D2D; font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none;}
.wpp-ranking-container .ranking-date { color: #A1A1A1; display: block; font-size: 12px; font-weight: 500; line-height: 1; margin: 10px 0 0 0;}



@media screen and (max-width: 991px) {
    .wpp-ranking-container .rankink__title a { font-size: 16px; }
    .wpp-ranking-container .ranking-date { font-size: 14px; }
}