/* =========================================================
   Taikisha-like background (layout-safe override)
   - 既存レイアウトには触らず、.hero-bg だけ差し替え
   - 重くなる canvas / 高負荷フィルタは使いません
   ========================================================= */

/* 念のため、ヒーロー内だけ横はみ出し抑止 */
.hero{ overflow:hidden; }

/* 既存のSVGパターン(After)や強いアニメを無効化して、背景を作り直す */
.hero-bg{
  position:absolute;
  inset:0;               /* 重要：inset:-140px 等を戻して“はみ出し”を止める */
  z-index:0;

  /* pointer parallax 用の変数は残す */
  --mx: 0px;
  --my: 0px;

  /* ベース：淡いグラデ（Taikishaの雰囲気寄せ） */
  background:
    radial-gradient(900px 520px at 18% 32%, rgba(99, 102, 241, .16), transparent 62%),
    radial-gradient(820px 520px at 62% 22%, rgba(16, 185, 129, .14), transparent 64%),
    radial-gradient(920px 620px at 86% 78%, rgba(168, 85, 247, .10), transparent 66%),
    linear-gradient(120deg, rgba(235,242,255,1) 0%, rgba(244,252,248,1) 52%, rgba(250,245,255,1) 100%);

  transform: translate3d(var(--mx), var(--my), 0);
}

/* “薄い格子線”レイヤー（軽量） */
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* うっすら方眼（太鼓のサイトのような“設計図感”） */
  background:
    repeating-linear-gradient(to right, rgba(15,23,42,.05) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom, rgba(15,23,42,.05) 0 1px, transparent 1px 120px);
  opacity:.22;

  /* 動かしすぎない。ほんの少しだけ */
  animation: tkGridDrift 22s ease-in-out infinite alternate;
}

/* “やわらかい光のベール”＋“薄いノイズ” */
.hero-bg::before{
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;

  /* ぼかしの光（線を描かずに高級感を出す） */
  background:
    radial-gradient(520px 520px at 18% 30%, rgba(255,255,255,.60), transparent 60%),
    radial-gradient(520px 520px at 78% 26%, rgba(255,255,255,.52), transparent 62%),
    radial-gradient(600px 600px at 78% 82%, rgba(255,255,255,.40), transparent 64%),

    /* 軽量ノイズ（SVG：feTurbulence を小さく敷き詰め） */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");

  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, 180px 180px;
  mix-blend-mode: overlay;
  opacity:.60;

  filter: blur(0px);
  transform: translate3d(0,0,0);
  animation: tkVeilDrift 18s ease-in-out infinite alternate;
}

@keyframes tkGridDrift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-40px, 28px, 0); }
}

@keyframes tkVeilDrift{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(-24px, 14px, 0) scale(1.02); }
}

/* 動きを減らす設定の人には停止 */
@media (prefers-reduced-motion: reduce){
  .hero-bg, .hero-bg::before, .hero-bg::after{ animation:none !important; transform:none !important; }
}