/* ===== callcenter-ai.jp 共通ヘッダー・フッター（AIテレアポ rabona-ai.com と同じ構成、アクセントはピンク） =====
   適用: tools/apply_chrome.py が全ページの <header>/<footer> を差し替え、この CSS を <link> する。
   既存ページの .header-inner / .gnav 等と衝突しないよう、クラス名は hdr-* / ftr-* / btn-* を使う。 */
:root{--cc-accent:#E85A8E;--cc-accent-dark:#C4386C;--cc-accent-light:#FFF3F8;--cc-footer:#2A1F27}
#header{position:fixed;top:0;left:0;right:0;background:#fff;z-index:100;height:90px;box-shadow:0 2px 4px rgba(91,91,95,.1)}
#header .hdr-inner{width:1400px;max-width:calc(100vw - 40px);margin:0 auto;padding:0 40px;display:flex;align-items:center;height:100%;gap:40px}
#header .hdr-logo{font-family:'Poppins','Inter','Hiragino Sans',sans-serif;font-size:16px;font-weight:700;color:#000;line-height:1;text-decoration:none;white-space:nowrap}
#header .hdr-nav{display:flex;align-items:center;gap:40px;font-size:14px;font-weight:500;color:#414143}
#header .hdr-nav a{color:#414143;text-decoration:none;transition:color .3s;white-space:nowrap}
#header .hdr-nav a:hover,#header .hdr-nav a.current{color:var(--cc-accent)}
#header .hdr-btns{display:flex;gap:8px;align-items:center;margin-left:auto}
#header .hdr-login{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--cc-accent);text-decoration:none;margin-right:12px;white-space:nowrap}
#header .btn-fill{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;background:var(--cc-accent);color:#fff;border-radius:50px;font-size:14px;font-weight:700;text-decoration:none;transition:.3s ease-out;white-space:nowrap}
#header .btn-fill:hover{background:var(--cc-accent-dark)}
#header .btn-line{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;background:#fff;color:var(--cc-accent);border:2px solid var(--cc-accent);border-radius:50px;font-size:14px;font-weight:700;text-decoration:none;transition:.3s ease-out;white-space:nowrap}
#header .btn-line:hover{background:var(--cc-accent-light)}
/* ドロップダウン（業種別 / お役立ち） */
#header .hdr-nav .has-menu{position:relative;height:90px;display:flex;align-items:center}
#header .hdr-nav .menu-label{cursor:default;color:#414143;white-space:nowrap;padding-right:14px;position:relative}
#header .hdr-nav .menu-label:after{content:"";position:absolute;right:0;top:50%;width:6px;height:6px;border-right:1.5px solid #8a8a90;border-bottom:1.5px solid #8a8a90;transform:translateY(-70%) rotate(45deg)}
#header .hdr-nav .has-menu:hover .menu-label{color:var(--cc-accent)}
#header .hdr-menu{position:absolute;top:100%;left:-18px;margin-top:-16px;background:#fff;border:1px solid #ece7ea;border-radius:14px;box-shadow:0 14px 40px rgba(40,20,30,.14);padding:12px;min-width:280px;display:none;z-index:101}
#header .hdr-menu.-cols{display:none;grid-template-columns:1fr 1fr;min-width:520px}
#header .has-menu:hover .hdr-menu{display:block}
#header .has-menu:hover .hdr-menu.-cols{display:grid}
#header .hdr-menu a{display:block;padding:9px 14px;border-radius:8px;font-size:13.5px;color:#414143;white-space:nowrap}
#header .hdr-menu a:hover{background:var(--cc-accent-light);color:var(--cc-accent)}
/* 固定ヘッダーぶんの余白。もともとヘッダーが通常フローだったページにだけ入れる */
.hdr-spacer{height:90px}

#footer{background:var(--cc-footer);color:rgba(255,255,255,.6);padding:64px 0 16px;font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',Meiryo,sans-serif}
#footer .ftr-inner{width:1200px;max-width:calc(100vw - 60px);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1.5fr 1.2fr;gap:40px}
#footer .ftr-brand .ftr-logo{font-family:'Poppins','Inter',sans-serif;font-size:22px;font-weight:800;color:#fff;display:block;margin-bottom:16px}
#footer .ftr-brand p{font-size:13px;line-height:1.8;margin:0}
#footer .ftr-title{color:#fff;font-size:14px;font-weight:700;margin-bottom:20px}
#footer .ftr-nav{list-style:none;margin:0;padding:0}
#footer .ftr-nav li{margin-bottom:12px}
#footer .ftr-nav a{font-size:13px;color:rgba(255,255,255,.5);transition:color .3s;text-decoration:none}
#footer .ftr-nav a:hover{color:#fff}
#footer .ftr-nav.-cols{columns:2;column-gap:20px}
#footer .ftr-nav.-cols li{break-inside:avoid}
#footer .ftr-btm{max-width:calc(100vw - 60px);width:1200px;margin:48px auto 0;padding:24px;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.4)}
#footer .ftr-btm a{color:rgba(255,255,255,.5);text-decoration:none}
@media(max-width:768px){
  #header{height:50px}
  #header .hdr-inner{height:50px;padding:0 12px;width:100%;gap:8px}
  #header .hdr-logo{font-size:13px}
  #header .hdr-nav,#header .hdr-login{display:none}
  #header .hdr-menu{display:none !important}
  #header .hdr-btns{gap:6px}
  #header .btn-fill,#header .btn-line{padding:7px 12px;font-size:10px;border-radius:6px}
  .hdr-spacer{height:50px}
  #footer{padding:20px 0 8px}
  #footer .ftr-inner{display:flex;flex-direction:column;gap:8px}
  #footer .ftr-brand .ftr-logo{font-size:16px;margin-bottom:2px}
  #footer .ftr-brand p{font-size:10px;line-height:1.4}
  #footer .ftr-title{font-size:11px;margin-bottom:2px;margin-top:6px}
  #footer .ftr-nav li{margin-bottom:2px}
  #footer .ftr-nav a{font-size:10px}
  #footer .ftr-nav.-cols{columns:2}
  #footer .ftr-btm{width:100%;max-width:100%;flex-direction:column;gap:2px;text-align:center;padding:8px;margin-top:8px}
  #footer .ftr-btm span{font-size:9px}
}