.top {
  position: relative;
  background: #000;
}

.top__fv {
  width: 100%;
  font-size: 0;
}
.top__fv img {
  width: 100%;
  height: auto;
}

.top__intro {
  position: relative;
  overflow: hidden;
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg, #000 0%, #8E6944 25%, #EED581 50%, #8E6944 75%, #000 100%) 1;
  background: #000;
  container-type: inline-size;
}
@media (min-width: 961px) {
  .top__intro {
    border-bottom: 5px solid transparent;
  }
}

.top__introBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(min(100cqw, 500px) * 763 / 390);
  overflow: hidden;
  pointer-events: none;
}
@media (min-width: 961px) {
  .top__introBg {
    inset: 0;
    height: auto;
  }
}
.top__introBg img {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(min(100cqw, 500px) * 1440 / 390);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}
@media (min-width: 961px) {
  .top__introBg img {
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
  }
}

.top__introStage {
  position: relative;
  width: min(100%, 500px);
  margin: 0 auto;
  padding: calc(min(100cqw, 500px) * 763 / 390) 0 0;
  container-type: inline-size;
}
@media (min-width: 961px) {
  .top__introStage {
    width: min(100%, 1440px);
    padding: 41.5277777778cqw 0 4.0277777778cqw;
  }
}

.top__introText {
  position: absolute;
  top: 19.2307692308cqw;
  left: 8.2051282051cqw;
  width: 84.358974359cqw;
  font-size: 0;
}
@media (min-width: 961px) {
  .top__introText {
    top: 10.9027777778cqw;
    left: 50%;
    width: 32.5cqw;
    transform: translateX(-50%);
  }
}
.top__introText img {
  width: 100%;
  height: auto;
}

.top__bubble {
  position: absolute;
  width: 55.6358974359cqw;
  height: 30.5692307692cqw;
}
@media (min-width: 961px) {
  .top__bubble {
    width: 25.2777777778cqw;
    height: 13.8888888889cqw;
  }
}
.top__bubble img {
  position: absolute;
  top: -3%;
  left: -1.65%;
  width: 106.6%;
  max-width: none;
}
.top__bubble--1 {
  top: 107.4358974359cqw;
  left: 3.3333333333cqw;
}
@media (min-width: 961px) {
  .top__bubble--1 {
    top: 4.6527777778cqw;
    left: 2.1527777778cqw;
  }
}
.top__bubble--2 {
  top: 149.4692307692cqw;
  left: 3.3333333333cqw;
}
@media (min-width: 961px) {
  .top__bubble--2 {
    top: 23.75cqw;
    left: 2.1527777778cqw;
  }
}
.top__bubble--3 {
  top: 127.9179487179cqw;
  left: 40.6282051282cqw;
  width: 55.5256410256cqw;
  height: 29.958974359cqw;
}
@media (min-width: 961px) {
  .top__bubble--3 {
    top: 13.9583333333cqw;
    left: 72.5256944444cqw;
    width: 25.2270833333cqw;
    height: 13.6111111111cqw;
  }
}

.top__mascot {
  position: absolute;
  z-index: 1;
  top: 166.7815384615cqw;
  left: 37.1923076923cqw;
  width: 25.6153846154cqw;
  height: 29.3723076923cqw;
  overflow: hidden;
  font-size: 0;
}
@media (min-width: 961px) {
  .top__mascot {
    top: 31.06cqw;
    left: 45.375cqw;
    width: 9.25cqw;
    height: 10.6066666667cqw;
  }
}
.top__mascot img {
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(0 0 8.5106382979% 0);
}

.top__schedule {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 147.6923076923cqw;
  padding: 3.0769230769cqw 4.1025641026cqw 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.top__schedule::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, #68320B 0%, #A55519 15%, #C1852A 33%, #DFB73C 51%, #DFB73C 55%, #A55519 84%, #A55519 87%, #74390D 97%, #68320B 100%) 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.16)), radial-gradient(50% 185% at 50% 50%, #E20600 0%, #AF0400 50%, #7C0300 100%);
  background-blend-mode: multiply, normal;
  box-shadow: 1px 1px 0 2px #000, 0 0 30px 0 #000;
  transform: translateX(-50%);
}
@media (min-width: 961px) {
  .top__schedule::before {
    width: 100%;
  }
}
@media (min-width: 961px) {
  .top__schedule {
    margin: 0 auto;
    width: 61.8055555556cqw;
    height: 25.3472222222cqw;
    padding: 1.1111111111cqw 1.1111111111cqw;
  }
}

.top__share {
  margin-top: 12.3076923077cqw;
  margin-bottom: 10.2564102564cqw;
  text-align: center;
}
@media (min-width: 961px) {
  .top__share {
    margin-top: 3.8888888889cqw;
    margin-bottom: 0;
  }
}
.top__ctaSchedule .top__share {
  margin-top: 8.2051282051cqw;
  margin-bottom: 0;
}
@media (min-width: 961px) {
  .top__ctaSchedule .top__share {
    margin-top: 3.8888888889cqw;
  }
}

.top__shareText {
  color: #FFF;
  text-align: center;
  -webkit-text-stroke-width: 4px;
  -webkit-text-stroke-color: #000;
  font-family: "Kazesawa", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: 0.16px;
  paint-order: stroke fill;
}
@media (min-width: 961px) {
  .top__shareText {
    font-size: 18px;
    line-height: 200%;
    letter-spacing: 0.18px;
  }
}

.top__shareBtn {
  display: block;
  max-width: 340px;
  margin: 8px auto 0;
  font-size: 0;
  width: 100%;
}
.top__shareBtn img {
  width: 100%;
  height: auto;
}
@media (min-width: 961px) {
  .top__shareBtn {
    margin: 8px auto 0;
  }
}

.top__scheduleTitle {
  color: #FAE452;
  text-align: center;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.25));
  -webkit-text-stroke-width: 4px;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  font-family: "Kazesawa", sans-serif;
  font-size: 4.6153846154cqw;
  font-weight: 700;
  font-style: normal;
  font-weight: 600;
  line-height: 200%; /* 40px */
  letter-spacing: 0.2px;
}
@media (min-width: 961px) {
  .top__scheduleTitle {
    -webkit-text-stroke-width: 3px;
    font-size: 1.3888888889cqw;
  }
}

.top__scheduleBoxes {
  display: flex;
  flex-direction: column;
  gap: 4.1025641026cqw;
  margin-top: 4.1025641026cqw;
}
@media (min-width: 961px) {
  .top__scheduleBoxes {
    flex-direction: row;
    gap: 1.1111111111cqw;
    margin-top: 1.1111111111cqw;
  }
}

.top__scheduleBox {
  overflow: hidden;
  height: 61.0256410256cqw;
  border-radius: 2.5641025641cqw;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
}
@media (min-width: 961px) {
  .top__scheduleBox {
    flex: 1;
    height: 18.6111111111cqw;
    border-radius: 0.6944444444cqw;
  }
}

.top__scheduleBoxTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 13.8461538462cqw;
  background: #000;
  color: #FFF;
  -webkit-text-stroke-width: 4px;
  -webkit-text-stroke-color: #000;
  paint-order: stroke fill;
  font-family: "Kazesawa", sans-serif;
  font-size: 4.1025641026cqw;
  font-weight: 700;
  line-height: 2;
  text-align: center;
  letter-spacing: 0.01em;
}
@media (min-width: 961px) {
  .top__scheduleBoxTitle {
    -webkit-text-stroke-width: 3px;
    height: 4.4444444444cqw;
    font-size: 1.25cqw;
  }
}
.top__scheduleBox--selection .top__scheduleBoxTitle {
  background: #BD0000;
}

.top__scheduleList {
  display: flex;
  flex-direction: column;
  gap: 4.1025641026cqw;
  padding: 6.1538461538cqw 0 0;
}
@media (min-width: 961px) {
  .top__scheduleList {
    gap: 1.6666666667cqw;
    padding: 1.6666666667cqw 0 0;
  }
}

.top__scheduleItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.0512820513cqw;
}
@media (min-width: 961px) {
  .top__scheduleItem {
    gap: 0.5555555556cqw;
  }
}

.top__scheduleLabel {
  --tip: 3.5897435897cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 87.1794871795cqw;
  height: 7.1794871795cqw;
  background-color: #000;
  clip-path: polygon(0 50%, var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%);
  font-family: "Kazesawa", sans-serif;
  font-size: 3.5897435897cqw;
  font-weight: 700;
  line-height: 1;
}
@media (min-width: 961px) {
  .top__scheduleLabel {
    --tip: 0.9722222222cqw;
    width: 23.6111111111cqw;
    height: 1.9444444444cqw;
    font-size: 0.9722222222cqw;
  }
}
.top__scheduleLabel span {
  background: linear-gradient(0deg, #E2BF53 20.588%, #FEF378 76.471%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.top__scheduleDate {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #FFF;
  white-space: nowrap;
  paint-order: stroke fill;
  filter: drop-shadow(2px 2px 0 #000);
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #000;
}

.top__scheduleTime {
  font-family: "Roboto", sans-serif;
  font-size: 6.1538461538cqw;
  font-weight: 600;
  line-height: 100%;
}
@media (min-width: 961px) {
  .top__scheduleTime {
    font-size: 1.9444444444cqw;
  }
}

.top__scheduleWeek {
  font-family: "Kazesawa", sans-serif;
  font-size: 2.8205128205cqw;
  font-style: normal;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: -1.12px;
  padding-left: 2px;
  position: relative;
  top: -0.1282051282cqw;
}
@media (min-width: 961px) {
  .top__scheduleWeek {
    font-size: 0.9722222222cqw;
    letter-spacing: -1.4px;
    top: -0.1388888889cqw;
  }
}

.top__scheduleTilde {
  font-family: "Kazesawa", sans-serif;
  font-size: 4.9230769231cqw;
  font-weight: 700;
  line-height: 100%;
}
@media (min-width: 961px) {
  .top__scheduleTilde {
    font-size: 1.6666666667cqw;
  }
}

.top__anchor {
  padding: 32px 16px;
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg, #8E6944 0%, #EED581 50%, #8E6944 100%) 1;
  background: #000;
}
@media (min-width: 961px) {
  .top__anchor {
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 0;
  }
}

.top__anchorList {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0;
}
@media (min-width: 961px) {
  .top__anchorList {
    flex-direction: row;
    gap: 80px;
  }
}

.top__anchorLink {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FFF;
  font-family: "Kazesawa", sans-serif;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
@media (min-width: 961px) {
  .top__anchorLink {
    font-size: 20px;
  }
}
@media (hover: hover) {
  .top__anchorLink {
    transition: opacity 0.3s;
  }
  .top__anchorLink:hover {
    opacity: 0.7;
  }
}
.top__anchorLink img {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
@media (min-width: 961px) {
  .top__anchorLink img {
    width: 24px;
    height: 24px;
  }
}

.top__anchorLink--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.top__selection {
  overflow-x: clip;
  padding: 56px 0 0;
  background: #1A1A1A url("../images/top/selection_bg.jpg") center top/1440px auto repeat;
}
@media (min-width: 961px) {
  .top__selection {
    padding-top: 96px;
  }
}

.top__selectionGroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 0 10px;
  scroll-margin-top: 40px;
}
@media (min-width: 961px) {
  .top__selectionGroup {
    gap: 56px;
    padding: 0 16px;
  }
}
.top__selectionGroup + .top__selectionGroup {
  margin-top: 48px;
}
@media (min-width: 961px) {
  .top__selectionGroup + .top__selectionGroup {
    margin-top: 72px;
  }
}

.top__selectionTitle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 357px;
  height: 99px;
}
@media (min-width: 961px) {
  .top__selectionTitle {
    max-width: 673px;
    height: 106px;
  }
}
.top__selectionTitle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 206px;
  height: 64px;
}
@media (min-width: 961px) {
  .top__selectionTitle::before {
    width: 388px;
    height: 85px;
  }
}
.top__selectionTitle::before {
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  filter: blur(37px);
  transform: translate(-50%, -50%);
}
.top__selectionTitle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
@media (min-width: 961px) {
  .top__selectionTitle::after {
    border-top-width: 5px;
    border-bottom-width: 5px;
  }
}
.top__selectionTitle::after {
  border-image: linear-gradient(90deg, #000 0%, #AB8D60 22%, #FCEFD6 49%, #C9B18B 66%, #AB8D60 77%, #967C54 84%, #5B4B33 92%, #000 100%) 1;
  mix-blend-mode: screen;
  pointer-events: none;
}
.top__selectionTitle picture {
  position: relative;
  font-size: 0;
}
.top__selectionTitle picture img {
  width: 243.5px;
  height: auto;
}
@media (min-width: 961px) {
  .top__selectionTitle picture img {
    width: 496.7px;
  }
}

.top__selectionKira {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.top__selectionKira img {
  position: absolute;
  mix-blend-mode: screen;
  transform: rotate(45deg);
}
.top__selectionKira img:nth-child(1) {
  top: -90px;
  left: -69px;
  width: 184px;
}
@media (min-width: 961px) {
  .top__selectionKira img:nth-child(1) {
    top: -120px;
    left: -124px;
    width: 245px;
  }
}
.top__selectionKira img:nth-child(2) {
  top: 21px;
  left: 259px;
  width: 152px;
}
@media (min-width: 961px) {
  .top__selectionKira img:nth-child(2) {
    top: 3px;
    right: -103px;
    left: auto;
    width: 203px;
  }
}

.top__players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  justify-content: center;
  gap: 32px 10px;
  width: 100%;
  padding: 0 0 56px;
}
@media (min-width: 961px) {
  .top__players {
    grid-template-columns: repeat(3, minmax(0, 340px));
    gap: 50px min(50px, 3.5vw);
  }
}

.top__player {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.top__player--disabled {
  pointer-events: none;
}
.top__player--disabled .top__playerBtns {
  filter: grayscale(1);
  opacity: 0.5;
}

.top__playerVisual {
  position: relative;
  width: 94.4444444444%;
}
@media (min-width: 961px) {
  .top__playerVisual {
    width: 100%;
  }
}
.top__playerVisual {
  aspect-ratio: 340/402.85;
}
.top__playerVisual img {
  position: absolute;
  top: -5.9575524389%;
  left: -7.0588235294%;
  width: 114.1176470588%;
  max-width: none;
  height: auto;
}

.top__playerBtns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}
@media (min-width: 961px) {
  .top__playerBtns {
    gap: 16px;
    margin-top: 33px;
  }
}

.top__playerPredict,
.top__playerMore {
  position: relative;
  display: block;
  width: 100%;
}
.top__playerPredict img,
.top__playerMore img {
  position: absolute;
  max-width: none;
  height: auto;
}

.top__playerPredict {
  aspect-ratio: 180/60;
}
.top__playerPredict img {
  top: -54.1666666667%;
  left: -5.8333333333%;
  width: auto;
  height: 206.6666666667%;
}
.top__playerPredict {
  width: calc(100% - 5px);
  margin: 4px auto 0;
}
@media (min-width: 961px) {
  .top__playerPredict {
    aspect-ratio: 340/90;
  }
  .top__playerPredict img {
    top: -35.5555555556%;
    left: -9.4117647059%;
    width: auto;
    height: 171.1111111111%;
  }
  .top__playerPredict {
    width: 100%;
    margin: 0;
  }
}
@media (hover: hover) {
  .top__playerPredict {
    transition: filter 0.3s;
  }
  .top__playerPredict:hover {
    filter: brightness(1.15);
  }
}

.top__playerMore {
  aspect-ratio: 180/48;
}
.top__playerMore img {
  top: -62.5%;
  left: -16.6666666667%;
  width: auto;
  height: 225%;
}
@media (min-width: 961px) {
  .top__playerMore {
    aspect-ratio: 340/48;
  }
  .top__playerMore img {
    top: -62.5%;
    left: -8.8235294118%;
    width: auto;
    height: 225%;
  }
}
@media (hover: hover) {
  .top__playerMore {
    transition: opacity 0.3s;
  }
  .top__playerMore:hover {
    opacity: 0.8;
  }
}

.top__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 16px;
  background: linear-gradient(180deg, #27292B 20%, #000 100%);
}
@media (min-width: 961px) {
  .top__cta {
    gap: 32px;
    padding: 40px 16px;
  }
}
.top__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 4px 50px 0 #000;
  pointer-events: none;
}

.top__ctaInfo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
@media (min-width: 961px) {
  .top__ctaInfo {
    gap: 16px;
  }
}

.top__ctaBand {
  width: 100%;
  max-width: 369px;
  font-size: 0;
}
@media (min-width: 961px) {
  .top__ctaBand {
    max-width: 811px;
  }
}
.top__ctaBand img {
  width: 100%;
  height: auto;
}

.top__ctaLead {
  width: 100%;
  max-width: 366px;
  font-size: 0;
}
@media (min-width: 961px) {
  .top__ctaLead {
    max-width: 700px;
  }
}
.top__ctaLead img {
  width: 100%;
  height: auto;
}

.top__ctaSchedule {
  position: relative;
  width: min(100% + 32px, 500px);
  container-type: inline-size;
}
@media (min-width: 961px) {
  .top__ctaSchedule {
    width: min(100% + 32px, 1440px);
  }
}

@media (min-width: 961px) {
  .top__schedule--cta {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto;
  }
}