/* ─────────────────────────────────────────────────────────────
   gene showroom chrome — contact.html / document_request.html 用
   showroom版 LP/spec 等と同じヘッダ/フッターの見た目を、フォーム2ページに付与する。
   ※ index/spec/solist-ai/case-toppan/downloads はこのCSSを使わず各HTML内にインラインで同等定義を保持。
     ナビ/フッターのデザインを変える場合は「showroom各ページのインライン」と「このファイル」の両方を更新すること。
   ※ フォームページはヒーローが無いため、nav は showroom の fixed/透明ではなく sticky/常時ソリッドに調整。
   ───────────────────────────────────────────────────────────── */
:root {
  --accent: #aaff00;
  --accent-deep: #456e00;
  --bg: #ffffff;
  --bg-soft: #f6f6f3;
  --ink: #0e0e0c;
  --body: #4a4a47;
  --muted: #6f6f6a;
  --rule: #e6e6e1;
  --rule-strong: #d0d0c9;
  --font-body: 'DM Sans', 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', 'Source Code Pro', monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 32px;
}

/* scroll progress hairline */
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 200; height: 2px; width: 0; background: var(--accent); pointer-events: none; }

/* common.css の a:hover{text-decoration:underline} を chrome 内で打ち消す
   （showroom のホバーは下線ではなく色/ボーダーで表現するため） */
.nav a, .nav a:hover, .footer a, .footer a:hover { text-decoration: none; }

/* ═══════════ NAV（showroom と同一：初期は透明・下線なし → スクロールで .scrolled が付きフワッと表示） ═══════════ */
/* ※ common.css の body{overflow:hidden} が position:sticky を壊すため position:fixed を採用（showroomも fixed）。
   body に nav 初期高さ(68px)ぶんの上余白を付け、コンテンツがnav下に隠れないようにする。
   .scrolled の付け外しは shared.js（scrollY>20）が担当。初期状態は body 上余白＝白地なので透明ナビでも可読。 */
body { padding-top: 68px; background: var(--bg); }
.nav {
  box-sizing: border-box; /* common.css に全体 border-box リセットが無いため明示（高さ68/60pxをpadding込みに） */
  position: fixed; inset: 0 0 auto 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter); height: 68px; background: transparent;
  transition: background 0.4s var(--ease-out), backdrop-filter 0.4s, border-color 0.4s, height 0.4s, box-shadow 0.4s;
  border-bottom: 1px solid transparent;
  font-family: var(--font-body);
}
.nav.scrolled {
  background: rgba(255,255,255,0.82); backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--rule); height: 60px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo img { height: 28px; width: auto; filter: brightness(0) invert(60%); }
.nav-logo .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; transition: color 0.2s; letter-spacing: 0.02em; }
.nav-links a:hover { color: var(--accent-deep); }
.nav-links a.active-page { color: var(--accent-deep); }
.nav-cta { padding: 9px 22px !important; border-radius: 999px; background: var(--ink); color: #fff !important; font-weight: 600 !important; transition: transform 0.2s, box-shadow 0.2s !important; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.lang { display: flex; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.lang button { padding: 5px 11px; font-size: 11px; font-weight: 600; border: none; cursor: pointer; background: transparent; color: var(--muted); font-family: var(--font-body); transition: all 0.2s; }
.lang button.active { background: var(--ink); color: #fff; }
.menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 160; }
.menu-btn span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: 0.3s; }
.menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn.active span:nth-child(2) { opacity: 0; }
.menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════ FOOTER ═══════════ */
.footer { padding: 80px var(--gutter) 48px; background: var(--bg-soft); display: grid; gap: 22px; text-align: center; font-family: var(--font-body); }
.footer-logo img { height: 28px; width: auto; margin: 0 auto; filter: brightness(0) invert(60%); }
.footer-brand { font-size: 13px; color: var(--body); line-height: 1.8; max-width: 680px; margin: 0 auto; }
.footer-services, .footer-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; font-size: 12px; color: var(--muted); }
.footer-services .label { color: var(--ink); font-weight: 600; }
.footer-links { font-size: 11px; gap: 16px; margin-top: 2px; }
.footer-services a, .footer-links a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.18s, border-color 0.18s; }
.footer-services a:hover, .footer-links a:hover { color: var(--ink); border-color: var(--ink); }
.footer-copy { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 24px; margin-top: 8px; }
.lc { text-transform: none; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: rgba(255,255,255,0.97); backdrop-filter: blur(16px); padding: 24px var(--gutter); gap: 18px; border-bottom: 1px solid var(--rule); box-shadow: 0 6px 24px rgba(0,0,0,0.08); }
  .menu-btn { display: block; }
}