body {
  font-family: 'Noto Sans JP', sans-serif;
  padding-top: 72px;
  /* Adjusted for Bootstrap 5 navbar */
}

.navbar-brand,
.nav-link {
  background-color: #02024d;
  color: #ffffff;
}

.nav-link:hover {
  color: #cccccc;
}

.navbar {
  background-color: #02024d;
  color: #ffffff;
}

.banner-image {
  height: 60vh;
  background-size: cover;
}

.card {
  border: none;
  transition: transform .2s;
}

.card:hover {
  transform: scale(1.05);
}

.footer {
  background-color: #999999;
}

.btn-primary {
  background-color: #02024d;
  border: none;
}

.btn-primary:hover {
  background-color: #030366;
}

/* 見出しスタイル */
#top-banner h1 {
  position: relative;
  font-size: 2.5em; /* フォントサイズの調整 */
  font-weight: bold;
  color: #fff; /* 白色 */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* テキストシャドウ */
  padding: 20px;
  background: rgba(0, 0, 0, 0.3); /* 半透明の背景 */
  border-radius: 10px; /* 角の丸み */
  display: inline-block;
  max-width: 80%;
  margin: 0 auto;
}

.offcanvas {
  background-color: #02024d;
  /* Bootstrapのデフォルトのプライマリーカラー */
}

.offcanvas .btn-close {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.navbar-light .navbar-toggler-icon {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.navbar-brand {
  color: #ffffff !important;
  /* Whiteを強制 */
}

.click-highlight {
  font-size: 0.6em;
  /* テキストのサイズを小さくします */
  color: red;
  /* テキストの色を赤にします */
  font-weight: bold;
  /* テキストを太字にします */
}

.card-text {
  font-size: 0.8em;
  /* テキストのサイズを小さくします */
  color: #424242;
  /* テキストの色を赤にします */
  font-weight: bold;
  /* テキストを太字にします */
}

.highlight {
  font-weight: bold; /* テキストを太字にする */
  background-color: yellow;
}

.lowlight {
  font-size: 0.9em; /* フォントサイズを小さく */
  opacity: 0.7; /* 不透明度を下げる */
}

#usage {
  margin-top: 0px; /* 上部の間隔を追加 */
}

.section-title::before {
  content: "✔ "; /* Prefixとして表示するテキストを指定します */
  font-size: 0.8em; /* 必要に応じてPrefixのフォントサイズを調整します */
  color: #555; /* 必要に応じてPrefixの色を調整します */
  margin-right: 10px; /* 必要に応じてPrefixとタイトルの間のスペースを調整します */
}

.section-title {
  font-size: 2em;
  font-weight: bold;
  color: #02024d;
  margin-bottom: 20px;
}

.section-separator {
    border: 0;
    height: 1px;
    background: #02024d;
    margin-bottom: 20px;
}

.content {
    padding: 20px;
}

.section-item {
    margin-bottom: 20px;
    padding: 10px;
    border-left: 4px solid #d2d7d7;
    background-color: #fff;
    line-height: 2; /* 行間を広げる */
}


/* 目次項目のスタイル */
.list-group-item a {
  text-decoration: none;
  color: inherit;
}

.list-group-item a:hover {
  text-decoration: underline;
}

/* 目次を固定位置にする */
@media (min-width: 768px) {
  .col-md-2.content {
    position: -webkit-sticky; /* Safari対応 */
    position: sticky;
    top: 10px; /* 画面の上からの距離 */
    max-height: 90vh; /* 最大高さを設定して、画面内に収まるようにする */
    overflow-y: auto; /* 内容が多い場合はスクロール可能にする */
  }
  
}

/* スマートフォンサイズの場合のレイアウト調整 */
@media (max-width: 767.98px) {
  .col-md-2.content {
    top: 10px; /* 画面の上からの距離 */
    max-height: 90vh; /* 最大高さを設定して、画面内に収まるようにする */
    overflow-y: auto; /* 内容が多い場合はスクロール可能にする */
  }
  
}


#contents .container-fluid {
  display: flex;
  justify-content: center;
}

#contents .row {
  display: flex;
  justify-content: center;
}