header {
  padding: 20px 4% 10px;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .username {
  position: fixed;
  top: 20px; /* 画面上からの距離 */
  right: 1%; /* 画面右からの距離 */
  background: lightblue;
  color: #fff;
  padding: 0 1em;
  border: solid;
  width: 100px;
  height: 35px;
  font-size: 13px;
  border-radius: 5px;
  font-weight: 900;
  font-family: serif;
  z-index: 100; /* 他の要素よりも前面に表示 */
  display: flex; /* フレックスボックスを使用 */
  align-items: center; /* 縦方向の中央揃え */
  justify-content: center; /* 横方向の中央揃え */
  text-align: center; /* テキストを中央揃え */
}

.button:hover {
  background: lightcoral;
  cursor: pointer;
}

header .username a {
  color: #fff; /* 白色に設定 */
}

h1 {
  margin: 0;
  padding: 0;
  font-size: 30px;
}

ul {
  margin: 0;
  display: flex;
}

li {
  margin: 0 0 0 15px;
  font-size: 19px;
}

nav {
  margin: 0 0 0 auto;
}

.sp-nav {
  display: none;
}

#hamburger {
  display: none;
}

#modalOpen {
  display: none;
}

#easyModal {
  display: none;
}


.button {
  position: fixed;
  top: 20px;   /* 画面上からの距離 */
  right: 1%; /* 画面右からの距離 */
  background: lightblue;
  color: #fff;
  padding: 0 2em;
  border: solid;
  width: 100px;
  height: 30px;
  font-size: 11.5px;
  border-radius: 5px;
  font-weight: 900;
  font-family: serif;
  z-index: 100; /* 他の要素よりも前面に表示 */
}

.button:hover {
  background: lightcoral;
  cursor: pointer;
}