/* ===================================================
	★ 画面の横幅が500px以下の設定
=================================================== */

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

    .title_img {
        width: auto;
        height: 40%;
        min-height: 40%;
        max-height: 40%;
        z-index: 50;
        transform-style: preserve-3d;
    }

    .menu_1,
    .menu_2,
    .menu_3,
    .menu_7,
    .menu_8,
    .menu_9 {
        width: 30%;
        max-width: 30%;
        min-width: 30%;
        height: auto;
        transform-style: preserve-3d;
    }

    .menu_4,
    .menu_10 {
        width: 10vw;
        max-width: 5vw;
        min-width: 10vw;
        height: auto;
        transform-style: preserve-3d;
    }

    .menu_5,
    .menu_6,
    .menu_11,
    .menu_12 {
        width: 30vw;
        max-width: 50vw;
        min-width: 15vw;
        height: auto;
        transform-style: preserve-3d;
    }

}

/* ===================================================
	★ 画面の横幅が501px～1000pxの設定
=================================================== */

@media screen and (min-width: 501px) and (max-width: 1000px) {

    .title_img {
        width: auto;
        height: 60%;
        min-height: 60%;
        max-height: 60%;
        z-index: 50;
        transform-style: preserve-3d;
    }

    .menu_1,
    .menu_2,
    .menu_3,
    .menu_7,
    .menu_8,
    .menu_9 {
        width: 3vw;
        max-width: 50vw;
        min-width: 3vw;
        height: auto;
        display: block;
        transform-style: preserve-3d;
    }

    .menu_4,
    .menu_10 {
        width: 3vw;
        max-width: 5vw;
        min-width: 3vw;
        height: auto;
        display: block;
        transform-style: preserve-3d;
    }

    .menu_5,
    .menu_6,
    .menu_11,
    .menu_12 {
        width: 15vw;
        max-width: 50vw;
        min-width: 15vw;
        height: auto;
        display: block;
        transform-style: preserve-3d;
    }

}

/* ===================================================
	★ 画面の横幅が1001px以上の設定
=================================================== */

@media screen and (min-width: 1001px) {

    .title_img {
        width: auto;
        height: 70%;
        min-height: 70%;
        max-height: 70%;
        z-index: 50;
        transform-style: preserve-3d;
    }


    .menu_1,
    .menu_2,
    .menu_3,
    .menu_7,
    .menu_8,
    .menu_9 {
        width: 3vw;
        max-width: 50vw;
        min-width: 3vw;
        height: auto;
        display: block;
        transform-style: preserve-3d;
    }

    .menu_4,
    .menu_10 {
        width: 3vw;
        max-width: 5vw;
        min-width: 3vw;
        height: auto;
        display: block;
        transform-style: preserve-3d;
    }

    .menu_5,
    .menu_6,
    .menu_11,
    .menu_12 {
        width: 15vw;
        max-width: 50vw;
        min-width: 15vw;
        height: auto;
        display: block;
        transform-style: preserve-3d;
    }

}