@media only screen and (max-width: 1600px) { 
    .text{
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .start{
        text-align: center;
    }
    .end{
        text-align: center;
    }
}

@media only screen and (max-width: 1000px) { 
    .wide-screen {
        display: none;
    }
    .narrow-screen {
        display: block;
    }
    .nav-button{
        font-size: 2vw;
        text-align: center;
        width: 80%;
    }
    .text-s{
        font-size: 2vw;
        width: 75%;
    }
}

@media only screen and (max-width: 900px) { 
    .title-wide{
        display: none;
    }
    .logo{
        width: 70vw;
    }
    .logo-wrap{
        width: 70vw;
    }
    header{
        height: 8vw;
        padding-left: 7vw;
    }
    .image-m{
        max-width: 90%;
    }
    .image-s{
        max-width: 90%;
    }
    .maps{
        width: 90%;
    }
    .paragraph{
        display: flex;
        flex-direction: column;
    }
    .help-btn{
        display: block;
        width: 80%;
    }
}

@media only screen and (max-width: 800px) { 
    .nav-button{
        font-size: 3vw;
    }
}

@media only screen and (max-width: 700px) {
    
    h1{
        font-size: 7vw;
        top: 30%;
    }
    h2{
        font-size: 6vw;
    }
    h3{
        font-size: 5.5vw;
    }
    p{
        font-size: 4.5vw;
    }
    strong{
        font-size: 4.5;
    }
    .hambu{
        right: 15%;
        top: 26%;
        height: 48%;
    }
    .close{
        right: 15%;
        top: 30%;
        height: 40%;
    }
    .nav-button{
        font-size: 4vw;
    }
    .home-img{
        margin-left: -40%;
        width: 200%;
    }
    .yt{
        width: 64vw;
        height: 32vw;
        padding-right: 0;
    }
}

@media only screen and (max-width: 500px) { 
    .card{
        width: 90%;
    }
    .photo-text{
        font-size: 8vw;
        margin: 0%;
    }
    .text-s{
        width: 80%;
        font-size: 4.5vw;
    }
}