@charset "utf-8";


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&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: #f8fdff;					/*主にテンプレートの背景色*/
	--bg-border-color: rgba(0,0,0,0.2);	/*枠線の色*/
	--bg-inverse-color: #333;			/*上のカラーの「対」として使う色*/
	--bg-inverse-border-color: rgba(255,255,255,0.5);	/*枠線の色*/
	
	--primary-color: #1E88E5;			/*メインカラー*/
	--primary-inverse-color: #fff;		/*上のカラーの「対」として使う色*/
	--primary-border-color: rgba(255,255,255,0.5);	/*枠線の色*/
	
	--light-color: #E3F2FD;				/*薄いカラー*/
	--light-inverse-color: #333;		/*上のカラーの「対」として使う色*/
	--light-border-color: rgba(0,0,0,0.2);	/*枠線の色*/

	--accent-color: #FF6D00;			/*アクセントカラー*/
	--accent-inverse-color: #fff;		/*上のカラーの「対」として使う色*/
	--accent-border-color: rgba(255,255,255,0.5);	/*枠線の色*/

	--content-space-l: 5vw;
	--content-space-s: 2rem;

	--base-font: "M PLUS Rounded 1c", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	--accent-font: "Jost";

}

	@media (max-width:500px) {

	:root {
		--content-space-l: 10px;
	}

	}
