@charset "utf-8";


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


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

	--bg-color: #0f79cc;				/*主にテンプレートの背景色*/
	--bg-border-color: rgba(255,255,255,0.4);	/*枠線の色。255,255,255,0.4は白の事で0.4は色が40%出た状態。*/
	--bg-inverse-color: #fff;			/*上のカラーの「対」として使う色*/
	--bg-inverse-border-color: rgba(0,0,0,0.15);	/*枠線の色。0,0,0は黒の事で0.15は色が15%出た状態。*/

	--primary-color: #0a4a96;			/*メインカラー（開閉メニュー・ボタン）*/
	--primary-inverse-color: #fff;		/*上のカラーの「対」として使う色*/
	--primary-border-color: rgba(255,255,255,0.4);	/*枠線の色。255,255,255,0.4は白の事で0.4は色が40%出た状態。*/

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

	--accent-color: #e01b1b;				/*アクセントカラー（右の縦書きのボタン）*/
	--accent-inverse-color: #fff;			/*上のカラーの「対」として使う色*/
	--accent-border-color: rgba(255,255,255,0.4);	/*枠線の色。255,255,255,0.4は白の事で0.4は色が40%出た状態。*/

	--content-space-l: 8vw;		/*余白の一括管理用。画面幅100% = 100vwです。*/
	--content-space-v: max(6vw, 3rem);	/*セクションの上下の余白。0にはしないでください。*/
	--content-space-s: 2vw;		/*余白の一括管理用（ヘッダーやメイン画像の左右）*/

	--base-font: "Zen Maru Gothic", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;  /*フォント指定*/
	--accent-font: "M PLUS Rounded 1c";	/*アクセント用フォント指定（回る円形の文字）*/

	--logo-width: 160px;	/*ロゴ画像の幅（トップページ以外）。管理画面「サイト基本設定」の「ロゴの大きさ」で倍率を掛けられます。*/
	--logo-hero-width: 20vw;	/*トップページのロゴ画像の幅（メイン画像の左上に大きく重ねます）*/
	--logo-font-size: 1.4rem;	/*ロゴを画像でなく文字（サイト名）で出す場合の大きさ。管理画面「サイト基本設定」の「ロゴの大きさ」で倍率を掛けられます。*/
}