/* ==========================================================================
   STEEL LIVE — HERO   v2.0（静止完成状態）
   --------------------------------------------------------------------------
   コアアイデア:「ピリオドが、的である。」
     DARTS WITHOUT BORDERS. の最後のピリオドを、
     ダーツが着弾した点として扱う。説明図を置かずに
     「ダーツ」「的」「境界がない」を一体で成立させる。

   ★ 本ファイルは静止状態のみを定義する。演出シーケンスは未実装。
     見出しとロゴ枠は初期HTMLに存在し、モーション実装時も
     DOM は増やさず opacity / transform のみで見せ方を変える。
     （LCP と SEO を守るため）

   演出方針: 火花・発光・画面揺れは最小限。
     ゲーム的な派手さではなく、プレミアムブランドの緊張感を優先する。
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;

  /* iOS Safari のアドレスバー伸縮対策。100vh を先に書き svh で上書き */
  min-height: 100vh;
  min-height: 100svh;

  padding-block: calc(var(--header-h) + var(--sp-5)) var(--sp-7);
  padding-bottom: max(var(--sp-7), env(safe-area-inset-bottom));
  overflow: hidden;
  background-color: var(--sky-predawn);
}

/* --- PC: ヘッダー 1 枚ぶんの二重確保をやめる --------------------------------
   .site-header は position: sticky ＝ 通常フロー上にあるため、その高さは
   すでに HERO の外側にある。にもかかわらず
     min-height: 100svh                          （ヘッダーを引いていない）
     padding-top: calc(ヘッダー高 + --sp-5)       （ヘッダーを再度確保）
   の 2 か所でヘッダーを重ねて数えていた。結果 HERO は「ヘッダー＋1 画面」の
   高さになり、ロゴと見出しは画面の下方へ押し出され、右下の SCROLL は
   どの PC 幅でもファーストビューから切れていた（1440x900 で 45px 欠け）。

   高さからヘッダーを引き、padding からも二重ぶんを外す。
   詰めきらずに上 5vh / 下 9vh を残し、下を厚くして視線を見出しのやや上に置く。
   ファーストビュー ＝ ヘッダー + HERO がちょうど 1 画面に収まる。 */
@media (min-width: 768px) {
  .hero {
    --hero-pad-top:    clamp(24px, 5vh, 64px);
    --hero-pad-bottom: clamp(48px, 9vh, 112px);

    min-height: calc(100vh  - var(--header-h));
    min-height: calc(100svh - var(--header-h));

    padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
    padding-bottom: max(var(--hero-pad-bottom), env(safe-area-inset-bottom));
  }
}

/* 1024px 以上ではヘッダーが 88px になる */
@media (min-width: 1024px) {
  .hero {
    min-height: calc(100vh  - var(--header-h-lg));
    min-height: calc(100svh - var(--header-h-lg));
  }
}

/* --- SP: ヘッダー下の空きすぎを直す ------------------------------------------
   PC と同じ原因が SP にも残っていた。.site-header は sticky ＝ 通常フロー上に
   あるので、その 64px はすでに HERO の外側にある。にもかかわらず
     padding-top: calc(var(--header-h) + var(--sp-5))   ＝ 104px
   とヘッダーをもう一度確保しており、justify-content: center の基準が下へ
   ずれて、ヘッダー下端からロゴまで 274px も空いていた（390x844 実測）。

   ここでは上端からの距離を直接指定する。中央寄せをやめて起点を上に固定し、
   二重ぶんだけを取り除く。20vh を基準にしたので、端末が縦に長いほど
   余白も比例して残り、「夜空の静けさ」は保たれる。
     390x844 : 169px（ヘッダー下→ロゴ 171px ＝ 103px 短縮）
     393x852 : 170px
     430x932 : 186px

   高さも同じ理由でヘッダーぶんを引く。min-height: 100svh のままだと
   「ヘッダー + 1 画面」の高さになり、HERO が画面下へ 64px はみ出して
   右下の SCROLL が 24px 切れていた。

   引く量は 64px ではない。ヘッダーの実効高さは
     .site-header__inner の height（--header-h ＝ 64px）
     ＋ .site-header の padding-top（env(safe-area-inset-top)）
   であり、この HTML は viewport-fit=cover を指定しているため、
   ノッチ端末では inset が 47〜59px 程度の実数になる。
   env() は inset が無い環境では 0 に解決されるので、両方引いて安全側に倒す。

   padding-top は上で固定しているので、高さを変えても
   ロゴ・見出し・本文の位置は動かない（本文下の余白も従来どおり）。 */
@media (max-width: 767.98px) {
  .hero {
    justify-content: flex-start;
    padding-top: clamp(120px, 20vh, 190px);

    min-height: calc(100vh  - var(--header-h) - env(safe-area-inset-top));
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top));
  }
}

/* 横向きスマホなど、極端に縦が短い環境では高さ制約を外す */
@media (max-height: 520px) {
  .hero { min-height: auto; padding-block: var(--sp-6); }
}

/* ==========================================================================
   背景レイヤー（奥 → 手前）
   ========================================================================== */

/* 1+2. ベース + 冷たい光源（左上）+ ビネット */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    /* 夜明け前。下端にだけ、ごくわずかな藍の兆し */
    linear-gradient(180deg, transparent 58%, rgba(18, 48, 94, 0.30) 100%),
    radial-gradient(80% 60% at 22% 18%, var(--light-cold) 0%, transparent 62%),
    radial-gradient(130% 100% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.74) 100%);
}

/* 3. 巨大に切り取られたボードの同心円。図解ではなく建築的な構造として。
      これがブル（的）そのもの。ダーツはこの中心へ着弾する。

      座標をここで一度だけ定義し、.hero__rings と .hero__strike の
      両方から参照する。こうしないと二つが必ず食い違う。 */
.hero {
  --rings-top:   58%;
  --rings-right: -14%;
  --rings-size:  min(132vw, 1360px);

  /* 着弾の光。3 秒ごとに一度だけ瞬く。光っている時間は 0.5 秒以内で、
     残りの 2.5 秒は完全に消えている。負の遅延で初回を 0.7 秒後に合わせる。 */
  --hit-cycle: 3000ms;
  --hit-delay: -1400ms;
  --hit-dur:   900ms;
}

@media (max-width: 767.98px) {
  /* -55% では的の中心が画面幅の 105% の位置に来てダーツが完全に画面外へ出る。
     -40%/-36% でもダーツは 63%/86% しか見えない。実測で -30% を採用。
     430:16px / 390:14px / 375:14px / 320:12px の余白を残して全体が収まる。 */
  .hero { --rings-right: -30%; --rings-size: 190vw; }

  /* SP では上の余白を詰めて文字組み全体を約 100px 引き上げたので、
     的とダーツも同じだけ上げないと、ダーツの先端が日本語本文に重なる
     （58% のままだと 390x844 で 1651px² 重なることを実測で確認）。
     58% - 12% = 46%。文字が動いた距離とほぼ同じだけ的も動く。 */
  .hero { --rings-top: 46%; }
}

.hero__rings,
.hero__strike {
  position: absolute;
  top: var(--rings-top);
  right: var(--rings-right);
  width: var(--rings-size);
  /* base.css の svg { max-width: 100% } は rings にだけ効くため、
     同じ制限を明示して div 側にも課す。これが無いと 1024px 以下で
     rings だけが縮み、二つの箱が食い違う。 */
  max-width: 100%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

/* SVG は preserveAspectRatio 既定値（xMidYMid meet）なので、
   viewBox の中心 (500,500) ＝ 要素ボックスの中心。
   つまり最内円 r=24 の中心は、この箱のど真ん中にある。 */
.hero__rings {
  z-index: -2;
  opacity: 0.30;  /* v3: 主役はタイポと軌道。ボードは遠景へ下げる */
}

.hero__strike { z-index: -1; }

.hero__rings circle { fill: none; stroke: var(--metal-300); }

@media (max-width: 767.98px) {
  .hero__rings { opacity: 0.42; }
}

/* 4. フィルムグレイン。これが無いと平坦な Web ページに見える */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  background-image: var(--grain);
}

/* ==========================================================================
   前景
   ========================================================================== */
.hero__inner { position: relative; width: 100%; }

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* 中央揃えにしない。非対称構図がブランドを想起させる */
}

/* ブランド署名としての正式ロゴ。
   主役はあくまで下の見出しなので、静かに置くだけにする。
   グロー・雷・スパーク・装飾枠のたぐいは一切足さない。 */
.hero__brand {
  /* ロゴと見出しは「別の階層」なので、見出し〜日本語コピー間より広く取る。
     SP: 320px:25 / 390px:30 / 430px:33 */
  margin: 0 0 clamp(1.25rem, 7.7vw, 2.25rem);
  line-height: 0;              /* 画像下の行間を殺し、余白は margin だけで管理する */
}

.hero__logo {
  display: block;
  /* SP はコンテナ幅の 77%。円＋雷が潰れないことを最優先する。
     320px:209 / 375px:252 / 390px:263 / 430px:294 */
  width: min(calc(77vw - 37px), 18.75rem);
  height: auto;
}

/* 初回表示のごく薄いフェードと 2px の立ち上がり。これ以上は動かさない */
@media (prefers-reduced-motion: no-preference) {
  .hero__logo {
    /* fill-mode は付けない。付けるとアニメーションが走らなかったときに
       opacity:0 のまま残り、ロゴが消える。delay が 0 なので最初の 1 フレーム目から
       0% のキーフレームが当たり、見た目は同じまま安全側に倒れる。 */
    animation: heroLogoIn 900ms var(--ease);
  }
  @keyframes heroLogoIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   キーコピー — 画面の主役
   ========================================================================== */
.hero__headline {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  /* 行構成ごとの最適サイズは .hero--2line / .hero--3line 側で上書きする */
  letter-spacing: var(--ls-hero);
  text-transform: uppercase;
  color: var(--metal-100);            /* 非対応環境のフォールバック */
  margin: 0;
  /* 左端のマージンから始まり、右端に届く寸前まで到達させる */
  max-width: 100%;
  word-break: normal;
  overflow-wrap: normal;
}

/* 光を受けた金属として見せる。単なる白にしない */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__headline {
    background-image: var(--metal-fill);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* 単語ごとの塊。行構成の切り替えはこの display で行う */
.hero__w { display: block; }

/* --- PC: 2行構成 / 3行構成の切り替え --------------------------------------
   .hero--2line … DARTS / WITHOUT BORDERS.   （最長行 16 字）
   .hero--3line … DARTS / WITHOUT / BORDERS. （最長行  8 字）
   最長行の字数が倍違うため、サイズは行構成ごとに変える。
   いずれも右側にダーツ 1 本ぶんの余地を残すこと。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero--2line .hero__w--2,
  .hero--2line .hero__w--3 { display: inline; }

  .hero--2line .hero__headline { font-size: clamp(2.5rem, 4.94vw, 5.6rem); }

  /* 見出しは幅だけでなく画面の高さにも従わせる。
     幅基準（7.8vw）のままだと、横に広く縦が短いノート PC（1366x768 /
     1600x900）で 3 行の見出しだけで縦の 48% を占め、HERO が 1 画面に
     収まらなくなる。min() で「幅から出る値」と「高さから出る値」の
     小さい方を採るので、縦に余裕のある画面では従来のサイズを保ったまま、
     縦が足りない画面でだけ自動的に一段落ちる。
       1366x768 : min(106.5, 96.0) = 96.0   （高さ側が効く）
       1280x800 : min( 99.8,100.0) = 99.8   （従来どおり）
       1440x900 : min(112.3,112.5) = 112.3  （従来どおり）
       1600x900 : min(124.8,112.5) = 112.5  （高さ側が効く）
       1920x1080: min(136.0,135.0) = 135.0  （ほぼ従来どおり） */
  .hero--3line .hero__headline { font-size: clamp(2.5rem, min(7.8vw, 12.5vh), 8.5rem); }

  /* 大きな文字面なので行間はさらに締める。全て大文字で下に伸びる字が
     無いため、0.98 でも字面同士はぶつからない */
  .hero__headline { line-height: 0.98; letter-spacing: -0.012em; }

  /* ロゴ〜見出しの間も同じ考え方で高さに連動させる。
     768:36 / 1366x768:43 / 1440x900:50 / 1920x1080:56 */
  .hero__brand { margin-bottom: clamp(1.75rem, min(3.75vw, 5.6vh), 3.5rem); }

  /* 見出し〜日本語本文。ここは元から vh 基準だが、上で見出しが縮む
     ぶんだけ少し詰めて、3 つの塊の間隔を「広・中・小」の順に保つ。
     768:31 / 900:36 / 1080:43 */
  .hero__statement { margin-top: clamp(20px, 4vh, 56px); }

  /* コンテナ幅の 40%・BORDERS. の 84% を全幅で保つ値。
     768:272 / 1024:362 / 1440:510 / 1920:544 */
  .hero__logo { width: clamp(17rem, 35.4vw, 34rem); }
}

/* モバイルは画面幅に合わせて常に3行（単語ごとに改行） */
@media (max-width: 767.98px) {
  .hero__w { display: block; }
}

/* ==========================================================================
   ピリオド ＝ 着弾点
   ========================================================================== */
.hero__dot {
  position: relative;
  display: inline-block;
  /* ダーツと発光の基準点。ここを動かすと全ての位置が追従する */
}

/* ==========================================================================
   着弾 — 一度きり。「カッ」と一瞬だけ命中し、0.9 秒で完全に静止する。
   すべて .hero__strike の中心（＝七重丸の中心＝ダーツ先端）から描く。
   別座標を一切持たないので、的が動いても必ず追従する。
   ========================================================================== */

/* 中心から一度だけ広がる極小の円。線は 1px、輪郭だけ */
.hero__hit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9%;
  aspect-ratio: 1;
  border: 1px solid rgba(226, 236, 248, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.18);
  opacity: 0;                       /* 動かなければ何も出ない。安全側に倒す */
  pointer-events: none;
}

/* 中心の閃光。白〜シャンパンゴールド。滲ませず、すぐ消す */
.hero__hit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  /* 最内円（直径 4.8%）の内側に収める。光球ではなく閃光に見せる */
  width: 3.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.55);
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(245, 208, 106, 0.62) 26%,
    rgba(245, 208, 106, 0.16) 48%,
    transparent 66%);
  opacity: 0;
  pointer-events: none;
}

/* 1px の放射線 3 本。ダーツの軸（-35°）は避けて散らす */
.hero__hit-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  pointer-events: none;
}

.hero__hit-rays span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;                       /* 中心から外へ伸びる半径 */
  height: 1px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(226, 236, 248, 0.60), transparent);
}

.hero__hit-rays span:nth-child(1) { transform: rotate(145deg); }
.hero__hit-rays span:nth-child(2) { transform: rotate(55deg); }
.hero__hit-rays span:nth-child(3) { transform: rotate(235deg); }

/* 3 秒周期。動きは周期の最後 30%（＝900ms）だけで、
   それ以外の時間は完全に消えている。チカチカさせない。 */
@media (prefers-reduced-motion: no-preference) {
  .hero__hit,
  .hero__hit-core,
  .hero__hit-rays,
  .hero__rings-bull,
  .hero__rings {
    animation-duration: var(--hit-cycle);
    animation-timing-function: var(--ease);
    animation-delay: var(--hit-delay);
    animation-iteration-count: infinite;
  }
  .hero__hit        { animation-name: heroHitRing; }
  .hero__hit-core   { animation-name: heroHitCore; }
  .hero__hit-rays   { animation-name: heroHitRays; }
  /* 最内円が一瞬だけ明るくなる */
  .hero__rings-bull { animation-name: heroHitBull; }
  /* 的そのものが 1〜2px だけ反応する。中心基準の拡大なのでブルは動かない */
  .hero__rings      { animation-name: heroHitBoard; }
}

/* 以下の % は 3 秒周期に対する割合。70% までは何も起きない */
@keyframes heroHitRing {
  0%, 70% { opacity: 0;    transform: translate(-50%, -50%) scale(0.18); }
  73%     { opacity: 0.85; }
  100%    { opacity: 0;    transform: translate(-50%, -50%) scale(1); }
}

/* 輪・閃光・放射線は同じ 70% から始まり、それぞれの長さで消える */
@keyframes heroHitCore {
  0%, 70% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  72.3%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  86.5%   { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  100%    { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
}

@keyframes heroHitRays {
  0%, 70% { opacity: 0;   transform: translate(-50%, -50%) scale(0.4); }
  72.7%   { opacity: 0.9; }
  85%     { opacity: 0;   transform: translate(-50%, -50%) scale(1); }
  100%    { opacity: 0;   transform: translate(-50%, -50%) scale(0.4); }
}

@keyframes heroHitBull {
  0%, 70%, 100% { stroke-opacity: 0.34; }
  73%           { stroke-opacity: 0.90; }
}

@keyframes heroHitBoard {
  0%, 70%, 100% { transform: translateY(-50%) scale(1); }
  73.6%         { transform: translateY(-50%) scale(1.0015); }   /* 1440:2.0px 1024:1.5px 768:1.2px */
}

/* 動きを止める設定では、ごく薄い静的な着弾マークだけを残す */
@media (prefers-reduced-motion: reduce) {
  .hero__hit {
    opacity: 0.30;
    transform: translate(-50%, -50%) scale(0.40);
  }
  .hero__hit-core { opacity: 0.20; }
  .hero__hit-rays { opacity: 0; }
}

/* ==========================================================================
   ダーツ — 1本のみ。右上から約35°で進入し、先端がピリオドに接する
   ========================================================================== */
.hero__dart {
  position: absolute;
  /* 先端＝七重丸の中心。
     親（.hero__strike）は的とまったく同じ箱なので、その中心＝ブル。
       先端は viewBox(0,15) ＝ 要素の左端・垂直中央。transform-origin も同じ点。
       left/top 50% で要素の左上を箱の中心へ置き、translateY(-50%) で
       先端をちょうど中心へ引き上げる。回転は先端を軸に回るので位置は動かない。
     em ではなく的のサイズ基準にしてあるため、文字サイズを変えても外れない。 */
  left: 50%;
  top: 50%;
  width: 18%;                           /* 実描画された的の 18%。max-width の効果も自動で反映される */
  height: auto;
  /* base.css の svg { max-width:100% } は、
     親（inline-block のピリオド）の幅にダーツを潰してしまうため解除する */
  max-width: none;
  transform-origin: 0 50%;              /* 原点＝ダーツの先端 */
  transform: translateY(-50%) rotate(-35deg);   /* 右上から進入する */
  pointer-events: none;
  overflow: visible;
}

.hero__dart-body    { fill: url(#dartMetal); }
.hero__dart-edge    { fill: none; stroke: var(--metal-100); stroke-width: 1.3; opacity: 0.7; }
/* ポイントは細い鉄。バレルの黒鉄より明るいガンメタルで、
   「研がれた鋼の穂先」として読ませる。クロームにも発光にもしない。 */
.hero__dart-tip     { fill: url(#dartPoint); }
.hero__dart-p1      { stop-color: #8e969e; }   /* 上面の反射（銀ではなく鋼の明部） */
.hero__dart-p2      { stop-color: #737b84; }
.hero__dart-p3      { stop-color: #474e57; }
.hero__dart-p4      { stop-color: #1e232a; }   /* 下面の影 */

/* 上稜線のごく細いハイライト。1本だけ。硬さはここで出す */
.hero__dart-point-edge {
  fill: none;
  stroke: #cfd6dd;
  stroke-width: 0.8;
  opacity: 0.5;
  stroke-linecap: round;
}
.hero__dart-m1      { stop-color: #3d444d; }
.hero__dart-m2      { stop-color: #121519; }

/* ==========================================================================
   一本の軌道の起点
   着弾点から真下へ伸び、次章（STATEMENT）の水平線へ接続する。
   HERO の中では 60px しか見せない。「続きがある」ことだけを示す。
   ========================================================================== */
.hero__trace {
  position: absolute;
  left: 50%;
  top: calc(100% - 0.16em);
  width: 1px;
  height: var(--hero-trace-h, 60px);
  background: linear-gradient(180deg, var(--trace-dim), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

/* ==========================================================================
   星 — 3 つだけ。夜が明けるにつれて消えていく
   ========================================================================== */
.hero__stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

@media (max-width: 767.98px) {
  /* モバイルは 2 つに減らす */
  .hero__stars .star--3 { display: none; }
}

/* モバイル: 画面幅に対してダーツが大きすぎると画面外へ出るため縮める。
   進入角（-35°）は PC と揃え、印象を変えない。 */
@media (max-width: 767.98px) {
  .hero__dart { width: 19%; }
}

/* ==========================================================================
   ステートメント（明朝・限定使用）
   ========================================================================== */
.hero__statement {
  font-family: var(--font-serif-jp);
  font-weight: 400;
  font-size: clamp(0.9375rem, 0.85rem + 0.5vw, 1.375rem);
  line-height: 2.1;
  letter-spacing: 0.08em;
  color: var(--fg);
  margin-top: clamp(var(--sp-4), 4.5vh, var(--sp-6));
  max-width: min(100%, 40rem);
}

/* モバイル: 1行が収まらず、カタカナ語の途中で折れてしまうため、
   文字サイズと字送りを詰めて 1 文 = 1 行に収める。 */
@media (max-width: 767.98px) {
  .hero__statement {
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    line-height: 2;
    /* 最終行が 1〜2 文字だけ残る「泣き別れ」を避ける（対応ブラウザのみ） */
    text-wrap: pretty;
  }
}

/* ==========================================================================
   スクロール誘導 — 1px の縦罫のみ。文言もアイコンも置かない
   ========================================================================== */
.hero__scroll {
  position: absolute;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.hero__scroll-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-dim);
  writing-mode: vertical-rl;
}

.hero__scroll-line {
  width: 1px;
  height: clamp(48px, 9vh, 96px);
  background: linear-gradient(180deg, var(--metal-300), transparent);
}

@media (max-width: 767.98px) {
  .hero__scroll-label { display: none; }
}

/* ==========================================================================
   うまの助
   v2 では HERO に登場させない。文字と光だけの領域とする。
   登場位置は WORLD ⇄ JAPAN の交点。素材受領後に有効化する。
   ========================================================================== */