/*****************************************************************************************
文字の大きさ		xx-small x-small small medium large x-large xx-large xxx-large
マージン等の順番	[上][右][下][左]
border:				0px solid black;
******************************************************************************************/
: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;				/* 名前の変更	*/
		--Button-PageSet-M:			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: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-red{		font-size:larger;	color:red;								}
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{
		padding:			0px 0px 0px 0px;
		margin:				2px 0px 0px 0px;
		border:				none;
		min-width:			146px;
		min-height:			30px;
		font-size:			var(--base-font-size);
		background-color:	#222222;
		vertical-align:		middle;								/* 文字の縦(垂直)方向の位置を指定		*/
		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;
		}
		&.is-buttonBottom{
							height:			100px;
		}
}

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);		  }			/* 名前の変更	*/
#Button-PageSet-M{			color: var(--Button-PageSet-M);		  }			/* 補足説明		*/

#Button-Color-SPEED-1{		background-color: var(--Button-Color-SPEED-1);		  }
#Button-Color-SPEED-2{		background-color: var(--Button-Color-SPEED-2);		  }
#Button-Color-SPEED-3{		background-color: var(--Button-Color-SPEED-3);		  }
#Button-Color-SPEED-4{		background-color: var(--Button-Color-SPEED-4);		  }
#Button-Color-SPEED-5{		background-color: var(--Button-Color-SPEED-5);		  }
#Button-Color-SPEED-6{		background-color: var(--Button-Color-SPEED-6);		  }
#Button-Color-SPEED-7{		background-color: var(--Button-Color-SPEED-7);		  }
#Button-Color-SPEED-8{		background-color: var(--Button-Color-SPEED-8);		  }
#Button-Color-SPEED-9{		background-color: var(--Button-Color-SPEED-9);		  }
#Button-Color-SPEED-10{		background-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);
}

table{
	border:					0px solid black;
	border-collapse:		collapse;										/* collapse:セル同士の間に間隔を空けない separate:間隔をあけて表示する（枠線非表示でも間隔があく	*/
	background-color:		var(--base-haikei-table);
	th,td{
							text-align:		left;							/* td,td以降でないと、パディング・文字寄せ等、効かない				*/
							vertical-align: middle;							/* 文字の縦(垂直)方向の位置を指定									*/
	}
	tr,td,th{				height:	20px;		}
	&.is-ringo{																	/* 末尾のテーブルは、起動時は非表示 */
		tr,td,th{			height:	30px;		}
		td{
			border:			1px solid black;
		}
		td:nth-child(1){	width:60px;		min-width:60px;		text-align:center;	}						/* 1列目		*/
		td:nth-child(2){	width:500px;											}						/* 2列目		*/
		td:nth-child(3){	border-top:none; border-bottom:none; border-right:none; }
	}
	&.is-bottom{
		td{
			border:			1px solid black;
		}
		td:nth-child(1){	width:80px;  }												/* 1列目		*/
		td:nth-child(3){	border-top:none; border-bottom:none; border-right:none; }
	}
	&.is-bottom-table{																	/* 末尾のテーブルは、起動時は非表示 */
		display:			none;
	}
}

img{
	max-width:			100%;											/* 基準：原寸大表示なおかつ画面幅まで	*/
	width:				auto;											/* 基準：原寸大表示なおかつ画面幅まで	*/
	border:				solid 0px black;
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 0px;
	/*clip-path: inset(0 50% 0 0);										/* 左半分だけ表示						*/
	/*clip-path: inset(0 0 0 50%);										/* 右半分だけ表示						*/
	&.is-LR-Change{		transform:		rotateY(180deg);	}			/* 左右反転 */
	&.is-border-on{		border:			solid 1px black;	}
	&.is-one{
						border-radius:	5px;							/* 角丸									*/
						padding:		5px;
					    border:			9px solid green;
	}
	&.is-gakubuti{
						padding:		10px;							/* 枠の内側余白 */
						background:		linear-gradient(45deg, #d4af37, #ffd700, #b8860b);
						border:			5px solid #b8860b;				/* 外枠の濃い金色 */
						box-shadow:		0 0 10px rgba(0,0,0,0.5);		/* 影で立体感 */
	}
}

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

hr{
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 0px;
	&.is-color{
		border:						2px solid pink;
		height:						10px;
		background-color:			red;
		animation-name:				line-engine;
		animation-duration:			3s;
		animation-timing-function:	linear;			/* 緩急を指定				*/
		animation-delay:			0s;				/* 起動までの遅延時間		*/
		animation-iteration-count:	infinite;
	}
}

@keyframes line-engine{
	  0%   {background-color:	red;  	border:	2px solid yellow; }
	 50%   {background-color:	blue; 	border:	2px solid cyan;   }
	100%   {background-color:	red;  	border:	2px solid yellow; }
}

/* 幅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%;		}
}