#brand-heading {
  opacity: 0;
  transition: opacity 5s;
  font-size: 36px;
  text-align: center;
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}
/* タブレットサイズ */
@media screen and (max-width: 1023px) and (min-width: 600px) {
  #brand-heading {
      font-size: 24px;
  }
}
/* スマホサイズ */
@media screen and (max-width: 599px) {
  #brand-heading {
      font-size: 18px;
  }
}


.nav-item .nav-link:hover {
    background-color:rgba(0,0,0,0.3);
    color: #fff !important; /* ホバー時のテキスト色 */
}
.nav-item {
    width: 100%; /* nav-itemを横幅いっぱいに広げる */
}
@keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3); /* 一瞬テキストサイズを50%大きく */
    }
    100% {
      transform: scale(1);
    }
  }
  
  .pulse-animation {
    animation: pulse 0.2s ease; /* アニメーションを0.5秒間実行 */
  }
.nav-link {
    display: block; /* ブロックレベル要素として扱う */
    width: 100%; /* 幅を100%に設定 */
    text-align: center; /* テキストを中央寄せ */
    padding: 0.5rem 0; /* 上下のパディングを設定し、左右のパディングを削除 */
}

/* リップル効果 */
.nav-link {
    position: relative;
    overflow: hidden;
    transition: background 400ms;
  }
  
  .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 600ms linear;
    background-color: rgba(255, 255, 255, 0.5); /* ここでは白色のリップルを想定 */
  }
  
  @keyframes ripple-animation {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }
  /* リップル効果終了 */