/* =========================================================
   Top Page
========================================================= */

body.home,
body.front-page{
  background-color: #000;
}

body.home .site-header,
body.front-page .site-header{
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.52),
    rgba(0, 0, 0, 0)
  );
}

.top-main{
  width: 100%;
  overflow: hidden;
}


/* =========================
   First View
========================= */

.top-firstview{
  position: relative;
  background: #000;
  color: #fff;
}

.top-hero{
  position: relative;
  height: clamp(640px, 78vw, 980px);
  max-height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #000;
}

.top-hero::after{
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: #000;
  opacity: 0;
  animation:
    topHeroBlackReveal
    2.4s
    ease-out
    0.1s
    backwards;
}

.top-hero__slide{
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.5s ease,
    visibility 1.5s ease;
}

.top-hero__slide.is-active{
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.top-hero__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.015);
  transition: transform 7.5s ease;
}

.top-hero__slide.is-active img{
  transform: scale(1.035);
}

.top-hero__slide:first-child img{
  animation:
    topHeroFirstImageIntro
    3.2s
    ease-out
    0.1s
    backwards;
}

.top-hero__shade{
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.08) 34%,
      rgba(0, 0, 0, 0.42) 62%,
      rgba(0, 0, 0, 0.88) 84%,
      #000 100%
    );
}

.top-hero__identity{
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 53%;
  width: min(650px, 60vw);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 1;
  animation:
    topHeroIdentityReveal
    2.2s
    cubic-bezier(.22,1,.36,1)
    1.05s
    backwards;
}

.top-hero__logo{
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 auto;
}


/* =========================
   First View Intro
========================= */

@keyframes topHeroBlackReveal{

  0%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }

}

@keyframes topHeroFirstImageIntro{

  0%{
    transform: scale(1.055);
    filter:
      brightness(0.62)
      saturate(0.88);
  }

  100%{
    transform: scale(1.035);
    filter:
      brightness(1)
      saturate(1);
  }

}

@keyframes topHeroIdentityReveal{

  0%{
    opacity: 0;
    transform:
      translate(-50%, calc(-50% + 7px));
    filter: blur(1.4px);
  }

  100%{
    opacity: 1;
    transform:
      translate(-50%, -50%);
    filter: blur(0);
  }

}


/* =========================
   Countdown
========================= */

.top-countdown{
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 235px;
  margin-top: -1px;
  padding: 24px 20px 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  text-align: center;
}

.top-countdown__eyebrow{
  margin: 0 0 3px;
  color: rgba(255, 255, 255, 0.68);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.28em;
}

.top-countdown__label{
  margin: 0 0 12px;
  color: #fff;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(19px, 1.55vw, 26px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.015em;
}

.top-countdown__timer{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 1vw, 18px);
  font-variant-numeric: tabular-nums;
}

.top-countdown__unit{
  display: grid;
  min-width: 72px;
  justify-items: center;
}

.top-countdown__value{
  color: #fff;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: 0.04em;
}

.top-countdown__name{
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.24em;
}

.top-countdown__colon{
  padding-top: 1px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 0.98;
}

.top-countdown__after{
  margin: 8px 0 0;
  color: #fff;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(19px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
}


/* =========================
   Countdown / Background Movie
========================= */

.top-journey{
  position: relative;
  overflow: hidden;
  background: #000;
}

.top-journey__movie{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.top-journey__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.9;
  filter:
    saturate(0.82)
    contrast(1.04)
    brightness(0.82);
}

.top-journey__shade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.96) 4%,
      rgba(0, 0, 0, 0.82) 11%,
      rgba(0, 0, 0, 0.54) 24%,
      rgba(0, 0, 0, 0.38) 60%,
      rgba(0, 0, 0, 0.64) 100%
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.2)
    );
}

.top-countdown{
  background: transparent;
}

.top-story{
  position: relative;
  min-height: 0;
  margin-top: -1px;
}

.top-story__content{
  position: relative;
  z-index: 2;
  width: min(1500px, calc(100% - 80px));
  margin: 0 auto;
  padding: 64px 0 150px;
}


/* =========================
   Feature Cards
========================= */

.top-feature-viewport{
  width: 100%;
  overflow: hidden;
}

.top-feature-track{
  display: flex;
  gap: clamp(24px, 2.4vw, 42px);
  width: 100%;
  will-change: scroll-position;
}

.top-feature-card{
  position: relative;
  display: block;
  flex: 0 0 calc((100% - (clamp(24px, 2.4vw, 42px) * 2)) / 3);
  aspect-ratio: 1.95 / 1;
  min-height: 250px;
  overflow: hidden;
  border-radius: 28px;
  color: #fff;
  isolation: isolate;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.13);
}

.top-feature-card:hover{
  opacity: 1;
}

.top-feature-card__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 700ms cubic-bezier(.2,.75,.2,1),
    filter 500ms ease;
}

.top-feature-card__shade{
  position: absolute;
  inset: 0;
  background: rgba(8, 13, 17, 0.16);
  transition: background-color 500ms ease;
}

.top-feature-card__body{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: calc(100% - 54px);
  transform: translate(-50%, -50%);
  text-align: center;
  transition:
    transform 700ms cubic-bezier(.22,1,.36,1);
}

.top-feature-card__title,
.top-feature-card__subtitle,
.top-feature-card__cta{
  display: block;
}

.top-feature-card__title{
  font-family:
    Impact,
    "Arial Narrow",
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: clamp(40px, 4vw, 68px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.top-feature-card__subtitle{
  margin-top: 8px;
  font-size: clamp(13px, 1.15vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 7px rgba(0, 0, 0, 0.3);
}

.top-feature-card__cta{
  position: absolute;
  z-index: 2;
  right: 26px;
  bottom: 20px;
  opacity: 0;
  transform: translateY(8px);
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.08em;
  transition:
    opacity 520ms ease,
    transform 700ms cubic-bezier(.22,1,.36,1);
}

@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine){

  .top-feature-card:hover .top-feature-card__image{
    transform: scale(1.04);
    filter:
      saturate(0.86)
      brightness(0.86);
  }

  .top-feature-card:hover .top-feature-card__shade{
    background: rgba(5, 10, 14, 0.74);
  }

  .top-feature-card:hover .top-feature-card__body{
    transform:
      translate(
        -50%,
        calc(-50% - 14px)
      )
      scale(0.985);
  }

  .top-feature-card:hover .top-feature-card__cta{
    opacity: 1;
    transform: translateY(0);
  }

}


/* =========================
   Photo Gallery
========================= */

.top-gallery{
  position: relative;
  z-index: 4;
  background: #000;
}

.top-gallery__grid{
  display: grid;
  grid-template-columns:
    repeat(12, minmax(0, 1fr));
  grid-auto-rows:
    clamp(110px, 11vw, 190px);
  gap: 0;
  width: 100%;
}

.top-gallery__item{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #111;
}

.top-gallery .ultra-zoom::after{
  display: none;
}

.top-gallery__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 600ms cubic-bezier(.2,.75,.2,1),
    filter 450ms ease;
}

.top-gallery__item:hover img{
  transform: scale(1.055);
  filter: brightness(1.07);
}

.top-gallery__item--01{
  grid-column: span 2;
  grid-row: span 1;
}

.top-gallery__item--02{
  grid-column: span 2;
  grid-row: span 1;
}

.top-gallery__item--03{
  grid-column: span 2;
  grid-row: span 1;
}

.top-gallery__item--04{
  grid-column: span 2;
  grid-row: span 1;
}

.top-gallery__item--05{
  grid-column: span 2;
  grid-row: span 1;
}

.top-gallery__item--06{
  grid-column: span 2;
  grid-row: span 1;
}

.top-gallery__item--07{
  grid-column: span 3;
  grid-row: span 1;
}

.top-gallery__item--08{
  grid-column: span 3;
  grid-row: span 1;
}

.top-gallery__item--09{
  grid-column: span 3;
  grid-row: span 1;
}

.top-gallery__item--10{
  grid-column: span 3;
  grid-row: span 1;
}


/* =========================
   Information Area
========================= */

.top-information-area{
  position: relative;
  padding:
    clamp(70px, 8vw, 120px)
    24px
    clamp(100px, 12vw, 180px);
  background-color: #f1f1f1;
  background-image:
    url("../images/common/bg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.top-information-shell{
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    190px;
  gap:
    clamp(50px, 5vw, 90px);
  width: min(1220px, 100%);
  margin: 0 auto;
  padding:
    clamp(55px, 6vw, 90px)
    clamp(38px, 6vw, 84px)
    clamp(80px, 8vw, 120px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 20px 60px
    rgba(0, 0, 0, 0.05);
}

.top-information-main{
  min-width: 0;
}

.top-home-section
+ .top-home-section{
  margin-top:
    clamp(80px, 8vw, 120px);
  padding-top:
    clamp(58px, 6vw, 85px);
  border-top:
    1px solid #d8d8d8;
}

.top-home-heading{
  margin-bottom: 34px;
  text-align: center;
}

.top-home-heading__en{
  margin: 0;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.22em;
}

.top-home-heading__ja{
  margin: 8px 0 0;
  color: #777;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.14em;
}


/* =========================
   News
========================= */

.top-news__list{
  border-top:
    1px solid #d7d7d7;
}

.top-news__item{
  display: grid;
  grid-template-columns:
    124px
    minmax(0, 1fr)
    22px;
  gap: 20px;
  align-items: center;
  min-height: 58px;
  padding: 12px 6px;
  border-bottom:
    1px solid #d7d7d7;
  color: #222;
}

.top-news__item:hover{
  opacity: 1;
  background: #f8f8f8;
}

.top-news__date{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 12px;
  border:
    1px solid #9cb6c1;
  border-radius: 999px;
  color: #62727a;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.top-news__title{
  overflow: hidden;
  font-size: 13px;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-news__arrow{
  color: #777;
  font-size: 22px;
  line-height: 1;
  text-align: right;
}

.top-news__empty{
  margin: 0;
  padding: 28px 0;
  border-bottom:
    1px solid #d7d7d7;
  color: #777;
  font-size: 13px;
  text-align: center;
}

.top-home-more{
  margin-top: 28px;
  text-align: right;
}

.top-home-more a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 128px;
  padding: 6px 18px;
  border:
    1px solid #9cb6c1;
  border-radius: 999px;
  color: #53656d;
  font-size: 10px;
  line-height: 1.3;
}


/* =========================
   Pick Up
========================= */

.top-pickup__list{
  display: grid;
  gap: 28px;
}

.top-pickup__item{
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 5;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: #e5e5e5;
  color: #999;
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: 13px;
  letter-spacing: 0.18em;
}

.top-pickup__item img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 500ms ease;
}

.top-pickup__item[href]:hover{
  opacity: 1;
}

.top-pickup__item[href]:hover img{
  transform: scale(1.015);
}


/* =========================
   Video Cards
========================= */

.top-video-viewport{
  width: calc(100% + 10px);
  overflow-x: auto;
  overflow-y: hidden;
  padding:
    0
    10px
    12px
    0;
  scrollbar-width: thin;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.top-video-track{
  display: flex;
  gap: 22px;
  width: max-content;
}

.top-video-card{
  display: block;
  width: clamp(210px, 24vw, 290px);
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
}

.top-video-card:hover{
  opacity: 1;
}

.top-video-card__thumb{
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: #111;
}

.top-video-card__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition:
    transform 600ms cubic-bezier(.22,1,.36,1),
    filter 500ms ease;
}

.top-video-card__shade{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.08);
  transition:
    background-color 450ms ease;
}

.top-video-card__play{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  border:
    1px solid
    rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background:
    rgba(0, 0, 0, 0.36);
  transform:
    translate(-50%, -50%);
  transition:
    transform 500ms cubic-bezier(.22,1,.36,1),
    background-color 400ms ease;
}

.top-video-card__play::before{
  content: "";
  position: absolute;
  left: 19px;
  top: 14px;
  border-top:
    9px solid transparent;
  border-bottom:
    9px solid transparent;
  border-left:
    13px solid #fff;
}

@media (hover: hover) and (pointer: fine){

  .top-video-card:hover
  .top-video-card__thumb img{
    transform: scale(1.045);
    filter: brightness(0.82);
  }

  .top-video-card:hover
  .top-video-card__shade{
    background:
      rgba(0, 0, 0, 0.22);
  }

  .top-video-card:hover
  .top-video-card__play{
    transform:
      translate(-50%, -50%)
      scale(1.08);
    background:
      rgba(0, 0, 0, 0.52);
  }

}


/* =========================
   Sponsors
========================= */

.top-information-sponsor{
  display: block;
  min-width: 0;
}

.top-information-sponsor .ultra-sponsorSide{
  display: block;
  width: 100%;
}

.top-information-sponsorFooter{
  display: none;
}


/* =========================
   Tablet
========================= */

@media screen and (max-width: 1100px){

  .top-story__content{
    width:
      min(
        100% - 48px,
        980px
      );
  }

  .top-feature-track{
    gap: 24px;
  }

  .top-feature-card{
    flex-basis:
      calc(
        (100% - 24px) / 2
      );
    min-height: 205px;
    border-radius: 22px;
  }

  .top-information-shell{
    grid-template-columns:
      minmax(0, 1fr)
      150px;
    gap: 44px;
  }

}


/* =========================
   Smart Phone
========================= */

@media screen and (max-width: 767px){

  .top-hero{
    height: 86svh;
    min-height: 620px;
    max-height: 820px;
  }

  .top-hero__slide img{
    object-position: center center;
  }

  .top-hero__shade{
    height: 36%;
  }

  .top-hero__identity{
    top: 51%;
    width: min(92vw, 460px);
  }


  /* Countdown */

  .top-countdown{
    min-height: 205px;
    padding:
      22px
      16px
      40px;
  }

  .top-countdown__eyebrow{
    font-size: 8px;
  }

  .top-countdown__label{
    margin-bottom: 14px;
    font-size: 18px;
  }

  .top-countdown__timer{
    gap: 5px;
    width: min(100%, 390px);
  }

  .top-countdown__unit{
    min-width: 0;
    flex: 1;
  }

  .top-countdown__value{
    font-size:
      clamp(27px, 9.4vw, 39px);
  }

  .top-countdown__colon{
    font-size:
      clamp(26px, 8vw, 36px);
  }

  .top-countdown__name{
    margin-top: 7px;
    font-size: 6px;
    letter-spacing: 0.14em;
  }

  .top-countdown__after{
    max-width: 310px;
    font-size: 18px;
  }


  /* Background Movie */

  .top-journey__video{
    opacity: 0.94;
    object-position: center center;
    filter:
      saturate(0.82)
      contrast(1.03)
      brightness(0.8);
  }

  .top-journey__shade{
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.95) 5%,
        rgba(0, 0, 0, 0.76) 14%,
        rgba(0, 0, 0, 0.46) 30%,
        rgba(0, 0, 0, 0.35) 62%,
        rgba(0, 0, 0, 0.62) 100%
      ),
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.12),
        transparent,
        rgba(0, 0, 0, 0.12)
      );
  }


  /* Feature Cards */

  .top-story__content{
    width: 100%;
    padding:
      42px
      0
      78px;
  }

  .top-feature-viewport{
    overflow-x: auto;
    overflow-y: hidden;
    padding:
      0
      17px
      14px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .top-feature-viewport::-webkit-scrollbar{
    display: none;
  }

  .top-feature-track{
    gap: 16px;
    width: max-content;
  }

  .top-feature-card{
    flex:
      0 0 min(82vw, 360px);
    aspect-ratio: 1.65 / 1;
    min-height: 0;
    border-radius: 18px;
    scroll-snap-align: center;
  }

  .top-feature-card__shade{
    background:
      rgba(7, 13, 17, 0.3);
  }

  .top-feature-card__body{
    top: 27px;
    left: 24px;
    width:
      calc(100% - 48px);
    transform: none;
    text-align: left;
  }

  .top-feature-card__title{
    font-size:
      clamp(42px, 14vw, 58px);
  }

  .top-feature-card__subtitle{
    margin-top: 3px;
    font-size: 12px;
  }

  .top-feature-card__cta{
    right: 22px;
    bottom: 18px;
    opacity: 1;
    transform: translateY(7px);
    font-size: 12px;
    transition:
      opacity 450ms ease,
      transform 550ms cubic-bezier(.2,.75,.2,1);
  }

  .top-feature-card.is-inview
  .top-feature-card__image{
    transform: scale(1.045);
  }

  .top-feature-card.is-inview
  .top-feature-card__shade{
    background:
      rgba(7, 13, 17, 0.58);
  }

  .top-feature-card.is-inview
  .top-feature-card__cta{
    opacity: 1;
    transform: translateY(0);
  }


  /* Photo Gallery */

  .top-gallery__grid{
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
    grid-auto-rows: 20vw;
  }

  .top-gallery__item--01{
    grid-column: span 2;
    grid-row: span 2;
  }

  .top-gallery__item--02{
    grid-column: span 2;
    grid-row: span 1;
  }

  .top-gallery__item--03{
    grid-column: span 1;
    grid-row: span 1;
  }

  .top-gallery__item--04{
    grid-column: span 1;
    grid-row: span 1;
  }

  .top-gallery__item--05{
    grid-column: span 2;
    grid-row: span 1;
  }

  .top-gallery__item--06{
    grid-column: span 1;
    grid-row: span 1;
  }

  .top-gallery__item--07{
    grid-column: span 1;
    grid-row: span 1;
  }

  .top-gallery__item:nth-child(n + 8){
    display: none;
  }


  /* Information */

  .top-information-area{
    padding:
      50px
      14px
      86px;
    background-attachment: scroll;
  }

  .top-information-shell{
    display: block;
    width: 100%;
    padding:
      50px
      18px
      60px;
  }

  .top-home-section
  + .top-home-section{
    margin-top: 66px;
    padding-top: 50px;
  }

  .top-home-heading{
    margin-bottom: 26px;
  }

  .top-home-heading__en{
    font-size: 14px;
  }


  /* News */

  .top-news__item{
    grid-template-columns:
      92px
      minmax(0, 1fr)
      12px;
    gap: 10px;
    min-height: 66px;
    padding: 12px 2px;
  }

  .top-news__date{
    padding: 3px 7px;
    font-size: 8px;
  }

  .top-news__title{
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.55;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .top-home-more{
    text-align: center;
  }


  /* Pick Up */

  .top-pickup__list{
    gap: 18px;
  }

  .top-pickup__item{
    border-radius: 15px;
  }


  /* Video Cards */

  .top-video-viewport{
    width: calc(100% + 18px);
    margin-right: -18px;
    padding-right: 18px;
  }

  .top-video-track{
    gap: 14px;
  }

  .top-video-card{
    width: min(77vw, 290px);
  }

  .top-video-card__thumb{
    border-radius: 14px;
  }

  .top-video-card__play{
    width: 44px;
    height: 44px;
  }

  .top-video-card__play::before{
    left: 17px;
    top: 13px;
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 12px;
  }


  /* Sponsors */

  .top-information-sponsor{
    display: none;
  }

  .top-information-sponsorFooter{
    display: block;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    background:
      rgba(255, 255, 255, 0.96);
  }

  .top-information-sponsorFooter .ultra-sponsorFooter{
    display: block;
    width: 100%;
    margin-top: 0;
    border-top:
      1px solid #d8d8d8;
    background: transparent;
  }

  .top-information-sponsorFooter .ultra-sponsorFooter__inner{
    width:
      calc(100% - 36px);
    margin: 0 auto;
    padding:
      44px
      0
      48px;
  }

}


/* =========================
   Reduced Motion
========================= */

@media (prefers-reduced-motion: reduce){

  .top-hero::after,
  .top-hero__slide:first-child img,
  .top-hero__identity{
    animation: none !important;
  }

  .top-hero__slide,
  .top-hero__slide img,
  .top-feature-card__image,
  .top-feature-card__shade,
  .top-feature-card__body,
  .top-feature-card__cta,
  .top-gallery__item img,
  .top-pickup__item img,
  .top-video-card__thumb img,
  .top-video-card__shade,
  .top-video-card__play{
    transition: none !important;
  }

}

/* =========================
   Pick Up Interactive Banners
========================= */
.top-pickup__list{ gap: clamp(18px, 2.2vw, 30px); }
.top-pickup__item{
  display: block;
  position: relative;
  min-height: 0;
  aspect-ratio: 3 / 1;
  isolation: isolate;
  border-radius: clamp(12px, 1.6vw, 20px);
  background: #15232c;
  transform: translateZ(0);
  transition: transform .65s cubic-bezier(.22,1,.36,1), box-shadow .65s ease;
}
.top-pickup__item .top-pickup__image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .75s cubic-bezier(.22,1,.36,1);
}
.top-pickup__shade{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.top-pickup__cta{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(66%, 320px);
  min-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 7px 15px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 999px;
  color: #fff;
  font-family: inherit;
  font-size: clamp(11px, 1.3vw, 16px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 9px));
  transition: opacity .45s ease, transform .65s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine){
  .top-pickup__item:hover{ transform: scale(1.025); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
  .top-pickup__item:hover .top-pickup__image{ transform: scale(1.045); }
  .top-pickup__item:hover .top-pickup__shade{ opacity: 1; }
  .top-pickup__item:hover .top-pickup__cta{ opacity: 1; transform: translate(-50%, -50%); }
}
.top-pickup__item:focus-visible{ outline: 3px solid #227ba8; outline-offset: 4px; }
.top-pickup__item:focus-visible .top-pickup__shade,
.top-pickup__item.is-inview .top-pickup__shade{ opacity: 1; }
.top-pickup__item:focus-visible .top-pickup__cta,
.top-pickup__item.is-inview .top-pickup__cta{ opacity: 1; transform: translate(-50%, -50%); }
.top-pickup__item.is-inview{ transform: scale(1.02); }
.top-pickup__item.is-inview .top-pickup__image{ transform: scale(1.04); }
@media (max-width: 767px){
  /* Feature card typography stays anchored while scrolling. */
  .top-feature-card__body,
  .top-feature-card:hover .top-feature-card__body,
  .top-feature-card.is-inview .top-feature-card__body{
    top: 27px;
    left: 24px;
    transform: none;
    transition: none;
  }
  .top-feature-card__title{ font-size: clamp(31px, 9.2vw, 48px); overflow-wrap: normal; }
  .top-feature-card__cta{ opacity: 0; transform: translateY(8px); }
  .top-feature-card.is-inview .top-feature-card__cta{ opacity: 1; transform: translateY(0); }
  .top-pickup__list{ gap: 22px; }
  .top-pickup__item{ aspect-ratio: 3 / 1; border-radius: 12px; }
  .top-pickup__cta{ min-height: 28px; padding: 4px 10px; border-width: 1.5px; font-size: clamp(10px, 2.8vw, 13px); }
}
@media (prefers-reduced-motion: reduce){
  .top-pickup__item, .top-pickup__image, .top-pickup__shade, .top-pickup__cta{ transition: none !important; }
}

/* =========================
   Top Feature / Pick Up Refinements
========================= */
.top-feature-card--record-challenge .top-feature-card__title,
.top-feature-card.record-challenge .top-feature-card__title{
  font-size: clamp(19px, 2.1vw, 32px);
  letter-spacing: 0;
  white-space: nowrap;
}

@media (min-width: 768px){
  .top-pickup__list{
    width: 70%;
    margin-inline: auto;
  }
}

.top-pickup__cta{
  font-family: "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 700;
  letter-spacing: .035em;
}

@media (max-width: 767px){
  .top-feature-card--record-challenge .top-feature-card__title,
  .top-feature-card.record-challenge .top-feature-card__title{
    font-size: clamp(18px, 5.2vw, 25px);
    white-space: nowrap;
  }
}


/* =========================
   Main Visual Entry Link
========================= */
.top-hero__entry {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: clamp(62px, 9%, 130px);
  display: flex;
  width: min(380px, 66vw);
  min-height: 54px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 22px;
  border: 1px solid rgba(255,255,255,.88);
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  color: #fff;
  font-family: "Hiragino Sans", "Noto Sans JP", Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  transform: translateX(-50%);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.top-hero__entry:hover,
.top-hero__entry:focus-visible {
  background: rgba(0,0,0,.6);
  border-color: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
  color: #fff;
}
.top-hero__entry-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .08em;
}
.top-hero__entry-date {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .025em;
}
.top-hero__entry-date small { font-size: .65em; font-weight: 500; }

/* =========================
   Teaser Style Countdown
========================= */
.top-countdown {
  min-height: 225px;
  padding: 28px 18px 44px;
}
.top-countdown__eyebrow {
  margin-bottom: 7px;
  color: rgba(255,255,255,.56);
}
.top-countdown__label {
  margin-bottom: 12px;
  color: rgba(255,255,255,.9);
  font-family: "Hiragino Sans", "Noto Sans JP", Arial, sans-serif;
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 500;
  letter-spacing: .12em;
}
.top-countdown__timer {
  align-items: center;
  gap: clamp(5px, .8vw, 13px);
}
.top-countdown__unit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .3vw, 6px);
  min-width: 0;
  flex: none;
}
.top-countdown__name {
  display: flex;
  flex: 0 0 clamp(12px, 1.3vw, 20px);
  align-items: center;
  justify-content: center;
  width: clamp(12px, 1.3vw, 20px);
  height: clamp(37px, 4.8vw, 65px);
  margin: 0;
  color: rgba(255,255,255,.58);
  font-size: clamp(9px, 1vw, 14px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  transform: rotate(-90deg);
}
.top-countdown__value {
  color: rgba(255,255,255,.8);
  font-family: "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(34px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .035em;
  font-variant-numeric: tabular-nums;
}
.top-countdown__colon {
  padding: 0;
  color: rgba(255,255,255,.65);
  font-size: clamp(30px, 4vw, 55px);
  font-weight: 500;
  line-height: 1;
}
.top-countdown [hidden] { display: none !important; }

@media (max-width: 767px) {
  .top-hero__entry {
    bottom: clamp(76px, 13%, 135px);
    width: min(74vw, 320px);
    min-height: 49px;
    padding: 8px 16px;
  }
  .top-hero__entry-label { font-size: 9px; }
  .top-hero__entry-date { font-size: 13px; }
  .top-countdown { min-height: 190px; padding: 28px 8px 38px; }
  .top-countdown__eyebrow { font-size: 8px; }
  .top-countdown__label { margin-bottom: 10px; font-size: 10px; }
  .top-countdown__timer { width: 100%; gap: clamp(2px, .6vw, 6px); }
  .top-countdown__unit { flex: none; gap: 1px; }
  .top-countdown__name {
    flex-basis: clamp(9px, 2.3vw, 13px);
    width: clamp(9px, 2.3vw, 13px);
    height: clamp(28px, 7.3vw, 39px);
    font-size: clamp(7px, 1.85vw, 10px);
  }
  .top-countdown__unit:first-child .top-countdown__name { font-size: clamp(6px, 1.65vw, 9px); }
  .top-countdown__value { font-size: clamp(27px, 7.3vw, 39px); letter-spacing: .01em; }
  .top-countdown__colon { font-size: clamp(24px, 6.4vw, 35px); }
}
@media (prefers-reduced-motion: reduce) {
  .top-hero__entry { transition: none; }
}

/* =========================
   Top Entry Button / Countdown / Pick Up
========================= */
.top-hero__entry {
  width: min(456px, 78vw);
  min-height: 65px;
  padding: 11px 28px;
  border: 1px solid rgba(255,255,255,.94);
  background: linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.29));
  box-shadow: 0 5px 18px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.25);
  cursor: pointer;
}
.top-hero__entry:hover,
.top-hero__entry:focus-visible {
  background: linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.53));
  box-shadow: 0 9px 28px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.3);
}
.top-hero__entry:active {
  background: rgba(0,0,0,.56);
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.top-hero__entry-label { font-size: 13px; }
.top-hero__entry-date { font-size: 18px; }
.top-countdown__value {
  color: rgba(255,255,255,.94);
  font-size: clamp(39px, 5.25vw, 73px);
}
.top-countdown__colon {
  color: rgba(255,255,255,.8);
  font-size: clamp(35px, 4.5vw, 62px);
}
.top-countdown__name { color: rgba(255,255,255,.72); }
.top-pickup__item {
  box-shadow: 0 6px 22px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.07);
}
@media (max-width: 767px) {
  .top-hero__entry {
    width: min(78vw, 340px);
    min-height: 55px;
    padding: 9px 18px;
  }
  .top-hero__entry-label { font-size: 10px; }
  .top-hero__entry-date { font-size: 14px; }
  .top-countdown__value { font-size: clamp(30px, 8.1vw, 44px); }
  .top-countdown__colon { font-size: clamp(27px, 7vw, 39px); }
  .top-countdown__timer { gap: clamp(1px, .45vw, 4px); }
  .top-countdown__unit { gap: 0; }
  .top-pickup__item,
  .top-pickup__item.is-inview {
    transform: none;
    box-shadow: 0 5px 17px rgba(0,0,0,.17), 0 1px 4px rgba(0,0,0,.07);
  }
  .top-pickup__item .top-pickup__image,
  .top-pickup__item.is-inview .top-pickup__image { transform: none; }
  .top-pickup__item.is-inview .top-pickup__shade,
  .top-pickup__item.is-inview .top-pickup__cta { opacity: 0; }
  .top-pickup__item.is-inview .top-pickup__cta { transform: translate(-50%,calc(-50% + 9px)); }
  .top-pickup__item.is-pressed .top-pickup__shade { opacity: 1; }
  .top-pickup__item.is-pressed .top-pickup__cta {
    opacity: 1;
    transform: translate(-50%,-50%);
  }
  .top-pickup__item.is-pressed { transform: scale(.99); }
  .top-pickup__item.is-pressed .top-pickup__image { transform: scale(1.025); }
  .top-pickup__shade { transition: opacity .2s ease; }
  .top-pickup__cta { transition: opacity .2s ease,transform .25s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .top-pickup__item.is-pressed { transform: none; }
}


/* Feature Card Tabs */
.top-feature-card__badge {
  position: absolute;
  z-index: 4;
  top: 15px;
  right: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 30px);
  min-height: 34px;
  padding: 7px 17px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  color: #171717;
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .025em;
  white-space: nowrap;
  pointer-events: none;
  transition: box-shadow 350ms ease, transform 350ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .top-feature-card:hover .top-feature-card__badge {
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transform: translateY(-2px);
  }
}
@media (max-width: 767px) {
  .top-feature-card__badge {
    top: 12px;
    right: 12px;
    min-height: 30px;
    max-width: calc(100% - 24px);
    padding: 6px 12px;
    font-size: 10px;
  }
}

/* =========================
   Record Challenge Title
========================= */
.top-feature-card--record-challenge {
  container-type: inline-size;
}

.top-feature-card--record-challenge .top-feature-card__title {
  font-size: clamp(18px, 6.3cqw, 42px);
  letter-spacing: -0.025em;
  white-space: nowrap;
  line-height: 1.05;
}

@media (max-width: 767px) {
  .top-feature-card--record-challenge .top-feature-card__title {
    font-size: clamp(18px, 6.3cqw, 30px);
  }
}

/* Record Challenge Title - Fluid Fit */
.top-feature-card--record-challenge .top-feature-card__title {
  display: block;
  width: 100%;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* =========================
   Mobile Feature Card Layout
========================= */
@media (max-width: 767px) {
  .top-feature-card .top-feature-card__body,
  .top-feature-card:hover .top-feature-card__body,
  .top-feature-card.is-inview .top-feature-card__body {
    top: 50%;
    left: 50%;
    width: calc(100% - 32px);
    transform: translate(-50%, -50%);
    text-align: center;
    transition: none;
  }

  .top-feature-card .top-feature-card__title,
  .top-feature-card .top-feature-card__subtitle {
    text-align: center;
  }

  .top-feature-card--record-challenge .top-feature-card__title {
    max-width: 100%;
    white-space: nowrap;
  }
}

/* =========================
   Record Challenge Mobile Fit
========================= */
@media (max-width: 767px) {
  .top-feature-card--record-challenge .top-feature-card__title {
    min-width: 0;
    max-width: 100%;
    font-size: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    letter-spacing: -0.035em;
  }
}
