.header {
    position: relative; // 基準点として指定（.hamburger の absolute 配置の基準）
    height: 70px;
    background-color: gray;
}

.hamburger {
    position: absolute; // 絶対位置指定（.header を基準に配置）
    top: 50%;
    transform: translateY(-50%);
    right: 40px;
    width: 32px; // ハンバーガーボタンの横幅
    height: 20px; // ハンバーガーボタンの縦幅
    z-index: 1010; // 展開メニューは 1000 で指定
    padding: 0; // button タグのデフォルトのスタイルをリセット
    background: none;
    border: none;

    span {
        position: absolute;
        width: 100%; // .hamburger の width が線の横幅
        height: 2px; // 線の太さ
        left: 50%; // 中央配置
        transform: translateX(-50%);
        background-color: black;
    }

    span:nth-child(1) {
        top: 0; // 一番上の線
    }

    span:nth-child(2) {
        top: 50%;
        transform: translate(-50%, -50%); // 中央の線
    }

    span:nth-child(3) {
        bottom: 0; // 一番下の線
    }

    &.active {
        span {
            &:nth-of-type(2) {
                display: none; // 中央の線を非表示にして、上下の線のみ残す
            }
            &:nth-of-type(1) {
                transform: translateX(-50%) translateY(calc(50% + 9px)) rotate(-45deg);
                // -45° 回転でバツ印を作る（上の線）
            }
            &:nth-of-type(3) {
                transform: translateX(-50%) translateY(calc(50% - 9px)) rotate(45deg);
                // 45° 回転でバツ印を作る（下の線）
            }
        }
    }
}

/////* ハンバーガーメニュークリック後に出てくる領域 */////
.global-menu {
    position: fixed; // 画面に追従
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1000; // .hamburger は 1010
    opacity: 0; // 初期状態は透明
    pointer-events: none; // ポインターイベントを禁止（クリックできない状態）
    background-color: lightblue;

    &.active {
        opacity: 1; // 不透明化し、表示
        pointer-events: all; // クリックを許可
    }

    &__contents {
        box-sizing: border-box;
        width: 100%;
        height: 100%; // .global-menu の高さと一致させる
        overflow: auto; // メニューが多い場合はスクロールできるようにする
        padding: 70px 20px;
    }

    &__nav-item {
        border-bottom: 1px dashed black;

        a {
            display: block;
            text-decoration: none;
            padding: 20px 0;
        }
    }
}

$(function() {
    // ハンバーガーボタンとメニューの要素を取得
    const $hamburger = $('.hamburger');
    const $globalMenu = $('.global-menu');

    // ハンバーガーボタンがクリックされたときの処理
    $hamburger.click(function () {
        $hamburger.toggleClass('active'); // ハンバーガーのクラスをトグル（開閉）
        
        if ($hamburger.hasClass('active')) {
            // ハンバーガーが「active」になったらメニューを表示
            $globalMenu.addClass('active');
        } else {
            // ハンバーガーが非アクティブならメニューを非表示
            $globalMenu.removeClass('active');
        }
    });

    // メニューのどこかをクリックしたら閉じる処理
    $globalMenu.click(function (e) {
        $globalMenu.removeClass('active'); // メニューを非表示
        $hamburger.removeClass('active'); // ハンバーガーの状態も元に戻す
    });
});