@charset "utf-8";


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {

	--bg-color: #000;					/*主にテンプレートの背景色（このフレームは暗い配色）*/
	--bg-border-color: rgba(255,255,255,0.3);	/*枠線の色。255,255,255,0.3は白の事で0.3は色が30%出た状態。*/
	--bg-inverse-color: #f0f0f0;		/*上のカラーの「対」として使う色*/
	--bg-inverse-border-color: rgba(0,0,0,0.2);	/*枠線の色。0,0,0は黒の事で0.2は色が20%出た状態。*/

	--primary-color: #8a6d3b;			/*メインカラー*/
	--primary-inverse-color: #fff;		/*上のカラーの「対」として使う色*/
	--primary-border-color: rgba(255,255,255,0.4);	/*枠線の色。255,255,255,0.4は白の事で0.4は色が40%出た状態。*/

	--light-color: #1c1c1c;					/*薄いカラー（このフレームは暗い配色なので、背景色より少し明るい黒）*/
	--light-inverse-color: #f0f0f0;			/*上のカラーの「対」として使う色*/
	--light-border-color: rgba(255,255,255,0.2);	/*枠線の色。255,255,255,0.2は白の事で0.2は色が20%出た状態。*/

	--accent-color: #c9a063;				/*アクセントカラー*/
	--accent-inverse-color: #000;			/*上のカラーの「対」として使う色*/
	--accent-border-color: rgba(0,0,0,0.2);	/*枠線の色。0,0,0は黒の事で0.2は色が20%出た状態。*/

	--content-space-l: clamp(20px, 8vw, 100px);	/*左右の余白。画面幅の8%（20px〜100px）。*/
	--content-space-v: max(6vw, 3rem);	/*セクションの上下の余白。0にはしないでください。*/
	--content-space-s: 2rem;	/*余白の一括管理用。2文字分。*/

	--base-font: "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;  /*フォント指定*/
	--accent-font: "Cinzel";	/*アクセント用英語フォント指定（見出しの装飾テキスト）*/

	--logo-width: 200px;	/*ロゴ画像の幅（トップページ以外）。管理画面「サイト基本設定」の「ロゴの大きさ」で倍率を掛けられます。*/
	--logo-hero-height: 300px;	/*トップページのロゴ画像の高さ（縦長のロゴ用）*/
	--logo-font-size: 1.3rem;	/*ロゴを画像でなく文字（サイト名）で出す場合の大きさ。管理画面「サイト基本設定」の「ロゴの大きさ」で倍率を掛けられます。*/
}