/* 霧越観測所ファミリー共通スタイル（明るい"本物の個人記録サイト"トーン） */
:root{
  --bg:#e9ebe4; --paper:#f6f5ee; --ink:#2b3138; --sub:#6a7079; --line:#d8d6c8;
  --bar:#465561; --bar2:#7d8a80; --accent:#3a6a7a; --news:#eae7d8; --warn:#9a6b46;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","MS PGothic",sans-serif; font-size:15px; line-height:1.9; }
a{ color:var(--accent); }
.site{ max-width:840px; margin:0 auto; background:var(--paper); border-left:1px solid var(--line); border-right:1px solid var(--line); }
.topbar{ background:var(--bar); height:8px; }
.head{ display:flex; justify-content:space-between; align-items:center; padding:14px 20px; flex-wrap:wrap; gap:10px; }
.brand{ font-size:21px; letter-spacing:2px; }
.brand small{ display:block; font-size:11px; color:var(--sub); letter-spacing:1px; }
.search{ display:flex; gap:0; }
.search input{ border:1px solid var(--line); border-right:0; padding:7px 10px; font-family:inherit; font-size:13px; width:200px; background:#fff; }
.search button{ border:1px solid var(--line); background:#eef0ea; padding:7px 12px; font-family:inherit; cursor:pointer; }
.nav{ background:var(--bar2); display:flex; flex-wrap:wrap; }
.nav a{ color:#f4f2e8; text-decoration:none; padding:10px 16px; font-size:14px; border-left:1px solid rgba(255,255,255,.15); }
.nav a:hover{ background:rgba(0,0,0,.12); }
.wrap{ padding:18px 22px 40px; }
.news{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); background:var(--paper); padding:0; margin:0 0 20px; }
.news .lbl{ background:var(--bar); color:#fff; padding:8px 14px; font-size:13px; white-space:nowrap; }
.news .body{ padding:8px 12px; font-size:13px; }
.hero{ border:1px solid var(--line); background:linear-gradient(0deg,#e5e7df,#eef0e8); padding:34px 22px; text-align:center; margin:0 0 22px; }
.hero .t{ font-size:22px; letter-spacing:3px; font-family:"Hiragino Mincho ProN","MS PMincho",serif; }
.hero .s{ font-size:13px; color:var(--sub); margin-top:8px; }
h2{ font-size:16px; border-left:8px solid var(--bar2); background:#eceadd; padding:5px 12px; margin:26px 0 12px; font-weight:500; }
.lead{ color:#3a4048; }
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.card{ border:1px solid var(--line); background:#fbfaf3; padding:12px 14px; }
.card h3{ margin:0 0 4px; font-size:15px; font-weight:500; }
.card .meta{ font-size:12px; color:var(--sub); }
.card.dead{ color:#9a978a; }
.card.dead a{ color:#9a978a; }
.tag{ display:inline-block; font-size:11px; padding:1px 7px; border:1px solid var(--line); background:#eef0ea; color:var(--sub); margin-left:6px; }
.tag.now{ background:#e7efe6; border-color:#a9c3a6; color:#3c6b3c; }
.tag.dead{ background:#efe7e0; color:#9a6b46; }
ul.plain{ margin:6px 0; padding-left:1.2em; }
.meterbox{ float:right; border:1px solid var(--line); background:#eef0ea; padding:6px 10px; font-size:12px; color:var(--sub); margin:0 0 8px 12px; }
.meterbox b{ color:var(--accent); font-weight:normal; }
.foot{ border-top:1px solid var(--line); margin-top:34px; padding:12px 22px; font-size:11px; color:var(--sub); display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; background:#efeee6; }
.counter{ font-family:monospace; letter-spacing:1px; }
.backhome{ font-size:12px; color:var(--sub); margin-bottom:10px; }
@media(max-width:560px){ .cards{ grid-template-columns:1fr; } .search input{ width:130px; } }