/* 選択されたログイン案１。認証の処理は既存の login.js を使用する。 */
:root { color-scheme:light; --ink:#083438; --muted:#59636b; --green:#08754e; --line:#ced3d5; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { font-family:"Yu Gothic UI","Meiryo",system-ui,sans-serif; color:var(--ink); background:#fff; line-height:1.6; }
.login-layout { min-height:100vh; min-height:100svh; display:grid; grid-template-columns:60% 40%; }
.visual { position:relative; min-height:100vh; min-width:0; background:#e8f3e5; overflow:hidden; display:grid; }
.visual img { position:absolute; inset:0; width:100%; height:100%; min-height:0; object-fit:cover; object-position:center; display:block; }
.form-panel { display:flex; align-items:center; justify-content:center; padding:44px 40px; }
.form-content { width:100%; max-width:480px; }
header { text-align:center; margin:0 0 42px; }
.app-mark { display:block; width:112px; height:112px; object-fit:contain; margin:0 auto 20px; }
h1 { font-size:clamp(19px,2.28vw,34px); font-weight:700; line-height:1.5; margin:0 0 6px; letter-spacing:-.04em; white-space:nowrap; }
h2 { font-size:36px; line-height:1.4; letter-spacing:.08em; margin:0; font-weight:700; }
label { display:block; color:var(--muted); font-size:17px; font-weight:600; margin:0 0 8px; }
input { display:block; width:100%; height:60px; padding:12px 16px; border:1.5px solid var(--line); border-radius:7px; font:inherit; font-size:18px; color:var(--ink); background:#fff; }
input:focus { outline:3px solid #9ccbaf; outline-offset:2px; border-color:var(--green); }
.field-help { margin:7px 0 24px; color:var(--muted); font-size:12px; }
button { display:block; width:100%; height:68px; margin:26px 0 0; border:1px solid var(--green); border-radius:7px; background:var(--green); color:#fff; font:inherit; font-size:24px; font-weight:700; cursor:pointer; letter-spacing:.06em; }
button:hover { background:#056441; }
button:focus-visible { outline:3px solid #5eae81; outline-offset:4px; }
button:disabled { opacity:.65; cursor:progress; }
#message { margin:12px 0 0; min-height:24px; color:#b3261e; font-size:14px; overflow-wrap:anywhere; }
footer { border-top:1px solid #e0e4e5; padding-top:24px; margin-top:4px; font-size:16px; color:var(--muted); line-height:1.8; }
.mobile-break { display:none; }
@media (min-width:1700px) { .visual img { object-fit:contain; } }
@media (max-width:1100px) and (min-width:761px) {
  .login-layout { grid-template-columns:54% 46%; }
  .form-panel { padding:40px 28px; }
  h1 { font-size:21px; white-space:normal; }
  header { margin-bottom:32px; }
}
@media (max-width:760px) {
  .login-layout { display:flex; flex-direction:column; }
  .form-panel { order:-1; padding:28px 24px 32px; }
  .form-content { max-width:420px; }
  header { margin-bottom:24px; }
  .app-mark { width:72px; height:72px; margin-bottom:8px; }
  h1 { font-size:21px; white-space:normal; letter-spacing:-.025em; }
  h2 { font-size:27px; margin-top:5px; }
  label { font-size:15px; }
  input { height:52px; font-size:16px; }
  .field-help { font-size:11px; margin-bottom:20px; }
  button { height:54px; font-size:19px; margin-top:24px; }
  footer { font-size:12px; padding-top:18px; text-align:center; }
  .visual { min-height:0; }
  .visual img { position:static; min-height:0; height:auto; object-fit:contain; }
  .mobile-break { display:block; }
}
@media (max-width:350px) { .form-panel { padding-inline:18px; } h1 { font-size:19px; } }