html{
  height: 100%;
}
body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #87cefa;
}
header{
  width: 100%;
  background-image: url(kumo.PNG);
  background-size: 85% 100%;
  background-repeat: no-repeat;
}
h1{
  margin-left: 20%;
  text-align: center;
  font-size: 3em;
}
h2{
  text-align: center;
}
footer{
  width: 100%;
}
.left{
  width: 70%;
	float: left;
}
.right{
  width: 25%;
  float: right;
  text-align: right;
}
.top{
  position: top;
}
.bottom{
  position: bottom;
}
.big{
  font-size: 3em;
}
.small{
  font-size: 0.7em;
}
.flex{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.box{
  flex: auto;
  margin: 5px;
  width: 25%;
  border: solid 2px;
  border-radius: 20px;
  background-color: white;
}
.in_box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.side{
  flex: auto;
  margin: 2px;
}
img.side{
  width: 20%;
  height: 20%;
}
p.side{
  text-align: right;
}
.comment{
  border: dashed 2px;
  border-radius: 15px;
  margin: 5px;
  padding: 5px;
}