@charset "UTF-8";

/* スクロールアニメーション用CSS */

/* セクション全体のアニメーション */
.scroll-section-item {
    opacity: 0 !important;
    transform: translateY(50px) scale(0.95);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-section-item.scroll-section-animated {
    opacity: 1 !important;
    transform: translateY(0) scale(1);
}

/* --- ここから下は汎用アニメーションクラスのみ --- */

.fade-in {
  opacity: 0;
  transform: none;
  transition: opacity 0.7s;
}
.fade-in.scroll-animated {
  opacity: 1;
}

.slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s, transform 0.7s;
}
.slide-up.scroll-animated {
  opacity: 1;
  transform: translateY(0);
}

.zoom-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.7s, transform 0.7s;
}
.zoom-in.scroll-animated {
  opacity: 1;
  transform: scale(1);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s, transform 0.7s;
}
.fade-in-left.scroll-animated {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s, transform 0.7s;
}
.fade-in-right.scroll-animated {
  opacity: 1;
  transform: translateX(0);
}

/* セクション全体のアニメーション完了時 */
.scroll-animation-complete {
    position: relative;
}

/* アニメーション無効化設定（アクセシビリティ対応） */
@media (prefers-reduced-motion: reduce) {
    .scroll-animation .scroll-item {
        transition: opacity 0.3s ease-out;
        transform: none;
    }
    
    .scroll-animation .scroll-item.scroll-animated {
        transform: none;
    }
}