button {
    background: none;       /* 背景色をリセット */
    color: inherit;         /* 親要素から色を継承 */
    border: none;           /* ボーダーを削除 */
    padding: 0;             /* パディングをリセット */
    margin: 0;              /* マージンをリセット */
    font: inherit;          /* 親要素からフォントスタイルを継承 */
    line-height: normal;    /* 行の高さを通常に設定 */
    cursor: pointer;        /* カーソルをポインターに設定 */
    text-align: center;     /* テキストを中央揃えに設定 */
    user-select: none;      /* テキスト選択を無効化 */
    -webkit-appearance: none;  /* Webkitブラウザでのデフォルトスタイルを削除 */
    -moz-appearance: none;     /* Mozillaブラウザでのデフォルトスタイルを削除 */
    appearance: none;          /* 標準的な外観を削除 */
}
.hamburger {
    width: 40px;
    height: 24px;
    position: absolute;
    top: 15px;
    right: 16px;
    z-index: 100;
    background: transparent;
}

.hamburger_bar {
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    background: #15355b;
    transition:
        top 0.24s,
        transform 0.24s,
        opacity 0.24s;
}

.hamburger_bar:nth-child(1) {
    top: 0;
}

.hamburger_bar:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger_bar:nth-child(3) {
    top: 100%;
    transform: translateY(-100%);
}

.hamburger.active .hamburger_bar:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(135deg);
}

.hamburger.active .hamburger_bar:nth-child(2) {
    transform: translate(50%, -50%);
    opacity: 0;
}

.hamburger.active .hamburger_bar:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-135deg);
}

import $ from "https://esm.sh/jquery";
$(".hamburger").on("click", function () {
  // ハンバーガーメニューを開く
  $(this).toggleClass("active");
});