@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=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


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

	--bg-color: #fff;					/*主にテンプレートの背景色*/
	--bg-border-color: #ccc;			/*枠線の色。*/
	--bg-inverse-color: #333;			/*上のカラーの「対」として使う色*/
	--bg-inverse-border-color: rgba(255,255,255,0.5);	/*枠線の色。255,255,255,0.5は白の事で0.5は色が50%出た状態。*/
	
	--primary-color: #c80101;		/*メインカラー*/
	--primary-inverse-color: #fff;	/*上のカラーの「対」として使う色*/
	--primary-border-color: #fff;	/*枠線の色。*/
	
	--primary-light-color: #f9f1f1;					/*メインカラーの薄いカラー*/
	--primary-light-inverse-color: #333;			/*上のカラーの「対」として使う色*/
	--primary-light-border-color: rgba(0,0,0,0.2);	/*枠線の色。0,0,0は黒の事で0.2は色が20%出た状態。*/

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

	--accent-color: #f5902f;		/*アクセントカラー*/
	--accent-inverse-color: #fff;	/*上のカラーの「対」として使う色*/
	--accent-border-color: rgba(255,255,255,0.5);	/*枠線の色。255,255,255,0.5は白の事で0.5は色が50%出た状態。*/

	--content-space-l: 6vw;		/*左右の余白の一括管理用。画面幅100% = 100vwです。*/
	--content-space-v: 3vw;		/*セクションの上下の余白。0にはせず、--content-space-l より小さい値にしてください。上下のセクションが隣り合うと、2つ分の余白になります。*/
	--content-space-s: 2rem;	/*余白の一括管理用。2文字分。*/

	--base-font: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;  /*フォント指定*/
	--accent-font: "Cormorant Garamond";  /*アクセント用英語フォント指定*/

}
