/* ============================================================
   home-ae.css — espoirfrontier.ae TOP専用（v ae25・層タグ降下レール・モバイル切替上揃え）
   鉱脈エマージ・ヒーローの舞台装置。style.css は凍結・不変。
   canvas が失敗しても .c-hero--vein の背景で成立する（10b方針）。
   ============================================================ */
.c-hero--vein { position: relative; height: 560vh; color: #F8E7C2;
  background: radial-gradient(90% 60% at 50% 55%, rgba(239,115,40,.14), transparent 70%),
              linear-gradient(180deg, #120B07 0%, #1D110A 100%); }
.c-hero--vein .c-hero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; height: 100dvh; min-height: 600px; overflow: hidden; }
.c-hero--vein canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.c-hero--vein .c-hero-inner { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 24px; pointer-events: none; }
.c-hero--vein .c-hero-inner .eyebrow { color: var(--gold-soft); font-family: var(--serif); font-weight: 500;
  letter-spacing: .34em; text-indent: .34em; font-size: clamp(12px, 1.6vw, 16px); margin: 0 0 20px; }
.c-hero--vein .c-hero-inner h1 { font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5.4vw, 62px); line-height: 1.16; letter-spacing: .015em; margin: 0; max-width: 16em;
  color: #F8E7C2; text-shadow: 0 2px 26px rgba(18,11,7,.9); }
.c-hero--vein .c-hero-inner .sub { max-width: 34em; margin: 26px auto 0; color: rgba(248,231,194,.9);
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.85; text-shadow: 0 2px 18px rgba(18,11,7,.9); }

.c-hero--vein .c-cue { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(248,231,194,.75); }
.c-hero--vein .c-cue .c-line { width: 1px; height: 50px;
  background: linear-gradient(rgba(248,231,194,.65), rgba(248,231,194,0)); transform-origin: top; }

/* 元素記号レール（ヒーロー内・JSが不透明度と降下ドリフトを駆動）
   ae18: 出現順＝上→下（24%→44%→62%）に再配置し、スクロールで下へ流れる降下スタガー */
.c-hero--vein #veinTag { position: absolute; top: 24%; z-index: 3; opacity: 1; }
.c-hero--vein #oreTag { position: absolute; top: 44%; z-index: 3; opacity: 0; }
.c-hero--vein #mineTag { position: absolute; top: 62%; z-index: 3; opacity: 0; }

@media (max-width: 820px) {
  .c-hero--vein { height: 480vh; }
  .c-hero--vein .c-hero-inner { display: grid; grid-template-rows: auto auto; align-content: start;
    justify-items: center; padding-top: 17vh; }
  .c-hero--vein .c-hero-inner .eyebrow { grid-area: 1 / 1; }
  .c-hero--vein .c-hero-inner h1 { grid-area: 2 / 1; align-self: start; font-size: clamp(21px, 5.2vw, 30px); line-height: 1.3; }
  .c-hero--vein .c-hero-inner .sub { grid-area: 2 / 1; align-self: start; margin: 0; opacity: 0; line-height: 1.6; font-size: clamp(13px, 3.7vw, 15px); max-width: none; } /* ae18: 横幅を広げ約3行に */
}



/* --- ae20: JAヒーローsubの整形改行（文の切れ目・desktopのみ） --- */
.c-hero--vein .c-hero-inner .sub .br-d { display: none; }
@media (min-width: 821px) {
  .c-hero--vein .c-hero-inner .sub .br-d { display: inline; }
}


/* --- ae23: モバイルの層タグ位置とsub余白（本文との衝突解消） --- */
@media (max-width: 820px) {
  .c-hero--vein #veinTag { top: 46%; }
  .c-hero--vein #oreTag { top: 60%; }
  .c-hero--vein #mineTag { top: 74%; }
  .c-hero--vein .c-hero-inner .sub { padding-inline: clamp(14px, 4.5vw, 24px); }
}