/* トップページ(募集中あり版)。PCは絶対y座標からヘッダー分(94px)を引いた値で配置 */

.p-top {
  background: var(--color-blue);
  /* 1440px超の装飾を裁ち落とす。hiddenだとbodyがスクロールコンテナ化するためclipを使用 */
  overflow-x: clip;
}

.p-top section {
  position: relative;
}

.p-top__hero {
  aspect-ratio: 16 / 9;
  background: var(--color-black);
}

/* ヒーロー */
.p-top__hero video,
.p-top__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-top__hero video {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.p-top__hero.is-video-ready video {
  opacity: 1;
}

.p-top__hero-banner {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184, 28, 43, 0.7);
  color: var(--color-white);
  font-family: var(--font-en);
  line-height: normal;
  letter-spacing: 2px;
  white-space: nowrap;
}

/* 放送日程テキストの文字詰め */
.p-top__hero-banner .-num {
  font-size: 50px;
}

.p-top__hero-banner .-num-tight {
  font-size: 50px;
  letter-spacing: -17.5px;
}

.p-top__hero-banner .-jp {
  font-size: 38px;
}

.p-top__hero-banner .-jp-tight {
  font-size: 38px;
  letter-spacing: -17.76px;
}

/* 募集中バナー */
.p-top__participants {
  background-color: var(--color-red);
  background-image: url(../img/common_texture_red.webp);
  background-size: cover;
}

.p-top__participants-box {
  display: flex;
  align-items: center;
  background: var(--color-blue);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.p-top__participants-label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-red);
  color: var(--color-white);
  font-size: 24px;
  line-height: normal;
}

.p-top__participants-text {
  color: var(--color-yellow);
  font-size: 24px;
  line-height: normal;
}


/* PLAYERS */
.p-top__players {
  background: linear-gradient(to bottom, var(--color-blue), var(--color-red));
  overflow-x: clip;
  /* 選手サムネの画面外はみ出しを裁ち落とし(yはvisibleのまま) */
}

.p-top__players-ghost {
  position: absolute;
  font-family: var(--font-en);
  color: rgba(255, 255, 255, 0.3);
  line-height: 0.8;
}

.p-top__players-ghost-kern {
  margin-right: 0.05em;
}

.p-top__players-name {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-white);
}

.p-top__players-copy {
  font-weight: 700;
}

.p-top__players-name-main {
  font-weight: 900;
}

/* Noto Sans JP Black */
.p-top__players-name-en {
  font-weight: 700;
}

.p-top__players-carousel {
  position: absolute;
  left: 0;
  width: 100%;
}

.p-top__players-carousel .swiper-wrapper {
  align-items: flex-end;
}

.p-top__players-carousel .swiper-slide {
  --players-image-x: var(--players-image-x-pc, 0px);
  flex-shrink: 0;
  transform-origin: 50% 100%;
  opacity: 0.85;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.p-top__players-carousel .swiper-slide picture,
.p-top__players-carousel .swiper-slide img {
  display: block;
}

.p-top__players-carousel .swiper-slide picture {
  height: 100%;
}

.p-top__players-carousel .swiper-slide img {
  width: auto;
  height: 100%;
  transform: translateX(var(--players-image-x, 0));
}


.p-top__players-carousel .swiper-slide-active {
  opacity: 1;
  z-index: 2;
  transform: scale(var(--players-slide-scale, 2));
}

.p-top__players-carousel .swiper-wrapper.is-jumping .swiper-slide {
  transition: none !important;
}

/* 下端を透過グラデーションで覆い、選手の下半身をうっすら隠す */
.p-top__players-carousel::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(to bottom, rgba(184, 28, 43, 0), rgba(184, 28, 43, 1));
  pointer-events: none;
  z-index: 3;
}

/* 矢印。両端をボタンとして独立配置 */
.p-top__players-arrows {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.p-top__players-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 20px;
  margin: -20px;
}

.p-top__players-arrow img {
  width: 29px;
  height: 45px;
}

.p-top__players-arrow--next img {
  transform: rotate(180deg);
}

.p-top__players-fade {
  position: absolute;
  left: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(184, 28, 43, 0), var(--color-red) 85%);
  pointer-events: none;
}

/* NEWS & TOPICS */
.p-top__news {
  overflow-x: clip;
}

.p-top__news-grad {
  position: absolute;
  left: 0;
  width: 100%;
    background: linear-gradient(to bottom, var(--color-red), rgb(184 28 43));
  pointer-events: none;
}

.p-top__news-texture {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: var(--color-red);
  background-image: url(../img/common_texture_red.webp);
  background-size: cover;
  pointer-events: none;
}

/* STAGE GUIDE */
.p-top__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 48px;
  background: url(../img/top_stage.jpg) center / cover no-repeat;
  gap: 24px;
}

/* GOODS */
.p-top__goods {
  background: var(--color-red);
}

.p-top__goods-panel {
  width: 100%;
  background: var(--color-blue);
}

.p-top__goods-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.p-top__goods-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.c-goods-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  color: var(--color-white);
  text-align: center;
}

.c-goods-card__thumb {
  width: 100%;
  height: 344px;
  background: var(--color-placeholder);
  aspect-ratio: 90 / 120;
}

.c-goods-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-goods-card__title {
  font-size: 16px;
  line-height: 1.5;
}

.c-goods-card__price {
  font-size: 14px;
  line-height: 1.5;
}

.p-top__goods-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-top__goods-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.p-top__goods-note {
  color: var(--color-white);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

/* 外部バナー */
.p-top__banner {
  background: var(--color-blue);
}

.p-top__banner-link {
  display: block;
}

.p-top__banner-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 991.98px) {

  .p-top__hero-banner {
    left: 45px;
    bottom: 60px;
    width: 611px;
    height: 114px;
    padding: 20px 40px;
  }

  .p-top__participants {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
  }

  .p-top__participants-box {
    width: min(100% - 30px, 1266px);
    height: 138px;
    padding-inline: 32px;
  }

  .p-top__participants-label {
    width: 133px;
    height: 61px;
  }

  .p-top__participants-text {
    margin-left: 19px;
    margin-top: 7px;
  }

  .p-top__participants-btn {
    margin-left: auto;
  }

  .p-top__kv>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .p-top__kv-btn-wc {
    position: absolute;
    top: calc(100% + 38px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }

  .p-top__players {
    height: 1230px;
    padding-top: 220px;
  }

  .p-top__players-heading {
    position: relative;
    left: -3px;
    /* 中央よりわずかに左(光学調整) */
  }

  .p-top__players-ghost {
    left: var(--players-ghost-left, calc(50% - 531px));
    top: var(--players-ghost-top, 366px);
    width: var(--players-ghost-width, 628px);
    font-size: var(--players-ghost-size, 145px);
    line-height: var(--players-ghost-line-height, 0.8);
    transform: var(--players-ghost-transform, none);
  }

  .p-top__players-name {
    --players-name-scale: clamp(0.6889, calc(100vw / 1440px), 1);
    left: calc(50% + 125px + var(--players-name-offset-x, 0px));
    top: calc(410px + var(--players-name-offset-y, 0px));
    width: var(--players-name-width, 428px);
    transform: scale(var(--players-name-responsive-scale, 1));
    transform-origin: left bottom;
  }

  .p-top__players-copy {
    font-size: 36px;
    line-height: 48px;
    white-space: nowrap;
  }

  .p-top__players-name-main {
    font-size: var(--players-name-size, 70px);
    line-height: 92px;
    letter-spacing: var(--players-name-letter-spacing, normal);
    font-feature-settings: var(--players-name-font-feature, normal);
  }

  .p-top__players-name-en {
    font-size: 32px;
    line-height: 30px;
  }

  .p-top__players-carousel {
    top: 325px;
    height: 655px;
  }

  .p-top__players-carousel .swiper-slide {
    width: fit-content;
    height: 326px;
  }

  .p-top__players-carousel .swiper-slide:not(.swiper-slide-active) {
    transform: scale(0.88);
  }

  .p-top__players-carousel .swiper-slide-next+.swiper-slide {
    transform: translateX(-150px) scale(0.88);
  }

  .p-top__players-carousel .swiper-slide-next+.swiper-slide+.swiper-slide {
    transform: translateX(-300px) scale(0.88);
  }

  .p-top__players-carousel .swiper-slide-next+.swiper-slide+.swiper-slide+.swiper-slide {
    transform: translateX(-450px) scale(0.88);
  }

  .p-top__players-carousel .swiper-slide:has(+ .swiper-slide-prev) {
    transform: translateX(150px) scale(0.88);
  }

  .p-top__players-carousel .swiper-slide:has(+ .swiper-slide + .swiper-slide-prev) {
    transform: translateX(300px) scale(0.88);
  }

  .p-top__players-carousel .swiper-slide:has(+ .swiper-slide + .swiper-slide + .swiper-slide-prev) {
    transform: translateX(450px) scale(0.88);
  }

  .p-top__players-carousel .swiper-slide-active {
    --players-slide-scale: 2.008;
  }

  .p-top__players-arrows {
    left: max(20px, calc(50% - 614px));
    top: 644px;
    width: min(calc(100% - 40px), 1226px);
    height: 46px;
  }

  .p-top__players-btn-spec {
    position: absolute;
    z-index: 4;
    left: calc(50% + 275px);
    transform: translateX(-50%);
    top: 645px;
  }

  .p-top__players-fade {
    top: 808px;
    height: 210px;
  }

  .p-top__players-btn-list {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 980px;
    z-index: 1;
  }

  .p-top__news {
    height: 542px;
  }

  .p-top__news-grad {
    top: -214px;
    height: 675px;
  }

  .p-top__news-texture {
    top: -13px;
    height: 568px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 120px);
    mask-image: linear-gradient(to bottom, transparent, #000 120px);
  }

  .p-top__news-heading {
    position: relative;
    top: -64px;
  }

  .p-top__news-heading .c-heading__text {
    position: relative;
    left: -1px;
  }

  .p-top__news-carousel {
    --news-card-gap: 42px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 75px;
    width: min(100% - 30px, 1198px);
  }

  .p-top__news-carousel .c-carousel__track {
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--news-card-gap);
  }

  .p-top__news-carousel .c-carousel__track>li {
    width: min(332px, calc((100% - (var(--news-card-gap) * 2)) / 3));
  }

  .p-top__news .c-news-card {
    width: 100%;
  }

  .p-top__news .c-news-card__thumb {
    height: auto;
    aspect-ratio: 332 / 187;
  }

  .p-top__news-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 416px;
  }

  .p-top__stage {
    padding: 74px 0 86px;
    gap: 411px;
  }

  .p-top__goods {
    --goods-card-gap: clamp(20px, 3.5vw, 50px);
    padding-inline: clamp(25px, 9.17vw, 132px);
    z-index: 1;
    /* MOVIEセクションの背景より手前に表示 */
  }

  .p-top__goods-panel {
   padding: 74px 70px 170px;
  }

  .p-top__goods-inner {
    width: min(100% - 30px, 1100px);
    margin-inline: auto;
  }

  .p-top__goods-list {
    gap: var(--goods-card-gap);
  }

  .p-top__goods .c-goods-card {
    width: auto;
  }

  .p-top__goods .c-goods-card__thumb {
    height: auto;
    aspect-ratio: 295 / 344;
  }

  .p-top__movie {
    --movie-overlap: 344px;
  }

  .p-top__banner {
    padding: 45px 0 46px;
  }

  .p-top__banner-link {
    width: min(100% - 30px, 904px);
    height: 225px;
    margin-inline: auto;
  }
}

@media (max-width: 991.97px) {
  .p-top__hero {
    width: 100vw;
            height: auto;
  }

  .p-top__hero-banner {
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
    padding: 2px 16px;
    white-space: nowrap;
  }

  .p-top__hero-banner .-num {
    font-size: 24px;
  }

  .p-top__hero-banner .-num-tight {
    font-size: 24px;
    letter-spacing: -7px;
  }

  .p-top__hero-banner .-jp {
    font-size: 18px;
  }

  section.p-top__kv {
    padding-bottom: 48px;
  }

  .p-top__hero-banner .-jp-tight {
    font-size: 18px;
    letter-spacing: -7px;
  }

  .p-top__kv>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .p-top__kv-btn-wc {
    margin: 20px auto 0;
  }


  .p-top__participants {
    padding: 10px;
  }

  .p-top__participants-box {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 15px 15px 25px;
  }

  .p-top__participants-label {
    padding: 4px 44px;
    font-size: 16px;
  }

  .p-top__participants-text {
    font-size: 20px;
    text-align: center;
  }

  .p-top__players {
    height: 600px;
  }

  .p-top__players-inner {
    --players-inner-scale: 1;
    position: relative;
    width: min(100%, 375px);
    height: 100%;
    margin-inline: auto;
  }

  @media (min-width: 769px) {
    .p-top__players {
      height: clamp(600px, calc(133.9286vw - 428.57px), 900px);
    }

    .p-top__players-inner {
      --players-inner-scale: clamp(1, calc((100vw - 768px) / 448px + 1), 1.5);
      width: 375px;
      height: 600px;
      transform: scale(var(--players-inner-scale));
      transform-origin: top center;
    }

    .p-top__players-heading {
      width: clamp(661px, calc(1141.3px - 48.43vw), 769px);
      margin-left: clamp(-197px, calc(-383.2px + 24.215vw), -143px);
    }
  }

  .p-top__players-heading {
    margin-bottom: 24px;
  }

  .p-top__players-ghost {
    font-size: 72px;
    padding-left: 20px;
    top: 94px;
  }

  .p-top__players-carousel {
    left: auto;
    right: -40px;
    top: 20px;
    width: 290px;
    height: 379px;
    overflow: visible;
  }

  .p-top__players-carousel .swiper-slide {
    --players-image-x: var(--players-image-x-sp, 0px);
    --players-slide-scale: 3.0464;
    opacity: 0;
    width: fit-content;
    height: 196px;
    transform: translate(10px, 240px) scale(var(--players-slide-scale));
    transition: opacity 0.4s ease;
  }

  .p-top__players-carousel .swiper-slide-active {
    opacity: 1;
  }

  .p-top__players-carousel::after {
    display: none;
  }

  .p-top__players-carousel .swiper-slide img {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 78%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 78%);
  }

  .p-top__players-name {
    left: 20px;
    top: 186px;
    width: 290px;
    gap: 3px;
    z-index: 4;
    text-shadow: 2px 2px 6px #161616;
  }

  .p-top__players-copy {
    font-size: 16px;
  }

  .p-top__players-name-main {
    font-size: 36px;
  }

  .p-top__players-name-en {
    font-size: 16px;
  }

  .p-top__players-arrows {
    left: 0;
    top: 455px;
    width: 100%;
    padding: 0 45px;
  }

  .p-top__players-arrow img {
    width: 16px;
    height: 25px;
  }

  .p-top__players-btn-spec {
    position: absolute;
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
    top: 375px;
  }

  .p-top__players-fade {
    display: none;
  }

  .p-top__players-btn-list {
    position: absolute;
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
    top: 515px;
  }

  .p-top__news {
    padding: 40px 0 48px;
  }

  .p-top__news-grad,
  .p-top__news-texture {
    display: none;
  }

  .p-top__news {
    position: relative;
    background-color: var(--color-red);
    background-image: url(../img/common_texture_red.webp);
    background-size: cover;
  }

  .p-top__news::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 120px;
    background: linear-gradient(to bottom, var(--color-red), rgba(184, 28, 43, 0));
    pointer-events: none;
  }

  .p-top__news-heading,
  .p-top__news-carousel,
  .p-top__news-btn {
    position: relative;
    z-index: 1;
  }

  .p-top__news-heading {
    margin-bottom: 24px;
  }

  .p-top__news-carousel {
    display: block;
    padding: calc(16vw / 3.75);
  }

  .p-top__news-carousel .c-carousel__arrow {
    display: none;
  }

  .p-top__news-carousel .c-carousel__track {
    flex-direction: column;
    gap: 16px;
    overflow: visible;
    margin-inline: auto;
  }

  .p-top__news-carousel .c-carousel__track .js-carousel-clone {
    display: none;
  }

  .p-top__news .c-news-card {
    width: 100%;
  }

  .p-top__news-btn {
    margin: 32px auto 0;
  }

  .p-top__stage {
    height: 435px;
    padding: 40px 0 46px;
  }

  .p-top__stage-btn {
    margin-top: auto;
  }

  .p-top__goods {
    padding-inline: calc(25vw / 3.2);
    z-index: 1;
  }

  .p-top__goods-panel {
    padding: 48px 0 56px;
  }

  .p-top__goods-inner {
    width: 100%;
    margin-inline: auto;
    gap: 32px;
    padding: 0 calc(13vw / 3.2);
  }

  .p-top__goods-head {
    gap: 24px;
  }

  .p-top__goods-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  /* SPグッズカードは横並び */
  .c-goods-card {
    flex-direction: row;
    width: 100%;
    gap: 13px;
    align-items: center;
    text-align: left;
  }

  .c-goods-card__thumb {
    width: calc(90vw / 3.2);
    height: auto;
    flex-shrink: 0;
  }

  .c-goods-card__body {
    flex: 1 1 auto;
    min-width: 0;
  }

  .c-goods-card__title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .c-goods-card__price {
    font-size: 12px;
  }

  .p-top__banner {
    height: auto;
    padding: 24px 0;
  }

  .p-top__banner-link {
    width: clamp(320px, 85.33vw, calc(100% - 30px));
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-top__hero video {
    transition: none;
  }
}

@media (min-width: 769px) and (max-width: 991.97px) {
  .p-top__news .c-news-card__title {
    font-size: calc(11vw / 3.75);
  }

  .p-top__news .c-news-card__date {
    font-size: calc(10vw / 3.75);
  }

  .p-top__goods .c-goods-card__title {
    font-size: calc(11vw / 3.75);
  }

  .p-top__goods .c-goods-card__price {
    font-size: calc(10vw / 3.75);
  }
}