@charset "UTF-8";



#s01 {
    padding: 100px 0;
    text-align: center;
}

#s02 .wrap {
    position: relative;
    height: 2200px;
}



#s02 .asset01 {
    position: absolute;
    width: 469px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

#s02 .asset02 {
    position: absolute;
    width: 367px;
    top: 300px;
    left: 60%;
}

#s02 .asset03 {
    position: absolute;
    width: 515px;
    top: 350px;
    left: 5%;
    z-index: 1;
}

#s02 .asset04 {
    position: absolute;
    width: 433px;
    top: 720px;
    left: 1%;
}

#s02 .asset05 {
    position: absolute;
    width: 452px;
    top: 680px;
    left: 50%;
}

#s02 .asset06 {
    position: absolute;
    width: 405px;
    top: 1030px;
    left: 17%;
}

#s02 .asset07 {
    position: absolute;
    width: 391px;
    top: 1030px;
    left: 65%;
    z-index: 20;
}

#s02 .asset08 {
    position: absolute;
    width: 191px;
    top: 1300px;
    left: 30%;
}

#s02 .asset09 {
    position: absolute;
    width: 360px;
    top: 1250px;
    left: 55%;
    z-index: 1;
}

#s02 .asset10 {
    position: absolute;
    width: 321px;
    top: 1550px;
    left: 32%;
}



#s03 {
    padding: 50px 0;
}

#s03 .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#s03 .daiki {
    width: 116px;
}

#s03 .ym {
    width: 369px;
}

#s03 .gutsy {
    width: 55px;
}

#s03 .uchoten {
    width: 154px;
}

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

    #s01 {
        padding: 100px 0 50px;
        text-align: center;
    }


    #s02 .wrap {
        height: 1700px;
    }



    #s02 .asset01 {
        width: 340px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
    }

    #s02 .asset02 {
        width: 266px;
        top: 200px;
        left: 60%;
    }

    #s02 .asset03 {
        width: 373px;
        top: 300px;
        left: 10%;
        z-index: 1;
    }

    #s02 .asset04 {
        width: 314px;
        top: 540px;
        left: 5%;
    }

    #s02 .asset05 {
        width: 311px;
        top: 560px;
        left: 50%;
    }

    #s02 .asset06 {
        width: 294px;
        top: 830px;
        left: 18%;
    }

    #s02 .asset07 {
        width: 283px;
        top: 960px;
        left: 50%;
        z-index: 20;
    }

    #s02 .asset08 {
        width: 138px;
        top: 1150px;
        left: 20%;
    }

    #s02 .asset09 {
        width: 261px;
        top: 1100px;
        left: 45%;
        z-index: 1;
    }

    #s02 .asset10 {
        width: 232px;
        top: 1300px;
        left: 20%;
    }

    #s03 .flex {
        width: 600px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    #s03 .flex img {
        margin: 10px 20px;
    }


}

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



    #s01 {
        padding: 30px 0 30px;
        text-align: center;
    }


    #s02 .wrap {
        width: 390px;
        margin: auto;
        height: 1900px;
    }



    #s02 .asset01 {
        width: 340px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }

    #s02 .asset02 {
        width: 200px;
        top: 250px;
        left: auto;
        right: 0;
        z-index: 30;
    }

    #s02 .asset03 {
        width: 350px;
        top: 320px;
        left: 10%;
        z-index: 1;
    }

    #s02 .asset04 {
        width: 290px;
        top: 575px;
        left: auto;
        right: 0;
    }

    #s02 .asset05 {
        width: 340px;
        top: 820px;
        left:10px;
    }

    #s02 .asset06 {
        width: 250px;
        top: 1050px;
        left: 40px;
    }

    #s02 .asset07 {
        width: 260px;
        top: 1170px;
        left: auto;
        right: 10px;
        z-index: 20;
    }

    #s02 .asset08 {
        width: 120px;
        top: 1300px;
        left: auto;
        right: 45px;
        z-index: 200;
        padding: 20px;
    }

    #s02 .asset09 {
        width: 250px;
        top: 1330px;
        left: 80px;
        z-index: 1;
    }

    #s02 .asset10 {
        width: 232px;
        top: 1520px;
        left: 10px;
    }

    #s03 .flex {
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        text-align: center;
    }

    #s03 .flex img {
        margin: 20px 0;
        max-width: 80%;
    }


}

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

    #s01 {
        padding: 50px 0 50px;
        text-align: center;
    }


    #s02 .wrap {
        width: 340px;
        margin: auto;
        height: 1800px;
    }



    #s02 .asset01 {
        width: 330px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }

    #s02 .asset02 {
    position: absolute;
        width: 180px;
        top: 240px;
        left: auto;
        right: 0;
        z-index: 30;
    }

    #s02 .asset03 {
        width: 300px;
        top: 320px;
        left: 10%;
        z-index: 1;
    }

    #s02 .asset04 {
        width: 260px;
        top: 550px;
        left: auto;
        right: 0;
    }

    #s02 .asset05 {
        width: 320px;
        top: 780px;
        left:10px;
    }

    #s02 .asset06 {
        width: 230px;
        top: 1000px;
        left: 30px;
    }

    #s02 .asset07 {
        width: 240px;
        top: 1100px;
        left: auto;
        right: 0px;
        z-index: 20;
    }

    #s02 .asset08 {
        width: 120px;
        top: 1210px;
        left: auto;
        right: 25px;
        z-index: 200;
        padding: 20px;
    }

    #s02 .asset09 {
        width: 220px;
        top: 1260px;
        left: 70px;
        z-index: 1;
    }

    #s02 .asset10 {
        width: 220px;
        top: 1420px;
        left: 20px;
    }



}