/* ============================================================
   DARK BASE OVERRIDE (2027)
   Converts the site from light base to black base without
   touching common.css. Loaded after common.css.
   ============================================================ */

@font-face {
  font-family: "Special Gothic Condensed One";
  src: url("../fonts/Special_Gothic_Condensed_One/SpecialGothicCondensedOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --dark-bg: #0a0a0a;
  --dark-surface: #181818;
  --dark-surface-2: #222222;
  --dark-border: #2a2a2a;
  --dark-border-strong: #3a3a3a;
  --dark-text: #f0efe9;
  --dark-text-muted: #b8b4ae;
}

/* ---------- Base ---------- */
html {
  background: var(--dark-bg) !important;
}

body {
  background: var(--dark-bg) !important;
  color: var(--dark-text);
}

/* ---------- Layout ---------- */
.l_center {
  border-left: none !important;
  border-right: none !important;
}

.l-footer {
  border-top-color: var(--dark-border) !important;
  color: var(--dark-text);
}

.l-footer__contact li a {
  color: var(--dark-text) !important;
}

/* ---------- Header ---------- */
.l-header {
  background: #000;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* メニュー項目の日本語訳が明朝体(Special Gothicの日本語フォールバック)になるのを防ぐ。PC/SP共通でゴシック体に */
.l-header__list a p {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

@media screen and (max-width: 1024px) {
  .l-header-openbtn span {
    background-color: var(--dark-text) !important;
    /* 1pxだと開いた後の×が細すぎて閉じるボタンと分からないため太く・大きく */
    height: 3px !important;
    width: 28px !important;
    border-radius: 3px;
  }
  .l-header-openbtn a {
    color: var(--dark-text);
  }
  .l-header-openbtn a:hover {
    color: #00c675;
  }

  /* スマホメニュー(開いた状態): 背景が白×白文字で読めなかったのをダークテーマに統一 */
  .l-header__menu {
    background: rgba(10, 10, 10, 0.97) !important;
    border: none !important;
  }
  .l-header__list a {
    color: var(--dark-text);
    font-size: 3.2rem;
    line-height: 1.1;
  }
  .l-header__list a p {
    color: var(--dark-text-muted);
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 1rem;
    letter-spacing: 0.02em;
    margin-top: 6px;
  }
  .l-header__list a:hover,
  .l-header__list a:hover p {
    color: #00c675;
  }
  .l-header__sns {
    gap: calc(1rem + 10px);
    margin-top: 18px;
  }
  .l-header__sns a {
    color: var(--dark-text);
    font-size: 2.1rem;
  }
  .l-header__sns a:hover {
    color: #29A616;
  }
}

/* ---------- Component: heading / title ---------- */
.c-heading {
  background: var(--dark-bg) !important;
}

.c-title {
  background: var(--dark-bg) !important;
}

/* ---------- Tables ---------- */
.c-table th,
.c-table td {
  color: var(--dark-text);
}

.c-table__2col th,
.c-table__3col th {
  background: var(--dark-surface-2) !important;
  color: var(--dark-text);
}

/* ---------- Top / Main visual (bg is image, keep) ---------- */
.p-top-mainvs__target li {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text);
}

/* ---------- Sliders / message ---------- */
.p-top-message__2day {
  background: var(--dark-surface) !important;
  border-color: var(--dark-text) !important;
  color: var(--dark-text);
}

.p-top-message__btn {
  background: var(--dark-surface) !important;
  color: var(--dark-text);
}

.p-top-message__btn span::after {
  background-color: var(--dark-text) !important;
}

.p-top-message__btn a {
  border-color: var(--dark-surface) !important;
}

.p-top-message__btn a:hover {
  border-color: var(--dark-text) !important;
}

/* ---------- Overview / History ---------- */
.p-top-overview__note-text {
  background: var(--dark-surface) !important;
  color: var(--dark-text);
}

@media screen and (max-width: 768px) {
  /* SPは背景映像の上に文字が重なって読みづらいので黒を敷く */
  section#about {
    background: rgba(0, 0, 0, 0.75);
  }
}

.p-top-history__list {
  padding-left: 3rem;
  padding-right: 3rem;
}
@media screen and (max-width: 768px) {
  .p-top-history__list {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.p-top-history__list li span {
  background: #29a815 !important;
  color: var(--dark-text);
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: bold;
}

@media screen and (min-width: 769px) {
  .p-top-history__list li {
    width: 11.5%;
  }
}

.p-top-history .current__text {
  color: #ffffff;
  font-size: clamp(1.125rem, 0.875rem + 1.25vw, 1.75rem);
  letter-spacing: 0.04em;
}

.p-top-history__list .current span {
  color: #fff;
  background: #c61d19 !important;
  border: none;
  width: 150px;
  height: 150px;
  margin-top: -40px;
  margin-left: 20px;
  font-size: 40px;
  letter-spacing: 0.5px;
}
@media screen and (max-width: 768px) {
  .p-top-history__list .current {
    grid-template-columns: 78px auto;
    color: #fff;
  }
  .p-top-history__list .current span {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    font-size: 1.65rem;
  }
  li.current .p-top-history__name {
    font-size: 23px;
    font-weight: 600;
  }
}

/* ---------- Program ---------- */
.p-top-program__time {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text);
  border-right-color: var(--dark-border-strong) !important;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.4) 0.8px, transparent 0.8px);
  background-size: 2px 2px;
}

/* Borders were #000 (black) → invisible/seam-like on dark surface. Use dark theme border color. */
.p-top-program__list {
  border-left: none !important;
}
.p-top-program__list li,
.p-top-program__item {
  border-bottom-color: var(--dark-border-strong) !important;
}

.p-top-program__content {
  background-color: var(--dark-surface) !important;
}

.p-top-program__time .p-top-program__time-line {
  color: var(--dark-text) !important;
}

@media screen and (max-width: 768px) {
  .p-top-program__time {
    font-size: 18px;
    line-height: 2.1rem;
  }
  .p-top-program__item {
    grid-template-columns: 70px auto;
  }
}

/* Keep speaker logo tile light so partner logos remain visible */
.p-top-program__speaker--logo {
  background: #ffffff !important;
}

.p-top-program__speaker--name {
  color: var(--dark-text) !important;
}

/* ---------- Booth / Sponsor / Support / Association ----------
   Keep tile background light so partner logos remain readable. */
.p-top-booth__balloon,
.p-top-booth__item,
.p-top-sponsor__item,
.p-top-support__item,
.p-top-association__item {
  background: #ffffff !important;
  color: #111;
}

/* 支給ロゴが黒背景で書き出されているタイル（TikTok Shop）。
   ロゴ自体が白抜きのため白地では成立しない。タイルを黒にして地を合わせつつ、
   ページ背景に溶けて欠けて見えないよう枠線でタイル形状を保つ。
   BOOTH / SPONSOR どちらのタイルにも付けられる。
   白地・透過の素材が入手でき次第この指定ごと削除する */
.p-top-booth__item.is-dark-logo,
.p-top-sponsor__item.is-dark-logo {
  background: #000000 !important;
  border: 1px solid var(--dark-border-strong);
}

/* スライダー内のロゴ（TikTok Shop）も同じ理由で黒背景のタイルに乗せる */
.slider__images.is-dark-logo {
  background: #000000;
  border-radius: 8px;
}
.slider__images.is-dark-logo img {
  aspect-ratio: 1/1;
}

/* ---------- Coming soon / Modal ---------- */
.comingsoon {
  background: var(--dark-surface) !important;
  color: var(--dark-text);
}

.modal {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.modal__inner {
  background: var(--dark-surface) !important;
  color: var(--dark-text);
}

.modal__title {
  color: var(--dark-text) !important;
}

/* 支給ロゴは黒文字のものが多く、暗いモーダル地では読めない。
   ロゴ側の下地を白タイルにして視認性を確保する（BOOTH タイルと同じ考え方） */
.modal__logo {
  background: #ffffff;
  padding: 10px;
  border-radius: 4px;
  box-sizing: border-box;
}

/* ---------- Utility ---------- */
.u-color-true-black {
  color: var(--dark-text) !important;
}

/* ---------- Section headings (image → text) ---------- */
.section-heading-text {
  font-family: "Special Gothic Condensed One", "Zen Old Mincho", "Shippori Mincho B1", serif;
  font-size: clamp(2.2rem, 4.4vw, 4.5rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #ffffff !important;
  line-height: 1;
  margin: 0 0 0.05em;
  text-transform: uppercase;
}
.section-heading-text::first-letter {
  color: #28a715;
}
.c-heading-accent {
  color: #28a715;
}
@media screen and (max-width: 768px) {
  .c-heading-accent {
    color: inherit;
  }
}

.p-top-overview__title.section-heading-text {
  line-height: 1.1;
}

.section-heading-sub {
  display: block;
  text-align: left;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin: -0.3em 0 1em;
}
.section-heading-sub::first-letter {
  color: #ffffff;
}
.p-top-overview__title + .section-heading-sub,
.p-top-program__title + .section-heading-sub {
  margin-left: 4vw;
}
@media screen and (max-width: 768px) {
  .p-top-overview__title + .section-heading-sub {
    margin-left: 1.25rem;
    margin-bottom: 24px;
  }
}

@media screen and (max-width: 768px) {
  .section-heading-text {
    font-size: clamp(3rem, 10vw, 4rem) !important;
    letter-spacing: 0.06em;
    margin: 0;
    line-height: 0.6 !important;
  }
  /* 上の margin:0 が margin依存の見出しの下余白(元は各section 1.25rem)を潰すため、
     詳細度を上げて一括で復活させる。OVERVIEWはpadding-bottomで余白を作るため対象外 */
  .p-top-history__heading.section-heading-text,
  .p-top-program__title.section-heading-text,
  .p-top-booth__title.section-heading-text,
  .p-top-sponsor__title.section-heading-text,
  .p-top-support__title.section-heading-text,
  .p-top-association__title.section-heading-text,
  .p-top-market__title.section-heading-text,
  .p-top-access__title.section-heading-text {
    margin-bottom: 1.25rem;
  }
}

/* ---------- Main visual hero title (image → text) ---------- */
.mainvs-title-text {
  text-align: center;
  color: #ffffff !important;
  margin: 0 auto 20px;
  padding: 20px 0 10px;
  line-height: 1;
}

.mainvs-title-text .mainvs-title-en {
  font-family: "Zen Old Mincho", "Shippori Mincho B1", serif;
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #ffffff;
  line-height: 1;
  margin: 0;
}

.mainvs-title-text .mainvs-title-year {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(3.6rem, 9vw, 7.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
  line-height: 1;
  margin: 8px 0 0;
  background: linear-gradient(90deg, #408a04 20%, #6d8d0c 34%, #ea9500 55%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mainvs-title-text .mainvs-title-ja {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #ffffff;
  margin: 18px 0 0;
  line-height: 1.4;
}

.mainvs-title-text .mainvs-title-ja span {
  display: inline-block;
  color: var(--dark-text-muted);
  font-size: 0.85em;
  margin-left: 0.5em;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 768px) {
  .mainvs-title-text .mainvs-title-en { font-size: clamp(2.4rem, 12vw, 4rem); }
  .mainvs-title-text .mainvs-title-year { font-size: clamp(3rem, 14vw, 5rem); }
  .mainvs-title-text .mainvs-title-ja span {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}

/* ---------- Main visual info (image → text) ---------- */
.p-top-mainvs__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.4vw;
  padding: 5vw 3.2vw 2vw;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 70%);
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  line-height: 1;
  text-align: left;
}

.p-top-mainvs__date {
  display: flex;
  flex-direction: column;
  gap: 0.6vw;
}

.p-top-mainvs__year {
  font-size: 2.2vw;
  letter-spacing: 0.04em;
}

.p-top-mainvs__date-row {
  display: flex;
  align-items: baseline;
}

.p-top-mainvs__daynum {
  font-size: 7vw;
  letter-spacing: 0;
}

.p-top-mainvs__wday {
  font-size: 2.9vw;
  margin-left: 0.4vw;
}

.p-top-mainvs__time {
  font-size: 3.8vw;
  margin-left: 0.6vw;
  letter-spacing: 0.02em;
}

.p-top-mainvs__venue {
  display: flex;
  flex-direction: column;
  gap: 0.8vw;
  padding-bottom: 0.4vw;
}

.p-top-mainvs__hall {
  font-size: 3.2vw;
  letter-spacing: 0.02em;
}

.p-top-mainvs__address {
  font-size: 1.4vw;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.p-top-mainvs__free {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5vw;
  margin-left: 0;
  margin-right: 3.2vw;
  background: #a4090f;
  width: 8.85vw;
  height: 8.85vw;
  padding: 1vw;
  align-self: flex-end;
}

.p-top-mainvs__free-main {
  font-size: 2.4vw;
  letter-spacing: 0.125em;
  line-height: 1.15;
  text-align: center;
}

.p-top-mainvs__free-sub {
  font-size: 0.85vw;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.025em;
}

/* ---------- Tablet (769-1024px) ---------- */
@media screen and (max-width: 1024px) {
  .p-top-mainvs__info {
    align-items: flex-end;
    justify-content: center;
    gap: 3vw;
    padding: 9vw 4vw 3vw;
  }

  .p-top-mainvs__date {
    gap: 6px;
  }

  .p-top-mainvs__year {
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  }

  .p-top-mainvs__daynum {
    font-size: clamp(3rem, 7.5vw, 4.4rem);
  }

  .p-top-mainvs__wday {
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    margin-left: 4px;
  }

  .p-top-mainvs__time {
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    margin-left: 6px;
  }

  .p-top-mainvs__venue {
    gap: 8px;
    padding-bottom: 4px;
  }

  .p-top-mainvs__hall {
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  }

  .p-top-mainvs__address {
    font-size: clamp(0.85rem, 1.7vw, 1.05rem);
  }

  .p-top-mainvs__free {
    width: clamp(96px, 12vw, 128px);
    height: clamp(96px, 12vw, 128px);
    gap: 4px;
    margin-right: 1vw;
    padding: 10px;
  }

  .p-top-mainvs__free-main {
    font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  }

  .p-top-mainvs__free-sub {
    font-size: clamp(0.7rem, 1vw, 0.9rem);
  }
}

@media screen and (max-width: 768px) {
  .p-top-mainvs__logo {
    top: 20%;
    width: 85%;
  }

  .p-top-mainvs__text {
    top: 6%;
    width: 93%;
  }

  .p-top-mainvs__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    padding: 64px 120px 28px 20px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 65%);
    text-align: left;
  }

  .p-top-mainvs__date {
    gap: 4px;
    align-items: flex-start;
  }

  .p-top-mainvs__year {
    font-size: clamp(1.5rem, 6vw, 1.75rem);
  }

  .p-top-mainvs__daynum {
    font-size: clamp(2.5rem, 11vw, 3.2rem);
  }

  .p-top-mainvs__wday {
    font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  }

  .p-top-mainvs__time {
    font-size: clamp(1.35rem, 5.5vw, 1.8rem);
    margin-left: 6px;
  }

  .p-top-mainvs__venue {
    gap: 6px;
    padding-bottom: 0;
    align-items: flex-start;
    text-align: left;
  }

  .p-top-mainvs__hall {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
  }

  .p-top-mainvs__address {
    font-size: clamp(0.72rem, 3vw, 0.9rem);
  }

  .p-top-mainvs__free {
    position: absolute;
    right: 18px;
    bottom: 27px;
    margin: 0;
    gap: 4px;
    width: clamp(88px, 27vw, 106px);
    height: clamp(88px, 27vw, 106px);
    padding: 8px;
    align-self: auto;
  }

  .p-top-mainvs__free-main {
    font-size: clamp(1.7rem, 7vw, 2.1rem);
  }

  .p-top-mainvs__free-sub {
    font-size: clamp(0.68rem, 2.6vw, 0.82rem);
  }
}

/* ---------- Overview: 参加費 FREE ---------- */
.p-top-overview__free {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 4px 0;
  margin: 0 0 8px !important;
}

.p-top-overview__free-en {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #29a815;
  letter-spacing: 0.06em;
  line-height: 1;
}

.p-top-overview__free-ja {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-text);
  letter-spacing: 0.08em;
}

.p-top-overview__hosts {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--dark-text);
}

/* 概要コンテンツの文字を全体的にほんのり大きく */
.p-top-overview__content {
  font-size: 1.08em;
}

.p-top-overview__row {
  border-bottom-color: #aaa;
}
@media screen and (max-width: 768px) {
  .p-top-overview__row {
    border-bottom-color: #000;
    /* スマホでもラベルと値を横並びに */
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }
  .p-top-overview__label {
    min-width: 5em;
    flex-shrink: 0;
    font-size: 1em;
  }
}

/* 参加費: ラベル「参加費」と値「無料」の下ライン(ベースライン)を揃える */
.p-top-overview__row--ticket {
  align-items: baseline;
}

/* スマホ時のセクション下余白を EVENT OVERVIEW(25px) と揃える */
@media screen and (max-width: 768px) {
  .p-top-history,
  .p-top-program {
    padding-bottom: 0px;
  }
}

.p-top-history__highlight span {
  background: #28a715;
}
@media screen and (max-width: 768px) {
  .p-top-history__highlight span {
    font-size: 1.25rem;
    line-height: 1.35;
    margin-bottom: 25px;
    padding: 1rem 1rem 1.25rem 1.15rem;
  }
}

/* ---------- MARKET（市場紹介）: Figmaコメント#143 ----------
   目的「イベントの質は出しながらリスク回避」に沿った表示。
   ・英字見出し MARKET は非表示にし、日本語の「市場紹介」を見出しとして中央に置く
   ・各市場名はリンクを外してテキストのみ（遷移先を持たせない）
   ・フェスのラインナップ表記のように「|」区切りでセンター揃え。
     グリッドをやめたので 1ブロックの幅は文字数依存になる
   ・件数は多いがセクションの高さはミニマムに */
.p-top-market__title {
  display: none;
}
.p-top-market .section-heading-sub {
  text-align: center;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 1.5em;
}
.p-top-market__lineup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #ffffff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(0.9rem, 1.43vw, 1.24rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  row-gap: 0.7em; /* 各行の上下の余白 */
}
.p-top-market__lineup li {
  display: inline-flex;
  align-items: baseline;
}
.p-top-market__lineup li:not(:last-child)::after {
  content: "|";
  display: inline-block;
  margin: 0 1em; /* 各オークション名の左右の余白 */
  color: #28a715;
  font-weight: 400;
}
.p-top-market__lineup li span {
  font-size: 0.8em;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .p-top-market .section-heading-sub {
    margin-bottom: 1.2em;
  }
  .p-top-market__lineup {
    line-height: 1.5;
    row-gap: 0.6em;
  }
  .p-top-market__lineup li:not(:last-child)::after {
    margin: 0 0.7em;
  }
}

/* ---------- BOOTH / SPONSOR のロゴリンク: Figmaコメント#144 ----------
   ロゴを <a> で包んだのでタイル全面がクリック領域になるように伸ばす。
   .p-top-sponsor a は common.css 側で白枠＋aspect-ratio が付くため、
   タイル(.p-top-sponsor__item)と二重にならないよう幅高さだけ足す。 */
.p-top-booth__item > a,
.p-top-sponsor__item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  transition: opacity 0.3s ease;
}
.p-top-booth__item > a:hover,
.p-top-sponsor__item > a:hover {
  opacity: 0.6;
}

/* ---------- BOOTH / SPONSOR グリッド: Figmaコメント#141・#142 ---------- */
/* #142 BOOTH：タイル1つずつのマージン（gap）を従来の80%に。
   併せてトラックを minmax(0, 1fr) に変更する。
   `1fr` は minmax(auto, 1fr) と同義で、トラックの下限がアイテムの最小コンテンツ幅（＝ロゴ画像の実寸）になるため、
   画像が読めなかったり、Safariが aspect-ratio から最小幅を逆算したりすると
   トラックがコンテナ幅を突き抜けて横スクロールが発生する（iPhoneでBOOTHが画面外にはみ出す原因）。
   minmax(0, 1fr) と min-width/min-height:0 で下限を切り、はみ出しを構造的に起こらなくする。 */
.p-top-booth__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.6rem;
}
@media screen and (max-width: 1024px) {
  .p-top-booth__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
  }
}
@media screen and (max-width: 768px) {
  .p-top-booth__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* #141 SPONSOR：PCは5カラム（ロゴ5点が1行に収まる）。タブレット以下は従来どおり2カラム */
.p-top-sponsor__grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media screen and (max-width: 1024px) {
  .p-top-sponsor__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.p-top-booth__item,
.p-top-sponsor__item {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.p-top-booth__item img,
.p-top-sponsor__item img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
/* SPONSOR：ロゴの上下左右の余白はタイル側の padding で作る。
   （上の max-width/max-height:100% が common.css の 80% 指定を上書きするため、
     ロゴがタイルいっぱいに広がってギチギチに見えていた。padding で内側に逃がす）
   BOOTHタイルは common.css 側に padding 2rem / 1rem があるのでそのまま。 */
.p-top-sponsor__item {
  padding: 12%;
}
@media screen and (max-width: 768px) {
  .p-top-sponsor__item {
    padding: 16%;
  }
}
/* makeshop・買取広告ドットコムのロゴを一回り大きく表示 */
.p-top-sponsor__item--zoom {
  padding: 6%;
}
@media screen and (max-width: 768px) {
  .p-top-sponsor__item--zoom {
    padding: 8%;
  }
}

/* ---------- Floating ticket button ---------- */
.c-floating-ticket {
  position: fixed;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.c-floating-ticket.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.c-floating-ticket.is-menu-open {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 画像版（PC）とテキストピル版（SP）の出し分けは .is-visible に依存させない。
   .is-visible に紐づけると、フェードアウト中（opacity 1→0 の0.3s）に display だけ先に元へ戻り、
   PC用の 400x181 画像が SPのピル内に出て「異常に縦長の角丸長方形」が一瞬見える不具合になる。 */
/* SP: 中央下ピル型ボタン */
@media screen and (max-width: 768px) {
  .c-floating-ticket {
    left: 50%;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 85%;
    max-width: 340px;
    padding: 13px 18px;
    font-size: 1.378125rem;
    font-weight: bold;
    color: #1a1200;
    letter-spacing: 0.02em;
    background: #ec9907;
    border-radius: 999px;
    transform: translate(-50%, 20px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }
  .c-floating-ticket.is-visible {
    transform: translate(-50%, 0);
  }

  .c-floating-ticket img {
    display: none;
  }
  .c-floating-ticket p {
    display: block;
  }
  .c-floating-ticket.is-visible:hover {
    color: #1a1200;
    opacity: 0.85;
  }
  .c-floating-ticket i {
    font-size: 0.8em;
    transition: transform 0.3s ease;
  }
  .c-floating-ticket.is-visible:hover i {
    transform: translateX(3px);
  }
}
/* PC: 元の左下固定・画像ボタン（変更しない） */
@media screen and (min-width: 769px) {
  .c-floating-ticket {
    left: 15px;
    bottom: 25px;
    width: 250px;
    transform: translateY(20px);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
  }
  .c-floating-ticket.is-visible {
    transform: translateY(0);
  }
  .c-floating-ticket.is-visible:hover {
    transform: translateY(0) rotate(-5deg);
  }
  .c-floating-ticket img {
    display: block;
    width: 100%;
    height: auto;
  }
  .c-floating-ticket p {
    display: none;
  }
}
@media screen and (min-width: 1600px) {
  .c-floating-ticket {
    width: 375px;
  }
}

/* ---------- Background video ---------- */
.c-bg-video {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
}
.c-bg-dots {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.4) 0.8px, transparent 0.8px);
  background-size: 2px 2px;
}

/* ---------- 有料バッジ ---------- */
.c-badge-paid {
  display: inline-block;
  margin-top: -5px;
  margin-left: 0.65em;
  padding: 0.07em 0.7em 0.08em 0.7em;
  font-size: 0.55em;
  font-weight: bold;
  line-height: 1.5;
  color: #1a1200;
  letter-spacing: 0.05em;
  white-space: nowrap;
  vertical-align: middle;
  background: #ec9907;
  border-radius: 999px;
}

/* ---------- 懇親会チケット CTA ---------- */
.c-ticket-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  width: 75%;
  margin-bottom: 1.5rem;
  padding: 16px 24px;
  background: rgba(236, 153, 7, 0.1);
  border-radius: 8px;
}
.c-ticket-cta__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.3;
}
.c-ticket-cta__price-label {
  font-size: 1rem;
  font-weight: bold;
  color: #f0efe9;
}
.c-ticket-cta__price-num {
  font-size: 1.75rem;
  font-weight: bold;
  color: #ec9907;
  letter-spacing: 0.02em;
}
.c-ticket-cta__price-unit {
  font-size: 0.875rem;
  font-weight: bold;
  color: #ec9907;
}
.c-ticket-cta__price-original {
  font-size: 0.875rem;
  font-weight: bold;
  color: var(--dark-text-muted);
  text-decoration: line-through;
}
/* PCは従来どおり「参加費（先行価格） 7,000円 / 1名（税込） 通常10,000円」の1行組み。
   SPだけ通常価格を下の行に落とすため、価格部分を __price-body でまとめてある。 */
.c-ticket-cta__price-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.c-ticket-cta__price-main {
  display: inline-flex;
  align-items: baseline;
}
.c-ticket-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  font-size: 1rem;
  font-weight: bold;
  color: #1a1200;
  letter-spacing: 0.05em;
  background: #ec9907;
  border-radius: 999px;
  transition: opacity 0.3s ease;
}
.c-ticket-cta__btn:hover {
  color: #1a1200;
  opacity: 0.8;
}
.c-ticket-cta__btn i {
  font-size: 0.875em;
  transition: transform 0.3s ease;
}
.c-ticket-cta__btn:hover i {
  transform: translateX(3px);
}
.c-ticket-cta__note {
  margin: -0.75rem 0 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--dark-text-muted);
}
@media screen and (max-width: 768px) {
  .c-ticket-cta {
    gap: 12px;
    padding: 14px 12px;
    width: 100%;
  }
  /* SP：通常10,000円を「7,000円 / 1名（税込）」の下の行に落とす。
     ラベル「参加費（先行価格）」は折り返さず1行にし、7,000円の行と下揃え（ベースライン揃え）にする。
     3つとも nowrap なので、狭い幅に収まるようフォントサイズを落としてある */
  .c-ticket-cta__price {
    align-items: baseline;
    gap: 8px;
  }
  .c-ticket-cta__price-label {
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .c-ticket-cta__price-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .c-ticket-cta__price-main {
    white-space: nowrap;
  }
  .c-ticket-cta__price-num {
    font-size: 1.375rem;
  }
  .c-ticket-cta__price-unit {
    font-size: 0.6875rem;
  }
  .c-ticket-cta__price-original {
    font-size: 0.75rem;
  }
  .c-ticket-cta__btn {
    justify-content: center;
    width: 100%;
    padding: 12px 20px;
  }
}

/* ---------- しくじり先生枠：登壇者グループ見出し ---------- */
.p-top-program__group-heading {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: bold;
  color: #ec9907;
}

/* ---------- プログラム サブ見出し ---------- */
.p-top-program__heading_sub {
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 3.5rem;
  margin-top: -20px;
}

/* ---------- セクション見出し横の補足テキスト ----------
   BOOTHは既存の .p-top-booth__wrapper がflexなのでそのまま並ぶ。
   SPONSORのように見出しを囲む要素が無いセクションは .c-heading-row で囲む */
.c-heading-row {
  display: flex;
  align-items: baseline;
}
.c-heading-note {
  margin-left: 24px;
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: #ffff4b;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  /* SPは横に並べると見出しごと潰れるので折り返す */
  .p-top-booth__wrapper,
  .c-heading-row {
    flex-wrap: wrap;
  }
  .c-heading-note {
    margin-left: 8px;
    font-size: 1.1rem;
    white-space: normal;
  }
}

.banner_wrapper {
  text-align: center;
}

  .display_banner_pc {
    display: none;
  }
  .display_banner_sp {
    display: inline-block;
  }

@media screen and (min-width: 769px) {
  .display_banner_pc {
    display: inline-block;
  }
  .display_banner_sp {
    display: none;
  }
}

/* ---------- SP: フローティングCTAでフッターが隠れないようにする ----------
   .c-floating-ticket は SP で bottom:20px の固定ピル（高さ約60px）。
   その下にフッターの連絡先・コピーライトが潜り込むので、footer に逃げ分の余白を足す。
   iPhone のホームバー分も safe-area-inset-bottom で足しておく。 */
@media screen and (max-width: 768px) {
  .l-footer {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- PROGRAM 写真のみ枠（シルエット / Coming Soon…）のSP調整 ----------
   common.css は tablet/SP で `.is-photos-only .p-top-program__speaker` を width/height:100px に固定しているため、
   名前付き登壇者の写真（行が grid-template-columns: 1fr 1fr 2.5fr なので写真は行幅の約1/4.5＝可変。SPで約65px）より
   Coming Soon… の方が大きく見えていた。枠を可変にして写真サイズを揃える。 */
@media screen and (max-width: 1024px) {
  .p-top-program__speaker-wrapper2.is-photos-only .p-top-program__speaker {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
  }
  /* リユースパネルディスカッションの Coming Soon…（1枚だけの枠）を
     名前付き登壇者の写真と同じ大きさに（行幅の約22.2%＝1fr / 4.5fr） */
  .p-top-program__speaker-wrapper2.is-photos-only.is-count-1 {
    max-width: 22.2%;
  }
}
/* SP：しくじり先生「生徒役」の Coming Soon…（5枚）は3列並びにする。
   is-count-2 / is-count-4 は common.css 側に個別指定があるため影響しない（生徒役の is-count-5 のみ base に該当）。 */
@media screen and (max-width: 768px) {
  .p-top-program__speaker-wrapper2.is-photos-only {
    grid-template-columns: repeat(3, 1fr);
    max-width: 216px;
  }
}