/* === A案 デザイントークン (ネイビー / ベージュ / ゴールド) ===
 * 主要色は CSS 変数として宣言し、Bootstrap 流の bg-*, text-*, btn-* 命名規則で
 * カスタムユーティリティとして提供する */
:root {
  --navy: #1f2d4a;
  --navy-dark: #142036;
  --navy-light: #3a4a6e;
  --beige: #f5efe4;
  --beige-dark: #e8dfcc;
  --paper: #faf6ee;
  --gold: #a88842;
  --gold-light: #c9ad6f;
  --ink: #2a2620;
  --ink-soft: #5a544a;
  --rule: #d9cfb8;
}

/* ===== 全体 (body) ===== */
body {
  background: var(--beige);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
}
body > main, body > .container, body > .container-fluid { color: inherit; }

/* 管理画面はダーク基調を維持するため beige を上書き */
body.admin-layout { background: #fff; color: #212529; }

a { color: var(--navy); }
a:hover { color: var(--navy-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  color: var(--navy);
}

/* ===== Bootstrap 風カラーユーティリティ ===== */
.bg-navy { background-color: var(--navy) !important; }
.bg-navy-dark { background-color: var(--navy-dark) !important; }
.bg-navy-light { background-color: var(--navy-light) !important; }
.bg-beige { background-color: var(--beige) !important; }
.bg-beige-dark { background-color: var(--beige-dark) !important; }
.bg-paper { background-color: var(--paper) !important; }
.bg-gold { background-color: var(--gold) !important; }
.bg-gold-light { background-color: var(--gold-light) !important; }
.bg-rule { background-color: var(--rule) !important; }

.text-navy { color: var(--navy) !important; }
.text-navy-light { color: var(--navy-light) !important; }
.text-gold { color: var(--gold) !important; }
.text-gold-light { color: var(--gold-light) !important; }
.text-ink { color: var(--ink) !important; }
.text-ink-soft { color: var(--ink-soft) !important; }

.border-gold { border-color: var(--gold) !important; }
.border-gold-light { border-color: var(--gold-light) !important; }
.border-navy { border-color: var(--navy) !important; }
.border-navy-light { border-color: var(--navy-light) !important; }
.border-rule { border-color: var(--rule) !important; }

/* セリフ/サンセリフ */
.font-serif {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
}
.font-sans {
  font-family: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", sans-serif;
}

/* 文字間 */
.tracking-wide   { letter-spacing: 0.08em; }
.tracking-wider  { letter-spacing: 0.18em; }
.tracking-widest { letter-spacing: 0.3em; }

/* ===== ボタン ===== */
.btn-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--navy-dark);
  --bs-btn-hover-border-color: var(--navy-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--navy-dark);
  --bs-btn-active-border-color: var(--navy-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--navy-light);
  --bs-btn-disabled-border-color: var(--navy-light);
  border-bottom: 2px solid var(--gold);
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.18em;
}

.btn-outline-navy {
  --bs-btn-color: var(--navy);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--navy-light);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--navy);
  --bs-btn-hover-border-color: var(--navy);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--navy);
  --bs-btn-active-border-color: var(--navy);
  --bs-btn-disabled-color: var(--navy-light);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--navy-light);
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.15em;
}

.btn-gold {
  --bs-btn-color: var(--navy);
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-hover-bg: var(--gold-light);
  --bs-btn-hover-border-color: var(--gold-light);
  --bs-btn-active-color: var(--navy);
  --bs-btn-active-bg: var(--gold-light);
  --bs-btn-active-border-color: var(--gold-light);
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.18em;
}

.btn-outline-gold {
  --bs-btn-color: var(--gold);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-hover-bg: var(--gold);
  --bs-btn-hover-border-color: var(--gold);
  --bs-btn-active-color: var(--navy);
  --bs-btn-active-bg: var(--gold);
  --bs-btn-active-border-color: var(--gold);
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.15em;
}

/* ===== ゴールド線+ダイヤ装飾 ===== */
.gold-rule-diamond {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.gold-rule-diamond .line {
  width: 24px;
  height: 1px;
  background: var(--gold);
}
.gold-rule-diamond .diamond {
  width: 4px;
  height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* ===== ナビゲーションバー（A 案: navy bg + gold bottom border） =====
 * サイト共通のメインナビゲーション用コンポーネントクラス。
 * `%nav.navbar.navbar-main` のように指定して使用する。 */
.navbar-main {
  background-color: var(--navy);
  border-bottom: 2px solid var(--gold);
  padding: 0.4rem 0;
}
.navbar-main .navbar-brand {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
}
.navbar-main .navbar-brand:hover,
.navbar-main .navbar-brand:focus { color: var(--gold-light); }
.navbar-main .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  letter-spacing: 0.04em;
}
.navbar-main .nav-link:hover,
.navbar-main .nav-link:focus,
.navbar-main .nav-link.active { color: var(--gold-light); }
.navbar-main .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.navbar-main .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-main .dropdown-menu {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
}
.navbar-main .dropdown-item {
  color: var(--ink);
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}
.navbar-main .dropdown-item:hover,
.navbar-main .dropdown-item:focus {
  background: var(--beige-dark);
  color: var(--navy);
}
.navbar-main .btn-link {
  color: var(--ink);
  text-decoration: none;
}
.navbar-main .btn-link:hover { color: var(--navy); }

/* ===== フッター（A 案: navy-dark bg） =====
 * サイト共通のメインフッター用コンポーネントクラス。
 * `%footer.footer-main` のように指定して使用する。 */
.footer-main {
  background-color: var(--navy-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 24px 18px 28px;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-size: 0.9rem;
  line-height: 1.9;
  text-align: center;
  letter-spacing: 0.04em;
}
.footer-main a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.footer-main a:hover { color: var(--gold-light); }
.footer-main .muted { color: rgba(255, 255, 255, 0.45); }
.footer-main .gold-line {
  width: 24px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 12px;
}

/* ===== パンくず（A 案配色） ===== */
.breadcrumb {
  background: transparent;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--ink-soft); }
.breadcrumb-item a:hover { color: var(--navy); }
.breadcrumb-item.active { color: var(--navy); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--gold); }