@charset "UTF-8";
/* ランキング */
#ranking #bg {
  background-color: #FFFF94 !important;
}

.rankingpage {
  position: relative;
  width: 100%;
}

.rankingpage h1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 38.5%;
  margin-left: 30%;
}

.rankingpage h1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 57.8125%;
  padding-top: 11.6319444444%;
  background: url("../images/pagetitle/bg/01.png") top left no-repeat;
  background-size: 100%;
  margin-top: -1.09%;
  margin-left: 103.6458333333%;
}

.rankingpage h1 img {
  width: 74.21% !important;
}

.rankingpage h1 img:nth-of-type(2) {
  width: 22.82% !important;
}

@media screen and (max-width: 767px) {
  .rankingpage h1 {
    padding-top: 4.3157894737%;
    display: block;
    width: 55.8947368421%;
  }
  .rankingpage h1::after {
    width: 30.3201506591%;
    padding-top: 12.6177024482%;
    margin-top: 16.3424124514%;
  }
  .rankingpage h1 img {
    width: 100% !important;
  }
  .rankingpage h1 img:nth-of-type(2) {
    width: 31.6384180791% !important;
    margin-top: 4.3314500942%;
  }
}
#mainblock > .contents {
  background-color: #fff;
  padding-top: 2.1428571429%;
}

.rankingmenu_wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto 0 auto;
  border-top: 1px solid #FFDD25;
}

.rankingmenu {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.rankingmenu li {
  padding-top: 5.95%;
  padding-bottom: 5.95%;
  width: 50%;
}

.rankingmenu li {
  position: relative;
  border-right: 1px solid #FFDD25;
}

.rankingmenu li:last-child {
  border-right: none;
}

.rankingmenu li a {
  display: block;
  width: 60.95%;
  margin-left: auto;
  margin-right: auto;
  transition-duration: 0.2s;
}

.rankingmenu li img {
  display: block;
  width: 100%;
}

.rankingmenu li a:hover {
  filter: brightness(110%);
  transform: scale(1.05);
}

.rankingmenu li:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 5.1428571428%;
  padding-top: 5.1428571428%;
  height: 0;
  background: url("../images/ranking/bg/03.svg") top left no-repeat;
  background-size: 100% auto;
  transform: translate(50%, -50%);
}

.rankingmenu li:last-child:after {
  content: none;
}

.rankingmenu:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.2857142857%;
  height: 0;
  padding-top: 1.2857142857%;
  background: url("../images/ranking/bg/03.svg") top left no-repeat;
  background-size: 100% auto;
  transform: translate(-50%, -50%);
}

.rankingmenu:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1.2857142857%;
  height: 0;
  padding-top: 1.2857142857%;
  background: url("../images/ranking/bg/03.svg") top left no-repeat;
  background-size: 100% auto;
  transform: translate(50%, -50%);
}

@media screen and (max-width: 767px) {
  .rankingmenu li:first-child:after {
    width: 3.8571428572%;
    padding-top: 3.8571428572%;
  }
  .rankingmenu:before {
    width: 1.8691588785%;
    padding-top: 1.8691588785%;
  }
  .rankingmenu:after {
    width: 1.8691588785%;
    padding-top: 1.8691588785%;
  }
}
.rankingtitle {
  position: relative;
  font-weight: bold;
  font-size: 36px;
  background-image: url("../images/ranking/bg_dot.png"), linear-gradient(90deg, rgb(255, 135, 177) 0%, rgb(255, 99, 129) 100%);
  background-repeat: repeat, no-repeat;
  background-position: left top, center top;
  background-size: auto auto, 100% auto;
  aspect-ratio: 1418 / 98;
  max-height: 98px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.rankingtitle .contents {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainblock .rankingtitle .contents {
  background-color: transparent;
  padding: 0;
}

.rankingtitle .contents h2 {
  width: 28%;
}

.rankingtitle .contents h2 img {
  display: block;
  width: 100%;
}

#mainblock .rankingtitle + .contents {
  padding-top: 0;
  background: url("../images/ranking/bg_dot_g.png") left top repeat #fff;
  background-size: auto auto;
}

p.rankingdate {
  text-align: right;
  font-size: 22px;
  font-family: "M PLUS 1p", serif;
  font-weight: 700;
  color: #8b8c96;
  width: 91.28%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0.5%;
}

p.rankingdate .scorerankingdate {
  display: inline-block;
  text-align: left;
}

p.rankingdate .rankingdate_notice {
  display: block;
  font-size: 22px;
}

#mainblock .rankingtitle + .contents .ranking {
  width: 91.28%;
  margin-left: auto;
  margin-right: auto;
  min-height: 400px;
}

.ranking {
  position: relative;
  font-family: "M PLUS 1p", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  color: #444;
  font-style: normal;
  font-size: 16px;
  padding-top: 2.214%;
}

.rtitle {
  position: relative;
  width: calc(91.28% - 3em);
  border-radius: 4em;
  padding: 0.4em 1.5em;
  border: none;
  font-family: "M PLUS 1p", serif;
  font-size: 31px;
  margin: 0.5em auto 2.214% auto;
  font-weight: bold;
  color: #fff;
  background-color: #ff9900;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.rankinglist {
  position: relative;
}

p.rankinglist {
  text-align: center;
  color: #4D4F5E;
  font-size: 24px;
  font-weight: bold;
}

.rankinglist > li {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  background-image: url(../images/ranking/s_rank_frame_pc.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  aspect-ratio: 1388 / 248;
  margin-bottom: 3%;
  display: flex;
  background-color: transparent;
  justify-content: space-between;
  align-items: center;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
}

.rankinglist > li.ranking1 {
  background-image: url(../images/ranking/s_rank1_frame_pc.svg);
}

.rankinglist > li.ranking2 {
  background-image: url(../images/ranking/s_rank2_frame_pc.svg);
}

.rankinglist > li.ranking3 {
  background-image: url(../images/ranking/s_rank3_frame_pc.svg);
}

.rankinglist li img {
  display: block;
  width: 100%;
  height: auto;
}

.rank_num {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 64px;
  font-weight: 900;
  color: #fff;
  text-align: center;
}

.ranking100 .rank_num {
  font-size: 60px;
}

.score {
  position: absolute;
  width: 42%;
  height: 52.419%;
  left: 31.34%;
  top: 0;
  margin-top: 2.089%;
  text-align: right;
  font-size: 72px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #4D4F5E;
}

.splus {
  font-size: 50px;
}

.idols {
  position: absolute;
  width: 21.037%;
  left: 76.729%;
  top: 0;
  margin-top: 2.089%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.idols li {
  width: 31.74%;
  background-color: #F6F5F5;
}

.producer {
  position: absolute;
  width: 70.05%;
  height: 29.032%;
  left: 3.242%;
  top: 0;
  margin-top: 11.743%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #4D4F5E;
}

.pd_lvtitle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 43%;
}

.pdlv {
  font-size: 23px;
  font-weight: 700;
  width: 5em;
}

.pdtitle {
  width: calc(100% - 5em);
}

.pdname {
  font-size: 33px;
  font-weight: 700;
}

@media screen and (max-width: 1920px) {
  p.rankingdate {
    font-size: 1.1458333333vw;
  }
  p.rankingdate .rankingdate_notice {
    font-size: 1.1458333333vw;
  }
  .rtitle {
    font-size: 1.6145833333vw;
  }
  .scoreranking_select_box {
    font-size: 1.6145833333vw;
  }
  .scoreranking_select {
    font-size: 1.6145833333vw;
  }
  .scoreranking_select optgroup {
    font-size: 1.25vw;
  }
  .scoreranking_select option {
    font-size: 1.6145833333vw;
  }
  p.rankinglist {
    font-size: 1.25vw;
  }
  .rank_num {
    font-size: 3.125vw;
  }
  .score {
    font-size: 3.75vw;
  }
  .splus {
    font-size: 2.6041666667vw;
  }
  .pdtitle {
    width: calc(100% - 5em);
  }
  .pdlv {
    font-size: 1.1979166667vw;
  }
  .pdname {
    font-size: 1.71875vw;
  }
  .ranking100 .rank_num {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 767px) {
  #mainblock > .contents {
    padding-top: 0;
  }
  .rankingmenu {
    width: 100%;
    justify-content: center;
  }
  .rankingmenu li a {
    margin: auto;
  }
  .rankingtitle {
    background-size: 1% auto, 100% auto;
    aspect-ratio: auto;
    height: 11.37vw;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  .rankingtitle .contents h2 {
    width: 45.74%;
    display: inline-block;
  }
  .rankingtitle.iineranking .contents h2 {
    width: 40.663%;
  }
  .rankingtitle.eventranking .contents h2 {
    width: 52.663%;
  }
  #mainblock .rankingtitle + .contents {
    width: 100%;
  }
  p.rankingdate {
    font-size: 2.5287356322vw;
  }
  p.rankingdate .rankingdate_notice {
    font-size: 2.5287356322vw;
  }
  .rtitle {
    font-size: 3.5632183908vw;
  }
  #mainblock .rankingtitle + .contents .ranking {
    width: 91.28%;
    margin-left: auto;
    margin-right: auto;
    min-height: unset;
  }
  .rankinglist > li {
    background-image: url(../images/ranking/s_rank_frame_sp.svg);
    aspect-ratio: 870 / 333;
    margin-bottom: 3%;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
  }
  .rankinglist > li.ranking1 {
    background-image: url(../images/ranking/s_rank1_frame_sp.svg);
  }
  .rankinglist > li.ranking2 {
    background-image: url(../images/ranking/s_rank2_frame_sp.svg);
  }
  .rankinglist > li.ranking3 {
    background-image: url(../images/ranking/s_rank3_frame_sp.svg);
  }
  p.rankinglist {
    font-size: 2.7586206897vw;
  }
  .scoreranking_select_box,
  #eventranking_select_form .scoreranking_select_box {
    aspect-ratio: 730 / 80;
    width: 99%;
    font-size: 3.5632183908vw;
  }
  .difficultylist {
    width: 99%;
  }
  .scoreranking_select,
  #eventranking_select_form .scoreranking_select {
    font-size: 3.5632183908vw;
  }
  .scoreranking_select optgroup {
    font-size: 2.7586206897vw;
  }
  .scoreranking_select option,
  #eventranking_select_form .scoreranking_select option {
    font-size: 3.5632183908vw;
  }
  .scoreranking .rank_num {
    width: 13.563%;
    height: 33.933%;
    left: 2.068%;
    margin-top: 0%;
    font-size: 6.2068965517vw;
  }
  .ranking100 .rank_num {
    font-size: 4.5977011494vw;
  }
  .rank {
    width: 18.85%;
    left: 16.241%;
    margin-top: 2.413%;
  }
  .scoreranking h4 {
    width: 12.988%;
    left: 40%;
    margin-top: 24.045%;
  }
  .score {
    width: 55.862%;
    left: auto;
    right: 4.137%;
    height: 6.896%;
    margin-top: 30.551%;
    line-height: 6.8965517241vw;
    font-size: 6.8965517241vw;
  }
  .splus {
    font-size: 3.4482758621vw;
  }
  .idols {
    width: 30.804%;
    left: 4.597%;
    margin-top: 15.172%;
  }
  .idols li {
    width: 32.089%;
  }
  .producer {
    width: 59%;
    height: 37.135%;
    left: 39%;
    margin-top: 6%;
    flex-direction: column;
    justify-content: space-between;
  }
  .eventranking .producer {
    width: 59%;
    height: 37.135%;
    left: 20%;
    margin-top: 6%;
    flex-direction: column;
    justify-content: space-between;
  }
  .pd_lvtitle {
    width: 100%;
    justify-content: space-between;
  }
  .pdtitle {
    width: calc(100% - 5em);
  }
  .pdlv {
    font-size: 2.6436781609vw;
  }
  .pdname {
    align-self: flex-start;
    justify-content: center;
    font-size: 3.3333333333vw;
  }
}
.scoreranking_select_box {
  position: relative;
  width: 53.21%;
  aspect-ratio: 730 / 80;
  border-radius: 4em;
  border: none;
  font-size: 31px;
  margin: 0 auto 2.214% auto;
  font-weight: bold;
  color: #fff;
  background-color: #FF6280;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.scoreranking_select_box:before {
  content: "";
  display: block;
  width: 14.221%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0 4em 4em 0;
  background: url(../images/ranking/select_arrow.png) center top no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.scoreranking_select {
  position: relative;
  width: 100%;
  padding: 0.5em 1em;
  font-size: 31px;
  font-weight: bold;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  color: #fff;
}

.scoreranking_select:focus {
  outline: 0;
}

.scoreranking_select optgroup {
  font-size: 24px;
  color: #000;
  font-family: "M PLUS 1p", serif;
  background-color: #FF6280;
  color: #fff;
  font-style: normal;
}

.scoreranking_select option {
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 31px;
  color: #000;
  background-color: #FFD4D5;
}

.rank {
  position: absolute;
  width: 10%;
  left: 11.4%;
  top: 0;
  margin-top: 3.458%;
}

.difficultylist {
  position: relative;
  width: 53.21%;
  margin: 0% auto 0 auto;
  padding-bottom: 2.5%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.difficultylist a {
  display: block;
  width: 48.63%;
  height: 0;
  font-size: 16px;
  overflow: hidden;
  padding-top: 11.095%;
  background: url(../images/ranking/btn_master.svg) center center no-repeat;
  background-size: 100% auto;
  transition-duration: 0.2s;
}

.difficultylist a:hover {
  filter: brightness(90%) drop-shadow(0 0 0.3em rgba(255, 0, 0, 0.3));
}

.difficultylist a.hilite:hover {
  filter: brightness(140%) drop-shadow(0 0 0.3em rgba(255, 0, 0, 0.3));
}

.difficultylist a.expert {
  background-image: url(../images/ranking/btn_expert.svg);
}

.difficultylist a.hilite {
  background-image: url(../images/ranking/btn_master_ro.svg);
}

.difficultylist a.hilite.expert {
  background-image: url(../images/ranking/btn_expert_ro.svg);
}

.difficultylist.eventranking a.hilite {
  background-image: url(../images/ranking/btn_master_ro_event.svg);
}

.difficultylist.eventranking a.hilite.expert {
  background-image: url(../images/ranking/btn_expert_ro_event.svg);
}

.scoreranking .rank_num {
  width: 10.086%;
  height: 54.032%;
  left: 0.216%;
  margin-top: 0.216%;
}

.scoreranking h4 {
  position: absolute;
  width: 8.213%;
  left: 23.126%;
  top: 0;
  margin-top: 5.907%;
}

@media screen and (max-width: 1920px) {
  .scoreranking_select_box {
    font-size: 1.6145833333vw;
  }
  .scoreranking_select {
    font-size: 1.6145833333vw;
  }
  .scoreranking_select optgroup {
    font-size: 1.25vw;
  }
  .scoreranking_select option {
    font-size: 1.6145833333vw;
  }
  .difficultylist a {
    font-size: 0.8333333333vw;
    line-height: 0.8333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .scoreranking_select_box,
  #eventranking_select_form .scoreranking_select_box {
    aspect-ratio: 730 / 80;
    width: 99%;
    font-size: 3.5632183908vw;
  }
  .difficultylist {
    width: 99%;
  }
  .scoreranking_select,
  #eventranking_select_form .scoreranking_select {
    font-size: 3.5632183908vw;
  }
  .scoreranking_select optgroup {
    font-size: 2.7586206897vw;
  }
  .scoreranking_select option,
  #eventranking_select_form .scoreranking_select option {
    font-size: 3.5632183908vw;
  }
  .scoreranking .rank {
    width: 18.85%;
    left: 16.241%;
    margin-top: 2.413%;
  }
  .scoreranking .rank_num {
    width: 13.563%;
    height: 33.933%;
    left: 2.068%;
    margin-top: 0%;
    font-size: 6.2068965517vw;
  }
  .scoreranking h4 {
    width: 12.988%;
    left: 40%;
    margin-top: 24.045%;
  }
  .scoreranking.eventranking h4 {
    width: 18%;
    left: 10%;
    margin-top: 24.045%;
  }
  .difficultylist a {
    font-size: 1.8390804598vw;
    line-height: 1.8390804598vw;
    border-width: 2px;
  }
}
.rankingtitle.iineranking {
  background-image: url("../images/ranking/bg_dot.png"), linear-gradient(90deg, rgb(22, 172, 240) 0%, rgb(125, 107, 218) 100%);
}

.rankingtitle.iineranking .contents h2 {
  width: 28.214%;
  display: inline-block;
}

h3.rtitle.iineranking {
  background-color: #0099ff;
}

.iineseason_select_box {
  position: relative;
  width: calc(90% - 1em);
  aspect-ratio: 1277 / 72;
  border-radius: 4em;
  padding: 0.1em 0 0.1em 1em;
  border: none;
  font-size: 24px;
  margin: 0.5em auto 1% auto;
  font-weight: bold;
  color: #fff;
  background-color: #20a3ec;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: "M PLUS 1p", serif;
}

.iineseason_select_box:before {
  content: "";
  display: block;
  width: 9%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0 4em 4em 0;
  background: url(../images/ranking/select_arrow_iine.png) center top no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.iineseason_select {
  position: relative;
  width: 100%;
  padding: 0.1em 1em;
  font-size: 31px;
  font-weight: bold;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  color: #fff;
}

.iineseason_select option {
  font-family: "M PLUS 1p", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
  font-size: 31px;
  color: #000;
  background-color: #bbbbff;
}

.iineranking .rankinglist > li {
  background-image: url(../images/ranking/i_rank_frame_pc.svg);
  aspect-ratio: 1389 / 406;
  margin-bottom: 3%;
  display: flex;
  background-color: transparent;
  justify-content: space-between;
  align-items: center;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
}

.iineranking .rankinglist > li.ranking1 {
  background-image: url(../images/ranking/i_rank1_frame_pc.svg);
}

.iineranking .rankinglist > li.ranking2 {
  background-image: url(../images/ranking/i_rank2_frame_pc.svg);
}

.iineranking .rankinglist > li.ranking3 {
  background-image: url(../images/ranking/i_rank3_frame_pc.svg);
}

.iineranking .rank_num {
  width: 10.079%;
  height: 33.004%;
  left: 0.287%;
  margin-top: 0.215%;
}

.iineranking .idols {
  width: 18.43%;
  left: 78.329%;
  margin-top: 14.83%;
}

.iineranking .idols li {
  width: 32.031%;
  background-color: #fff;
}

.iineranking .producer {
  width: 85.241%;
  height: 12.807%;
  left: 11.526%;
  margin-top: 7.119%;
  justify-content: space-between;
}

.iineranking .pd_lvtitle {
  width: 41.047%;
}

.iineranking .pdname {
  text-align: left;
  width: 55.57%;
  color: #4D4F5E;
  font-size: 36px;
}

.create_at {
  position: absolute;
  width: 25.197%;
  right: 2.231%;
  top: 0;
  margin-top: 2.527%;
  text-align: right;
  color: #9B9B9B;
  font-weight: 700;
  font-size: 24px;
}

.filename {
  position: absolute;
  width: 70.114%;
  height: 8.866%;
  left: 11.526%;
  top: 0;
  margin-top: 2.527%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #4D4F5E;
  font-weight: 700;
  font-size: 30px;
}

.live_info {
  position: absolute;
  width: 48%;
  left: 1.199%;
  top: 0;
  margin-top: 14.326%;
  color: #4D4F5E;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 24px;
}

.stage_name:before {
  content: ">>";
  margin: 0 0.5em;
}

.rank_iineset {
  position: absolute;
  width: 45.428%;
  left: 2.807%;
  top: 0;
  margin-top: 18.214%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.rank_iineset li {
  position: relative;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 50px;
  color: #4D4F5E;
  font-weight: 900;
}

.rank_iineset h4 {
  width: 61.392%;
}

.music_pic {
  position: absolute;
  width: 12.5%;
  left: 50%;
  top: 0;
  margin-top: 14.83%;
}

.stage_pic {
  position: absolute;
  width: 12.5%;
  left: 63.357%;
  top: 0;
  margin-top: 14.83%;
}

.music_pic img,
.stage_pic img {
  border-radius: 1em;
  box-sizing: border-box;
}

.music_pic img,
.stage_pic img {
  border: 0.15em solid #4D4F5E;
}

@media screen and (max-width: 1920px) {
  .iineseason_select_box {
    font-size: 1.6145833333vw;
  }
  .iineseason_select {
    font-size: 1.6145833333vw;
  }
  .iineseason_select option {
    font-size: 1.6145833333vw;
  }
  .iineranking .pdname {
    font-size: 1.875vw;
  }
  .create_at {
    font-size: 1.25vw;
  }
  .filename {
    font-size: 1.5625vw;
  }
  .live_info {
    font-size: 1.25vw;
  }
  .rank_iineset li {
    font-size: 2.5vw;
  }
}
@media screen and (max-width: 767px) {
  .rankingtitle.iineranking .contents h2 {
    width: 40.663%;
  }
  .iineseason_select_box {
    aspect-ratio: 872 / 72;
    font-size: 3.5632183908vw;
    padding-left: 0.5em;
  }
  .iineseason_select {
    font-size: 3.5632183908vw;
  }
  .iineseason_select option {
    font-size: 3.5632183908vw;
  }
  .iineseason_select_box:before {
    width: 15%;
  }
  .iineranking .rankinglist > li {
    background-image: url(../images/ranking/i_rank_frame_sp.svg);
    aspect-ratio: 870 / 462;
    margin-bottom: 3%;
  }
  .iineranking .rankinglist > li.ranking1 {
    background-image: url(../images/ranking/i_rank1_frame_sp.svg);
  }
  .iineranking .rankinglist > li.ranking2 {
    background-image: url(../images/ranking/i_rank2_frame_sp.svg);
  }
  .iineranking .rankinglist > li.ranking3 {
    background-image: url(../images/ranking/i_rank3_frame_sp.svg);
  }
  .iineranking .rank_num {
    width: 13.448%;
    height: 24.45%;
    left: 0.459%;
    margin-top: 0.344%;
    font-size: 6.2068965517vw;
  }
  .iineranking .idols {
    width: 26.206%;
    left: 45.517%;
    margin-top: 31.724%;
  }
  .iineranking .idols li {
    width: 31.578%;
  }
  .iineranking .producer {
    width: 82.298%;
    height: 25.97%;
    left: 15.747%;
    margin-top: 9.59%;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  .iineranking .pd_lvtitle {
    width: 67.87%;
    justify-content: space-between;
  }
  .iineranking .pdtitle {
    width: calc(100% - 3em);
  }
  .iineranking .pd_title {
    width: 76.954%;
  }
  .iineranking .pdname {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 69.166%;
    width: 76.954%;
    font-size: 3.3333333333vw;
  }
  .create_at {
    width: 29.241%;
    right: 3%;
    height: 13.852%;
    margin-top: 1.034%;
    font-size: 2.2988505747vw;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .filename {
    width: 55.873%;
    height: 13.852%;
    line-height: 1.1;
    left: 16.321%;
    margin-top: 1.034%;
    font-size: 2.9885057471vw;
    word-break: break-all;
  }
  .live_info {
    width: 69.54%;
    left: 5.747%;
    margin-top: 24.517%;
    font-size: 2.7586206897vw;
    height: 5.5172413793vw;
    flex-wrap: wrap;
    line-height: 2.7586206897vw;
    justify-content: flex-start;
  }
  .music_pic {
    width: 17.586%;
    left: 5.747%;
    margin-top: 31.724%;
  }
  .stage_pic {
    width: 17.586%;
    left: 24.942%;
    top: 0;
    margin-top: 31.724%;
  }
  .rank_iineset {
    width: 26.206%;
    height: 42.2%;
    left: 72.528%;
    margin-top: 26.896%;
    flex-direction: column;
    justify-content: space-between;
  }
  .rank_iineset li {
    width: 100%;
    height: 44.102%;
    font-size: 4.1379310345vw;
    justify-content: space-between;
  }
  .rank_iineset h4 {
    width: 75.438%;
  }
}