.navbar {
    height: 50px;
    padding: 0;
  }
  .navbar ul {
    /* flexbox縺ｧ繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ繝舌�繧呈ｨｪ荳ｦ縺ｳ驟咲ｽｮ縺吶ｋ */
    display: flex;
    /* 邵ｦ蟷�ｸｭ螟ｮ縺ｫ驟咲ｽｮ縺吶ｋ謖�ｮ� */
    align-items: center;
    /* 讓ｪ蟷�ｸｭ螟ｮ縺ｫ驟咲ｽｮ縺吶ｋ謖�ｮ� */
    justify-content: center;
    width: 100%;
    /* 繝ｪ繧ｹ繝医せ繧ｿ繧､繝ｫ繧貞炎髯､ */
    list-style: none;
  }
  .navbar ul li {
    /* 繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ繝｡繝九Η繝ｼ蜷悟｣ｫ縺ｮ髢馴囈繧呈欠螳� */
    margin-left: 5%;
    margin-right: 5%;
  }
  .nav-item a {
    color: #000;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    /* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ騾溷ｺｦ繧呈欠螳� */
    transition: color 0.3s ease-out;
  }
  .nav-item a:hover {
    /* hover蠕後↓濶ｲ繧貞､牙喧縺輔○繧区欠螳� */
    color: pink;
  }