*{
margin:0;
padding:0;
}

img{
display:block;
}

body{
background-color:#a67c52;
font-size:14px;
line-height:1.5;
}

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

h1 a{
background-image:url(img/logo.png);
background-repeat:no-repeat;
display:block;
width:358px;
height:70px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

ul{
list-style-type:none;
display:flex;
}

.menu01 a, .menu02 a, .menu03 a, .menu04 a{
background-repeat:no-repeat;
background-position:center center;
display:block;
width:225px;
height:50px;
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

.menu01 a{
background-image:url(img/menu01.jpg);
}
.menu02 a{
background-image:url(img/menu02.jpg);
}
.menu03 a{
background-image:url(img/menu03.jpg);
}
.menu04 a{
background-image:url(img/menu04.jpg);
}

.menu01 a:hover{
background-image:url(img/menu01_h.jpg);
}
.menu02 a:hover{
background-image:url(img/menu02_h.jpg);
}
.menu03 a:hover{
background-image:url(img/menu03_h.jpg);
}
.menu04 a:hover{
background-image:url(img/menu04_h.jpg);
}

section{
display:flex;
justify-content:center;
flex-wrap:wrap;
}

article{
background-color:#fff;
width:200px;
margin:10px 5px;
}

h2{
font-size:14px;
border-bottom:dotted 3px #ff7bac;
text-align:center;
padding:5px;
}

.text{
padding:10px;
}

footer{
background-color:#ff7bac;
padding:20px;
text-align:center;
}

/*****ここからタブレット用**************************************************/

@media (min-width:640px) and (max-width:900px){
img{
width:100%;
}

#wrap{
width:100%;
}

.menu01 a, .menu02 a, .menu03 a, .menu04 a{
width:25vw;
}

}

/*****ここからモバイル用**************************************************/

@media (max-width:639px){
img{
width:100%;
}

body{
line-height:1.8;
}

#wrap{
width:100%
}

h1 a{
background-image:url(img/logo.png);
background-repeat:no-repeat;
background-position:left center;
width:100vw;
max-width:358px;
}

ul{
flex-wrap:wrap;
justify-content:center;
}

li{
width:50%;
max-width:225px;
}

.menu01 a, .menu02 a, .menu03 a, .menu04 a{
width:100%;
}

section{
display:flex;
justify-content:center;
flex-wrap:wrap;
}

article{
width:80%;
padding:10px
}
article img{
width:200px;
margin:0 auto;
}

footer{
font-size:12px;
}

}