@media (max-width:768px) {
    .hamburger_container {
        position: fixed;
        right: 16px;
        top: 20px;
        z-index: 1000;
        /* メニューより前面に */
    }

    /* ハンバーガーアイコンのスタイル */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 25px;
        /* 横幅 */
        height: 20px;
        /* 全体の高さ */
        cursor: pointer;
        z-index: 1000;
        /* しっかり前面に */
        position: fixed;
        /* メニューが開いてもボタンが隠れない */
        top: 20px;
        right: 16px;
    }

    /* 線のスタイル */
    .hamburger span {
        display: block;
        height: 3px;
        /* 線の太さ */
        width: 100%;
        background-color: #000;
        /* 線の色 */
        border-radius: 2px;
        /* 少し角を丸める */
        transition: all 0.3s ease;
        /* アニメーション */
    }

    /* メニューのスタイル（常に縦並びを維持）一般的な閉じ方 */
    .menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: var(--accent-color);
        transition: right 0.5s ease-in-out;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }


    /* メニューのリストを常に縦並びに */
    .header__list {
        display: flex;
        flex-direction: column;
        row-gap: 2rem;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    /* メニューが開いたときの状態 */
    .menu.active {
        right: 0;
        /* 画面内にスライドイン */
    }

    .menu.active .header__list a {
        color: var(--white);
    }

    /* ハンバーガーがアクティブになったとき（×に変化） */
    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
        /* 真ん中の線を非表示 */
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

}

@media (min-width: 769px) {
    .header {
        width: 100%;
        background-color: #ffffffca;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    }

    /* 最初のスクロールでスムーズに登場 */
    .header.fixed-start {
        transform: translateY(-100%);
        opacity: 0;
    }

    /* 固定されるときにフェードイン */
    .header.fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        z-index: 1000;
        transform: translateY(0);
        opacity: 1;
    }
}