li {
  list-style: none;
}

p,
ul {
  margin: 0;
  padding: 0;
}

div,
li {
  box-sizing: border-box;
}

.header_nav {
  background: linear-gradient(90deg, #fff 20%, rgba(0, 0, 0, .6) 60%);
  display: flex;
  height: 60px;
  justify-content: space-between;
  align-items: stretch;
  position: fixed;
  top: 0;
  width: 100%;
}

.global_nav_item {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.global_nav_item:hover {
  background: #fff;
  color: #42210b;
}

.global_nav {
  display: flex;
  align-items: stretch;
}

.logo {
  width: 120px;
  display: flex;
  align-items: center;
}

.logo img {
  width: 100%;
}

.section_inner {
  padding: 50px 10% 30px;
}

.key {
  height: 500px;
  background: center / cover no-repeat url("https://raw.githubusercontent.com/mathi4k2/hello-world/main/dic_cafe/images/sample_key.jpg");
  font-family: 'Noto Serif JP', serif;
  font-weight: bold;
}

.key h1 {
  font-size: 2.5rem;
}

.visual-key h1,
.visual-key p {
  margin-top: 80px;
  text-align: left;
}

#menu {
  background: center / cover no-repeat url("https://raw.githubusercontent.com/mathi4k2/hello-world/main/dic_cafe/images/sample_menu_bg.jpg");
  background-attachment: fixed;
  background-position: center bottom;
}

<header>
  <nav class="header_nav">
    <a href="index.html" class="logo"><img src="https://raw.githubusercontent.com/mathi4k2/hello-world/main/dic_cafe/images/sample_logo_k.png"></a>
    <ul class="global_nav">
      <a href="index.html" class="global_nav_item">
        <li>Home</li>
      </a>
      <a href="#menu" class="global_nav_item">
        <li>Menu</li>
      </a>
      <a href="contact.html" class="global_nav_item">
        <li>Contact</li>
      </a>
    </ul>
  </nav>
  <div class="key section_inner visual-key">
    <h1>DIC Coffee</h1>
    <p>natural organic cafe</p>
  </div>
</header>