/* 共通のリセット */
body, h1, h2, h3, p, ul, li, a, button {
  margin: 0; /* 余白をリセット */
  padding: 0; /* パディングをリセット */
  box-sizing: border-box; /* コンテンツサイズ計算を統一 */
}

/* 全体のデザイン */
body {
  font-family: Arial, sans-serif; /* シンプルで見やすいフォント */
  background-color: #f8f9fa; /* 全体の背景色 */
  background-image: url('/static/images/background.png'); /* 背景画像 */
  background-size: cover; /* 背景画像を全体に拡大 */
  color: #333; /* 全体の文字色 */
  text-align: center; /* テキストを中央揃え */
  padding: 10px; /* 全体に余白を追加 */
  margin: 0; /* 余白をリセット */
  font-size: 14px; /* 基本の文字サイズ */
  line-height: 1.5; /* 行間を調整 */
}

/* ヘッダー */
header {
  font-size: 1.4rem; /* 少し大きめのフォントサイズ */
  font-weight: bold; /* 太字で強調 */
  background-color: #007bff; /* ヘッダーの背景色 (青) */
  color: white; /* ヘッダーの文字色 (白) */
  padding: 10px; /* 上下の余白 */
  text-align: center; /* 中央揃え */
  border-radius: 5px; /* 角を丸める */
  margin-bottom: 15px; /* 下に余白を追加 */
}

/* 入力フィールド */
.input-field {
  padding: 10px; /* 内側の余白を調整 */
  font-size: 1em; /* 文字サイズ */
  border-radius: 5px; /* 角を丸くする */
  border: 1px solid #ccc; /* 薄い灰色の枠線 */
  width: 60%; /* 幅を画面の80%に設定 */
  margin-bottom: 15px; /* 下に余白を追加 */
}

/* コンテナ */
.container {
  margin: 0 auto; /* 中央寄せ */
  min-width: 300px; /* 最大幅を600pxに制限 */
  max-width: 600px;
  width: 95%;
  text-align: center; /* テキストを中央揃え */
  padding: 8px; /* 内側の余白を追加 */
  background-color: #ffffff; /* 背景を白に */
  border-radius: 8px; /* 角を丸くする */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

.center-box {
  max-width: 728px;  /* 任意の幅を指定 */
  margin: 20px auto;
  background-color: #f0f0f0;  /* 背景色で配置を視覚化 */
}

/* テーブル */
table {
  width: 95%; /* 幅を親要素に合わせる */
  border-collapse: collapse; /* 枠線を重ねない */
  margin: 20px 0; /* 上下に余白を追加 */
  margin-left: auto;
  margin-right: auto;
  background-color: #f6fff6; /* すごく近い薄緑色 */
}

th, td {
  border: 1px solid #ccc; /* 各セルに薄い枠線を追加 */
  text-align: center; /* セル内のテキストを中央揃え */
}

th {
  background-color: #008000; /* 緑色 */
  color: white;
  padding: 10px;
}
td {
  padding: 8px;
  border: 1px solid #ddd;
}

/* リンク */
a {
  color: #007bff; /* 青色の文字色 */
  text-decoration: none; /* 下線を消す */
}

a:hover {
  text-decoration: underline; /* ホバー時に下線を表示 */
}

/* *********************************************** */
/*                ロゴのスタイル           */
/* *********************************************** */
.logo {
  margin-top: 25px;
}
/* *********************************************** */
/*                フォーム全体のスタイル           */
/* *********************************************** */

form {
  width: 300px;
  margin: 25px auto; /* センターに配置 */
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影 */
  background-color: #f9f9f9; 
}

/* ラベルのスタイル */
form label {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}

/* セレクトボックスのスタイル */
form select {
  width: 60%; /* フォームの幅に合わせる */
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  appearance: none; /* 矢印のデザインをシンプルに */
  cursor: pointer;
}

.login-container {
  margin: 0 auto; /* 中央寄せ */
  max-width: 400px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center; /* テキストを中央揃え */
  padding: 10px;
  border-radius: 8px; /* 角を丸くする */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.login-form {
  max-width: 300px;
  margin: 15px auto; /* センターに配置 */
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影 */
  background-color: #f9f9f9; 
}

.goal-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* *********************************************** */
/*    パスワードコンテナ                                       */
/* *********************************************** */
.input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 300px; /* 必要に応じて調整 */
}

.input-field {
  width: 100%;
  padding: 10px;
  padding-right: 40px; /* ボタンの分だけ右側に余白を確保 */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.toggle-password {
  position: absolute;
  right: 10px; /* input-field の右端に配置 */
  top: 10%; /* 親要素の高さの50% */
  transform: translateY(-50%); /* 完全に中央揃え */
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #555;
  padding: 0px;
  height: 30px; /* アイコンのサイズ調整 */
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* *********************************************** */
/*    ボタン                                       */
/* *********************************************** */

/* ボタンのスタイル */
form button {
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:active {
  background-color: #003f8c; /* クリック時のさらに濃い青色 */
}

.button:hover {
  background-color: #0056b3; /* ホバー時に濃い青に変更 */
}

.button {
  display: inline-block; /* インラインブロック表示 */
  padding: 4px 15px; /* 内側の余白を調整 */
  font-size: 1rem; /* ボタン内の文字サイズ */
  font-weight: bold; /* 太字で強調 */
  color: #fff; /* ボタン文字を白に */
  background-color: #007bff; /* 青い背景色 */
  border: none; /* 枠線を消す */
  border-radius: 5px; /* 角を丸くする */
  cursor: pointer; /* ホバー時にカーソルをポインターに変更 */
  text-decoration: none; /* アンカータグの装飾を消す */
  margin-top: 10px; /* ボタンの上に余白を追加 */
  transition: background-color 0.3s ease; /* 背景色変更をスムーズに */
}


.btn-small {
  max-width: 150px;
  width: 50%;
  margin-top: 5px;
  font-size: 0.9em;
  padding: 4px 8px;
  background-color: #cccccc;
  color: black;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  display: inline-block;
}

.small-button {
  min-width: 150px;
  width: 15%;
  margin-top: 5px;
  font-size: 0.9em;
  font-weight: bolder;
  padding: 8px 16px;
  background-color: darkgreen;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  display: inline-block;
}

.resister-button {
  min-width: 150px;
  max-width: 200px;
  display: inline-block; /* インラインブロック表示 */
  padding: 5px 15px; /* 内側の余白を調整 */
  font-size: 1.0em; /* ボタン内の文字サイズ */
  font-weight: bold;
  color: #fff; /* ボタン文字を白に */
  background-color: #28a745; /* 緑の背景色 */
  border: none; /* 枠線を消す */
  border-radius: 5px; /* 角を丸くする */
  cursor: pointer; /* ホバー時にカーソルをポインターに変更 */
  text-decoration: none; /* アンカータグの装飾を消す */
  margin-top: 10px; /* ボタンの上に余白を追加 */
}

.memorial-button {
  width: 60%;
  max-width: 300px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 20px auto;
  font-size: 14px;
  background-color: purple;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.review-button {
  width: 60%;
  max-width: 300px;
  margin-top: 10px;
  margin-bottom: 15px;
  padding: 20px auto;
  font-size: 20px;
  background-color: darkblue;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.start-button {
  width: 60%;
  max-width: 200px;
  margin-top: 5px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.re-password-button {
  background-color: #ff6347;
}

.stop-button {
  min-width: 200px;
  width: auto;
  background-color: red;
  color: whitesmoke;
  padding: 5px auto;
  margin-top: 10px;
  font-size: 14px;
}

.delete-user-button {
  background-color: #6c757d; 
  font-size: 0.8em; 
  padding: 5px 10px; 
  text-decoration: none;
}

.howtoplay-button {
  font-size: 14px;
  margin-top: 15px;
  padding: 5px auto;
  font-weight: bold;
}

/* フッター */
footer {
  font-size: 0.9rem; /* 小さい文字サイズ */
  text-align: center; /* 中央揃え */
  color: #666; /* 薄い灰色の文字 */
  margin-top: 20px; /* 上に余白を追加 */
  background-color: white;

}


/*  
    # レビュー投稿のCSS 
*/

/* レビューフォーム */
#review-form {
  max-width: 500px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  border-radius: 8px;
}


.hidden-button {
  display: none;  /* 初期状態で非表示 */
  background-color: #333;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

.hidden-button:hover {
  background-color: #555;
}