/*****************************************************************************************
最小の画面幅		スマホの360ドット
文字の大きさ		xx-small x-small small medium large x-large xx-large xxx-large
マージン等の順番	[上][右][下][左]
border:				0px solid black;
******************************************************************************************/
:root{
		--base-font-size:			medium;
		--base-kaigyouhaba:			160%;
		--base-font-color:			#cccccc;
		--base-link-font-color:		black;				/* 起動時 JavaScrit でセット */
		--base-link-hover-color:	black;				/* 起動時 JavaScrit でセット */
		--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;				/* 名前の変更	*/

		--Button-Color-SPEED-1:		gray;
		--Button-Color-SPEED-2:		gray;
		--Button-Color-SPEED-3:		gray;
		--Button-Color-SPEED-4:		yellow;
		--Button-Color-SPEED-5:		gray;
		--Button-Color-SPEED-6:		gray;
		--Button-Color-SPEED-7:		gray;
		--Button-Color-SPEED-8:		gray;
		--Button-Color-SPEED-9:		gray;
		--Button-Color-SPEED-10:	gray;
}

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

.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:var(--base-link-hover-color); text-decoration:none; font-weight:normal; }		/* カーソル直上																		*/
.ss:active{	 color:var(--base-link-hover-color); text-decoration:none; font-weight:normal; }		/* 押した瞬間																		*/

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.is-smaller{	font-size:smaller;											}
span.is-larger{		font-size:larger;											}
span.is-message{	font-size:large;	color:navy;			font-weight:bold;	}
span.is-shadow{		text-shadow: 3px 3px 3px #666666,	 -3px -3px 3px #666666,
								-3px 3px 3px #666666,	  3px -3px 3px #666666,
								 3px 0px 3px #666666,	 -3px -0px 3px #666666,
								 0px 3px 3px #666666,	  0px -3px 3px #666666;
}

.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;
		&.is-buttonKen{
							margin:			0px 0px 0px 0px;
							min-width:		50px;
							min-height:		20px;
		}
}

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		*/

#Button-Color-SPEED-1{		color: var(--Button-Color-SPEED-1);		}
#Button-Color-SPEED-2{		color: var(--Button-Color-SPEED-2);		}
#Button-Color-SPEED-3{		color: var(--Button-Color-SPEED-3);		}
#Button-Color-SPEED-4{		color: var(--Button-Color-SPEED-4);		}
#Button-Color-SPEED-5{		color: var(--Button-Color-SPEED-5);		}
#Button-Color-SPEED-6{		color: var(--Button-Color-SPEED-6);		}
#Button-Color-SPEED-7{		color: var(--Button-Color-SPEED-7);		}
#Button-Color-SPEED-8{		color: var(--Button-Color-SPEED-8);		}
#Button-Color-SPEED-9{		color: var(--Button-Color-SPEED-9);		}
#Button-Color-SPEED-10{		color: var(--Button-Color-SPEED-10);	}

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

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);
}

div{
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 0px;
	max-width:			900px;
	width:				100%;
	&.is-Right{			text-align:	right;	}
	&.is-Hidden{		display:	none;	}
}

table{
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 0px;
	border:				0px solid black;
	border-collapse:	collapse;							/* collapse:セル同士の間に間隔を空けない separate:間隔をあけて表示する（枠線非表示でも間隔があく	*/
	background-color:	var(--base-haikei-table);
	td{
						height:			1px;
						text-align:		left;
						vertical-align: middle;				/* 文字の縦(垂直)方向の位置を指定																	*/
	}
	&.is-main{
		th,td{
			border:			1px solid black;
			height:			40px;
		}
		td:nth-child(1){	width:240px; padding:0px 0px 0px 5px;	}		/* 1列目	*/
		td:nth-child(2){	width:120px; text-align:center;			}		/* 2列目	*/
		th:nth-child(3){	border:none; }
		td:nth-child(3){	border:none; }
	}
	&.is-counter{
		td{
			border:			1px solid black;
			text-align:		center;
		}
		td:nth-child(1){	width:120px; }		/* 一列目		*/
		td:nth-child(2){	width:120px; }
		td:nth-child(3){	width:120px; }
		td:nth-child(4){	border:none; }
	}
}

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:		1.5rem;				/* 文字サイズ　親要素の２倍					*/
	line-height:	2.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%;		}
}