/* ロゴを表示するコンテナのスタイル */
.neon-logo-display-area {
  margin: 0;
  padding: 0;
  background-color: transparent; /* 背景を透明にする */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh; /* 最小高さを設定。必要に応じて調整してください */
  height: auto; /* コンテンツに合わせて高さを自動調整 */
  width: 100%; /* フルワイドに対応 */
  box-sizing: border-box; /* パディングを幅に含める */
}

.logo-wrapper {
  position: relative;
  display: inline-block;
}

.neon-logo {
  display: block;
  max-width: 30vw; /* ビューポート幅に対する最大幅 */
  height: auto;
  border-radius: 0.5rem; /* 角を丸くする */

  /* 光彩の重ねがけ - CSS変数を使用 */
  filter:
      brightness(1.1)
      contrast(1.2)
      drop-shadow(0 0 2px var(--neon-glow-light)) /* 明るい色 */
      drop-shadow(0 0 6px var(--neon-glow-main)) /* メインの色 */
      drop-shadow(0 0 12px var(--neon-glow-main))
      drop-shadow(0 0 25px var(--neon-glow-main));

  animation: flicker-glow 2.5s infinite alternate;
}

@keyframes flicker-glow {
  0%, 16%, 24%, 100% {
      opacity: 1;
      filter:
          brightness(1.1)
          contrast(1.2)
          drop-shadow(0 0 2px var(--neon-glow-light))
          drop-shadow(0 0 6px var(--neon-glow-main))
          drop-shadow(0 0 12px var(--neon-glow-main))
          drop-shadow(0 0 25px var(--neon-glow-main));
  }

  20%, 40%, 60% {
      opacity: 0.7;
      filter:
          brightness(1.05)
          contrast(1.1)
          drop-shadow(0 0 1px var(--neon-glow-light))
          drop-shadow(0 0 4px var(--neon-glow-main));
  }

  50% {
      opacity: 0.4;
      filter:
          brightness(1)
          contrast(1)
          drop-shadow(0 0 0px var(--neon-glow-main));
  }
}