/* ===================================================================
   2026-10-11 トップ冒頭ファーストビュー「点が、線になる。」（A案）
   点が弾みながら施策の点を置き、1本の線がそれらを貫いて見出しの下線になる。
   その後に説明文・行動導線・信用要素を同じ画面へ出す。
   動きは /assets/js/opening-motion.js。JSが動かない環境では静止状態で表示する。
   =================================================================== */

.opening--motion {
  padding: 112px 0 88px;
}

.opening__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.opening--motion .opening__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
}

/* 見出しの下に置く、説明文・対象者・行動導線・信用要素 */
.opening__next {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(28px, 3.4vw, 44px);
}

.opening__next .hero__lead,
.opening__next .hero__vision {
  max-width: 640px;
  margin-inline: auto;
  /* 中央揃えなので、単語の途中で折り返さず文節で改行する（対応ブラウザのみ） */
  word-break: auto-phrase;
  text-wrap: balance;
}

.opening__next .hero__vision {
  margin-bottom: 28px;
  padding-left: 0;
  border-left: 0;
}

.opening__next .hero__actions {
  justify-content: center;
}

.opening__next .hero__trust {
  justify-content: center;
  margin-top: 32px;
  padding-top: 22px;
}

/* 見出しの文字マスク（JSが1文字ずつ包む） */
.opening__msg .om-m {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.opening__msg .om-c {
  display: inline-block;
  will-change: transform;
}

/* SVGステージ内の文字 */
.om-label {
  fill: var(--text-secondary);
  font-family: var(--font-body, "Noto Sans JP"), sans-serif;
  letter-spacing: 0.12em;
}

.om-idx {
  fill: var(--gold);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
}

/* 既存の立ち上がり演出は使わず、JSが状態を持つ */
.has-js .opening--motion .opening__mark,
.has-js .opening--motion .opening__msg,
.has-js .opening--motion .opening__sub {
  animation: none;
}

/* JSが始まる前（または動かなかった時）の保険：少し待ってから静かに表示する */
.has-js .opening--motion:not(.is-running):not(.is-done) .opening__inner > * {
  animation: openRise 1s cubic-bezier(0.2, 0.72, 0.2, 1) 2.4s both;
}

.opening--motion.is-running .opening__mark,
.opening--motion.is-running .opening__sub,
.opening--motion.is-running .opening__next {
  opacity: 0;
}

@media (max-width: 640px) {
  .opening--motion {
    padding: 88px 0 72px;
  }

  .opening__next .hero__trust {
    gap: 14px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening__stage {
    display: none;
  }

  .has-js .opening--motion .opening__inner > * {
    animation: none !important;
    opacity: 1 !important;
  }
}