/* style.css - 町内会版（60代にも見やすいUI） */
:root{
  --bg:#f7f7fb; --fg:#222; --primary:#0b6efd; --card:#fff; --muted:#566;
  --accent:#16a34a; --danger:#d11; --radius:14px;
  --shadow:0 6px 20px rgba(0,0,0,0.08);
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --base:18px; --big:20px;
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:var(--base); line-height:1.8; }
.container{ max-width:1100px; margin:0 auto; padding: clamp(12px,3vw,24px); }

.topbar{ position: sticky; top:0; z-index:1000; display:flex; align-items:center; gap:12px; padding:10px 14px; background:#fff; box-shadow: var(--shadow); }
.brand{ font-size: clamp(20px, 2.8vw, 26px); font-weight:700; }
.hamburger{ width:44px; height:44px; display:grid; place-items:center; border:none; background:transparent; cursor:pointer; }
.hamburger span{ display:block; width:24px; height:2.5px; background:var(--fg); margin:4px 0; border-radius:2px; }
.nav-drawer{ position:fixed; left:-280px; top:0; width:260px; height:100vh; background:#fff; padding:18px; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:12px; transition:left .25s ease; }
.nav-drawer a{ text-decoration:none; color:var(--fg); padding:10px 12px; border-radius:10px; }
.nav-drawer a:hover{ background:#f0f3ff; }
.nav-open .nav-drawer{ left:0; }
.nav-open .hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-open .hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-open .hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.card{ background:var(--card); border-radius:var(--radius); padding:clamp(14px,2.5vw,22px); box-shadow: var(--shadow); margin: 14px 0; }
.btn{ display:inline-block; background:var(--primary); color:#fff; text-decoration:none; padding:14px 22px; border-radius:12px; border:none; cursor:pointer; font-size:var(--big); }
.btn:hover{ filter: brightness(1.05); }
.btn.secondary{ background:#6c757d; }
.btn.ghost{ background:#e9eefb; color:#123; }
.input, select, textarea{ width:100%; padding:14px 16px; border:1px solid #d7dce6; border-radius:12px; background:#fff; font-size:var(--big); }
label{ display:block; margin:10px 0 6px; color:var(--muted); }
.grid{ display:grid; gap:14px; }
.grid.cols-2{ grid-template-columns: repeat(2,1fr); }
.grid.cols-3{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 880px){ .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr; } }
.table{ width:100%; border-collapse: collapse; background:#fff; border-radius:12px; overflow:hidden; }
.table th, .table td{ padding:12px; border-bottom:1px solid #e6e8ef; }
.table th{ text-align:left; color:#555; }
.notice{ color:#155724; background:#d4edda; padding:10px 12px; border-radius:10px; }
.error{ color:#721c24; background:#f8d7da; padding:10px 12px; border-radius:10px; }
.footer{ padding:20px; text-align:center; color:#667; }
.mobile-tabbar{ position: fixed; bottom:0; left:0; right:0; background:#fff; display:none; justify-content:space-around; align-items:center; padding:6px 8px 8px; box-shadow: 0 -6px 20px rgba(0,0,0,0.08); }
.mobile-tabbar a{ text-decoration:none; color:#111; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:14px; }
.mobile-tabbar span{ font-size:22px; line-height:1; }
@media (max-width: 768px){ .mobile-tabbar{ display:flex; } }
button, .btn, .input{ min-height: 44px; }
a, button{ -webkit-tap-highlight-color: transparent; }