header{
  position: relative;
  height: 240px;/*高さ制限*/
  margin-right: 20%;
  margin-left: 20%;
}

img {
  display: inline-block;
  width: 100%;
  height: 100%;
}


@media screen and (max-width: 1800px) {
  header{
    height: 120px;
    margin-right: 20%;
    margin-left: 20%;
  }
}

@media screen and (max-width: 1024px) {
  header{
    height: 200px;
    margin-right: 10%;
    margin-left: 10%;
  }
}

@media screen and (max-width: 830px) {
  header{
    height: 200px;
    margin-right: 0%;
    margin-left: 0%;
  }
}

@media screen and (max-width: 768px) {
  header{
    height: 200px;/*高さ制限*/
    margin-right: 0%;
    margin-left: 0%;
  }
} 

@media screen and (max-width: 480px) {
  header{
    height: 100px;/*高さ制限*/
    margin-right: 0%;
    margin-left: 0%;
  }
} 

@media screen and (max-width: 360px) {
  header{
    height: 100px;/*高さ制限*/
    margin-right: 0%;
    margin-left: 0%;
  }
} 

@media screen and (max-width: 320px) {
  header{
    height: 90px;/*高さ制限*/
  }
}