/* /70_pass/css/portal.css */

:root{
  --bg:#f2f4f7;
  --card:#ffffff;
  --bd:#d9dee6;
  --text:#111827;
  --muted:#475467;
  --muted2:#667085;
  --shadow: 0 8px 24px rgba(16,24,40,.08);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, "Yu Gothic UI", "Meiryo", sans-serif;
  background:var(--bg);
  color:var(--text);
}

.wrap{
  max-width: 860px;
  margin: 18px auto;
  padding: 0 14px;
}

.hd{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:14px;
  padding:16px 18px;
  box-shadow: var(--shadow);
  margin-bottom:12px;
}

.title{
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 6px 0;
}

.sub{
  font-size: 13px;
  color:var(--muted);
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.sub a{ color:#2563eb; text-decoration:none; }
.sub a:hover{ text-decoration:underline; }

.chip{
  margin-left:auto;
  font-size:12px;
  border:1px solid #e5e7eb;
  background:#f8fafc;
  padding:4px 10px;
  border-radius:999px;
  color:var(--muted);
}

.card{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:14px;
  padding:16px 18px;
  box-shadow: var(--shadow);
}

.portal-note{
  font-size:13px;
  color:var(--muted);
  background:#f8fafc;
  border:1px solid #e5e7eb;
  padding:10px 12px;
  border-radius:12px;
  margin-bottom:14px;
}

.notice{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #fecaca;
  background:#fff5f5;
  color:#991b1b;
  font-weight:800;
  margin: 10px 0;
}

.category{
  margin: 14px 0 10px;
}

.category h3{
  margin: 0 0 10px;
  font-size: 14px;
  color:#0f172a;
  font-weight: 900;
}

.menu{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #cfd6df;
  background:#fff;
  text-decoration:none;
  font-weight: 900;
  color:#111827;
  transition: transform .04s ease, box-shadow .15s ease, border-color .15s ease;
}

.menu-btn:hover{
  border-color:#2563eb;
  box-shadow: 0 10px 22px rgba(37,99,235,.10);
  transform: translateY(-1px);
}

.menu-btn:active{
  transform: translateY(0);
  box-shadow:none;
}

.menu-btn.green{ border-color:#86efac; color:#166534; background:#f0fdf4; }
.menu-btn.blue { border-color:#93c5fd; color:#1e40af; background:#eff6ff; }
.menu-btn.red  { border-color:#fca5a5; color:#991b1b; background:#fff5f5; }
.menu-btn.gray { border-color:#d1d5db; color:#334155; background:#f8fafc; }

.footnote{
  margin-top:14px;
  font-size:12px;
  color:var(--muted2);
}