.site-navigation {
    --hanbugerMenu-height: 65px;
    --hanbugerMenu-width: 65px;
    --hanbugerMenu-color: var(--global-color-02);
    --hanbugerMenu-backcolor: var(--global-color-03);
    --hanbugerMenu-breackpioint: var(--global--breakpoint-sp);

    --hanbugerMenu-fontFamily01: var(--global--fontFamiry02);
}

/** メガメニューについて */
.site-navigation>.menu {
    display: block;
}

/** ハンバーガーメニューについて */
.site-navigation>.hamburger-menu {
    display: none;

    position: sticky;
    right: 0;
    top: 0;
}

@media screen and (max-width: 900px) {
    .site-navigation {
        position: absolute;
        right: 0;
        text-align: center;
        width: auto;
        color: var(--hanbugerMenu-color);
    }

    .site-navigation .hamburger-menu {
        z-index:81;

        /* 正方形に */
        display: block;
        height: var(--hanbugerMenu-height);
        width: var(--hanbugerMenu-width);
        background-color: var(--hanbugerMenu-backcolor);
    }
    
    .site-navigation .hamburger-menu .inner {
        width: calc(var(--hanbugerMenu-width) * 0.6);
        height: calc(var(--hanbugerMenu-height) * 0.6);
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -35%);
        -webkit-transform: translate(-50%, -35%);
        -ms-transform: translate(-50%, -35%);

    }
    
    .site-navigation .hamburger-menu label{
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
    }

    .site-navigation .hamburger-menu .bar{
        display: block;
        position: relative;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);

    }
    .site-navigation .hamburger-menu .bar,
    .site-navigation .hamburger-menu .bar:before,
    .site-navigation .hamburger-menu .bar:after {
        content: '';
        display: block;
        height: 3px;
        width: calc(var(--hanbugerMenu-width) * 0.6);

        border-radius: 3px;
        background-color: var(--hanbugerMenu-color);
    
    }

    .site-navigation .hamburger-menu .bar:before {
        top: -10px;
        position: relative;
    }

    .site-navigation .hamburger-menu .bar:after {
        top: 7px; /* バーの高さ分引く */
        position: relative;
    }

    /* activeが付いたらハンバーガーを×にする */
    .nav-active .hamburger-menu .bar {
        background-color: rgba(255, 255, 255, 0);
        /*メニューオープン時は真ん中の線を透明にする*/
    }

    .nav-active .hamburger-menu .bar::before {
        transform: rotate(45deg);
        top:1.5px;
    }

    .nav-active .hamburger-menu .bar::after {
        transform: rotate(-45deg);
        top:-1.5px;
    }

    /* ボタン押下で表示されるメニュー */
    .site-navigation .menu {
        background-color: var(--hanbugerMenu-color);
        color: var(--hanbugerMenu-backcolor);
        position: absolute;
        width: 100vw;
        z-index: 80;
        right:0;
            
    }
    .nav-active *{
        animation-fill-mode: forwards;
    }
    :not(.nav-active) .site-navigation .menu {
        top:-100vh;

    }
    .nav-active .site-navigation .menu {
        /*アニメーション設定*/
        animation-duration: 1s;
        animation-name: fadeInMenu;
        display: block;
        top: 0vh;
    }
    .nav-close .site-navigation .menu {
        /*アニメーション設定*/
        animation-duration: 0.5s;
        animation-name: fadeOutMenu;
    }
    @keyframes fadeInMenu {
        0%{
            top:-100vh;
        }
        95%{
            top: -1vh;
        }
        100%{
            top: 0vh;
        }
    }
    @keyframes fadeOutMenu {
        0%{
            top: 0vh;
        }
        100%{
            top: -100vh;
        }
    }

    .site-navigation .menu ul {
        padding: 150px 10px 0;
        flex-wrap: wrap;
    }

    .site-navigation .menu ul li {
        border-left: none;
        border-top: solid 3px var(--hanbugerMenu-backcolor);
        list-style: none;
        width: 100%;
    }
    .site-navigation .menu ul li:nth-last-of-type(1) {
        border-right: none;
        border-bottom: solid 3px var(--hanbugerMenu-backcolor);
    }

    .site-navigation .menu ul li a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-decoration: none;
        padding: 9px 15px 8px 0;
        text-align: center;
        padding: 18px;
    }

    .site-navigation .menu ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 2px var(--hanbugerMenu-backcolor);
        border-right: solid 2px var(--hanbugerMenu-backcolor);
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;
    }
}