@charset "utf-8";

/*-----------------------------------------------------*/
/* PC用 */
/*-----------------------------------------------------*/
@media only screen and (min-width: 1025px) {


.container{
    width: 80%;
    margin: 0 auto;
}

.header{
    background-image: url(../image/header.png);
    background-size: 100%;
    width: 100%;
    height: 300px;
    color: white;
}

.header h1{
    padding-top: 70px;
    padding-left: 10%;
    font-size: 36px;
}

.header p{
    padding-left: 10%;
}

.navi{
    width: 100%;
    padding: 0 auto;
}

.navi ul{
    display: flex;
    justify-content: space-around;
    list-style: none;
}

.main{
    display: flex;
    width: 100%;
}
.contents{
    width: 70%;
}

.contents h2{
    margin-top: 30px;
}
.contents img{
    width: 100%;
    padding-top: 20px;
}

.contents p{
    padding-top: 50px;
}

.menu{
    width: 30%;
}

.menu h2{
    margin-top: 30px;
}

.menu ul{
    margin-top: 20px;
    margin-left: 20px;
}

.footer{
    background-color: rgb(93, 151, 35);
    height: 50px;
    width: 100%;
}

.footer p{
    color: white;
    margin-top: 20px;
    padding-top: 10px;
    padding-left: 20px;
}

}
















/* 分からなくなるため間あけておく */























/*-----------------------------------------------------*/
/* タブレット用のCSS */
/*-----------------------------------------------------*/
@media only screen and (min-width:600px) and (max-width:1024px) {
    .container{
        width: 80%;
        margin: 0 auto;
    }
    
    .header{
        background-image: url(../image/header.png);
        background-size: 100%;
        width: 100%;
        height: 300px;
        color: white;
    }
    
    .header h1{
        padding-top: 70px;
        padding-left: 10%;
        font-size: 36px;
    }
    
    .header p{
        padding-left: 10%;
    }
    
    .navi{
        width: 100%;
        padding: 0 auto;
    }
    
    .navi ul{
        display: flex;
        justify-content: space-around;
        list-style: none;
    }
    
    .main{
        display: flex;
        width: 100%;
    }
    .contents{
        width: 70%;
    }
    
    .contents h2{
        margin-top: 30px;
    }
    .contents img{
        width: 100%;
        padding-top: 20px;
    }
    
    .contents p{
        padding-top: 50px;
    }
    
    .menu{
        width: 30%;
    }
    
    .menu h2{
        margin-top: 30px;
    }
    
    .menu ul{
        margin-top: 20px;
        margin-left: 20px;
    }
    
    .footer{
        background-color: rgb(93, 151, 35);
        height: 50px;
        width: 100%;
    }
    
    .footer p{
        color: white;
        margin-top: 20px;
        padding-top: 10px;
        padding-left: 20px;
    }
    

}







































/* タブレット用にいじったCSSをスマホ用にいれる */



/*-----------------------------------------------------*/
/* スマホ用のCSS */
/*-----------------------------------------------------*/
@media only screen and (max-width: 599px) {

    .container{
        width: 80%;
        margin: 0 auto;
    }
    
    .header{
        background-image: url(../image/header.png);
        background-size: 100%;
        width: 100%;
        height: 300px;
        color: white;
    }
    
    .header h1{
        padding-top: 70px;
        padding-left: 10%;
        font-size: 36px;
    }
    
    .header p{
        padding-left: 10%;
    }
    
    .navi{
        display: none;
        width: 100%;
        padding: 0 auto;
    }
    
    .navi ul{
        display: flex;
        justify-content: space-around;
        list-style: none;
    }
    
    .main{
        width: 100%;
    }
    .contents{
        width: 100%;
    }
    
    .contents h2{
        margin-top: 30px;
    }
    .contents img{
        width: 100%;
        padding-top: 20px;
    }
    
    .contents p{
        padding-top: 50px;
    }
    
    .menu{
        width: 100%;
    }
    
    .menu h2{
        margin-top: 30px;
    }
    
    .menu ul{
        margin-top: 20px;
        margin-left: 20px;
    }
    
    .footer{
        background-color: rgb(93, 151, 35);
        height: 50px;
        width: 100%;
    }
    
    .footer p{
        color: white;
        margin-top: 20px;
        padding-top: 10px;
        padding-left: 20px;
    }

}