/* ========================================================
   static-page.css — お問い合わせ・プライバシーポリシー・免責事項ページ共用
   product.css / card-detail.css の CSS 変数構成を踏襲
   ======================================================== */

:root {
  --cd-bg:       #0f1117;
  --cd-surface:  #1a1d27;
  --cd-border:   #2a2d3a;
  --cd-text:     #e0e4ef;
  --cd-muted:    #7a7f99;
  --cd-accent:   #5b8af5;
  --cd-accent-h: #7ba4ff;
  --cd-cta-bg:   #5b8af5;
  --cd-cta-text: #fff;
}

html[data-theme="light"] {
  --cd-bg:       #f7f2e8;
  --cd-surface:  #ffffff;
  --cd-border:   #cfc5aa;
  --cd-text:     #1c1710;
  --cd-muted:    #7a6e5a;
  --cd-accent:   #b8902e;
  --cd-accent-h: #a07828;
  --cd-cta-bg:   #b8902e;
  --cd-cta-text: #fff;
  background: #ede7d8;
}

html[data-theme="light"] body {
  background: linear-gradient(180deg, #e8edff 0%, #f5f0e8 22%, #f7f2e8 100%) fixed;
}

html[data-theme="light"] .cd-header {
  background: rgba(247, 242, 232, 0.97);
  border-bottom-color: rgba(184, 144, 46, 0.30);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--cd-bg);
  color: var(--cd-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 52px;
}

a { color: var(--cd-accent); text-decoration: none; }
a:hover { color: var(--cd-accent-h); text-decoration: underline; }

/* ---- Header（product.css と同一構成） ---- */
.cd-header {
  background: var(--cd-surface);
  border-bottom: 1px solid var(--cd-border);
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.cd-logo-wrap { display: flex; align-items: baseline; gap: 12px; min-width: 0; overflow: hidden; }
.cd-logo {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c9a55a;
  white-space: nowrap;
  flex-shrink: 0;
}
.cd-logo:hover { text-decoration: none; color: #dab96d; }
.cd-subtitle { font-size: 11px; color: var(--cd-muted); letter-spacing: 0.06em; white-space: nowrap; }
html[data-theme="light"] .cd-logo { color: #7a5814; }

.cd-nav-row { display: none; width: 100%; align-items: center; }
html[data-spa-nav] .cd-logo-wrap { display: none; }
html[data-spa-nav] .cd-nav-row { display: flex; }
.cd-back-btn, .cd-close-btn {
  background: none; border: 1px solid var(--cd-border); color: var(--cd-muted);
  cursor: pointer; font-size: 13px; padding: 4px 10px; border-radius: 6px;
  transition: color .15s, border-color .15s; flex-shrink: 0;
}
.cd-back-btn:hover, .cd-close-btn:hover { color: var(--cd-text); border-color: var(--cd-accent); }
.cd-close-btn { text-decoration: none; }
.cd-nav-title {
  flex: 1; text-align: center; font-size: 15px; font-weight: 600; color: var(--cd-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px;
}

/* ---- 本文 ---- */
.sp-wrap { max-width: 720px; margin: 0 auto; padding: 32px 20px 40px; width: 100%; flex: 1; }
.sp-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.sp-updated { font-size: 12px; color: var(--cd-muted); margin-bottom: 28px; }
.sp-section { margin-bottom: 28px; }
.sp-section h2 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--cd-accent); }
.sp-section p, .sp-section li { font-size: 14px; line-height: 1.8; color: var(--cd-text); }
.sp-section ul { padding-left: 1.4em; margin-top: 6px; }
.sp-section li { margin-bottom: 4px; }
.sp-note { font-size: 12px; color: var(--cd-muted); margin-top: 6px; }

/* ---- お問い合わせフォーム ---- */
.sp-form-row { margin-bottom: 16px; }
.sp-form-row label { display: block; font-size: 13px; color: var(--cd-muted); margin-bottom: 6px; }
.sp-form-row input, .sp-form-row textarea {
  width: 100%; background: var(--cd-surface); border: 1px solid var(--cd-border);
  border-radius: 8px; color: var(--cd-text); padding: 10px 12px; font-size: 14px;
  font-family: inherit; outline: none;
}
.sp-form-row input:focus, .sp-form-row textarea:focus { border-color: var(--cd-accent); }
.sp-form-row textarea { min-height: 140px; resize: vertical; }
.sp-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sp-submit {
  background: var(--cd-cta-bg); color: var(--cd-cta-text); border: none; border-radius: 8px;
  padding: 12px 24px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.sp-submit:disabled { opacity: .5; cursor: not-allowed; }
.sp-submit:not(:disabled):hover { background: var(--cd-accent-h); }
.sp-status { margin-top: 12px; font-size: 13px; }
.sp-status.ok { color: #81c784; }
.sp-status.err { color: #ef9a9a; }