@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; column-gap: 7px; 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 #AFC8C0; }
.wpp-ranking-container .wpp-btn-weekly { border-bottom: 3px solid #C193AE; }
.wpp-ranking-container .wpp-btn-daily { border-bottom: 3px solid #D2B293; }*/

.wpp-ranking-container .wpp-nav-btn { color: #fff;}
.wpp-ranking-container .wpp-btn-monthly {background: #AFC8C0; }
.wpp-ranking-container .wpp-btn-weekly { background: #C193AE; }
.wpp-ranking-container .wpp-btn-daily {background: #D2B293;  }

/*アクティブ時*/
.wpp-ranking-container .wpp-nav-btn.is-active { color: #fff; border-bottom: 3px solid #eec757; }
.wpp-ranking-container .wpp-btn-monthly.is-active { background: #AFC8C0; }
.wpp-ranking-container .wpp-btn-weekly.is-active { background: #C193AE; }
.wpp-ranking-container .wpp-btn-daily.is-active { background: #D2B293; }

.wpp-ranking-container .wpp-content-area { background: #fff; border-top: none; padding: 0; position: relative; z-index: 20; }
.wpp-ranking-container .wpp-pane {display: none; opacity: 0; transform: translateX(10px);}
.wpp-ranking-container .wpp-pane.is-active { display: block; animation: wppSlideFadeIn 0.5s ease-in-out; opacity: 1; transform: translateX(0);}
@keyframes wppSlideFadeIn {
from { opacity: 0; transform: translateX(10px);}
to { opacity: 1; transform: translateY(0);}
}

/* リスト内部のデザイン */
.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: 97px; margin-right: 9px; position: relative; width: 155px; }
.wpp-ranking-container .ranking-contents-div img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: center; width: 100%; }

@media screen and (max-width: 1200px) {
.wpp-ranking-container .ranking-contents-div { height: auto; width: 120px; }
}
@media screen and (max-width: 991px) {
.wpp-ranking-container .ranking-contents-div { height: auto;  width: 155px; }
}


/*ランキング数字*/
.wpp-ranking-container .ranking-contents-div:before { background: #CC4522; 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; display: block; font-size: 14px; font-weight: 500; line-height: 1.6; 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;}