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

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

    .title {
        width: 80vw;
        height: auto;
    }

    .img_s {
        width: 15vw;
        height: auto;
        z-index: 2;
    }

    .img_m {
        width: 30vw;
        height: auto;
        z-index: 2;
    }

    .img_l {
        width: 20vw;
        height: auto;
        z-index: 2;
    }

    .bg_01,
    .bg_02,
    .bg_03,
    .bg_04,
    .bg_05 {
        margin: 10px;
        padding: 10px;
    }

}

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

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

    .title {
        width: 65vw;
        height: auto;
    }

    .img_s {
        width: 10vw;
        height: auto;
        z-index: 2;
    }

    .img_m {
        width: 20vw;
        height: auto;
        z-index: 2;
    }

    .img_l {
        width: 20vw;
        height: auto;
        z-index: 2;
    }

    .bg_01,
    .bg_02,
    .bg_03,
    .bg_04,
    .bg_05 {
        margin: 30px;
        padding: 30px;
    }

}

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

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

    .title {
        width: 50vw;
        height: auto;
    }

    .img_s {
        width: 5vw;
        height: auto;
        z-index: 2;
    }

    .img_m {
        width: 10vw;
        height: auto;
        z-index: 2;
    }

    .img_l {
        width: 20vw;
        height: auto;
        z-index: 2;
    }

    .bg_01,
    .bg_02,
    .bg_03,
    .bg_04,
    .bg_05 {
        margin: 50px;
        padding: 50px;
    }

}