/* =====================================================================
   THE EARTH BIKES 共通ヘッダー / フッター CSS（正本）
   このファイルを1か所編集すれば、build-common.js を通じて全ページに反映されます。
   ここに含めるのは「共通パーツ」のCSSのみ（ヘッダー/グローバルナビ/ドロップダウン/
   ONLINE STOREボタン/フッター/現在地表示/共通パーツのレスポンシブ）。
   ページ本文のCSSは各ページの <style> に残す方針。
   各ページでは </head> 直前でこのファイルを読み込むため、旧インラインの
   ヘッダー/フッターCSSより後に適用され、こちらが優先されます。
   ===================================================================== */

/* ===== HEADER ===== */
.hdr { position:sticky;top:0;z-index:100;width:100%;height:74px;background:rgba(255,255,255,.96);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;padding:0 48px; }
.hdr-logo { font-family:-apple-system,sans-serif;font-size:13px;font-weight:700;letter-spacing:.32em;color:#1a1a1a;text-transform:uppercase;flex-shrink:0;text-decoration:none;display:flex;align-items:center; }
.hdr-logo img { height:48px;width:auto;display:block; }
.hdr-nav { display:flex;margin-left:auto;gap:38px;align-items:center; }
.hdr-nav-item { position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;cursor:pointer; }
.hdr-nav-item a { font-family:-apple-system,sans-serif;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;color:inherit; }
.hdr-nav-item .is-disabled { display:flex;flex-direction:column;align-items:center;gap:3px;cursor:default;pointer-events:none; }
.hdr-nav-en { font-family:-apple-system,sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;color:#1a1a1a;text-transform:uppercase;line-height:1; }
.hdr-nav-jp { font-family:-apple-system,sans-serif;font-size:9px;font-weight:400;letter-spacing:.08em;color:#888;line-height:1;margin-top:3px; }

/* 現在地表示（active/current） */
.hdr-nav-item a.nav-current .hdr-nav-en { color:#b8950a; }
.hdr-nav-item a.nav-current .hdr-nav-jp { color:#b8950a; }
.hdr-nav-en.nav-cur { color:#b8950a; }

/* ONLINE STORE ボタン */
.online-store-btn { display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:38px;min-width:138px;padding:0 14px 0 16px;background:#1a1a1a;border:none;border-left:3px solid #e8b800;text-decoration:none;color:#fff;margin-left:28px;transition:background .2s ease; }
.online-store-text { display:flex;flex-direction:column;align-items:flex-start;justify-content:center; }
.online-store-en { font-family:-apple-system,sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;line-height:1;color:#fff;text-transform:uppercase; }
.online-store-ja { font-family:-apple-system,sans-serif;font-size:9px;font-weight:400;letter-spacing:.08em;margin-top:4px;line-height:1;color:rgba(255,255,255,.72); }
.online-store-btn:hover { background:#242424; }

/* ドロップダウン */
.hdr-dropdown { display:none;position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid #e8e8e8;min-width:160px;padding:12px 0;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.08); }
.hdr-nav-item:hover .hdr-dropdown { display:block; }
.hdr-dropdown a,
.hdr-dropdown span { display:block;font-family:-apple-system,sans-serif;font-size:12px;font-weight:400;letter-spacing:.03em;line-height:1.6;color:#333333;padding:10px 12px;white-space:nowrap;text-decoration:none;text-align:center; }
.hdr-dropdown a:visited { color:#333333; }
.hdr-dropdown a:hover { background:#f7f6f4;color:#1a1a1a; }
.hdr-dropdown a.is-current { color:#b8950a;font-weight:700; }
.hdr-nav-item::after { content:'';position:absolute;top:100%;left:0;right:0;height:20px; }

/* ===== FOOTER ===== */
.ftr { background:#0d0d0d;padding:72px 80px 36px; }
.ftr-top { display:grid;grid-template-columns:300px 1fr;gap:80px;padding-bottom:56px;border-bottom:1px solid #333;margin-bottom:36px; }
.ftr-logo { margin-bottom:20px; }
.ftr-logo img { height:80px;width:auto;display:block;filter:invert(1);opacity:.85; }
.ftr-tag { font-family:-apple-system,sans-serif;font-size:12px;color:#888;line-height:2.4;letter-spacing:.08em; }
.ftr-nav { display:grid;grid-template-columns:repeat(4,1fr);gap:0; }
.ftr-col-title { font-family:-apple-system,sans-serif;font-size:9px;font-weight:700;letter-spacing:.22em;color:#aaa;text-transform:uppercase;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid #383838; }
.ftr-link { font-family:-apple-system,sans-serif;font-size:12px;color:#aaa;display:block;margin-bottom:16px;letter-spacing:.06em;line-height:1;text-decoration:none; }
.ftr-link:hover { color:#fff; }
.ftr-bottom { display:flex;justify-content:space-between;align-items:center; }
.ftr-cr { font-family:-apple-system,sans-serif;font-size:10px;color:#aaa;letter-spacing:.08em;display:flex;flex-direction:column;gap:16px; }
.ftr-legal-links { display:flex;gap:32px;flex-wrap:wrap; }
.ftr-legal { font-family:-apple-system,sans-serif;font-size:10px;color:#aaa;letter-spacing:.08em;text-decoration:none; }
.ftr-legal:hover { color:#fff; }
.ftr-sns { display:flex;gap:24px; }
.sns-item { display:flex;align-items:center; }
.sns-item svg { width:20px;height:20px;stroke:#aaa;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }

/* ===== SP ハンバーガー / モバイルメニュー（PCでは非表示） ===== */
.hdr-burger { display:none; }
.sp-menu { display:none; }
body.sp-menu-open { overflow:hidden; }

/* ===== 共通パーツのレスポンシブ（PC/SP） ===== */
@media (max-width:768px) {
  .hdr { padding:0 18px;height:56px; }
  .hdr-logo img { height:40px; }
  .hdr-nav-item { display:none; }
  .online-store-btn { display:none; }   /* SPヘッダーからは削除（ハンバーガーメニュー内に残す） */
  .hdr-dropdown { display:none !important; }

  .ftr { padding:48px 20px 28px; }
  .ftr-top { grid-template-columns:1fr;gap:40px; }
  /* ブランド情報ブロック（ロゴ＋タグライン）のみ中央寄せ。ナビ・コピーライト・SNSは従来どおり */
  .ftr-top > div:first-child { text-align:center; }
  .ftr-logo img { margin-left:auto;margin-right:auto; }
  .ftr-tag { max-width:22em;margin-left:auto;margin-right:auto; }
  .ftr-nav { grid-template-columns:repeat(2,1fr);gap:32px; }
  .ftr-bottom { flex-direction:column;gap:24px;align-items:flex-start; }

  /* --- ハンバーガーボタン（☰ → ×） --- */
  .hdr-burger { display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:6px;padding:0;border:none;background:transparent;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent; }
  .hdr-burger-box { position:relative;width:22px;height:16px;display:block; }
  .hdr-burger-line, .hdr-burger-line::before, .hdr-burger-line::after { position:absolute;left:0;width:22px;height:1.6px;background:#1a1a1a;border-radius:2px; }
  .hdr-burger-line { top:50%;transform:translateY(-50%);transition:background .15s ease; }
  .hdr-burger-line::before, .hdr-burger-line::after { content:'';transition:top .2s ease,transform .2s ease; }
  .hdr-burger-line::before { top:-7px; }
  .hdr-burger-line::after { top:7px; }
  .hdr-burger.is-open .hdr-burger-line { background:transparent; }
  .hdr-burger.is-open .hdr-burger-line::before { top:0;transform:rotate(45deg); }
  .hdr-burger.is-open .hdr-burger-line::after { top:0;transform:rotate(-45deg); }

  /* --- フルスクリーンメニュー --- */
  .sp-menu { display:block;position:fixed;top:56px;left:0;right:0;bottom:0;background:#fff;z-index:99;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s; }
  .sp-menu.is-open { opacity:1;visibility:visible;transform:none; }
  .sp-menu-inner { padding:8px 24px calc(48px + env(safe-area-inset-bottom)); }

  /* アコーディオン */
  .sp-acc { border-bottom:1px solid #eee; }
  .sp-acc-head { width:100%;display:flex;align-items:center;justify-content:space-between;padding:20px 4px;background:transparent;border:none;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent; }
  .sp-acc-label { display:flex;flex-direction:column;gap:5px; }
  .sp-en { font-family:-apple-system,sans-serif;font-size:17px;font-weight:600;letter-spacing:.1em;color:#1a1a1a;text-transform:uppercase;line-height:1; }
  .sp-jp { font-family:-apple-system,sans-serif;font-size:11px;font-weight:400;letter-spacing:.06em;color:#999;line-height:1; }
  .sp-acc-icon { position:relative;width:14px;height:14px;flex-shrink:0; }
  .sp-acc-icon::before, .sp-acc-icon::after { content:'';position:absolute;background:#1a1a1a;transition:transform .2s ease,opacity .2s ease; }
  .sp-acc-icon::before { top:6px;left:0;width:14px;height:1.6px; }
  .sp-acc-icon::after { left:6px;top:0;width:1.6px;height:14px; }
  .sp-acc.open .sp-acc-icon::after { opacity:0;transform:scaleY(0); }
  .sp-acc-body { overflow:hidden;max-height:0;transition:max-height .25s ease; }
  .sp-acc.open .sp-acc-body { max-height:600px; }
  .sp-sub { display:block;padding:13px 4px 13px 18px;font-family:-apple-system,sans-serif;font-size:14px;letter-spacing:.04em;color:#444;text-decoration:none;position:relative; }
  .sp-sub::before { content:'';position:absolute;left:2px;top:50%;width:7px;height:1px;background:#ccc;transform:translateY(-50%); }
  .sp-acc-body .sp-sub:last-child { padding-bottom:18px; }

  /* 直リンク（EVENTS / BLOG / CONTACT / ONLINE STORE） */
  .sp-direct { display:flex;flex-direction:column;gap:5px;padding:20px 4px;border-bottom:1px solid #eee;text-decoration:none; }
  .sp-direct .sp-jp { color:#999; }
  .sp-store { margin-top:22px;border:1px solid #1a1a1a;padding:18px 20px;align-items:center;text-align:center; }
  .sp-store .sp-en { color:#1a1a1a; }
  .sp-store .sp-jp { color:#666; }

  /* 現在地（current） */
  .sp-sub.sp-current { color:#b8950a; }
  .sp-sub.sp-current::before { background:#e8b800;width:9px; }
  .sp-direct.sp-current .sp-en { color:#b8950a; }
  .sp-acc-head.sp-current-head .sp-en { color:#b8950a; }
}