/* 住まいとお金のノート:お役立ちツール・住宅展示場ガイド・住宅ローン＆ライフプランを本体サイトと同じ見た目にそろえる(2026-10-30)
   build.py が各ページの <head> の最後にこのファイルを差し込み、ヘッダー・フッターも本体と同じものに入れ替える。
   ページ内の <style> より後に読み込まれ、body内の <style>(mortgage_loan)にも勝つよう html を頭に付けている */
:root {
  --ink: #26303a; --muted: #5f6873; --navy: #1f2d3d; --accent: #b8975a; --bg: #f7f5f0; --paper: #ffffff; --line: #e3ddd1; --soft: #f1ebde;
  --serif: "Noto Serif JP", serif; --sans: "Noto Sans JP", sans-serif;
  /* 住宅展示場ガイドの色名も本体の色に */
  --card-bg: #ffffff; --text: #26303a; --text-sub: #5f6873; --accent-dark: #1f2d3d; --border: #e3ddd1; --badge-bg: #f1ebde; --badge-text: #7a5f2c;
}
html body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-text-size-adjust: 100%; }
html body a { color: var(--navy); }

/* ヘッダー(本体の style.css と同じ。展示場ガイドの header{} 指定を打ち消す) */
html header.site-header { background: var(--paper); border-bottom: 1px solid var(--line); padding: 0; text-align: left; }
.site-header .wrap, .site-footer .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.site-header .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.site-header .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); line-height: 1.9; }
.site-header .logo-mark { width: 40px; height: 40px; flex: none; }
.site-header .brand-name { display: block; font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.3; }
.site-header .brand-org { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; }
.site-header .nav { display: flex; gap: 22px; flex-wrap: wrap; }
html .site-header .nav a { text-decoration: none; color: var(--ink); font-size: 15px; margin: 0; }
html .site-header .nav a:hover { color: var(--accent); }

/* フッター(本体と同じ紺) */
html footer.site-footer { margin-top: 64px; background: #0b2545; color: #dfe6ee; font-size: 14px; line-height: 1.9; padding: 0 0 72px; text-align: left; border: 0; }
.site-footer .footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 36px; padding-bottom: 20px; }
.site-footer .footer-inner p { margin: 0; }
.site-footer .footer-name { font-family: var(--serif); font-size: 18px; color: #fff; }
.site-footer .footer-nav { display: flex; gap: 18px; flex-wrap: wrap; }
html .site-footer a { color: #dfe6ee; }
.site-footer .footer-banner { display: inline-block; margin-top: 14px; }
.site-footer .footer-banner img { display: block; width: 300px; max-width: 100%; border-radius: 6px; }
.site-footer .copy { text-align: center; margin: 0; padding: 12px 0 20px; font-size: 12px; color: #aab7c6; }
@media (max-width: 640px) {
  .site-header .nav { gap: 14px; }
  html .site-header .nav a { font-size: 14px; }
  .site-header .brand-name { font-size: 18px; }
  .site-header .brand-org { font-size: 11px; }
}

/* 現在地・ほかのシミュレーター */
html .bc { color: var(--muted); }
html .bc a { color: var(--navy); }
html .rel a { color: var(--navy); border-color: var(--line); }
html .rel a:hover { background: var(--soft); }
html .rel a.hub { border-color: var(--accent); }

/* シミュレーター本体(.jk=お役立ちツール、#hlsim=住宅ローン＆ライフプラン)の色を紺・金に */
html .jk, html #hlsim {
  --sf: #ffffff; --pn: #ffffff; --ink: #26303a; --ink2: #5f6873; --mut: #7d858f; --ln: #e3ddd1;
  --acc: #1f2d3d; --acc-bg: #f6f1e6; --acc-ln: #e2cfa6; --s1: #2f5d8a;
  border: 1px solid var(--line);
}
html .jk h1, html #hlsim h1 { font-family: var(--serif); color: var(--navy); }
html .jk h2, html #hlsim h2 { font-family: var(--serif); color: var(--navy); padding: 4px 0 4px 12px; border-left: 4px solid var(--accent); }
html .jk input:focus, html .jk select:focus { outline-color: var(--accent); }
html #hlsim button:hover { background: var(--acc-bg); }
html #hlsim .load { border-color: var(--acc-ln); }
html #hlsim .dl { border-top-color: var(--acc-ln); }
html .jk .cta, html #hlsim .cta { background: #fbf6ea; border-color: #e2cfa6; }
html .jk .cta a, html #hlsim .cta a { background: var(--accent); color: #fff; }
html .jk .cta a:hover, html #hlsim .cta a:hover { filter: brightness(1.08); }
html .jk-stick { border-top-color: var(--acc-ln, #e2cfa6); }
html .jk-stick a { color: var(--navy); border-color: var(--navy); }

/* 住宅展示場ガイド:ページの見出し帯を本体の見出しに合わせる */
html body > header:not(.site-header) { background: var(--bg); border-bottom: 1px solid var(--line); }
html body > header:not(.site-header) h1 { font-family: var(--serif); color: var(--navy); }
html .pref-switch .cur { background: var(--navy); border-color: var(--navy); }
html body > footer:not(.site-footer) { color: var(--muted); }
html body > main h2 { font-family: var(--serif); color: var(--navy); }