@charset "UTF-8";

#login-header                                    { position: fixed; top: 0; width: 100%; margin: 0; background-color: #ffffff; padding-top: 20px;/* iOS 10 以下の互換性を保つために20px */
 padding-top: constant(safe-area-inset-top);/* iOS 11.2未満用 */ padding-top: env(safe-area-inset-top);/* iOS 11.2以上用 */}
#login-header h1                                 { display: block; margin: 0; padding: 0; font-size: 20px; height: 80px; text-indent: -99999px; cursor: pointer; }
#login-header h1                                 { background-image: url('../../img/ContractorMyPage/loginform/logo.png'); background-repeat: no-repeat; background-position: center center; }
#login-header h2                                 { display: block; margin: 0; padding: 0; border: none; border-top: 1px solid #34495e; border-bottom: 1px solid #34495e; padding: 3px 0; }
#login-header h2 div                             { margin: 0; padding: 0; background-color: #34495e; }
#login-header h2 div                             { color: #ffffff; font-size: 18px; line-height: 40px; letter-spacing: 6px; text-align: center; }

#login-form                                      { margin: 128px 0px 0px 0px; padding: 20px 50px 40px; background-color: #ffffff; }
#login-form                                      { border-radius: 5px; }
/* #login-form                                      { box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); -ms-box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); } */
#login-form div.login-id-input                   { margin: 20px 0; }
#login-form div.login-password-input             { margin: 20px 0; }
#login-form div label                            { position: relative; display: block; margin: 0; padding: 0; text-align: left; color: #34495e; font-size: 14px; line-height: 25px; }
#login-form div label span                       { position: absolute; left: 100px; color: #cc0000; line-height: 25px; vertical-align: middle; }
#login-form div input                            { display: block; margin: 0; width: 100%; font-size: 25px; }
#login-form div.message-box                      { height: 30px; color: red; font-size: 20px; line-height: 30px; }
#login-form div.message-box.green                { color: green; }
#login-form button                               { display: block; margin: 100px 0 30px 0; padding: 0; width: 100%; line-height: 50px; }
#login-form button                               { border: none; background: none; background-color: #34495e; color: #ffffff; font-size: 20px; text-align: center; }
#login-form a.lost-password-link                 { display: block; color: cornflowerblue; font-size: 18px; text-align: center; text-decoration: underline; cursor: pointer; }
#login-form a.lost-password-link:hover           { color:brown; }


#lostpassword-form                               { margin: 128px 0px 0px 0px; padding: 20px 50px 40px; background-color: #ffffff; }
#lostpassword-form                               { border-radius: 5px; }
/* #lostpassword-form                               { box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); -ms-box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); } */
#lostpassword-form h2                            { font-size: 20px; color: #7da0ba; font-weight: bold; text-align: center; line-height: 50px; }
#lostpassword-form div.login-id-input            { margin: 20px 0; }
#lostpassword-form div.security-check            { margin: 20px 0; }
#lostpassword-form div label                     { position: relative; display: block; margin: 0; padding: 0; text-align: left; color: #34495e; font-size: 16px; line-height: 25px; }
#lostpassword-form div label span                { margin: 0 0 0 20px; color: #cc0000; line-height: 25px; vertical-align: middle; }
#lostpassword-form div input                     { display: block; margin: 0; width: 100%; font-size: 25px; }
#lostpassword-form div.message-box               { height: 30px; color: red; font-size: 20px; line-height: 30px; }
#lostpassword-form button                        { display: block; margin: 100px 0 30px 0; padding: 0; width: 100%; line-height: 50px; }

#newpassword-form                                { margin: 128px 0px 0px 0px; padding: 20px 50px 40px; background-color: #ffffff; }
#newpassword-form                                { border-radius: 5px; }
/* #newpassword-form                                { box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); -ms-box-shadow: 0px 0px 5px 0px rgba(128,128,128,0.5); } */
#newpassword-form h2                             { font-size: 18px; color: #7da0ba; font-weight: bold; text-align: center; line-height: 50px; }
#newpassword-form div.login-id-input             { margin: 20px 0; }
#newpassword-form div.security-check             { margin: 20px 0; }
#newpassword-form div label                      { position: relative; display: block; margin: 0; padding: 0; text-align: left; color: #34495e; font-size: 16px; line-height: 25px; }
#newpassword-form div label span                 { margin: 0 0 0 20px; color: #cc0000; line-height: 25px; vertical-align: middle; }
#newpassword-form div input                      { display: block; margin: 0; width: 100%; font-size: 25px; }
#newpassword-form div.message-box                { height: auto; color: red; font-size: 20px; line-height: 30px; }
#newpassword-form div.button-area                { position: relative; right: 0; left: 0; padding: 10px; text-align: center; background-color: #ffffff; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; }
#newpassword-form button                         { display: block; margin: 10px 10px 30px 10px; padding: 0; width: 100%; line-height: 50px; }

i#password1-eye                                  { font-size: 24px; color: #6c757d; }
i#password1-eye:hover                            { cursor : pointer; }
i#password2-eye                                  { font-size: 24px; color: #6c757d; }
i#password2-eye:hover                            { cursor : pointer; }
div#input1                                       { position: relative; }
div#eye1                                         { position: absolute; top: 125px; right: 60px; }
div#eye2                                         { position: absolute; top: 215px; right: 60px; }