*{
margin:0;
padding:0;
}
img{
vertical-align:bottom;
}
ul{
list-style-type:none;
display:flex;
}

body{
background-color:#c9f;
font-size:14px;
line-height:1.7;
text-align:center;
}

a{
color:#c9f;
text-decoration:none;
}

a:hover{
background-color:#c9f;
color:#fff;
}

h1{
color:#fff;
font-size:50px;
text-align:left;
}

header ul{
background-color:#fff;
justify-content:flex-end;
}

header ul a{
display:block;
width:150px;
font-size:20px;
padding:5px 0;
}

h2{
width:900px;
color:#fff;
font-size:30px;
margin:50px auto 20px;
}

#web, #banner{
width:900px;
display:flex;
justify-content:space-around;
flex-wrap:wrap;
margin:0 auto;
}

article{
background-color:rgba(255,255,255,0.8);
width:350px;
padding:25px;
margin-bottom:20px;
border-radius:10px;
}

article img{
max-width:320px;
border:1px solid #ccc;
}

#about h3{
font-family:serif;
}

#about article{
text-align:left;
width:850px;
margin:0 auto;
display:flex;
}

#about img{
width:220px;
height:auto;
margin-right:30px;
}

#about p{
padding:10px;
}

.tool{
text-align:right;
color:#c9f;
}

.date{
text-align:right;
color:#ccc;
}

#contact{
margin-bottom:50px;
}

input, textarea{
width:60%;
font-size:16px;
padding:10px;
border:none;
margin:5px;
}


footer{
background-color:#fff;
width:100%;
color:#c9f;
padding:30px 0;
display:flex;
flex-wrap:wrap;
align-items:center;
}

footer h2{
width:46%;
color:#c9f;
text-align:right;
padding:10px 2%;
margin:0;
}

footer li{
margin:10px;
}

.copy{
color:#333;
width:100%;
padding-top:20px;
}

/******************** ここからタブレット用 ********************/
@media(min-width:640px) and (max-width:960px){
h2{
width:100%;
}

#web, #banner{
width:100%;
}

article{
width:40%;
padding:25px 2%;
}

article img{
width:90%;
height:auto;
}

#about article{
width:90%;
}

#about img{
width:80%;
}

footer h2{
width:96%;
text-align:center;
padding:10px 2%;
margin:0;
}

.kaigyo{
display:none;
}

}

/******************** ここからモバイル用 ********************/
@media (max-width:639px){
ul{
flex-wrap:wrap;
}

h1{
font-size:40px;
text-align:center;
padding:10px 0;
}

header ul a{
display:block;
width:100vw;
}

h2{
width:100%;
}

#web, #banner{
width:100%;
display:block;
}

article{
background-color:rgba(255,255,255,0.8);
width:90%;
padding:15px 2%;
margin:0 auto 20px;
}

article img{
width:80%;
}

#about article{
width:90%;
display:block;
}

.prof_img{
text-align:center;
}

#about img{
width:75%;
margin-right:0;
}

footer{
display:block;
}

footer h2{
width:96%;
text-align:center;
padding:10px 2%;
margin:0;
}

footer ul{
justify-content:space-around;
}

footer li{
margin:0;
}

.kaigyo{
display:none;
}

}