@charset "utf-8";

div#ranking {
  margin: 0;
}

div#ranking h1 {
  float: left;
  font-size: 18px;
}

div#ranking p.period {
  float: left;
  margin: 6px 0 0 10px;
}

p.gotop {
  clear: both;
  text-align: right;
}

/* nav
 * ================================================================================ */
#ranking ul.ttl_nav {
  margin: 12px 0 20px 0;
  padding: 0;
}

#ranking ul.ttl_nav li {
  float: left;
  width: 160px;
  height: 28px;
}

#ranking ul.ttl_nav li a {
  display: block;
  height: 28px;
  background: url(https://image2.b-ch.com/contents/ranking/nav.gif) 0 0 no-repeat;
  text-indent: -9000px;
  font-size: 0;
  line-height: 0;
}

#ranking ul.ttl_nav li.ttl a {background-position: 0 0}
#ranking ul.ttl_nav li.ttl a.active,
#ranking ul.ttl_nav li.ttl a:hover {background-position: 0 100%;}
#ranking ul.ttl_nav li.pmv a {background-position: -160px 0}
#ranking ul.ttl_nav li.pmv a.active,
#ranking ul.ttl_nav li.pmv a:hover {background-position: -160px 100%;}
#ranking ul.ttl_nav li.fmv a {background-position: -320px 0}
#ranking ul.ttl_nav li.fmv a.active,
#ranking ul.ttl_nav li.fmv a:hover {background-position: -320px 100%;}
#ranking ul.ttl_nav li.emb-ttl a {background-position: -480px 0}
#ranking ul.ttl_nav li.emb-ttl a.active,
#ranking ul.ttl_nav li.emb-ttl a:hover {background-position: -480px 100%;}
#ranking ul.ttl_nav li.emb-usr a {background-position: -640px 0}
#ranking ul.ttl_nav li.emb-usr a.active,
#ranking ul.ttl_nav li.emb-usr a:hover {background-position: -640px 100%;}
#ranking ul.ttl_nav li.lv a {background-position: -800px 0}
#ranking ul.ttl_nav li.lv a.active,
#ranking ul.ttl_nav li.lv a:hover {background-position: -800px 100%;}


/* rank-ttl
 * ================================================================================ */
#ranking div#rank-ttl div {
  float: left;
  width: 300px;
  margin: 0 30px 0 0;
  border-bottom: 1px solid #e5e5e5;
  padding: 3px 0 3px 0;
  _padding: 3px 0 0 0;
}

#ranking div#rank-ttl div.list-right {
  margin-right: 0;
}

#ranking div#rank-ttl div p {
  float: left;
  width: 46px;
  min-height: 58px;
  _height: 58px;
  margin-right: 7px;
  font-size: 12px;
  text-align: center;
}

#ranking div#rank-ttl div p.rank-1st {background: #fcbcc8;}
#ranking div#rank-ttl div p.rank-2nd {background: #fcc5bc;}
#ranking div#rank-ttl div p.rank-3rd {background: #fcd5bc;}
#ranking div#rank-ttl div p.rank {background: #fce5bc;}

#ranking div#rank-ttl div p span {
  display: inline-block;
  margin-top: 12px;
}

#ranking div#rank-ttl div p.rank-1st span {
  margin-top: 10px;
}

#ranking div#rank-ttl div p.rank-1st span span {
  font-size: 16px;
}

#ranking div#rank-ttl div dl {
  float: left;
  width: 247px;
}

#ranking div#rank-ttl div dl dd.thum {
  float: left;
  width: 100px;
  font-size: 0;
}

#ranking div#rank-ttl div dl dd.thum span.thm {
  display: inline-block;
  width: 96px;
  _width: 100px;
  height: 54px;
  _height: 58px;
  border: 1px solid #dddddd;
  padding: 1px;
}

#ranking div#rank-ttl div dl dd.newttl {
  float: right;
  width: 144px;
}

#ranking div#rank-ttl div dl dd.newttl span.only {
  position: relative;
  top: 2px;
  display: inline-block;
  height: 15px;
  margin: 0 0.5em 0 0;
}

#ranking div#rank-ttl div dl dd.newttl span.new,
#ranking div#rank-ttl div dl dd.newttl span.end {
  position: relative;
  bottom: 2px;
  display: inline-block;
  margin-right: 1.5em;
  font-size: 10px;
  color: #ff0000;
}

#ranking div#rank-ttl div dl dt {
  float: right;
  width: 144px;
}

/* rank-mv
 * ================================================================================ */
#ranking div#rank-mv div {
  float: left;
  width: 300px;
  margin: 0 30px 0 0;
  border-bottom: 1px solid #e5e5e5;
  padding: 3px 0 3px 0;
  _padding: 3px 0 0 0;
}

#ranking div#rank-mv div.list-right {
  margin-right: 0;
}

#ranking div#rank-mv div p {
  float: left;
  width: 46px;
  min-height: 58px;
  _height: 58px;
  margin-right: 7px;
  font-size: 12px;
  text-align: center;
}

#ranking div#rank-mv div p.rank-1st {background: #fcbcc8;}
#ranking div#rank-mv div p.rank-2nd {background: #fcc5bc;}
#ranking div#rank-mv div p.rank-3rd {background: #fcd5bc;}
#ranking div#rank-mv div p.rank {background: #fce5bc;}

#ranking div#rank-mv div p span {
  display: inline-block;
  margin-top: 12px;
}

#ranking div#rank-mv div p.rank-1st span {
  margin-top: 10px;
}

#ranking div#rank-mv div p.rank-1st span span {
  font-size: 16px;
}

#ranking div#rank-mv div dl {
  float: left;
  width: 247px;
}

#ranking div#rank-mv div dl dd.thum {
  float: left;
  width: 100px;
  font-size: 0;
}

#ranking div#rank-mv div dl dd.thum span.thm {
  display: inline-block;
  width: 96px;
  _width: 100px;
  height: 54px;
  _height: 58px;
  border: 1px solid #dddddd;
  padding: 1px;
}

#ranking div#rank-mv div dl dd.thum span.only {
  display: inline-block;
  margin-top: 3px;
}

#ranking div#rank-mv div dl dd.newttl {
  float: right;
  width: 142px;
}

#ranking div#rank-mv div dl dd.newttl span.new,
#ranking div#rank-mv div dl dd.newttl span.end {
  position: relative;
  bottom: 2px;
  display: inline-block;
  margin-right: 1.5em;
  font-size: 10px;
  color: #ff0000;
}

#ranking div#rank-mv div dl dt {
  float: right;
  width: 142px;
}

#ranking div#rank-mv div dl dd.fmv-count {
  float: right;
  width: 142px;
  font-size: 10px;
}

/* emb-ttl
 * ================================================================================ */
div#rank-emb-ttl ul {
  float: left;
  margin: 0;
  padding: 0;
}

div#rank-emb-ttl ul li {
  float: left;
  width: 300px;
  margin-right: 30px;
  border-bottom: 1px solid #e5e5e5;
  padding: 3px 0;
}

div#rank-emb-ttl ul li.list-right {
  margin-right: 0;
}

div#rank-emb-ttl ul li table {
  width: 300px;
  border: none;
}

div#rank-emb-ttl ul li table td.rnk-num {
  width: 46px;
  text-align: center;
  background: #fce5bc;
}

div#rank-emb-ttl ul li table td.rnk-1 {
  background: #fcbcc8;
}

div#rank-emb-ttl ul li table td.rnk-1 span {
  font-size: 18px;
}

div#rank-emb-ttl ul li table td.rnk-2 {
  background: #fcc5bc;
}

div#rank-emb-ttl ul li table td.rnk-3 {
  background: #fcd5bc;
}

div#rank-emb-ttl ul li table td.emblem {
  width: 80px;
  _width: 84px;
  padding-left: 4px;
}

div#rank-emb-ttl ul li table td.txt {
  width: 170px;
}

div#rank-emb-ttl ul li table td.txt span.new {
  color: #ff0000;
}

div#rank-emb-ttl ul li table td.txt span.only {
  position: relative;
  top: 2px;
}

/* emb-usr
 * ================================================================================ */
#ranking div#rank-emb-usr div {
  float: left;
  width: 465px;
  margin: 3px 30px 0 0;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 3px;
}

#ranking div#rank-emb-usr div.list-right {
  margin-right: 0;
}

#ranking div#rank-emb-usr div p {
  float: left;
  width: 46px;
  min-height: 35px;
  _height: 35px;
  margin-right: 7px;
  font-size: 12px;
  text-align: center;
}

#ranking div#rank-emb-usr div p.rank-1st {background: #fcbcc8;}
#ranking div#rank-emb-usr div p.rank-2nd {background: #fcc5bc;}
#ranking div#rank-emb-usr div p.rank-3rd {background: #fcd5bc;}
#ranking div#rank-emb-usr div p.rank {background: #fce5bc;}

#ranking div#rank-emb-usr div p span {
  display: inline-block;
  margin-top: 5px;
}

#ranking div#rank-emb-usr div p.rank-1st span {
  margin-top: 3px;
}

#ranking div#rank-emb-usr div p.rank-1st span span {
  font-size: 16px;
}

#ranking div#rank-emb-usr div dl {
  float: left;
  width: 412px;
}

#ranking div#rank-emb-usr div dl dd.lv-icn {
  float: left;
  margin: 0 4px 0 0;
  width: 68px;
}

#ranking div#rank-emb-usr div dl dd.lv-icn div.mbr-level {
  width: 68px;
  margin: 0;
  padding: 0;
  border: none;
}

#ranking div#rank-emb-usr div dl dd.lv-icn div.mbr-level p {
  background: transparent url(/img/common/lv/bg_level.png) no-repeat;
  text-align: center;
  width: 68px;
  height: 16px;
  min-height: 16px;
  color: #757C85;
}


#ranking div#rank-emb-usr div dl dt {
  float: left;
  margin: 9px 0 0 0;
  width: 145px;
}

#ranking div#rank-emb-usr div dl dd.pnt {
  float: right;
  margin: 9px 0 0 0;
  width: 182px;
  text-align: right;
}

/* lv
 * ================================================================================ */
#ranking div#level-rank {
  border-top: 1px solid #e5e5e5;
  margin: 0 0 10px 0;
}

#ranking table {
  width: 960px;
  margin: 3px 0 0 0;
  padding: 0 0 3px 0;
  border-bottom: 1px solid #e5e5e5;
  border-collapse: separate;
  border-spacing: 3px;
}

#ranking table th.rank-1st {background: #fcbcc8;}
#ranking table th.rank-2nd {background: #fcc5bc;}
#ranking table th.rank-3rd {background: #fcd5bc;}
#ranking table th.rank {background: #fce5bc;}

#ranking table th span {
  display: inline-block;
  margin: 0;
}

#ranking table th.rank-1st span span {
  font-size: 16px;
}

#ranking table th {
  width: 46px;
  text-align: center;
  vertical-align: top;
  font-size: 12px;
  position: relatve;
  font-weight: normal;
  padding: 10px 0 0 0;
}

#ranking table td.level-det {
  padding: 0 0 0 7px;
  vertical-align: top;
}

#ranking table td.level-det div.mbr-level p {
  background: transparent url(/img/common/lv/bg_level.png) no-repeat;
  text-align: center;
  width: 68px;
  height: 16px;
  color: #757C85;
  font-size: 12px;
  margin: 0;
  padding: 0;
}

#ranking table td.level-rank-mbr {
  width: 839px;
}

#ranking table td.level-rank-mbr ul {
  margin: 0 0 0 15px;
  padding: 0;
}

#ranking table td.level-rank-mbr ul li {
  width: 162px;
  float: left;
}