:root{
  --paper:#FFFFFF;
  --sand:#F6F8FA;
  --sand-line:#DCE3E8;
  --ink:#1B2A2E;
  --ink-soft:#4B5A5C;
  --river:#2E88A8;
  --river-100:#DCEEF2;
  --river-700:#175A6E;
  --amber:#D98A2B;
  --amber-100:#FBEDD9;
  --coral:#C24B3F;
  --coral-100:#F8E2DF;
  --map-fill:#ECF1F4;
  --map-line:#BCC9D1;
  --map-off:#F3F5F6;
  --card-shadow:0 1px 2px rgba(27,42,46,0.06);
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',sans-serif;
  font-size:16px;line-height:1.7;margin:0;-webkit-text-size-adjust:100%;}
.hmb-root{max-width:1180px;margin:0 auto;padding:1.5rem 1.25rem 3rem;}
.hmb-head h1{font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;font-weight:700;
  font-size:27px;margin:0 0 4px;text-wrap:balance;}
.hmb-head p{color:var(--ink-soft);font-size:15.5px;margin:0 0 8px;max-width:60ch;line-height:1.7;}
.hmb-note{font-size:14px;color:var(--ink-soft);margin:0 0 1.5rem;}
/* PC: 左列にカードを縦に積み、右列に地図を全高で置く。
   スマホ: 1カラムにしてDOMの順番どおりに並べる(対象地域 → 地図 → …)。
   地図をカードと同じグリッドの子にしているのは、スマホで対象地域の直下に
   地図を出すため。左カラムでラップすると順番を入れ替えられない。 */
.hmb-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:14px 20px;align-items:start;}
.hmb-grid > .hmb-card{grid-column:1;}
.hmb-grid > .hmb-map-wrap{grid-column:2;grid-row:1 / -1;}
@media (max-width:820px){
  .hmb-grid{grid-template-columns:1fr;}
  .hmb-grid > .hmb-card,
  .hmb-grid > .hmb-map-wrap{grid-column:1;grid-row:auto;}
}
.hmb-card{background:var(--sand);border:0.5px solid var(--sand-line);border-radius:12px;
  padding:1.1rem 1.2rem;box-shadow:var(--card-shadow);}
.hmb-label{font-size:13.5px;color:var(--ink-soft);letter-spacing:.03em;font-weight:500;margin:0 0 6px;}
.hmb-label-sub{font-weight:400;margin-left:6px;opacity:.75;}
.hmb-genre-row{display:flex;flex-wrap:wrap;gap:8px;}
.hmb-genre-chip{display:flex;align-items:center;gap:6px;font-size:14.5px;border:0.5px solid var(--sand-line);
  border-radius:99px;padding:6px 12px 6px 10px;cursor:pointer;background:var(--paper);color:var(--ink-soft);
  user-select:none;}
.hmb-genre-chip input{accent-color:var(--river);margin:0;}
.hmb-genre-chip.active{background:var(--river);color:#fff;border-color:var(--river);}
select#pref-select,input#muni-search{width:100%;height:40px;border-radius:8px;border:0.5px solid var(--sand-line);
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:15.5px;padding:0 10px;}
input#muni-search{margin-top:8px;}
.hmb-budget-row{display:flex;align-items:baseline;justify-content:space-between;margin:2px 0 8px;}
.hmb-budget-num{font-variant-numeric:tabular-nums;font-weight:700;font-size:24px;
  font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;}
.hmb-budget-num small{font-size:15.5px;font-weight:400;color:var(--ink-soft);}
.hmb-bar{height:8px;border-radius:99px;background:var(--sand-line);overflow:hidden;}
.hmb-bar-fill{height:100%;border-radius:99px;background:var(--river);transition:width .25s,background .25s;}
.hmb-muni-list{max-height:340px;overflow-y:auto;margin-top:10px;display:flex;flex-direction:column;gap:2px;}
.hmb-muni-row{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:8px;cursor:pointer;font-size:15px;}
.hmb-muni-row:hover{background:var(--river-100);}
.hmb-muni-row.selected{background:var(--river-100);}
.hmb-muni-row.disabled{opacity:.45;cursor:not-allowed;}
.hmb-muni-row.unavailable{opacity:.5;cursor:not-allowed;}
.hmb-muni-row input{margin:0;accent-color:var(--river);}
.hmb-muni-row .nm{flex:1;}
.hmb-cost-badge{font-size:13.5px;font-variant-numeric:tabular-nums;padding:1px 8px;border-radius:99px;
  background:var(--sand-line);color:var(--ink-soft);font-weight:500;white-space:nowrap;}
.hmb-muni-row.selected .hmb-cost-badge{background:var(--river);color:#fff;}
.hmb-flag{font-size:12.5px;padding:1px 7px;border-radius:99px;background:var(--amber-100);color:#8a5410;
  font-weight:500;white-space:nowrap;}
.hmb-selected-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;min-height:20px;}
.hmb-chip{display:flex;align-items:center;gap:5px;background:var(--river-100);color:var(--river-700);
  border-radius:99px;padding:3px 6px 3px 10px;font-size:14px;}
.hmb-chip button{border:none;background:none;color:inherit;cursor:pointer;font-size:15.5px;line-height:1;
  padding:2px;display:flex;}
.hmb-empty-note{color:var(--ink-soft);font-size:14.5px;line-height:1.7;padding:6px 2px;}
input#contact-input{width:100%;height:40px;border-radius:8px;border:0.5px solid var(--sand-line);
  background:var(--paper);color:var(--ink);font-family:inherit;font-size:15.5px;padding:0 10px;margin-top:4px;}
button.hmb-submit{width:100%;height:44px;border-radius:8px;border:none;background:var(--river);color:#fff;
  font-family:inherit;font-weight:500;font-size:15.5px;cursor:pointer;margin-top:12px;}
button.hmb-submit:disabled{background:var(--sand-line);color:var(--ink-soft);cursor:not-allowed;}
button.hmb-submit:not(:disabled):hover{background:var(--river-700);}
.hmb-map-wrap{background:var(--sand);border:0.5px solid var(--sand-line);border-radius:12px;padding:1rem;
  box-shadow:var(--card-shadow);position:sticky;top:12px;}
.hmb-map-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.hmb-map-wrap h2{font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;font-size:17px;font-weight:500;margin:0;}
.hmb-map-sub{font-size:14px;color:var(--ink-soft);margin:2px 0 10px;}
.hmb-fit-btn{font-size:13.5px;border:0.5px solid var(--sand-line);background:var(--paper);color:var(--ink-soft);
  border-radius:99px;padding:4px 12px;cursor:pointer;font-family:inherit;}
.hmb-fit-btn:hover{background:var(--river-100);color:var(--river-700);}
.hmb-map-svg-holder{position:relative;}
svg#muni-map{width:100%;height:auto;display:block;background:var(--paper);border-radius:8px;}
svg#muni-map path{stroke:var(--map-line);stroke-width:.6;vector-effect:non-scaling-stroke;
  transition:fill .15s;}
svg#muni-map path.available{fill:var(--map-fill);cursor:pointer;}
svg#muni-map path.available:hover{fill:var(--river-100);}
svg#muni-map path.unavailable{fill:var(--map-off);stroke:#DFE5E8;}
svg#muni-map path.selected{fill:var(--river);stroke:var(--river-700);stroke-width:1;}
svg#muni-map path.partial{stroke:var(--amber);stroke-dasharray:3 2;}
.hmb-tooltip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:14px;
  padding:4px 9px;border-radius:6px;transform:translate(-50%,-130%);white-space:nowrap;opacity:0;
  transition:opacity .1s;z-index:5;}
.hmb-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:13.5px;color:var(--ink-soft);}
.hmb-legend span{display:flex;align-items:center;gap:6px;}
.hmb-legend i{width:14px;height:14px;border-radius:3px;border:0.5px solid var(--map-line);display:block;}
.hmb-confirm{background:var(--river-100);border:0.5px solid var(--river);border-radius:10px;padding:14px 16px;
  font-size:15px;line-height:1.7;color:var(--river-700);margin-top:12px;}
.hmb-caveat{background:var(--amber-100);border-left:3px solid var(--amber);border-radius:6px;padding:10px 14px;
  font-size:14px;line-height:1.7;color:#6b4310;margin-top:12px;}
.hmb-loading{font-size:14.5px;color:var(--ink-soft);padding:20px 2px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;}

@media (max-width:640px){
  body{font-size:17px;}
  .hmb-root{padding:1.25rem 1rem 3rem;}
  .hmb-head h1{font-size:25px;}
  .hmb-head p{font-size:16px;}
  .hmb-note{font-size:14.5px;}
  .hmb-card{padding:1.15rem 1rem;border-radius:14px;}
  .hmb-label{font-size:14.5px;}
  select#pref-select,input#muni-search,input#contact-input{height:50px;font-size:16.5px;}
  button.hmb-submit{height:54px;font-size:17px;}
  .hmb-genre-chip{font-size:15.5px;padding:10px 15px 10px 13px;}
  .hmb-muni-row{font-size:16px;padding:11px 8px;min-height:46px;}
  .hmb-cost-badge{font-size:13.5px;padding:2px 9px;}
  .hmb-muni-list{max-height:min(50vh,420px);}
  .hmb-chip{font-size:15px;padding:6px 8px 6px 13px;}
  .hmb-chip button{font-size:19px;}
  .hmb-empty-note{font-size:15px;}
  .hmb-budget-num{font-size:26px;}
  .hmb-map-wrap{position:static;}
  .hmb-map-wrap h2{font-size:18px;}
  .hmb-muni-row input,.hmb-genre-chip input{width:20px;height:20px;flex:none;}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important;}}

/* 申請ページ用: 既に対応済みの市区町村は濃く塗って区別する */
svg#muni-map path.done{fill:var(--river-100);stroke:var(--river);cursor:not-allowed;}
.hmb-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--river-100);
  border:0.5px solid var(--river);border-radius:12px;padding:14px 16px;margin:0 0 1.5rem;}
.hmb-cta p{margin:0;font-size:14.5px;color:var(--river-700);flex:1;min-width:220px;line-height:1.7;}
.hmb-cta a{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;
  border-radius:8px;background:var(--river);color:#fff;text-decoration:none;font-weight:500;font-size:15px;
  white-space:nowrap;}
.hmb-cta a:hover{background:var(--river-700);}
.hmb-back{display:inline-block;font-size:14.5px;color:var(--river-700);margin-bottom:10px;}
@media (max-width:640px){
  .hmb-cta{padding:14px;}
  .hmb-cta a{width:100%;height:48px;font-size:16px;}
}

/* 申請ページのご要望欄 */
textarea#note-input{width:100%;border-radius:8px;border:0.5px solid var(--sand-line);background:var(--paper);
  color:var(--ink);font-family:inherit;font-size:15.5px;padding:8px 10px;margin-top:4px;resize:vertical;
  line-height:1.7;}
@media (max-width:640px){ textarea#note-input{font-size:16.5px;} }

/* 都道府県の外周線。塗りが薄い(未対応の)都道府県でも輪郭が読めるようにする。
   市区町村のpathより後ろに描いて上に重ねるため、塗りは持たせない。 */
svg#muni-map path.pref-outline{fill:none;stroke:#7C8B96;stroke-width:1.4;
  vector-effect:non-scaling-stroke;pointer-events:none;}

/* 離島は本土から遠いので、実際の縮尺のままでは地図に収まらない。
   天気予報の地図のように枠へ収めて表示する。 */
svg#muni-map .inset-box{fill:var(--paper);stroke:var(--map-line);stroke-width:1;
  vector-effect:non-scaling-stroke;}
svg#muni-map .inset-label{font-size:9px;fill:var(--ink-soft);font-family:'Noto Sans JP',sans-serif;}

/* 未対応の市区町村。塗りは薄いままでよいが、境界が見えないと形が分からないので
   線はきちんと出す。 */
svg#muni-map path.unavailable{fill:var(--map-off);stroke:var(--map-line);}