:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Meiryo", sans-serif; color: #303745; background: #f3f6fa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: linear-gradient(110deg, #eff4fb, #f8f9fb); font-size: 14px; line-height: 1.5; }
.login-box { width: 420px; max-width: 100%; }
body.login-service-first { padding-bottom: 132px; }
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand h1 { margin: 0; }
.icon { width: 18px; height: 18px; vertical-align: -3px; }
.login-company { margin-top: 22px; padding-top: 18px; border-top: 1px solid #edf0f5; text-align: center; }
.login-logo { display: block; width: 72%; max-width: 250px; height: auto; margin: 0 auto; }
.login-brand .login-logo { width: 100%; max-width: 380px; }
.login-service-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 auto 9px; }
.login-mascot { display: block; flex: 0 0 auto; width: 92px; height: 108px; object-fit: contain; }
.login-company .login-mascot { width: 70px; height: 82px; }
.login-company .login-service-name { font-size: 30px; }
.login-service-name { margin: 0; color: #235c9e; font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "MS PMincho", "MS Mincho", serif; font-size: clamp(25px, 7.5vw, 38px); font-weight: 600; letter-spacing: .04em; line-height: 1.4; white-space: nowrap; }
.login-brand p, .login-company p { margin: 0; color: #8795a7; font-size: 13px; }
.login-card { background: #fff; border: 1px solid #e0e3e8; border-radius: 5px; padding: 20px; box-shadow: 0 1px 2px #00000021; }
.company-box { text-align: center; background: #f4f8ff; border: 1px solid #d4e0f4; border-radius: 4px; padding: 17px 12px; margin-bottom: 20px; }
.company-box h2 { margin: 0 0 4px; color: #2d5f9f; font-size: 20px; font-weight: 700; }
.company-box p { color: #8291a4; font-size: 13px; margin: 0; }
.input-group { display: flex; height: 38px; margin-bottom: 16px; border: 1px solid #cbd0d9; border-radius: 4px; overflow: hidden; }
.input-group:focus-within { border-color: #7196ef; box-shadow: 0 0 0 3px #476aff20; }
.input-group input { min-width: 0; width: 100%; border: 0; outline: 0; padding: 8px 12px; background: #f5f7fc; color: #303745; font: inherit; }
.input-group input::placeholder { color: #9098a5; }
.input-icon { width: 38px; flex-shrink: 0; display: grid; place-items: center; color: #7a7a7a; background: #fff; }
.login-button { display: block; width: 100%; min-height: 38px; border: 1px solid #4769ff; border-radius: 4px; background: #4769ff; color: white; cursor: pointer; font: inherit; font-size: 16px; }
.login-button:hover { background: #3658ed; }
.login-button .icon { margin-right: 4px; }
.login-button:focus-visible, summary:focus-visible { outline: 3px solid #96b3ff; outline-offset: 3px; }
.password-help { text-align: center; margin-top: 16px; color: #4769ff; }
.password-help summary { display: inline-block; cursor: pointer; font-size: 14px; list-style: none; }
.password-help summary::-webkit-details-marker { display: none; }
.password-help summary:hover { text-decoration: underline; }
.password-help a { color: #4769ff; text-decoration: none; }
.password-help a:hover { text-decoration: underline; }
.password-help p { margin: 12px 0 0; font-size: 13px; color: #6b7789; text-align: left; }
.login-error { padding: 10px 12px; margin: 0 0 16px; border: 1px solid #efc5c5; background: #fff3f3; color: #a73232; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.customer-name { margin: 0 0 20px; text-align: center; }
@media (max-width: 480px) { body { padding: 24px 16px; } .login-mascot { width: 74px; height: 90px; } .login-service-brand { gap: 4px; } .login-company .login-mascot { width: 58px; height: 70px; } .login-company .login-service-name { font-size: clamp(20px, 5.8vw, 26px); } }
@media (max-width: 480px), (max-height: 700px) { body.login-service-first { padding-bottom: 48px; } }
/* Supplied image layout; retain the existing fields and login-button styling. */
.login-provided-design { background: #f6f8fb; }
.login-provided-design .login-box { width: 440px; }
.login-provided-design .login-card { padding: 26px 28px 20px; background: #fff; }
.login-provided-design .login-brand { margin-bottom: 24px; }
.login-service-logo { display: block; width: 175px; max-width: 85%; height: auto; margin: 0 auto; }
.login-provided-design .login-audience { margin: 10px 0 0; color: #6b7789; font-size: 14px; font-weight: 400; }
.password-toggle { border: 0; padding: 0; cursor: pointer; }
.password-toggle:hover { color: #235c9e; }
.password-toggle:focus-visible { outline: 2px solid #4769ff; outline-offset: -3px; }
.password-toggle.is-visible { color: #235c9e; background: #eef3ff; }
.login-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin: 0 0 24px; font-size: 12px; }
.remember-login { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.remember-login input { width: 16px; height: 16px; margin: 0; accent-color: #4769ff; }
.login-options a { color: #4769ff; text-decoration: none; }
.login-options a:hover { text-decoration: underline; }
.login-character { margin-top: 24px; text-align: center; }
.login-character img { display: block; width: 84px; max-width: 100%; height: auto; margin: 0 auto; }
.login-service-logo, .login-character img { filter: brightness(1.04); }
@media (max-width: 480px) { .login-provided-design .login-card { padding: 24px 20px 18px; } .login-provided-design .login-options { font-size: 11px; } }

/* Customer login: rounded teal button matching the supplied visual reference. */
.login-provided-design .login-button { display: flex; align-items: center; justify-content: center; gap: 7px; width: min(220px, 100%); min-height: 40px; margin: 0 auto; padding: 7px 24px; border: 1px solid #659cb1; border-radius: 999px; background: linear-gradient(180deg, #82b6c9 0%, #347b94 30%, #27647e 55%, #488ba2 100%); box-shadow: inset 0 1px 0 #ffffffa6, inset 0 -1px 0 #21566b40, 0 2px 4px #31495740; color: #fff; font-size: 15px; font-weight: 500; line-height: 1.4; text-shadow: 0 1px 1px #15465b66; transition: box-shadow .15s, filter .15s; }
.login-provided-design .login-button .icon { flex-shrink: 0; margin: 0; width: 18px; height: 18px; stroke-width: 1.8; }
.login-provided-design .login-button:hover { background: linear-gradient(180deg, #91c0d1 0%, #3d849c 30%, #2c6c85 55%, #5194aa 100%); box-shadow: inset 0 1px 0 #ffffffb3, 0 3px 6px #3149574d; }
.login-provided-design .login-button:active { box-shadow: inset 0 2px 4px #153f5359; }
.login-provided-design .login-button:focus-visible { outline: 3px solid #24647d; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .login-provided-design .login-button { transition: none; } }