@charset "utf-8";

html { scroll-behavior: smooth;}

body{
    margin: 0;
    padding: 0;
    }

main{
    margin: 0;
    padding: 0;
}

    .pc {
        display: block;
        width: 100%;
    }

    .sp {
        display: none;
        width: 100%;
    }

    .relative {
        position: relative;
    }


    .absolute {
        position: absolute;
        width: 70%;
        right: 15%;
        bottom: 13.5%;
    }

    .absolute:hover {
        transform: scale(1.1);
        transition: .2s;
    }

    .relative_sp{
        display: none;
    }

    .header_all{
        display: flex;
        justify-content: center;
        position: absolute;
        width: 100vw;
        top: 22.5%;
    }

    .header{
        width: 28vw;
        padding: 5px;
    }

    .header:hover{
        transform: translateY(-5px);
    }

    #content1{
        position: absolute;
        width: 87%;
        top: 27%;
        right: 7%;
    }

    #content2{
        position: absolute;
        width: 88%;
        top: 43%;
        right: 5%;
    }

    #content3{
        position: absolute;
        width: 86%;
        top: 57%;
        right: 7%;
    }

@media screen and (max-width:900px) {
    /*　画面サイズが900pxからはここを読み込む　*/
    .pc {
        display: none;
        width: 100%;
    }

    .sp {
        display: block;
        width: 100%;
    }

    .relative_sp{
        position: relative;
        display: block;
        width: 100%;
    }

    .sp_header_all{
        display: flex;
        justify-content: center;
        position: absolute;
        width: 100vw;
        top: 23%;
    }

    .header_sp{
        width: 30vw;
        padding: 5px;
    }

    .header_sp:hover{
        transform: translateY(-5px);
    }

    #content1_sp{
        position: absolute;
        width: 94.5%;
        top: 28.7%;
        right: 3.3%;
    }

    #content2_sp{
        position: absolute;
        width: 92%;
        top: 45.35%;
        right: 3%;
    }

    #content3_sp{
        position: absolute;
        width: 94%;
        top: 60.5%;
        right: 4%;
    }


    .absolute_sp{
        position: absolute;
        display: block;
        width: 80%;
        right: 10%;
        bottom: 12%;
    }

    .absolute_sp:hover {
        transform: scale(1.1);
        transition: .2s;
    }
}