/* =================================
	RANKING
================================= */
div.ranking > section > h3,
div.ranking > section > p.weekof {
	color:#ff0;
	/**/
	font-family: source-han-sans-japanese, sans-serif;
	font-style: normal;
	font-weight:800;
	/**/
	line-height:1.25;
	margin-bottom:0.75em;
}
@media all and (min-width: 768px) {
div.ranking > section > h3,
div.ranking > section > p.weekof {
	font-size:250%;
}
}
@media all and (max-width: 767px) {
div.ranking > section > h3,
div.ranking > section > p.weekof {
	font-size:4.5vw;
}
}







/* ============================
	rank css
============================ */

.rank-tbl {
	border-radius:10px;
	overflow:hidden;
}
.rank-tbl table {
	width:100%;
	color:#000;
}
.rank-tbl table td, .rank-tbl table th {
	padding:0.8em 0.5em;
	box-sizing:border-box;
	background-color:#fff;
	vertical-align:middle;
}
.rank-tbl table td a,
.rank-tbl table th a { color:#000; text-decoration:none; }
.rank-tbl table td a:hover,
.rank-tbl table th a:hover { text-decoration:underline; }

.rank-tbl table tr:nth-child(even) td { background-color:#eeeeee; }

/* .rank-tbl table tr:first-child .rank-number { border-radius:10px 0 0 0; }
.rank-tbl table tr:first-child .rank-artist { border-radius:0 10px 0 0; }
.rank-tbl table tr:last-child .rank-number { border-radius:0 0 0 10px; }
.rank-tbl table tr:last-child .rank-artist { border-radius:0 0 10px 0; } */

.rank-tbl table td.rank-number {
	width:6%;
	padding:0.8em 0;
	font-size:125%;
	/* font-family:'Poppins', sans-serif;
	font-weight:800; */
	font-family: source-han-sans-japanese, sans-serif;
	font-style: normal;
	font-weight:800;
	text-align:center;
}
.rank-tbl table td.rank-updown { width:4%; padding:0.8em 0; }
.ico_up,
.ico_down,
.ico_stay,
.ico_new { display:inline-block; background-position:center center; background-repeat:no-repeat; background-size:contain; text-indent:-9999px; }
.ico_up { background-image:url(../img/rank_up.png); }
.ico_down { background-image:url(../img/rank_down.png); }
.ico_stay { background-image:url(../img/rank_stay.png); }
.ico_up,
.ico_down,
.ico_stay { width:1.2em; height:1.2em; }
.ico_new { background-image:url(../img/rank_new.png); width:2.2em; }
.rank-song, .rank-artist { text-align:left; font-size:95%; line-height:140%; width:40%; }
#album10 .rank-song, #album10 .rank-artist { width:44%; }
.rank-song { font-weight:bold; }

@media all and (min-width: 768px) {
.rank-tbl {
	width:800px;
	margin:0 auto;
}
.rank-tbl:not(:last-child) {
	margin-bottom:30px;
}
}
@media all and (max-width: 767px) {
.rank-tbl:not(:last-child) {
	margin-bottom:15px;
}
.rank-tbl table { font-size:90%; }

.rank-tbl table td.rank-number { width:10%; }
.rank-song, .rank-artist { width:38%; }
#album10 .rank-song, #album10 .rank-artist { width:45%; }
}


/* TOP 100
=================================== */

.rank-bk-month { width:7%; font-size:130%; font-family:'Poppins', sans-serif; font-weight:normal; color:#fff; text-shadow:0 0 5px rgba(0,0,0,0.2); box-shadow:0px 0px 20px rgba(0,0,0,0.2) inset; }
.rank-bk-month .month { font-size:160%; }
.tbg1 .rank-bk-month { background-color:#555; }
.tbg2 .rank-bk-month { background-color:#666; }
.rank-bk-day { width:3%; font-size:110%; border-right:#ddd 1px solid; font-family:'Poppins', sans-serif; font-weight:bold; }

.thisweek100-no1,
#result-title { margin-bottom:20px; padding:1.2em 1.2em 1.0em 1.2em; border:#444 4px solid; border-radius:20px; }
.thisweek100-no1 .en,
#result-title .en { margin-bottom:0.5em; font-family:'Poppins', sans-serif; font-weight:bold; font-size:90%; letter-spacing:0.05em; }
.thisweek100-no1 .song,
#result-title .name { font-size:170%; line-height:140%; font-weight:bold; }

@media all and (max-width: 767px) {

.thisweek100-no1,
#result-title { font-size:80%; border:#444 3px solid; border-radius:15px; }

}


/* TOP 1
=================================== */

#top1-year { margin-bottom:10px; /* for space */ font-size:0; }
#top1-year li { display:inline; margin-right:0.5em; font-family:'Poppins', sans-serif; font-weight:normal; /* for space */ font-size:1.4rem; }
#top1-year li:last-child { margin-right:0; }
@media (hover: hover) { #top1-year li a:hover { text-decoration:none; } }

.rank-tbl table th.rank-th-month,
.rank-tbl table th.rank-th-day,
.rank-tbl table th.rank-th-song,
.rank-tbl table th.rank-th-artist { background-color:#333; color:#fff; white-space:nowrap; }
.rank-tbl table th.rank-th-song,
.rank-tbl table th.rank-th-artist { text-align:left; }
.rank-tbl table th.rank-th-month { border-radius:10px 0 0 0; }
.rank-tbl table th.rank-th-artist { border-radius:0 10px 0 0; }

#result-notice { margin-bottom:20px; text-align:left; font-size:90%; line-height:160%; }

.result-artist-song { padding:0.8em; background-color:#454545; color:#fff; border-radius:10px 10px 0 0; box-shadow:0px 0px 20px rgba(0,0,0,0.4) inset; text-align:left; }
@media (hover: hover) { .result-artist-song a:hover { text-decoration:none; } }
.result-onair-list { margin-bottom:20px; padding:0.4em 0; display:flex; flex-wrap:wrap; background-color:#fff; color:#000; border-radius:0 0 10px 10px; }
.result-onair-list li { width:25%; padding:0.4em 0.8em; box-sizing:border-box; font-size:90%; line-height:120%; overflow-wrap: break-word; }
.result-onair-list li a { color:#000; text-decoration:none; }
.result-onair-list li a:hover { text-decoration:underline; }

#result-song-data { margin-bottom:15px; padding:15px; border-radius:15px; text-align:left; background-color:hsla(0,0%,0%,0.8); box-shadow:0px 0px 20px rgba(0,0,0,0) inset; }
#result-song-data dl { color:#fff;display:inline; margin-right:1.0em; font-size:90%; line-height:140%; padding-bottom:0.5em; }
#result-song-data dl#data-artist { display:block; }
#result-song-data dl dt { display:inline; font-weight:bold; }
#result-song-data dl dt::after { content:"：" }
#result-song-data dl dd { display:inline; }

@media all and (max-width: 767px) {

#top1-year li { font-size:1.2rem; }
#result-notice { margin-bottom:15px; font-size:80%; line-height:140%; }
#result-song-data { font-size:90%; }

}

@media all and (max-width: 500px) {
.result-onair-list li { width:33.33%; }
}