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

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

    .title_area {
        position: relative;
    }

    /* タイトル画像大きさ */
    .title_img {
        width: 100px;
        height: auto;
    }

    /* ゲームルール、あとがき大きさ */
    .menu_1,
    .menu_2,
    .menu_3,
    .menu_4 {
        width: 15px;
        height: auto;
    }

    /* カードゲームとして遊ぶ前に、遊び方掲示板、戻る 大きさ */
    .menu_5,
    .menu_6,
    .menu_7,
    .menu_8,
    .menu_9,
    .menu_10 {
        width: 17px;
        height: auto;
    }

    /* タイトル画像 位置 */
    .title_img {
        top: 75%;
        left: 120px;
        transform: translate(-50%, -50%);
        position: absolute;
    }

    /* あとがき 位置 */
    .menu_1,
    .menu_2 {
        top: 10px;
        left: 80px;
        position: absolute;
    }

    /* ゲームルール 位置 */
    .menu_3,
    .menu_4 {
        top: 10px;
        left: 100px;
        position: absolute;
    }

    /* カードゲームとして遊ぶ前に 位置 */
    .menu_5,
    .menu_6 {
        top: 10px;
        left: 120px;
        position: absolute;
    }

    /* 遊び方掲示板 位置 */

    .menu_7,
    .menu_8 {
        top: 10px;
        left: 60px;
        position: absolute;
    }

    /* 戻る 位置 */
    .menu_9,
    .menu_0 {
        top: 50px;
        left: 300px;
        position: absolute;
    }

}

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

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

    .title_area {
        position: relative;
        overflow: hidden;
    }

    /* タイトル画像 大きさ */
    .title_img {
        width: 200px;
        height: auto;
    }

    /* ゲームルール、あとがき 大きさ */
    .menu_1,
    .menu_2,
    .menu_3,
    .menu_4 {
        width: 25px;
        height: auto;
    }

    /* カードゲームを遊ぶ前に、遊び方掲示板、戻る 大きさ */
    .menu_5,
    .menu_6,
    .menu_7,
    .menu_8,
    .menu_9,
    .menu_10 {
        width: 30px;
        height: auto;
    }

    /* タイトル画像 */
    .title_img {
        top: 75%;
        left: 200px;
        transform: translate(-50%, -50%);
        position: absolute;
        z-index: 1;
    }

    /* カードゲームとして遊ぶ前に 位置 */
    .menu_5,
    .menu_6 {
        top: 10px;
        left: 250px;
        position: absolute;
        z-index: 2;
    }

    /* ゲームルール 位置 */
    .menu_3,
    .menu_4 {
        top: 10px;
        left: 200px;
        position: absolute;
        z-index: 2;
    }

    /* あとがき 位置 */
    .menu_1,
    .menu_2 {
        top: 10px;
        left: 150px;
        position: absolute;
        z-index: 2;
    }

    /* 遊び方掲示板 位置 */
    .menu_7,
    .menu_8 {
        top: 10px;
        left: 100px;
        position: absolute;
        z-index: 2;
    }

    /* 戻る */
    .menu_9,
    .menu_10 {
        top: 10%;
        left: 300px;
        position: absolute;
        z-index: 2;
    }

}

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

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

    .title_area {
        position: relative;
        overflow: hidden;
    }

    /* タイトル画像大きさ */
    .title_img {
        width: 200px;
        height: auto;
    }

    /* ゲームルール、あとがき 大きさ */
    .menu_1,
    .menu_2,
    .menu_3,
    .menu_4 {
        width: 25px;
        height: auto;
    }

    /* カードゲームで遊ぶ前に、遊び方掲示板、戻る 大きさ */
    /*  */
    .menu_5,
    .menu_6,
    .menu_7,
    .menu_8,
    .menu_9,
    .menu_10 {
        width: 30px;
        height: auto;
    }

    /* タイトル画像 */
    .title_img {
        top: 230px;
        left: 50px;
        position: absolute;
    }

    /* 遊び方掲示板 */
    .menu_7,
    .menu_8 {
        top: 75px;
        left: 200px;
        position: absolute;
    }

    /* あとがき 位置 */
    .menu_1,
    .menu_2 {
        top: 75px;
        left: 250px;
        position: absolute;
    }

    /* ゲームルール 位置 */
    .menu_3,
    .menu_4 {
        top: 75px;
        left: 300px;
        position: absolute;
    }

    /* カードゲームとして遊ぶ前に 位置 */
    .menu_5,
    .menu_6 {
        top: 75px;
        left: 350px;
        position: absolute;
    }

    /* 戻る 位置 */
    .menu_9,
    .menu_10 {
        top: 75px;
        left: 450px;
        position: absolute;
    }

}