/* style.css */
/*
@import "common.css";
*/
/* デフォルトのスタイル（PC向け） */
.header-text {
    font-size: 2em;
}

/* 画面幅が600px以下のデバイスに適用されるスタイル */
@media (max-width: 600px) {
    .header-text {
        font-size: 1.5em; /* フォントサイズを少し小さくする */
    }

    .login-container {
        padding: 15px; /* パディングを小さくする */
    }

    .right-aligned-link {
        width: auto; /* 幅指定をなくして、コンテンツに合わせる */
        text-align: center; /* 中央揃えにする */
    }
}
/* ******************************* */
    .header {
      background-color: #f0f0f0;
      padding: 0px;
      position: fixed; /* ヘッダーを上部に固定 */
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10; /* 他の要素の上に表示 */
    }
    .header img {
      width: 100%; /* 画像を親要素いっぱいに表示 */
      height: 100px;
      /* height: auto; */ /* 高さを自動調整 */
      object-fit: cover;
      display: block; /* インライン要素の余白をなくす */
    }

    .header-text {
      position: absolute;
      color: white;
      top: 40%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      font-size: 2em; 
      font-weight: bold; 
	  text-shadow: 
	        -2px -2px 0 #77787B,  
	         2px -2px 0 #77787B,  
	        -2px  2px 0 #77787B,  
	         2px  2px 0 #77787B;
    }
        body {
            font-family: sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .login-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 90%;
			max-width: 400px;
        }

        .login-container h2 {
            text-align: center;
            margin-bottom: 20px;
        }

		/* 修正したフォームのスタイル */
		.login-container form div {
		    margin-bottom: 15px; /* 各入力フィールドの間に余白を追加 */
		}

		.login-container input[type="text"],
		.login-container input[type="email"],
		.login-container input[type="password"] {
		    width: 100%; /* 親要素(div)の幅いっぱいに広がる */
		    height: 30px;
		    background-color: #f0f8ff;
		    padding: 10px;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    box-sizing: border-box; /* パディングとボーダーを幅に含める */
		}

        /* ログインのリンク*/
		.right-aligned-link {
		  display: block; /* aタグをブロック要素にする */
		  width: 210px;    /* リンクの幅を指定（必要に応じて調整） */
		  margin-left: auto; /* 左側のマージンを自動調整して右寄せにする */
		  margin-right: 0px; /* 右側に余白が必要な場合 */
		  padding: 15px;
		  font-size: 90%;
		}		

/* ========== ボタンスタイル ========== */
button {
  border-radius: 24px;
  background-color: #000000;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: block; /* ボタンをブロック要素にする */
  width: fit-content; /* ボタンの幅をコンテンツに合わせるか、具体的なpx値などを指定 */
  margin: 1em auto; /* 上下に1em、左右は自動で中央寄せ */  
/*  margin: 1em 0; */
  padding: 0 1em;
  height: 3em;
}

button:hover {
  background-color: #888888;
}

button.horizontal {
  padding: 0 1em;
  height: 3em;
  margin-bottom: 20px;
}
/* エラーメッセージ */
 .error {
     color: #FF0000; /* 赤色 */
     font-size: 0.9em; /* 少し小さめの文字サイズ */
     font-weight: bold; /* 太字 */
     margin-left: 5px; /* 左側に少し余白 */
     display: block; /* 新しい行に表示 */
 }