@charset "utf-8";

:root {

	/* 色設定 */
	--text-color: #59514e;
	--accent: #4ec1be;
	--main-bg-design: #e9dfd3 url(skin-tegasite/bg.jpg) scroll;
	--sub-bg-color: #fefaee;
	--header-bg-design: url(skin-tegasite/noimage.png?v=20260113c) 100% / cover;
}

/*
	text-color = メインの文字色です。
	accent = アクセントカラーです。

	main-bg-design = ページ全体の背景色です。画像指定、グラデーション指定、単色指定などが可能です。
		■画像を全体に敷き詰める
		#ffffff url(フォルダ名/ファイル名) scroll;

		■なめらかなグラデーション
		linear-gradient(160deg, var(--os1) 20%, var(--os2) 80%) fixed;
		
		■パキッとしたツートンカラー
		linear-gradient(160deg, var(--os1) 49.9%, var(--os2) 50%) fixed;
		
		■単色カラー
		#ffffff などのカラーコードだけを入れると単色になります。

	sub-bg-color = text-colorが暗い色なら#fffなど（白系）を、明るい色なら#333など（黒系）がオススメ。
	header-bg-design = サイトのヘッダーの背景設定です。画像指定、グラデーション指定、単色指定などが可能です。
*/

/* --- トップページのみ画像を表示する設定 --- */

/* 全ページ共通：一旦ヘッダー画像を非表示にする（背景色のみにする） */
header .headervisual {
	background: var(--sub-bg-color) !important;
}

/* トップページ（grandhome）の時だけ、画像を表示して高さを出す */
body.grandhome header .headervisual {
	background: var(--header-bg-design) !important;
	min-height: 300px;
	/* 画像を表示したい高さ（お好みで調整） */
	display: flex;
	flex-direction: column;
	justify-content: center;
}