/*
 * サイト全体のベース＋自前ヘッダ（.masthead）／フッタ（.site-foot）のスタイル。
 * v2 では親テーマ Responsive のヘッダ/フッタを使わず、子テーマの header.php / footer.php を
 * 上書き採用しているため、対象クラスも自前のものになる（親テーマ実クラスへの上書きは廃止）。
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  /* 横はみ出しはクリップするが overflow-x:hidden は使わない。hidden は祖先にスクロールコンテナを
     生み、子孫の position:sticky を「ビューポートでなく body に対して」効かせて実質無効化してしまう
     （＝ヘッダが追従せずスクロールで流れ去る不具合の真因。B の追従ヘッダが効かなかった原因）。
     overflow-x:clip はスクロールコンテナを作らずにクリップするので sticky が生きる。 */
  overflow-x: clip;
}

body.wyyc-body {
  margin: 0;
  background: var(--night-0);
  color: var(--color-kinari);
  font-family: var(--font-jp), sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 落款印の彫り字（姫路）。SVG text は CSS の font-family を継承するので、
 * 同梱の明朝（--font-jp-serif）を印面の字に当てる。ヒーロー左下・フッタ右下の2箇所で共用。 */
.seal__char {
  font-family: var(--font-jp-serif), serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0;
  fill: #fff;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
  margin: 0;
}

ul, ol {
  list-style: none;
  padding: 0;
}

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

img, svg {
  display: block;
  max-width: 100%;
}

:where(a, button):focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
  border-radius: 2px;
}

/* スキップリンク
   依頼主報告（2026-07-16）「スマホで上にスワイプするとボタンが出てくる」の原因:
   旧実装は transform: translateY(-100%-2rem) でドキュメント座標の「ページ最上部より上」
   へ物理的に押し出して隠していた。これは iOS Safari 等のバウンス（ラバーバンド）
   オーバースクロールで最上部を通り越すと、そこに実在する要素がそのまま見えてしまう
   既知の不具合パターン（要素は透明でも非表示でもなく、ただ画面外に置いているだけのため）。
   加えて `:focus`（`:focus-visible` でなく）はタップでも発火するため、指が触れただけで
   居座って見える経路もあった。
   対処: 要素はドキュメント内の通常位置（top:1rem）に留めたまま clip-path で見た目上ゼロ幅
   にして隠す（オーバースクロールで「画面外の実体」が露出する経路自体を断つ）。表示は
   キーボード操作でのフォーカスのみに反応する :focus-visible に限定し、タップでの誤表示も防ぐ。 */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--color-gold);
  color: var(--color-sumi);
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  clip-path: inset(100%);
  transition: clip-path var(--duration-normal) var(--ease-out-expo);
}
.skip-link:focus-visible {
  clip-path: inset(0);
}

/* ---------- ブランド（ヘッダ/フッタ共通） ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  /* JA はナビ項目（角ゴシックの日本語ラベル）が横幅を食い、flex で押されると
     1行目「WORLD YO-YO CONTEST 2026」が折り返して3行になる（1440実測）。
     ブランドは縮ませず・各行は折り返さないことで、EN/JA とも常に2行構成を保つ。 */
  flex-shrink: 0;
}
.brand__line-1,
.brand__line-2 {
  white-space: nowrap;
}
.brand__mark {
  width: 42px;
  height: auto;
  filter: drop-shadow(0 0 8px rgb(0 0 0 / 0.5));
}
.brand__word {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--font-display);
  text-transform: uppercase;
}
.brand__line-1 {
  font-size: 0.72rem;
  font-weight: 600;
  /* A-1: "World Yo-Yo Contest 2026"（年入り）へ字数が増えた分、字送りを詰めて既存幅に収める */
  letter-spacing: 0.15em;
  color: var(--color-kinari);
}
.brand__line-2 {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: var(--color-gold-light);
}

/* ================= マストヘッド ================= */
.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-masthead);
  /* F4（2026-07-11）: 透明ガラスフィルム風。従来の不透明藍地（A-3）をやめ、背後の夜/写真が
     うっすら透ける半透明ガラスにする。backdrop-filter で blur＋彩度を上げて「磨りガラス」の質感、
     微細な金の下罫＋上端の光沢ハイライトでフィルムの厚みを出す。
     非対応環境（@supports で判定）では blur が効かないので、可読性のため地色を濃いめの半透明へ引き上げる。 */
  /* G5（2026-07-11b）: 「青いサングラス」化の是正。地色を彩度の低い夜黒（night-0）寄せにして
     青被りを弱め、backdrop-filter の saturate を 1.5→1.05 に落とす（背後の色を持ち上げすぎない）。
     blur・上端光沢・微金罫のガラスフィルム感は維持する。 */
  /* FB0718-R3-6b（mos「白背景でも紺ヘッダーで統一」）: 52〜68%の半透明だと、白背景セクション
     （SCHEDULE〜VISIT HIMEJI）を通過中に白が透けてグレーっぽく見え、「白ヘッダー」に見えて
     しまっていた。透過率を92〜97%へ上げ、白背景の下地でも明確に紺と読める不透明度に強めた
     （backdrop-filterのblur/saturateは質感として維持、地色の濃さを最優先）。 */
  background: linear-gradient(180deg, color-mix(in srgb, var(--night-0) 92%, transparent), color-mix(in srgb, var(--night-0) 97%, transparent));
  backdrop-filter: blur(15px) saturate(1.05);
  -webkit-backdrop-filter: blur(15px) saturate(1.05);
  border-bottom: 1px solid color-mix(in srgb, var(--color-gold-light) 20%, transparent);
  /* B（MTG 2026-07-10）: 追従ヘッダ。下スクロールで隠れ上スクロールで現れる。
     隠す/出すは transform のみで動かす（top/height のアニメは使わない＝compositor 完結）。
     JS 無効時は .is-hidden が付かず、従来どおり sticky で常時表示（静的ヘッダ）。 */
  transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo), border-color 500ms var(--ease-out-expo);
  will-change: transform;
}
/* 上端のガラス光沢（薄い白のハイライト帯）。フィルムの厚み・艶を表す純装飾。 */
.masthead::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.28) 30%, rgb(255 255 255 / 0.28) 70%, transparent);
  pointer-events: none;
}
/* FB0718 item3/4（トップページ限定・PC）: 「ヘッダー越しに白背景が透けて見える」受動的な明るさを、
   スクロール位置に応じた能動的な明テーマへ置き換える。グラデーション背景同士を直接transitionすると
   ブラウザによって滑らかに補間されない実装差があるため、明テーマの背景は別レイヤー（::after）として
   重ね、opacityだけをtransitionさせるクロスフェード方式にする（この手法ならどのブラウザでも確実に
   滑らかになる）。トリガー（wyyc-light-uiクラスの付け外し）はapp.js側（PC限定・フロントページ限定）。 */
.masthead::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper-tint) 90%, transparent), color-mix(in srgb, var(--paper-tint) 96%, transparent));
  opacity: 0;
  transition: opacity 500ms var(--ease-out-expo);
}
html.wyyc-light-ui .masthead {
  border-bottom-color: var(--paper-line);
}
html.wyyc-light-ui .masthead::after {
  opacity: 1;
}
/* 明テーマ時の文字色（藍。tokens.cssの見出しテキスト実測色を転用＝和紙パレットに馴染む）。
   既存の色付きプロパティは個別に transition: color が張られているので、クラス切替だけで
   同じ速さでクロスフェードする（各ルールの元コメント・hover色は変更しない）。 */
html.wyyc-light-ui .masthead .brand__line-1,
html.wyyc-light-ui .masthead .masthead__label,
html.wyyc-light-ui .masthead .masthead__menu-en {
  color: var(--color-ai-flyer);
}
html.wyyc-light-ui .masthead .masthead__menu-ja {
  color: color-mix(in srgb, var(--color-ai-flyer) 62%, transparent);
}
html.wyyc-light-ui .masthead .masthead__caret {
  color: color-mix(in srgb, var(--color-ai-flyer) 70%, transparent);
}
html.wyyc-light-ui .masthead .lang-toggle__opt {
  color: color-mix(in srgb, var(--color-ai-flyer) 60%, transparent);
}
html.wyyc-light-ui .masthead .lang-toggle__opt.is-active {
  color: var(--color-ai-flyer);
}
html.wyyc-light-ui .masthead .lang-toggle__opt:hover {
  color: var(--color-ai-flyer-deep);
}
html.wyyc-light-ui .masthead .lang-toggle__sep {
  color: color-mix(in srgb, var(--color-ai-flyer) 35%, transparent);
}
/* 競技エントリー（ghostボタン）は生成りの薄い枠＋薄い文字色のままだと白背景でほぼ読めなくなるため、
   白地専用の .btn--ghost-dark（components.css既存・藍の細枠）と同じ配色をこの文脈限定で当てる。
   グローバルな .btn--ghost 自体は他の暗い面でも使うため変更しない（ヘッダーに限定して上書き）。 */
html.wyyc-light-ui .masthead .btn--ghost {
  border-color: color-mix(in srgb, var(--color-ai-flyer) 45%, transparent);
  color: var(--color-ai-flyer-deep);
  transition: border-color 500ms var(--ease-out-expo), color 500ms var(--ease-out-expo);
}
html.wyyc-light-ui .masthead .btn--ghost:hover,
html.wyyc-light-ui .masthead .btn--ghost:focus-visible {
  border-color: var(--color-ai-flyer);
  color: var(--color-ai-flyer);
}
/* backdrop-filter 非対応環境のフォールバック: 地色を濃い半透明へ引き上げて可読性を担保。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead {
    background: color-mix(in srgb, var(--night-0) 94%, transparent);
  }
}
/* 追従中に上スクロールへ転じたときだけ影を足して浮きを出す（面積は変えない）。 */
.masthead.is-condensed {
  box-shadow: 0 8px 30px -14px rgb(0 0 0 / 0.72);
}
/* 下スクロールで隠す。フォーカスがヘッダ内にあるときは JS が付けないので隠れない。 */
.masthead.is-hidden {
  transform: translateY(-100%);
}
/* reduced-motion: スライドでなくフェードで出入りする（急な移動を避ける）。 */
@media (prefers-reduced-motion: reduce) {
  .masthead {
    transition: opacity var(--duration-normal) linear, visibility var(--duration-normal) linear;
    will-change: opacity;
  }
  .masthead.is-hidden {
    transform: none;
    opacity: 0;
    visibility: hidden;
  }
}

.masthead__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  min-height: var(--masthead-h);
  padding: 0.5rem var(--shell-pad);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  /* FB0718 item3: 下の .masthead::after（明テーマの上乗せ背景レイヤー）より確実に前面へ出す。 */
  position: relative;
  z-index: 1;
}
/* スリム化（追従表示時）: 縦幅を詰める。面積変化はスクロール位置の閾値越えという離散イベントでのみ
   起き（連続アニメではない）、height/padding のトランジションは張らない＝瞬時に切り替わる。
   再出現するヘッダは既にスリムなので、出入りアニメ（transform）中に高さが動いて見えることはない。 */
.masthead.is-condensed .masthead__inner {
  min-height: var(--masthead-h-slim, 56px);
  padding-block: 0.25rem;
}
.masthead.is-condensed .brand__mark {
  width: 34px;
}

.masthead__nav {
  margin-inline: auto;
}
.masthead__menu {
  display: flex;
  align-items: stretch;
  gap: clamp(0.6rem, 1.6vw, 1.6rem);
}
.masthead__item {
  position: relative;
  display: flex;
  align-items: center;
}

/* トップレベルのリンク/トグル（<a> と <button> で見た目を共通化） */
.masthead__link--top {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.5rem 0.15rem;
  position: relative;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.masthead__label,
.masthead__menu-en {
  font-family: var(--font-display);
  font-size: 0.82rem;
  /* FB0712 総重量削減: 500はZen Kaku Gothic Newの中間ウェイトのためだけに1ウェイト丸ごと
     配信する必要が生じる（このJA nav labelが唯一の実使用箇所の1つ）。700（既存の見出し等で
     使用済み・追加コストなし）へ寄せてウェイト数を400/700の2種へ絞る。 */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-kinari);
  white-space: nowrap;
  transition: color var(--duration-normal) var(--ease-out-expo);
}
/* JA メニューは日本語トップラベル。角ゴシックで組み、字送りを詰める（大文字化は英語想定なので外す）。 */
:lang(ja) .masthead__label {
  font-family: var(--font-jp);
  text-transform: none;
  letter-spacing: 0.08em;
  font-weight: 600;
  font-size: 0.9rem;
}
.masthead__menu-ja {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-kinari) 55%, transparent);
}
/* フォールバックナビ（en/ja 2段ラベル）は同一 inline-flex 内で改行させて縦積みにする。 */
.masthead__link--top .masthead__menu-en,
.masthead__link--top .masthead__menu-ja {
  flex-basis: 100%;
}
.masthead__caret {
  /* FB0716（mos: 小さすぎる指摘）: 9px → 15px へ拡大。 */
  width: 15px;
  height: auto;
  flex: none;
  color: color-mix(in srgb, var(--color-kinari) 60%, transparent);
  transition: transform var(--duration-normal) var(--ease-out-expo), color var(--duration-fast);
}
/* リンクhover: 金下線が string 風に左→右（共通規律 docs/06） */
.masthead__link--top::after {
  content: '';
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  bottom: 0.15rem;
  height: 1.5px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.masthead__link--top:hover::after,
.masthead__link--top:focus-visible::after,
.has-dropdown.is-open .masthead__link--top::after {
  transform: scaleX(1);
}
.masthead__link--top:hover .masthead__label,
.masthead__link--top:focus-visible .masthead__label,
.masthead__link--top:hover .masthead__menu-en,
.masthead__link--top:focus-visible .masthead__menu-en,
.has-dropdown.is-open .masthead__label {
  color: var(--color-gold-light);
}
.masthead__link--top:hover .masthead__caret,
.has-dropdown.is-open .masthead__caret {
  color: var(--color-gold-light);
}
.has-dropdown.is-open .masthead__caret {
  transform: rotate(180deg);
}

/* ---------- ドロップダウン（プルダウン） ---------- */
.masthead__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 220px;
  padding: 0.5rem;
  display: grid;
  gap: 0.1rem;
  background: color-mix(in srgb, var(--color-ai-flyer-deep) 98%, black);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.8);
  /* 出入りは opacity/transform のみ。既定は非表示（下からわずかに立ち上がる）。 */
  opacity: 0;
  transform: translate(-50%, 6px);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo);
  z-index: 2;
}
/* hover 可能デバイスはホバーで開く。タッチ/キーボードは JS が .is-open を付ける。 */
@media (hover: hover) {
  .has-dropdown:hover .masthead__submenu {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
}
.has-dropdown:focus-within .masthead__submenu,
.has-dropdown.is-open .masthead__submenu {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.masthead__submenu > li > a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem;
  border-radius: 5px;
  transition: background var(--duration-fast) var(--ease-out-expo), color var(--duration-fast);
}
.masthead__sublabel {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-kinari) 90%, transparent);
  white-space: nowrap;
}
.masthead__submenu > li > a:hover,
.masthead__submenu > li > a:focus-visible {
  background: color-mix(in srgb, var(--color-gold) 14%, transparent);
}
.masthead__submenu > li > a:hover .masthead__sublabel,
.masthead__submenu > li > a:focus-visible .masthead__sublabel,
.masthead__submenu > li > a[aria-current] .masthead__sublabel {
  color: var(--color-gold-light);
}
.ext-mark {
  /* サブメニューは行の余白が狭いので基準の1.2emよりやや控えめに（0.85em）。 */
  width: 0.85em;
  height: 0.85em;
  color: var(--color-gold);
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  /* .masthead は上の reduced-motion 規則でフェード出入りに切り替えるため、ここには含めない
     （F4: 急なスライドをフェードに）。サブメニュー/キャレットは瞬時化のままでよい。 */
  .masthead__submenu,
  .masthead__caret {
    transition: none;
  }
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-left: auto;
}

/* 言語トグル */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}
.lang-toggle__opt {
  color: color-mix(in srgb, var(--color-kinari) 55%, transparent);
  transition: color var(--duration-fast) var(--ease-out-expo);
}
.lang-toggle__opt.is-active {
  color: var(--color-gold-light);
}
.lang-toggle__opt:hover {
  color: var(--color-kinari);
}
.lang-toggle__sep {
  color: color-mix(in srgb, var(--color-kinari) 35%, transparent);
}

.cta-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* ハンバーガー（モバイルのみ表示） */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 1.6px;
  background: var(--color-kinari);
  transition: transform var(--duration-normal) var(--ease-out-expo), opacity var(--duration-fast);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(3.3px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
  transform: translateY(-3.3px) rotate(-45deg);
}

/* ================= モバイルナビ（スライドパネル） ================= */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  background: color-mix(in srgb, var(--color-ai-flyer-deep) 97%, black);
  padding: calc(var(--masthead-h) + 1.5rem) var(--shell-pad) 2rem;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-1.5%);
  transition: opacity var(--duration-normal) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo);
}
.mobile-nav[hidden] {
  display: none;
}
.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav__menu {
  display: flex;
  flex-direction: column;
}
.mobile-nav__group {
  border-bottom: 1px solid var(--hairline);
}
/* トップレベル（アコーディオンの見出しボタン、または子なしトップリンク） */
.mobile-nav__toggle,
.mobile-nav__toplink {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.mobile-nav__label {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:lang(ja) .mobile-nav__label {
  font-family: var(--font-jp);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 1.2rem;
}
.mobile-nav__en {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mobile-nav__ja {
  font-size: 0.8rem;
  margin-inline-start: 0.75rem;
  color: color-mix(in srgb, var(--color-kinari) 60%, transparent);
}
.mobile-nav__caret {
  /* FB0716（mos: 小さすぎる指摘）: 14px → 20px へ拡大。 */
  width: 20px;
  height: auto;
  flex: none;
  color: var(--color-gold-light);
  transition: transform var(--duration-normal) var(--ease-out-expo);
}
.mobile-nav__toggle[aria-expanded='true'] .mobile-nav__caret {
  transform: rotate(180deg);
}
.mobile-nav__toggle[aria-expanded='true'] .mobile-nav__label {
  color: var(--color-gold-light);
}
/* 下層リスト（開くまで hidden。open で表示） */
.mobile-nav__sub {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 0 0.75rem 0.25rem;
}
.mobile-nav__sub[hidden] {
  display: none;
}
.mobile-nav__sub > li > a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.5rem;
  font-size: 1rem;
  color: color-mix(in srgb, var(--color-kinari) 85%, transparent);
  border-inline-start: 2px solid var(--hairline);
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.mobile-nav__sub > li > a:hover,
.mobile-nav__sub > li > a:focus-visible,
.mobile-nav__sub > li > a[aria-current] {
  color: var(--color-gold-light);
  border-color: var(--color-gold);
}
@media (prefers-reduced-motion: reduce) {
  .mobile-nav__caret {
    transition: none;
  }
}
.mobile-nav__cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* ================= フッタ ================= */
/* FB0715ラウンド3 キュー17（mos「フッターのz-indexの方が要素より手前にあるから、要素が
   それで自然に隠れてフェードアウトするということ。今だとヨーヨーがいきなり透けて消えてる
   みたいな感じになってる」）: <footer> は <main class="front"> の外（DOM上の兄弟）にあり、
   かつ従来 position:relative のみでz-index無指定＝positionはあってもz-index:autoの
   「非明示」扱いだった。一方 .trajectory-webgl-stage 等（trajectory-webgl.js が描く
   canvas・火花・パーティクル一式）は --z-trajectory(=1) という明示的な正のz-indexを持つ
   position:absolute要素で、<main>・<footer>共通の祖先スタッキングコンテキスト内で「z-index
   明示の要素」同士として直接競合する。footerがz-index無指定のままだと、実際のペイント順は
   「z-index:auto（footerを含む通常の内容）」→「z-index:1（canvas）」の順になり、DOM順で
   footerが後ろにあってもcanvasの方が必ず上に来てしまう（＝JS側のFADE_START付近の不透明度
   フェードだけが「消える」演出を担っていた＝mosが違和感を覚えた「透けて消える」の正体）。
   footerに --z-trajectory より大きい明示的なz-indexを与えるだけで、スクロールでフッターが
   せり上がってきた時点でcanvas（および同層のtrajectory-sparks/trajectory-fx）を自然に
   物理的に覆い隠すようになる（trajectory-webgl.js側のFADE_START/currentFadeOutは、
   これでもなお万一z-index側の遮蔽が間に合わなかった場合の保険としてのみ残す）。 */
.site-foot {
  position: relative;
  z-index: var(--z-content, 2);
  /* FB0716フォローアップ（mos「ヨーヨー演出の終わりで背景がまた黒に戻ってる。元の色に戻して」）:
     #31で「焦茶（旧額縁色）をやめ墨黒(--color-sumi・無彩色に近い#0a0a0a)に統一」していたが、
     data-traj-range（3Dヨーヨー演出の範囲）の終端＝SPONSORS帯からフッターへの継ぎ目で、
     サイト本来の藍系（--night-0/1/--color-ai-flyer-deep等）から急に無彩色の黒へ落ちて見える
     原因になっていた。焦茶へは戻さず、藍系ファミリーの最も濃い色（--color-ai-flyer-deep・
     .tab--heroや各種暗地見出しで使っている「地の藍」と同じ値）へ差し替えて統一する。 */
  background: var(--color-ai-flyer-deep);
  color: var(--color-kinari);
  padding: clamp(3rem, 8vw, 6rem) 0 2rem;
  border-top: 3px double var(--color-gold-flyer);
  overflow: hidden;
}
/* FB0715ラウンド3 追加FB（mos「フッターの金の渦巻きが明るすぎてナビ文字が読みづらい」）:
   opacity 0.9→0.4、drop-shadowのグロー半径・不透明度も控えめにした。演出そのもの（描き進み→
   ヨーヨーの円へ収束）は変更せず、明るさだけを落として本文（.site-foot__inner配下のナビ・
   リンク）の可読性を優先する。 */
.site-foot__finale {
  position: absolute;
  inset: 0 0 auto 0;
  height: 160px;
  pointer-events: none;
  opacity: 0.4;
}
.site-foot__trail {
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* 演出#8: フッタで光跡が引かれてヨーヨーの円へ収束する。
   D-6: section-arc・player__orbit・schedule__seam と同じ seam 方式に統一。
   既定（JS無効）は全描画で見せ、.wyyc-js のときだけ初期を隠してビューポート進入で1回だけ引く。 */
.site-foot__trail-path {
  stroke-dasharray: 1600;
  stroke-dashoffset: 0; /* 既定（JS無効）は全描画で見せる */
  stroke-width: 3;
  filter:
    drop-shadow(0 0 2px rgb(240 216 160 / 0.4))
    drop-shadow(0 0 6px rgb(216 177 96 / 0.22));
}
.site-foot__trail-yo {
  stroke-dasharray: 120;
  stroke-dashoffset: 0; /* 既定は円が閉じた状態で見せる */
}
.site-foot__trail-yo-core {
  opacity: 1; /* 既定は表示 */
}
.wyyc-js .site-foot__trail-path {
  stroke-dashoffset: 1600;
}
.wyyc-js .site-foot__trail-yo {
  stroke-dashoffset: 120;
}
.wyyc-js .site-foot__trail-yo-core {
  opacity: 0;
}
.wyyc-js .site-foot__finale.is-visible .site-foot__trail-path {
  transition: stroke-dashoffset 1600ms var(--ease-out-expo);
  stroke-dashoffset: 0;
}
.wyyc-js .site-foot__finale.is-visible .site-foot__trail-yo {
  transition: stroke-dashoffset 700ms var(--ease-out-expo) 1200ms;
  stroke-dashoffset: 0;
}
.wyyc-js .site-foot__finale.is-visible .site-foot__trail-yo-core {
  transition: opacity 400ms var(--ease-out-expo) 1600ms;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .wyyc-js .site-foot__trail-path,
  .wyyc-js .site-foot__trail-yo {
    stroke-dashoffset: 0; /* 静止した円へ収束した形 */
    transition: none;
  }
  .wyyc-js .site-foot__trail-yo-core {
    opacity: 1;
    transition: none;
  }
}
.site-foot__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.4fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: 3rem;
}
.site-foot__tagline {
  margin-top: 1rem;
  font-family: var(--font-jp-serif);
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--color-kinari) 78%, transparent);
}
.site-foot__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.site-foot__social a {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  color: var(--color-kinari);
  transition: color var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal), transform var(--duration-normal);
}
.site-foot__social a:hover {
  color: var(--color-gold-light);
  border-color: var(--color-gold);
  transform: translateY(-2px);
}
.social-icon {
  width: 20px;
  height: 20px;
}
.site-foot__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
}
.site-foot__col-title {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: 1rem;
}
.site-foot__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.site-foot__col a {
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--color-kinari) 82%, transparent);
  transition: color var(--duration-fast) var(--ease-out-expo);
}
.site-foot__col a:hover {
  color: var(--color-gold-light);
}
/* FB0718-R4-e: 「・」区切りの断片単位で white-space:nowrap にして、単語途中の改行と
   ↗アイコン単独落ちを防ぐ（footer.php の site-foot__col-frag 参照）。断片間（「・」の後）
   では通常どおり折り返せる。ext-mark はインラインSVGなのでフォントに揃うよう垂直位置を微調整。 */
.site-foot__col-frag {
  white-space: nowrap;
}
.site-foot__col-frag .ext-mark {
  vertical-align: -0.05em;
}
/* ============================================================================
   ヒーロー／フッター共通「クリスタル+プラチナ」ロゴ帯（2026-07-17 追加要望④⑤）
   inc/sponsor-wall.php の wyyc_sponsor_top_tier_row() が出力するマークアップに対応。
   /sponsor/ページの .sponsor-wall（暗地パネル＋白チップ）と親戚だが、こちらは専用パネルを
   持たず、呼び出し元の地色（ヒーローは写真オーバーレイ、フッターは藍の濃色）へ白チップを
   直接乗せる軽量版。全ページ共通で読み込む global.css に置く（フッターは全ページ表示のため）。
   ========================================================================= */
.sponsor-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2rem);
}
.sponsor-toprow__tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.sponsor-toprow__label {
  /* FB0717 mos: 金ピルは目立ちすぎ → section-kicker系の小さな金文字に揃えてさりげなく */
  display: inline-flex;
  align-items: center;
  color: var(--color-gold-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
  white-space: nowrap;
}
.sponsor-toprow__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.sponsor-toprow__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgb(6 11 22 / 0.35);
  /* FB0718-R6-b: リンク付きチップのhover持ち上がりをなめらかにする。 */
  transition: transform var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-fast) var(--ease-out-expo);
}
/* FB0718-R6-b: ヒーロー/フッターのクリスタル・プラチナ帯も/sponsor/本体と同じリンク一覧
   （wyyc_sponsor_link_map()）を使うためhoverでリンク可能を示す。リンクが無いチップには
   このクラス自体が付かないためhoverもcursor:pointerも出ない。
   2026-07-19 FB（そらくん②）: hoverで金の縁取りが乗ると背景が黄色く見え、白チップの実寸枠が
   露わになって「画像サイズが丸見え」に見えるとの指摘。金リングは外し、白のまま持ち上がり＋影を
   深めるだけのニュートラルなhoverにする。 */
.sponsor-toprow__chip--linked:hover,
.sponsor-toprow__chip--linked:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgb(6 11 22 / 0.45);
}
.sponsor-toprow__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.sponsor-toprow__link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}
/* 2026-07-19 FB（そらくん①）: /sponsor/本体（.sponsor-wall）と同じく、同一ティア内はロゴを
   一律サイズに揃える。チップに確定幅＋確定高さを与えて全チップを同寸の箱にし、ロゴはその箱へ
   内接（max-width/max-height:100%）させる。以前は width:auto の可変幅＋img height:100% だったため、
   横長ロゴは max-width で頭打ちになり縦が縮んで一社ずつ大きさがバラついていた。
   （旧コメントの Chromium flex min-content バグは cloud-native が SVG だった時代の話。現在は全社PNG＝
   width/height属性あり、かつ箱側も幅高さとも確定値のため min-content 潰れは起きない。） */
.sponsor-toprow__chip img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* クリスタルはプラチナより一段大きい（ティア階層の視覚化）。幅高さとも固定して箱を揃える。 */
.sponsor-toprow__tier--crystal .sponsor-toprow__chip { width: 152px; height: 58px; }
.sponsor-toprow__tier--platinum .sponsor-toprow__chip { width: 124px; height: 44px; }

/* 2026-07-19 FB（そらくん②）: 各チップの金の縁取り（旧クリスタルの「SSRカード」風二重枠）は
   ロゴの一部と誤認されるとの指摘で撤去。クリスタルはサイズ差（上の width/height）だけでティアを
   表し、装飾の金線は持たせない（背景は白のまま・base の白チップ影のみ）。 */

/* ヒーロー内（写真上）: カウントダウンの下に余白を空けて置く。 */
.sponsor-toprow--hero {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/* フッター上部（紺地）: サイト幅コンテナに揃え、ナビ本体との間を薄い罫で区切る。 */
.sponsor-toprow--footer {
  max-width: var(--shell-max);
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  padding: 0 var(--shell-pad) clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--hairline-strong);
}

@media (max-width: 600px) {
  .sponsor-toprow {
    gap: 1.1rem;
  }
  /* 2026-07-19 FB（そらくん①）: モバイルもティア内一律サイズを保つため幅高さとも固定する
     （img の max-width 上書きは箱内接方式と衝突するので撤去）。 */
  .sponsor-toprow__tier--crystal .sponsor-toprow__chip { width: 126px; height: 48px; }
  .sponsor-toprow__tier--platinum .sponsor-toprow__chip { width: 102px; height: 36px; }
  .sponsor-toprow__chip { padding: 0.4rem 0.7rem; }
}

/* FB0718-R3-7（mos指示）: R2で置いた最下段の.site-foot__aux補助行は、消えていた項目を
   各列の中（ヘッダー追従の列構成のまま）へ統合したため廃止。footer.php の
   $wyyc_footer_extra_by_index 参照。 */

.site-foot__legal {
  position: relative;
  max-width: var(--shell-max);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  /* FB0716 キュー9: 落款を撤去したため右ガター確保（旧 #P7-2）は不要、左右均等パディングに戻す。 */
  padding: 1.5rem var(--shell-pad);
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-kinari) 55%, transparent);
}
/* 落款（右・縦中央）。確保した右ガター内に置き、テキストとは干渉しない。概念画像準拠 */
.site-foot__seal {
  position: absolute;
  right: var(--shell-pad);
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  opacity: 0.92;
  filter: drop-shadow(0 2px 5px rgb(0 0 0 / 0.4));
}
.site-foot__seal svg {
  width: 100%;
  height: auto;
}
.site-foot__dev-note {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-gold-light) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .site-foot__social a:hover {
    transform: none;
  }
}

/* ---------- レスポンシブ: ヘッダ/フッタ ---------- */
@media (max-width: 1024px) {
  .masthead__nav {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
  .cta-group .btn--ghost {
    display: none; /* モバイル寄りでは主 CTA のみ残す */
  }
}

@media (max-width: 720px) {
  /* A-4: display:none だとアクセシビリティツリーからも消え、ロゴ画像は alt="" の装飾扱いなので
     ホームリンクが無名になる（監査）。visually-hidden と同じクリップ技法に切り替え、
     見た目は省スペースのまま「マークのみ」を維持しつつ確定表記の読み上げ名を残す。 */
  .brand__word {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .site-foot__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .site-foot__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1rem;
  }
}

@media (max-width: 420px) {
  .cta-group .btn--solid {
    padding-inline: 1rem;
  }
}

/* ================= ページトップへ戻る（全ページ共通・MTG 2026-07-10 §D） =================
 * 右下に固定。スクロールで出現（JS が .is-visible を付与）。opacity / transform のみで動かし、
 * タップ領域は 48px（44px 以上）。focus-visible の輪郭・prefers-reduced-motion に対応する。 */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--night-1) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--color-gold-light);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 260ms var(--ease-out-expo), transform 260ms var(--ease-out-expo), border-color 170ms var(--ease-out-expo), background 170ms var(--ease-out-expo), color 170ms var(--ease-out-expo);
}
.to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.to-top:hover {
  border-color: var(--color-gold);
  background: color-mix(in srgb, var(--night-1) 96%, transparent);
  color: var(--color-gold);
}
.to-top:focus-visible {
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
}
.to-top svg {
  width: 22px;
  height: 22px;
}
@media (prefers-reduced-motion: reduce) {
  .to-top {
    transform: none;
    transition: opacity 200ms linear;
  }
  .to-top.is-visible {
    transform: none;
  }
}

/* FB0718 item3/4（トップページ限定・PC）: マストヘッドと同じ明テーマ（藍×和紙）を適用する。
   ボタン背景は単色（グラデーションでない）なので、ここは::afterクロスフェードを使わず直接
   background/border-color/colorをtransitionできる。 */
html.wyyc-light-ui .to-top {
  border-color: color-mix(in srgb, var(--color-ai-flyer) 45%, transparent);
  background: color-mix(in srgb, var(--paper-tint) 88%, transparent);
  color: var(--color-ai-flyer);
  transition: opacity 260ms var(--ease-out-expo), transform 260ms var(--ease-out-expo), border-color 500ms var(--ease-out-expo), background 500ms var(--ease-out-expo), color 500ms var(--ease-out-expo);
}
html.wyyc-light-ui .to-top:hover {
  border-color: var(--color-ai-flyer);
  background: color-mix(in srgb, var(--paper-tint) 96%, transparent);
  color: var(--color-ai-flyer-deep);
}