:root{
		--base-font-size:			medium;				/* xx-small x-small small medium large x-large xx-large xxx-large */
		--base-kaigyouhaba:			160%;
		--base-font-color:			#cccccc;
		--base-link-font-color:		yellow;
		--base-haikei:				#262522;
		--base-haikei-table:		#302e2b;

		--Button-PageSet-1:			gray;				/* ライトモード	*/
		--Button-PageSet-2:			yellow;				/* ダークモード	*/
		--Button-PageSet-3:			yellow;				/* 文字標準		*/
		--Button-PageSet-4:			gray;				/* 文字大1		*/
		--Button-PageSet-5:			gray;				/* 文字大2		*/
		--Button-PageSet-6:			yellow;				/* 名前の変更	*/
}

/***********************************************************************************************************************************/

.ss:link{	 color:var(--base-link-font-color); text-decoration:none;	   font-weight:normal; }		/* 未訪問のリンク																	*/
.ss:visited{ color:var(--base-link-font-color); text-decoration:none;	   font-weight:normal; }		/* 訪問済みのリンク																	*/
.ss:hover{	 color:red;							text-decoration:underline; font-weight:bold;   }		/* カーソル直上																		*/
.ss:active{	 color:red;							text-decoration:none;	   font-weight:bold;   }		/* 押した瞬間																		*/

ul   {	border:0px skyblue dashed;		margin:0px 0px 0px 1em;		padding:0px 0px 0px 0px;	}		/* 箇条書き [上][右][下][左]														*/
ul li{									margin:0px 0px 0px 1em;		padding:0px 0px 0px 0px;	}		/* １文字 = 1em					デフォルトで一文字分下げられている模様				*/
ol   {	border:0px skyblue dashed;		margin:0px 0px 0px 1em;		padding:0px 0px 0px 0px;	}		/* ナンバリング																		*/
ol li{									margin:0px 0px 0px 1em;		padding:0px 0px 0px 0px;	}

p{		margin-bottom:	0px;																			/* 段落間の余白					pタグはHTMLで段落を表現するための基本的な要素です。	*/
		text-indent:	0em;																			/* 最初の行の字下げ				1文字 = 1em											*/
		padding:		0px 5px 0px 5px;
}

span.smaller{		font-size:smaller;											}
span.larger{		font-size:larger;											}
span.is-message{	font-size:large;	color:navy;			font-weight:bold;	}
span.is-shadow{		text-shadow:3px 3px 3px yellow,	 -3px -3px 3px yellow,
								-3px 3px 3px yellow,  3px -3px 3px yellow,
								3px 0px 3px yellow,	 -3px -0px 3px yellow,
								0px 3px 3px yellow,	  0px -3px 3px yellow;
}

div{
		&.is-Right{		text-align:	right;	}
		&.is-Hidden{	display:	none;	}
}

.container{								/* コンテナ化							*/
	display:		flex;				/* 画像の横に、文字を横並びにする用		*/
	align-items:	center;				/* 縦方向の中央揃え						*/
	gap:			10px;
}

/***********************************************************************************************************************************/

button{
		font-size:			var(--base-font-size);
		background-color:	#222222;
		border:				none;
		padding:			0px 0px 0px 0px;					/*  [上][右][下][左] 												*/
		margin:				2px 0px 0px 0px;
		vertical-align:		middle;								/* 文字の縦(垂直)方向の位置を指定									*/
		min-width:			146px;								/* width から min-width に変更。大きくなってもあふれないようにする	*/
		min-height:			30px;								/* 最小でも25pxにして、英語と日本語の高さを揃える					*/
		border-radius:		5px;								/* 縁取り															*/
		cursor:				pointer;
		transition:			background-color 0.5s ease, color 0.5s ease;
}

button:hover{				background-color:	#aa0000;				}
button:active{				background-color:	white;					}

#Button-PageSet-1{			color: var(--Button-PageSet-1);		  }			/* ライトモード	*/
#Button-PageSet-2{			color: var(--Button-PageSet-2);		  }			/* ダークモード	*/
#Button-PageSet-3{			color: var(--Button-PageSet-3);		  }			/* 文字標準		*/
#Button-PageSet-4{			color: var(--Button-PageSet-4);		  }			/* 文字大1		*/
#Button-PageSet-5{			color: var(--Button-PageSet-5);		  }			/* 文字大2		*/
#Button-PageSet-6{			color: var(--Button-PageSet-6);		  }			/* 文字大2		*/

/***********************************************************************************************************************************/

html{
	color:				var(--base-font-color);				/* 文字の色															*/
	font-size:			var(--base-font-size);				/* 文字の大きさ														*/
	line-height:		var(--base-kaigyouhaba);			/* 改行幅															*/
	letter-spacing:		normal;								/* 文字間隔 normal 1px 0.1em										*/
	word-spacing:		normal;								/* 単語間隔															*/
	font-weight:		normal;								/* 文字の太さ normal bold lighter									*/
	font-style:			normal;								/* スタイル	  標準（normal）イタリック体（italic）斜体（oblique）	*/
	list-style-position:outside;							/* リスト表示の位置指定 inside; outside;							*/
															/* font-family:		"Arial","メイリオ","sans-serif"; フォントは指定しないほうが綺麗		*/
}

body{
	margin:					0px 0px 0px 0px;				/* [上][右][下][左]							*/
	padding:				0px 0px 0px 0px;
	background-color:		var(--base-haikei);
}

table{
	border:				0px solid black;
	border-collapse:	collapse;							/* collapse:セル同士の間に間隔を空けない separate:間隔をあけて表示する（枠線非表示でも間隔があく	*/
	background-color:	var(--base-haikei-table);
	td{
						text-align:		left;				/* td,td以降でないと、パディング・文字寄せ等、効かない				*/
						vertical-align: middle;				/* 文字の縦(垂直)方向の位置を指定									*/
						height:			30px;
	}
	&.is-mokuji{
		td{					border:1px solid black;											}
		td:nth-of-type(1){	width:70px;		text-align:center;								}	/* 1列目				*/
		td:nth-of-type(2){	width:285px;	text-align:left;	padding:0px 0px 0px 5px;	}	/* 2列目				*/
		td:nth-of-type(3){	width:300px;	text-align:left;	padding:0px 0px 0px 5px;	}	/* 3列目				*/
		td:nth-of-type(4){	border-top:none; border-bottom:none; border-right:none;			}	/* 4列目				*/
		tr:nth-of-type(1){	td:nth-of-type(-n+3){	text-align:center;	font-weight:bold;	}}	/* 1行目の1〜3までのtd。trよりtdが上なので、tdを再指定しないといけない	*/
	}
}

img{
	width:				auto;						/* 基準：原寸大表示なおかつ画面幅まで	*/
	max-width:			100%;						/* 基準：原寸大表示なおかつ画面幅まで	*/
	border:				none;
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 0px;
	vertical-align:		middle;						/* img がインライン要素として扱われ、文字のベースラインに揃えられ、謎のスペースができることを防止する	*/
}

h1{
	font-size:		2.5rem;				/* 文字サイズ　親要素の２倍					*/
	line-height:	1.0;				/* 改行幅　　　フォントサイズの1.5倍		*/
	font-weight:	bold;				/* 文字の太さ　normal bold lighter			*/
	text-align:		center;
	margin:			0px 0px 0px 0px;	/* [上][右][下][左]							*/
	padding:		0px 0px 0px 0px;
}


/* 幅900px以上 **********************************************************************/
@media screen and (min-width:900px) {
	.mode-pc {	display:		}		/* 最初は inlineだったが、blockやinline-blockだと枠線が変に表示され、空白だとよくなった */
	.mode-sm {	display: none;	}

	table{		width: 900px;	}
}

/* 幅899まで *********************************************************************/
@media screen and (max-width:899px) {
	.mode-pc {	display: none;		}
	.mode-sm {	display:			}

	table{			width:100%;		}
}