@media screen and (max-width: 1250px) {

    .menubutton-2{
        display : block;
        position: absolute;
    }

    /* .header-menu{
        width: 100%;
        top : unset;
        right : unset;
        transform : translateY(-300%);
    } */

    .menu{
        top : 160px;
        right : unset;
        transition: 0.5s;
        transform : translateY(-300%);
        width: 100%;
    }

    .menu.active{
        transform: translateY(0);
    }

    /* .header-menu.active{
        transform: translateY(0);   
    } */
    
    ul{
        padding: 0;
    }

    .ul{
        width: 80%;
        margin: 0 auto 0 auto;
        display: flex;
        flex-direction: column;
        position:unset;
        text-align: center;        
    }

    .ul-a{
        margin-bottom : 20px;
    }

    /*ボタン*/
    .menubutton-2{
        display: inline-block;
        width : 45px;
        position : fixed;
        /* top : 72.3px;
        right : 23px; */
        top : 38px;
        right : 15px;
        z-index: 5;
        cursor : pointer;
        margin-left: 20px;
    }

    /* ボタンの中のdivすべてに指定 */
    .menubutton-2 div{
        height : 5px;
        width : 78%;
        background-color: rgb(200, 200, 200);
        position: absolute;
        top : 60%;
        left : 40%;
        transform : translate(-50% , -50%);
        transition : 0.1s;
    }

    /*menubuttonの中のdivタグ一番目を指定*/
    .menubutton-2 div:nth-of-type(1){
        transform : translate(-50% , -10px);
    }


    /*menubuttonの中のdivタグ三番目を指定*/
    .menubutton-2 div:nth-of-type(2){
        transform : translate(-50% , 0);
    }

    /*menubuttonの中のdivタグ三番目を指定*/
    .menubutton-2 div:nth-of-type(3){
        transform : translate(-50% , 10px);
    }

    /*menubuttonの中のdivタグ一番目を指定*/
    .menubutton-2.active div:nth-of-type(1){
        transform : rotate(45deg) translate(-50% , 0);
        transform-origin : 0% 50%;
    }

    /*menubuttonの中のdivタグ二番目を指定*/
    .menubutton-2.active div:nth-of-type(2){
        opacity : 0;
    }

    /*menubuttonの中のdivタグ三番目を指定*/
    .menubutton-2.active div:nth-of-type(3){
        transform : rotate(-45deg) translate(-50% , 0);
        transform-origin : 0% 50%;
    }

    /* mask処理 */
    .mask-n{
        position: fixed;
        top : 0;
        left : 0;
        z-index: 3;
        width : 100%;
        height : 100%;
        background-color : black;
        opacity : 0;
        visibility : hidden;
        transition : 0.5s;
    }

    /* mask処理 */
    .mask-n.active{
        opacity : 0.7;
        visibility : visible;
    }

    /* -----------------header------------------ */

    .header-logo{
        margin: auto;
        justify-content: center;
    }

    /* --------------------------------------------index-main--------------------------------------------- */

    .top-c{
        width: 90%;
        font-size: 30px;
        /* top: 60%; */
    }

    .top-o{
        margin-top: 80px;
    }

    .img2-f{
        width : 90%;
    }

    .img3-f{
        width : 90%;
    }

    /* -----------artist----------- */

    .artist-flex{
        width: 80%;
    }

    /* ----------------studio-------------------- */

    .studio-main{
        width: 80%;
    }

    /* -----------contact-------------- */

    .contact-main{
        width: 80%;
    }

    /* -----------link-------------- */

    .link-o{
        width: 80%;
    }
    

}

@media screen and (max-width: 721px) {

    /* --------------------------------------------header--------------------------------------------- */

    .header-logo{
        font-size: 20px;
    }

    ul{
        padding: 0;
    }

    .ul-a{
        margin-bottom : 20px;
    }

    /* --------------------------------------------index-main--------------------------------------------- */

    .top-c{
        width: 95%;
        font-size: 16px;
        top : 48%;
    }

    .scroll{
        margin-top: unset;
        margin-bottom: unset;
        font-size: 17px;
    }

    .y-o{
        height: 50px;
    }

    @keyframes animation-sample{
        0%{
            font-size: 20px;
            opacity: 0;
        }
        100%{
            font-size: 30px;
            opacity: 1;
        }
    }

    .img2-f{
        flex-direction: column;
    }

    .img2-o{
        width: 100%;
    }

    .img2-a-o{
        text-align: center;
    }

    .img2-text{
        width: 100%;
        font-size: 18px;
        margin: auto;
    }

    .img3-f{
        flex-direction: column;
    }

    .img3-o{
        width: 100%;
        order: 1;
    }

    .img3-a-o{
        text-align: center;
    }

    .img3-text{
        width: 100%;
        order: 2;
        font-size: 18px;
        margin: auto;
    }

    .img4-text{
        width: 95%;
        margin: auto;
        font-size: 18px;
    }

    .img5-text{
        width: 95%;
        margin: auto;
        font-size: 18px;
    }

    /* -----------artist----------- */

    .artist-flex{
        width: 90%;
        flex-direction: column;
    }

    .a-vi{
        width: 100%;
        margin-top: 0;
    }

    .a-h{
        width: 100%;
        margin-top: 0;
    }

    /* ----------------studio-------------------- */

    .studio-main{
        width: 90%;
    }

    .img3-page{
        text-align: center;
    }

    /* -----------contact-------------- */

    .contact-main{
        width: 90%;
    }

    .contact-title{
        width: 100%;
    }
    
    .contact-input{
        width: 100%;
    }

    .textarea{
        width: 100%;
    }

    /* -----------link-------------- */

    .link-o{
        width: 90%;
    }

}