@media  (max-width:699px){

    .logo{
        position:fixed;
        top:20px;
        left:20px;
        width:30px;
        height:auto;
    }
    
    .menu{
        display:none;
    }
    .menu_mobile_container{
        position:fixed;
        display:flex;
        justify-content: center;
        align-items: center;
        width:0;
        height:100vh;
        height:100dvh;
        top:0;
        right:0;
        background-color: #f3ffc0;
        transition:all 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
        z-index: 901;
    }
    .menu_content{
        position:relative;
        width:85%;
        height:auto;
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        transition:width 0.6s  cubic-bezier(0.25, 1, 0.5, 1);
    }
    .menu_mobile_table00{
        width:100%;
        height:72px;
        display:flex;
        justify-content: center;
        align-items: center;
        border-bottom:solid 1px rgb(55,55,55);
        opacity:0;
        transform:translateX(200px);
    }
    @keyframes menu_ani{
        from{
            opacity:0;
            transform:translateX(200px);
        }
        to{
            opacity:1;
            transform:translatex(0);
        }
    }

    @keyframes menu_reverse{
        from{
            opacity : 1;
        }
        to{
            opacity:0;
        }
    }
    .menu_mobile_table00 p{
        font-size: 20px;
        font-weight: 500;
        color:rgb(55,55,55);
        text-align: center;
    }
    .menu_mobile_table01::after{
        content:'';
        width:100%;
        height:72px;
        border-bottom:solid 2px rgb(55,55,55);
        transform:translateY(-4px);
        position:absolute;
        z-index: -1;
    }
    .menu_mobile_table07{
        border-bottom:none;
    }
    .menu_mobile{
        position: fixed;
        width:45px;
        height:45px;
        top:20px;
        right:20px;
        display:flex;
        flex-direction:column;
        align-items: end;
        justify-content: flex-start;
    }
    .menu_mobile00{
        width:28px;
        height:2px;
        margin-bottom:5px;
        background-color:var(--color--darkgreen);
        transition:all 0.9s ease-in-out;
    }
    .title{
        margin-top: 15vh;
        margin-top:15dvh;
    }
    .title p{
        font-size:28px;
        font-weight: 500;
        color:var(--color--text);
    }
    .title_text{
        width:90%;
    }
    .title_text p{
        font-size:18px;
        font-weight:500;
        color:var(--color--text);
    }

    .content{
        width:90%;
        position:relative;
        margin-left:5%;
        margin-top:40px;
        display:flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .group{
        width:100%;
        position:relative;
        display:flex;
        flex-direction: column;
        margin-bottom:8vh;
        margin-bottom:8dvh;
    }

    .list_left{
        width:100%;
        position:relative;
        margin-bottom:8vh;
        margin-bottom:8dvh;
    }
    .list_right{
        width:100%;
        position:relative;
    }
    .subtitle{
        width:100%;
        position:relative;
        height:52px;
        display:flex;
        align-items: center;
        border: solid 1px var(--color--subtitle);
        box-shadow: var(--shadow--dark);
    }
    .subtitle p{
        font:var(--font--subtitle);
        color:var(--color--subtitle);
        font-weight:600;
        margin-left: 20px;
    }
    
    .text{
        width:100%;
        position:relative;
        margin-top: 24px;
    }
    .text p{
        font:var(--font--text);
        color:var(--color--text);
    }
    
}