/* ==========================================================================
   Header + Page-title 連結背景（動くグラデーション）
   ========================================================================== */

.header-title-2026 {
  --base-1: #16109b;
  --base-2: #101ca7;
  --base-3: #0754ad;
  --base-4: #073a94;
  position: relative;
  z-index: 100;
  overflow: hidden;
  background: var(--base-1);
}

.header-title-2026__bg {
  position: absolute;
  inset: -30%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 76%, rgba(31, 0, 229, 0.88) 0%, rgba(31, 0, 229, 0) 34%),
    radial-gradient(circle at 54% 95%, rgba(8, 123, 115, 0.78) 0%, rgba(8, 123, 115, 0) 32%),
    radial-gradient(circle at 102% 80%, rgba(106, 78, 255, 0.68) 0%, rgba(106, 78, 255, 0) 27%),
    radial-gradient(circle at 68% 12%, rgba(36, 71, 218, 0.42) 0%, rgba(36, 71, 218, 0) 34%),
    linear-gradient(180deg, var(--base-1) 0%, var(--base-2) 34%, var(--base-3) 72%, var(--base-4) 100%);
  background-size: 165% 165%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

/* 光のかたまり。以前は JS で毎フレーム transform / opacity / border-radius を
   書き換えていたが、ぼかし + mix-blend-mode の再描画が重くチラつきの原因だったため
   静止させている（動きは下端の波が担当）。 */
.header-title-2026 .glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  transform-origin: center;
}

.header-title-2026 .glow-1 {
  width: 58vw;
  height: 58vw;
  min-width: 560px;
  min-height: 560px;
  left: -24vw;
  bottom: -28vw;
  filter: blur(90px);
  background: radial-gradient(circle at 44% 42%, rgba(30, 0, 236, 1) 0%, rgba(30, 0, 236, 0.72) 30%, rgba(18, 30, 223, 0.25) 58%, rgba(18, 30, 223, 0) 76%);
}

.header-title-2026 .glow-2 {
  width: 54vw;
  height: 54vw;
  min-width: 520px;
  min-height: 520px;
  left: 28vw;
  bottom: -26vw;
  filter: blur(82px);
  background: radial-gradient(circle at 48% 44%, rgba(9, 125, 115, 1) 0%, rgba(9, 119, 114, 0.78) 31%, rgba(6, 93, 110, 0.30) 58%, rgba(6, 93, 110, 0) 76%);
}

.header-title-2026 .glow-3 {
  width: 35vw;
  height: 66vw;
  min-width: 360px;
  min-height: 620px;
  right: -13vw;
  bottom: -20vw;
  filter: blur(78px);
  background: radial-gradient(ellipse at 50% 48%, rgba(103, 94, 255, 0.98) 0%, rgba(86, 91, 255, 0.66) 34%, rgba(56, 84, 244, 0.20) 62%, rgba(56, 84, 244, 0) 78%);
}

.header-title-2026 .glow-4 {
  width: 72vw;
  height: 72vw;
  min-width: 740px;
  min-height: 740px;
  right: -24vw;
  top: -34vw;
  filter: blur(115px);
  opacity: 0.78;
  background: radial-gradient(circle, rgba(26, 92, 255, 0.64) 0%, rgba(28, 72, 234, 0.30) 43%, rgba(28, 72, 234, 0) 75%);
}

.header-title-2026 .glow-5 {
  width: 74vw;
  height: 74vw;
  min-width: 760px;
  min-height: 760px;
  left: 7vw;
  top: 9vh;
  filter: blur(125px);
  opacity: 0.67;
  background: radial-gradient(circle at 48% 52%, rgba(30, 150, 255, 0.57) 0%, rgba(28, 130, 255, 0.27) 44%, rgba(28, 130, 255, 0) 76%);
}

.header-title-2026 .glow-6 {
  width: 29vw;
  height: 29vw;
  min-width: 300px;
  min-height: 300px;
  right: 3vw;
  bottom: 2vh;
  filter: blur(68px);
  opacity: 0.84;
  background: radial-gradient(circle, rgba(149, 70, 255, 0.82) 0%, rgba(121, 68, 255, 0.36) 47%, rgba(121, 68, 255, 0) 74%);
}

.header-title-2026 .glow-7 {
  width: 30vw;
  height: 30vw;
  min-width: 320px;
  min-height: 320px;
  left: 42vw;
  top: -9vw;
  filter: blur(72px);
  opacity: 0.58;
  background: radial-gradient(circle, rgba(41, 71, 255, 0.68) 0%, rgba(41, 71, 255, 0.25) 46%, rgba(41, 71, 255, 0) 75%);
}

/* ==========================================================================
   ページヘッダー下端の波
   出展申込サイト TOP の .theme_wave と同じ「SVG の波を translateX でループ」方式。
   ::after が本文の白で下端を切り取る境界の波、::before はその上に薄く重なる波。
   ぼかし・ブレンドモード・JS を使わず transform だけで動くため、
   合成のみで処理でき再描画（repaint）が発生しない。
   ========================================================================== */

/* 波が乗る分の余白を下端に確保する（ライトテーマのトップページは対象外） */
.header-title-2026:not(.header-title-2026--light) {
  padding-bottom: 28px;
}

.header-title-2026__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 104px;
  overflow: hidden;
  pointer-events: none;
}

.header-title-2026__wave::before,
.header-title-2026__wave::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 50% 100%;
  /* 合成専用レイヤーに載せて、遅い移動でも 1px 単位に丸められないようにする */
  will-change: transform;
  backface-visibility: hidden;
}

/* 波形は「タイルの左端と右端で接線（傾き）が一致する」形で描くこと。
   端の傾きがずれていると、1 ループごとに折れ角が画面を横切って
   動きがカクついて見える（以前の波形がこれだった）。
   各カーブは中点に制御点を 2 つ重ねた左右対称の山で、
   制御点のオフセット k とカーブ幅 Δ の比 k/Δ をすべて 0.0225 に揃えてあるため、
   山の大小が変わっても継ぎ目を含む全地点で傾きが連続する。
   波の高さ（凹凸の量）を変えるときは k を全区間で同じ倍率にすること。
   一部だけ変えると比が崩れ、継ぎ目に折れ角が戻る。 */

/* 境界の一段上に重なる薄い波（Δ=900/900/1000/800, k=∓20.25/22.5/18, 中心 y=85） */
.header-title-2026__wave::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3600 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='hdrWave1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23ffffff;stop-opacity:0.55'/%3E%3Cstop offset='50%25' style='stop-color:%237fd8ff;stop-opacity:0.85'/%3E%3Cstop offset='100%25' style='stop-color:%23ffffff;stop-opacity:0.55'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23hdrWave1)' d='M0,85 C450,64.75 450,64.75 900,85 C1350,105.25 1350,105.25 1800,85 C2300,62.5 2300,62.5 2800,85 C3200,103 3200,103 3600,85 L3600,200 L0,200 Z'/%3E%3C/svg%3E");
  opacity: 0.35;
  animation: headerWaveMove1 20s linear infinite;
}

/* 本文の白で下端を波形に切り取る境界。ヘッダー下は body と同じ #fff
   （Δ=800/1000/900/900, k=∓18/22.5/20.25, 中心 y=120）
   NOTE: 直下のセクションが白でないページ（例: conference_preview.css）は、
   同じ形のまま fill だけ変えたSVGに background-image を丸ごと差し替えて対応する。 */
.header-title-2026__wave::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3600 200' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,120 C400,102 400,102 800,120 C1300,142.5 1300,142.5 1800,120 C2250,99.75 2250,99.75 2700,120 C3150,140.25 3150,140.25 3600,120 L3600,200 L0,200 Z'/%3E%3C/svg%3E");
  animation: headerWaveMove2 28s linear infinite;
}

/* 移動量はタイル 1 枚分ちょうど（要素幅 200% の半分 = コンテナ幅 1 つ分）。
   translate3d で GPU 合成に固定する */
@keyframes headerWaveMove1 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes headerWaveMove2 {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* ヘッダー本体・二階層目(サブナビ)は、動く背景の上に紺15%の帯を横100%で重ねる */
.header-title-2026 .header-2026 {
  position: relative;
  z-index: 99;
  width: 100%;
  background: rgba(10, 20, 64, 0.15);
}

.header-title-2026 .header-2026__subnav {
  position: relative;
  z-index: 1;
  width: 100%;
  background: rgba(10, 20, 64, 0.15);
}

.header-title-2026 .page-title-2026 {
  position: relative;
  z-index: 1;
  background: transparent;
}

@media (max-width: 768px) {
  .header-title-2026__wave { height: 72px; }
  .header-title-2026__bg { inset: -45%; }
  .header-title-2026 .glow { filter: blur(62px); }
  .header-title-2026 .glow-1,
  .header-title-2026 .glow-2 { min-width: 432px; min-height: 432px; }
  .header-title-2026 .glow-3 { min-width: 280px; min-height: 500px; }
  .header-title-2026 .glow-4,
  .header-title-2026 .glow-5 { min-width: 568px; min-height: 568px; }
  .header-title-2026 .glow-6,
  .header-title-2026 .glow-7 { min-width: 260px; min-height: 260px; }
}

/* トップページ用ライトテーマ: MV(1枚目)のグラスリキッド背景にヘッダーを重ね、
   半透明+ぼかしで下の背景を透かす「ガラス」風にする。
   position:absolute でフローから抜き、続く <main> (MVスライダー) を
   すぐ下に詰める。MV側の上余白（top.css の .top-mv padding-top）が
   このヘッダーの重なる高さぶんを見込んで確保済み。
   上の .header-title-2026 / .header-title-2026 .header-2026 と詳細度が同じため、
   確実に上書きされるよう同ファイル内でそれらの直後に置く */
.header-title-2026--light {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
}

.header-title-2026--light .header-2026 {
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ライトテーマ（トップページ）は白帯のままにするため波は出さない */
.header-title-2026--light .header-title-2026__wave {
  display: none;
}