/* ============================================================
   Occur Global Polish (2026-04-27)
   全ページに適用するブランド層
   - 派生色トークン
   - 紙テクスチャ背景
   - 共通ボタン（btn / btn-primary / btn-ghost）
   - ヘッダー / フッター
   - 共通タイポ（明朝主体）
   ============================================================ */

:root {
  /* === Derived tokens (派生色) === */
  --og-paper: #F8F4ED;
  --og-paper-warm: #F4ECDC;
  --og-paper-cool: #F6F1E5;
  --og-page-cream: #F2EBDD;
  --og-section: #EDE5D4;
  --og-section-soft: #EAE3D2;
  --og-section-deep: #E2D9C3;
  --og-bg-beige: #E8E2D6;
  --og-soft-beige: #C8BFB1;
  --og-brown-mid: #6B4F3B;
  --og-brown-light: #8E6B4F;
  --og-brown-dark: #4A3525;
  --og-ink: #2C2825;
  --og-ink-soft: #3D3833;
  --og-grey: #6F6862;
  --og-navy: #1F2E47;
  --og-navy-mid: #2C3E5C;
  --og-navy-deep: #182338;
  --og-gold: #C49C64;
  --og-vermilion: #B5563A;

  --og-mincho: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "YuMincho",
               "ヒラギノ明朝 ProN W3", "Times New Roman", serif;
  --og-mono: "Space Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- 1. 紙背景 + グリッド + ノイズ（全ページ共通） ---------- */
body:not(.home) {
  background-color: var(--og-paper) !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.31  0 0 0 0 0.22  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(to right, rgba(200,191,177,0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200,191,177,0.12) 1px, transparent 1px);
  background-size: 280px 280px, 40px 40px, 40px 40px;
  color: var(--og-ink);
  font-family: var(--og-mincho);
}

/* ---------- 2. ヘッダー（全ページ共通） ---------- */
.site-header {
  background: rgba(248,244,237,0.92) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(107,79,59,0.18);
}
.site-header.scrolled,
.site-header.is-scrolled {
  background: rgba(248,244,237,0.98) !important;
}
.site-logo img {
  filter: none !important;
}
.nav-desktop a {
  font-family: var(--og-mincho) !important;
  color: var(--og-ink) !important;
  letter-spacing: 0.04em;
}
.nav-desktop a:hover {
  color: var(--og-brown-dark) !important;
}
.nav-desktop a.nav-contact-btn,
.nav-contact-btn {
  background: var(--og-brown-dark) !important;
  color: var(--og-paper) !important;
  border: 1px solid var(--og-brown-dark) !important;
  border-radius: 0 !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  box-shadow: none !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.nav-desktop a.nav-contact-btn:hover,
.nav-contact-btn:hover {
  background: var(--og-ink) !important;
  border-color: var(--og-ink) !important;
  color: var(--og-paper) !important;
}

/* ---------- 3. フッター（全ページ共通） ---------- */
.site-footer {
  background: var(--og-navy-deep) !important;
  color: rgba(244,239,230,0.85) !important;
  font-family: var(--og-mincho) !important;
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(244,239,230,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244,239,230,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.site-footer a {
  color: rgba(244,239,230,0.85) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer a:hover {
  color: var(--og-gold) !important;
}

/* ---------- 4. 共通ボタン（btn-primary / btn-ghost / btn-sm） ---------- */
.btn,
button.btn,
a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 18px 38px !important;
  font-family: var(--og-mincho) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  background: transparent !important;
  border: 1px solid var(--og-brown-mid) !important;
  color: var(--og-brown-dark) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn-primary,
.btn.btn-primary,
a.btn-primary {
  background: var(--og-brown-dark) !important;
  border: 1px solid var(--og-brown-dark) !important;
  color: var(--og-paper) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover {
  background: var(--og-ink) !important;
  border-color: var(--og-ink) !important;
  color: var(--og-paper) !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-ghost,
.btn.btn-ghost,
a.btn-ghost {
  border: none !important;
  border-bottom: 1px solid var(--og-brown-mid) !important;
  color: var(--og-brown-dark) !important;
  padding: 16px 6px !important;
  font-weight: 500 !important;
}
.btn-ghost:hover,
.btn.btn-ghost:hover,
a.btn-ghost:hover {
  border-bottom-color: var(--og-ink) !important;
  color: var(--og-ink) !important;
}
.btn-sm,
.btn.btn-sm {
  padding: 12px 24px !important;
  font-size: 0.9rem !important;
}
.btn-arrow {
  display: inline-block;
}

/* ---------- 5. ページヒーロー / 見出し共通 ---------- */
body:not(.home) .page-hero,
body:not(.home) .service-hero,
body:not(.home) .single-header {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,250,242,1) 0%, var(--og-paper-warm) 70%) !important;
  border-bottom: 2px solid var(--og-brown-mid) !important;
  position: relative;
  padding: 160px 0 100px !important;
}
body:not(.home) .page-hero::before,
body:not(.home) .service-hero::before,
body:not(.home) .single-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(107,79,59,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(107,79,59,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
body:not(.home) .page-hero > *,
body:not(.home) .service-hero > *,
body:not(.home) .single-header > * {
  position: relative;
  z-index: 1;
}

body:not(.home) h1,
body:not(.home) h2,
body:not(.home) h3,
body:not(.home) h4 {
  font-family: var(--og-mincho) !important;
  color: var(--og-ink) !important;
  font-feature-settings: "palt";
}

/* ---------- 6. 共通: section eyebrow ラベル ---------- */
.section-label,
.eyebrow,
.page-eyebrow {
  font-family: var(--og-mono) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.3em !important;
  color: var(--og-brown-dark) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  display: inline-block;
}

/* ---------- 7. パンくず ---------- */
.breadcrumb {
  font-family: var(--og-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.15em !important;
  color: var(--og-grey) !important;
}
.breadcrumb a {
  color: var(--og-brown-mid) !important;
}
.breadcrumb a:hover {
  color: var(--og-brown-dark) !important;
}

/* ---------- 8. リンク ---------- */
body:not(.home) a:not(.btn):not(.nav-contact-btn):not(.fp-btn):not(.site-logo) {
  color: var(--og-brown-dark);
  transition: color 0.2s ease;
}
body:not(.home) a:not(.btn):not(.nav-contact-btn):not(.fp-btn):not(.site-logo):hover {
  color: var(--og-ink);
}