@charset "utf-8";
body{
  background-color: lightgray;
}


.nav-link:hover {
  color: #dee2e6 !important; /* 薄いグレー */
  background-color: rgba(255, 255, 255, 0.2) !important; /* ホバー時の背景色を薄い白に */
  border-radius: .25rem !important; /* 角を丸くする */
  transition: all 0.3s ease !important; /* スムーズなトランジション効果 */
}
.nav-link.active {
  color: #fff !important; /* 白 */
  background-color: #0d6efd !important; /* 薄い青 */
  border-radius: .25rem !important; /* 角を丸くする */
}

.detailed-symbols-hidden {
    display: none;
}

.detailed-symbols-visible {
    display: flex;
    flex-wrap: wrap; /* Allow checkboxes to wrap */
    gap: 10px; /* Space between checkboxes */
    margin-top: 10px;
}
.dis {
  display: none; /* 要素を完全に非表示にし、スペースも占有しない */
}

/* デフォルト（スマートフォンなどの狭い画面）では大きなボタンにする */
.btn-custom-reverse {
  font-size: 1.25rem; /* Bootstrapのbtn-lg相当 */
  padding: 0.75rem 1.5rem; /* Bootstrapのbtn-lg相当 */
}

/* 画面幅が中サイズ以上（768px以上）になったら小さなボタンにする */
@media (min-width: 768px) {
  .btn-custom-reverse {
    font-size: 1rem; /* Bootstrapのbtn-sm相当 */
    padding: 0.125rem 0.25rem; /* Bootstrapのbtn-sm相当 */
  }
}
/* .password-box {
  /* display: inline-block; 文字数に合わせて幅を調整 * /
  white-space: nowrap; /* テキストが1行に収まるようにする * /
  overflow: hidden; /* 最大幅を超えた部分は非表示にする * /
  text-overflow: ellipsis; /* 非表示にした部分を...で表示する * /
} */