/* ============================================================================
   common.css — ひとり社長AIナビ 共通スタイル（単一の正本）
   v=20260629b
   ----------------------------------------------------------------------------
   方針：記事(articles)テンプレの値をカノニカル（標準）として、全種別で共有する
   「クローム（ヘッダ・基本タイポ・カラートークン・基本ボタン）」をここに集約。
   このファイルは各ページのインライン <style> の "後" に読み込まれるため、
   ここでの定義がインラインを上書きして勝つ（同特異度・後勝ち）。
   ＝今後のヘッダ/タイポ/トークンの小改善は、このファイル1枚で全ページに効く。

   対象種別：記事 / 記事一覧 / 診断 / LP / pages / tokuten（＝Convention-A）。
   ※トップ index.html は別系統のクラス（.site-header/.global-nav）のため対象外。
   ※フッターはページ種別ごとにマークアップ構造（grid/flex・入れ子）が異なるため、
     統合すると崩れる。意図的にインライン維持（共通化対象外）。
   ============================================================================ */

/* ---- カラートークン / 余白トークン（カノニカル＝記事テンプレ）---- */
:root {
  --ink: #1C2B3A; --blue: #1B5FA8; --blue-lt: #EAF2FB; --blue-mid: #1A5496;
  --teal: #1A8C7A; --teal-lt: #E6F5F2; --gold: #8A6500; --gold-lt: #FDF6E3;
  --muted: #5A6A78; --rule: #DDE3EA; --bg: #F7F9FB; --white: #FFFFFF;
  --radius: 8px;
  --shadow: 0 1px 6px rgba(28,43,58,.08);
  --shadow-md: 0 4px 16px rgba(28,43,58,.10);
}

/* ---- リセット ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- 基本タイポ（カノニカル）---- */
body {
  background: var(--bg);
  font-family: 'Hiragino Sans','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================================
   ヘッダ（カノニカル＝記事テンプレ：高さ68px / max-width 1080 / gap 20 など）
   各種別のマークアップ差（.ai-badge/.logo-icon・.logo-link/.logo-wrap・
   header nav/.header-nav）を網羅するため、セレクタを束ねて指定する。
   ＝HTMLは触らず、CSSだけで全種別のヘッダを同一の見た目に統一。
   ============================================================================ */
header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  height: 68px;
  display: flex; align-items: center;
}
header .header-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 24px; width: 100%;
  display: flex; align-items: center; gap: 20px;
}
/* ロゴのリンク（.logo-link / pages の .logo-wrap） */
header .logo-link,
header .logo-wrap {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); flex-shrink: 0;
}
/* ロゴのアイコン箱（.ai-badge / .logo-icon） */
header .ai-badge,
header .logo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--blue); color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: .82rem; letter-spacing: -.02em;
}
header .logo-text { font-weight: 800; font-size: 15px; color: var(--ink); }
/* グローバルナビ（header nav / .header-nav） */
header nav,
header .header-nav {
  display: flex; align-items: center; gap: 4px; flex: 1; font-size: 13px;
}
header nav a,
header .header-nav a {
  padding: 6px 10px; border-radius: 6px;
  color: var(--muted); text-decoration: none; white-space: nowrap;
}
header nav a:hover,
header .header-nav a:hover { background: var(--bg); color: var(--ink); text-decoration: none; }
header nav a.current,
header .header-nav a.current { color: var(--ink); font-weight: 800; }
/* ヘッダ右のCTA */
header .header-cta {
  flex-shrink: 0;
  background: var(--blue); color: #fff;
  border-radius: 999px; padding: 10px 20px;
  font-weight: 700; font-size: 13px;
  text-decoration: none; white-space: nowrap;
}
header .header-cta:hover { background: var(--blue-mid); text-decoration: none; }

/* PC幅でナビを隠す既存ブレークポイントの統一（ハンバーガーは下のブロックで制御） */
@media (max-width: 720px) {
  header nav, header .header-nav { display: none; }
}

/* ============================================================================
   モバイル☰メニュー（CSSのみ・checkbox hack）— 既存ブロックを温存
   ※ここは触らない（M-1で確立済み・visited/cache-buster運用と一体）
   ============================================================================ */
    /* mobile menu (CSS only / checkbox hack) */
    .nav-toggle { display: none; }
    .nav-toggle-btn { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; color: var(--ink); font-size: 22px; line-height: 1; flex-shrink: 0; margin-left: auto; }
    .nav-toggle-btn:hover { background: var(--bg); }
    @media (max-width: 768px) {
      .nav-toggle-btn { display: inline-flex; }
      header .header-cta { margin-left: 8px; }
      header nav, header nav.header-nav { display: none !important; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--white); border-bottom: 1px solid var(--rule); box-shadow: 0 4px 16px rgba(28,43,58,.10); padding: 6px 0; z-index: 200; flex: none; }
      .nav-toggle:checked ~ nav, .nav-toggle:checked ~ nav.header-nav { display: flex !important; }
      header nav a { padding: 13px 20px !important; font-size: 15px !important; border-bottom: 1px solid var(--rule); border-radius: 0 !important; }
      header nav a:last-child { border-bottom: none; }
    }
    /* phone-width header fix (>=2026-06: keep hamburger on screen) */
    @media (max-width: 600px) {
      .logo-text small { display: none; }
      .logo-link, .site-logo { min-width: 0; flex: 1 1 auto; }
      .logo-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .header-inner { gap: 8px; flex-wrap: nowrap; justify-content: flex-start; }
      header .header-cta { margin-left: auto; padding: 8px 12px !important; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
      .nav-toggle-btn { margin-left: 4px !important; flex-shrink: 0; }
    }
    @media (max-width: 480px) {
      header .header-cta { display: none !important; }
      .nav-toggle-btn { margin-left: auto !important; }
    }
    /* phone-width header fix v2 (>=2026-06: hamburger absolute, never off-screen) */
    @media (max-width: 600px){
      .header-inner{ position: relative; padding-right: 52px; }
      .nav-toggle-btn{ display: inline-flex !important; position: fixed !important; top: 14px !important; right: 14px !important; left: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; z-index: 101 !important; }
      .global-nav{ top: 64px; }
    }
    @media (max-width: 600px){
      .header-inner > .btn-primary,
      .header-inner > .header-cta{ display: none !important; }
    }