<section id="about">
    <div class="img animate-left">
      <img src="<?php echo get_template_directory_uri(); ?>/img/about.jpg" alt="">
    </div>


    <div class="text">
      <h2 class="section-title">
        <span class="en">ABOUT</span>
        <span class="ja">わたしたちについて</span>
      </h2>
      <p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
      <p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
      <p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
    </div>
  </section>

/* 初期状態 */
.animate-left {
  opacity: 0;
  transform: translateX(-200px); /* 左にアニメーションする初期位置 */
  transition: opacity 0.5s ease, transform 3s ease;
}


/* アクティブな状態 */
#about.active .animate-left {
  opacity: 1;
  transform: translateX(0); /* 左にアニメーションする初期位置をリセット */
}

// scroll animation
// スクロールイベントを監視し、要素がビューポート内にあるかどうかを判定
window.addEventListener("scroll", function () {
  handleScroll();
});


// 初回のみアクティブクラスを追加するフラグ
var isFirstScroll = true;


function handleScroll() {
  var aboutSection = document.getElementById("about");


  // ビューポート内にある場合、アクティブクラスを追加
  if (isInViewport(aboutSection)) {
    aboutSection.classList.add("active");


    // 初回フラグが true の場合、オフにする
    if (isFirstScroll) {
      isFirstScroll = false;
    }
  } else {
    // ビューポート外の場合かつ初回フラグが false の場合、アクティブクラスを削除しない
    if (!isFirstScroll) {
      aboutSection.classList.remove("active");
    }
  }
}


// 指定された要素がビューポート内にあるかどうかを判定する関数
function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var windowHeight =
    window.innerHeight || document.documentElement.clientHeight;


  // ビューポートの上端より下にあり、かつビューポートの下端より上にある場合
  return rect.top <= windowHeight && rect.bottom >= 0;
}