/* ============================================================
   実家相続コンパス 共通ヘッダー/フッター 温かい再スキン
   既存の hkn- 系ヘッダー/フッター（全ページ共通）を、トップLPと
   同じ温かいデザインに塗り替える。マークアップは変えずCSSのみ。

   配置：cocoon-child-master/assets/css/chrome-warm.css
   読み込み：全ページで enqueue（chrome-functions-add.php 参照）

   ※ 既存の site-structure.css 等と詘合うため、必要箇所は !important。
     実際のマークアップに合わせて Claude Code 側で微調整する前提の土台。
   ============================================================ */
:root{
  --jsg-cream:#F3EEE5; --jsg-cream-2:#FBF8F2; --jsg-beige:#EDE7DB;
  --jsg-ink:#2B2A26; --jsg-mute:#6E6A60;
  --jsg-forest:#27432F; --jsg-forest-deep:#1C3123; --jsg-forest-soft:#E3EAE2;
  --jsg-clay:#C5613A; --jsg-clay-deep:#AC5230;
  --jsg-line:#E3DDD0;
  --jsg-serif:"Noto Serif JP",serif; --jsg-sans:"Noto Sans JP",sans-serif;
}

/* ============================ HEADER ============================
   site-structure.css の #header / #header-in / #header .site-name-text を
   上書きするため、ID selector + !important で強化。
   ================================================================ */
#header-container, .header-container{
  background:var(--jsg-forest) !important;
  border-bottom:0 !important;
  box-shadow:0 1px 0 rgba(0,0,0,0.18) !important;
}
#header{
  background:var(--jsg-forest) !important;
  border-bottom:0 !important;
}
#header-in, .header-in{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  max-width:1200px;
  margin:0 auto;
  padding:14px 28px !important;
}

/* タグライン */
#header .tagline, .tagline{
  color:#BFCBC1 !important;
  letter-spacing:.04em;
  font-size:11px !important;
}

/* ロゴ（テキスト＋コンパスマーク） */
#header .logo, #header .logo-header{ margin:0 !important; padding:0 !important; flex:0 1 auto; }
#header .site-name-text, .logo-header .site-name-text, .site-name-text{
  font-family:var(--jsg-serif) !important; font-weight:600 !important;
  color:#fff !important; letter-spacing:.08em;
  font-size:20px !important; line-height:1.3 !important;
}
#header .site-name-text-link, .logo-header .site-name-text-link{
  display:inline-flex !important; align-items:center !important; gap:10px !important;
  text-decoration:none !important;
}
#header .site-name-text::before, .logo-header .site-name-text::before{
  content:""; width:30px; height:30px; flex:none; display:inline-block; vertical-align:middle;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='15.5' fill='none' stroke='%23EDE7DB' stroke-width='1.5'/%3E%3Cg stroke='%23EDE7DB' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='24' y1='5.6' x2='24' y2='8.2'/%3E%3Cline x1='42.4' y1='24' x2='39.8' y2='24'/%3E%3Cline x1='24' y1='42.4' x2='24' y2='39.8'/%3E%3Cline x1='5.6' y1='24' x2='8.2' y2='24'/%3E%3C/g%3E%3Cpolygon points='24,10.5 28.6,24 19.4,24' fill='%23D2724B'/%3E%3Cpolygon points='24,37.5 28.6,24 19.4,24' fill='%238FA894'/%3E%3Ccircle cx='24' cy='24' r='2.6' fill='%23EDE7DB'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}
/* logo wrapperに `.logo.logo-text` クラスが付いている場合、Cocoon標準で text-align:center 等が当たるので解除 */
#header .logo.logo-text, #header .logo-header.logo-text{ text-align:left !important; }
/* hlt-center-logo クラスがcenter揃えを強制する場合に上書き */
.header-container-in.hlt-center-logo{ display:block !important; }

/* header-utility（CTAボタン+ハンバーガー） */
#header .header-utility, .header-utility{
  display:inline-flex !important; flex-direction:row !important; align-items:center !important; gap:12px !important;
  margin-left:auto;
}

/* ヘッダーCTAボタン（無料一括見積もり） */
.hkn-btn-primary{
  background:var(--jsg-clay) !important; color:#fff !important;
  border:0 !important; border-radius:8px !important; font-weight:700 !important;
  box-shadow:0 12px 24px -14px rgba(172,82,48,.9); transition:.25s;
}
.hkn-btn-primary:hover{ background:var(--jsg-clay-deep) !important; transform:translateY(-2px); }

/* ハンバーガー */
.hkn-hamburger span{ background:#fff !important; }

/* ============================ NAV ============================ */
#navi, .navi{ background:var(--jsg-forest-deep) !important; }
.menu-header .item-label{ color:#EAEFEA !important; font-family:var(--jsg-sans) !important; letter-spacing:.04em; }
.menu-header > li{ position:relative; }
.menu-header > li > a{ transition:.2s; }
.menu-header > li > a:hover{ background:rgba(255,255,255,.06) !important; }
.menu-header > li > a:hover .item-label{ color:#fff !important; }
.menu-header > li > a::after{ /* 下線アクセント */
  content:""; position:absolute; left:16px; right:16px; bottom:6px; height:1px; background:var(--jsg-clay); transform:scaleX(0); transition:.25s;
}
.menu-header > li > a:hover::after{ transform:scaleX(1); }
/* サブメニュー */
.menu-pc .sub-menu{ background:#fff !important; border:1px solid var(--jsg-line) !important; border-radius:0 0 8px 8px; box-shadow:0 18px 36px -24px rgba(43,42,38,.5); }
.menu-pc .sub-menu .item-label{ color:var(--jsg-ink) !important; }
.menu-pc .sub-menu > li > a:hover{ background:var(--jsg-cream) !important; }
.menu-pc .sub-menu > li > a:hover .item-label{ color:var(--jsg-clay) !important; }

/* ============================ DRAWER（モバイル） ============================ */
.hkn-drawer{ background:var(--jsg-cream-2) !important; }
.hkn-drawer-list a, .hkn-drawer-accordion{ color:var(--jsg-ink) !important; font-family:var(--jsg-sans) !important; }
.hkn-drawer-list a:hover, .hkn-drawer-accordion:hover{ color:var(--jsg-clay) !important; }
.hkn-drawer-sub a{ color:var(--jsg-mute) !important; }
.hkn-drawer-cta .hkn-btn-primary{ width:100%; }

/* ============================ FOOTER ============================ */
#footer, .footer-container{ background:var(--jsg-forest-deep) !important; color:#CDD4CD !important; }
/* フッターロゴの「家」文字を SVG コンパスに置換（text-indent で文字を視覚的に消す） */
.hkn-footer-brand .logo-mark{
  display:inline-block !important;
  width:42px !important; height:42px !important;
  background:transparent !important; color:transparent !important; border:0 !important;
  text-indent:-9999px; overflow:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='15.5' fill='none' stroke='%23EDE7DB' stroke-width='1.5'/%3E%3Cg stroke='%23EDE7DB' stroke-width='1.5' stroke-linecap='round'%3E%3Cline x1='24' y1='5.6' x2='24' y2='8.2'/%3E%3Cline x1='42.4' y1='24' x2='39.8' y2='24'/%3E%3Cline x1='24' y1='42.4' x2='24' y2='39.8'/%3E%3Cline x1='5.6' y1='24' x2='8.2' y2='24'/%3E%3C/g%3E%3Cpolygon points='24,10.5 28.6,24 19.4,24' fill='%23D2724B'/%3E%3Cpolygon points='24,37.5 28.6,24 19.4,24' fill='%238FA894'/%3E%3Ccircle cx='24' cy='24' r='2.6' fill='%23EDE7DB'/%3E%3C/svg%3E") !important;
  background-size:contain !important; background-repeat:no-repeat !important;
  vertical-align:middle;
}
.hkn-footer-brand .logo-text, .hkn-footer-brand .brand-name{ color:#fff !important; font-family:var(--jsg-serif) !important; }
.hkn-footer-tagline{ color:#fff !important; font-family:var(--jsg-serif) !important; letter-spacing:.05em; }
.hkn-footer-desc{ color:#9BA89C !important; }
.hkn-footer-col-title{ color:#fff !important; font-family:var(--jsg-sans) !important; letter-spacing:.06em; }
.hkn-footer-col a{ color:#A9B3AA !important; }
.hkn-footer-col a:hover{ color:#fff !important; }
.hkn-footer-bottom{ border-top:1px solid rgba(255,255,255,.12) !important; }
.hkn-footer-legal a{ color:#9BA89C !important; }
.hkn-footer-legal a:hover{ color:#fff !important; }
.hkn-footer-copyright{ color:#76847A !important; }

/* モバイル固定フッターボタン */
.mobile-footer-menu-buttons .menu-button-in{ background:var(--jsg-forest) !important; color:#fff !important; }
.mobile-footer-menu-buttons .menu-button-in:hover{ background:var(--jsg-forest-deep) !important; }

/* トップへ戻る */
.go-to-top-button{ background:var(--jsg-clay) !important; color:#fff !important; border-radius:8px !important; }

/* SNSシェア／フォローボタン全ページ非表示（PHPフィルタの保険、保存版） */
.sns-share, .sns-follow,
.sns-share-message, .sns-follow-message,
.share-buttons-top, .share-buttons-bottom,
.sba-buttons{ display:none !important; }