@charset "utf-8";
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  margin: 0;
  padding-top: 10px;
  background-color: #1b2838; /* 背景色 */

  background-image: url('http://d2megaten.stars.ne.jp/img/bg_image2.png'); /* 画像のパスを適切に設定 */
  background-repeat: repeat;
  /*
  background-size: cover; /* 画面全体を覆うように拡大縮小 */
  background-position: center center; /* 画像を中央に配置 */
  */
  color: white; /* デフォルトの文字色を白に */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

.header-container {
  display: flex;
  flex-direction: column; /* 要素を縦に並べる */
  align-items: center; /* 縦方向下揃えに変更 */
  margin-bottom: 0px; /* コントロールボタンとの間隔をあける */
}

.header-top {
  display: flex; /* 要素を横並びにする */
  align-items: flex-end; /* 縦方向下揃えに変更 */
  margin-bottom: -15px; /* コントロールボタンとの間隔 */
}

h1 {
  font-size: 23px;
  font-weight: bold;
  color: white;
  margin-right: 20px; /* タイトルと日付の間隔 */
  margin-bottom: 12px;
  margin-left: 50px;
}

.day-label-container {
  display: flex; /* Flexboxコンテナにする */
  align-items: baseline; /* ベースラインで揃える */
}

.day-label-header {
  display: none; /* 元の2段表示を非表示にする */
}

#subject-label-header {
  font-size: 50px;
  font-weight: bold;
  color: white;
  margin-bottom: 0; /* 必要に応じて調整 */
  margin-left: 10px; /* 日付との間隔 */
}

#day-number-header {
  font-size: 26px;
  font-weight: bold;
  color: white;
  margin-bottom: 0; /* 必要に応じて調整 */
  margin-right: 10px; /* 日付と番号の間隔 */
}

.controls-container {
  display: flex; /* ボタンを横並びにする */
  justify-content: center; /* 中央揃え */
  margin-top: 0px; /* ヘッダーとの間隔を少し調整 */
  width: 100%; /* 幅を広げて中央揃えを有効にする */
  padding: 0px 0; /* 上下のpaddingを追加して見やすくする */
  background-color: rgba(0, 0, 0, 0.1); /* コントロール部分の背景を少し強調するなど */
}

#button-container {
  display: flex;
  justify-content: center; /* ボタンを中央に配置 */
  gap: 10px; /* ボタン間の間隔を調整 */
  margin-left: 50px;
}

.image-button {
  width: 90px; /* 指定された幅 */
  height: 45px; /* 指定された高さ */
  padding: 0; /* 内部のpaddingをリセット */
  margin: 0; /* 個々のボタンのmarginは#button-containerのgapで調整 */
  border: none; /* ボタンの枠線をなくす */
  background-color: transparent; /* ボタンの背景を透明にする */
  cursor: pointer;
  box-sizing: border-box; /* paddingとborderをwidth, heightに含める */
}

.image-button:disabled {
  opacity: 0.5; /* disabled時のスタイル */
  cursor: not-allowed;
}

.image-button img {
  display: block; /* インライン要素の余白問題を解消 */
  width: 100%; /* 親要素に合わせて画像の幅を調整 */
  height: 100%; /* 親要素に合わせて画像の高さを調整 */
  object-fit: contain; /* 画像がアスペクト比を保ちつつ収まるように */
}

.chart-wrapper {
  display: flex; /* 順位表示とグラフを横並びにする */
  flex-direction: column; /* 要素を縦に並べる */
  align-items: center; /* 中央揃え */
  margin-top: 10px; /* コントロールボタンとの間隔を調整 */
}

.chart-area {
  display: flex; /* 順位表示とグラフを横並びにする */
  align-items: flex-start; /* 上端を揃える */
  margin-bottom: 5px; /* 注釈との間隔 */
}

.rank-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 右寄せ */
  margin-right: 10px; /* グラフとの間隔 */
  padding-top: 10px; /* 最初の棒グラフの位置に合わせる */
}

.rank-item {
  height: 70px; /* bar-container の高さ + margin-bottom */
  display: flex;
  align-items: center; /* 垂直方向中央揃え */
  position: relative; /* ::after の基準位置 */
}

.rank-label-fixed {
  font-size: 20px;
  font-weight: bold;
  color: white; /* 順位文字を白に */
  width: 40px; /* 幅を広げる */
  text-align: right; /* 順位を右寄せ */
  transform: translateX(-10px) translateY(-5px);/* 右に 10px 移動。値は調整してください */
}

#chart-container {
  width: 800px;
  height: 1400px; /* 20人分の高さに合わせて調整 */
  border: 1px solid #ccc;
  position: relative;
  overflow: hidden;
  padding-left: 10px;
  padding-top: 10px; /* 最初の棒グラフの位置に合わせる (bar-containerのmargin-bottom/2) */
  /*
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(200, 200, 200, 0.5) 70px, transparent 70px, transparent 140px);
  */
  background-image: linear-gradient(to bottom, rgba(41, 71, 94, 0.5) 0%, rgba(41, 71, 94, 1) 70px, transparent 70px, transparent 140px);
  background-size: 100% 70px; /* bar-containerの高さ */
  background-color: transparent; /* 念のため背景色を透明に */
  flex-grow: 1; /* グラフコンテナが利用可能なスペースを広げる */
}

.bar-container {
  position: absolute;
  height: 60px; /* 画像の高さに合わせる */
  line-height: 60px; /* 行の高さも合わせる */
  transition: top 0.5s ease-in-out, width 2s ease-in-out; /* widthのtransitionも追加 */
  width: calc(100% - 20px);
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.name-image {
  width: 60px; /* 画像サイズ変更 */
  height: 60px; /* 画像サイズ変更 */
  margin-right: 10px;
}

.bar {
  position: absolute;
  left: 70px; /* 画像の幅 + margin */
  background: linear-gradient(to right, #60b6e7, #2a475e); /* 青系のグラデーション */
  color: white;
  text-align: right;
  padding-right: 5px;
  box-sizing: border-box;
  height: 60px; /* 画像の高さに合わせる */
  width: 0;
  transition: width 1s ease-in-out;
  font-size: 20px; /* 数値の文字サイズを 20px に設定 */
}

.chart-annotation {
  font-size: 15px;
  color: white; /* 文字色を白に */
  text-align: left; /* 中央揃え */
  margin-left: 60px;
  margin-top: 5px; /* 棒グラフとの間に少し余白を追加 */
  order: 1; /* chart-wrapper の中で最後に表示 */
  width: 820px; /* グラフエリアの幅に合わせて調整 */
}

.chart-annotation a {
  color: white; /* リンクの色を白に */
  text-decoration: none; /* 下線を非表示にする場合（任意） */
}