/* タブリストとタブアイテム */
.tab-item {
  width: 19%; /* タブの幅を画面の19%に設定 */
  height: 8vh; /* タブの高さを画面の8%に設定 */
  padding: 8px 0 12px 0; /* 下部のパディングを増やす */
  background-color: #ffffff; /* タブの背景色を白に設定 */
  color: #999; /* タブのテキスト色を薄いグレーに設定 */
  text-align: center; /* タブ内のコンテンツを中央揃え */
  cursor: pointer; /* マウスホバー時にポインターカーソルを表示 */
  transition: 0.3s ease-in-out; /* ホバー時のアニメーション効果 */
  display: flex; /* Flexboxレイアウトを使用 */
  flex-direction: column; /* アイコンとテキストを縦方向に配置 */
  justify-content: center; /* 縦方向の中央揃え */
  min-height: unset; /* 固定の最小高さを削除 */
  position: relative;
}

.tab-item img {
  width: 24px; /* アイコンの幅を24pxに固定 */
  height: 24px; /* アイコンの高さを24pxに固定 */
  display: block; /* ブロック要素として表示 */
  margin: 0 auto 4px; /* 上下のマージンを0、左右を自動で中央揃え、下部に4pxのマージンを設定 */
}

.tab-item span {
  font-size: 12px; /* フォントサイズを12pxに設定 */
  display: block; /* ブロック要素として表示 */
  text-align: center; /* テキストを中央揃えに設定 */
  color: #333333; /* テキストを濃いグレーに設定 */
  margin-top: 0; /* 上部のマージンを0に設定 */
  margin-bottom: 4px; /* 下部に4pxのマージンを設定 */
}

/* すべてのタブの背景色を統一 */
.tab-item:first-child,     /* 最初のタブ */
.tab-item:nth-child(2),    /* 2番目のタブ */
.tab-item:nth-child(3),    /* 3番目のタブ */
.tab-item:nth-child(4),    /* 4番目のタブ */
.tab-item:last-child {
  /* 最後のタブ */
  background-color: #ffffff; /* 背景色を白に統一 */
}

/* タブをクリックした時 ホバーした時 */
.tab-item:hover,           /* マウスホバー時 */
.tab-item.is-active {
  /* アクティブなタブ */
  color: #333; /* テキスト色を濃いグレーに変更 */
  background-color: #f5f5f5; /* 背景色を薄いグレーに変更 */
}

/* アクティブ時のスタイルを統一 */
.tab-item:first-child:hover,    /* 最初のタブのホバー時 */
.tab-item:first-child.is-active, /* 最初のタブがアクティブ時 */
.tab-item:nth-child(2):hover,   /* 2番目のタブのホバー時 */
.tab-item:nth-child(2).is-active, /* 2番目のタブがアクティブ時 */
.tab-item:nth-child(3):hover,   /* 3番目のタブのホバー時 */
.tab-item:nth-child(3).is-active, /* 3番目のタブがアクティブ時 */
.tab-item:nth-child(4):hover,   /* 4番目のタブのホバー時 */
.tab-item:nth-child(4).is-active, /* 4番目のタブがアクティブ時 */
.tab-item:last-child:hover,     /* 最後のタブのホバー時 */
.tab-item:last-child.is-active {
  /* 最後のタブがアクティブ時 */
  background-color: #f5f5f5; /* 背景色を薄いグレーに統一 */
}

/* レイアウト */
.tab-list {
  display: flex; /* Flexboxレイアウトを使用 */
  justify-content: space-evenly; /* 子要素を均等に配置 */
  position: fixed; /* 固定位置に配置 */
  bottom: 0; /* 下端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 幅を100%に設定 */
  z-index: 100; /* 重なり順を100に設定 */
  background-color: #ffffff; /* 背景色を白に設定 */
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1); /* 上部に薄い影を設定 */
  height: 8vh; /* 高さを画面の8%に設定 */
  padding-bottom: 4px; /* 下部に4pxの余白を設定 */
}

/* タブバーの上にコンテンツが表示されるようにするためのスタイル */
.tab-wrap {
  position: fixed; /* 固定位置に配置 */
  bottom: 0; /* 下端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 幅を100%に設定 */
  z-index: 100; /* 重なり順を100に設定 */
  height: 8vh; /* 高さを画面の8%に設定 */
}

/* コンテンツエリアの調整 */
.content {
  padding-bottom: 8vh; /* 下部にタブバーの高さ分の余白を設定 */
  height: 90vh; /* 高さを画面の90%に設定 */
  overflow: hidden; /* はみ出した部分を隠す */
  overflow-y: auto; /* 縦方向のスクロールを有効化 */
}

.tab-item.has-unread::after {
  content: ""; /* 疑似要素の内容を空に設定 */
  position: absolute; /* 絶対位置指定で配置 */
  top: 5px; /* 上端から5pxの位置に配置 */
  right: 5px; /* 右端から5pxの位置に配置 */
  width: 8px; /* 幅を8pxに設定 */
  height: 8px; /* 高さを8pxに設定 */
  background-color: red; /* 背景色を赤に設定 */
  border-radius: 50%; /* 円形に設定 */
  border: 2px solid white; /* 2pxの白い枠線を設定 */
}