@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;800&display=swap&subset=japanese');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');


html {
	--color-base: #eef2f5;
	--color-main: #838fb6;
	--color-accent: #bcd2d4;
	--color-text: #333;
	--color-marker: #dcedf1;
	--color-light: #fff;
	--color-sunmoon: #4a546b;
	--font-primary: "DotGothic16", sans-serif;
	--font-alphanumeric: "DotGothic16", sans-serif;
	--font-icon: 'Font Awesome 6 Free';
}

html.Dark {
	--color-base: #1a1a1a;
	--color-main: #8796c4;
	--color-accent: #4e606e;
	--color-text: #e0e0e0;
	--color-marker: #4a656a;
	--color-light: #333;
	--color-sunmoon: #fff7eb;

}

@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: 700px) {
	html{ font-size:70%;}}
@media screen and (max-width: 500px) {
	html{ font-size:52.5%;}}

@media screen and (min-width: 769px) {
	:root {
		--margin-base: 2rem;
	}

	body{
		font-size: 1.5rem;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--margin-base: 2rem;
	}

	body{
		font-size: 1.2rem;
	}
}

/* テーマ切り替えボタン */

.ModeButton {
	position: fixed;
	bottom: 10px;
	left: 10px;
	width: 40px;
	height: 40px;
	background-color: var(--color-accent);
	border-radius: 20px;
	cursor: pointer;
	border: 2px solid var(--color-light);
	transition: background-color 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ModeButton i{
	color: var(--color-sunmoon);
	font-size: 25px;
	vertical-align: -2px;
}

/* ライトモードにするボタン：ライトモード時非表示 */
.ModeButton .ModeButton--light {
    display: none;
}

/* ライトモードにするボタン：ダークモード時表示 */
html.Dark .ModeButton .ModeButton--light {
    display: block;
}

/* ダークモードにするボタン：ライトモード時表示 */
.ModeButton .ModeButton--dark {
    display: block;
}

/* ダークモードにするボタン：ダークモード時非表示 */
html.Dark .ModeButton .ModeButton--dark {
    display: none;
}

html.Dark .adjust-ld {
	filter: brightness(0.9);
}
  
.adjust-ld {
	filter: brightness(1);
}

span.nowrap {
	display: inline-block;
}