@charset "utf-8";

.login-react-body {
	--hpc-color1: #34495e;
	--hpc-color2: #F3F5F7;
	--hpc-color3: #c1c1c1;
	--text-color1: #333333;
	--text-color2: #444444;
	--container-width: 900px;
	--login-form-width: 500px;
	--login-button-width: 320px;
	--footer-height: 30px;
	--footer-color: #ffffff;
	--footer-font-size: 1rem;
}

@media screen and (max-width: 920px) {
	.login-react-body {
		--container-width: calc(100% - 20px);
	}
}
@media screen and (max-width: 500px) {
	.login-react-body {
		--footer-font-size: 0.8rem;
	}
}

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

html                                                                           { font-size: 14px; }

html,
body.login-react-body                                                          { margin: 0; padding: 0; min-height: 100%; background: #ffffff; color: var(--text-color1); 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: var(--hpc-color1); user-select: none; }
.auth-footer-copy                                                              { display: block; margin: 0 auto; border: none; padding: 0; color: var(--footer-color); font-size: var(--footer-font-size); line-height: var(--footer-height); letter-spacing: 0.1rem; white-space: nowrap; text-align: center; }
.auth-footer-copy i                                                            { margin-right: 0.5rem; font-style: normal; font-size: 2em; line-height: var(--footer-height); vertical-align: bottom; }

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

.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                                                 { width: var(--container-width); margin: 2.5rem auto; border-bottom: 2px solid var(--hpc-color1); padding-bottom: 1rem; user-select: none; }
.login-view .login-logo-header                                                 { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end; }
.login-view .login-logo                                                        { flex-grow: 0; flex-shrink: 0; margin: 0; padding: 0; border: none; }

.login-view .login-ext-links                                                   { flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem; }
.login-view .login-ext-primary                                                 { display: block; width: 120px; height: 33px; margin: 0; border: none; padding: 0; text-indent: -999999px; background: transparent url("../../../../img/hpc/limited/suketto_web_banner2.png") left top no-repeat; background-size: contain; }
.login-view .login-ext-primary:hover                                           { background-position: left bottom; }
.login-view .login-ext-support                                                 { display: block; width: 120px; height: 34px; margin: 0; border: none; padding: 0; text-indent: -999999px; background: transparent url("../../../../img/hpc/limited/spp_top.png") left top no-repeat; background-size: 120px 68px; }
.login-view .login-ext-support:hover                                           { background-position: left bottom; }

.login-view .login-main                                                        { flex: 1 0 auto; width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 0 3.5rem; box-sizing: border-box; text-align: center; }

.login-view .login-form                                                        { width: var(--login-form-width); max-width: 100%; margin: 0 auto; padding: 2.5rem 0 1.25rem; box-sizing: border-box; text-align: left; background-color: var(--hpc-color2); border-radius: 5px; }
.login-view .login-field                                                       { width: var(--login-button-width); margin: 0 auto 1.25rem; }
.login-view .login-field > label                                               { display: block; margin: 0 0 0.3rem; font-size: 1.2rem; font-weight: 400; color: var(--text-color1); }
.login-view .login-field input[type="text"],
.login-view .login-field input[type="password"]                                { display: block; width: var(--login-button-width); height: 2.75rem; padding: 0 0.5rem; box-sizing: border-box; border: 1px solid #6c757d; border-radius: 10px; font-size: 1.5rem; line-height: 2.75rem; color: var(--text-color1); background: #ffffff; outline: none; }
.login-view .login-field input[type="text"]:focus,
.login-view .login-field input[type="password"]:focus                          { border-color: var(--hpc-color1); }
.login-view .login-submit                                                      { display: block; width: var(--login-button-width); height: 2.75rem; margin: 2rem auto 0; padding: 0 1rem; box-sizing: border-box; border: none; border-radius: 10px; background-color: var(--hpc-color1); color: #ffffff; font-size: 1rem; letter-spacing: 0.12em; cursor: pointer; text-align: center; line-height: 2.75rem; }
.login-view .login-submit                                                      { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.login-view .login-submit:active                                               { box-shadow: none; }
.login-view .login-submit:disabled                                             { opacity: 0.7; cursor: default; }
.login-view .login-version                                                     { margin: 0.75rem 0 0; text-align: center; font-size: 0.75rem; color: #5b9bd5; }
.login-view .login-error                                                       { margin: 0.75rem 0 0; text-align: center; font-size: 0.85rem; color: #d9534f; line-height: 1.5; white-space: pre-wrap; }

.login-view .login-loading-mask                                                { position: fixed; z-index: 2000; top: 0; right: 0; bottom: 0; left: 0; margin: 0; padding: 0; border: none; background: rgba(0, 0, 0, 0.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; }
.login-view .login-loading-spinner                                             { width: 48px; height: 48px; box-sizing: border-box; border: 4px solid rgba(255, 255, 255, 0.35); border-top-color: #ffffff; border-radius: 50%; animation: login-spin 0.8s linear infinite; }
.login-view .login-loading-text                                                { margin: 0; color: #ffffff; font-size: 1rem; letter-spacing: 0.08em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
@keyframes login-spin                                                          { to { transform: rotate(360deg); } }

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

.login-view .login-agree                                                       { margin: 1.5rem auto 0; max-width: var(--container-width); 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: 3.5rem auto 0; max-width: 100%; text-align: left; }
.login-view .login-info > h2                                                   { margin: 0; padding: 0 0 0 0.4rem; border-left: 0.4rem solid var(--hpc-color1); font-size: 1.45rem; font-weight: 700; line-height: 1; color: var(--text-color1); }
.login-view .login-info-list                                                   { max-height: 280px; overflow-y: auto; margin: 5px 0 0 0; padding: 12px 2px; border-top: 2px solid var(--hpc-color1); border-bottom: 2px solid var(--hpc-color1); background-color: var(--hpc-color2); box-sizing: border-box; scrollbar-color: var(--hpc-color1) #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 1.25rem; font-size: 1.15rem; line-height: 1.6; color: var(--text-color2); word-break: break-word; overflow-wrap: anywhere; }
.login-view .login-info-header                                                 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0 0 0.25rem 0; }
.login-view .login-info-body                                                   { margin-left: 1.5rem; }
.login-view .login-info-date::before                                           { content: "■"; margin-right: 0.5rem; }
.login-view .login-info-new                                                    { display: inline-block; padding: 1px 0.5rem; background: #cc4444; color: #ffffff; font-size: 0.625rem; border-radius: 2px; }
.login-view .login-info-empty                                                  { margin: 0; font-size: 1.2rem; color: #888888; }

.login-view .login-meta                                                        { margin: 2rem auto 0; max-width: 100%; padding: 0.5rem 1rem; border-radius: 5px; text-align: left; }
.login-view .login-meta > h2                                                   { margin: 0 0 0.5rem; padding: 0 0 0.5rem; font-size: 1.45rem; font-weight: 700; }
.login-view .login-meta > p                                                    { margin: 0.75rem 0 0; font-size: 1.15rem; line-height: 1.7; color: var(--text-color2); letter-spacing: -0.05rem; }
.login-view .login-meta a                                                      { color: #2f80c2; text-decoration: underline; }
.login-view .login-meta1                                                       { background-color: var(--hpc-color2); border: 1px solid var(--hpc-color3); }
.login-view .login-meta1 > h2                                                  { border-bottom: 1px solid var(--hpc-color3); color: var(--text-color1); }
.login-view .login-meta1 > p                                                   { color: var(--text-color2); }
.login-view .login-meta2                                                       { background-color: var(--hpc-color1); border: none; }
.login-view .login-meta2 > h2                                                  { border-bottom: 1px solid var(--hpc-color2); color: var(--hpc-color2); }
.login-view .login-meta2 > p                                                   { color: var(--hpc-color2); }

.login-view .login-main .login-ext-links                                       { display: none; }

@media screen and (max-width: 500px) {
	.login-view .login-logo-header                                             { border: none; justify-content: center; }
	.login-view .login-logo-header .login-ext-links                            { display: none; }

	.login-view .login-form                                                    { padding: 0; width: 100%; background-color: transparent; }
	.login-view .login-field                                                   { width: 100%; }
	.login-view .login-field input[type="text"],
	.login-view .login-field input[type="password"]                            { width: 100%; }
	.login-view .login-submit                                                  { width: 100%; }

	.login-view .login-info > h2                                               { border: 0; padding: 0; }
	.login-view .login-info-list                                               { border-top: 1px solid var(--hpc-color3); border-bottom: 1px solid var(--hpc-color3); background-color: transparent; }

	.login-view .login-meta                                                    { background-color: transparent; border: none; padding: 0; }
	.login-view .login-meta > h2                                               { color: var(--text-color1); border-bottom: 1px solid var(--text-color1); }
	.login-view .login-meta > p                                                { color: var(--text-color1); }

	.login-view .login-main .login-ext-links                                   { margin: 40px auto 0; display: flex; justify-content: flex-start; }
	.login-view .login-ext-primary                                             { width: 180px; height: 50px; }
	.login-view .login-ext-support                                             { width: 180px; height: 50px; background-size: 180px 100px; }
}

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

.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: 500px) {

	/* パスワード再設定メール送信画面 */
	.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; }
}