<header><h1>vh & vw</h1></headerr>
<article>
<section class="main">
  <h2 class="copy">そうだ 小田急 乗ろう</h2>
  <figure class="bg"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/idr_zz/20200523/20200523125546.jpg" alt=""></figure>
</section>
<section class="text">
  <h2>乗らずにいられるか、小田急</h2>
  <p>小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。</p>
  <p>小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。</p>
  <p>小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。</p>
</section>
<section class="text">
  <h2>乗らずにいられるか、小田急</h2>
  <p>小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。</p>
  <p>小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。</p>
  <p>小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。</p>
</section>
<section class="text">
  <h2>乗らずにいられるか、小田急</h2>
  <p>小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。</p>
  <p>小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。</p>
  <p>小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。小田急乗るぞ小田急乗るぞ、乗るぞったら乗るぞったら乗るぞ。</p>
</section> 
</article>
<footer>
  <p>vh & vw demo</p>
</footer>

body {
  margin: 0;
  font-family: sans-serif;
}

h1,
.main .copy {
  position: absolute;
  z-index: 100;
  color: #fff;
  text-shadow: 0 0 5px #000;
}

h1, h2 {
  font-feature-settings : "palt"; 
  letter-spacing: 5px;
  font-family: serif;
}

h1 {
  top: 0;
  left: 20px;
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#0087cd, #004ba5);
}

.main .copy {
  font-size:  3em;
  margin: 0;
}

.main .bg {
  margin: 0;
  width: 100%;
  text-align: center;
}

.text {
  margin: 0 auto ;
  padding: 0 0 20px;
  width: 100%;
  max-width: 800px;
  border-bottom: 1px solid #ccc;
}

.text h2 {
  color: #0087cd;
  padding: 10px;
}

.text h2, footer {
  text-align: center;
}

.text p {
  padding: 0 20px;
}

footer {
  padding: 20px 0;
  color: #999;
}

/*vh vr テスト*/
.main .bg img {
  width: 100vmax;
  height:  100vmax;
  object-fit: cover;
}