@charset "utf-8";


@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');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*CSSカスタムプロパティ*/
:root {

	--bg-color: #fff;
	/*テンプレートの背景色*/
	--bg-inverse-color: #333;
	/*上のカラーの「対」として使う色*/

	--primary-color: rgba(230, 51, 18);
	/*メインまたはアクセントカラー*/
	--primary-inverse-color: #fff;
	/*上のカラーの「対」として使う色*/

	--light-color: #e8f0f8;
	/*淡いカラー*/
	--light-inverse-color: #333;
	/*上の淡いカラーの「対」として使う色*/

	--accent-color: #e33607;
	/*アクセントカラー*/
	--accent-inverse-color: #fff;
	/*上のカラーの「対」として使う色*/

	--content-space-l: 5vw;
	/*左右の余白の一括管理用*/
	--content-space-s: 2rem;
	/*headerやfooter、２カラム以上のレイアウトで使用*/

	--border-color: rgba(0, 0, 0, 0.18);
	/*枠線の色*/

	--base-font: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
	--accent-font: "Jost";

}

@media (max-width:500px) {

	:root {
		--content-space-l: 10px;
		/*余白の一括管理用小さな端末で余白を狭く*/
	}

}


/*暗い背景で使う場合のみ枠線の色を白っぽく*/
.bg1-parts,
.bg1-primary-parts,
.bg1-accent-parts {
	--border-color: rgba(255, 255, 255, 0.22);
}