/*
 * login.css: ログインページとダッシュボードページの基本的なスタイル定義
 * 全体的なレイアウト、フォーム要素、ボタンなどの視覚的なスタイルを定義しています。
 */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

body {
    background-color: #fff3e0; /* 背景色を薄いオレンジ色に設定 */
    color: #333; /* テキスト色を濃いグレーに設定 */
    font-family: 'Noto Sans JP', sans-serif; /* Noto Sans JP フォントを設定 */
    display: flex; /* Flexboxを使用して要素を中央に配置 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    height: 100vh; /* ビューポートの高さ全体を使用 */
    margin: 0; /* デフォルトのマージンを削除 */
}

.login-container {
    background-color: #ffffff; /* コンテナの背景色を白に設定 */
    padding: 40px; /* 内側の余白 */
    border-radius: 8px; /* 角を丸くする */
    text-align: center; /* テキストを中央揃え */
    border: 1px solid #ddd; /* 薄いグレーの枠線 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

h1 {
    color: #007bff; /* 見出しの色を青に設定 */
    margin-bottom: 20px;
}

p {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px; /* 下部のマージン */
    text-align: left; /* テキストを左揃え */
}

label {
    display: block; /* ブロック要素として表示 */
    margin-bottom: 5px; /* 下部のマージン */
    font-weight: bold;
}

input[type="text"], input[type="password"] {
    width: 100%; /* 幅を100%に設定 */
    padding: 10px; /* 内側の余白 */
    background-color: #f9f9f9; /* 背景色 */
    border: 1px solid #ccc; /* 枠線 */
    color: #333; /* テキスト色 */
    border-radius: 4px; /* 角を丸くする */
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
}

button {
    width: 100%; /* 幅を100%に設定 */
    padding: 10px; /* 内側の余白 */
    background-color: #ff9800; /* 背景色をオレンジに設定 */
    color: #fff; /* テキスト色を白に設定 */
    border: none; /* 枠線を削除 */
    border-radius: 4px; /* 角を丸くする */
    font-weight: bold; /* フォントを太字に */
    cursor: pointer; /* カーソルをポインターに */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

button:hover {
    background-color: #e65100; /* ホバー時に色を濃いオレンジに */
}

.error-message {
    color: red; /* エラーメッセージの色を赤に設定 */
    margin-bottom: 15px; /* 下部のマージン */
    height: 1em; /* 高さを設定 (メッセージがない場合でもレイアウトが崩れないように) */
}

.login-container ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.login-container ul li {
    margin-bottom: 10px;
}

.login-container ul li a {
    color: #000000; /* 黒 */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.login-container ul li a:hover {
    color: #333333; /* ホバー時に少し薄いグレー */
}