/* 土地活用ナビ｜統合デザインシステム（umbrella）＝1レイアウト＋県ごとアクセント
   全ページが <link rel="stylesheet" href="../assets/umbrella.css"> で読む単一ソース。body.theme-* で県切替。
   フォント: 見出し=Zen Old Mincho／本文=Zen Kaku Gothic New（各ページの<link>で読み込み）。アイコンはTabler CDN。
   方針: プライベートバンクの資料の品格。白磁×濃紺×金、CTAのみ臙脂。余白を広く、罫線は細く、装飾は引き算。
   モチーフ: 博多織の献上柄（独鈷・華皿を単純化した縦縞）をCTA帯と区切り罫に。
   シニア配慮: 本文18px以上／行間1.9／WCAG AA（4.5:1）以上のコントラスト／大きなボタン。 */
:root{
  --porcelain:#f7f5f2; --porcelain-2:#f0ede7; --card:#fcfbf9;
  --navy:#16233c; --navy-2:#1e2c4a; --navy-3:#2c3d61;
  --ink:#1a2438; --ink-2:#3b465e; --ink-3:#5b6478;
  --gold:#b39149; --gold-l:#cfb478; --gold-text:#8a6a2f;
  --enji:#9e2b3a; --enji-d:#7f2130;
  --line:#e4dfd5; --line-gold:rgba(179,145,73,.38);
  --serif:"Zen Old Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --wrap:820px;
}
/* ══ 県ごとアクセント（統一レイアウト＋テーマ切替）══
   --navy系=主アクセント / --gold系=副アクセント / --enji系=CTA。
   body に theme-* を付けると色と帯モチーフだけ県ごとに変わる。無指定=全国（紺×金）。 */
body.theme-kumamoto{
  --navy:#243d2b; --navy-2:#2f5539; --navy-3:#3c6647;
  --gold:#a9803f; --gold-l:#c6a45f; --gold-text:#856224; --line-gold:rgba(169,128,63,.40);
  --enji:#b23a1e; --enji-d:#8f2c15;
}
body.theme-hokkaido{
  --navy:#1e3a52; --navy-2:#274c68; --navy-3:#356184;
  --gold:#7e93a3; --gold-l:#a6b8c4; --gold-text:#4a6678; --line-gold:rgba(120,150,170,.42);
  --enji:#b23a1e; --enji-d:#8f2c15;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--sans);
  font-size:18px;line-height:1.9;font-weight:400;-webkit-font-smoothing:antialiased;letter-spacing:.015em}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:700;color:var(--navy);line-height:1.55;letter-spacing:.03em}
a{color:var(--navy-2);text-underline-offset:3px}
img,svg{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ── 献上柄（博多織）: CTA帯・区切り罫 ── */
.kenjo-hr{border:0;height:12px;margin:0;
  background-image:repeating-linear-gradient(90deg,
    transparent 0 12px, var(--line-gold) 12px 13px,
    transparent 13px 18px, var(--line-gold) 18px 20.5px,
    transparent 20.5px 34px)}
.kenjo-hr.short{max-width:220px;margin:0 auto}

/* ── 最上部ユーティリティ帯 ── */
.util{background:var(--navy);color:#dfe4ee;font-size:13.5px;letter-spacing:.08em}
.util .wrap{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;padding:8px 28px}
.util span{display:inline-flex;align-items:center;gap:6px}
.util i{color:var(--gold-l)}

/* ── ヘッダー（追従） ── */
.hdr{position:sticky;top:0;z-index:20;background:rgba(247,245,242,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}
.seal{width:44px;height:44px;border-radius:6px;background:var(--navy-2);color:#f7f5f2;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:23px;line-height:1;
  box-shadow:inset 0 0 0 1.5px rgba(207,180,120,.75), inset 0 0 0 4px var(--navy-2)}
.brand b{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--navy);letter-spacing:.04em;display:block;line-height:1.3}
.brand .sub{display:block;font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:.22em}
.nav{display:flex;align-items:center;gap:26px}
.nav a{color:var(--ink-2);text-decoration:none;font-size:15.5px;font-weight:500}
.nav a:hover{color:var(--navy);border-bottom:1px solid var(--gold)}
.nav .pdf{background:var(--navy-2);color:#fff;padding:10px 18px;border-radius:5px;font-weight:700;letter-spacing:.02em;border-bottom:0}
.nav .pdf:hover{background:var(--navy);border-bottom:0}
.burger{display:none;background:none;border:0;color:var(--navy);font-size:26px;cursor:pointer}

/* ── キービジュアル（博多湾の細線画） ── */
.keyvisual{height:170px;overflow:hidden;border-bottom:1px solid var(--line);background:var(--porcelain)}
.keyvisual svg{display:block;width:100%;height:170px}
@media(max-width:760px){.keyvisual,.keyvisual svg{height:118px}}

/* ── ボタン ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:16px 28px;
  font-family:var(--sans);font-weight:700;font-size:19px;border-radius:6px;text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn-primary{background:var(--enji);color:#fff;box-shadow:0 2px 0 var(--enji-d)}
.btn-primary:hover{background:var(--enji-d);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--navy-2);border:1px solid var(--navy-3);min-height:54px;font-size:17px}
.btn-ghost:hover{background:rgba(30,44,74,.05);border-color:var(--navy)}
.btn-full{width:100%}

/* ── ヒーロー ── */
.hero{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fbfaf7 0%,var(--porcelain) 70%)}
.hero .wrap{display:grid;grid-template-columns:1.45fr .9fr;gap:48px;padding:66px 28px 62px;align-items:center}
.hero .pr{font-size:13px;color:var(--ink-3);letter-spacing:.06em;margin:0 0 18px}
.hero h1{font-size:48px;line-height:1.45;font-weight:700;margin:0 0 10px}
.hero h1 .em{color:var(--navy-2);position:relative;white-space:nowrap}
.hero h1 .em::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold)}
.hero p.sub{font-size:19px;color:var(--ink-2);max-width:44ch;margin:20px 0 26px}
.hero .badges{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.chip i{color:var(--gold-text)}
.hero .ctas{display:flex;flex-direction:column;gap:11px;max-width:440px}

/* データパネル（帳票風・金の毛筆罫） */
.ledger{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px 28px 22px;position:relative;
  box-shadow:0 22px 44px -34px rgba(22,35,60,.55)}
.ledger::before{content:"";position:absolute;inset:8px;border:1px solid var(--line-gold);border-radius:4px;pointer-events:none}
.ledger .cap{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ledger .cap i{color:var(--gold-text)}
.ledger .row{padding:13px 0;border-top:1px solid var(--line)}
.ledger .row:first-of-type{border-top:0}
.ledger .num{display:block;font-family:var(--serif);font-weight:900;font-size:33px;color:var(--navy-2);line-height:1.15}
.ledger .num .u{font-size:19px;font-weight:700}
.ledger .lab{display:block;font-size:14.5px;color:var(--ink-3);margin-top:3px}
.ledger .note{font-size:13.5px;color:var(--ink-3);margin-top:12px;line-height:1.65;border-top:1px solid var(--line);padding-top:12px}

/* ── セクション ── */
.sec{padding:66px 0}
.sec-alt{background:var(--porcelain-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shead{margin-bottom:32px}
.shead h2{font-size:32px;font-weight:700;margin:12px 0 8px}
.shead p{color:var(--ink-2);margin:0;font-size:17px}
.eyebrow{display:flex;align-items:center;gap:12px;font-weight:700;font-size:13.5px;letter-spacing:.26em;color:var(--gold-text)}
.eyebrow::after{content:"";flex:0 0 46px;height:1px;background:var(--gold);opacity:.6}
.kazu{font-family:var(--serif);font-weight:700;color:var(--navy-2);font-size:28px;line-height:1;letter-spacing:0}
.lead-in{font-size:19px;color:var(--ink-2);max-width:64ch;margin:0 0 8px}

/* ── ガイドカード ── */
.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:22px 22px 20px;text-decoration:none;color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.gcard:hover{transform:translateY(-3px);box-shadow:0 18px 34px -26px rgba(22,35,60,.6);border-color:var(--gold)}
.gcard .ic{width:50px;height:50px;border-radius:6px;background:#eef0f4;color:var(--navy-2);display:grid;place-items:center;font-size:25px;margin-bottom:14px;border:1px solid #e0e3ea}
.gcard b{font-family:var(--serif);font-size:20.5px;font-weight:700;display:block;margin-bottom:4px;color:var(--navy)}
.gcard span{font-size:15px;color:var(--ink-3)}
.gcard .go{color:var(--enji);font-weight:700;font-size:14.5px;margin-top:12px;display:inline-flex;align-items:center;gap:5px}
.gillust{height:82px;background:#f3f1ec;border:1px solid var(--line);border-radius:6px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gillust svg{height:64px;width:auto;display:block}

/* ── 地域一覧（目次＋区画イラスト） ── */
.toc a{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--line);font-size:17px}
.toc a b{font-family:var(--serif);font-weight:700;color:var(--navy)}
.toc a .dot{flex:1;border-bottom:1px dotted var(--line-gold);transform:translateY(-4px)}
.toc a .cnt{font-size:13.5px;color:var(--gold-text);letter-spacing:.02em}
.toc a:hover b{color:var(--enji)}
.toc-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
@media(max-width:640px){.toc-cols{grid-template-columns:1fr}}
.area-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:start}
.illust{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px}
.illust svg{display:block;width:100%;height:auto;border-radius:4px}
.illust .cap{font-size:13.5px;color:var(--ink-3);text-align:center;margin:10px 2px 2px}
@media(max-width:880px){.area-grid{grid-template-columns:1fr;gap:24px}}

/* ── 表 ── */
.tbl{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:17.5px}
caption{caption-side:top;text-align:left;font-family:var(--serif);font-weight:700;font-size:20px;color:var(--navy);padding:18px 20px 8px}
th{background:var(--navy-2);color:#eef1f6;font-family:var(--sans);font-weight:700;text-align:left;padding:13px 18px;font-size:15.5px;letter-spacing:.03em}
td{padding:13px 18px;border-top:1px solid var(--line);vertical-align:top}
td.val{font-family:var(--serif);font-weight:700;color:var(--navy);white-space:normal}
td.note{font-size:14.5px;color:var(--ink-3)}
tbody tr:nth-child(even) td{background:#f4f2ed}
.pick td{background:#f6f1e4 !important}
.rank{display:inline-block;background:var(--enji);color:#fff;font-weight:700;font-size:13px;border-radius:999px;padding:2px 12px;margin-bottom:4px}
.src{font-size:14.5px;color:var(--ink-3);margin-top:12px;line-height:1.7}

/* ── 本文 ── */
.prose h2{font-size:29px;margin:38px 0 12px}
.prose h3{font-size:22px;margin:28px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.3em}
.prose li{margin-bottom:7px}
.callout{background:#f8f4ea;border:1px solid #e6d9bb;border-left:3px solid var(--gold);border-radius:0 6px 6px 0;padding:16px 20px;margin:18px 0}

/* ── なぜ今か ── */
.why{display:grid;grid-template-columns:1fr 1.2fr;gap:44px;align-items:start}
.why .figs{display:flex;flex-direction:column;gap:22px;margin-top:4px}
.why .fig{border-left:3px solid var(--gold);padding-left:16px}
.why .fig .n{font-family:var(--serif);font-weight:900;font-size:38px;color:var(--navy-2);line-height:1.1;white-space:nowrap;display:block}
.why .fig .n .u{font-size:22px;font-weight:700}
.why .fig .c{font-size:14.5px;color:var(--ink-3);max-width:26ch;margin-top:5px;line-height:1.6}
.why blockquote{margin:0;font-family:var(--serif);font-size:20px;line-height:2;color:var(--ink);border-left:2px solid var(--gold);padding-left:22px}

/* ── 推奨カード（落款スタンプ） ── */
.rec{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:32px;position:relative}
.rec::before{content:"";position:absolute;inset:8px;border:1px solid var(--line-gold);border-radius:4px;pointer-events:none}
.rec .stamp{position:absolute;top:-16px;right:28px;width:62px;height:62px;border-radius:50%;background:var(--enji);color:#fff;display:grid;place-items:center;
  font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.25;text-align:center;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);transform:rotate(-5deg)}
.rec h3{font-size:24px;margin:0 0 6px}
.rec ul{margin:14px 0 22px;padding-left:1.1em}
.rec ul li{margin-bottom:6px}

/* ── CTA帯（献上柄） ── */
.band{background-color:var(--navy-2);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);color:#dfe4ee;text-align:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='96'%3E%3Cg fill='none' stroke='%23cfb478' stroke-opacity='0.14'%3E%3Cline x1='10' y1='0' x2='10' y2='96' stroke-width='1'/%3E%3Cline x1='16' y1='0' x2='16' y2='96' stroke-width='2.5'/%3E%3Cline x1='56' y1='0' x2='56' y2='96' stroke-width='2.5'/%3E%3Cline x1='62' y1='0' x2='62' y2='96' stroke-width='1'/%3E%3C/g%3E%3Cg fill='%23cfb478' fill-opacity='0.16'%3E%3Cpath d='M36 0 L41 12 L36 24 L31 12 Z'/%3E%3Cpath d='M36 24 L41 36 L36 48 L31 36 Z'/%3E%3Cpath d='M36 48 L41 60 L36 72 L31 60 Z'/%3E%3Cpath d='M36 72 L41 84 L36 96 L31 84 Z'/%3E%3Ccircle cx='26' cy='12' r='1.6'/%3E%3Ccircle cx='46' cy='12' r='1.6'/%3E%3Ccircle cx='26' cy='60' r='1.6'/%3E%3Ccircle cx='46' cy='60' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 96px}
body.theme-kumamoto .band{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36'%3E%3Cg fill='none' stroke='%23c6a45f' stroke-opacity='0.18'%3E%3Cpath d='M0 36 A18 18 0 0 1 36 36 A18 18 0 0 1 72 36'/%3E%3Cpath d='M0 36 A11 11 0 0 1 22 36'/%3E%3Cpath d='M14 36 A11 11 0 0 1 36 36'/%3E%3Cpath d='M36 36 A11 11 0 0 1 58 36'/%3E%3Cpath d='M50 36 A11 11 0 0 1 72 36'/%3E%3Cpath d='M-36 36 A18 18 0 0 1 0 36'/%3E%3Cpath d='M36 36 A18 18 0 0 1 72 36'/%3E%3C/g%3E%3C/svg%3E");background-size:72px 36px}
body.theme-hokkaido .band{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg stroke='%23a6b8c4' stroke-opacity='0.20' stroke-width='1'%3E%3Cpath d='M16 6 V26 M8 11 L24 21 M24 11 L8 21'/%3E%3Cpath d='M48 38 V58 M40 43 L56 53 M56 43 L40 53'/%3E%3C/g%3E%3Cg fill='%23a6b8c4' fill-opacity='0.16'%3E%3Ccircle cx='48' cy='14' r='1.5'/%3E%3Ccircle cx='16' cy='46' r='1.5'/%3E%3C/g%3E%3C/svg%3E");background-size:64px 64px}
.band .wrap{padding:58px 28px}
.band h2{color:#fff;font-size:31px;margin:0 0 10px}
.band p{color:#c3cbdd;margin:0 auto 26px;max-width:48ch}
.band .ctas{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}
.band .btn-ghost{color:#eef1f6;border-color:#6b7a9b}
.band .btn-ghost:hover{background:rgba(255,255,255,.07);border-color:#9aa8c4}
.prequal{background:#f8f4ea;border:1px solid #e6d9bb;border-left:3px solid var(--gold);border-radius:0 6px 6px 0;padding:18px 20px;font-size:16px;color:var(--ink-2);margin-top:22px;text-align:left}
.band .prequal{background:rgba(247,245,242,.96)}

/* ── パンくず ── */
.crumbs{font-size:14px;color:var(--ink-3);padding:18px 0 0}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--navy);text-decoration:underline}

/* ── お問い合わせ ── */
.route{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.route .r{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:26px}
.route .r .ic{width:50px;height:50px;border-radius:6px;background:#eef0f4;color:var(--navy-2);display:grid;place-items:center;font-size:26px;margin-bottom:12px;border:1px solid #e0e3ea}
.route .r b{font-family:var(--serif);font-size:20px;color:var(--navy);display:block;margin-bottom:6px}
.route .r p{font-size:15.5px;color:var(--ink-2);margin:0 0 16px}
.cform{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px;display:flex;flex-direction:column;gap:16px;max-width:640px}
.cform label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15.5px;color:var(--navy)}
.cform input[type=text],.cform input[type=email],.cform textarea{font-family:var(--sans);font-size:17px;padding:12px 14px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink)}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--navy-3);outline-offset:1px}
.cform .agree{flex-direction:row;align-items:center;gap:10px;font-weight:400;font-size:15.5px;color:var(--ink-2)}
.cform .agree input{width:20px;height:20px}

/* ── フッター ── */
.ft{background:#111b30;color:#b8c0d2}
.ft .wrap{padding:52px 28px 30px}
.ft .top{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1fr 1.1fr;gap:24px}
.ft .brand b{color:#f7f5f2}
.ft .brand .sub{color:#8d97ad}
.ft .lead{margin:14px 0 0;color:#96a0b6;font-size:14.5px;max-width:30ch;line-height:1.8}
.ft h4{font-family:var(--sans);color:#f7f5f2;font-size:15px;font-weight:700;margin:0 0 12px;letter-spacing:.05em}
.ft a{display:block;color:#aab3c7;text-decoration:none;font-size:14.5px;padding:4px 0}
.ft a:hover{color:#fff}
.ft .cr{border-top:1px solid #2a3650;margin-top:32px;padding-top:18px;font-size:13.5px;color:#8d97ad;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ── スクロールリビール ── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ── レスポンシブ ── */
@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr;gap:36px;padding:46px 28px}
  .hero h1{font-size:37px}
  .why{grid-template-columns:1fr;gap:26px}
  .ft .top{grid-template-columns:1fr 1fr}
  .guide{grid-template-columns:1fr 1fr}
  .route{grid-template-columns:1fr}
  .nav{display:none}.burger{display:block}
}
@media(max-width:520px){
  .guide{grid-template-columns:1fr}
  .hero h1{font-size:31px}
  .why .figs{gap:22px}.why .fig .n{font-size:36px}
  .ft .top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}