/* CSS Document */
/* ####################### */
/* ■ ナビゲーション       */
/* ####################### */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(223,209,241,1.00)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler-icon:hover {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(223,209,241,1.00)' stroke-width='2' stroke-linecap='round' d='M6 6l18 18M24 6L6 24'/%3e%3c/svg%3e");
}
.navbar button {
  background-color: rgba(144, 108, 195, 1.00);
}
.navbar button:hover {
  background-color: rgba(93, 58, 142, 1.00);
  transition: background-color .5s ease;
}
.navbar a {
  color: rgba(144, 108, 195, 1.00);
}
.navbar a:hover {
  color: rgba(255, 123, 221, 1.00);
  transition: color .5s ease;
}
.navbar-nav li {
  margin-bottom: 0.3em;
}
.nav-item a {
  font-family: "Klee One", cursive;
  font-weight: 600;
  font-style: normal;
  display: block;
  text-align: left;
  border-radius: 6px;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
  color: rgba(23, 71, 106, 1.00);
  border: 1px solid rgba(0, 129, 255, 1.00);
  background-image: -webkit-linear-gradient(0deg, rgba(173, 221, 255, 0.85) 0%, rgba(136, 204, 255, 0.75) 100%);
  background-image: -moz-linear-gradient(0deg, rgba(173, 221, 255, 0.85) 0%, rgba(136, 204, 255, 0.75) 100%);
  background-image: -o-linear-gradient(0deg, rgba(173, 221, 255, 0.85) 0%, rgba(136, 204, 255, 0.75) 100%);
  background-image: linear-gradient(90deg, rgba(173, 221, 255, 0.85) 0%, rgba(136, 204, 255, 0.75) 100%);
}
.nav-item a::after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 600;
  content: "\f138";
  font-size: 1.2em;
  padding-right: 0.2em;
  opacity: 0.8;
  padding-left: 0.1em;
  float: right
}
.nav-item a:hover {
  border: 1px solid rgba(143, 17, 216, 1.00);
  background-image: -webkit-linear-gradient(0deg, rgba(149, 76, 177, 0.85) 0%, rgba(164, 109, 201, 0.75) 100%);
  background-image: -moz-linear-gradient(0deg, rgba(149, 76, 177, 0.85) 0%, rgba(164, 109, 201, 0.75) 100%);
  background-image: -o-linear-gradient(0deg, rgba(149, 76, 177, 0.85) 0%, rgba(164, 109, 201, 0.75) 100%);
  background-image: linear-gradient(90deg, rgba(149, 76, 177, 0.85) 0%, rgba(164, 109, 201, 0.75) 100%);
  color: rgba(255, 255, 255, 1.00);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.60);
}
.nav-item a:hover::after {
  color: rgba(255, 240, 103, 1.00);
}
.nav-item a.active {
  background-color: rgba(0, 255, 252, 1.00);
}
.nav-item a:hover.active {
  border: 1px solid rgba(242, 95, 173, 1.00);
  background-image: -webkit-linear-gradient(0deg, rgba(115, 58, 136, 0.85) 0%, rgba(115, 57, 154, 0.75) 100%);
  background-image: -moz-linear-gradient(0deg, rgba(115, 58, 136, 0.85) 0%, rgba(115, 57, 154, 0.75) 100%);
  background-image: -o-linear-gradient(0deg, rgba(115, 58, 136, 0.85) 0%, rgba(115, 57, 154, 0.75) 100%);
  background-image: linear-gradient(90deg, rgba(115, 58, 136, 0.85) 0%, rgba(115, 57, 154, 0.75) 100%);
  color: rgba(255, 255, 255, 1.00);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.60);
}
.nav-item a.active::after {
  color: rgba(222, 101, 125, 1.00);
  opacity: 1
}
.nav-item a:hover.active::after {
  color: rgba(255, 216, 224, 1.00);
  opacity: 1
}
@media (max-width: 991.98px) {
  .navbar {
    padding-left: 2rem;
    padding-right: 2rem;
    margin-top: 1rem;
    margin-right: 1rem;
    margin-left: 1rem;
    margin-bottom: 0rem;
    background-color: rgba(196, 177, 228, 1.00);
    border-radius: 30px;
  }
  .navbar-brand {
    padding-top: 0em;
    padding-bottom: 0em
  }
  .homeIcon {
    font-family: "Bebas Neue", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 1.4em;
    margin-left: 0.5em;
    top: 4px;
    display: inline-block;
    position: relative;
  }
}