@charset "utf-8";

/* ---- div#rank_list ---- */
div#rank_list div.ranker,
div#rank_list div#top1,
div#rank_list div#top2to3,
div#rank_list div#top4to6,
div#rank_list div#top7to10 {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 auto;
  z-index: 4;
  position: relative;
}

div#rank_list span {display: block;}

div#rank_list div.top_ranker {
  position: relative;
  padding: 0.5rem 0 0;
}

/* ---- div.ribbon ---- */
div.ribbon1,
div.ribbon2,
div.ribbon3 {
  display: block;
  width: 1440px;
  height: 240px;
  position: absolute;
  transform-origin: center;
  left: 50%;
  top: 600px;
}

div.ribbon1::before,
div.ribbon2::before,
div.ribbon3::before {
  content: "";
  display: block;
  width: 200%;
  height: 200%;
  position: absolute;
  top: 50%;
}

div.ribbon1 {
  background-color: #ff6fb6;
  background-image: linear-gradient(114deg, #ff6fb6, #fff16f);
  transform: translate3d(-50%,0,0) skewY(-15deg);
  margin-top: -500px;
  z-index: 3;
}

div.ribbon1::before,
div.ribbon3::before {
  left: 0;
  transform: translate3d(0,-50%,0);
  background-image: linear-gradient(to left, rgba(255,255,255,0) 0%, #fff 20%, #fff 100%);
  animation: ribbon_show 1s linear forwards;
}

@keyframes ribbon_show {
  from {transform:translate3d(0,-50%,0);}
  to   {transform:translate3d(-100%,-50%,0);}
}

div.ribbon2 {
  transform: translate3d(-50%,0,0) skewY(15deg);
  background-color: #fff16f;
  background-image: linear-gradient(105deg, #fff16f, #6fffc7);
  z-index: 2;
}

div.ribbon2::before {
  left: -100%;
  transform: translate3d(0,-50%,0);
  background-image: linear-gradient(to left, #fff 0%, #fff 80%, transparent 100%);
  animation: ribbon2_show 1s linear 1s forwards;
}

@keyframes ribbon2_show {
  from {transform:translate3d(0,-50%,0);}
  to   {transform:translate3d(100%,-50%,0);}
}

div.ribbon3 {
  transform: translate3d(-50%,0,0) skewY(-15deg);
  background-color: #e5cbff;
  background-image: linear-gradient(105deg, #e5cbff, #a6c4f2);
  z-index: 1;
  margin-top: 500px;
}

div#rank_list hr {
  width: 92%;
  margin: 27.5px auto;
  position: relative;
  z-index: 5;
}

@media only screen and (min-width: 1024px) {
  div#rank_list div.top_ranker {
    padding: 0;
  }
  div#rank_list hr {
    width: 100%;
    margin: 44px auto;
  }
}

div#rank_list div.cast-block {
  word-break: break-all;
  font-size: 1em;
  cursor: pointer;
}

div#rank_list a.link_detail {
  color: #ff2c89;
  text-decoration: underline;
  font-weight: normal;
}

div#rank_list div.top_ranker div.cast-block {
  display: block;
  box-sizing: border-box;
  margin-bottom: 1rem;
  text-align: center;
  opacity: 0;
  animation: fadein 0.3s linear forwards;
}

div#rank_list div#top1 div.cast-block {
  width: 100%;
  padding: 0 11.035%;
  font-size: 143%;
  background-image: url(audition_detail/img/glitter_l.svg),
  url(audition_detail/img/glitter_r.svg);
  background-repeat: no-repeat;
  background-size: 22% auto, 22% auto;
  background-position: 0 120px, 100% 60px;
  max-width: 375px;
}

div#rank_list div#top2to3 div.cast-block {
  width: 39.46%;
  margin: 0 4.2% 1.25rem;
  font-size: 114%;
}

div#rank_list div#top4to6 div.cast-block {
  width: 26.13%;
  margin: 0 2.5% 1.25rem;
  font-size: 86%;
}

div#rank_list div#top7to10 div.cast-block {
  width: 19.5%;
  margin: 0 2.1% 0.75rem;
  font-size: 86%;
}

div#rank_list img.lank_ico {
  display: block;
  margin: auto;
  margin-bottom: 0.25rem;
}

div#rank_list div#top1 img.lank_ico {width: auto;}

div#rank_list div#top2to3 img.lank_ico {width: auto;}

div#rank_list div#top7to10 img.lank_ico {width: auto;}

div#rank_list div.thumbnail-block {
  border-radius: 50%;
  border: solid 1px #fff;
  position: relative;
  width: 100%;
  overflow: hidden;
  background-image: url(audition_detail/img/thumbnail_default.jpg);
  background-size: cover;
  background-color: #eee;
  margin:0 auto 0.5rem;
  background-position: center;
}

div#rank_list div.thumbnail-block::before {
  content: "";
  display: block;
  padding-top: 100%;
}

div#rank_list img.thumbnail {
  width: auto;
  max-width: none;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: 0;
  right: 0;
  transform: translate3d(-50%,-50%,0);
}

div#rank_list div#top1 div.thumbnail-block {
  width: 100%;
  max-width: 296px;
}

div#rank_list div#top2to3 div.thumbnail-block {width: 89.189%;}

div#rank_list div#top7to10 div.thumbnail-block {margin-bottom: 0.37rem;}

div#rank_list div.top_ranker div.thumbnail-block {
  font-size: 129%;
  line-height: 1;
}

div#rank_list div#top1 div.cast-block span.rank {font-size: 180%;}

div#rank_list div#top2to3 div.cast-block span.rank {font-size: 151%;}

div#rank_list div#top4to6 div.cast-block span.rank,
div#rank_list div#top7to10 div.cast-block span.rank {font-size: 133%;}

div#rank_list p {margin:0;}

div#rank_list span.rank {
  margin-bottom: 5.5px;
  font-weight: 900;
}

div#rank_list div.top1 span.rank {color: #c69400;}

div#rank_list div.top2 span.rank {color: #748293;}

div#rank_list div.top3 span.rank {color: #ba340f;}

div#rank_list div.top_ranker span.nickname {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 5.5px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-weight: bold;
}

div#rank_list div#top4to6 div.cast-block span.nickname,
div#rank_list div#top7to10 div.cast-block span.nickname {-webkit-line-clamp: 2;}

div#rank_list span.point {
  color: #55555c;
  font-weight: normal;
  word-break: keep-all;
  line-height: 1.5;
}

div#rank_list div#top2to3 div.cast-block span.point {font-size: 113%;}

div#rank_list div#top4to6 div.cast-block span.point {font-size: 100%;}

div#rank_list div#top7to10 div.cast-block span.point {font-size: 100%;}

div#rank_list div.top_ranker span.point::after {
  content: "";
  display: block;
  width: 27.5px;
  height: 1px;
  background-color: #000;
  margin: 0.5rem auto;
}

div#rank_list div.top1 span.point::after {background-color: #c69400;}

div#rank_list div.top2 span.point::after {background-color: #748293;}

div#rank_list div.top3 span.point::after {background-color: #ba340f;}

div#rank_list  div#top4to6 div.cast-block span.point span,
div#rank_list  div#top7to10 div.cast-block span.point span {display: block;}

div#rank_list a.link_detail {font-size: 100%;}

div#rank_list div#top4to6 a.link_detail {font-size: 3.5vw;}

div#rank_list div#top7to10 a.link_detail {font-size: 3vw;}

body.iphone div#rank_list a.link_detail {display: none;}

body.result03.iphone div#rank_list a.link_detail {display: block;}

@media only screen and (min-width: 768px) {
  div#rank_list div#top4to6 a.link_detail {font-size: 117%;}

  div#rank_list div#top7to10 a.link_detail {font-size: 100%;}
}

@media only screen and (min-width: 1024px) {
  div#rank_list {margin: 0 auto 55px;}

  div#rank_list div#top1 div.cast-block {
    width: 44.53125%;
    margin: 0 27.5%;
    padding: 0 0 1.5rem;
    background-size: 20.394% auto, 18% auto;
    background-position: left 150px, 95% 60px;
    max-width: none;
  }

  div#rank_list div#top2to3 div.cast-block {
    width: 37.695%;
    padding: 0 4.58% 1rem;
    margin: 0;
  }

  div#rank_list div#top4to6 div.cast-block {
    width: 26.75%;
    padding: 0 2% 1.5rem;
    margin: 0;
  }

  div#rank_list div#top7to10 div.cast-block {
    width: 19.824%;
    padding: 0 2%;
    margin: 0;
  }

  div#rank_list div#top1 div.thumbnail-block {width: 64.91%;}

  div#rank_list div#top2to3 div.thumbnail-block {width: 81.5%;}

  div#rank_list div#top4to6 div.thumbnail-block {
    width: 84.48%;
    margin-top: 0.25rem;
  }

  div#rank_list div#top7to10 div.thumbnail-block {
    width: 85%;
    margin-top: 0.5rem;
  }

  div#rank_list div#top1 div.cast-block span.rank {font-size: 179%;}

  div#rank_list div#top2to3 div.cast-block span.rank {font-size: 176%;}

  div#rank_list div#top4to6 div.cast-block span.rank {font-size: 181%;}

  div#rank_list div#top7to10 div.cast-block span.rank {font-size: 155%;}

	div#rank_list div.top_ranker div.cast-block::after {margin: 0.5rem auto 1rem;}

  div#rank_list span.rank {
    font-size: 140%;
    margin-bottom: 11px;
  }

  div#rank_list div#top_ranker span.nickname {font-size: 133%;}

  div#rank_list div#top2to3 div.cast-block span.nickname {-webkit-line-clamp: 2;}

  div#rank_list div#top1 div.cast-block span.nickname {font-size: 119%;}

  div#rank_list div#top2to3 div.cast-block span.nickname {font-size: 117%;}

  div#rank_list div#top4to6 div.cast-block span.nickname {font-size: 129%;}

  div#rank_list div#top7to10 div.cast-block span.nickname{font-size: 104%;}

  div#rank_list div#top2to3 div.cast-block span.point {font-size: 117%;}

  div#rank_list div#top4to6 div.cast-block span.point {font-size: 125%;}

  div#rank_list div#top7to10 div.cast-block span.point {font-size: 125%;}
}

div#rank_list div.ranker > div.cast-block {
  width: 92%;
  text-align: left;
  position: relative;
  padding: 0 0 11px 44px;
  font-size: 86%;
  line-height: 1.75;
	box-sizing: border-box;
}

div#rank_list div.ranker > div.cast-block:nth-of-type(10n)::after {
  content: "";
  display: inline-block;
  width: 44px;
  height: 1px;
  background-color: #b6ecf6;
  margin: 22px 0;
  margin-left: -44px;
}

div#rank_list div.ranker > div.cast-block:last-of-type::after {display: none;}

div#rank_list div.ranker > div.cast-block p {
  width: auto;
  display: block;
}

div#rank_list div.ranker > div.cast-block span.nickname {font-weight: bold;}

div#rank_list div.ranker > div.cast-block span.rank {
  position: absolute;
  top: 0;
  left: 0;
}

@media only screen and (min-width: 1024px) {
  div#rank_list div.ranker > div.cast-block {width: 740px;}

  div#rank_list div.ranker > div.cast-block span.rank {font-size: 100%;}

  div#rank_list div.ranker > div.cast-block span.nickname {margin-left: 22px;}

  div#rank_list div.ranker > div.cast-block span.point {margin-left: 22px;}
}

*.fadein {display: none !important;}