/*ライトモード*/
:root {
	--global_background_color1: #fff;
	--global_background_color2: #eee;
	--global_main_text_color: #111;
	--global_header_background_color1: rgba(200, 200, 200, 0.8);
	--global_header_background_color2: rgba(150, 150, 150, 0.3);
	--global_header_elm_background_color: #fff;
	--global_header_elm_border_color: #777;
	--global_header_elm_shadow_color: #333;
}
/*ダークモード*/
@media (prefers-color-scheme: dark) {
	:root {
		--global_background_color1: #111;
		--global_background_color2: #000;
		--global_main_text_color: #eee;
		--global_header_background_color1: rgba(70, 70, 70, 0.8);
		--global_header_background_color2: rgba(120, 120, 120, 0.3);
		--global_header_elm_background_color: #000;
		--global_header_elm_border_color: #777;
		--global_header_elm_shadow_color: #333;
	}
}

/*タブレット・PC*/
@media screen and (min-width: 495px) {
	:root {
		--global_header_width: calc(
			495px - var(--global_header_padding_size) * 2
		);
	}
}

/*すまほ*/
@media screen and (max-width: 495px) {
	:root {
		--global_header_width: calc(
			100vw - var(--global_header_padding_size) * 2
		);
	}
}

/*その他サイズ関係*/
:root {
	--global_header_radius_size: 30px;
	--global_header_margin_size: 25px /*--global_header_margin_top:*/;
	--global_header_padding_size: 30px;
	--global_header_gap_size: 14px;
}

* {
	margin: 0;
}

body {
	background: linear-gradient(
		0deg,
		var(--global_background_color1),
		var(--global_background_color2)
	);
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100svh;
	margin: 0;
	position: static;
	font-family: "Noto Sans JP", sans-serif;
	font-style: normal;
	a {
		text-decoration: none;
	}
}

#g_menu_button {
	top: 10px;
	left: 10px;
	background-color: #fff;
	width: 55px;
	height: 55px;
	z-index: 1000;
	border-radius: 27.5px;
	position: fixed;
	border: #777 1px solid;
	box-shadow: 1px 1px 5px var(--global_header_elm_shadow_color);
	container-type: inline-size;
	padding: 0 10px;
	span {
		display: block;
		height: 4px;
		margin: 6px 0;
		background: #333;
		transition: all 0.25s cubic-bezier(0.3, 0.7, 0.2, 0.8);
	}

	span[class~="g_menu_active"]:nth-child(1) {
		transform: translateY(10px) rotate(45deg);
	}
	span[class~="g_menu_active"]:nth-child(2) {
		opacity: 0;
	}
	span[class~="g_menu_active"]:nth-child(3) {
		transform: translateY(-10px) rotate(-45deg);
	}
	cursor: pointer;
}

.g_header {
	top: var(--global_header_margin_size);
	left: calc(
		-1 * (var(--global_header_width) + var(--global_header_margin_size))
	);
	padding: var(--global_header_padding_size);
	position: fixed;
	width: calc(
		var(--global_header_width) - var(--global_header_margin_size) * 2
	);
	height: calc(
		100svh - var(--global_header_margin_size) * 2 -
			var(--global_header_padding_size) * 2
	);
	backdrop-filter: blur(7px);
	background: linear-gradient(
		90deg,
		var(--global_header_background_color1),
		var(--global_header_background_color2)
	);
	border-radius: var(--global_header_radius_size);
	overflow: auto;
	scrollbar-width: none;
	transition: left 0.3s cubic-bezier(0.3, 0.7, 0.2, 0.8);
	user-select: none;
	z-index: 100;
}

.g_header_selected {
	left: var(--global_header_margin_size) !important;
}

.g_header_elm {
	border-radius: 14px;
	border: 1px solid var(--global_header_elm_border_color);
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	container-type: inline-size;
	p {
		border-radius: 14px; /*強引だけど...*/
		margin: 0;
		backdrop-filter: blur(3px);
		height: 70px;
		/*background-color: rgba(225, 225, 225, 0.45);*/
		background: linear-gradient(
			90deg,
			rgba(225, 225, 225, 0.8),
			rgba(225, 225, 225, 0.2)
		);
		color: #000;
		transition:
			background 0.2s cubic-bezier(0.3, 0.7, 0.2, 0.8),
			backdrop-filter 0.2s cubic-bezier(0.5, 0.7, 0.2, 0.8),
			color 0.2s cubic-bezier(0.3, 0.7, 0.2, 0.8),
			text-shadow 0.2s cubic-bezier(0.3, 0.7, 0.2, 0.8);
		/*text-align: center;*/
		line-height: 70px;
		font-weight: 500;
		/*-webkit-text-stroke-width: 0.07cqw;
		-webkit-text-stroke-color: #fff;*/
		text-shadow: none;
	}
	p:hover {
		background: rgba(240, 240, 240, 0.3);
		backdrop-filter: blur(0px);
		color: #fff;
		text-shadow: 2px 2px 5px #000;
	}
	box-shadow: 1px 1px 5px var(--global_header_elm_shadow_color);
}

.g_header_blank {
	height: var(--global_header_gap_size);
	display: block;
}

.g_header_sns_box {
	container-type: inline-size;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	column-gap: var(--global_header_gap_size);
	.g_header_elm {
		container-type: normal;
	}
}

.g_header_sns {
	width: calc(
		var(--global_header_width) / 2 - var(--global_header_padding_size)
	);
}

main {
	padding-top: 30px;
}