:root
	{
		--dark-grey: #333;
		--dark-blue: #4F5B93;
		--medium-blue: #8892BF;
		--light-blue: #E2E4EF;
		--accent-purple: #793862;

		--background-color1: #252525;
		--background-color2: #454545;
		--fore-color1: #d7d7d7;
		--hover-color: #121212;

		--button-color1: #f08;
		--button-color2: #ffae00;
		--button-color3: #73b81e;
		--button-color4: #248fe1;
		--transition: all 0.3s;
		
	}

	html
	{
		line-height: 150%;
	}

	/* .bright
	{
		--background-color1: #d7d7d7;
		--fore-color1: #252525;
		--hover-color: #ccc;
	} */

	@font-face
	{
		font-family: 'huifont';
		src: url('/global/font/HuiFontP29.ttf') format('truetype');
	}

	.hui
	{
		font-family: 'huifont';
		font-size: 150%;
	}

	.denyselect,
	.denyselect *
	{
		/* overscroll-behavior: none; */
		-webkit-touch-callout: none; /* iOS：長押しメニュー無効 */
		-webkit-user-select: none;
		user-select: none;
	}

	a
	{
		color: var(--medium-blue);
		text-decoration: none;
	}

	body
	{
		/* padding: 0;
		margin: 0; */
		font-family: 'BIZ UDPGothic',
			"Noto Sans JP", sans-serif;

		background-color: var(--background-color1);
		/* background: linear-gradient(#222, #fff); */
		color: var(--fore-color1); 

		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
	}

	h1
	{
		display: block;
		font-size: 2em;
		margin-block-start: 0.67em;
		margin-block-end: 0.67em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		font-weight: bold;
	}

	/* body
	{
		font-family:
			"Noto Sans JP",
			"Hiragino Sans",
			"Yu Gothic",
			system-ui,
			-apple-system,
			BlinkMacSystemFont,
			sans-serif,
			Robot;
	} */

	footer
	{
		padding: 5rem 0;
		text-align: center;
		/* margin-bottom: 20vh; */
		font-family:'Lucida Sans',
			'Lucida Sans Regular',
			'Lucida Grande',
			'Lucida Sans Unicode',
			Geneva,
			Verdana, sans-serif;

		text-align: center;
		padding: 2rem;
		/* margin-top: 150px; */

		/* background-color: var(--dark-blue); */
		color: var(--dark-blue);
	}

	footer a
	{
		color: var(--dark-blue);
	}


	a,
	button
	{
		-webkit-tap-highlight-color: transparent;
	}

	/*スクロールバー全体*/
	::-webkit-scrollbar
	{
		width: 8px;
	}

	/*スクロールバーの軌道*/
	::-webkit-scrollbar-track
	{
		border-radius: 10px;
		/* box-shadow: inset 0 0 1px #111; */
		background-color: var(--back-color1);
	}

	/*スクロールバーの動く部分*/
	::-webkit-scrollbar-thumb
	{
		background-color: var(--dark-grey);
		background: var(--fore-color1);
		border-radius: 10px;
	}

	#container
	{
		position: relative;
		margin: 0 auto;
		width: 72.5vw;
		/* margin-top: 1em; */
		/*overflow-wrap: break-word;*/
		/*background: #600;*/
	}

	/* #result
	{
		margin: 20px auto;
	} */

	.align-right
	{
		text-align: right;
	}

	.align-center
	{
		text-align: center;
	}

	.content-center
	{
		align-content: center;
		justify-content: center;
		text-align: center;
	}
	
	@media screen and (max-width: 780px)
	{
		#loading
		{
			padding    : 2% 5%;
			line-height: 5vh;
			top        : 50%;
			left       : 25vw;
			width      : 20vw;
			height     : 5%;
		}

		#container
		{
			padding: 0;
			margin: 0 auto;
			width: 100%;
			overflow-wrap: normal;
		}
	}

	.glay
	{
		filter: saturate(0);
	}

	/* フィルタ */
	.glass
	{
		/* background: rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(16px) saturate(120%);
		-webkit-backdrop-filter: blur(16px) saturate(120%);

		border: 1px solid rgba(255, 255, 255, 0.35);

		box-shadow:
			0 10px 50px rgba(0, 0, 0, 0.15),
			inset 0 1px 0 rgba(255, 255, 255, 0.53); */

		background: rgba(255, 255, 255, 0.25);
		/* background: #66666645; */
		backdrop-filter: blur(16px);
		/* -webkit-backdrop-filter: blur(16px) saturate(120%); */

		border: 1px solid rgba(255, 255, 255, 0.25);

		/* box-shadow:
			0 10px 50px rgba(0, 0, 0, 0.25),
			inset 0 1px 0 rgba(255, 255, 255, 0.5); */
	}

	/* 左上からの白⇒透明グラデ */
	.glass::before
	{
		content: '';
		position: fixed;
		inset: 0;
		border-radius: inherit;

		background:
			radial-gradient(
				circle at bottom right,
				#ffffff25,
				transparent 60%
			);

		pointer-events: none;
	}

	/* 遷移 */
	.page-transition
	{
		z-index: 9999;

		color: #eee;
		display: flex;
		justify-content: center; /* 横中央 */
		align-items: center;     /* 縦中央 */
		font-family: huifont;
		font-size: 2.8em;

		position: fixed;
		inset: 0;
		transition: transform 0.3s ease-in-out;

		/* background-image: url('/images/bg/ocean.jpg'); */

		/* background-image: url('/images/bg/chill.jpg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover; */
	}

	.page-transition.shutter
	{
		background: linear-gradient(#e66465, #9198e5);
		backdrop-filter: blur(100px);
		transform: translateY(120%);
	}

	body.active .page-transition.shutter
	{
		transform: translateY(0);
	}

	.page-transition.blur
	{
		display: none;
	}

	body.active .page-transition.blur
	{
		backdrop-filter: blur(10px);
		display: block;
	}

	.solid-black
	{
		background: linear-gradient(0deg, #222, #444);
		text-align: center;
		color: #ddd;
	}
	.solid-white
	{
		background: linear-gradient(0deg, #ddd, #fff);
		text-align: center;
		color: #222;
		border: #ccc solid 1px;
	}

	.big-button,
	.large-button
	{
		display: block;
		margin: 20px auto;
		padding: 0.2em 0.7em;
		width: max-content;
		font-size: 2.6em;
	}

	.hidden
	{
		visibility: hidden;
		pointer-events: none;
	}

	.disnone
	{
		display: none !important;
		pointer-events: none;
	}

	.invert
	{
		filter: invert();
	}