/* =================================================================
   404 強化ページ
   ================================================================= */
.not-found-page {
  --brand: #c8102e;
  --text: #222;
  --text-muted: #666;
  --border: #e8e8e8;
  --bg-soft: #faf7f5;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  color: var(--text);
}
.nf-container {
  max-width: 960px;
  padding: 40px 20px 60px;
}

/* ── ヘッダー ── */
.nf-header {
  text-align: center;
  margin: 24px 0 32px;
}
.nf-code {
  font-size: 96px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  margin: 0;
  letter-spacing: -3px;
}
.nf-h1 {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin: 12px 0 12px;
}
.nf-lead {
  color: #666;
  line-height: 1.85;
  font-size: 14px;
  margin: 0;
}

/* ── 検索ボックス ── */
.nf-search {
  display: flex;
  max-width: 600px;
  margin: 32px auto;
  gap: 0;
}
.nf-search input {
  flex: 1;
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.nf-search input:focus {
  border-color: var(--brand);
}
.nf-search button {
  padding: 14px 32px;
  background: var(--brand);
  color: #fff;
  border: 2px solid var(--brand);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.nf-search button:hover {
  background: #a20e26;
}

/* ── メイン CTA ── */
.nf-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 32px 0 48px;
}
.nf-cta-primary,
.nf-cta-secondary {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.15s, background 0.15s;
}
.nf-cta-primary {
  background: var(--brand);
  color: #fff;
}
.nf-cta-secondary {
  background: #fff;
  color: var(--brand);
  border: 1px solid var(--brand);
}
.nf-cta-primary:hover,
.nf-cta-secondary:hover {
  transform: translateY(-2px);
}
.nf-cta-secondary:hover {
  background: var(--brand);
  color: #fff;
}

/* ── セクション共通 ── */
.nf-section { margin: 40px 0; }
.nf-h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
  padding: 8px 0 8px 14px;
  border-left: 5px solid var(--brand);
}

/* ── 人気商品 ── */
.nf-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.nf-products a {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.nf-products a:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.nf-products img {
  border-radius: 4px;
  margin-bottom: 10px;
}
.nf-products strong {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 6px;
}
.nf-products span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
}

/* ── 最新記事 ── */
.nf-articles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.nf-articles a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  flex-wrap: wrap;
  gap: 8px;
  transition: border-color 0.15s;
}
.nf-articles a:hover {
  border-color: var(--brand);
}
.nf-article-cat {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 3px;
  font-weight: 700;
  flex-shrink: 0;
}
.nf-articles strong {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}
.nf-articles small {
  font-size: 11px;
  color: var(--text-muted);
}

.nf-help {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin: 40px 0 0;
}
.nf-help a {
  color: var(--brand);
  font-weight: 600;
}