/* =====================================================================
 * 外壁.JP 共通スタイル gaiheki-common.css
 * functions.php の wp_enqueue_scripts で全ページに読み込む。
 * 共通ヘッダー/フッター・コンテナ・リセット・トップページ用hoverを集約。
 * テーマ(Lightning)のCSSに勝つよう #gjp-site スコープ＋必要箇所は !important。
 * ===================================================================== */

/* ---- リセット / ベース ---- */
html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
#gjp-site *, #gjp-site *::before, #gjp-site *::after { box-sizing: border-box; }
#gjp-site {
  font-family: 'Noto Sans JP', sans-serif;
  color: #2b3a4d;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  width: 100%;
  overflow-x: hidden;
}
#gjp-site a { color: #1E3A63; text-decoration: none; }
#gjp-site a:hover { color: #f08300; }
#gjp-site img { max-width: 100%; }
#gjp-site h1, #gjp-site h2, #gjp-site h3, #gjp-site p { margin: 0; }
/* テーマがh見出しに付けるボーダー/背景の横線を消す（ページ側のinline !importantは尊重される） */
#gjp-site h1, #gjp-site h2, #gjp-site h3 { border: 0 !important; background: none !important; }
#gjp-site h1::before, #gjp-site h1::after,
#gjp-site h2::before, #gjp-site h2::after,
#gjp-site h3::before, #gjp-site h3::after { content: none !important; }

/* ---- 共通コンテナ（全ページ共通の幅） ---- */
#gjp-site .gjp-container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
/* 固定ページ本文など、単体コンテンツ用の上下余白 */
#gjp-site .gjp-page { padding-top: clamp(28px,4vw,44px); padding-bottom: clamp(40px,6vw,72px); }

/* =====================================================================
 * 共通ヘッダー
 * ===================================================================== */
#gjp-site .gjp-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid #dce5ef;
  box-shadow: 0 1px 8px rgba(30,58,99,.04);
}
#gjp-site .gjp-header-inner {
  padding-top: 12px; padding-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
#gjp-site .gjp-brand { display: flex; align-items: center; gap: 10px; }
#gjp-site .gjp-logo-link { display: flex; align-items: center; gap: 10px; transition: opacity .15s; }
#gjp-site .gjp-logo-link:hover { opacity: .85; }
#gjp-site .gjp-logo-img { height: 40px; width: auto; display: block; flex: none; }
@media (max-width: 600px){ #gjp-site .gjp-logo-img { height: 34px; } }
#gjp-site .gjp-subtitle { font-size: 12px; color: #7a8b9d; margin-left: 8px; white-space: nowrap; }

#gjp-site .gjp-header-right {
  display: flex; align-items: center; gap: clamp(14px,2.2vw,26px);
  flex-wrap: wrap; justify-content: flex-end;
}
#gjp-site .gjp-count { display: flex; align-items: baseline; gap: 5px; font-size: 11px; color: #7a8b9d; white-space: nowrap; }
#gjp-site .gjp-count b { font-size: 19px; font-weight: 900; color: #1E3A63; letter-spacing: .02em; }
#gjp-site .gjp-count i { font-style: normal; font-weight: 700; color: #1E3A63; font-size: 13px; }

/* ヘッダーナビ（wp_nav_menu 出力の ul） */
#gjp-site .gjp-nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(13px,1.8vw,24px); }
#gjp-site .gjp-nav li { margin: 0; }
#gjp-site .gjp-nav a { font-size: clamp(13px,1.5vw,15px); font-weight: 700; color: #1E3A63; }
#gjp-site .gjp-nav a:hover { color: #f08300; }
#gjp-site .gjp-nav .current-menu-item > a { color: #f08300; }

/* 検索アイコン */
#gjp-site .gjp-search-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: #f2f7fc; color: #1E3A63; flex: none;
}
#gjp-site .gjp-search-btn:hover { color: #f08300; }

/* ---- メイン ---- */
#gjp-site .gjp-main { display: block; }

/* =====================================================================
 * 共通フッター
 * ===================================================================== */
#gjp-site .gjp-footer { background: #1E3A63; color: #c3d2e2; }
#gjp-site .gjp-footer-top { padding-top: clamp(36px,5vw,54px); padding-bottom: clamp(26px,3vw,38px); }
#gjp-site .gjp-footer-grid { display: flex; flex-wrap: wrap; gap: clamp(24px,3vw,40px); }
#gjp-site .gjp-footer-brand { flex: 1 1 200px; min-width: 180px; }
#gjp-site .gjp-flogo { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 2px solid rgba(255,255,255,.5); }
#gjp-site .gjp-flogo .ic { width: 40px; height: 40px; border: 2.5px solid #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
#gjp-site .gjp-flogo .tx { display: flex; align-items: baseline; font-weight: 900; line-height: 1; }
#gjp-site .gjp-flogo .tx .a { font-size: 24px; color: #fff; }
#gjp-site .gjp-flogo .tx .b { font-size: 16px; color: #f08300; }
#gjp-site .gjp-house { display: block; margin-top: 22px; max-width: 100%; }

#gjp-site .gjp-footer-cols {
  flex: 3 1 620px; min-width: 260px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(115px,1fr)); gap: 26px 18px;
}
#gjp-site .gjp-region-title { font-size: 14px; font-weight: 800; color: #fff; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.2); margin-bottom: 13px; }
#gjp-site .gjp-region ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#gjp-site .gjp-region a { font-size: 13.5px; color: #c3d2e2; }
#gjp-site .gjp-region a:hover { color: #f08300; }
#gjp-site .gjp-region .off { font-size: 13.5px; color: #7f92ad; }

#gjp-site .gjp-footer-bottom { border-top: 1px solid rgba(255,255,255,.14); }
#gjp-site .gjp-footer-bottom-inner { padding-top: 22px; padding-bottom: 26px; }
/* フッターナビ（wp_nav_menu 出力の ul）— ｜区切りを疑似要素で付与 */
#gjp-site .gjp-fnav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 0; }
#gjp-site .gjp-fnav li { display: flex; align-items: center; }
#gjp-site .gjp-fnav li:not(:first-child)::before { content: '｜'; color: #4a5f80; margin: 0 14px; }
#gjp-site .gjp-fnav a { font-size: 13px; color: #c3d2e2; }
#gjp-site .gjp-fnav a:hover { color: #f08300; }
#gjp-site .gjp-foot-logo { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 20px auto 0; padding-bottom: 7px; border-bottom: 2px solid rgba(255,255,255,.42); }
#gjp-site .gjp-foot-logo .ic { width: 28px; height: 28px; border: 2px solid #fff; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex: none; }
#gjp-site .gjp-foot-logo .tx { display: inline-flex; align-items: baseline; }
#gjp-site .gjp-foot-logo .a { font-size: 18px; font-weight: 900; color: #fff; }
#gjp-site .gjp-foot-logo .b { font-size: 12px; font-weight: 900; color: #f08300; }
#gjp-site .gjp-copyright { text-align: center; font-size: 11.5px; color: #7f92ad; margin-top: 9px; }

/* =====================================================================
 * トップページ(front-page)専用の hover / 折り返し（旧inline<style>から移設）
 * ===================================================================== */
#gjp-site section h2 { min-width: 0; overflow-wrap: anywhere; }
#gjp-site .btn-search { transition: background .15s; }
#gjp-site .btn-search:hover { background: #d97600; }
#gjp-site .area-card { transition: box-shadow .15s, transform .15s, border-color .15s; }
#gjp-site .area-card:hover { box-shadow: 0 12px 24px rgba(30,58,99,.14); transform: translateY(-3px); border-color: #c3d5e7; }
#gjp-site .btn-detail { transition: background .15s; }
#gjp-site .btn-detail:hover { background: #eef3f8; }
#gjp-site .btn-quote { transition: background .15s; }
#gjp-site .btn-quote:hover { background: #d97600; color: #fff; }
#gjp-site .cta-btn { transition: background .15s, transform .15s; }
#gjp-site .cta-btn:hover { background: #d97600; color: #fff; transform: translateY(-2px); }
#gjp-site select:focus { outline: 2px solid #1E3A63; outline-offset: 1px; }