@charset "UTF-8";
/* #############################################################################
 * ナビゲーションバー
 * #############################################################################
 */
.navbar {
  height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.navbar__element, .navbar__element--link, .navbar__element--title {
  /* ---------------------------------------------------------------------------
   * ナビ内の各要素
   * ---------------------------------------------------------------------------
   */
  padding: 9px 12px;
}

.navbar__element--link {
  color: #d2d9dd;
}

.navbar__element--link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
}

@media screen and (max-width: 964px) {
  .navbar__element--link {
    /* 一定以上の横幅で非表示になる */
    display: none;
  }
}

.navbar__element--title {
  color: #ffffff;
}

.navbar__dropdown {
  /* ---------------------------------------------------------------------------
   * ドロップダウンメニュー
   * ---------------------------------------------------------------------------
   */
  display: none;
  position: absolute;
  right: 0px;
  color: #d2d9dd;
  font-size: 2rem;
}

.navbar__dropdown.open {
  /* オープン時は常に白くなる */
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
}

.navbar__dropdown:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
}

@media screen and (max-width: 964px) {
  .navbar__dropdown {
    /* 一定以下の横幅で表示される */
    display: block;
  }
}

.navbar__twitter {
  /* ---------------------------------------------------------------------------
   * Twitterアカウント名表記
   * ---------------------------------------------------------------------------
   */
  font-size: 1.2rem;
}
/*# sourceMappingURL=navbar.css.map */