/* ===== 有明海サイト デザインシステム（提案書 v2 のトークンを踏襲） ===== */
:root{
  --paper:#F6FAFB; --paper-raised:#FFFFFF; --ink:#16242B; --ink-soft:#57707A;
  --line:#D6E6EA; --tide:#1E7A9C; --tide-soft:#E1F1F5; --mud:#8B5A32; --mud-soft:#F3E6D2;
  --sky:#64809A; --sky-soft:#E6EEF2; --warn:#9E3D28; --warn-soft:#F1DCD3; --sun:#C98A2E; --sun-soft:#F3E3C6;
  --radius:8px; --shadow:0 1px 3px rgba(22,36,43,.10);
  --font-display:'Shippori Mincho',serif; --font-body:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.8; font-size:16px; -webkit-font-smoothing:antialiased;}
img,svg{max-width:100%;}
a{color:var(--tide); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.4; margin:0 0 .5em;}
.wrap{max-width:720px; margin:0 auto; padding:0 18px;}
p{margin:0 0 14px;}

/* ---- header / nav ---- */
.site-header{background:var(--paper-raised); border-bottom:1px solid var(--line); padding:14px 0;}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink);}
.brand small{display:block; font-family:var(--font-body); font-size:10.5px; color:var(--ink-soft); font-weight:400;}
.navtoggle{display:none;}
.mainnav{display:flex; gap:2px; overflow-x:auto; padding:0 0 2px; -webkit-overflow-scrolling:touch;}
.mainnav a{white-space:nowrap; font-size:13px; font-weight:700; padding:8px 12px; border-radius:999px; color:var(--ink-soft);}
.mainnav a.active, .mainnav a:hover{background:var(--tide-soft); color:var(--tide); text-decoration:none;}
.subnav-row{border-bottom:1px solid var(--line); background:var(--paper); position:relative;}
.subnav-row::after{content:""; position:absolute; right:0; top:0; bottom:2px; width:26px; background:linear-gradient(to right, transparent, var(--paper)); pointer-events:none;}

/* ---- hero / page head ---- */
.pagehead{padding:26px 0 6px;}
.pagehead .eyebrow{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--tide); font-weight:700;}
.pagehead h1{font-size:clamp(22px,6vw,30px); margin-top:6px;}
.pagehead .lede{color:var(--ink-soft); font-size:14.5px; max-width:56ch;}

main{padding-bottom:60px;}
section.block{padding:26px 0;}
section.block + section.block{border-top:1px solid var(--line);}
h2.block-title{font-size:19px; display:flex; align-items:baseline; gap:8px;}
h2.block-title .no{font-family:var(--font-mono); font-size:12px; color:var(--tide); font-weight:600;}
h3.sub-title{font-size:15.5px; margin-top:26px;}

/* ---- location chooser ---- */
.locrow{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
.locbtn{flex:0 0 auto; font-family:var(--font-body); font-size:13px; font-weight:700; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink);}
.locbtn.sel{background:var(--tide); border-color:var(--tide); color:#fff;}

/* ---- priority stat tiers (mobile-first: tier1/2 always visible, tier3 in <details>) ---- */
.stat-hero{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
.stat-hero .stat{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:16px; text-align:center;}
.stat-hero .stat .v{font-family:var(--font-mono); font-size:clamp(22px,6vw,28px); font-weight:600; color:var(--tide);}
.stat-hero .stat .l{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}
.today-line{margin-top:14px; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; font-size:13.6px; display:flex; gap:10px; align-items:center;}
.today-photo{background:repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 10px); border-radius:6px; height:120px; margin-top:12px;}

details.more{margin-top:14px;}
details.more > summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--tide); background:var(--tide-soft); border-radius:999px; padding:9px 16px;}
details.more > summary::-webkit-details-marker{display:none;}
details.more[open] > summary::after{content:"▴";}
details.more > summary::after{content:"▾"; font-size:10px;}
.stat-grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px;}
.stat-grid3 .stat{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:10px; text-align:center;}
.stat-grid3 .stat .v{font-family:var(--font-mono); font-size:15px; font-weight:600;}
.stat-grid3 .stat .l{font-size:10px; color:var(--ink-soft); margin-top:2px;}

/* ---- guide character speech ---- */
.guide-row{display:flex; gap:14px; align-items:center; margin-top:18px;}
.guide-row .gicon{flex:0 0 auto; width:54px; height:54px;}
.speech-bubble{background:var(--tide-soft); border:1px solid var(--tide); border-radius:14px 14px 14px 4px; padding:10px 14px; font-size:13.6px; font-weight:700;}

/* ---- zukan ---- */
.collect-meter{margin-top:8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); padding:12px 16px;}
.collect-meter .cm-top{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft);}
.collect-meter .cm-top b{font-family:var(--font-mono); color:var(--tide); font-size:15px;}
.meter-track{margin-top:6px; height:8px; border-radius:999px; background:var(--tide-soft); overflow:hidden;}
.meter-fill{height:100%; background:var(--tide); border-radius:999px;}
.zukan-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;}
@media(min-width:560px){.zukan-grid{grid-template-columns:repeat(3,1fr);}}
.zcard{border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); overflow:hidden; text-decoration:none !important;}
.zcard .zph{height:84px; position:relative;}
.zcard .zicon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.zcard .zicon svg{width:42px; height:42px;}
.zcard .zbody{padding:10px 12px;}
.zcard .zname{font-weight:700; font-size:13px;}
.zcard .zlatin{font-size:10px; color:var(--ink-soft); font-style:italic; font-family:var(--font-mono);}
.badge{display:inline-flex; font-size:10px; font-weight:700; border-radius:4px; padding:2px 7px; font-family:var(--font-mono); margin-top:5px;}
.badge--new{background:var(--tide-soft); color:var(--tide);}
.badge--seen{background:var(--mud-soft); color:var(--mud);}
.badge--season{background:var(--sky-soft); color:var(--sky);}
.badge--survey{background:transparent; color:var(--ink-soft); border:1px dashed var(--line);}
.badge--first{background:var(--sun-soft); color:var(--sun);}
.zcard .zmeta{margin-top:5px; font-size:10px; color:var(--ink-soft); font-family:var(--font-mono);}
.freq{margin-top:6px; display:inline-flex; font-size:10px; font-weight:700; font-family:var(--font-mono); border-radius:4px; padding:2px 7px;}
.freq--often{background:var(--tide-soft); color:var(--tide);}
.freq--some{background:var(--sky-soft); color:var(--sky);}
.freq--rare{background:var(--sun-soft); color:var(--sun);}
.zcard .zfact{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:11px; line-height:1.55;}

/* ---- record cards (mobile-first "table as cards": 365-day, asari, typhoon) ---- */
.rec-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); padding:14px 16px; margin-top:10px;}
.rec-card .rec-date{font-family:var(--font-mono); font-size:12px; color:var(--tide); font-weight:700;}
.rec-card dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:8px 0 0; font-size:13px;}
.rec-card dt{color:var(--ink-soft);}
.rec-card dd{margin:0; font-family:var(--font-mono);}
.rec-card .rec-note{margin-top:8px; font-size:12.5px; color:var(--ink-soft); font-family:var(--font-body);}

.status-pill{display:inline-flex; font-size:10.5px; font-family:var(--font-mono); border-radius:3px; padding:2px 7px; font-weight:700;}
.status-pill.kakutei{background:var(--tide-soft); color:var(--tide);}
.status-pill.sokuho{background:var(--sun-soft); color:var(--sun);}

.datatag{display:inline-flex; font-size:10px; font-family:var(--font-mono); font-weight:700; border-radius:3px; padding:2px 7px;}
.datatag.public{background:var(--sky-soft); color:var(--sky);}
.datatag.observed{background:var(--tide-soft); color:var(--tide);}

figure{margin:20px 0 0;}
figure svg{display:block; margin:0 auto; width:100%; height:auto;}
figcaption{margin-top:10px; font-size:12px; color:var(--ink-soft); text-align:center;}

.table-wrap{overflow-x:auto; margin-top:14px;}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:420px;}
th,td{text-align:left; padding:8px 12px; border-bottom:1px solid var(--line);}
thead th{background:var(--paper-raised); font-size:11px; color:var(--ink-soft); font-family:var(--font-mono);}

.langpair{margin-top:14px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.langpair .simple{padding:14px 16px; background:var(--tide-soft); font-size:14.5px;}
.langpair .detail{padding:12px 16px; border-top:1px dashed var(--line); font-size:12.6px; color:var(--ink-soft);}
.langpair .lbl{font-family:var(--font-mono); font-size:10px; font-weight:700; display:block; margin-bottom:4px;}

.notice{background:var(--sun-soft); border:1px solid var(--sun); border-radius:var(--radius); padding:12px 16px; font-size:12.8px; margin-top:16px;}
.notice-box{background:var(--sun-soft); border:1px solid var(--sun); border-radius:var(--radius); padding:16px; font-size:13px; margin-top:16px; text-align:center;}
.stack-note{font-size:12.6px; color:var(--ink-soft); margin-top:12px;}

/* ---- forms (admin) ---- */
.formcard{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-top:18px;}
.formrow{margin-bottom:16px;}
.formrow label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
.formrow input, .formrow select, .formrow textarea{width:100%; font-size:16px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--paper); font-family:var(--font-body); color:var(--ink);}
.choicegrid{display:flex; gap:6px; flex-wrap:wrap;}
.choicebtn{border:1px solid var(--line); background:var(--paper); border-radius:999px; padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer;}
.choicebtn.sel, .choicebtn:has(input:checked){background:var(--tide); border-color:var(--tide); color:#fff;}
.choicebtn input{position:absolute; opacity:0; pointer-events:none;}
.btn{display:inline-block; font-family:var(--font-body); font-size:14px; font-weight:700; border-radius:6px; padding:11px 22px; border:1px solid transparent; cursor:pointer;}
.btn-primary{background:var(--tide); color:#fff;}
.btn-secondary{background:transparent; border-color:var(--ink); color:var(--ink);}
.flash{background:var(--tide-soft); border:1px solid var(--tide); color:var(--ink); border-radius:6px; padding:10px 14px; margin-top:14px; font-size:13.5px;}
.flash.error{background:var(--warn-soft); border-color:var(--warn);}

.admin-table{font-size:12.5px;}
.correction-tag{font-size:10px; font-family:var(--font-mono); color:var(--warn); border:1px dashed var(--warn); border-radius:3px; padding:1px 6px; margin-left:6px;}

footer.site-footer{border-top:1px solid var(--line); padding:24px 0 40px; margin-top:20px;}
footer.site-footer p{font-size:12px; color:var(--ink-soft); margin:0;}
footer.site-footer .footer-links{margin-top:8px;}
footer.site-footer .footer-links a{font-size:12px; color:var(--ink-soft);}

.timeline{margin-top:12px; display:grid; gap:10px;}
.timeline-item{display:grid; grid-template-columns:88px 1fr; gap:12px; border-left:2px solid var(--line); padding-left:12px;}
.timeline-date{font-family:var(--font-mono); font-size:11.5px; color:var(--tide); font-weight:700;}
.timeline-body{font-size:13px;}

.hidden{display:none !important;}

.sync-banner{display:flex; align-items:center; gap:8px; background:var(--sun-soft); border:1px solid var(--sun); border-radius:var(--radius); padding:10px 14px; font-size:12.6px; margin-top:14px;}
.sync-banner .dot{width:8px; height:8px; border-radius:50%; background:var(--sun); flex:0 0 auto;}
.sync-banner.ok{background:var(--tide-soft); border-color:var(--tide);}
.sync-banner.ok .dot{background:var(--tide);}

/* 法人情報・活動記録ページ */
.wrap-narrow{max-width:560px; margin:0 auto; padding:0 18px;}
.page-head{padding:28px 0 6px;}
.page-head .eyebrow{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--tide); font-weight:700;}
.page-head h1{margin:6px 0 8px;}
.page-head .kicker{color:var(--ink-soft); font-size:14.5px; max-width:56ch;}
.prose p{font-size:14.5px; margin:0 0 14px;}
.info-table dl{display:grid; grid-template-columns:110px 1fr; gap:10px 16px; font-size:13.6px; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;}
.info-table dt{color:var(--ink-soft); font-weight:700;}
.filterbar{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.filterbar .chip{font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft);}
.filterbar .chip.active{background:var(--tide); border-color:var(--tide); color:#fff;}
.result-count{font-size:12px; color:var(--ink-soft); margin-top:10px;}
.act-card{display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); padding:14px 16px; margin-top:10px; text-decoration:none !important; color:var(--ink);}
.act-card:hover{border-color:var(--tide);}
.act-card .act-meta{display:flex; gap:10px; align-items:center; font-size:11.5px; color:var(--ink-soft); font-family:var(--font-mono);}
.act-card .act-cat{background:var(--tide-soft); color:var(--tide); border-radius:999px; padding:2px 10px; font-weight:700;}
.act-card h4{margin:8px 0 4px; font-size:15px;}
.act-card p{margin:0; font-size:13px; color:var(--ink-soft);}
.sample-tag{font-size:10px; font-family:var(--font-mono); color:var(--sun); border:1px dashed var(--sun); border-radius:3px; padding:1px 6px; margin-left:6px;}
.linklike-danger{background:none; border:none; padding:0; font:inherit; font-size:12.6px; color:var(--warn); text-decoration:underline; cursor:pointer;}