/*==================================================
メニュー
===================================*/

@media(max-width: 768px){
    .flex{
        display: flex;
    }

    .menu{
        position: fixed;
        top: 0;
        right: -50vw;
        z-index: 10;
        width: 50vw;
        height: 100vh;
        transition: all .4s;
        background-color: #F7BB36;
    }

    /* 上下左右中央にメニュを配置 */
    .menu ul{
        height: 60%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 1.563em;
    }

    /* リストの設定 */
    .menu ul{
        padding: 0 40px;
    }
    
    .menu li{
        list-style: none;
    }

    .menu a{
        color: #FFFFFF;
    }

    /* 3本線が×の時にメニューが左からスライドイン */
    .openmenu{
        right: 0;
    }

    /*==================================================
    3本線が×に
    ===================================*/
    /*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
    .openbtn {
        /*ボタン内側の基点となるためrelativeを指定。
        追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
        position: fixed;
        top: 0;
        right: 0px;
        background: #F7BB36;
        cursor: pointer;
        width: 60px;
        height: 60px;
        border: 1px solid #F7BB36;
        z-index: 50;
    }

    /*ボタン内側*/
    .openbtn span {
        display: inline-block;
        transition: all .4s;
        /*アニメーションの設定*/
        position: absolute;
        left: 18px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        width: 45%;
    }

    .openbtn span:nth-of-type(1) {
        top: 20px;
    }

    .openbtn span:nth-of-type(2) {
        top: 28px;
    }

    .openbtn span:nth-of-type(3) {
        top: 36px;
    }

    /*activeクラスが付与されると線が回転して×に*/

    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }

    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
        /*真ん中の線は透過*/
    }

    .openbtn.active span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
}