@charset "UTF-8";
/* ==========================================================================
明和住宅 サイト共通カラー定義 meiwa-colors.css
確定日: 2026-07-11（一覧・詳細用の強調背景・サイド背景を追加）
--------------------------------------------------------------------------
このファイルが「サイト全体の色の唯一の正（マスター）」です。
色を変えたいときは、この :root の中の値を書き換えるだけで、
このファイルを読み込んでいる全ページの色が一斉に変わります。
使い方（各ページの HTML の 内、既存の CSS より前に読み込む）:
※置き場所はサイトのルート直下（例: /meiwa-colors.css）を推奨。
※既存 CSS 側では、色の代わりに var(--変数名) を使ってください。
例: a { color: var(--link); }
※変更したら Claude 側の基準表（meiwa-seo-audit-top スキルの
「確定カラーパレット」）も同じ値に更新すること。
========================================================================== */
:root {
/* --- 背景 ------------------------------------------------------------ */
--bg-beige: #FFF3DB; /* ページ背景ベージュ */
--bg-side: #FFE6B3; /* コンテンツ外側（左右）の背景 */
/* --- 本文テキスト（ベージュ地・4.5:1 以上） -------------------------- */
--text-black: #444444; /* 黒文字 8.9:1 */
--text-red: #DC143C; /* 赤文字 4.5:1 ★文字の赤はこれに統一 */
--text-green: #287E51; /* 緑文字 4.6:1 */
--text-orange: #C54500; /* 橙文字 4.5:1 */
/* --- 本文中リンク（青系・4.5:1 以上） ------------------------------- */
--link: #0069E8; /* 通常 4.6:1 */
--link-hover-bg: #EDF8FF; /* ホバー時の背景（文字色はそのまま） */
--link-visited: #8A2BE2; /* 訪問済み 5.4:1 */
/* --- リンクボタン（赤系・4.5:1 以上） ------------------------------- */
--btn-link: #DC143C; /* 通常 4.5:1 */
--btn-hover-bg: #FFF2F5; /* ホバー時の背景（文字色はそのまま） */
--btn-visited: #9933CC; /* 訪問済み 5.2:1 */
/* --- 強調背景（一覧・詳細ページ用） --------------------------------- */
--em-orange: #FFCB29; /* オレンジ強調背景 */
--em-yellow: #FFFF99; /* 黄色強調背景 */
/* --- 見出し帯：太字20px以上／通常24px以上の白文字専用（3:1 以上） --- */
--band-green: #00AB5D; /* 緑帯 白文字 3.0:1 */
--band-red: #FF0901; /* 赤帯 白文字 4.0:1 ★文字色には不可 */
--band-blue: #008CE3; /* 青帯 白文字 3.6:1 */
--band-orange: #FF610D; /* 橙帯 白文字 3.0:1 */
--band-pink: #FF5F41; /* ピンク帯 白文字 3.0:1（一覧・詳細見出し） */
/* --- 白文字をサイズ問わず載せてよい帯（4.5:1 以上） ----------------- */
--band-green-footer: #00884A; /* フッター緑 白文字 4.5:1 */
--band-brown: #993300; /* 茶 白文字 7.4:1 */
--band-navy: #003399; /* 紺 白文字 10.9:1 */
/* --- 白（帯の上に載せる文字） --------------------------------------- */
--on-band: #FFFFFF;
}
/* --------------------------------------------------------------------------
すぐ使える基本スタイル（不要なら削除可。既存 CSS と競合する場合は
こちらをコメントアウトし、変数だけ利用してください）
-------------------------------------------------------------------------- */
body {
background: var(--bg-side); /* コンテンツ外側（左右） */
color: var(--text-black);
}
/* コンテンツ本体を包む要素に付ける。例: ...
*/
.page {
background: var(--bg-beige);
}
/* 本文中リンク（青） */
a {
color: var(--link);
}
a:hover {
background: var(--link-hover-bg);
}
a:visited {
color: var(--link-visited);
}
/* リンクボタン（赤）: HTML 側で class="btn-link" を付けた要素に適用 */
.btn-link {
color: var(--btn-link);
}
.btn-link:hover {
background: var(--btn-hover-bg);
}
.btn-link:visited {
color: var(--btn-visited);
}
/* 画像だけのリンクはホバー地を付けない（下地が透けないように） */
a.img-link:hover,
a:has(> img):hover {
background: transparent;
}
/* 本文用の色文字（ベージュ地・黄色地で使用可） */
.text-red { color: var(--text-red); }
.text-green { color: var(--text-green); }
.text-orange { color: var(--text-orange); }
/* --------------------------------------------------------------------------
強調背景（一覧・詳細ページ）
-------------------------------------------------------------------------- */
/* オレンジ強調背景 #FFCB29
★載せてよい文字色:
サイズ自由 … 黒 #444444（6.4:1）／紺 #003399（7.2:1）／茶 #993300（4.9:1）
太字20px以上限定 … 赤 #DC143C（3.3:1）／緑 #287E51（3.3:1）
★オレンジ地の「小さい」赤・緑は使用不可。黒・紺・茶に置き換えるか、
背景を黄色 .em-yellow に変えること。 */
.em-orange {
background: var(--em-orange);
color: var(--text-black);
}
/* オレンジ地で赤・緑を使うときは必ずこのクラスを併用する（20px太字を強制） */
.em-orange .em-red,
.em-orange .em-green {
font-size: 20px;
font-weight: bold;
}
.em-orange .em-red { color: var(--text-red); }
.em-orange .em-green { color: var(--text-green); }
/* オレンジ地でサイズを問わず使える色 */
.em-orange .em-navy { color: var(--band-navy); }
.em-orange .em-brown { color: var(--band-brown); }
/* 黄色強調背景 #FFFF99
黒 #444444（9.3:1）／赤 #DC143C（4.8:1）／青 #0069E8（4.8:1）／
茶 #993300（7.1:1）— すべてサイズ・太さを問わず使用可 */
.em-yellow {
background: var(--em-yellow);
color: var(--text-black);
}
.em-yellow .em-red { color: var(--text-red); }
.em-yellow .em-blue { color: var(--link); }
.em-yellow .em-brown { color: var(--band-brown); }
/* --------------------------------------------------------------------------
見出し帯クラス
★ band-green / band-red / band-blue / band-orange / band-pink は
白文字が 3:1 ぎりぎりのため、必ず「太字20px以上（または通常24px以上）」
で使うこと。小さい文字を白で載せる場所には band-green-footer /
band-brown / band-navy を使う。
-------------------------------------------------------------------------- */
.band-green,
.band-red,
.band-blue,
.band-orange,
.band-pink {
color: var(--on-band);
font-size: 20px; /* これ未満に縮小しない（3:1 の前提が崩れる） */
font-weight: bold; /* 太字必須 */
}
.band-green { background: var(--band-green); }
.band-red { background: var(--band-red); }
.band-blue { background: var(--band-blue); }
.band-orange { background: var(--band-orange); }
.band-pink { background: var(--band-pink); } /* 一覧・詳細の見出し */
/* サイズ・太さを問わず白文字を載せてよい帯 */
.band-green-footer,
.band-brown,
.band-navy {
color: var(--on-band);
}
.band-green-footer { background: var(--band-green-footer); }
.band-brown { background: var(--band-brown); }
.band-navy { background: var(--band-navy); }