@charset "utf-8";


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');




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

	--bg-color: #f5f0ec;					/*主にテンプレートの背景色（グレージュ）*/
	--bg-border-color: #ddd3cc;			/*枠線の色*/
	--bg-inverse-color: #4a403c;		/*上のカラーの「対」として使う色*/
	--bg-inverse-border-color: rgba(255,255,255,0.3);	/*枠線の色。255,255,255,0.3は白の事で0.3は色が30%出た状態。*/
	
	--primary-color: #4a403c;			/*メインカラー*/
	--primary-inverse-color: #fff;		/*上のカラーの「対」として使う色*/
	--primary-border-color: rgba(255,255,255,0.3);	/*枠線の色。255,255,255,0.3は白の事で0.3は色が30%出た状態。*/


	--light-color: #ebe3de;					/*薄いカラー*/
	--light-inverse-color: #4a403c;			/*上のカラーの「対」として使う色*/
	--light-border-color: rgba(0,0,0,0.1);	/*枠線の色。0,0,0は黒の事で0.1は色が10%出た状態。*/

	--accent-color: #c99096;				/*アクセントカラー（ダスティピンク）*/
	--accent-inverse-color: #fff;			/*上のカラーの「対」として使う色*/
	--accent-border-color: rgba(255,255,255,0.3);	/*枠線の色。255,255,255,0.3は白の事で0.3は色が30%出た状態。*/

	--content-space-l: 5vw;		/*余白の一括管理用。画面幅100% = 100vwです。*/
	--content-space-v: max(4vw, 3rem);	/*セクションの上下の余白。画面幅の4%（スマホなど狭い画面では最低3文字分）。0にはせず、--content-space-l より小さい値にしてください。*/
	--content-space-s: 2rem;	/*余白の一括管理用。2文字分。*/

	--base-font: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;  /*フォント指定*/
	--accent-font: "Italiana", serif;  		/*アクセント用英語フォント指定*/
	--heading-font: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;	/*見出し用フォント指定（明朝体）*/

	--logo-width: 130px;	/*ロゴ画像の幅。管理画面「サイト基本設定」の「ロゴの大きさ」で倍率を掛けられます。*/
	--logo-font-size: 1.3rem;	/*ロゴを画像でなく文字（サイト名）で出す場合の大きさ。管理画面「サイト基本設定」の「ロゴの大きさ」で倍率を掛けられます。*/
}