@media only screen and (min-width: 580px){
    
    .hero-title-wrap img {
        margin: 5%;
        width: 80%;
        
    }

    .button{
        width: 60%;
    }

    .sp-visible{
        display: none;
    }

    .br-sp { 
        display:none;
    }
    
    .slush{
        margin-top: 20px;
        margin-bottom: 20px;
    }

}

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

    .hero-title-wrap img{
        width: 50%;
        margin: 1%;
    }

    .button{
        width: 40%;
    }

    h1{
        font-size: 1.7rem;
    }
    
    h2, a{
        font-size:1.6rem;
    }

    h3{
        font-size: 1.5rem;
    }

    h4, td{
        font-size: 1.4rem;
    }

    p:not(.center){
        font-size: 1.3rem;
        margin: auto;
        width: 80%;
    }

    .step img{
        margin: auto 30%;
        width: 40%;
    }

    .center{
        margin: 15px 0;
        font-size: 1.4rem;
    }

    .slush{
        margin-top: 30px;
        margin-bottom: 30px;
    }
}