/* navi */
.global-navi {
    background:#130f58;
}

.global-navi ul {
    justify-content: center;
}

.global-navi ul li {
    list-style: none;
    margin:0;
    line-height:1;
}

.global-navi ul li a {
    display: block;
    color:#fff;
    box-sizing: border-box;
    text-decoration: none;
    padding: 12px 30px;
    position: relative;
    text-align:ceter;
    font-weight: 300;
}

.global-navi ul li a:hover{
    background:#fff;
    color:#130f58;
    font-weight:400;
}


#header.fixed .global-navi,#header-second.fixed .global-navi{
    margin-top:10px;
}

/* メニューオープン用のチェックボックスを非表示にする */
#menu-btn-check {
    display: none;
}

@media screen and ( max-width:800px )
{
/* navi */
.global-navi {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    padding-top:60px;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #130f58;
    transition: all .3s ease-in;
}


.global-navi ul {
    display:block;
}

.global-navi ul li {
    border-bottom: solid 1px #fff;
    list-style: none;
}

.global-navi ul li a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color:#fff;
    text-decoration: none;
    padding: 9px 20px 10px;
    position: relative;
}

.global-navi ul li a:hover::before {
    width:0%;
}

.global-navi ul li a:hover::after {
    width:0%;
}


/* メニューボタン */
.menu-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: center;
    z-index: 999;
    background-color: #130f58;
}

#header.fixed .menu-btn, #header-second .menu-btn, #header-second.fixed .menu-btn{
    top:25px;
}


/* メニュークローズ時の三本線 */
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 2px;
    width: 30px;
    background-color: #FFF;
    position: absolute;
    transition:.2s;
}

.menu-btn span:before {
    bottom: 8px;
}

.menu-btn span:after {
    top: 8px;
}

/* メニューオープン時の三本線 */
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}

#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
    transition:.2s;
}

#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
    transition:.2s;
}

#menu-btn-check:checked ~ .global-navi {
    left: 0;/*メニューを画面内へ*/
}

}