@charset "UTF-8";
/* =========================================================
HWAVA Style
========================================================= */

/* ↓ CountdownTimer-FIFA2026------------ */
.countdown-container {
  display: flex;
  align-items: center;
  gap: 15px;
  color: white;
}
.countdown-container.hspack{
  width: 350px;
  margin: 35px auto;
  padding-left: 41.5px;
}
.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.number {
    font-family: 'Impact', 'Arial Black', sans-serif; 
    font-size: 3.5rem;
    letter-spacing: 3px;
    text-shadow: 2px 0px 0px rgba(255, 0, 50, 0.8), 
                -2px 0px 0px rgba(0, 255, 255, 0.8);
}
.label {
    font-size: 1rem;
    margin-top: 5px;
    font-weight: bold;
    letter-spacing: 1px;/
    text-shadow: 1px 0px 0px rgba(255, 0, 50, 0.5), 
                -1px 0px 0px rgba(0, 255, 255, 0.5);
}
.colon {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 2.5rem;
    color: #ffff00; 
    margin-bottom: 30px; 
}


/* ↓ TOP ----------------------------- */

@media (max-width: 767px) {
  .is-page-loaded .p-top-kv__img-item{ background: rgba(54, 71, 5, .85); }
  .js-fv img { height: 100%; top: 0%;}
  .p-top-kv__img-item img { height: 51%; top: 24%;}
}


/* ↓ Events--------------------------- */
.eventArea{
  margin-top: 50px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 12px;
}
.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
  filter: brightness(0.15);
}
.bg-layer.area1{ background-image: url('');} 
.bg-layer.area2{ background-image: url('');}
.bg-layer.area3{ background-image: url('');}
.bg-layer.area4{ background-image: url('');}

.eventArea .content .title{ margin: 35px 0; font-size: 5.5rem; color: var(--cr13);}
.eventArea .content .desc{}
.eventArea .content .desc.textinfo{ width: 90%; margin: 0 auto 20px; color: var(--text-white); letter-spacing: 1px; line-height: 32px;}
.textinfodetail{ width: 85%; margin: 10px auto 10px; color: var(--text-white); letter-spacing: 1px; line-height: 28px;}
.textinfodetail .desc{ margin: 15px auto 0px; font-style: italic; font-size: 1.85rem; color: var(--cr13); }
.textinfodetail ul{ list-style: none; margin: 10px 0 25px; }
.textinfodetail .detailTT{ color: var(--text-white); font-weight: bold; margin-bottom: 5px; }
.textinfodetail .detailsub{ font-weight: 400; font-style: italic; line-height: 22px; color: var(--primary-green); margin: 6px auto;}
.textinfodetail ul li{ color: var(--text-white); margin: 0; }

.side-element {
  position: absolute;
  font-size: 9.5vw;
  font-weight: 900;
  opacity: 0.25;
  color: transparent;
  -webkit-text-stroke: 2px var(--primary-orange);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 767px) {
  .eventArea .content .title{ font-size: 3rem; line-height: 3.2rem;}
}

/* ↓ Schedule--------------------------- */
#schedule { margin-top: 200px;}

.KnockoutBracket-bg{
  margin: 20px -25%;
  width: 150%;
  height: 570px;
  background: #7da80d url(../images/schedule/PAGE01.jpg) no-repeat 100% 0 / 100% 100%;
  background-blend-mode: hard-light;
}

@media (max-width: 767px) {
  .p-top-feature__bg{ display: none; }
}

/* ↓ TransportationArea--------------------------- */
.transportationArea h2 span { margin: 20px auto; }
.transportationArea .p-top-spot__inner{ background: var(--cr14); }


/* ↓ Social Media--------------------------------- */
.l-gnav-footer__sns-item.jitaace svg,
.l-footer-sns__item.jitaace svg{ fill:#f9bb22; }
.l-gnav-footer__sns-item.jita365 svg,
.l-footer-sns__item.jita365 svg{ fill:#54B435; }
.l-gnav-footer__sns-item.mojaspin svg,
.l-footer-sns__item.mojaspin svg{ fill:#9207a8; }


/* ↓ Copyright Area--------------------------- */

@media (max-width: 767px) {
  .l-footer-copyright{ text-align: right; }
}

/* ↓ StartVideo Area--------------------------- */
.intro-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: 2147483647; 
  background: rgba(0, 0, 0, 0.95);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.intro-overlay.hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
}

.intro-video {
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
}

.video-btn-group {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; 
  display: flex;
  gap: 16px; 
}

.hidden-btn {
  display: none !important;
}

.intro-btn {
  position: relative;
  background: rgba(32, 33, 36, 0.6);
  border: 1px solid #8ab4f8;
  color: #e8eaed;
  padding: 8px 30px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 1px;
  overflow: hidden;
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.intro-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(138, 180, 248, 0.4), transparent);
  transition: left 0.6s ease;
}
.intro-btn:hover {
  color: #fff; border-color: #fff; transform: scale(1.05);
}
.intro-btn:hover::before {
  left: 100%;
}

@media (max-width: 767px) {
  .video-btn-group{ bottom: 27vh; }
  .intro-btn{ padding: 8px 10px;}
}