Webデザイナーの「あ、これ欲しかった！」を叶えるCusorレシピ集～JavaScript が苦手な方必見！～

要件：
スマホ幅（768px以下）の場合のみ、nav.header-navをハンバーガーメニューにしたい。

条件：
- ハンバーガーアイコンの位置は、h1.header-logoと横並びで右寄せ。
- ハンバーガーアイコンをクリック/タップするとnav要素が上からスライドイン。
- JSコードはsrcipt.jsに記述する。
- CSSアニメーション付き、JSは最小限で。背景オーバーレイも追加。

<header>
    <div class="container flex-container">
        <h1 class="header-logo text-center">
            <img src="images/logo.png" width="168" height="32" alt="ズーロッパ東京">
        </h1>
        <!-- ハンバーガーメニューボタン（スマホのみ表示） -->
        <button class="hamburger-btn" aria-label="メニューを開く">
            <span></span>
            <span></span>
            <span></span>
        </button>
        <nav class="header-nav">
            <ul class="flex-container flex-all-row">
                <li><a href="#">お知らせ</a></li>
                <li><a href="#">イベント情報</a></li>
                <li><a href="#">Zooloppaとは</a></li>
                <li><a href="#">交通アクセス</a></li>
            </ul>
        </nav>
    </div>
    <!-- 背景オーバーレイ -->
    <div class="menu-overlay"></div>
</header>

// ハンバーガーメニューの開閉機能
document.addEventListener('DOMContentLoaded', function() {
    const hamburgerBtn = document.querySelector('.hamburger-btn');
    const headerNav = document.querySelector('.header-nav');
    const menuOverlay = document.querySelector('.menu-overlay');

    // ハンバーガーボタンクリック時
    hamburgerBtn.addEventListener('click', function() {
        toggleMenu();
    });

    // オーバーレイクリック時（メニューを閉じる）
    menuOverlay.addEventListener('click', function() {
        closeMenu();
    });

    // メニューの開閉を切り替える関数
    function toggleMenu() {
        hamburgerBtn.classList.toggle('active');
        headerNav.classList.toggle('active');
        menuOverlay.classList.toggle('active');

        // aria-labelの更新
        if (hamburgerBtn.classList.contains('active')) {
            hamburgerBtn.setAttribute('aria-label', 'メニューを閉じる');
        } else {
            hamburgerBtn.setAttribute('aria-label', 'メニューを開く');
        }
    }

    // メニューを閉じる関数
    function closeMenu() {
        hamburgerBtn.classList.remove('active');
        headerNav.classList.remove('active');
        menuOverlay.classList.remove('active');
        hamburgerBtn.setAttribute('aria-label', 'メニューを開く');
    }

    // ESCキーでメニューを閉じる
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && headerNav.classList.contains('active')) {
            closeMenu();
        }
    });
});

@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }

  .card-container .card {
    width: 100%;
  }

  /* ハンバーガーメニューボタンを表示 */
  .hamburger-btn {
    display: flex;
  }

  /* ナビゲーションメニューをスライドイン形式に変更 */
  .header-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 250px;
    height: 100vh;
    background-color: #669900;
    z-index: 1000;
    transition: right 0.3s ease;
    overflow-y: auto;
    margin-left: initial;
    align-self: initial;
  }

  .header-nav.active {
    right: 0;
  }

  .header-nav ul.flex-all-row {
    width: 100%;
    flex-direction: column;
    padding-top: 60px;
  }

  .header-nav ul.flex-all-row li {
    width: 100%;
    margin-top: 0;
    margin-left: initial;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }

  .header-nav ul.flex-all-row li a {
    display: block;
    padding: 15px 20px;
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .header-nav ul.flex-all-row li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

.header .flex-container {
    flex-direction: row;
}

/* ハンバーガーメニューボタンを表示 */
.hamburger-btn {
    position: relative;
    z-index: 1001;
    display: flex;
}

ナビゲーションは右側からスライドインではなく、上から開く形にしてほしい。
- ナビゲーションメニューの幅は100%
- ナビゲーションメニューの高さは、子要素に応じる
- ナビゲーションメニューのトップ位置は、ページ上部ではなくh1の下辺

- この要素を画面右下（右から40px, 下から40px）に固定表示。
- アンカーリンクはスムーススクロールになるようにする。
- スムーススクロールはCSS scroll-behaviorとJSのscrollToでなめらかに。

ページ内遷移を実行した際、URLに「#」や「#」以下が残らないようにJSに追記してください。

div.pagetopの表示を以下のように変更してください。

- ページ最上部では非表示にして、スクロール100px以上で表示する。
- スクロールアップして最上部まで戻った時は、再び非表示にする。
- fade in/outアニメーション効果をつける。

ページにある要素を、スクロールダウンに合わせてふわっとフェードインさせたい。

- フェードインさせる要素は調整できるようにCSSクラスで制御する。
- 要素の上辺がビューポートに入ったらフェードインする。
- 1度フェードインした後はスクロールアップをしても消さない。

<section class="event">
      <div class="container section-padding">
        <h2 class="text-white text-center">
          楽しいイベントいっぱいだよ
        </h2>
        <div class="text-center">
          <img src="images/line.png" width="400" height="6" alt="">
        </div>
        <p class="text-white text-center">
          いつ訪れても楽しいズーロッパ東京。
        </p>
        <!-- ここからカード並び -->
        <div class="flex-container card-container">
          <artilce class="card fadein"> <!-- ★カードにそれぞれ fadein クラスを追加 -->

タブアイテムが動作するように設定してください。

- .tab__navのボタンをクリックすると、それに応じた.tab__panelが見られるようにする。
- アクティブなタブ・パネルにactiveクラス付与。
- CSS transitionでフェード切り替え、JSは最小限で。

クリック/タップした要素の.faq__item__contが表示できるようにしたい。

- faq__item__head部分をクリックすると、親要素(.faq_item）にopenクラスを追加して.faq__item__contを表示。
- opendクラスが付与されている場合は、faq__item__head部分をクリックすると閉じる。
- パネルが開閉するようなアニメーションで滑らかに。
- 初期状態では一番上の.faq_itemに.openを付与し、開いた状態にしておく

.modal-triggerの画像をクリックで全画面モーダル表示してください。
背景は半透明黒、画像は中央配置、ESCキーと背景クリックで閉じる。
CSS transitionでふわっと表示、JSは最小限で。

ここの画像を遅延読み込みにしてください。

- 画像に.lazyクラスを付与し、遅延読み込みにする。
- Intersection Observerでビューポートに入ったらdata-srcからsrcに置換。
- 読み込み中はプレースホルダー表示、読み込み後はフェードイン。

ファーストビューの画像を、カルーセルにしたい。
今使用しているtop.jpg（PC幅はtop-pc.jpg）と、top2.jpg（PC幅はtopp-pc.jpg）を切り替える。

- 画像は背景画像ではなくimg要素にし、追加しやすくする。
- 5秒間隔で画像を自動で切り替える。
- 下部に左右ボタン、スライド枚数分のドットを表示する。
- 左右ボタンもしくはドットを押すと、画像を切り替えられるようにする。
CSS transitionでスライド、JSはシンプルに。レスポンシブ対応。

画像の上に表示させたい.firstview-lead部分が背面に隠れているので、そこを直してくれますか？
テキストも画像と合わせてスライドし、それぞれの画像ごとに入力したいです。

このJSエラーを直してください。DOM読み込み待ちや要素存在チェックを追加。
最小変更で動くコードに修正して、コメントで説明も。

このコードをスマホ対応にしてください。
タッチイベント追加、300ms遅延回避、ビューポート考慮。

このアニメーションを60fps滑らかにしてください。
GPU加速利用、リフロー回避、transform/opacity使用。