/* ============================================================
   レトロ配色（オレンジ × ボルドー）
   指定色: オレンジ #c35e2b / ボルドー #8e2512
   元CSSの上に重ねる差分だけを書いている。
   外観 → 配色 で元の黒×ゴールドに戻せる。

   #c35e2b は中間の明度で、白文字も黒文字も 4.5:1 に届かない
   （4.2 / 4.4）。そのため用途別に濃淡を分けている:
     ・ボタンの下地   → #a84f25（白文字で 5.4:1）
     ・線・バッジ・装飾 → #c35e2b（指定色そのまま）
     ・ボルドー地の見出し → #e8b99f（4.9:1）
   ============================================================ */

:root {
	--r-orange:      #c35e2b;   /* 指定色。線・バッジ・装飾に使う */
	--r-orange-btn:  #a84f25;   /* ボタン下地。白文字で 5.4:1 */
	--r-orange-dk:   #8c4220;   /* ホバー */
	--r-orange-lt:   #e8b99f;   /* ボルドー地に載せる明るい橙 */
	--r-bordeaux:    #8e2512;   /* 指定色 */
	--r-bordeaux-dk: #6b1c0e;
	--r-cream:       #faf3e0;
	--r-cream-2:     #eee2c8;
	--r-ink:         #3d362f;
	--r-blue:        #8ab6f3;
}

/* ---------- 地色と文字 ---------- */
body {
	background-color: var(--r-cream);
	color: #4a423c;   /* クリーム地で 8.9:1 */
}
/* 見出しの色。ただし写真の上に載るもの（ヒーロー）や
   暗い面の上の文字は白のままにする。 */
h1, h2, h3, h4, h5, h6, .text-black { color: var(--r-ink) !important; }
.sampo-hero__title,
.sampo-hero h1, .sampo-hero h2,
header.sampo-top h1, header.sampo-top h2,
.text-white, .text-white-75,
footer.bg-black h1, footer.bg-black h2, footer.bg-black h3,
footer.bg-black h4, footer.bg-black h5, footer.bg-black h6 {
	color: #fff !important;
}
footer.bg-black .text-primary, footer.bg-black h5 { color: var(--r-orange-lt) !important; }

/* 白地の帯をクリームに寄せる */
.bg-white, .bg-light { background-color: var(--r-cream) !important; }

/* ---------- アクセント（ゴールド → オレンジ） ---------- */
.text-primary         { color: var(--r-orange) !important; }
.bg-primary           { background-color: var(--r-orange) !important; }
.border-primary       { border-color: var(--r-orange) !important; }
hr.bg-primary         { background-color: var(--r-orange) !important; }
.text-primary-hover:hover { color: var(--r-orange) !important; }

/* ボタン。オレンジは明るいので文字は黒にする（白文字だと読めない） */
.btn-primary {
	background-color: var(--r-orange-btn);
	border-color: var(--r-orange-btn);
	color: #fff;
	font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus {
	background-color: var(--r-orange-dk);
	border-color: var(--r-orange-dk);
	color: #fff;
}
.btn-outline-primary {
	border-color: var(--r-orange);
	color: var(--r-bordeaux);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
	background-color: var(--r-orange-btn);
	border-color: var(--r-orange-btn);
	color: #fff;
}

/* ---------- 暗い面をボルドーに ---------- */
.bg-black, footer.bg-black { background-color: var(--r-bordeaux) !important; }
.bg-dark                   { background-color: var(--r-bordeaux) !important; }

footer.bg-black,
footer.bg-black p,
footer.bg-black li,
footer.bg-black div,
footer.bg-black span,
footer.bg-black .text-xs { color: #f6ece0; }
footer.bg-black a        { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
footer.bg-black a:hover  { color: var(--r-orange); text-decoration-color: var(--r-orange); }
footer.bg-black .text-primary,
footer.bg-black h5       { color: var(--r-orange-lt) !important; }

/* ---------- 告知バー ---------- */
/* 告知バー。#c35e2b 地では文字のコントラストが足りないので、
   ボルドー地にクリーム文字（7.8:1）にしている。 */
.announce-bar { background: var(--r-bordeaux); }
.announce-bar .announce-label { color: #faf3e0; }
.announce-btn, .announce-btn:visited {
	border-color: #f3d9cc;
	color: #faf3e0;
}
.announce-btn:hover, .announce-btn:focus {
	background: #faf3e0;
	color: var(--r-bordeaux);
}
.announce-sep { background: rgba(250, 243, 224, .45); }

/* ---------- ナビ ---------- */
.navbar-light .navbar-nav .nav-link { color: var(--r-bordeaux); }
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus { color: var(--r-orange); }
.navbar-light .navbar-brand { color: var(--r-bordeaux); }
.navbar-light .navbar-brand:hover { color: var(--r-orange); }
.navbar-togglable .navbar-collapse.show { background: var(--r-cream); }

/* ---------- メニューページ ---------- */
.sampo-jump { background: rgba(250, 243, 224, .95); border-bottom-color: var(--r-cream-2); }
.sampo-jump__label { color: var(--r-bordeaux); }
.sampo-jump__items a { color: #7d7166; }
.sampo-jump__items a:hover { background: var(--r-cream-2); color: var(--r-ink); }
.sampo-jump__items a.is-current { background: var(--r-orange-btn); color: #fff; }

.sampo-group__title { color: var(--r-bordeaux); }
.sampo-group__title::after { background: var(--r-orange); }
.sampo-section__head { border-bottom-color: var(--r-bordeaux); }
.sampo-section__title { color: var(--r-bordeaux); }
.sampo-rule, .sampo-rule.is-center { background: var(--r-orange); }

.sampo-item { border-bottom-color: var(--r-cream-2); }
.sampo-item__name { color: var(--r-ink); }
.sampo-item__desc { color: #7d7166; }
.sampo-subgroup { color: var(--r-orange-dk); }
.sampo-badge { background: var(--r-orange-btn); color: #fff; }
.sampo-badge--nigori { background: var(--r-blue); color: #16324f; }
.sampo-badge--out { background: var(--r-bordeaux); color: #fff; }
.sampo-hero { background-color: var(--r-bordeaux); }

/* ---------- 画像の枠飾りをクリームに ---------- */
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--r-cream-2) !important; }

/* おすすめカード */
.sampo-pick__photo { background: var(--r-cream-2); }
.sampo-picks { border-bottom-color: var(--r-cream-2); }
.sampo-picks__head h2 { color: var(--r-bordeaux); }
.sampo-pick__cat { color: var(--r-orange-dk); }
.sampo-pick__name { color: var(--r-ink); }
.sampo-pick__desc { color: #7d7166; }