/* style.css */
/*
@import "common.css";
*/
    .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%; /* 上から10%の位置に配置 */
      left: 50%; /* 左から50%の位置に配置 */
      transform: translate(-50%, -50%); /* 中央に配置 */
      font-size: 2em; /* 文字サイズ */
      font-weight: bold; /* 文字を太字に */
      /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */ /* 文字に影をつける */
    }
        body {
            font-family: sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            /*height: 130vh;*/
			height: auto; 
			min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .signin-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 600px;
			margin-top: 100px; /* header imgの高さが100pxなので、これくらいとする */
			margin-bottom: 20px; /* 下部にも少し余白を持たせる */
        }

        .signin-container h2 {
            text-align: center;
            margin-bottom: 20px;
        }
		
		.signin-container table {
		            width: 100%;
		}

        .signin-container input[type="text"],
		.signin-container input[type="email"],
        .signin-container input[type="password"] {
            /*width: calc(100% / 3 );*/
			width: 90%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
		.signup{
			text-align: center;
			padding: 20px;
		}
/**
        button {
            width: 50%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
**/
/* ========== ボタンスタイル ========== */
button {
  border-radius: 24px;
  background-color: #000000;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  margin: 1em 0;
  padding: 0 1em;
  height: 3em;
}

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

button.horizontal {
  padding: 0 1em;
  height: 3em;
  margin-bottom: 20px;
}

		.terms{
			padding: 5px; 
			margin-bottom: 
			10px; 
			border: 1px dotted #333333;
		}
		.link{
			text-align: center;
		}
		.error {
		    color: red;
		    font-size: 12px;
		    margin-bottom: 10px;
		}
		.required-mark {
		    color: #d9534f; /* 赤色 */
		    margin-left: 5px;
		    font-weight: normal; /* アスタリスク自体は太字にしない */
		}
		
		textarea {
		  width: 100%;
		  height: 200px; /* 固定の高さがないとスクロールバーは表示されない */
		  overflow: auto; /* 必要に応じてスクロールバーを表示 */
		  /* overflow: scroll;  常にスクロールバーを表示 */
		  /* overflow-y: scroll; 縦スクロールバーを常に表示 */
		  /* overflow-x: auto; 横スクロールバーを必要に応じて表示 */
		  resize: vertical; /* ユーザーが縦方向にリサイズできるようにする */
		  background-color: #f0f0f0;
		}