/* ============================================================
   style.css — セクション固有。HTML にセクションが出てくる順番どおりに書く。
   値は tokens.css の変数のみ。
   ============================================================ */

/* ===== header ===== */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-height);
}

/* 背景は疑似要素に持たせる(.header に backdrop-filter を付けると
   子の position: fixed の包含ブロックになり、モバイルメニューが壊れる) */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-header-bg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.header.is-scrolled::before,
.header.is-open::before {
  opacity: 1;
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 100%;
  padding-inline: var(--space-4);
}

.header__logo {
  flex: none;
}

.header__logo img {
  height: var(--logo-h);
  width: auto;
}

/* デスクトップの並びは ナビ → JP/EN → Ticket。JP/EN はモバイルでメニューの外に出すため HTML では
   .header__menu の外にある。display: contents で中身を .header__inner に並べ、order で順番を決める */
.header__menu {
  display: contents;
}

.header__nav {
  order: 1;
  margin-left: auto;
}

.header__cta {
  order: 3;
}

.header__list {
  display: flex;
  gap: var(--space-4);
}

.header__link {
  position: relative;
  display: inline-block;
  padding: var(--space-1) 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: italic;
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  line-height: 1;
}

.header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--line-w);
  background: var(--color-sub);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out);
}

.header__lang {
  order: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: italic;
  font-size: var(--text-body);
  letter-spacing: var(--tracking-lang);
  color: var(--color-text-muted);
}

.header__lang-link[aria-current="page"] {
  color: var(--color-text);
}

.header__toggle {
  display: none;
  position: relative;
  width: var(--tap);
  height: var(--tap);
}

.header__toggle-bar,
.header__toggle-bar::before,
.header__toggle-bar::after {
  position: absolute;
  left: 50%;
  width: var(--icon);
  height: var(--line-w);
  background: var(--color-text);
  transition: transform var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.header__toggle-bar {
  top: 50%;
  transform: translate(-50%, -50%);
}

.header__toggle-bar::before,
.header__toggle-bar::after {
  content: "";
  transform: translateX(-50%);
}

.header__toggle-bar::before { top: calc(var(--space-2) * -1); }
.header__toggle-bar::after  { top: var(--space-2); }

.header.is-open .header__toggle-bar { background: transparent; }
.header.is-open .header__toggle-bar::before { transform: translateX(-50%) translateY(var(--space-2)) rotate(45deg); }
.header.is-open .header__toggle-bar::after  { transform: translateX(-50%) translateY(calc(var(--space-2) * -1)) rotate(-45deg); }

@media (hover: hover) and (pointer: fine) {
  .header__link:hover::after {
    transform: scaleX(1);
  }

  .header__lang-link:hover {
    color: var(--color-sub);
  }
}

@media (max-width: 1023px) {
  .header__inner {
    gap: var(--space-2);
  }

  .header__toggle {
    display: block;
    flex: none; /* 狭い幅でもタップ領域を保つ */
  }

  .header__menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--header-height) var(--space-5) var(--space-6);
    background: var(--color-bg); /* 不透明。ヒーローの文字やボタンが透けて二重に見えないように */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) var(--ease-out),
                visibility 0s linear var(--duration-fast);
  }

  .header.is-open .header__menu {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .header__nav {
    margin-left: 0;
  }

  .header__list {
    flex-direction: column;
    gap: var(--space-3);
  }

  .header__link {
    font-size: var(--text-display-md);
  }

  /* ハンバーガーの左隣に常に出す。メニューを開いても見えたまま */
  .header__lang {
    order: 0;
    gap: 0;
    margin-left: auto;
    text-shadow: var(--shadow-label); /* ヒーローの写真の明るい部分でも読めるように */
  }

  .header__lang-link {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding-inline: var(--space-1);
  }

  html.is-nav-open {
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .header {
    height: var(--header-height-sp);
  }

  .header__inner {
    padding-inline: var(--gutter);
  }

  .header__logo img {
    height: var(--logo-h-sp);
  }

  .header__menu {
    padding-top: var(--header-height-sp);
  }
}

/* ===== #hero =====
   固定ヒーロー。section 自体を sticky にし、後続セクションが上に被さる。
   退場時に写真が opacity と scale だけ変化する。対応ブラウザはブロック末尾のスクロール連動アニメーションで動かし
   (メインスレッドを使わないので滑らか)、非対応なら js/scroll-progress.js が書く --p で動かす。 */
.hero {
  --p: 0;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--vh-load);
  min-height: var(--hero-min-h);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--color-bg); /* 退場後に斜めの切り口から見えるのは既定の黒 */
}

.hero__media {
  position: absolute;
  inset: 0;
}

/* 写真の上端を暗くして透明ヘッダーのロゴを読めるようにする */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-content);
  height: calc(var(--header-height) * 2);
  background: linear-gradient(to bottom, var(--color-overlay-strong), transparent);
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(calc(1 + var(--p) * (var(--hero-zoom) - 1)));
  opacity: calc(1 - var(--p)); /* p=1 で完全に消す */
  will-change: transform, opacity;
}

/* 写真の下端に黒のグラデーションを敷いて文字を乗せる */
.hero__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(to top, var(--color-overlay-strong), transparent);
}

.hero__body {
  position: relative;
  z-index: var(--z-content);
  grid-row: 2;
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--space-7);
  text-shadow: var(--shadow-text);
  opacity: calc(1 - var(--p) * 1.5);
  will-change: opacity; /* 影つきの文字を毎回描き直さない */
}

.hero__label {
  margin-bottom: var(--space-1);
  text-shadow: var(--shadow-label); /* 写真の明るい部分にかかっても細い字を読ませる */
}

.hero__date {
  color: var(--color-accent);
  text-shadow: var(--shadow-text), var(--glow-accent);
}

.hero__venue {
  display: grid;
  gap: 0;
}

.hero__venue-sub {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-small);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.hero__scroll {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: italic;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  opacity: calc(1 - var(--p) * 2);
}

.hero__scroll::after {
  content: "";
  width: var(--scroll-line-w);
  height: var(--hairline);
  background: var(--color-sub);
  transform-origin: left;
  animation: hero-scroll-line 1.8s var(--ease-out) infinite;
}

@keyframes hero-scroll-line {
  0%   { transform: scaleX(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

@keyframes hero-photo-out {
  to { transform: scale(var(--hero-zoom)); opacity: 0; }
}

@keyframes hero-fade-out {
  to { opacity: 0; }
}

/* JS 版と同じ進み方: 写真は --hero-exit で消えきる、文字は 1/1.5、SCROLL は 1/2 の位置で消える */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media img {
      animation: hero-photo-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 var(--hero-exit);
    }

    .hero__body {
      animation: hero-fade-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 calc(var(--hero-exit) / 1.5);
    }

    .hero__scroll {
      animation: hero-fade-out linear both;
      animation-timeline: scroll(root);
      animation-range: 0 calc(var(--hero-exit) / 2);
    }
  }
}

@media (max-width: 768px) {
  /* モバイルはポスターの切り出しを上に置き、文字はその下。ロゴを切らない */
  .hero {
    grid-template-rows: auto 1fr;
  }

  .hero__media {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    height: var(--hero-media-h-sp);
    /* 下端を斜めに落とす(水平な帯で積まない) */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  }

  /* 切り捨ては上側に寄せ、下寄りのロゴを残す(768 で効く。375 は高さフィットで影響なし) */
  .hero__media img {
    object-position: center bottom;
  }

  .hero__media::before {
    height: calc(var(--header-height-sp) * 2);
  }

  .hero__media::after {
    height: 40%;
  }

  .hero__body {
    grid-row: 2;
    align-content: center;
    padding-block: var(--space-4) var(--space-7);
  }

  .hero__scroll {
    right: var(--gutter);
    bottom: var(--space-4);
  }
}

/* ===== #statement =====
   斜めに切った紺の帯。英字の大見出し1行 + 和文。背景に光線(CSS のみ)。 */
.statement {
  --color-sub: var(--color-sub-on-navy); /* ネイビー地ではシアンを明るい版に差し替える(ラベル・フォーカス枠) */
  z-index: var(--z-overlap); /* 下辺の斜めの切り口から、潜り込んだ #highlights の写真が見えるように上に描く */
  background: var(--color-navy);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  padding-block: calc(var(--space-section) + var(--cut));
  overflow: hidden;
}

/* 光線: 細いシアンとイエローの斜線が、別々の位置からゆっくり流れる(面で塗らない) */
.statement::before,
.statement::after {
  content: "";
  position: absolute;
  inset: -20% -10%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 49.4%, var(--color-sub-glow) 50%, transparent 50.6%);
  animation: statement-ray 11s linear infinite;
}

.statement::after {
  inset: -20% -40% -20% 20%;
  background: linear-gradient(110deg, transparent 49.6%, var(--color-accent-glow) 50%, transparent 50.4%); /* 角度を変えて2本が重ならないように */
  animation-duration: 17s;
  animation-delay: -9s;
  animation-direction: reverse;
}

@keyframes statement-ray {
  from { transform: translateX(-30%); }
  to   { transform: translateX(30%); }
}

.statement__inner {
  position: relative;
  z-index: var(--z-content); /* 光線(疑似要素)より上に文字を描く */
  display: grid;
  gap: var(--space-3);
}

.statement__title {
  color: var(--color-text);
}

.statement__copy {
  margin-top: var(--space-3);
}

.statement__text {
  max-width: var(--container-narrow);
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .statement {
    padding-block: calc(var(--space-section-sp) + var(--cut));
  }
}

/* ===== #highlights =====
   背景に会場写真をパララックスで敷く。写真を上下 --parallax-bleed ぶんはみ出させた範囲で動かす。
   対応ブラウザはスクロール連動アニメーション、非対応なら js/scroll-progress.js が書く --p(0〜1)で動かす。
   カードは黒の面で文字を守る。 */
.highlights {
  position: relative;
  overflow: clip; /* hidden だとはみ出した写真の分だけ内部スクロールでき、ページ内検索などでずれる */
  margin-top: calc(var(--cut) * -1); /* #statement の斜めの下辺に潜り込み、境界に黒を覗かせない */
  padding-top: calc(var(--space-section) + var(--cut));
  background: var(--color-navy-deep);
}

.highlights__bg {
  position: absolute;
  inset: calc(var(--parallax-bleed) * -1) 0;
  width: 100%;
  height: calc(100% + var(--parallax-bleed) * 2);
  object-fit: cover;
  object-position: center;
  transform: translateY(calc((var(--p, 0.5) - 0.5) * 20%));
  will-change: transform;
}

@keyframes highlights-parallax {
  from { transform: translateY(-10%); }
  to   { transform: translateY(10%); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .highlights {
      view-timeline: --highlights-view block;
    }

    .highlights__bg {
      animation: highlights-parallax linear both;
      animation-timeline: --highlights-view;
      animation-range: cover;
    }
  }
}

/* オーバーレイ(写真の上・内容の下) */
.highlights::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--color-overlay-strong), var(--color-overlay) 50%, var(--color-overlay-strong));
}

.highlights > .container {
  position: relative;
  z-index: var(--z-content);
}

/* 写真の上に直接乗る小ラベル(カードの中は黒の面があるので不要) */
.highlights .section-title .label {
  text-shadow: var(--shadow-label);
}

.highlights__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.highlights__card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  background: var(--color-overlay-strong);
}

.highlights__title {
  margin-top: var(--space-1);
  text-wrap: balance;
  word-break: auto-phrase; /* 和文を文節で折り返し、末尾1文字だけの行を作らない */
}

.highlights__text {
  color: var(--color-text-muted);
}

.highlights__note {
  font-size: var(--text-small);
  padding-top: var(--space-3);
  border-top: var(--hairline) solid var(--color-line);
}

@media (max-width: 1023px) {
  .highlights__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .highlights {
    padding-top: calc(var(--space-section-sp) + var(--cut));
  }
}

/* ===== #live =====
   フルブリード写真。セクションを 1.5 画面分にし、中身を sticky で 1 画面分留める(--fullbleed-h / --vh-photo)。
   スクロールすると写真が「窓」の中で動いて見える。JS 不要。 */
.live {
  position: relative;
  z-index: var(--z-content);
  height: var(--fullbleed-h);
  background: var(--color-bg);
}

.live__sticky {
  position: sticky;
  top: 0;
  height: var(--vh-photo);
  overflow: hidden;
  display: grid;
  align-items: end;
}

.live__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 黒〜紺のオーバーレイ(DESIGN.md: 40〜60%)+ 文字が乗る下側は高くまで暗く */
.live__sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-content); /* 写真(.live__media)より上に描く */
  background:
    linear-gradient(to top, var(--color-overlay-strong), transparent 85%),
    var(--color-overlay);
}

.live__body {
  position: relative;
  z-index: var(--z-content); /* 同じ層の中では DOM 順なので、オーバーレイより上に乗る */
  display: grid;
  gap: var(--space-2);
  padding-bottom: calc(var(--space-section) + var(--vh-photo) - var(--vh-load)); /* 写真が画面より高い分だけ文字を上げ、バーの裏に隠さない */
  text-shadow: var(--shadow-text);
}

.live__body .label {
  text-shadow: var(--shadow-label); /* 写真の上の小ラベル */
}

.live__title {
  color: var(--color-text);
}

@media (max-width: 768px) {
  .live__body {
    padding-bottom: calc(var(--space-section-sp) + var(--vh-photo) - var(--vh-load));
  }
}

/* ===== #gallery =====
   横に流れるループ帯。リストを2つ並べ、トラックを -50% まで動かす。CSS のみ。 */
.gallery {
  z-index: var(--z-overlap); /* 下端の影を #schedule の写真より上に描く */
  padding-block: var(--space-6);
  overflow: hidden;
  box-shadow: 0 var(--line-w) 0 var(--color-bg); /* 境目が小数の位置に来ると、留めた写真が 1 行覗くので黒で隠す */
}

.gallery__track {
  display: flex;
  width: max-content;
  animation: gallery-scroll var(--gallery-duration) linear infinite;
}

.gallery__list {
  display: flex;
  gap: var(--space-3);
  padding-right: var(--space-3);
}

.gallery__list img {
  height: var(--gallery-h);
  width: auto;
  object-fit: cover;
}

.gallery__caption {
  display: block;
  padding: var(--space-4) var(--gutter) 0;
  text-align: right;
  color: var(--color-text-muted);
}

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

@media (hover: hover) and (pointer: fine) {
  .gallery__track:hover {
    animation-play-state: paused;
  }
}

@media (max-width: 768px) {
  .gallery {
    padding-block: var(--space-5);
  }

  .gallery__list img {
    height: var(--gallery-h-sp);
  }
}

/* ===== #schedule =====
   競技スケジュール(日別の表)。背景の写真は画面に留め、その上を表がスクロールする(縦に長くても写真が切れない)。
   写真はセクションを通過する間にゆっくり拡大する。対応ブラウザはスクロール連動アニメーション、
   非対応なら js/scroll-progress.js が .schedule__bg に書く --p で動かす。
   下端は #ticket の斜めの上辺に潜り込ませ、切り口に黒を覗かせない。
   768px 以下は表の各行を「時刻 + 縦積みの内容」に組み替える。 */
.schedule {
  overflow: clip; /* 留めた写真を下端で切る。hidden だと sticky が効かない */
  margin-bottom: calc(var(--cut) * -1);
  padding-block: 0;
}

/* 上辺の斜めの切り口。縦に長いセクション全体を clip-path で切ると、留めた写真と重なって
   スクロールが重くなるので、上端の三角形だけを黒で塗る */
.schedule::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: var(--z-content);
  height: var(--cut);
  background: var(--color-bg);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* 高さ分を負のマージンで打ち消し、内容をセクションの先頭から重ねる */
.schedule__bg {
  position: sticky;
  top: 0;
  height: var(--vh-photo);
  margin-bottom: calc(var(--vh-photo) * -1);
  overflow: hidden; /* 拡大した写真をはみ出させない */
}

.schedule__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1 + var(--p, 0) * (var(--schedule-zoom) - 1)));
  will-change: transform;
}

@keyframes schedule-zoom {
  from { transform: scale(1); }
  to   { transform: scale(var(--schedule-zoom)); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .schedule {
      view-timeline: --schedule-view block;
    }

    .schedule__bg img {
      animation: schedule-zoom linear both;
      animation-timeline: --schedule-view;
      animation-range: cover;
    }
  }
}

.schedule__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-overlay-strong); /* 写真の明るい部分に重なっても、赤とシアンの項目名が 4.5:1 を保つ濃さ */
}

.schedule > .container {
  position: relative;
  z-index: var(--z-content);
  padding-block: calc(var(--space-section) + var(--cut));
}

.schedule .section-title .label {
  text-shadow: var(--shadow-label);
}

.schedule__day + .schedule__day {
  margin-top: var(--space-7);
}

.schedule__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

/* 日付はイエロー(DESIGN.md: イエローは行動と日付・価格のみ) */
.schedule__date {
  color: var(--color-accent);
}

.schedule__table {
  width: 100%;
  table-layout: fixed; /* 2日分の表で列の位置をそろえる */
  border-collapse: collapse;
}

.schedule__table th,
.schedule__table td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: baseline;
}

/* 罫線は行に引く(セルごとだと半透明の線が列の境目で重なって点が出る) */
.schedule__table tr {
  border-bottom: var(--hairline) solid var(--color-line);
}

.schedule__table thead th {
  padding-block: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: italic;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.schedule__table thead th:first-child {
  width: var(--schedule-time-w);
  padding-left: 0;
}

.schedule__time {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: italic;
  font-size: var(--text-heading-md);
  font-variant-numeric: tabular-nums;
}

/* 時刻の代わりの注記の印。項目名と同じ本文書体にして基準線をそろえる */
.schedule__time--note {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: var(--weight-body);
  font-size: var(--text-body);
  color: var(--color-text-muted);
}

.schedule__table .schedule__time {
  padding-left: 0;
}

.schedule__table .schedule__name {
  font-weight: var(--weight-bold);
}

/* 斜めの印は競技の行に付ける(KV の X 字の角度)。セレモニーには付けない。
   男女混合の予選は白(--all)、Women's は赤、Men's はシアン。
   色だけに頼らないよう、名前の Women's / Men's はそのまま出す */
.schedule__table .schedule__name--women {
  color: var(--color-women);
}

.schedule__table .schedule__name--men {
  color: var(--color-men);
}

/* 印の幅 + 余白(--space-3)ぶんをぶら下げ、折り返した2行目を項目名の頭にそろえる */
.schedule__table .schedule__name--all,
.schedule__table .schedule__name--women,
.schedule__table .schedule__name--men {
  padding-left: calc(var(--space-3) * 2);
  text-indent: calc(var(--space-3) * -1);
}

.schedule__name--all::before,
.schedule__name--women::before,
.schedule__name--men::before {
  content: "";
  display: inline-block;
  width: var(--space-2);
  height: 1em;
  margin-right: var(--space-2);
  background: currentColor;
  transform: skewX(calc(var(--skew) * -2));
  vertical-align: -0.1em;
}

.schedule__table .schedule__detail {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.schedule__note {
  margin-top: var(--space-3);
  font-size: var(--text-small);
}

@media (max-width: 768px) {
  .schedule__bg img {
    object-position: var(--schedule-bg-pos-sp);
  }

  .schedule > .container {
    padding-block: calc(var(--space-section-sp) + var(--cut));
  }

  .schedule__day + .schedule__day {
    margin-top: var(--space-6);
  }

  .schedule__table,
  .schedule__table tbody {
    display: block;
  }

  /* 縦積みでは列の見出しが宙に浮くので出さない */
  .schedule__table thead {
    display: none;
  }

  .schedule__table tr {
    display: grid;
    grid-template-columns: var(--schedule-time-w) 1fr;
    align-items: baseline;
    row-gap: var(--space-1);
    padding-block: var(--space-3);
  }

  .schedule__table th,
  .schedule__table td {
    padding: 0;
  }

  .schedule__table .schedule__name--all,
  .schedule__table .schedule__name--women,
  .schedule__table .schedule__name--men {
    padding-left: var(--space-3);
  }

  .schedule__table .schedule__time {
    grid-row: 1 / span 3;
  }

  .schedule__table .schedule__name,
  .schedule__table .schedule__detail {
    grid-column: 2;
  }

  /* セレモニーなど、内容のない欄は詰める */
  .schedule__table .schedule__detail:empty {
    display: none;
  }
}

/* ===== #ticket =====
   背景のリズム: 写真(schedule)→ 紺(ticket、上下を斜めに切る)→ 黒(worldbattle)→ 紺(access)→ 黒(outline)→ ブランドネイビー(contact) */
.ticket {
  background: var(--color-navy-deep);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
  padding-block: calc(var(--space-section) + var(--cut));
}

.ticket__lead {
  margin-top: calc(var(--space-6) * -1);
  margin-bottom: var(--space-5);
  font-size: var(--text-small);
}

.ticket__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.ticket__card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.ticket__name {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.ticket__kind {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-small);
}

/* 価格はイエローの大きなコンデンス数字(DESIGN.md: イエローは行動と日付・価格のみ) */
.ticket__price {
  color: var(--color-accent);
  margin-block: var(--space-2);
}

.ticket__yen {
  font-size: 0.5em;
  margin-right: var(--space-1);
}

.ticket__text {
  color: var(--color-text-muted);
}

/* --- 座席図(SVG を HTML に直接書く。色・文字はここから当てる) --- */
.ticket__map {
  margin-top: var(--space-7);
}

.ticket__map-title {
  margin-bottom: var(--space-4);
}

/* 横スクロールの案内はモバイルだけ */
.ticket__map-hint {
  display: none;
  font-size: var(--text-small);
  margin-bottom: var(--space-2);
}

.ticket__map-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.ticket__map-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-heading);
}

/* 座席: EXP=イエロー / S=シアン / A=白(muted) */
.ticket__map-seat--exp {
  fill: var(--color-accent);
}

.ticket__map-seat--s {
  fill: var(--color-sub);
}

.ticket__map-seat--a {
  fill: var(--color-text-muted);
}

.ticket__map-wheel {
  fill: none;
  stroke: var(--color-text);
  stroke-width: var(--line-w);
}

.ticket__map-frame {
  fill: none;
  stroke: var(--color-line-input);
}

.ticket__map-stage {
  fill: var(--color-navy);
  stroke: var(--color-line-input);
  stroke-width: var(--line-w);
}

.ticket__map-judge {
  fill: var(--color-text-muted);
}

.ticket__map-label {
  fill: var(--color-text);
  font-weight: var(--weight-bold);
}

.ticket__map-label--strong {
  font-weight: var(--weight-heading);
}

.ticket__map-label--vertical {
  writing-mode: vertical-rl;
  letter-spacing: var(--tracking-nav);
}

.ticket__map-num {
  fill: var(--color-text-muted);
}

/* 凡例(色だけに頼らず「場所」も文字で書く) */
.ticket__map-caption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-5);
}

.ticket__map-legend {
  border-collapse: collapse;
  font-size: var(--text-small);
}

.ticket__map-legend th,
.ticket__map-legend td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--hairline) solid var(--color-line);
  text-align: left;
  white-space: nowrap;
}

.ticket__map-legend thead th {
  color: var(--color-text-muted);
  font-weight: var(--weight-body);
}

/* 「席数」の見出しは数字の列に合わせて右寄せ */
.ticket__map-legend thead th:last-child {
  text-align: right;
}

.ticket__map-legend td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ticket__map-swatch {
  display: inline-block;
  width: var(--space-4);
  height: var(--space-3);
  margin-right: var(--space-2);
  vertical-align: middle;
}

.ticket__map-swatch--exp {
  background: var(--color-accent);
}

.ticket__map-swatch--s {
  background: var(--color-sub);
}

.ticket__map-swatch--a {
  background: var(--color-text-muted);
}

.ticket__map-swatch--wheel {
  border: var(--line-w) solid var(--color-text);
}

.ticket__map-notes {
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-small);
  list-style: none;
}

.ticket__sale {
  display: grid;
  gap: var(--space-5);
  max-width: var(--container-narrow);
  margin: var(--space-6) auto 0;
}

/* 和文混じりなので Noto(Barlow を和文に当てない)。日付だけイエロー */
.ticket__period dd {
  font-weight: var(--weight-bold);
  font-size: var(--text-heading-md);
  line-height: var(--leading-heading);
}

.ticket__period time {
  color: var(--color-accent);
  white-space: nowrap;
}

.ticket__actions {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.ticket__external,
.ticket__note {
  font-size: var(--text-small);
}

.ticket__note {
  text-align: center;
}

@media (max-width: 1023px) {
  .ticket__list {
    grid-template-columns: 1fr;
  }

  .ticket__map-caption {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ticket {
    padding-block: calc(var(--space-section-sp) + var(--cut));
  }

  .ticket__lead {
    margin-top: calc(var(--space-5) * -1);
  }

  .ticket__map {
    margin-top: var(--space-6);
  }

  /* 図だけ横スクロール(案内を出す) */
  .ticket__map-hint {
    display: block;
  }

  .ticket__map-svg {
    min-width: var(--ticket-map-min-w);
  }

  /* 凡例の表は画面幅に収める。「場所」と見出しは折り返し、席数だけ1行に保つ */
  .ticket__map-legend {
    width: 100%;
  }

  .ticket__map-legend th,
  .ticket__map-legend td {
    white-space: normal;
    padding-inline: var(--space-2);
  }

  .ticket__map-legend td:last-child,
  .ticket__map-legend thead th:last-child {
    white-space: nowrap;
  }

  /* 列幅が狭く席種名が折り返すので、色見本は名前の上に置いて全行で揃える */
  .ticket__map-swatch {
    display: block;
    margin-bottom: var(--space-1);
  }
}

/* ===== #worldbattle =====
   付帯イベント。写真 + 説明の型(DESIGN.md)。見出しはフルブリードより一段控える。 */
.worldbattle__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
}

.worldbattle__media {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}

.worldbattle__body {
  display: grid;
  gap: var(--space-3);
}

.worldbattle__text {
  color: var(--color-text-muted);
}

.worldbattle__sub {
  font-size: var(--text-small);
}

@media (max-width: 1023px) {
  .worldbattle__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ===== #access ===== */
.access {
  background: var(--color-navy-deep);
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut)));
  padding-block: calc(var(--space-section) + var(--cut));
}

.access__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.access__map iframe {
  width: 100%;
  height: var(--map-h);
  border: 0;
  /* 黒系に寄せる(DESIGN.md: 地図は黒系フィルタ) */
  filter: invert(0.9) hue-rotate(180deg) saturate(0.6) brightness(0.9);
}

.access__info {
  display: grid;
  gap: var(--space-4);
}

.access__note {
  padding: var(--space-3) var(--space-4);
  border-left: var(--line-w) solid var(--color-line);
  font-size: var(--text-small);
}

@media (max-width: 1023px) {
  .access__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .access {
    padding-block: calc(var(--space-section-sp) + var(--cut));
  }

  .access__map iframe {
    height: var(--map-h-sp);
  }
}

/* ===== #outline ===== */
.outline__dl dd {
  line-height: var(--leading-body);
}

/* ===== #contact =====
   MailFormPro の同梱 CSS は読み込まない。入力欄・確認画面・エラー表示をここで定義する。
   背景はブランドネイビー(上を斜めに切る)。 */
.contact {
  --color-sub: var(--color-sub-on-navy); /* ネイビー地ではシアンを明るい版に差し替える(ラベル・リンク・フォーカス) */
  background: var(--color-navy);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--space-section) + var(--cut));
  padding-bottom: calc(var(--space-section) + var(--cut)); /* footer が --cut ぶん潜り込むので、その分を足す */
}

.contact__lead {
  margin-bottom: var(--space-6);
  color: var(--color-text-muted);
}

/* シアンはネイビー地で 4.5:1 に届かないため、文字は白・下線で示し、hover でだけシアンにする */
.contact__press {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 項目の間隔は gap ではなく margin で取る。MailFormPro は確認画面から戻ると
   form に style="display:block" を直接書くため、grid の gap が消えてしまう */
.contact__form {
  display: block;
}

/* ハニーポット: 画面外に置く(display:none だとボットが無視する)。見た目は .visually-hidden と同じ */
.contact__hp {
  position: absolute;
  width: var(--hairline);
  height: var(--hairline);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact__field {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.contact__label {
  font-weight: var(--weight-bold);
  font-size: var(--text-small);
}

/* 「必須」は添え字なので Noto・小さめ。ネイビー地でシアンは読みにくいので muted */
.contact__req {
  margin-left: var(--space-2);
  font-weight: var(--weight-bold);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

/* 黒地に白の下線入力欄 */
.contact__input {
  width: 100%;
  min-height: var(--input-h);
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--color-line-input);
  border-radius: 0;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

/* フォーカス中は下線をシアンの 2px に(box-shadow で足すので高さは変わらない) */
.contact__input:focus {
  outline: none;
  border-bottom-color: var(--color-sub);
  box-shadow: 0 calc(var(--line-w) - var(--hairline)) 0 var(--color-sub);
}

.contact__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
                    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - var(--space-3) - var(--space-2)) center, calc(100% - var(--space-3)) center;
  background-size: var(--space-2) var(--space-2);
  background-repeat: no-repeat;
  padding-right: var(--space-6);
  cursor: pointer;
}

.contact__select option {
  color: var(--color-on-accent);
  background: var(--color-text);
}

.contact__textarea {
  min-height: var(--textarea-h);
  resize: vertical;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* --- MailFormPro が生成する要素 ---
   同梱 CSS を読まないので、同梱 CSS が「既定で隠す」役目もここで引き継ぐ。
   エラー・確認画面・送信中の表示は、MailFormPro の JS が style.display を直接書き換えて出す。 */

/* 送信用の隠し部品(type=submit を含む)。画面外に置く */
#mfp_hidden {
  position: absolute;
  width: var(--hairline);
  height: var(--hairline);
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#mfp_error,
#mfp_warning,
.mfp_err,
#mfp_overlay,
#mfp_overlay_background,
#mfp_loading_screen,
#mfp_loading {
  display: none;
}

/* 確認画面(オーバーレイ)。位置と幅は JS が書く */
#mfp_overlay {
  position: absolute;
  z-index: var(--z-mfp-overlay);
}

#mfp_overlay_background,
#mfp_loading_screen {
  position: absolute;
  background: var(--color-bg);
}

#mfp_overlay_background {
  z-index: var(--z-mfp-overlay-bg);
}

#mfp_loading_screen {
  z-index: var(--z-mfp-loading-screen);
}

/* 送信中の回転マーク(同梱の GIF の代わり)。位置は JS が書く */
#mfp_loading {
  position: absolute;
  z-index: var(--z-mfp-loading);
  width: var(--mfp-loading-size);
  height: var(--mfp-loading-size);
  border: var(--line-w) solid var(--color-line);
  border-top-color: var(--color-accent);
  border-radius: var(--radius-pill);
  animation: contact-spin var(--duration) linear infinite;
}

@keyframes contact-spin {
  to {
    transform: rotate(1turn);
  }
}

.mfp_err {
  margin-top: var(--space-1);
  font-size: var(--text-small);
  color: var(--color-accent);
}

/* 確認画面の見出し(オーバーレイ表示でも同じ h4 が出る) */
#mfp_phase_confirm h4,
#mfp_overlay_inner h4 {
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-heading-md);
}

#mfp_confirm_table {
  width: 100%;
  border-collapse: collapse;
  border-top: var(--hairline) solid var(--color-line);
  margin-bottom: var(--space-5);
}

#mfp_confirm_table th,
#mfp_confirm_table td {
  padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

#mfp_confirm_table th {
  width: 10em;
  padding-right: var(--space-4);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  white-space: nowrap;
}

#mfp_confirm_table tr.mfp_colored,
#mfp_confirm_table tr.mfp_achroma {
  background: transparent;
}

.mfp_buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* 確認画面の「送信する」「キャンセル」(JS が生成するので class を足せない。id で当てる)。
   .mfp_element_submit で当てると、MailFormPro が同じ class を付ける「確認画面へ」(.btn--ja)まで上書きしてしまう。
   ラベルは日英とも JS の文言なので、和文でも崩れない Noto で .btn--ja と同じ形にする */
#mfp_button_send,
#mfp_button_cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--input-h);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
  line-height: 1;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

#mfp_button_send {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--glow-accent);
}

#mfp_button_cancel {
  color: var(--color-text);
  border: var(--hairline) solid var(--color-line);
}

#mfp_overlay_inner {
  width: var(--mfp-overlay-w);
  max-width: calc(100% - var(--space-3) * 2);
  margin: 0 auto;
  background: var(--color-navy-deep);
  color: var(--color-text);
  padding: var(--space-4);
  border: var(--hairline) solid var(--color-line);
  box-shadow: var(--shadow-text);
}

#mfp_warning,
#mfp_error {
  padding: var(--space-3) var(--space-4);
  border-left: var(--line-w) solid var(--color-accent);
  margin-bottom: var(--space-4);
}

@media (hover: hover) and (pointer: fine) {
  .contact__press:hover {
    color: var(--color-sub);
  }

  #mfp_button_send:hover {
    transform: translateY(calc(var(--lift) * -1));
  }

  #mfp_button_cancel:hover {
    border-color: var(--color-sub);
    color: var(--color-sub);
  }
}

@media (max-width: 768px) {
  .contact {
    padding-top: calc(var(--space-section-sp) + var(--cut));
    padding-bottom: calc(var(--space-section-sp) + var(--cut));
  }

  #mfp_confirm_table th,
  #mfp_confirm_table td {
    display: block;
    width: 100%;
  }

  #mfp_confirm_table th {
    padding-bottom: 0;
    border-bottom: 0;
    font-size: var(--text-small);
  }
}

/* ===== #thanks(thanks.html のみ) ===== */
.thanks {
  min-height: 70lvh;
  padding-top: calc(var(--space-section) + var(--header-height));
}

.thanks__text {
  max-width: var(--container-narrow);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
  .thanks {
    padding-top: calc(var(--space-section-sp) + var(--header-height-sp));
  }
}

/* ===== footer ===== */
.footer {
  position: relative;
  z-index: var(--z-content);
  margin-top: calc(var(--cut) * -1); /* 上辺の斜めの切り口から #contact のネイビーが見えるように潜り込む */
  background: var(--color-navy-deep);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  padding-block: calc(var(--space-section) + var(--cut)) var(--space-6);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-7);
  align-items: start;
}

.footer__logo {
  grid-column: 1 / -1;
  max-width: var(--footer-logo-w);
}

.footer__org {
  display: grid;
  gap: var(--space-3);
  font-size: var(--text-small);
}

/* 和文ラベルは Noto(Barlow を和文に当てない) */
.footer__org dt {
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: italic;
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

/* 英語版の「日本語」リンク: Barlow には和文が無いので Noto・正体に戻す
   (:lang(ja) だと日本語ページの全リンクに当たるので、lang 属性を直接付けたものだけ) */
.footer__list a[lang="ja"] {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-style: normal;
}

/* 久留米市観光サイトへのバナー。地色が紺なので枠は付けず、hover で少し浮かせるだけ */
.footer__banner {
  grid-column: 1 / -1;
  justify-self: start;
  width: var(--footer-banner-w);
  max-width: 100%;
  transition: transform var(--duration-fast) var(--ease-out);
}

.footer__copy {
  grid-column: 1 / -1;
  padding-top: var(--space-5);
  border-top: var(--hairline) solid var(--color-line);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

@media (hover: hover) and (pointer: fine) {
  .footer__list a:hover {
    color: var(--color-sub);
  }

  .footer__banner:hover {
    transform: translateY(calc(var(--lift) * -1));
  }
}

@media (max-width: 768px) {
  .footer {
    padding-block: calc(var(--space-section-sp) + var(--cut)) var(--space-5);
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .footer__logo {
    max-width: var(--footer-logo-w-sp);
  }
}