html, body {
  margin:0;
  padding:0;
  background:#000;
  color:#fff;
  font-family: system-ui, sans-serif;
}

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

/* NAV */

nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:64px;
  padding:0 32px;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);

  display:flex;
  align-items:center;
  justify-content:space-between;

  z-index:100;
}

nav .logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

nav .logo img{
  display:block;
  width:auto;
  height:44px;
  max-width:180px;
  object-fit:contain;
}

nav .links a{
  margin-left:20px;
  opacity:.75;
}

nav .links a:hover{
  opacity:1;
}

/* HERO */

.hero{
  height:100vh;
  position:relative;
  overflow:hidden;
}

.hero-media{
  position:absolute;
  inset:0;
}

.hero-video,
.hero-slideshow,
.hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.hero-video{
  object-fit:cover;
  transition:opacity .8s ease;
}

.hero-video.fade{
  opacity:0;
}

.hero-video.is-hidden,
.hero-slideshow.is-hidden{
  display:none;
}

.hero-slideshow{
  overflow:hidden;
}

.hero-slide{
  object-fit:cover;
  opacity:0;
  transition:opacity var(--hero-fade-duration, 1.2s) ease;
}

.hero-slide.is-active{
  opacity:1;
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  padding:6vw;
  box-sizing:border-box;
  pointer-events:none;

  display:flex;
  flex-direction:column;
  justify-content:center;

  background:linear-gradient(
    to right,
    rgba(0,0,0,.75),
    rgba(0,0,0,.2)
  );
}

.hero-title{
  font-size:clamp(3rem,6vw,5rem);
  letter-spacing:.08em;
  margin:.2em 0;
}

.hero-entry-box{
  position:absolute;
  left:50%;
  bottom:clamp(8px, 1.5vh, 18px);
  transform:translateX(-50%);
  z-index:20;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:calc(100% - 32px);
}

.hero-entry-fee{
  margin:0;
  color:#fff;
  font-size:clamp(24px, 2.8vw, 32px);
  font-weight:700;
  letter-spacing:.04em;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}

.hero-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  padding:14px 34px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:999px;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:15px;
  font-weight:700;
  letter-spacing:.16em;
  box-shadow:0 8px 30px rgba(0,0,0,.28);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}

.hero-cta:hover{
  background:#fff;
  color:#000;
  transform:translateY(-2px);
}

/* COMMON */

section{
  padding:96px 8vw;
}

h2{
  font-size:28px;
  margin-bottom:20px;
}

/* NEWS */
.news-x-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:start;
}

.news-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.news-item{
  padding:12px 16px;
  border-radius:8px;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.08);
}

.news-date{
  display:inline-block;
  font-size:12px;
  opacity:.7;
  margin-bottom:4px;
}

.news-title{
  font-size:16px;
  margin:0 0 4px;
}

.news-body{
  font-size:14px;
  margin:0;
  line-height:1.6;
  white-space:normal;
}

.x-col{
  min-width:0;
}

.x-heading-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}

.x-heading-row h3{
  margin:0;
}

.x-profile-link{
  font-size:13px;
  opacity:.78;
  transition:opacity .2s ease;
}

.x-profile-link:hover{
  opacity:1;
}

.x-profile-card{
  min-height:220px;
  padding:28px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px 20px;
  align-items:center;
}

.x-profile-mark{
  width:54px;
  height:54px;
  border-radius:14px;
  background:#fff;
  color:#000;
  display:grid;
  place-items:center;
  font-size:28px;
  font-weight:800;
  line-height:1;
}

.x-profile-copy{
  min-width:0;
}

.x-profile-name{
  margin:0 0 4px;
  font-size:20px;
  font-weight:700;
}

.x-profile-handle{
  margin:0 0 10px;
  font-size:14px;
  opacity:.68;
}

.x-profile-note{
  margin:0;
  font-size:14px;
  line-height:1.6;
  opacity:.88;
}

.x-open-button{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-weight:700;
  letter-spacing:.04em;
  transition:transform .2s ease, opacity .2s ease;
}

.x-open-button:hover{
  transform:translateY(-2px);
  opacity:.9;
}


/* SPONSOR CAROUSEL */

.sponsor-carousel{
  width:100%;
  overflow:hidden;
  padding:32px 0;
}

.sponsor-track{
  display:flex;
  align-items:center;
  gap:56px;

  animation:scrollSponsors 35s linear infinite;
}

.sponsor-track a img,
.sponsor-track img{
  width:180px;
  height:180px;
  object-fit:contain;
  opacity:.9;
}

@keyframes scrollSponsors{
  from{
    transform:translateX(0%);
  }
  to{
    transform:translateX(-50%);
  }
}

.sponsor-link-wrap{
  text-align:center;
  margin-top:24px;
}

.sponsor-link{
  padding:8px 24px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.2);
  letter-spacing:.15em;
  opacity:.7;
  transition:.25s;
}

.sponsor-link:hover{
  opacity:1;
  background:rgba(255,255,255,.1);
}

/* SCHEDULE */

.schedule-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed; /* 列幅を固定計算にする */
  font-size:14px;
  max-width:80%;
  text-align: center;
  margin: 0 auto;
}

.schedule-table th,
.schedule-table td{
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.12);
  vertical-align:top;
}

.schedule-table thead th{
  font-size:13px;
  letter-spacing:0.08em;
  opacity:.8;
}

/* 列ごとの幅バランス */
.schedule-table .col-time{
  width:90px;          /* TIME列を狭めに固定 */
}
.schedule-table .col-title{
  width:35%;           /* 内容 */
}
.schedule-table .col-note{
  width:auto;          /* 残り全部NOTE */
}

/* TIME列はセンター＆等幅風に */
.schedule-table td:first-child,
.schedule-table th:first-child{
  text-align:center;
  white-space:nowrap;
}

/* 奇数行に薄い帯をつけて読みやすくする */
.schedule-table tbody tr:nth-child(odd){
  background:rgba(255,255,255,.02);
}

/* 縦の区切り線 */
.schedule-table th:not(:last-child),
.schedule-table td:not(:last-child){
  border-right: 1px solid rgba(255,255,255,0.12);
}

/* 行の帯 */
.schedule-table tbody tr:nth-child(odd){
  background:rgba(255,255,255,.02);
}

/* hoverアクセント */
.schedule-table tbody tr:hover{
  background:rgba(255,255,255,.3);
}


/* form */
.entry-form{
  max-width: 720px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
}

.field span{
  font-weight:500;
}

.required{
  color:#ff7b7b;
  margin-left:4px;
}

.entry-form input,
.entry-form select,
.entry-form textarea{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:14px;
}

.entry-form input:focus,
.entry-form select:focus,
.entry-form textarea:focus{
  outline:none;
  border-color:#fff;
}

.inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:16px;
  font-size:13px;
}

.consent{
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  padding:12px 14px;
}

.consent legend{
  padding:0 6px;
}

.consent-text{
  font-size:12px;
  opacity:.85;
  max-height:180px;
  overflow:auto;
  margin-bottom:8px;
}

.entry-submit{
  margin-top:8px;
  padding:12px 24px;
  border-radius:999px;
  border:none;
  background:#fff;
  color:#000;
  font-weight:bold;
  cursor:pointer;
}

.status{
  margin-top:4px;
  font-size:13px;
  text-align:center;
  opacity:.85;
}


@media(max-width:900px){

  .news-grid{
    grid-template-columns:1fr;
  }

  .sponsor-track a img,
  .sponsor-track img{
    width:140px;
    height:140px;
  }

  .schedule-table{
  max-width:100%;
  font-size: 12px;
  }

  .news-x-grid{
    grid-template-columns:1fr;
  }

  nav{
    height:58px;
    padding:0 16px;
  }

  nav .logo img{
    height:36px;
    max-width:110px;
  }

  nav .links{
    display:flex;
    align-items:center;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
  }

  nav .links::-webkit-scrollbar{
    display:none;
  }

  nav .links a{
    margin-left:10px;
    font-size:12px;
  }

  .hero-entry-box{
    bottom:10px;
    gap:6px;
  }

  .hero-cta{
    min-width:160px;
    padding:12px 28px;
  }

  .x-heading-row{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

}

@media(max-width:600px){
  /*
   * MOBILE HERO
   * ヒーロー画像は 1642 x 941 の横長比率をそのまま表示する。
   * ロゴ等が画像内に含まれるため、スマホでは cover で切り抜かない。
   */
  .hero{
    height:auto;
    min-height:0;
    margin-top:58px;
    padding-top:57.31%; /* 941 / 1642 */
    padding-bottom:126px;
    overflow:hidden;
  }

  .hero-media{
    top:0;
    left:0;
    right:0;
    bottom:auto;
    width:100%;
    height:auto;
    aspect-ratio:1642 / 941;
    background:#000;
  }

  .hero-video,
  .hero-slideshow,
  .hero-slide{
    width:100%;
    height:100%;
  }

  .hero-video,
  .hero-slide{
    object-fit:contain;
  }

  .hero-overlay{
    top:0;
    left:0;
    right:0;
    bottom:auto;
    width:100%;
    height:auto;
    aspect-ratio:1642 / 941;
    padding:0;
    background:transparent;
  }

  .hero-entry-box{
    left:50%;
    bottom:18px;
    gap:10px;
    width:calc(100% - 24px);
  }

  .hero-entry-fee{
    font-size:24px;
    white-space:nowrap;
  }

  .hero-cta{
    min-width:180px;
    padding:13px 30px;
  }

  .x-profile-card{
    grid-template-columns:1fr;
    text-align:center;
  }

  .x-profile-mark{
    margin:0 auto;
  }
}