*{
margin:0;
padding:0;
}
img{
display:block;
}
ul{
list-style-type:none;
}

body{
font-size:14px;
line-height:1.6;
}

#wrap{
width:850px;
margin:0 auto;
}

h1{
background-image:url(img/top.jpg);
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
width:850px;
height:0;
padding-top:250px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

nav ul{
display:flex;
}

nav li a{
display:block;
background-color:#2fbc99;
color:#fff;
font-family:serif;
width:170px;
text-align:center;
text-decoration:none;
padding:10px 0;
}

nav li a:hover{
background-color:#88abda;
}

section{
display:flex;
justify-content:space-between;
margin:20px 0;
}

#main{
width:610px;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}

#main article{
width:280px;
border:solid 1px #2fbc99;
padding:10px;
margin:10px 0;
text-align:center;
}

#main h2{
font-size:18px;
color:#2fbc99;
}

.desc{
text-align:left;
}

footer{
background-color:#2fbc99;
text-align:center;
color:#fff;
padding:10px;
}

/*****タブレット用***************************************************************/

@media (max-width:850px) and (min-width:640px){

img{
width:100%;
}

#wrap{
width:100%;
}

h1{
width:100%;
padding-top:29.4%;
}

nav li{
width:20%;
}

nav li a{
width:100%;
}

#main{
width:70%;
}

#main article{
width:45%;
padding:10px;
}

}

/*****タブレット用***************************************************************/

@media (max-width:639px){

img{
width:100%;
}

#wrap{
width:100%;
}

h1{
width:100%;
padding-top:29.4%;
}

nav ul{
background-color:#2fbc99;
flex-wrap:wrap;
justify-content:space-around;
}

nav li a{
width:150px;
}

section{
display:block;
margin:0 auto;
text-align:center;
}

#main{
width:100%;
}

#main article{
width:45%;
padding:10px 2%;
}

aside img{
max-width:200px;
margin:10px auto;
}

}