/* 01 ヒーロー：粒子が動くとき（.stage-motion）だけ高さ300vh（画面3枚分）にして、中身を画面に固定する。
   見出し（h1）と相談ボタンは最初から見えている（最初は見出しを小さめにし、約44%でロゴが完成したら大きく見せる）。
   0〜26% 書類の形の粒が散らばり、最初の一文 → 弾けてロゴへ → くっきりしたロゴ → 70%〜 ロゴが流れて次へ（背景は黒のまま）
   （段階の数値は js/particles/scroll.js の HERO）。それ以外（動きを減らす設定・WebGL なし・JS が動かない）は1画面で全部見せる */
.hero {
  height: auto;
  padding: 0;
  background: var(--ink);
}
.stage-motion .hero { height: 300vh; }

/* 粒子の canvas（z-index 1）より上に文字を置くため、箱に z-index を付ける。背景はセクション側（canvas より下）に置く */
.hero-sticky {
  position: relative;
  z-index: var(--z-content);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.stage-motion .hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}
.hero .hero-inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(76px, 11vh, 112px);
  padding-bottom: clamp(64px, 10vh, 104px);
}

/* ロゴが組み上がる場所（粒子はこの箱の大きさに合わせてロゴを描く）。
   粒子が動くときは残りの高さだけを使い（flex:1 1 0・最小0）、背の低い画面でも文字とボタンを押し出さない */
.hero-visual {
  flex: 1 1 auto;
  width: 100%;
  min-height: min(300px, 38vh);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-fallback-logo {
  display: none;
  height: 100%;
  width: auto;
  max-height: 300px;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 50%; /* 画像の四角い黒地の角を見せない */
}

/* 文章：見出し・説明・相談ボタン。最初の一文はこの上（ロゴの場所の下側）に重ねて出す */
.hero-stack {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin-top: clamp(16px, 3vh, 32px);
  text-align: center;
}

/* 最初の画面で何のサイトか伝わるよう、一文は大きくはっきり見せる（後ろの粒は engine.js が暗くする） */
.hero-intro {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + clamp(12px, 2.5vh, 28px));
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2.125rem);
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--on-dark);
}

.hero-eyebrow {
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  color: var(--gold-light);
}
.hero-title {
  margin-top: 14px;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 4rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--on-dark);
}
.hero-lead {
  margin: 20px auto 0;
  max-width: 40em;
  color: var(--on-dark-muted);
}
.hero-note {
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--on-dark-muted);
}
.hero-note-mark { color: var(--gold-light); }
.hero-note-sep { margin: 0 0.4em; }

.hero-actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
}
.hero-btn { min-height: 52px; }
.hero-sublink {
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  color: var(--on-dark-muted);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-dark);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hero-sublink:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* スクロールを促す細い線 */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-latin);
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  transition: opacity var(--dur) var(--ease-out);
}
.hero-scroll i {
  position: relative;
  display: block;
  width: 1px;
  height: 44px;
  overflow: hidden;
  background: var(--line-dark);
}
.hero-scroll i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--gold-light);
  animation: hero-scroll-line 2.4s var(--ease-out) infinite;
}
@keyframes hero-scroll-line {
  from { top: -40%; }
  to { top: 100%; }
}

/* ---- 粒子が動くとき（stage-motion）：最初は一文を大きく、見出しは小さめ（相談ボタンは最初から押せる）。
   ロゴが完成したら（.is-title）見出しを大きく見せる。transform だけを変えるので、ロゴの箱の大きさは動かない ---- */
.stage-motion .hero-intro {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.stage-motion .hero.is-intro .hero-intro { opacity: 1; transform: none; }

.stage-motion .hero-title {
  transform: scale(0.78);
  transform-origin: 50% 50%;
  transition: transform var(--dur) var(--ease-out);
}
.stage-motion .hero.is-title .hero-title { transform: none; }
.stage-motion .hero:not(.is-intro) .hero-scroll { opacity: 0; }
.stage-motion .hero-visual {
  flex: 1 1 0;
  min-height: 0;
}

/* ---- 粒子が動かないとき（動きを減らす設定・WebGL なし・JS が動かない）：1画面で全部見せる ---- */
.hero-scroll { display: none; }
.stage-motion .hero-scroll { display: flex; }
.stage-none .hero-fallback-logo { display: block; }
/* JS がまったく動かない（どのクラスも付かない）ときも、代わりのロゴを出す */
html:not(.stage-motion):not(.stage-static) .hero-visual:not(.has-stage-logo) .hero-fallback-logo { display: block; }

@media (max-width: 767px) {
  .hero .hero-inner { padding-bottom: 76px; }
  .hero-stack { text-align: left; }
  .stage-motion .hero-title { transform-origin: 0 50%; }
  .hero-lead { margin-left: 0; }
  .hero-actions { justify-content: flex-start; gap: 14px 24px; }
  .hero-btn { min-height: 48px; padding: 14px 24px; }
  .hero-intro { font-size: 1.25rem; letter-spacing: 0.04em; }
  .hero-fallback-logo { max-height: 240px; }
}

/* ---- 背の低い画面（375×667 の Safari・高さ650px前後のノートPC）：余白と見出しを詰め、ボタンが画面の外に出ないようにする ---- */
@media (max-height: 700px) {
  .hero .hero-inner { padding-top: 64px; padding-bottom: 40px; }
  .hero-stack { margin-top: 8px; }
  .hero-eyebrow { line-height: 1.6; }
  .hero-title { margin-top: 8px; font-size: clamp(1.625rem, 0.9rem + 2.6vw, 3rem); line-height: 1.4; }
  .hero-lead { margin-top: 10px; font-size: 0.9375rem; line-height: 1.75; }
  .hero-note { margin-top: 4px; line-height: 1.6; }
  .hero-actions { margin-top: 14px; }
  .hero-btn { min-height: 46px; padding: 11px 22px; }
  .hero-scroll i { height: 28px; }
  .hero-intro { font-size: 1.125rem; line-height: 1.7; bottom: calc(100% + 6px); }
}
@media (max-height: 700px) and (max-width: 767px) {
  .hero .hero-inner { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll i::after { animation: none; top: 30%; }
}

/* 狭い画面では「／」を出さず、2行に分ける（行末に／が残らないように） */
@media (max-width: 380px) {
  .hero-note-sep { display: none; }
  .hero-note-mark { display: block; }
}

/* ---- くっきりしたロゴ画像（js/particles/stage.js が .hero-visual と .industries-shape に差し込む） ----
   粒が集まりきったら、同じ位置・同じ大きさで浮かび上がる。
   大きさ＝箱の短い辺 × 割合（粒のロゴと同じ割合。js/particles/scroll.js の LOGO_FIT）を stage.js が測って --stage-logo-size に入れる。
   濃さ＝--logo-on（スクロールで 0〜1） */
.hero-visual { position: relative; }
.hero-visual.has-stage-logo .hero-fallback-logo { display: none; }
.stage-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-logo-size, 0px);
  height: var(--stage-logo-size, 0px);
  max-width: none;
  object-fit: contain;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(1 + (1 - var(--logo-on, 1)) * 0.03));
  opacity: var(--logo-on, 1);
  pointer-events: none;
  user-select: none;
}
.stage-motion .stage-logo { opacity: var(--logo-on, 0); }
/* 清書のロゴは黒い円盤の中も透明なので、後ろに墨色の円盤を敷いて、裏で落ち着いた粒が文字のまわりに透けないようにする */
.stage-logo { background: var(--ink); }
/* 対応業種のカラーの絵（透過）は四角のまま・下地なし */
.stage-logo.stage-illust { background: none; border-radius: 0; }