/*
 * 背景を、ほんのりベージュの明るい色にする(2026-10-22 に試して、そのまま採用)
 * 元の黒い背景に戻すときは、functions.php の EIGHT_LIGHT を false にする(このファイルは読まれなくなる)
 */

/* 明るい背景の色の決まり */
:root {
	--bg: #f6f2ea;
	--bg-2: #efe9de;
	--bg-3: #fbf8f3;
	--line: rgba(60, 50, 40, .12);
	--line-strong: rgba(60, 50, 40, .3);
	--text: #2b2926;
	--muted: #776f66;
	--silver: #59616b;
	--silver-grad: linear-gradient(120deg, #3d4550 0%, #6f7883 40%, #3d4550 100%);
	--silver-text: linear-gradient(180deg, #2b2926 0%, #4a4540 100%);
}

/* 暗いまま残す所(写真の上・青いタイル・ヘッダー・フッター・お問い合わせ)は、元の色の決まりに戻す */
.site-header, .global-nav, .hero, .page-hero, .site-footer, .cta, .service-card, .flow__item, .numbers li,
.contact-sec, .target, .work__media, .lightbox {
	--bg: #141619;
	--bg-2: #191c20;
	--bg-3: #1f2328;
	--line: rgba(255, 255, 255, .09);
	--line-strong: rgba(220, 224, 229, .32);
	--text: #e8eaed;
	--muted: #9aa1aa;
	--silver: #cfd3d8;
	--silver-grad: linear-gradient(120deg, #8e949c 0%, #eef0f2 24%, #a8aeb6 46%, #f7f8f9 64%, #8f959d 100%);
	--silver-text: linear-gradient(180deg, #ffffff 0%, #e3e6ea 55%, #aeb4bc 100%);
	color: var(--text); /* 文字の色は、外(明るい背景)から受け継がず、ここで白に戻す */
}

/* 見出しの帯:写真のない帯も暗いままにし、下の境目も暗い色で終わらせる */
/* 写真の帯:黒い膜は濃くせず、細かい網目(メッシュ)を重ねて、文字の後ろを落ち着かせる(10/23) */
.page-hero { --hero-mesh: radial-gradient(circle, rgba(8, 10, 12, .55) 0 .9px, transparent 1.3px) 0 0 / 4px 4px; }
.page-hero.page-hero--area { --hero-mesh: none; } /* 施工対応エリアの空撮だけは網目なし(10/23) */
/* 写真の上の白い文字に、黒い縁取り(太さ2px・ぼかし1px。輪郭をはっきり。10/23) */
/* 帯の英字(SERVICES など)は、グレーで見づらかったので白に(10/23) */
.page-hero .eyebrow { color: #fff; }
/* 見出し(事業内容・法人・オーナー様へ など)は大きい文字なので、縁取りは1pxに */
.page-hero.has-img .page-hero__title { filter: drop-shadow(1px 0 1px #000) drop-shadow(-1px 0 1px #000) drop-shadow(0 1px 1px #000) drop-shadow(0 -1px 1px #000); }
.page-hero.has-img .eyebrow,
.page-hero.has-img .page-hero__lead,
.page-hero.has-img .page-hero__note-title,
.page-hero.has-img .page-hero__note-text { text-shadow: 2px 0px 1px #000, 1.8px 0.8px 1px #000, 1.4px 1.4px 1px #000, 0.8px 1.8px 1px #000, 0px 2px 1px #000, -0.8px 1.8px 1px #000, -1.4px 1.4px 1px #000, -1.8px 0.8px 1px #000, -2px 0px 1px #000, -1.8px -0.8px 1px #000, -1.4px -1.4px 1px #000, -0.8px -1.8px 1px #000, -0px -2px 1px #000, 0.8px -1.8px 1px #000, 1.4px -1.4px 1px #000, 1.8px -0.8px 1px #000; }
.page-hero.has-img .page-hero__lead, .page-hero.has-img .page-hero__note-text { color: #e4e7eb; }
/* 帯の下の細い白い線は消す(写真や下の色との境目に、白い筋として見えたため。10/23) */
.page-hero { border-bottom: 0; }
.page-hero::before { background: radial-gradient(900px 500px at 85% 0%, rgba(206, 212, 220, .1), transparent 60%), linear-gradient(180deg, #0e1012, #1b1f24); }
/* 写真の上の黒い膜は、10/22 に透け具合を20%上げ、さらに20%上げた(暗すぎたため) */
.page-hero.has-img::after { background: var(--hero-mesh), linear-gradient(90deg, rgba(14, 16, 18, .58) 0%, rgba(14, 16, 18, .4) 60%, rgba(14, 16, 18, .24) 100%); }
/* 事業内容の帯だけ、黒い膜を薄く(ほかの帯より約2割薄い。10/23 に薄くしすぎたので10%戻した) */
.page-hero.page-hero--services.has-img::after { background: var(--hero-mesh), linear-gradient(90deg, rgba(14, 16, 18, .45) 0%, rgba(14, 16, 18, .32) 60%, rgba(14, 16, 18, .19) 100%); }
.hero__shade { background: linear-gradient(90deg, rgba(14, 16, 18, .82) 0%, rgba(14, 16, 18, .45) 55%, rgba(14, 16, 18, .25) 100%), linear-gradient(180deg, rgba(14, 16, 18, .4) 0%, rgba(14, 16, 18, 0) 30%, rgba(14, 16, 18, .35) 100%); }

/* 明るい背景の上の、薄い色だった文字を濃く */
.intro__text p:not(.eyebrow), .target-intro p:not(.eyebrow), .prose p, .greeting__text p:not(.eyebrow),
.area-cities__list, .area-map__office, .area-legend__text, .service-row__body p:last-child, .message__text p:not(.eyebrow) {
	color: #4a4540;
}
.section--alt::before { background: linear-gradient(90deg, transparent, rgba(60, 50, 40, .15), transparent); }
/* 事業内容ページの 01〜08 の数字は、タイルと同じ青で塗る(線だけの数字は明るい背景で見えないため) */
.service-row__no { color: #2c58b8; -webkit-text-stroke: 0; }

/* 会社概要:写真の後ろの板は、ベージュ寄りのグレー */
.greeting__photo::before { background: #ddd5c8; border-color: rgba(60, 50, 40, .12); }

/* 施工事例のカード:白っぽいカードに */
.work { box-shadow: 0 10px 30px rgba(60, 50, 40, .08); }

/* 法人・個人のページの工事の種類のタグ(内装・間取り変更など):薄いブルーで塗る */
.tags li { background: #dce8fb; border-color: #b7cdf1; color: #1f3f7a; border-radius: 4px; }