@charset "UTF-8";


.navigation {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: fixed;
  text-align: right;
  z-index: 3;
  a {
    margin-bottom: 36px;
    &:hover {
      text-decoration:none;
    }
  }
}
.navigation a {
    margin-bottom: 36px;
}

.tmnav:active {
  color: #72c9dc;
}
.tmnav.active {
  color:#72c9dc;
  outline: none;

}
a.tmnav:hover {
    color: #72c9dc;
    text-decoration: none;
}
a.tmnav:active {
    color: #72c9dc;
    text-decoration: none;
}

p{
  border-left: 0rem solid #72c9dc1a;
  padding-left: 0rem;
}

.simnav:active {
  color: yellow;
}
.simnav.active {
  color: yellow;
  outline: none;

}
a.simnav:hover {
    color: yellow;
    text-decoration: none;
}
a.simnav:active {
    color: yellow;
    text-decoration: none;
}

a.active, h6.active {
    color: #ff5783;
}

// Media Queries
@media screen and (max-width: 768px) {
  .navigation {
    z-index: 100;
    &.col-2 {
      flex-direction: row;
      padding: 0;
      width: 100%;
    }
    height: auto;
    justify-content: flex-start;
    overflow: scroll;
    position: fixed;
    text-align: left;
    z-index: 100;
    &::-webkit-scrollbar {
        width: 0px;  /* remove scrollbar space */
        background: transparent;  /* optional: just make scrollbar invisible */
    }
    a {
      background: $pink;
      color: $white;
      margin-bottom: 0;
      padding: 16px 24px;
      &.active {
        background: $white;
        color: $pink;
      }
    }
  }
}

h1{
  margin-bottom: 4vh;
margin-top: 6vh;
color: #72c9dc;
}
h4{
  color: #EA5677;
}
h1, h4, p, a{
font-family: 'Noto Sans JP', sans-serif;

}
p{
  color: #737373;
}






.button {
  background-color: #41aee4; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 6px;
}


.button5 {
  background-color: white;
  color: #41aee4;
  border: 2px solid #41aee4;
}

.button5:hover {
  background-color: #41aee4;
  color: white;
  text-decoration: none;
}

.button5:active {
  background-color: #41aee4;
  color: white;
  text-decoration: none;
}