@charset "utf-8";


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

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

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

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

	--mainimg-veil-color: rgba(255,255,255,0.25);	/*動画の上に重ねる幕の濃さ。明るい動画なので白い幕にしています。数字を大きくすると白っぽくなり、暗い文字が読みやすくなります。*/
	--mainimg-bg-color: #eceaf6;				/*動画の読み込み中に表示される背景色。動画の色に近い色がおすすめです。*/

	--footer-color: #efe9f4;			/*フッターの背景色*/

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

	--base-font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Meiryo", sans-serif;  /*フォント指定*/
	--accent-font: "Quicksand";  		/*アクセント用英語フォント指定*/

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

}