@charset "UTF-8";
/* ============================================================
   REAL SP — スマホ版の「本物らしい」演出の見た目（2026-10）
   ------------------------------------------------------------
   動かすのは hero-sp.js（トップ1画面目）。
   JS が動いたときだけ目印（.hero.hsp）を付けるので、
   JS がこけたときは、ここは何も効かない（今までの見た目のまま）。
   PC には目印が付かないので、PC の見た目は変わらない。
   ============================================================ */


/* ============================================================
   トップ1画面目（.hero.hsp のときだけ）
   ------------------------------------------------------------
   漫画っぽく見えていた部品は出さない。代わりの絵は hero-sp.js が canvas に描く
     ・点線の照準（.hfx-aim）と、輪郭のある光の玉（.hfx-orb）
     ・黒い縁で囲んだ割れ目（.hfx-cracks）
     ・輪郭のくっきりした光の輪（.hfx-ring / .spear-ring / 文字の下の輪 .hfx-node__halo）
     ・ロケットのような太い光の帯（.spear-trail）と、古い火花（.hfx-sparks）
     ・線を3枚重ねただけの稲妻（.hfx-links .hfx-bolt / .spear-fly__bolts）
   ============================================================ */
.hero.hsp .hfx-aim,
.hero.hsp .hfx-orb,
.hero.hsp .hfx-cracks,
.hero.hsp .hfx-ring,
.hero.hsp .spear-ring,
.hero.hsp .hfx-node__halo,
.hero.hsp .spear-trail,
.hero.hsp .hfx-sparks,
.hero.hsp .hfx-links .hfx-bolt,
.hero.hsp .spear-fly__bolts { display: none !important; }

/* ★サイト共通の「canvas { max-width: 100% }」（style.css）を外す★
   割れ目の canvas はロゴの舞台より大きく（ヒーロー全体の大きさで）作るが、
   この指定で舞台の幅に縮められ、横だけ 0.87倍につぶれて、割れ目が刃先から約22px 左にずれた */
.hero.hsp .hsp-back,
.hero.hsp .hsp-front,
.hero.hsp .hsp-fly { max-width: none; max-height: none; }

/* 文字の後ろの絵（割れ目・つながり・煙）。位置と大きさは JS が入れる */
.hero.hsp .hsp-back { position: absolute; pointer-events: none; }
/* 文字の前の絵（火花・かけら・ほこり・衝撃波） */
.hero.hsp .hsp-front {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 5;
  pointer-events: none;
}
/* 飛ぶ槍にまとう放電（槍と一緒に回る） */
.hero.hsp .spear-fly .hsp-fly { position: absolute; pointer-events: none; }
/* 刺さった瞬間の閃光。もとの指定は途中に金の帯（34%）があり、
   広がると「金色の輪」に見えた。白から外へ、なめらかに薄れるだけにする */
.hero.hsp .hfx-flash {
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 252, 240, 0.6) 16%,
    rgba(255, 248, 228, 0.24) 38%,
    rgba(255, 248, 228, 0.07) 56%,
    rgba(255, 248, 228, 0) 72%);
}
/* 飛ぶ槍のまわりの金のもや。本物の金属は光をまとわないので、ごく薄く */
.hero.hsp .spear-fly__blade { filter: drop-shadow(0 0 3px rgba(255, 220, 150, 0.45)); }