@charset "utf-8";

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #141414;
  font-size: 1.6rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  color: #fff;
}

a {
  text-decoration: none;
  color: inherit;
}

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

/* ----------
common
---------- */
@media screen and (768px <= width) {
  .__s {
    display: none;
  }
}
@media screen and (width < 768px) {
  .__l {
    display: none;
  }
}

.btn {
  position: relative;
  display: block;
  width: 210px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
}
.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8%;
  translate: 0 -50%;
  display: block;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  rotate: 45deg;
  transition: right 0.3s;
}
@media (hover: hover) {
  .btn:hover::after {
    right: 5%;
  }
}

/* ----------
mv & lead
---------- */
.mv {
  /* aspect-ratio: 750 / 1336; */
  /* aspect-ratio: 1080 / 1080; */
  aspect-ratio: 800 / 1422;
}
@media screen and (768px <= width) {
  .mv {
    /* aspect-ratio: 1921 / 1081; */
    aspect-ratio: 1920 / 1080;
  }
}

.lead {
  padding-block: min(16vw, 120px);
  /* background: center/cover url(../img/lead-bg.webp); */
  /* background: rgb(20, 20, 20);
  background: linear-gradient(0deg, rgba(20, 20, 20, 1) 0%, rgba(0, 0, 0, 1) 100%); */
  background: top/100% url(../img/history-bg.webp);
}
.lead-ttl {
  margin-inline: auto;
  /* width: min(63.9vw, 479px); */
  width: min(86.4vw, 648px);
}
.lead-ttl img {
  /* aspect-ratio: 479 / 253; */
  aspect-ratio: 648 / 313;
}

/* ----------
ticketBtn
---------- */
.ticketBtn {
  position: fixed;
  bottom: 10px;
  right: 0;
  z-index: 10;
  width: 100px;
  height: 80px;
  padding-left: 10px;
  background: rgb(0, 98, 152);
  background: linear-gradient(90deg, rgba(0, 98, 152, 1) 0%, rgba(0, 156, 219, 1) 100%);
  border: clamp(1px, 0.27vw, 2px) solid #fff;
  border-right: none;
  border-radius: calc(1px / 0) 0 0 calc(1px / 0);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.25;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  translate: calc(100% + 10px) 0;
  transition: translate 0.5s, padding-right 0.3s, width 0.3s;
}
.ticketBtn.is-scrolled {
  translate: 0 0;
}
@media (hover: hover) {
  .ticketBtn:hover {
    width: 230px;
    padding-right: 50px;
  }
}
@media screen and (768px <= width) {
  .ticketBtn {
    bottom: 40px;
    width: 180px;
    height: 100px;
    font-size: 2.4rem;
  }
}
/* soldout */
.ticketBtn._soldout {
  overflow: hidden;
  pointer-events: none;
  border: none;
}
.ticketBtn._soldout::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 0.7);
}
.ticketBtn._soldout::after {
  content: '完売';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -40% -50%;
  font-size: 1.5em;
  font-weight: 900;
}

/* ----------
scrollUp
---------- */
.scrollUp {
  position: fixed;
  z-index: 10;
  bottom: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  background: linear-gradient(90deg, rgba(0, 98, 152, 1) 0%, rgba(0, 156, 219, 1) 100%);
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.scrollUp::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  rotate: 45deg;
  translate: 0 20%;
}
.scrollUp.is-scrolled {
  opacity: 1;
}

/* ----------
ranking
---------- */
.ranking {
  /* padding: min(10.7vw, 80px) min(4%, 30px) min(16vw, 120px); */
  padding: min(16vw, 120px) min(4%, 30px);
  overflow: hidden;
}
.ranking-inner {
  margin-inline: auto;
  /* max-width: calc(750px - 30px * 2); */
  max-width: 1000px;
}
.ranking-ttl {
  margin: 0 auto min(2.7vw, 20px);
  width: min(55.7vw, 418px);
}
.ranking-ttl img {
  aspect-ratio: 418 / 105;
}
.ranking-update {
  margin-bottom: min(5.3vw, 40px);
  text-align: center;
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  font-weight: 300;
  color: rgb(255 255 255 / 0.2);
}
.ranking-update:after {
  content: '更新';
  padding-inline-start: 0.2em;
}
.ranking-cd {
  margin-block: min(5.3vw, 40px) min(4vw, 30px);
  padding: min(8vw, 60px) min(5.3vw, 40px);
  border: clamp(1px, 0.27vw, 2px) solid rgb(255 255 255 / 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ranking-cdTxt {
  font-size: clamp(1.8rem, 4.8vw, 3.2rem);
}
.ranking-cdRight {
  display: flex;
  align-items: center;
}
.ranking-cdNum {
  padding-inline-start: 0.2em;
  /* font-family: 'Roboto', sans-serif; */
  font-family: 'Helvetica Neue', sans-serif;
  font-size: clamp(4.6rem, 12.3vw, 9.2rem);
  font-weight: 700;
  color: #009cdb;
}
.ranking-cdWin {
  width: min(8.1vw, 61px);
  aspect-ratio: 61 / 67;
}
.ranking-btn {
  margin-inline: auto;
  width: 270px;
  background: rgb(0, 98, 152);
  background: linear-gradient(90deg, rgba(0, 98, 152, 1) 0%, rgba(0, 156, 219, 1) 100%);
}

.ranking-tb {
  margin: 0 auto min(8vw, 60px);
  width: 100%;
  max-width: 690px;
  border-collapse: separate;
  border: min(0.27vw, 3px) solid rgb(255 255 255 / 0.2);
  line-height: 1.5;
  text-align: center;
}
.ranking-tb thead {
  font-size: clamp(1.2rem, 3.2vw, 2.4rem);
}
.ranking-tb tbody {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(1.4rem, 3.7vw, 2.6rem);
  font-weight: 500;
}
.ranking-tb th {
  width: 11%;
  background-color: #4e4e4e;
  vertical-align: middle;
}
.ranking-tb td {
  vertical-align: middle;
}
.ranking-tb td:not(:nth-of-type(1)) {
  width: 11%;
}
.ranking-tb thead tr > * {
  padding-block: 0.8em;
}
.ranking-tb tbody td {
  border-top: 0.4em solid #141414;
  border-bottom: 0.4em solid #141414;
}
.ranking-tb td:nth-of-type(1) img {
  margin: 0.1em auto;
  width: min(9vw, 80px);
  aspect-ratio: 1 / 1;
}
.ranking-tb-line {
  position: relative;
  padding-block: 0.3em;
}
.ranking-tb-line::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: block;
  width: 100%;
  height: 1px;
  border-top: min(0.27vw, 3px) dashed #fff;
}
.ranking-tb-line::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -0.5em;
  left: 0;
  display: block;
  width: 11%;
  height: calc(100% + (0.5em * 2));
  background-color: #4e4e4e;
}
.ranking-tb-line span {
  position: relative;
  z-index: 2;
  display: inline-block;
  width: 35%;
  padding-inline: 0.5em;
  background-color: #141414;
}
.ranking-tb ._fighters th {
  background-color: #116ea0;
  border-top: 0.4em solid #4e4e4e;
  border-bottom: 0.4em solid #4e4e4e;
}
.ranking-tb ._fighters td {
  background-color: #006298;
}

.ranking-band {
  margin-block-end: min(4vw, 30px);
}
.ranking-txt {
  text-align: center;
  line-height: 1.5;
  font-size: clamp(1.8rem, 4.8vw, 2.4rem);
  font-weight: 700;
}
.ranking-txt ._strong {
  font-size: 1.5em;
}
.ranking-logo {
  margin: 1em auto;
  width: min(70%, 300px);
  aspect-ratio: 500 / 191;
}

.ranking-bnrWrap {
  margin: 0 auto;
  /* max-width: 1000px; */
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (768px <= width) {
  .ranking-bnrWrap {
    flex-direction: row;
    justify-content: center;
  }
}
.ranking-bnr {
  box-shadow: 0 0 5px 2px rgb(255 255 255 / 0.5);
}
@media (hover: hover) {
  .ranking-bnr {
    position: relative;
    overflow: hidden;
  }
  .ranking-bnr::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    background-color: rgb(255 255 255 / 0.1);
    width: 130%;
    height: 100%;
    transform: skewX(25deg);
  }
  .ranking-bnr:hover::before {
    animation: skewanime 0.4s forwards;
  }
  @keyframes skewanime {
    100% {
      left: -15%;
    }
  }
}
@media screen and (768px <= width) {
  .ranking-bnr {
    max-width: 600px;
  }
}

.ranking-bnr._closed {
  position: relative;
  pointer-events: none;
}
.ranking-bnr._closed::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 0.7);
  transform: none;
}
.ranking-bnr._closed::after {
  content: '終了しました';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.6rem;
  font-weight: 900;
  font-style: italic;
}

.ranking-bnr._goods {
  margin: 0 auto;
  display: block;
}

.ranking-cd_advanced {
  margin: 0 auto min(8vw, 60px);
  /* width: min(52.8vw, 396px); */
  width: min(85.6vw, 642px);
}
.ranking-cd_advanced img {
  /* aspect-ratio: 396 / 99; */
  aspect-ratio: 642 / 89;
}

/* ----------
history
---------- */
.history {
  padding: min(12vw, 90px) min(4%, 30px) min(21.3vw, 160px);
  background: top/100% url(../img/history-bg.webp);
}
.history-inner {
  margin-inline: auto;
  /* max-width: calc(750px - 30px * 2); */
  max-width: 800px;
}
.history-ttl {
  margin: 0 auto min(5.3vw, 40px);
  width: min(74.8vw, 561px);
}
.history-ttl img {
  /* aspect-ratio: 610 / 102; */
  aspect-ratio: 561 / 105;
}
.history-start {
  margin-inline: auto;
  width: min(39.2vw, 294px);
}
.history-start img {
  aspect-ratio: 294 / 107;
}

/* historyCard */
.historyCard {
  position: relative;
  width: 100%;
  padding-block: min(10.7vw, 80px) min(12vw, 90px);
}
.historyCard::before {
  content: '';
  position: absolute;
  top: calc(min(10.7vw, 80px) + min(36vw, 270px));
  display: block;
  width: calc(100% - min(81.3vw, 610px));
  height: calc(100% - (min(10.7vw, 80px) + min(36vw, 270px)) - min(5.3vw, 40px));
  border-top: clamp(3px, 0.8vw, 6px) solid #fff;
}
.historyCard::after {
  content: '';
  position: absolute;
  bottom: 0;
  display: block;
  width: 50%;
  height: min(5.3vw, 40px);
  border-top: clamp(3px, 0.8vw, 6px) solid #fff;
}
.historyCard-contents {
  position: relative;
  width: min(81.3vw, 610px);
  padding: min(8vw, 60px) min(4vw, 30px) min(2.7vw, 20px);
  border: clamp(1px, 0.27vw, 2px) solid #fff;
  border-top: none;
}
.historyCard-contents::before,
.historyCard-contents::after {
  content: '';
  position: absolute;
  top: 0;
  display: block;
  height: clamp(1px, 0.27vw, 2px);
  background-color: #fff;
}
.historyCard-contents::before {
  left: 0;
  width: 3.2%;
}
.historyCard-contents::after {
  right: 0;
  width: 38.7%;
}
.historyCard-day {
  position: absolute;
  z-index: 1;
  top: calc(-1 * min(8.4vw, 63px) / 2);
  left: min(4vw, 30px);
  width: auto;
  height: min(8.4vw, 63px);
}
.historyCard-img {
  margin-bottom: min(2.7vw, 20px);
}
.historyCard-opponent {
  margin-bottom: min(1.3vw, 10px);
  line-height: 1.5;
  font-size: clamp(1.6rem, 4.2vw, 3.2rem);
  font-weight: 400;
}
.historyCard-txt {
  line-height: 1.75;
  font-size: clamp(1.2rem, 3.2vw, 2.4rem);
  font-weight: 300;
}
/* _first */
.historyCard:first-of-type {
  padding-top: min(8vw, 60px);
}
/* _odd */
.historyCard:nth-of-type(odd)::before {
  right: 0;
  border-right: clamp(3px, 0.8vw, 6px) solid #fff;
}
.historyCard:nth-of-type(odd)::after {
  right: 0;
  border-left: clamp(3px, 0.8vw, 6px) solid #fff;
}
/* _even */
.historyCard:nth-of-type(even)::before {
  left: 0;
  border-left: clamp(3px, 0.8vw, 6px) solid #fff;
}
.historyCard:nth-of-type(even)::after {
  left: 0;
  border-right: clamp(3px, 0.8vw, 6px) solid #fff;
}
.historyCard:nth-of-type(even) .historyCard-contents {
  margin-left: auto;
}

.history-next {
  margin: min(2.7vw, 20px) auto min(10.7vw, 80px);
  width: min(62.9vw, 472px);
}
.history-next img {
  aspect-ratio: 472 / 52;
}
.history-btn {
  margin-inline: auto;
  background: rgb(0, 0, 0);
  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(39, 39, 39, 1) 100%);
}

.history-txt {
  line-height: 1.5;
  text-align: center;
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
  font-style: italic;
  font-weight: 700;
}

.history-movie iframe {
  margin: min(5.3vw, 40px) auto 0;
  box-shadow: 0 0 5px 2px rgb(255 255 255 / 0.5);
}
.history-movie iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ----------
sponsor
---------- */
.sponsor {
  padding: min(10.7vw, 80px) min(4vw, 30px) min(16vw, 120px);
  background-color: #fff;
}
.sponsor-ttl {
  margin: 0 auto min(4vw, 30px);
  width: min(58.5vw, 439px);
}
.sponsor-ttl img {
  aspect-ratio: 439 / 102;
}

.sponsor-list {
  margin-inline: auto;
  max-width: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 10px;
}
.sponsor-list > li {
  width: calc(50% - 10px / 2);
  max-width: calc((1000px - 20px * 3) / 4);
}
@media (hover: hover) {
  .sponsorCard > a:hover {
    opacity: 0.8;
  }
}
.sponsorCard-logo {
  aspect-ratio: 800 / 400;
}
.sponsorCard-name {
  text-align: center;
  line-height: 1.25;
  font-size: clamp(1.2rem, 1.8vw, 1.3rem);
  color: #141414;
}
.sponsorCard-name._fsS {
  font-size: clamp(1rem, 2.7vw, 1.1rem);
}
@media screen and (768px <= width) {
  .sponsor-list {
    gap: 20px;
  }
}

/* ----------
footer
---------- */
.useful {
  padding: 40px 15px 80px;
  /* background: top/100% url(../img/history-bg.webp); */
}
.useful-ttl {
  margin: 0 auto 40px;
  width: calc(635px / 2);
}
.useful-ttl img {
  aspect-ratio: 635 / 106;
}
.useful-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.useful-item {
  position: relative;
  width: 160px;
  height: auto;
  aspect-ratio: 160 / 50;
  /* border: 1px solid #0291df; */
  /* border-radius: calc(1px / 0); */
  /* box-shadow: 2px 2px 5px 2px rgb(0 0 0 / 0.12); */
  /* background-color: #fff; */
  background: rgb(0, 98, 152);
  background: linear-gradient(90deg, rgba(0, 98, 152, 1) 0%, rgba(0, 156, 219, 1) 100%);
  cursor: pointer;
}
.useful-item::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  translate: 0 -50%;
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  rotate: 45deg;
  transition: right 0.3s;
}
.useful-item a {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  line-height: 1.25;
  font-size: 1.3rem;
  font-weight: 400;
}
@media (hover: hover) {
  .useful-item:hover:after {
    right: 10px;
  }
}

@media screen and (768px <= width) {
  .useful {
    padding-block: 60px 100px;
  }
  .useful-inner {
    margin-inline: auto;
    max-width: 1000px;
  }
  .useful-ttl {
    margin: 0 auto 40px;
    width: calc(635px / 1.5);
  }
  .useful-item {
    width: calc((100% - 15px * 3) / 4);
    aspect-ratio: auto;
  }
  .useful-item a {
    font-size: 1.6rem;
  }
}

.footer {
  width: 100%;
  padding: 25px 20px 10px;
  background-color: #000;
  background: top/100% url(../img/footer-bg.webp);
}
.footer-inner {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
.footer-logo {
  display: block;
  width: 50%;
  min-width: 200px;
  max-width: 300px;
}
@media (hover: hover) {
  .footer-logo:hover {
    opacity: 0.7;
  }
}
.footer-share h2 {
  margin-bottom: 10px;
  text-align: center;
  font-family: 'Teko', sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
  color: #fff;
}
.footer-share ul {
  display: flex;
  justify-content: center;
  gap: 30px;
}
.footer-share ul li {
  width: 44px;
  height: 44px;
}
.footer-share ul li a {
  display: block;
}
.footer-share ul li._x a {
  padding: 3px;
}
@media (hover: hover) {
  .footer-share ul li a {
    transition: transform 0.3s;
  }
  .footer-share ul li a:hover {
    transform: scale(1.2);
  }
}
.footer-copyright {
  display: block;
  width: 100%;
  line-height: 1.5;
  text-align: center;
  font-size: 1rem;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .footer {
    margin-bottom: 0;
  }
  .footer-share {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  .footer-share h2 {
    padding-top: 15px;
  }
  .footer-share ul {
    gap: 10px;
  }
  .footer-copyright {
    font-size: 1.4rem;
  }
}