/* ============================================================
   補助金のこり.jp
   「のこり」を測る計器を中心に据えた設計。
   本文は BIZ UDPゴシック（読みやすさ重視）、数字だけ Barlow Semi Condensed。
   ============================================================ */
:root{
  --ink:#16202B;          /* 墨 */
  --ink-2:#4A5764;        /* 弱い文字 */
  --ink-3:#78848F;        /* さらに弱い */
  --paper:#FFFFFF;
  --paper-2:#F4F6F8;      /* うすい面 */
  --rule:#D7DDE3;         /* 罫 */
  --rule-2:#E8ECEF;
  --ai:#17427A;           /* 藍：リンクと操作 */
  --ai-soft:#E7EDF5;

  --open:#0F6B45;  --open-bg:#E3F1EA;  --open-fill:#1E8A5B;
  --low:#8F4E06;   --low-bg:#FCEDD6;   --low-fill:#D98A0B;
  --closed:#5C6873;--closed-bg:#E9ECEF;
  --before:#4B3B86;--before-bg:#EBE7F6;
  --always:#17427A;--always-bg:#E7EDF5;
  --first:#A6231B; --first-bg:#FBE9E7;

  --w:min(100% - 40px, 720px);
  --step:1.5rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:8.2rem}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"BIZ UDPGothic",system-ui,sans-serif;
  font-size:17px;line-height:1.85;
  font-feature-settings:"palt" 1;
}
.num{font-family:"Barlow Semi Condensed","BIZ UDPGothic",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.01em}
a{color:var(--ai);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ai);outline-offset:3px}
[hidden]{display:none!important}
.wrap{width:var(--w);margin-inline:auto}

/* ---- 見出し ---- */
h1{font-size:clamp(27px,6.2vw,40px);line-height:1.32;margin:0 0 .5rem;letter-spacing:.005em}
h2{font-size:clamp(20px,3.4vw,24px);line-height:1.45;margin:0}
h3{font-size:17px;margin:0}

/* ---- ヘッダー ---- */
.site{background:var(--ai);border-bottom:4px solid var(--low-fill);position:sticky;top:0;z-index:20}
.site .wrap{padding:15px 0}
.brand{
  display:inline-flex;align-items:center;gap:.42em;
  font-weight:700;font-size:clamp(21px,5.4vw,25px);line-height:1.2;
  color:#fff;text-decoration:none;letter-spacing:.02em;padding:2px 0;
}
.brand-mark{width:1.22em;height:1.22em;flex:none;display:block}
.brand:hover{color:#fff;text-decoration:underline}


/* ---- メーター：このサイトの顔 ---- */
.gauge{
  --pct:0;
  position:relative;max-width:420px;margin:2px 0 0;
  height:26px;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:2px;overflow:hidden;
}
.gauge i{
  position:absolute;inset:0 auto 0 0;width:calc(var(--pct) * 1%);
  background:var(--fill,var(--ink-3));
}
.gauge::after{ /* 10目盛り */
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),rgba(255,255,255,.85) calc(10% - 1px),rgba(255,255,255,.85) 10%);
}
.gauge-scale{
  display:flex;justify-content:space-between;max-width:420px;
  font-size:11px;color:var(--ink-3);margin:1px 0 0;
}
.gauge-read{display:flex;align-items:baseline;gap:.3em;margin:.35rem 0 .9rem;font-weight:700}
.gauge-read b{font-size:40px;line-height:1;font-weight:600;margin-left:.15em}
.gauge-read em{font-style:normal;font-size:17px;margin-left:-.12em}
.gauge-read small{font-size:14px;font-weight:400;color:var(--ink-2);margin-left:.35em}
.st-open .gauge{--fill:var(--open-fill)} .st-open .gauge-read{color:var(--open)}
.st-low  .gauge{--fill:var(--low-fill)}  .st-low  .gauge-read{color:var(--low)}

/* ---- 状態の札 ---- */
.status{font-weight:700;font-size:15px;padding:3px 13px;border-radius:2px;white-space:nowrap}
.st-open .status,.s-open{background:var(--open-bg);color:var(--open)}
.st-low .status,.s-low{background:var(--low-bg);color:var(--low)}
.st-closed .status,.s-closed{background:var(--closed-bg);color:var(--closed)}
.st-before .status,.s-before{background:var(--before-bg);color:var(--before)}
.st-always .status,.s-always{background:var(--always-bg);color:var(--always)}
.tag{font-size:13px;padding:2px 9px;border-radius:2px;border:1px solid var(--rule);color:var(--ink-2);font-weight:400;white-space:nowrap}
.tag.first{border-color:var(--first);color:var(--first)}
.tag.pr{border-color:var(--ink-3);color:var(--ink-2)}

/* ---- ボタン ---- */
.btn{
  display:inline-block;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
  padding:12px 20px;border-radius:3px;background:var(--ink);color:#fff;border:2px solid var(--ink);
}
.btn:hover{background:var(--ai);border-color:var(--ai);color:#fff}
.btn.sub{background:transparent;color:var(--ink)}
.btn.sub:hover{background:var(--ink);color:#fff}
.btn.line{background:#06C755;border-color:#06C755;color:#fff}
.btn.line:hover{background:#05a948;border-color:#05a948}
.btn2{
  display:inline-block;font-size:15px;text-decoration:none;padding:8px 14px;
  border-radius:3px;border:1px solid var(--ai);color:var(--ai);background:var(--paper);
}
.btn2:hover{background:var(--ai-soft)}

/* ============================================================
   一覧ページ（トップ・地域）
   ============================================================ */
.hero{padding:2.6rem 0 0}
.lead{margin:0 0 1.4rem;color:var(--ink-2);max-width:34em}
.hero h1 span{display:inline-block}

/* 状態ごとの件数：押すと絞り込む */
.summary{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1rem;padding:0;list-style:none}
.summary button{
  font:inherit;cursor:pointer;display:flex;align-items:baseline;gap:7px;
  padding:9px 15px;border-radius:3px;border:2px solid transparent;background:var(--paper-2);color:var(--ink-2);
}
.summary button b{font-size:26px;line-height:1;font-weight:600}
.summary button[data-st="low"]{background:var(--low-bg);color:var(--low)}
.summary button[data-st="open"]{background:var(--open-bg);color:var(--open)}
.summary button[data-st="before"]{background:var(--before-bg);color:var(--before)}
.summary button[data-st="always"]{background:var(--always-bg);color:var(--always)}
.summary button[data-st="closed"]{background:var(--closed-bg);color:var(--closed)}
.summary button[aria-pressed="true"]{border-color:currentColor}

.filters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 .4rem}
.filters button{
  font:inherit;font-size:15px;cursor:pointer;padding:7px 14px;
  border-radius:999px;border:1px solid var(--rule);background:var(--paper);color:var(--ink-2);
}
.filters button:hover{border-color:var(--ink-3);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.filter-note{font-size:14px;color:var(--ink-2);margin:0 0 .4rem;min-height:1.5em}

/* 補助金1件：左の帯が受付状況を表す */
.list{margin:1.2rem 0 0;border-top:1px solid var(--rule)}
.entry{position:relative;padding:1.7rem 0 1.9rem 18px;border-bottom:1px solid var(--rule)}
.entry::before{content:"";position:absolute;left:0;top:1.7rem;bottom:1.9rem;width:4px;background:var(--rule)}
.st-low.entry::before{background:var(--low-fill);width:6px}
.st-open.entry::before{background:var(--open-fill)}
.st-always.entry::before{background:var(--always)}
.st-before.entry::before{background:var(--before)}
.detail .entry{border-bottom:0;padding-top:.2rem}
.detail .entry::before{top:.4rem}

.entry-head{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:.3rem}
.entry-title{font-size:21px;line-height:1.5;margin:.1rem 0 .35rem;font-weight:700}
.detail .entry-title{font-size:clamp(23px,4.6vw,30px)}
.entry-title a{color:inherit;text-decoration:none}
.entry-title a:hover{color:var(--ai);text-decoration:underline}
.st-closed .entry-title{color:var(--ink-2)}
.amount{margin:0 0 .7rem;font-size:17px;color:var(--ink-2)}
.amount strong{font-size:23px;color:var(--ink);font-weight:700}
.note{margin:0 0 .9rem;max-width:38em}

.facts{display:grid;grid-template-columns:8.5em 1fr;gap:.15rem .9rem;margin:0 0 .8rem;font-size:16px}
.facts dt{color:var(--ink-3)}
.facts dd{margin:0}
.points{margin:0 0 1rem;padding-left:1.15em;font-size:16px;color:var(--ink-2);max-width:38em}
.points li{margin-bottom:.1rem}
.actions{display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;align-items:center}
.more-link{font-size:15px}
.checked{font-size:13px;color:var(--ink-3);margin:0}

/* 業者 */
.biz{margin-top:1.3rem;padding:1rem 1.1rem;background:var(--paper-2);border-radius:3px}
.biz h3{margin:0 0 .4rem}
.biz ul{list-style:none;margin:0;padding:0}
.biz-item{padding:.7rem 0;border-top:1px solid var(--rule-2)}
.biz-item:first-child{border-top:0;padding-top:.1rem}
.biz-name{font-weight:700;margin:0}
.biz-meta{font-size:14px;color:var(--ink-2);margin:0}
.biz-reg{font-size:14px;color:var(--open);margin:.1rem 0 0}
.biz-desc{font-size:15px;margin:.25rem 0 0}
.biz-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:.5rem}
.biz-more,.biz-empty-note{margin:.5rem 0 0;font-size:15px}
.biz-count{margin:.9rem 0 0;font-size:15px}
.biz-pr-names{font-weight:700}

/* 地域の入口 */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:0 0 .6rem}
.area-card{
  display:block;padding:1rem 1.2rem;border:1px solid var(--rule);border-left:4px solid var(--ai);
  border-radius:3px;text-decoration:none;color:var(--ink);
}
.area-card b{display:block;font-size:21px;line-height:1.3;margin:.1rem 0}
.area-card span{font-size:14px;color:var(--ink-2)}
.area-card:hover{border-color:var(--ai);background:var(--ai-soft)}
.sec-title{margin:2.6rem 0 .3rem;padding-top:.9rem;border-top:2px solid var(--ink)}
.sec-lead{color:var(--ink-2);margin:0 0 1rem;max-width:34em}

.ad{margin:1.4rem 0;padding:1rem 0;border-block:1px solid var(--rule-2)}
.ad-label{font-size:12px;color:var(--ink-3);margin:0 0 .4rem}
.empty{padding:1.7rem 0}
.empty button{font:inherit;cursor:pointer;padding:9px 15px;border-radius:3px;border:1px solid var(--ai);background:var(--paper);color:var(--ai)}
.crumb{margin:1.5rem 0 .6rem;font-size:15px;color:var(--ink-2)}
.crumb a{color:var(--ink-2)}

.history{padding:1.3rem 0 0;border-top:1px solid var(--rule);margin-top:2rem}
.history h2{font-size:19px;margin:0 0 .4rem}
.history ul{list-style:none;padding:0;margin:0}
.history li{padding:.35rem 0;font-size:15px;border-bottom:1px solid var(--rule-2)}
.history time{display:inline-block;min-width:9.5em;color:var(--ink-3);font-size:14px}

/* 受付状況の見方 */
.guide{background:var(--paper-2);border-radius:3px;padding:1.3rem 1.4rem;margin:1.8rem 0}
.guide h2{font-size:18px;margin:0 0 .5rem}
.guide dl{display:grid;grid-template-columns:8em 1fr;gap:.4rem .9rem;margin:0;font-size:16px}
.guide dd{margin:0;color:var(--ink-2)}
.guide dt .status{display:inline-block;font-size:14px}

.more{padding:.4rem 0 1.4rem}
.more section{padding:1.1rem 0;border-top:1px solid var(--rule-2)}
.more h2{font-size:18px;margin:0 0 .3rem}
.more p{margin:0 0 .3rem;color:var(--ink-2);max-width:38em}
footer{border-top:2px solid var(--ink);padding:1.4rem 0 2.5rem;margin-top:2.2rem;font-size:14px;color:var(--ink-2)}
footer p{margin:0 0 .35rem;max-width:44em}

/* ---- 利用規約・プライバシーポリシー ---- */
.legal h1{margin:.4rem 0 1.4rem}
.legal-sec{padding:0 0 .4rem}
.legal-sec h2{font-size:19px;margin:1.9rem 0 .4rem;padding-top:.7rem;border-top:1px solid var(--rule)}
.legal-sec p{margin:0 0 .7rem;max-width:40em}
.legal-sec .facts{grid-template-columns:6em 1fr;margin-top:.3rem}
.legal-date{margin:2rem 0 0;font-size:14px;color:var(--ink-3);padding-top:.8rem;border-top:1px solid var(--rule)}
.foot-links a{color:var(--ink-2)}

/* ---- 業者向けページ・マイページ ---- */
.biz-page h1{margin:1.6rem 0 .6rem}
.biz-page h2{font-size:20px;margin:2.4rem 0 .4rem;padding-top:.8rem;border-top:2px solid var(--ink)}
.biz-page h3{font-size:17px;margin:1.4rem 0 .3rem}
.biz-page .lead{margin:0 0 1.2rem}
.biz-form{max-width:34em}
.biz-form label{display:block;margin:1.1rem 0 .2rem;font-weight:700}
.biz-form label.cb{display:flex;gap:10px;align-items:flex-start;margin:.2rem 0;font-weight:400;cursor:pointer}
.biz-form label.cb input{width:22px;height:22px;margin-top:3px;flex:none;accent-color:var(--ai)}
.biz-form input[type=text],.biz-form input[type=email],.biz-form input[type=password],.biz-form input[type=url],.biz-form textarea{
  font:inherit;width:100%;padding:10px 12px;border:1px solid var(--ink-3);border-radius:3px;background:var(--paper);color:var(--ink)}
.biz-form textarea{min-height:5.5em}
.biz-form input:focus,.biz-form textarea:focus{border-color:var(--ai)}
.req{font-size:12px;font-weight:700;color:var(--first);background:var(--first-bg);padding:1px 7px;border-radius:2px;margin-left:6px}
.fhelp{font-size:14px;color:var(--ink-2);margin:.25rem 0 0;max-width:34em}
.flash{background:var(--open-bg);color:var(--open);border-left:4px solid var(--open-fill);padding:.8rem 1.1rem;border-radius:3px;margin:1.2rem 0 0;font-weight:700}
.warn{background:var(--first-bg);color:var(--first);border-left:4px solid var(--first);padding:.8rem 1.1rem;border-radius:3px;margin:1rem 0;max-width:40em}
.biz-cta{background:var(--paper-2);border-radius:3px;padding:1.1rem 1.3rem;margin:2rem 0}
.biz-cta h2{border:0;margin:0 0 .3rem;padding:0;font-size:18px}
.biz-cta p{margin:0 0 .5rem}
.kpis{display:flex;flex-wrap:wrap;gap:12px;margin:.4rem 0 .4rem}
.kpi{background:var(--paper-2);border-left:4px solid var(--ai);border-radius:3px;padding:.9rem 1.2rem;min-width:9.5em}
.kpi b{display:block;font-size:38px;line-height:1;font-weight:600;color:var(--ai)}
.kpi span{font-size:14px;color:var(--ink-2)}
.where{list-style:none;padding:0;margin:.3rem 0 0}
.where li{padding:.35rem 0;border-bottom:1px solid var(--rule-2);font-size:15px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:540px){
  body{font-size:16px}
  .facts,.guide dl{grid-template-columns:1fr}
  .facts dt{margin-top:.3rem}
  .history time{display:block;min-width:0}
  .gauge-read b{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 事業者向け：締切までの日数と、一覧の切り替えリンク */
.days{display:inline-block;margin-left:.4em;font-size:14px;padding:1px 8px;border-radius:2px;background:var(--ai-soft);color:var(--ai);font-weight:700;white-space:nowrap}
.days.soon{background:#FCEDD6;color:#8F4E06}
.switch-link{font-size:15px;margin:.2rem 0 1rem}
.case-group{font-size:18px;margin:1.4rem 0 .4rem}
.case-list li{margin-bottom:.35rem}
.muted-note{font-size:14px;color:var(--ink-3);margin:.4rem 0 0}

/* ---- ヘッダーの切り替え（住まい／事業者） ---- */
.site .wrap:has(.tabs){padding-bottom:0}
.tabs{display:flex;gap:6px;margin-top:12px}
.tab{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px 6px 7px;border-radius:4px 4px 0 0;text-decoration:none;text-align:center;
  font-weight:700;font-size:clamp(14px,3.9vw,16px);line-height:1.3;
  color:#fff;background:rgba(255,255,255,.14);
}
.tab small{font-weight:400;font-size:12px;opacity:.85}
.tab:hover{background:rgba(255,255,255,.26);color:#fff}
.tab.is-on{background:var(--paper);color:var(--ai)}
.tab.is-on small{opacity:1;color:var(--ink-2)}
@media (min-width:640px){.tabs{max-width:460px}}