body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    text-align: center;
    padding: 20px;
}

.container {
  position: relative; /* ← これが必要！ */
  max-width: 800px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto; /* ← これで中央寄せされてる */
  text-align: left;

  /* 追加して調整 */
  padding-left: 10px;      /* ← 左余白を少し減らす */
  padding-right: 10px;     /* ← 右も合わせる */
}

h1, h2 {
    color: #4CAF50;
    text-align: center;
}

.form-group {
  display: grid;
  grid-template-columns: 120px 1fr; /* ← ラベル幅を少し小さく */
  gap: 30px;
  align-items: center;
  justify-content: start;
  overflow-x: hidden;
}

.form-label {
  font-weight: bold;
  font-size: 12px;
  display: grid;
  grid-template-columns: 18px auto; /* ← 頭文字と残りを分割 */
  gap: 0;
  align-items: center;
  text-align: left;
  white-space: nowrap;
}

input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

button:hover {
    background-color: #45a049;
}

table {
  table-layout: fixed;  /* セルの幅を固定する */
  width: 100%;          /* 固定幅のテーブルとして100%を使用 */
}


table, th, td {
    border: 1px solid #ddd;
}

th, td {
  padding: 10px;
  text-align: left;
  word-wrap: break-word; /* 長い文字列を折り返して表示 */
}

th {
    background-color: #4CAF50;
    color: white;
}

/* ✅ ここがボタン用（score-btn）スタイル */
.score-btn {
    padding: 4px 8px; /* 小さめ */
    margin-right: 6px; /* ボタン同士の間に余白 */
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #ccc;
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
}

.score-btn:last-child {
    margin-right: 0; /* 最後のボタンだけ余白なしにする */
}

.score-btn.active {
    background-color: #003366;
    color: white;
}
/* ボタンを並べる親コンテナ */
.score-button-group {
  display: flex;
  gap: 8px; /* ボタンの間隔 */
}

/* スコア用ボタン */
button.score-btn {
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #ccc;
  cursor: pointer;
  display: inline-block;
  width: auto !important;
}

/* アクティブ時の色変化 */
button.score-btn.active {
  background-color: #003366;
  color: white;
}
button:not(.score-btn) {
  background-color: #003366;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  width: 100%;
}

/* 保存ボタンを右寄せ＆小さくする */
.save-button-wrapper {
  text-align: right;
  margin: 10px 0;
}

.save-button-wrapper button {
  width: auto !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  border-radius: 3px !important;
}

#date {
  width: 150px;
}

.date-group {
  display: flex;
  align-items: center;
  gap: 6px; /* ← ラベルと入力欄の間の距離（好みで調整OK） */
}

.date-input-wrapper {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px; /* ← ラベルと入力欄の間の距離 */
}

.save-button-wrapper > button {
  width: auto !important;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
  background-color: #003366;
  color: white;
  border: none;
  cursor: pointer;
}

.save-button-wrapper > button:hover {
  background-color: #002855;
}

.first-letter {
  color: red;
  font-weight: bold;
}

.aspire-initial {
  color: red;
  font-weight: bold;
  display: inline-block;
  width: 20px;
  text-align: center; /* ← ここを center に！ */
}

.aspire-rest {
  display: inline-block;
}

.textarea-full {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: vertical;
  font-size: 14px;
  box-sizing: border-box;
}

.memo-block {
  margin-top: 10px;
}

.memo-label {
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 4px;
  display: inline-block;
}

.logout-button-wrapper {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;

  display: flex;
  gap: 4px;
  align-items: center;
}

button.logout-button,
button.settings-button {
  background-color: transparent !important;
  color: #003366 !important;
  border: 1px solid #003366 !important;

  padding: 3px 10px !important;
  font-size: 11px !important;

  border-radius: 3px !important;
  cursor: pointer !important;

  width: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
}

.logout-button:hover {
  background-color: #003366;
  color: white;
}

.table-container table {
  table-layout: fixed;  /* セル幅を固定にする */
  width: 100%;          /* 親要素の幅に合わせて100% */
  max-width: 1000px;    /* 最大幅を1000pxに制限 */
}

.table-container td {
  word-break: break-word;      /* 単語の途中でも折り返す */
  white-space: normal;         /* テキストを折り返す */
}

.table-container thead th:not(:first-child) {
  font-size: 12px; /* ← 小さくしたいサイズに調整 */
  font-weight: normal; /* ← オプション：細字にして見やすく */
}

#diary-list td:first-child {
  text-align: left !important;
}

.table-container {
  overflow-x: auto;     /* 横スクロールを有効にする */
  max-width: 1000px;    /* 最大幅を1000pxに設定（必要に応じて調整） */
  width: 100%;          /* 親要素の幅を100%に設定 */
  margin: 0 auto;       /* 中央揃え */
}

.table-container table {
  width: 2500px;  /* 固定幅を指定 */
  table-layout: fixed;  /* セルの幅を固定する */
}

/* 要素列のテキストをしっかり表示させる */
.table-container td:first-child,
.table-container th:first-child {
  background-color: #f9f9f9 !important;
  color: #333 !important;
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 80px;
}

/* スマホの画面幅での調整 */
@media screen and (max-width: 768px) {
  /* フォームグループを横並びにする */
  .form-group {
    display: flex;
    flex-wrap: wrap; /* 要素が折り返すようにする */
    gap: 10px; /* ラベルと入力欄の間に隙間を作る */
    align-items: center; /* ラベルと入力欄を縦に揃える */
  }

  .form-label {
    font-size: 14px; /* ラベルのサイズを少し小さく */
    margin-bottom: 0;
    min-width: 120px; /* ラベルの最小幅を指定 */
  }

  .form-group input,
  .form-group textarea {
    width: calc(100% - 120px); /* ラベルの幅を引いた分だけ入力欄を広げる */
    box-sizing: border-box; /* 幅を正しく設定 */
    margin-bottom: 15px; /* 入力欄の下に余白を追加 */
  }

  /* メモのみ縦並び */
  .memo-block {
    display: block; /* メモの入力欄は縦並び */
  }

  .memo-label,
  .textarea-full {
    width: 100%; /* メモの入力欄の幅を100%に */
  }

  /* メモ入力欄に少し余白 */
  .memo-block textarea {
    height: auto;
  }
}

@media (max-width: 600px) {
  /* ボタンを横並びにする */
  .score-button-group {
    display: flex;
    justify-content: space-evenly; /* ボタン間のスペースを均等に */
    gap: 8px; /* ボタンの間隔 */
    align-items: center; /* ボタンを縦方向で中央揃え */
    flex-wrap: wrap; /* ボタンが横幅に収まらない場合、折り返し */
  }

  /* 各ボタンのサイズを調整 */
  .score-btn {
    width: 40px; /* 横幅 */
    height: 40px; /* 高さ */
    font-size: 14px; /* ボタン内の数字を小さめに */
    display: inline-flex;
    justify-content: center;
    align-items: center; /* ボタン内で数字を中央揃え */
  }

  /* ラベルの文字サイズを小さく */
  .form-label {
    font-size: 10px; /* ラベル文字のサイズを少し小さく */
  }
}

#skip-to-latest {
  font-size: 12px !important; /* 小さくする */
  padding: 4px 8px !important; /* ボタンの内側の余白を小さくする */
  margin-left: 0 !important; /* 左に寄せるためにマージンを調整 */
  text-align: left !important; /* 左寄せにする */
  width: auto !important; /* 幅を自動調整、必要に応じて固定幅に変更も可能 */
}

#download-excel {
  margin-top: 20px;
  background-color: #003366;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
}

#download-excel:hover {
  background-color: #002855;
}

.score-1 {
  background-color: #cce5ff !important;
}

.score-2 {
  background-color: #99ccff !important;
}

.score-3 {
  background-color: #6699ff !important;
}

.score-4 {
  background-color: #3366ff !important;
}

/* テーブル全体に適用 */
.table-container table {
  table-layout: fixed;  /* セルの幅を固定にする */
  width: 100%;           /* 親要素の幅に合わせて100% */
  max-width: 1000px;     /* 最大幅を設定 */
}

/* 各列の幅を固定 */
.table-container th, .table-container td {
  width: 150px;  /* 例：各列の幅を150pxに設定 */
}

/* 最初の列（要素列）を固定 */
.table-container td:first-child,
.table-container th:first-child {
  min-width: 60px;  /* 最初の列の最小幅 */
  min-width: 80px;  /* 最初の列の幅を調整 */
}

@media screen and (max-width: 768px) {
  .table-container td:first-child,
  .table-container th:first-child {
    width: 90px;  
    min-width: 50px;  
    max-width: 90px;  
}

  /* その他の列 */
  .table-container td:not(:first-child),
  .table-container th:not(:first-child) {
    width: 90px;  
    min-width: 60px;  
    max-width: 90px; 
  }
}

/* ログインセクションの中央寄せ＆大きめデザイン */
#auth-section {
  display: flex;
  flex-direction: column;  /* 初期状態で縦並び */
  align-items: center;
  justify-content: center;
  height: 100vh; /* 画面全体中央に */
  padding: 20px;
}

#auth-section input[type="email"],
#auth-section input[type="password"] {
  width: 100%;
  max-width: 320px;
  padding: 14px 16px;
  margin: 10px 0;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

#auth-section button {
  width: 100%;
  max-width: 320px;
  padding: 14px 16px;
  margin-top: 12px;
  font-size: 16px;
  border-radius: 6px;
  box-sizing: border-box;
}

#auth-section p {
  margin-top: 16px;
  font-size: 14px;
}

#auth-section a {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

#register-section {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 20px;
}

#register-section input {
  width: 100%;
  max-width: 320px;
  padding: 14px;
  margin: 10px 0;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

#register-section button {
  width: 100%;
  max-width: 320px;
  padding: 14px;
  font-size: 16px;
  border-radius: 6px;
  margin-top: 10px;
}

#reset-password-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 画面全体を使う */
  padding: 20px;
}

#reset-password-section input {
  width: 100%;
  max-width: 320px;
  padding: 14px 16px;
  margin: 10px 0;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

#reset-password-section button {
  width: 100%;
  max-width: 320px;
  padding: 14px 16px;
  margin-top: 12px;
  font-size: 16px;
  border-radius: 6px;
  box-sizing: border-box;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

#reset-password-section button:hover {
  background-color: #45a049;
}

#reset-password-section p {
  margin-top: 16px;
  font-size: 14px;
}

#reset-password-section a {
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* 初期状態で縦並びにするためのスタイル */
#auth-section .form-group {
  display: flex;
  flex-direction: column;  /* フォーム要素を縦に並べる */
  gap: 20px; /* 要素間の隙間を設定 */
  align-items: flex-start; /* 左寄せ */
}

/* 入力フィールドとボタンのスタイル */
#auth-section input[type="email"],
#auth-section input[type="password"],
#auth-section button {
  width: 100%;
  max-width: 320px;
  padding: 14px 16px;
  margin: 10px 0;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* 追加するCSS */
#register-section a {
  cursor: pointer;  /* カーソルを手のひらにする */
  display: inline-block;  /* 見た目の修正 */
  text-decoration: underline;  /* アンダーラインを追加 */
}

/* チェックボックスを左に配置 */
#register-section label {
  display: flex;
  align-items: center;  /* チェックボックスとテキストを縦に揃える */
  gap: 10px; /* チェックボックスとテキストの間のスペースを調整 */
}

#register-section label a {
  text-decoration: underline;  /* リンクにアンダーラインを追加 */
  color: blue;  /* リンク色を青に */
}

/* チェックボックスとリンクを1行に収める */
#register-section label {
  display: flex;
  align-items: center;  /* チェックボックスとテキストを縦に揃える */
  gap: 10px; /* チェックボックスとテキストの間のスペースを調整 */
  white-space: nowrap; /* テキストが折り返さないように */
}

#register-section label a {
  text-decoration: underline;  /* リンクにアンダーラインを追加 */
  color: blue;  /* リンク色を青に */
}

/* チェックボックスを小さく調整（フォーム内で見やすくするため） */
#register-section input[type="checkbox"] {
  transform: scale(1.2); /* チェックボックスのサイズを少し大きく */
}

.logout-button-wrapper button {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: fit-content !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* ===== アカウント設定画面 ===== */

.settings-panel {
  max-width: 900px;
  margin: 40px auto;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.08);
  text-align: left;
}

.settings-panel h2 {
  color: #003366;
  text-align: left;
  margin-bottom: 24px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 14px;
}

.settings-note {
  background: #eef6ff;
  border: 1px solid #b8d9ff;
  padding: 14px 18px;
  margin-bottom: 32px;
  font-size: 13px;
  color: #003366;
  line-height: 1.8;
}

.settings-note p {
  margin: 4px 0;
}

.settings-block {
  margin-bottom: 32px;
  padding: 0 16px;
}

.settings-block h3 {
  color: #333;
  font-size: 18px;
  margin-bottom: 24px;
}

.settings-block label {
  display: block;
  text-align: left;
  font-weight: bold;
  font-size: 14px;
  margin: 14px 0 6px;
}

.settings-block input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
}

.settings-button-row {
  text-align: right;
  margin-top: 14px;
}

.settings-button-row button,
.settings-back-row button {
  width: auto !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  border-radius: 4px !important;
  background-color: #003366 !important;
  color: white !important;
}

.settings-back-row {
  text-align: right;
  margin-top: 28px;
}

.settings-panel hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 32px 0;
}

.password-note {
  font-size: 12px;
  color: #666;
  line-height: 1.6;

  margin-top: 8px;
  margin-bottom: 14px;

  text-align: left;
}

.password-note p {
  margin: 2px 0;
}

.save-note {
  font-size: 12px;
  color: #666;
  margin-top: 14px;
  margin-bottom: 10px;
  line-height: 1.7;
  text-align: left;
}