/* 画像を読み取る前・読み取れない場合の初期配色。theme.jsが上書きします。 */
:root {
  --theme-primary: #1c67ad;
  --theme-dark: #193652;
  --theme-ink: #172c4a;
  --theme-muted: #526982;
  --theme-soft: #edf5ff;
  --theme-soft-strong: #dcecff;
  --theme-page: #f9fbff;
  --theme-border: #cbddef;
  --theme-accent: #86afd3;
  --ink: var(--theme-ink);
  --teal: var(--theme-primary);
  --mint: var(--theme-soft);
}
body {
  color: var(--theme-ink);
  background: var(--theme-page);
}
.hero,
.hero-art,
.silver,
.feedback,
.guide-index {
  background: var(--theme-soft);
}
.btn,
.feedback .btn,
.end,
.closing {
  background: var(--theme-primary);
  color: #fff;
}
.btn.light,
.end .btn {
  background: #fff;
  color: var(--theme-ink);
}
.hero h1 em,
.eyebrow,
.feedback .eyebrow,
.read,
.guide-card-arrow,
.guide-card-icon {
  color: var(--theme-primary);
}
.strip,
.campaign {
  background: var(--theme-dark);
  color: #fff;
}
.strip p,
.campaign p {
  color: #fff;
}
.gold,
.strip small {
  color: #fff;
}
.coupon {
  background: var(--theme-soft);
}
.coupon .gold {
  color: var(--theme-primary) !important;
}
.coupon-box {
  border-color: var(--theme-border);
}
.coupon-box small {
  color: var(--theme-muted);
}
.code {
  border-color: var(--theme-border);
}
.hero-art::before {
  background: linear-gradient(90deg, var(--theme-soft), transparent 15%);
}
@media (max-width: 750px) {
  .hero-art::before {
    background: linear-gradient(var(--theme-soft), transparent 17%);
  }
}

/* Webカタログ本体への共通導線 */
.catalog-nav { color: var(--theme-primary); font-weight: 700; white-space: nowrap; }
.catalog-after-coupon { margin: 20px 0 0; font-size: 14px; }
.catalog-after-coupon a { color: var(--theme-primary); font-weight: 700; }
@media (max-width: 750px) {
  header { height: auto; min-height: 76px; flex-wrap: wrap; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
  header nav { display: flex; flex-wrap: wrap; gap: 10px 16px; }
}

/* 本体への導線をヘッダーナビゲーションの先頭で強調 */
header nav { align-items: center; }
header nav .catalog-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--theme-primary);
  color: #fff;
  padding: 11px 16px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 2px 7px rgba(0,0,0,0.08);
}
header nav .catalog-nav:hover { filter: brightness(0.93); }
@media (max-width: 750px) {
  header nav .catalog-nav { display: inline-flex; font-size: 11px; padding: 9px 12px; }
}