<header class="header">
  <div class="header__inner">
    <div class="header__logo">
      <span>LOGO</span>
    </div>

    <nav class="header__nav" aria-label="ヘッダーのナビゲーション">
      <ul class="header__nav_list">
        <li class="header__nav_item">
          <a href="#" class="header__nav_link"> ホーム </a>
        </li>
        <li class="header__nav_item">
          <a href="#" class="header__nav_link"> 概要 </a>
        </li>
        <li class="header__nav_item">
          <a href="#" class="header__nav_link"> お問い合わせ </a>
        </li>
      </ul>
    </nav>

    <button class="header__button" type="button">
      <span>BUTTON</span>
    </button>
  </div>
</header>

:root {
	--header-height: 120px;
	--font-size-lg: calc(18rem / 16);
	--font-size-md: calc(14rem / 16);
	--font-size-sm: calc(10rem / 16);
}

.header {
	&__nav {
		// 右寄せにする
		margin-left: auto;
	}
}











.header {
	display: flex;
	justify-content: center;
	width: 100%;
	height: var(--header-height);

	&__inner {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 75%;
		height: 100%;
		padding: 0 20px;
	}

	&__logo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
		font-size: var(--font-size-sm);
		color: #fff;
		background-color: #000;
	}

	&__nav {
		&_list {
			display: flex;
			font-size: var(--font-size-md);
			margin: 0 -0.75em;
		}

		&_link {
			padding: 0 0.75em;
		}
	}

	&__button {
		font-size: var(--font-size-md);
		letter-spacing: 0.05em;
		width: 100px;
		padding: 0.75em;
		border: 1px solid currentColor;
		margin-left: 2em;
	}
}