@charset "utf-8";

.login-react-body {
	--footer-height: 30px;
}


/* ==========================================================
 * 共通: ベース
 * ========================================================== */

html,
body.login-react-body                                                          { margin: 0; padding: 0; min-height: 100%; background: #ffffff; color: #333333; font-size: 14px; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; -webkit-text-size-adjust: 100%; }

.login-view,
.lost-password-view,
.terms-view                                                                    { min-height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; }


/* ==========================================================
 * 共通: フッター（ログイン・パスワード再設定・利用規約）
 * ========================================================== */

.auth-footer                                                                   { width: 100%; height: var(--footer-height); margin: 0; padding: 0; border: none; background-color: #34495e; user-select: none; }
.auth-footer-copy                                                              { display: block; margin: 0 auto; border: none; padding: 0; color: #ffffff; font-size: 1rem; line-height: var(--footer-height); letter-spacing: 0.1rem; white-space: nowrap; text-align: center; }


/* ==========================================================
 * 共通: 企業ロゴヘッダー（パスワード再設定・利用規約）
 * ========================================================== */

.auth-corp-header                                                              { width: 100%; height: 45px; margin: 0; padding: 0; box-sizing: border-box; }
.auth-corp-header                                                              { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
.auth-corp-header .auth-corp-logo                                              { margin: 0; user-select: none; }


/* ==========================================================
 * ログイン画面
 * ========================================================== */

.login-view .login-logo-header                                                 { display: block; user-select: none; }
.login-view .login-logo                                                        { margin: 80px 0 90px; }

.login-view .login-main                                                        { flex: 1 0 auto; width: 100%; max-width: 600px; margin: 0 auto; padding: 0 20px 40px; box-sizing: border-box; text-align: center; }

.login-view .login-form                                                        { width: 320px; max-width: 100%; margin: 0 auto; text-align: left; }
.login-view .login-field                                                       { margin: 0 0 20px; }
.login-view .login-field > label                                               { display: block; margin: 0 0 0.5em; font-size: 16px; font-weight: 400; color: #333333; }
.login-view .login-form input[type="text"],
.login-view .login-form input[type="password"]                                 { display: block; width: 320px; max-width: 100%; height: 42px; padding: 0 8px; box-sizing: border-box; border: 1px solid #6c757d; border-radius: 10px; font-size: 20px; line-height: 40px; color: #333333; background: #ffffff; outline: none; }
.login-view .login-form input[type="text"]:focus,
.login-view .login-form input[type="password"]:focus                           { border-color: #34495e; }
.login-view .login-submit                                                      { display: block; width: 320px; max-width: 100%; height: 42px; margin: 8px auto 0; padding: 0 16px; box-sizing: border-box; border: none; border-radius: 10px; background: #34495e; color: #ffffff; font-size: 16px; letter-spacing: 0.12em; cursor: pointer; text-align: center; line-height: 42px; }
.login-view .login-submit:hover,
.login-view .login-submit:focus                                                { opacity: 0.92; }
.login-view .login-version                                                     { margin: 12px 0 0; text-align: center; font-size: 12px; color: #5b9bd5; }
.login-view .login-error                                                       { margin: 12px 0 0; text-align: center; font-size: 14px; color: #d9534f; line-height: 1.5; white-space: pre-wrap; }

.login-view .login-lost-link                                                   { margin: 24px 0 0; text-align: center; font-size: 14px; }
.login-view .login-lost-link a                                                 { color: #2f80c2; text-decoration: underline; }

.login-view .login-agree                                                       { margin: 20px auto 0; max-width: 600px; font-size: 1rem; line-height: 1.7; color: #555555; text-align: left; }
.login-view .login-agree a                                                     { color: #2f80c2; text-decoration: underline; }

.login-view .login-info                                                        { margin: 48px auto 0; max-width: 600px; text-align: left; }
.login-view .login-info > h2                                                   { margin: 0 0 8px; padding: 0; font-size: 20px; font-weight: 700; color: #333333; }
.login-view .login-info-list                                                   { max-height: 280px; overflow-y: auto; padding: 12px 8px 12px 0; border-top: 1px solid #c1c1c1; border-bottom: 1px solid #c1c1c1; box-sizing: border-box; scrollbar-color: #34495e #e8ecf0; scrollbar-width: thin; }
.login-view .login-info-list::-webkit-scrollbar                                { width: 10px; }
.login-view .login-info-list::-webkit-scrollbar-track                          { background: #e8ecf0; border-radius: 10px; }
.login-view .login-info-list::-webkit-scrollbar-thumb                          { background: #34495e; border-radius: 10px; }
.login-view .login-info-item                                                   { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: #444444; word-break: break-word; overflow-wrap: anywhere; }
.login-view .login-info-header                                                 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.login-view .login-info-date::before                                           { content: "■ "; }
.login-view .login-info-new                                                    { display: inline-block; padding: 1px 6px; background: #cc4444; color: #ffffff; font-size: 10px; border-radius: 2px; }
.login-view .login-info-empty                                                  { margin: 0; font-size: 16px; color: #888888; }

.login-view .login-meta                                                        { margin: 32px auto 0; max-width: 600px; text-align: left; }
.login-view .login-meta > h2                                                   { margin: 0 0 8px; padding: 0 0 6px; border-bottom: 1px solid #333333; font-size: 20px; font-weight: 700; color: #333333; }
.login-view .login-meta > p                                                    { margin: 12px 0 0; font-size: 16px; line-height: 1.7; color: #444444; letter-spacing: -0.5px; }
.login-view .login-meta a                                                      { color: #2f80c2; text-decoration: underline; }

.login-view .login-ext-links                                                   { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 16px; margin: 40px auto 24px; max-width: 600px; }
.login-view .login-ext-primary                                                 { display: block; width: 180px; height: 50px; margin: 0; border: none; padding: 0; text-indent: -999999px; background: transparent url("../../../../img/hpc/limited/suketto_web_banner2.png") left top no-repeat; }
.login-view .login-ext-primary:hover                                           { background-position: left bottom; }
.login-view .login-ext-support                                                 { display: block; width: 180px; height: 50px; margin: 0; border: none; padding: 0; text-indent: -999999px; background: transparent url("../../../../img/hpc/limited/spp_top.png") left top no-repeat; }
.login-view .login-ext-support:hover                                           { background-position: left bottom; }


/* ==========================================================
 * パスワード再設定メール送信画面
 * ========================================================== */

.lost-password-view .lost-password-main                                        { flex: 1 0 auto; width: 100%; margin: 0 auto; padding: 0 20px 40px; box-sizing: border-box; text-align: center; }
.lost-password-view .lost-password-title                                       { margin: 80px 0 90px; padding: 0; max-width: 100%; font-size: 20px; font-weight: 700; line-height: 1.4; color: #333333; text-align: center; }

.lost-password-view .lost-password-form                                        { width: 320px; max-width: 100%; margin: 0 auto; text-align: left; }
.lost-password-view .lost-password-field                                       { margin: 0 0 20px; }
.lost-password-view .lost-password-field > label                               { display: block; margin: 0 0 0.5em; font-size: 16px; font-weight: 400; color: #333333; }
.lost-password-view .lost-password-form input[type="text"]                     { display: block; width: 320px; max-width: 100%; height: 42px; padding: 0 8px; box-sizing: border-box; border: 1px solid #6c757d; border-radius: 10px; font-size: 20px; line-height: 40px; color: #333333; background: #ffffff; outline: none; }
.lost-password-view .lost-password-form input[type="text"]:focus               { border-color: #34495e; }
.lost-password-view .lost-password-hint                                        { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #d9534f; }
.lost-password-view .lost-password-recaptcha                                   { display: inline-block; transform-origin: left top; }
.lost-password-view .lost-password-submit                                      { display: block; width: 320px; max-width: 100%; height: 42px; margin: 8px auto 0; padding: 0 16px; box-sizing: border-box; border: none; border-radius: 10px; background: #34495e; color: #ffffff; font-size: 16px; letter-spacing: 0.12em; cursor: pointer; text-align: center; line-height: 42px; }
.lost-password-view .lost-password-submit:hover,
.lost-password-view .lost-password-submit:focus                                { opacity: 0.92; }
.lost-password-view .lost-password-submit:disabled                             { opacity: 0.6; cursor: default; }
.lost-password-view .lost-password-message                                     { margin: 12px 0 0; text-align: center; font-size: 14px; color: #d9534f; line-height: 1.5; white-space: pre-wrap; }
.lost-password-view .lost-password-back-link                                   { margin: 24px 0 0; text-align: center; font-size: 14px; }
.lost-password-view .lost-password-back-link a                                 { color: #d9534f; text-decoration: underline; }


/* ==========================================================
 * 利用規約画面
 * ========================================================== */

.terms-view .terms-main                                                        { flex: 1 0 auto; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px 40px; box-sizing: border-box; text-align: center; }
.terms-view .terms-title                                                       { margin: 40px 0; padding: 0; width: auto; max-width: 90%; font-size: 20px; font-weight: 700; line-height: 1.4; color: #333333; text-align: center; }
.terms-view .terms-frame-wrap                                                  { width: 100%; max-width: 900px; margin: 0 auto 24px; border: 1px solid #cfcfcf; background: #ffffff; box-sizing: border-box; }
.terms-view .terms-frame                                                       { display: block; width: 100%; height: 420px; border: 0; padding: 0; background: #ffffff; }
.terms-view .terms-back                                                        { display: block; width: 320px; max-width: 100%; height: 42px; margin: 8px auto 0; padding: 0 16px; box-sizing: border-box; border: none; border-radius: 10px; background: #34495e; color: #ffffff; font-size: 16px; letter-spacing: 0.12em; cursor: pointer; text-align: center; line-height: 42px; text-decoration: none; }
.terms-view .terms-back:hover,
.terms-view .terms-back:focus                                                  { opacity: 0.92; }


/* ==========================================================
 * モバイル（380px 想定）
 * 実機の CSS px は 390〜430 が多いため、少し余裕を持たせる
 * ========================================================== */

@media screen and (max-width: 480px) {
	/* ログイン画面 */
	.login-view .login-logo                                                    { margin: 44px auto 40px; }
	.login-view .login-main                                                    { padding: 0 16px 32px; }
	.login-view .login-form,
	.login-view .login-form input[type="text"],
	.login-view .login-form input[type="password"],
	.login-view .login-submit                                                  { width: 100%; }
	.login-view .login-info-list                                               { max-height: 220px; }
	.login-view .login-ext-links                                               { flex-direction: column; align-items: stretch; }
	.login-view .login-ext-primary,
	.login-view .login-ext-support                                             { width: 100%; }

	/* パスワード再設定メール送信画面 */
	.lost-password-view .auth-corp-header                                      { margin: 44px auto 20px; }
	.lost-password-view .auth-corp-logo                                        { margin-left: auto !important; margin-right: auto !important; }
	.lost-password-view .lost-password-title                                   { margin: 20px auto 40px; }
	.lost-password-view .lost-password-main                                    { padding: 0 16px 32px; }
	.lost-password-view .lost-password-form,
	.lost-password-view .lost-password-form input[type="text"],
	.lost-password-view .lost-password-submit                                  { width: 100%; }
	.lost-password-view .lost-password-recaptcha                               { transform: scale(0.92); }

	/* 利用規約画面 */
	.terms-view .auth-corp-header                                              { margin: 44px auto 20px; }
	.terms-view .auth-corp-logo                                                { margin-left: auto !important; margin-right: auto !important; }
	.terms-view .terms-title                                                   { margin: 20px auto 40px; }
	.terms-view .terms-main                                                    { padding: 0 16px 32px; }
	.terms-view .terms-frame                                                   { height: 320px; }
	.terms-view .terms-back                                                    { width: 100%; }

	/* 共通: 企業ロゴヘッダー */
	.auth-corp-header                                                          { padding: 0 16px 8px; }
}