:root { --navy:#19448e; --navy2:#2e58a6; --ink:#22293B; --mut:#5A6478; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Meiryo UI","Segoe UI",sans-serif; color:var(--ink); background:#fff; }
header { background:var(--navy); color:#fff; padding:18px 28px; display:flex; align-items:center; }
header h1 { font-size:1.15rem; margin:0; font-weight:700; }
.brand { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.logo { height:30px; width:auto; display:block; background:#fff; padding:6px 10px; border-radius:6px; max-width:100%; }
main { max-width:1080px; margin:0 auto; padding:36px 24px 60px; }
footer { text-align:center; color:var(--mut); font-size:.75rem; padding:24px; }
.login { max-width:460px; margin:60px auto; text-align:center; }
.login .mark { font-size:3rem; line-height:1; margin-bottom:18px; }
.login h2 { margin:0 0 12px; color:var(--navy); }
.login p { color:var(--mut); font-size:.9rem; line-height:1.7; margin:0 0 28px; }
.btn-signin { display:inline-block; background:var(--navy); color:#fff; text-decoration:none;
  padding:14px 30px; border-radius:8px; font-weight:700; font-size:1rem; }
.btn-signin:hover { background:var(--navy2); }
.btn-signin:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.alert { background:#FDECEA; color:#8A2A1B; border-radius:8px; padding:12px 16px; font-size:.85rem; margin:0 0 20px; }
@media (max-width:480px) { header { padding:16px; } main { padding:24px 16px 40px; } .login { margin:40px auto; } }