:root{color-scheme:light;--ink:#1d1c1d;--muted:#6b6a6b;--line:#e3dfe3;--aubergine:#4a154b}
*{box-sizing:border-box}
body.login{margin:0;min-height:100svh;display:grid;place-items:center;padding:24px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif;color:var(--ink);
  background:radial-gradient(900px 520px at 50% -10%,#e9f3ff 0%,rgba(233,243,255,0) 62%),
             radial-gradient(700px 460px at 88% 108%,#f3e9f4 0%,rgba(243,233,244,0) 60%),#f6f5f7}
.card{width:min(400px,100%);background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:44px 36px 40px;text-align:center;box-shadow:0 1px 2px rgba(29,28,29,.06),0 18px 48px rgba(63,14,64,.10)}
.mark{line-height:0;margin-bottom:18px}
.tear{filter:drop-shadow(0 6px 12px rgba(31,111,208,.28))}
h1{margin:0 0 28px;font-size:26px;font-weight:800;letter-spacing:.02em}
.notice-title{font-size:20px;font-weight:700;letter-spacing:0}
.lead{margin:12px 0 26px;color:var(--muted);font-size:14px;line-height:1.85}
.slack-login{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;width:100%;
  border:1px solid #d5cfd5;border-radius:10px;background:#fff;color:var(--ink);
  font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
.slack-login span{line-height:1}
.slack-mark{flex:0 0 auto;display:block}
.slack-login:hover{background:#fbfafb;border-color:var(--aubergine);box-shadow:0 6px 18px rgba(74,21,75,.14)}
.slack-login:active{transform:translateY(1px)}
.slack-login:focus-visible{outline:3px solid #70b9f2;outline-offset:2px}
.note{margin:20px 0 0;color:var(--muted);font-size:12px;line-height:1.8;text-align:left}
.foot{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line);color:#8d8b8d;font-size:11px;letter-spacing:.02em}
@media(max-width:420px){.card{padding:34px 22px 26px;border-radius:16px}h1{font-size:24px}}