:root {
  --bg: #f5f6f8;
  --card-bg: #ffffff;
  --border: #d9dce3;
  --text: #222;
  --sub-text: #555;
  --link: #0066cc;
  --button-bg: #333;
  --button-text: #fff;
  --rank-bg: #f0f4ff;
  --rank-text: #1f4aa8;

  --notice-text: #666;
  --notice-bg: #fff8e5;
  --notice-border: #f0d98c;

  --panel-border-soft: rgba(0, 0, 0, 0.06);
  --panel-border-soft-strong: rgba(0, 0, 0, 0.08);

  --chip-border: #d9dce3;
  --chip-border-hover: #c8ced8;
  --chip-border-active: #b8c2d0;

  --chip-bg: #f1f3f7;
  --chip-bg-hover: #e3e7ef;
  --chip-bg-active: #dbe2ec;

  --danger-bg: #bf0000;
  --danger-text: #ffffff;

  --error-border: #e3b4b4;
  --error-text: #c00;

  --diff-plus: #d32f2f;
  --diff-muted: #777;
  --price-down: #2e7d32;

  --item-divider-color: #e0e0e0;
  --item-border-light: #eee;
  --meta-border: #f0f0f0;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 20px;
  --font-size-4xl: 22px;
  --font-size-5xl: 24px;
  --font-size-6xl: 28px;

  --line-tight: 1.2;
  --line-snug: 1.4;
  --line-normal: 1.5;
  --line-relaxed: 1.6;
  --line-loose: 1.7;
  --line-blog: 1.8;

  --font-weight-bold: 700;

  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 18px rgba(0, 0, 0, 0.12);
  --shadow-inset-sm: inset 0 1px 3px rgba(0, 0, 0, 0.08);

  /* カテゴリ背景色 */
  --category-bg-0: #fefce8;
  --category-bg-1: #fff7ed;
  --category-bg-2: #eef2ff;
  --category-bg-3: #fdf2f8;
  --category-bg-4: #f0fdf4;
  --category-bg-5: #f5f3ff;
  --category-bg-6: #fff1f2;
  --category-bg-7: #ecfdf5;
  --category-bg-8: #f1f5f9;
  --category-bg-9: #fafaf9;
}

/* =========================
   ベース
   ========================= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: sans-serif;
  line-height: var(--line-normal);
}

/* =========================
   ページ共通
   ========================= */
.page {
  width: 100%;
  padding: 12px;
}

.page-header {
  margin-bottom: 16px;
}

.page-title {
  margin: 0 0 8px;
  font-size: var(--font-size-4xl);
  line-height: var(--line-snug);
}

.page-description {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--line-loose);
  color: var(--sub-text);
}

.page-footer {
  margin-top: 24px;
  padding: 16px 0 8px;
  font-size: var(--font-size-xs);
  color: var(--sub-text);
}

.page-footer p {
  margin: 0 0 6px;
}

.notice-box {
  display: block;
  margin: 8px 0 8px;
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  color: var(--notice-text);
  background-color: var(--notice-bg);
  border: 1px solid var(--notice-border);
  border-radius: var(--radius-sm);
  max-width: 100%;
  width: fit-content;
}

/* =========================
   パンくず
   ========================= */
.breadcrumb {
  margin-bottom: 12px;
  font-size: var(--font-size-md);
  color: var(--sub-text);
}

.breadcrumb a {
  color: var(--link);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb-separator {
  margin: 0 6px;
  color: var(--sub-text);
}

/* =========================
   ページトップボタン
   ========================= */
.page-top-button {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  background: var(--button-bg);
  color: var(--button-text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.2s ease;
}

.page-top-button:hover {
  opacity: 0.9;
}

.page-top-button.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.page-top-button-mobile {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.page-top-button-desktop {
  display: none;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-md);
  line-height: var(--line-snug);
}

/* =========================
   フッターリンク
   ========================= */
.footer-links {
  margin-bottom: 12px;
}

/* =========================
   共通レスポンシブ
   ========================= */
@media (min-width: 768px) {
  .page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px;
  }

  .page-title {
    font-size: var(--font-size-6xl);
  }

  .page-description {
    font-size: var(--font-size-lg);
  }

  .page-top-button-mobile {
    display: none;
  }

  .page-top-button-desktop {
    display: inline-block;
  }
}