body {
     margin: 0%;
     padding: 0%;
 }
 input {
   border: none;
   font-family: 'Open Sans', Arial, sans-serif;
   font-size: 16px;
   line-height: 1.5em;
   padding: 0;
   -webkit-appearance: none;
 }
h1 {
	background-color: #4168D3; 
	color: white; 
	vertical-align: top;
}
 .form_area
 {
   width: 100%;
   text-align: center;
 }

 /******************/
 /* ログイン
 /******************/
 #login {
   margin:  auto;
   margin-top: 100px;
   width: 500px;
   text-align: center;
 }

 #login form {
   margin: auto;
   padding-bottom: 20px;
   width: 100%;
   background-color: rgb(255, 255, 255) ;
 }

 .login_form_label {
     background-color: lightskyblue;
     display: inline-block; /* 必要に応じて block に変更 */
     margin-left: 60px;
     margin-bottom: 1em;
     padding: 0 16px;
     height: 50px; /* ここで高さを指定 */
     width: 100px;
     line-height: 50px; /* テキストを中央に配置 */
     border: 1px solid black;
 }

 #login form input[type="text"] {
   background-color: whitesmoke;
   color: black;
   margin-bottom: 1em;
   padding: 0 16px;
   height: 50px;
   border: 1px solid black;
 }

 #login form input[type="password"] {
   background-color: whitesmoke;
   color: black;
   margin-bottom: 1em;
   padding: 0 16px;
   height: 50px;
   border: 1px solid black;
 }

 #login form input[type="submit"] {
   background: silver;
   color: black;
   border: 0;
   width: 100px;
   height: 40px;
   border-radius: 3px;
   cursor: pointer;
   transition: background 0.3s ease-in-out;
 }
 #login form input[type="submit"]:hover {
   background: darkgray;
 }

 .form_inbox {
     display: flex;
     align-items: center;
 }
 
 /******************/
 /* エラー表示
 /******************/
 .error-msg {
     background-color: #ffe4e1;
     border: solid 1px darkgray;
     border-radius: 5px;
     padding: 2px 5px;
     margin: 5px 50px 15px 50px;
     font-size: 14px;
     color: red;
 }

 /* パスワード表示アイコンを非表示にする */
 input[type="password"]::-ms-reveal,
 input[type="password"]::-webkit-credentials-auto-fill-button {
 display: none;
 }
 .toggle-password {
     cursor: pointer;
     margin-left: -30px; /* アイコンの位置を調整 */
     position: relative;
     z-index: 2;
 }
 /* パスワード表示アイコン */
 .toggle-password::before {
     content: '\1F441';
     font-size: 28px;
     position: absolute;
     right: 9;
     top: -30px;
     bottom: 0;
     margin: auto;
     color: black;
     cursor: pointer;
     z-index: 1;
 }
 /* パスワード非表示アイコン */
 .toggle-password.active::before {
     content: '\1F441';
     font-size: 28px;
     position: absolute;
     right: 9;
     top: -30px;
     bottom: 0;
     margin: auto;
     color: black;
     cursor: pointer;
     z-index: 1;
 }
 /* 斜め線を追加 */
 .toggle-password.active::after {
     content: '';
     position: absolute;
     width: 2px;
     height: 26px;
     background-color: black;
     transform: rotate(45deg);
     right: -15px;
     top: -16px;
     bottom: 0;
     margin: auto;
 }