/* =====================================================================
   carheart.jp フッター（parts/ch-footer.html）
   墨地・生成りの文字・ロゴは白。英字は Archivo（幅広）
   ===================================================================== */

.chf{
  --chf-bg:#16181A; --chf-fg:#F6F5F3; --chf-sub:#C9C6C2; --chf-mute:#8A8A8A; --chf-line:#2C2E31; --chf-rose:#B87E9C;
  --chf-jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --chf-en:"Archivo","Helvetica Neue",Arial,sans-serif;
  display:block; width:100%; margin:0 !important; padding:64px 20px 32px;
  background:var(--chf-bg) !important; color:var(--chf-fg);
  font-family:var(--chf-jp); font-weight:400; font-size:14px; line-height:1.8; text-align:left;
  -webkit-font-smoothing:antialiased; box-sizing:border-box;
}
.chf *,.chf *::before,.chf *::after{ box-sizing:border-box; }
.chf p,.chf ul,.chf dl,.chf dd{ margin:0; padding:0; }
.chf ul{ list-style:none; }
.chf a{ color:inherit !important; text-decoration:none !important; border:0; box-shadow:none; background:none; transition:color .2s,border-color .2s,background .2s; }
.chf a:hover{ color:var(--chf-rose) !important; }
.chf :focus-visible{ outline:1px solid var(--chf-rose); outline-offset:3px; }

/* ヘッダー下のカードリンクと同じ幅・同じ端 */
.chf-in{ max-width:1050px; margin-inline:auto; display:flex; flex-direction:column; gap:48px; }

/* 英字の小見出し */
.chf-h{ font-family:var(--chf-en); font-stretch:125%; text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:600; color:var(--chf-rose); margin-bottom:16px !important; }

/* ---- ロゴ・問い合わせ ---- */
.chf-top{ display:flex; flex-direction:column; gap:28px; padding-bottom:40px; border-bottom:1px solid var(--chf-line); }
.chf-brand{ display:flex; flex-direction:column; gap:16px; }
.chf-logo{ display:inline-block; width:184px; color:var(--chf-fg) !important; }
.chf-logo:hover{ color:var(--chf-fg) !important; opacity:.8; }
.chf-logo svg{ display:block; width:100%; height:auto; fill:currentColor; }
.chf-lead{ font-size:13px; color:var(--chf-sub); letter-spacing:.06em; }
.chf-contact{ display:flex; flex-direction:column; gap:12px; }
.chf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; height:52px; padding:0 24px; border:1px solid var(--chf-fg) !important; border-radius:2px; font-size:13px; letter-spacing:.1em; }
.chf-btn:hover{ background:var(--chf-fg) !important; color:var(--chf-bg) !important; }
.chf-btn .mk{ font-family:var(--chf-en); font-stretch:125%; font-weight:600; letter-spacing:.14em; font-size:11px; }

/* ---- メニュー ---- */
.chf-nav{ display:grid; grid-template-columns:1fr 1fr; gap:40px 24px; }
.chf-col li a{ display:inline-block; padding:6px 0; font-size:13px; color:var(--chf-sub) !important; line-height:1.6; }
.chf-col li a:hover{ color:var(--chf-fg) !important; }
.chf-col li a.ext::after{ content:" ↗"; font-size:11px; color:var(--chf-mute); }

/* ---- 店舗（神戸店・宝塚店） ---- */
.chf-store{ display:flex; flex-direction:column; gap:20px; padding-top:40px; border-top:1px solid var(--chf-line); }
.chf-store > .chf-h{ margin:0 !important; }
.chf-shops{ display:grid; grid-template-columns:1fr; gap:32px; }
.chf-shop{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.chf-store__nm{ font-size:16px; line-height:1.5; letter-spacing:.04em; }
.chf-store__info{ display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:1.8; color:var(--chf-sub); }
.chf-store__info div{ display:grid; grid-template-columns:84px 1fr; gap:12px; align-items:baseline; }
.chf-store__info dt{ color:var(--chf-mute); font-size:12px; letter-spacing:.08em; }
.chf-more{ display:inline-flex; align-items:center; gap:10px; align-self:flex-start; min-height:44px; position:relative; font-family:var(--chf-en); font-stretch:125%; text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:600; }
.chf-more::after{ content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:currentColor; opacity:.5; }
.chf-more .jp{ font-family:var(--chf-jp); font-stretch:100%; text-transform:none; letter-spacing:.08em; font-size:13px; font-weight:400; }

/* ---- 最下段 ---- */
.chf-bottom{ display:flex; flex-direction:column-reverse; gap:16px; padding-top:24px; border-top:1px solid var(--chf-line); font-size:12px; color:var(--chf-mute); }
.chf-copy{ font-family:var(--chf-en); font-stretch:112%; font-size:11px; letter-spacing:.12em; }
.chf-sns{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.chf-sns a{ font-size:12px; color:var(--chf-sub) !important; letter-spacing:.06em; }
.chf-sns a:first-child{ font-family:var(--chf-en); font-stretch:125%; text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:600; }

/* ====================== PC ====================== */
@media (min-width:960px){
  .chf{ padding:96px 5px 40px; }
  .chf-in{ gap:56px; }
  .chf-top{ flex-direction:row; justify-content:space-between; align-items:flex-end; padding-bottom:56px; }
  .chf-contact{ flex-direction:row; }
  .chf-btn{ min-width:220px; }
  .chf-nav{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px; }
  /* 左に「STORE」、右に2店舗を並べる。見出しと店名の上端をそろえる */
  .chf-store{ display:grid; grid-template-columns:160px minmax(0,1fr); align-items:start; gap:48px; padding-top:48px; }
  .chf-store > .chf-h{ padding-top:5px; }
  .chf-shops{ grid-template-columns:1fr 1fr; gap:24px 48px; }
  .chf-shop .chf-more{ margin-top:auto; }   /* 2店舗の「アクセス」の高さをそろえる */
  .chf-bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
}

/* 施工実績ページは直前に問い合わせ欄があるので、フッターのボタンは出さない */
.chw-single .chf-contact{ display:none; }