* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

:root {
     --nav-height: 15vh;
     --nav-background: #563d7c;
}

nav {
    display: flex;
    padding: 0 20px;
    align-items: center;
    width: 100%;
    height: var(--nav-height);
    background: var(--nav-background);
    position: fixed;
    /* top: 0; */
    z-index: 10000;
}

.info {
    padding: 15vh 40px 40px 40px;
    /* font-size: 1.3em;   */
}

.info h2 {
    padding: 2rem 1rem 1rem 1rem;
    margin-bottom: 1em;
    border-bottom: 3px solid #000;
    font-size: 20px;
}

.content {
    padding-left: 15px;
}

.content h3 {
    margin-bottom: 0.5em;
}

li {
    margin-bottom: 0.5em;
}

.logo h1 {
     font-size: 20px;
     font-weight: 600;
     color: rgb(255, 255, 255);
     text-transform: uppercase;
     letter-spacing: 3px;
}

/* nav-links */

.nav-links {
     display: flex;
     height: var(--nav-height);
     align-items: center;
     margin-left: auto;
}

.nav-links li {
     list-style: none;
     margin: 0 15px;
     height: var(--nav-height);
     line-height: var(--nav-height);
     text-align: center;
}

.nav-links li a {
     text-decoration: none;
     color: rgb(255, 255, 255);
     position: relative;
}

/* menu */

.menu {
     cursor: pointer;
     background: var(--nav-background);
     border: none;
     outline: none;
     display: none;
}

.menu .bar {
     width: 20px;
     height: 2px;
     background: #000;
     border-radius: 5px;
     opacity: 1;
     visibility: visible;
     transition: 0.5s ease;
     transform-origin: left;
     margin-left: 15px;
}

.menu .bar1 {
     margin-bottom: 5px;
}

.menu .bar3 {
     margin-top: 5px;
}

.menu.toggle .bar1 {
     transform-origin: left;
     transform: rotate(45deg);
}

.menu.toggle .bar2 {
     opacity: 0;
     visibility: hidden;
}

.menu.toggle .bar3 {
     transform-origin: left;
     transform: rotate(-45deg);
}

/* responsive */

@media screen and (max-width: 700px) {
     .nav-links {
          flex-direction: column;
          position: fixed;
          top: 0;
          left: 100%;
          width: 300px;
          height: 100%;
          background: var(--nav-background);
          margin-top: var(--nav-height);
          transition: 0.5s ease-out;
     }
     .nav-links li {
          height: var(--nav-height);
          line-height: var(--nav-height);
          text-align: center;
          width: 100%;
          display: block;
     }
     .menu {
          display: block;
          margin-left: auto;
     }

     .menu.toggle + .nav-links {
          transform: translateX(-100%);
     }

     .info {
          padding: 15vh 20px 40px 20px;
     }
}


/*========= particle js を描画するエリア設定 ===============*/

html,body{
     background-color: rgba(255, 255, 255, 0.7);
}

#particles-js{ 
  position:fixed;/*描画固定*/
  z-index:-1;/*描画を一番下に*/
  width: 100%;
  height: 100%;
  /*background-color:#35004D;*//*背景色*/
}

#wrapper{
  position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
  z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
  width:100%;
  height: 100%;
}

#wrapper{
  display: flex;
  justify-content: center;
  /* align-items: center; */
  /* text-align:center; */
  /* color: #fff; */
}

a{
  /* color: #fff; */
}