@charset "utf-8";
/* 不必要なデコレーションや装飾はないない */
nav>input{
    display: none;
}

nav ul{
    list-style:none;
    padding:0;
}

ul.menu_header li>a{
    text-decoration: none;
    color: #EEEEEE;
    font-size:1.5em;
}

/* 並びとwidth */
ul.menu_header{
    display: flex;
    align-items: center;
    z-index: 81;
}

ul.menu_header ul{
    position:absolute;
    width:calc(100%/4);
    z-index: 80;
}

/* li一個ずつの共通装飾 */
ul.menu_header li{
    width:calc(100%/4);
    min-width: 165px;
    height: 35%;
    margin:0;
    text-align: center;
}

ul.menu_header a{
    display: block;
    padding:0.8rem;
}

/* アイコンの大きさ */
ul.menu_header li>a>img{
    height: 35%;
    width: 100%;
    object-fit: contain;
}

/* アイコン以外の背景黒に */
ul.menu_header li:not(.icon) a{
    background: #293b4b; 
} 

/* 子階層はいったんhidden */
ul.menu_header li li{
    width: 100%;
    height: 0;
    overflow: hidden;
    transform:0.5s;
}

/* hover処理 */
ul.menu_header li:hover>a{
    opacity: 0.7;
}

ul.menu_header li:hover > ul > li{
    height: 35%;
    overflow: visible;
}


/*参考＝"https://www.asobou.co.jp/blog/web/css-menu" */
@media (max-width :480px){

    nav{
        overflow: hidden;
        position:relative;
        margin-bottom: 10%;
    }

    .menu-btn {
        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: #293b4b;
    }
    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;
    }
    .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);
    }
    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }



/* ↓ここからメニュー装飾 */
ul.menu_header{
    width: 100%;
    height: 90%;
    position:fixed;
    top:5px;
    left:100%;
    overflow: auto;   
    background-color: #293b4b;
    flex-direction : column;
    z-index: 80;
    list-style: circle;
}

ul.menu_header ul{
    position:relative;
    width: 100%;
    height: 100%;
}

ul.menu_header a:not(.icon>a){
    border-bottom:solid 3px #63c1ffcc;
}

ul.menu_header li> ul > li:not(.icon){
    width:90%;
    height: auto;
}

ul.menu_header>li:not(.icon){
    width:90%;
    height: auto;
    margin:50px;
}

ul.menu_header li li{
    margin:auto;
    height: 10%;
    overflow: visible;
}

/* ↓ここから下はメニュー処理 */
#menu-btn-check:checked ~ ul.menu_header {
    left: 0;/*メニューを画面内へ*/
}

}