html {
  scroll-behavior: smooth;
}
body {
  	margin: 0;
  	line-height: normal;
	
}

/* アニメーションの定義 */
@keyframes fadeIn {
  from {
    opacity: 0; /* 開始時（完全に透明） */
    transform: translateY(20px); /* 少し下から移動してくる演出 */
  }
  to {
    opacity: 1; /* 終了時（完全に不透明） */
    transform: translateY(0);
  }
}

/* 初期状態：透明で少し下にいる（デフォルト） */
.fade-in-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 方向別の初期位置 - 既存のtransformを保持 */
.fade-in-element.fade-from-left {
  transform: translateX(-30px);
}

.fade-in-element.fade-from-right {
  transform: translateX(30px);
}

.fade-in-element.fade-from-top {
  transform: translateY(-30px);
}

.fade-in-element.fade-from-bottom {
  transform: translateY(30px);
}

/* セキュリティセクション専用：重なり効果とfadeInの組み合わせ（PC用） */
@media (min-width: 1024px) {
  .security-content.fade-in-element.fade-from-right:nth-child(1) {
    transform: translateX(30px); /* 右からfadeIn */
  }

  .security-content.fade-in-element.fade-from-right:nth-child(2) {
    transform: translateX(10px); /* 右からfadeIn + 重なり効果 (-20px + 30px) */
  }

  .security-content.fade-in-element.fade-from-right:nth-child(3) {
    transform: translateX(-10px); /* 右からfadeIn + 重なり効果 (-40px + 30px) */
  }

  /* アニメーション完了時の最終位置も調整 */
  .security-content.fade-in-element.is-visible:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
  }

  .security-content.fade-in-element.is-visible:nth-child(2) {
    opacity: 1;
    transform: translateX(-20px); /* 重なり効果を維持 */
  }

  .security-content.fade-in-element.is-visible:nth-child(3) {
    opacity: 1;
    transform: translateX(-40px); /* 重なり効果を維持 */
  }
}

/* スマホ用：下からフェードイン + 重なり効果 */
@media (max-width: 1024px) {
  .security-content.fade-in-element.fade-from-right:nth-child(1) {
    transform: translateY(30px); /* 下からfadeIn */
  }

  .security-content.fade-in-element.fade-from-right:nth-child(2) {
    transform: translateY(-10px); /* 下からfadeIn + 重なり効果 (-40px + 30px) */
  }

  .security-content.fade-in-element.fade-from-right:nth-child(3) {
    transform: translateY(-50px); /* 下からfadeIn + 重なり効果 (-80px + 30px) */
  }

  /* アニメーション完了時の最終位置も調整 */
  .security-content.fade-in-element.is-visible:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
  }

  .security-content.fade-in-element.is-visible:nth-child(2) {
    opacity: 1;
    transform: translateY(-40px); /* 重なり効果を維持 */
  }

  .security-content.fade-in-element.is-visible:nth-child(3) {
    opacity: 1;
    transform: translateY(-80px); /* 重なり効果を維持 */
  }
}

/* 速度別のトランジション */
.fade-in-element.fade-fast {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fade-in-element.fade-normal {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-element.fade-slow {
  transition: opacity 1.0s ease, transform 1.0s ease;
}

.fade-in-element.fade-very-slow {
  transition: opacity 1.5s ease, transform 1.5s ease;
}

/* 遅延クラス */
.fade-in-element.fade-delay-0 {
  transition-delay: 0ms;
}

.fade-in-element.fade-delay-100 {
  transition-delay: 100ms;
}

.fade-in-element.fade-delay-200 {
  transition-delay: 200ms;
}

.fade-in-element.fade-delay-300 {
  transition-delay: 300ms;
}

.fade-in-element.fade-delay-400 {
  transition-delay: 400ms;
}

.fade-in-element.fade-delay-500 {
  transition-delay: 500ms;
}

.fade-in-element.fade-delay-600 {
  transition-delay: 600ms;
}

.fade-in-element.fade-delay-800 {
  transition-delay: 800ms;
}

.fade-in-element.fade-delay-1000 {
  transition-delay: 1000ms;
}

/* is-visibleクラスが付与されたら、不透明で元の位置に戻る */
.fade-in-element.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.highlight-on-scroll {
  display: inline;
  padding: 0 4px;
  
  /* グラデーションで背景を作成 */
  background: linear-gradient(to right, #65DD19 50%, transparent 50%);
  background-size: 200% 100%;
  
  /* ★初期状態：ハイライトが隠れている位置 */
  background-position: 100% 0; 
  
  /* ★transitionでアニメーションを設定 */
  transition: background-position 0.8s ease-out, color 0.8s ease; 
}

/* ★JSでこのクラスが付与されたら、アニメーションが開始される */
.highlight-on-scroll.is-visible {
  color: #fff;
  /* ハイライトが完全に表示される位置 */
  background-position: 0 0; 
}