.rankbox { margin: 0 auto; max-width: 1400px; padding: 20px 10px; font-size: 0; }
.twocat .rankbox { text-align: center; }
.rankbox dl { display: inline-block; width: 33.33%; vertical-align: top; font-size: 1rem; box-sizing: border-box; padding: 0 10px; }
html.novel .rankbox dl { }
.rankbox dl dt { display: block; text-align: center; font-size: 2rem; color: #333; padding-bottom: 20px; }
.rankbox dl dt.mobiledt { display: none; }
.rankbox dl dd { display: block; background-color: #f3f3f3; border-radius: 6px; margin-bottom: 10px; padding: 15px 20px; text-align: center; }
.rankbox dl dd h3 { color: #333; font-size: 1.5rem; padding-bottom: 3px; display: inline-block; margin: 0 10px; font-weight: normal; cursor: pointer; }
.rankbox dl dd h3 button {border:0;background:transparent;display:block;width:100%;height:100%;font-size: 1.3rem;}
.rankbox dl dd h3.now { color: var(--color-main); border-bottom: 2px solid var(--color-main); }
.rankbox dl dd ul {padding-top: 15px; text-align: left;}
.rankbox dl.h1 dd ul:nth-child(4){display:block;}
.rankbox dl.h2 dd ul:nth-child(5){display:block;}
.rankbox dl.h3 dd ul:nth-child(6){display:block;}
.rankbox dl dd ul li { padding: 8px; font-size: 1.1rem; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.rankbox dl dd ul li strong { display: inline-block; vertical-align: top; height: 20px; width: 20px; font-size: .9rem; color: #fff; border-radius: 50%; background-color: #ccc; text-align: center; line-height: 20px; margin-right: 5px; }
.rankbox dl dd ul li a {color:#333;}
.rankbox dl dd ul li a:hover { color: var(--color-main) }
.rankbox dl dd ul li:nth-child(1) strong { background-color: #ff5600 }
.rankbox dl dd ul li:nth-child(2) strong { background-color: #f69700 }
.rankbox dl dd ul li:nth-child(3) strong { background-color: #eecc00 }
.rankbox dl dd ul li.more { text-align: center; padding-top: 20px; display: block; clear: both; width: 100%; }
.rankbox dl dd ul li.more a { display: inline-block; padding: 10px 15px; border-radius: 50px; background-color: var(--color-main); color: #fff; }
.rankbox dl.t1class.h1 dd h3:nth-child(1),
.rankbox dl.t1class.h2 dd h3:nth-child(2),
.rankbox dl.t1class.h3 dd h3:nth-child(3),
.rankbox dl.t2class.h1 dd h3:nth-child(1),
.rankbox dl.t2class.h2 dd h3:nth-child(2),
.rankbox dl.t2class.h3 dd h3:nth-child(3),
.rankbox dl.t3class.h1 dd h3:nth-child(1),
.rankbox dl.t3class.h2 dd h3:nth-child(2),
.rankbox dl.t3class.h3 dd h3:nth-child(3)
{color: var(--color-main2);border-bottom: 2px solid var(--color-main2);}
.rankbox dl.t1class.h1 dd h3:nth-child(1) button,
.rankbox dl.t1class.h2 dd h3:nth-child(2) button,
.rankbox dl.t1class.h3 dd h3:nth-child(3) button,
.rankbox dl.t2class.h1 dd h3:nth-child(1) button,
.rankbox dl.t2class.h2 dd h3:nth-child(2) button,
.rankbox dl.t2class.h3 dd h3:nth-child(3) button,
.rankbox dl.t3class.h1 dd h3:nth-child(1) button,
.rankbox dl.t3class.h2 dd h3:nth-child(2) button,
.rankbox dl.t3class.h3 dd h3:nth-child(3) button
{color: var(--color-main2)}
.rankbox dt.now, .rankbox.d1 dl:nth-child(1) dt button, .rankbox.d2 dl:nth-child(2) dt button, .rankbox.d3 dl:nth-child(3) dt button { color: var(--color-main); font-weight: bold; }
.rankbox dl dt button {border:0;background:transparent;display:block;width:100%;height:100%;font-size: 1.3rem; }