@charset "UTF-8";

/* ↓フォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&family=Zen+Kaku+Gothic+New&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'); /* アイコンフォント */

:root {
	--color-base: #323843; /* 背景の紺 */
	--color-main: #56A297; /* 青緑 */
	--color-accent: #C6DC64; /* 黄緑 */
	--color-text: #FBFBFB; /* テキストの白 */
	--color-link: #93B0F9; /* リンクの青 */
	--color-sub: #565D6A; /* 背景真ん中のグレー */
	--font-family: Montserrat,'Zen Kaku Gothic New','Small Fonts','Avenir','メイリオ', Meiryo,'Osaka','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
	--font-icon: 'Font Awesome 6 Free'; /* アイコンフォント */
}

@media screen and (min-width: 1367px) {
	html{ font-size:62.5%;}}
@media screen and (max-width: 1366px) {
	html{ font-size:50%;}}
@media screen and (max-width: 800px) {
	html{ font-size:90%;}}
@media screen and (max-width: 500px) {
	html{ font-size:62.5%;}}
	
@media screen and (min-width: 769px) {
	:root {
		--margin-base: 4em;
		--border-radius: 0.3em;
	}

	body{
		font-size: 1.4rem;
		letter-spacing: 0.1em;
		line-height: 1.5;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--margin-base: 2em;
		--border-radius: 0.2em;
	}

	body{
		font-size: 1.2rem;
		letter-spacing: 0.1em;
		line-height: 1.5;
	}
}