header {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
header.small {
  height: clamp(288px, 39.68vw, 762px);
}
@media screen and (max-width: 768px) {
  header.small {
    height: min(498px, 77.81vw);
  }
}
header.middle {
  height: min(100vh, 1080px);
}
@media screen and (max-width: 768px) {
  header.middle {
    height: min(546px, 96.28vw);
  }
}
header .bg-div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}
header img {
  width: 100%;
  height: auto;
}
header hgroup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  padding: 0px 150px;
  padding-left: clamp(25px, 8.33vw, 160px);
  padding-right: clamp(25px, 8.33vw, 160px);
  color: #fff;
}
@media screen and (max-width: 768px) {
  header hgroup {
    padding-top: 70px;
  }
}
header h1 {
  font-size: clamp(30px, 2.86vw, 55px);
  line-height: 1.12em;
}
header h6 {
  font-size: clamp(10px, 0.83vw, 16px);
  line-height: 1.37em;
}
@media screen and (max-width: 768px) {
  header h1 {
    margin: 0px;
  }
  header h6 {
    margin: 0px;
    margin-top: 1.5em;
  }
}