@charset "utf-8";

.mv {
  display: block;
  aspect-ratio: 750 / 1254;
}
@media screen and (min-width: 768px) {
  .mv {
    margin-top: 80px;
    aspect-ratio: 1440 / 773;
  }
}


.introduction {
  display: block;
  aspect-ratio: 750 / 1698;
}
@media screen and (min-width: 768px) {
  .introduction {
    aspect-ratio: 1440 / 728;
  }
}


.fireworksBg {
  background: top / cover url(../img/vendor/nine/ranking-bg.webp);
}
@media screen and (min-width: 768px) {
  .fireworksBg {
    background-image: url(../img/vendor/nine/ranking-bg__l.webp);
  }
}


.date {
  display: block;
  text-align: center;
  font-size: clamp(14px, 3.7vw, 28px);
  font-style: italic;
  font-weight: 600;
  color: #fff;
}


/* ----- bestnine ----- */
.bestnine {
  padding: 16vw 4% 13.3vw;
}
.bestnine-ttl {
  margin-bottom: 10px;
}
.bestnine-ttl img {
  margin-inline: auto;
  display: block;
  width: min(65.7vw, 493px);
  aspect-ratio: 493 / 201;
}
.bestnine-date {
  margin-bottom: 25px;
}

.bestnine-field {
  margin-inline: auto;
  max-width: 750px;
  padding: 30px 3.5%;
  background: top / cover url(../img/vendor/nine/bestnine-bg.webp);
  border-radius: 30px;
}
.bestnine-members {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 630 / 750;
}
.bestnine-member {
  position: absolute;
  width: min(18.8vw, 141px);
  height: min(18.8vw, 141px);
  background-color: #fff;
  border-radius: 50%;
}
.bestnine-member::before {
  content: '';
  position: absolute;
  top: -15%;
  left: 68%;
  display: block;
  height: auto;
}
.bestnine-member._full {
  border: min(1vw, 14px) solid #feacdf;
}
.bestnine-member._hito {
  border: min(1vw, 14px) solid #feea24;
}
.bestnine-member._leoc {
  border: min(1vw, 14px) solid #b4e4f9;
}
.bestnine-member:nth-of-type(1) {
  top: 45%;
  left: 39%;
}
/* 倍率の変数 */
.bestnine-member {
  --rank--magnification: 1 / 2;
}
@media screen and (min-width: 768px) {
  .bestnine-member {
    --rank--magnification: 1;
  }
}
/* /倍率の変数 */
.bestnine-member:nth-of-type(1)::before {
  width: calc(45px * var(--rank--magnification));
  aspect-ratio: 45 / 56;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-1.webp);
}
.bestnine-member:nth-of-type(2) {
  top: 72%;
  left: 39%;
}
.bestnine-member:nth-of-type(2)::before {
  width: calc(49px * var(--rank--magnification));
  aspect-ratio: 49 / 57;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-2.webp);
}
.bestnine-member:nth-of-type(3) {
  top: 49%;
  left: 74%;
}
.bestnine-member:nth-of-type(3)::before {
  width: calc(49px * var(--rank--magnification));
  aspect-ratio: 49 / 58;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-3.webp);
}
.bestnine-member:nth-of-type(4) {
  top: 22%;
  left: 58%;
}
.bestnine-member:nth-of-type(4)::before {
  width: calc(46px * var(--rank--magnification));
  aspect-ratio: 46 / 53;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-4.webp);
}
.bestnine-member:nth-of-type(5) {
  top: 49%;
  left: 2%;
}
.bestnine-member:nth-of-type(5)::before {
  width: calc(47px * var(--rank--magnification));
  aspect-ratio: 47 / 54;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-5.webp);
}
.bestnine-member:nth-of-type(6) {
  top: 22%;
  left: 21%;
}
.bestnine-member:nth-of-type(6)::before {
  width: calc(46px * var(--rank--magnification));
  aspect-ratio: 46 / 55;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-6.webp);
}
.bestnine-member:nth-of-type(7) {
  top: 2%;
  left: 4%;
}
.bestnine-member:nth-of-type(7)::before {
  width: calc(44px * var(--rank--magnification));
  aspect-ratio: 44 / 53;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-7.webp);
}
.bestnine-member:nth-of-type(8) {
  top: 0%;
  left: 39%;
}
.bestnine-member:nth-of-type(8)::before {
  width: calc(45px * var(--rank--magnification));
  aspect-ratio: 45 / 55;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-8.webp);
}
.bestnine-member:nth-of-type(9) {
  top: 2%;
  left: 74%;
}
.bestnine-member:nth-of-type(9)::before {
  width: calc(45px * var(--rank--magnification));
  aspect-ratio: 45 / 55;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-9.webp);
}
.bestnine-member:nth-of-type(10) {
  top: 85%;
  left: 77%;
}
.bestnine-member:nth-of-type(10)::before {
  width: calc(64px * var(--rank--magnification));
  aspect-ratio: 64 / 47;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-10.webp);
}
.bestnine-member:nth-of-type(11) {
  top: 64%;
  left: 77%;
}
.bestnine-member:nth-of-type(11)::before {
  width: calc(61px * var(--rank--magnification));
  aspect-ratio: 61 / 46;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-11.webp);
}
.bestnine-member:nth-of-type(12) {
  top: 64%;
  left: 2%;
}
.bestnine-member:nth-of-type(12)::before {
  width: calc(63px * var(--rank--magnification));
  aspect-ratio: 63 / 46;
  background: center/contain no-repeat url(../img/vendor/nine/bestnine-mark-12.webp);
}
.bestnine-member-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.bestnine-member-name {
  position: absolute;
  bottom: -1em;
  left: 50%;
  translate: -50% 0;
  display: block;
  width: fit-content;
  padding: .2em .5em;
  border-radius: calc(1px / 0);
  white-space: nowrap;
  text-align: center;
  font-size: clamp(16px, 4vw, 24px);
  color: #333;
}
._full .bestnine-member-name {
  background-color: #feacdf;
}
._hito .bestnine-member-name {
  background-color: #feea24;
}

.bestnine-rank {
  width: 100%;
  border-collapse: collapse;
}
.bestnine-rank thead th {
  padding-bottom: 2%;
}
.bestnine-rank thead th:first-child {
  width: 45%;
}
.bestnine-rank thead th:last-child {
  width: 55%;
}
.bestnine-rank thead th ._rank {
  margin-inline-start: 14%;
  display: block;
  width: min(15.3vw, 115px);
  aspect-ratio: 115 / 30;
}
.bestnine-rank thead th ._name {
  display: block;
  width: min(15.6vw, 117px);
  aspect-ratio: 117 / 30;
}
.bestnine-rank tbody td {
  background-color: #fff;
}
.bestnine-rank tbody tr:nth-of-type(-n+9) td {
  background-color: #fffadd;
}
.bestnine-rank tbody tr:first-child td:first-child {
  border-start-start-radius: 15px;
}
.bestnine-rank tbody tr:first-child td:last-child {
  border-start-end-radius: 15px;
}
.bestnine-rank tbody tr:last-child td:first-child {
  border-end-start-radius: 15px;
}
.bestnine-rank tbody tr:last-child td:last-child {
  border-end-end-radius: 15px;
}
.bestnine-rank tbody tr:has(+ tr) {
  border-bottom: min(0.25vw, 4px) solid #c5c4c3;
}
.bestnine-rank tbody td {
  padding-block: min(2%, 13px);
}
.bestnine-rank tbody td:first-child {
  width: 25%;
  text-align: center;
}
.bestnine-rank tbody td:first-child img {
  width: auto;
  height: min(4.8vw, 36px);
}
.bestnine-rank tbody td:nth-child(2) {
  width: 20%;
  vertical-align: middle;
}
.bestnine-rank tbody td:nth-child(2) img {
  height: min(4vw, 30px);
  width: auto;
  aspect-ratio: 1 / 1;
}
.bestnine-rank tbody td:last-child {
  vertical-align: middle;
  font-size: clamp(16px, 4.2vw, 32px);
  font-weight: 900;
}

@media screen and (min-width: 768px) {
  .bestnine {
    padding-block: 8.75vw 7vw;
  }
  .bestnine-ttl {
    margin-bottom: 20px;
  }
  .bestnine-date {
    margin-bottom: 40px;
  }

  .bestnine-members {
    aspect-ratio: 630 / 800;
  }
}


/* ----- ranking ----- */
.ranking {
  padding-bottom: 21.6vw;
}
.ranking-ttl {
  margin-bottom: 10px;
}
.ranking-ttl img {
  margin-inline: auto;
  display: block;
  width: min(55vw, 419px);
  aspect-ratio: 419 / 156;
}
.ranking-date {
  margin-bottom: 20px;
}

.rankingCard {
  position: relative;
  background-color: #fff;
  border-radius: 25px;
  overflow: hidden;
}
.rankingCard-img {
  display: block;
  aspect-ratio: 2 / 3;
}
.rankingCard-info {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 33%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}
.rankingCard-name {
  margin-bottom: 5px;
  display: block;
}
.rankingCard-vote {
  width: 100%;
  padding-inline: 8%;
  display: flex;
  align-items: center;
  gap: 4%;
  line-height: 2;
  font-family: "Roboto Condensed", "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(16px, calc(8px + 2.1333333333333333vw), 24px);
  font-weight: 600;
  color: #fff;
}
.rankingCard-vote-ttl {
  padding-inline: 12%;
  border-radius: calc(1px / 0);
}
.rankingCard-vote-num {
  letter-spacing: .1em;
}
.rankingCard-vote-num::after {
  content: '票';
}
@media screen and (min-width: 768px) {
  .ranking {
    margin-inline: auto;
    max-width: 1440px;
    padding-bottom: 7vw;
  }
  .ranking-ttl {
    margin-bottom: 20px;
  }
  .ranking-date {
    margin-bottom: 40px;
  }
}

/* --- medal --- */
.rankingCard[class*="_medal"]::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 2%;
  left: 4%;
  display: block;
  width: max(calc(106px / 2), 14vw);
  height: auto;
  aspect-ratio: 106 / 112;
  background: center / contain no-repeat;
}
/* 1 place */
.rankingCard._medal1::before {
  background-image: url(../img/vendor/nine/ranking-medal-1.webp);
}
/* 2 place */
.rankingCard._medal2::before {
  background-image: url(../img/vendor/nine/ranking-medal-2.webp);
}
/* 3 place */
.rankingCard._medal3::before {
  background-image: url(../img/vendor/nine/ranking-medal-3.webp);
}
@media screen and (min-width: 768px) {
  .rankingCard[class*="_medal"]::before {
    max-width: 106px;
  }
}

/* --- office --- */
.rankingCard._full .rankingCard-vote-ttl {
  background-color: #feacdf;
}
.rankingCard._hito .rankingCard-vote-ttl {
  background-color: #feea24;
}
.rankingCard._leoc .rankingCard-vote-ttl {
  background-color: #42c6ff;
}

/* --- member --- */
/* 倍率の変数 */
.rankingCard {
  --name--magnification: 1 / 1.8;
}
@media screen and (min-width: 768px) {
  .rankingCard {
    --name--magnification: 1 / 1.2;
  }
}
/* /倍率の変数 */
.rankingCard .rankingCard-name {
  width: calc(340px * var(--name--magnification));
  aspect-ratio: 340 / 155;
}
.rankingCard._member10 .rankingCard-name {
  width: calc(417px / var(--name--magnification));
  aspect-ratio: 417 / 168;
}