/* =========================
   ロゴアニメーション構造
========================= */
.logo-animation-wrapper {
  display: block;
  overflow: hidden;
  line-height: 1.5;
  position: relative;
  margin-bottom: 1.5rem;
}

.logo-line {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  min-height: 1.2em;
  margin-bottom: 0.15em;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* =========================
   各1文字の基本設定
========================= */
.logo-char {
  display: inline-block;
  font-weight: 700;
  vertical-align: middle;
  opacity: 1;
  transform: none;
  color: inherit; /* ← highlight-wrapper に色を渡すため重要 */
  transition: none;
}

/* アニメーション用初期状態（JSで .js-animate が付くと有効） */
body.js-animate .logo-char {
  opacity: 0;
  transform: translateY(100%) rotate(3deg);
  transform-origin: bottom center;
}

/* =========================
   強調文字（オレンジ色）
========================= */
.logo-char.highlight-wrapper {
  color: var(--secondary-dark) !important;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

/* アニメーション開始前の強調文字状態も同様に沈める */
body.js-animate .logo-char.highlight-wrapper {
  opacity: 0;
  transform: translateY(100%) rotate(3deg);
}

/* =========================
   句読点スタイル調整
========================= */
.logo-char.punctuation {
  padding-left: 0.05em;
  padding-right: 0.05em;
  margin-top: -0.1em;
  font-weight: 500;
}

/* =========================
   下のテキストが重ならないように調整
========================= */
.hero-subtitle {
  margin-top: 2rem;
  position: relative;
  z-index: 0;
}

/* =========================
   フォントサイズ調整（レスポンシブ）
========================= */
@media (min-width: 768px) {
  .hero-title {
    font-size: 3.2rem;
  }

  .logo-line:nth-child(2) {
    padding-left: 0.1em;
  }
}

@media (max-width: 767px) {
  .hero-title {
    font-size: 2.6rem;
  }

  .logo-line {
    letter-spacing: 0;
  }
}