@charset "Shift_JIS";

/* 一括で全ての要素の余白をゼロに指定 */
*
{
	padding			:0;
	margin			:0;
	font-family		:"ＭＳゴシック", "MS Gothic", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka;
	font-size		:16px;
}

/* カラー */
:root
{
	--color_back	:black;
	--color_line	:#4f4f4f;
	--color_text	:white;
	--color_logo	:violet;
	--color_logos	:#6a88ff;
	--color_theme	:#9350db;
	--color_link	:thistle;
	/*
	--color_back	:black;
	--color_line	:#4f4f4f;
	--color_text	:white;
	--color_logo	:orange;
	--color_logos	:#ff1500;
	--color_theme	:orange;
	--color_link	:#d2d38f;
	/*
	--color_back	:black;
	--color_line	:#4f4f4f;
	--color_text	:white;
	--color_logo	:lime;
	--color_logos	:#777733;
	--color_theme	:lime;
	--color_link	:#bbffcc;
	/*	#8c88ff	mediumslateblue	cornflowerblue	*/
}

a:link
{
	color			:var(--color_link);
	text-decoration		:underline;
}
a:visited
{
	color			:var(--color_link);
	text-decoration		:underline;
}
a:hover
{
	color			:var(--color_theme);
	text-decoration		:underline;
}
a:hover.no_hover,a:link.no_hover,a:visited.no_hover
{
	cursor			:text;
	color			:var(--color_text);
	text-decoration	:none;
}

body
{
	background-color	:var(--color_back);
	font-size		:1em;
	color			:var(--color_text);
	text-align		:center;
}

iframe
{
	vertical-align:bottom;
}

/* ----------------------------------------------------------------
/* ■見出しレベル1←要らない？1つしか使わない物 */
h1
{
	text-align		:right;
	font-size		:1em;
	font-weight		:normal;
	color			:var(--color_back);
}
/* ■ﾛｺﾞ部分 */
.logo
{
	font-size		:1.8em;
	color			:var(--color_logo);
	text-shadow		:0px 0px 16px var(--color_logos);
	margin-bottom		:0em;
	background-color	:var(--color_back);
}
.logo a
{
	/* ◆下線を消す為、none */
	font-size		:1.8em;
	/*
	color			:var(--color_logo);
	text-shadow		:0px 0px 16px var(--color_logos),
					0px 0px 16px var(--color_logos);
	*/
	color			:var(--color_logo);
	text-shadow		:0px 0px 16px var(--color_logos),
					0px 0px 16px var(--color_logos),
					0px 0px 16px var(--color_logos);
	/*
	color			:var(--color_back);
	text-shadow		:1px  1px 0px var(--color_logos),
					-1px  1px 0px var(--color_logos),
					1px -1px 0px var(--color_logos),
					-1px -1px 0px var(--color_logos),
					1px  0px 0px var(--color_logos),
					0px  1px 0px var(--color_logos),
					-1px  0px 0px var(--color_logos),
					0px -1px 0px var(--color_logos);
	*/
	/*padding			:0em 0.25em;
	background-color	:var(--color_back);*/
	text-decoration		:none;
	animation		:neon_blink 32s infinite running;
}
@keyframes neon_blink
{
	0%,22%,28%,62%,68%,89%,100%
	{
		opacity: 1;
		color			:var(--color_logo);
		text-shadow		:0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos);
	}
	25%,65%,90%
	{
		opacity: 1;
		color			:var(--color_logo);
		text-shadow		:0px 0px 16px var(--color_logos);
	}
	93%
	{
		opacity: 1;
		color			:var(--color_logo);
		text-shadow		:0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos),
						0px 0px 16px var(--color_logos);
	}
}


::-moz-selection
{
	color            :var(--color_back);      /* 選択時の文字色 */
	background-color :var(--color_theme);      /* 選択時の背景色 */
}
::selection
{
	color            :var(--color_back);      /* 選択時の文字色 */
	background-color :var(--color_theme);      /* 選択時の背景色 */
}
.nselect
{
	-ms-user-select		: none;
	-webkit-user-select	: none;
	user-select		: none;
	cursor			: default;
	text-align		: right;
}



.blink
{
	animation: blink 1s linear 0s infinite normal;
}
@keyframes blink
{
	0%	{ opacity: 1; }
	89.9%	{ opacity: 1; }
	90%	{ opacity: 0; }
	100%	{ opacity: 0; }
}

.logo a:hover
{
	text-decoration: none;
}

/* #contents内の指定 */
/* ■見出し※h1は1ﾍﾟｰｼﾞ1つ、h2以降は回数制限無し、但し番号は登場順と番号を飛ばさず入れ違えないこと */
/* ↑読み上げ機能に関係する？なるべく1回として順に記述する方が無難 */

h2,h3,h4,h5,h6
{
	font-size		:1.2em;
	margin-bottom		:1em;
	padding			:5px 0 5px 5px;
	border-left		:10px solid var(--color_theme);
	border-bottom		:1px solid var(--color_theme);
}
/* ■見出しの直上余白 */
h2
{
	margin-top		:-0.5em;
}
h3,h4,h5,h6
{
	margin-top		:1.5em;
}
/* ■ﾈｽﾄ表示 */
.nest
{
	margin-left		:1em; 
}
.nest ul
{
	overflow	:auto;
	_zoom		:1
}
.nest li
{
	float		:left;
	list-style	:none;
}
.nest li + li:before
{
	margin		:0.5em;
	content		:">";
}

/* ■ﾒﾆｭｰ内の指定 */
/* ◆ﾒﾆｭｰ内ﾀｲﾄﾙ */
model-viewer
{
	text-align		:left;
	border			:0px solid var(--color_line);
	margin			:0;
	width			:auto;
	height			:450px;
	max-width		:100%;
	max-height		:auto;
	background-color	:var(--color_back);
	line-height		:1em;
}
img,video,cad
{
	display			:inline;
	margin			:0em auto;
	max-width		:100%;
	background-color	:var(--color_back);
}
.content p
{
	margin			:0em 0em 0.5em 1em;
	padding			:0em 0em;
	background-color	:var(--color_back);
	line-height		:1.8em;
}
.content li
{
	margin			:0.5em 0em 0.5em 2em;
	padding			:0em 0em;
	list-style-type		:disc;
	background-color	:var(--color_back);
	line-height		:1.8em;
}
.content table,tr,th,td
{
	margin		:0em 0em 0em 0em;
	padding		:0em 0.25em 0em 0.25em;
	font-weight	:normal;
	table-layout	:fixed;
	border-collapse	:collapse;
	border		:1px solid var(--color_line);
}
.nowrap
{
	white-space	: nowrap;
}
/* ----------------------------------------------------------------
/* flexレイアウトに関する指定 */

.header
{
	display			:flex;
	flex-direction		:column;
	text-align		:left;
	margin			:4px 5px;
	margin-left		:auto;
	margin-right		:auto;
	padding			:0.5em 1em;
	border			:1px solid var(--color_back);
	border-bottom		:1px solid var(--color_line);
	background-color	:var(--color_back);
}

.body
{
	flex			:1;
	/*flex-wrap		:wrap;*/
	flex-direction		:column;
	text-align		:left;
	margin			:4px 4px 4px;
	border			:1px solid var(--color_back);
	background-color	:var(--color_back);
}
	.menu
	{
		display			:flex;
		flex-wrap		:wrap;
		text-align		:left;
		margin			:4px 0px 20px;
		padding			:0.5em;
		justify-content		:space-around;
		border			:1px solid var(--color_line);
		list-style		:none;
		background-color	:var(--color_back);
		top			:4px;
		position		:sticky;
		
		min-width		:7.5em;
	}
		.menu_title
		{
			color			:var(--color_theme);
			list-style		:none;
			flex			:1 0 6em;
			max-width		:6em;
			margin-left		:0em;
			padding			:0.2em;
			text-align		:left;
			border			:1px dotted var(--color_theme);
			background-color	:var(--color_back);
		}
		.menu li
		{
			list-style		:none;
			flex			:1 0 6em;
			max-width		:6em;
			margin-left		:0em;
			padding			:0.2em;
			/*text-align		:center;*/
			border-bottom		:1px dotted var(--color_line);
			background-color	:var(--color_back);
			/*font-size		:0.25em;/**/
		}
		.menu a
		{
			text-decoration	:none;
			/*display			:block;*/
			/*width			:170px;*/
			color			:var(--color_text);
			/*border-bottom	:1px solid var(--color_line);*/
			/*text-decoration	:underline;*/
		}
		.menu a:hover
		{
			text-decoration	:none;
			color			:var(--color_theme);
			/*text-decoration	:underline;*/
		}
	.content
	{
		flex			:1;
		flex-direction		:column;
		text-align		:left;
		margin			:10px 5px 4px;
		border			:1px solid var(--color_black);
		background-color	:var(--color_black);
	}

.footer
{
	display			:flex;
	flex-direction		:column;
	margin			:4px 5px 4px;
	margin-left		:auto;
	margin-right		:auto;
	padding			:0.5em 0.5em;
	text-align		:center;
	border			:1px solid var(--color_black);
	border-top		:1px solid var(--color_line);
	background-color	:var(--color_back);
	
	min-height		:20px;
}

/*
.footer::before
{
	content: "BALION-WEB　Ver.0.01　[08.26.2021]\A Copyright 2021 Mofbalion";
	white-space: pre-line;
}
*/
.footer::after
{
	color		:var(--color_line);
	content		:"BALION-WEB　Ver.1.00　[11.01.2021]\A Copyright 2021 Mofbalion";
	white-space	:pre-line;
}


/* pinch用 */
html
{
	height: 100%;
}
body
{
	height: 100%;
	margin: 0;
}
.fullh
{
	height: 100%;
	background: var(--color_back);
}