:root{
		--base-font-size:			medium;				/* xx-small x-small small medium large x-large xx-large xxx-large */
		--base-kaigyouhaba:			160%;
		--base-font-color:			black;
		--base-link-font-color:		blue;
		--base-haikei:				#eeeeee;
		--base-haikei-table:		white;
		--base-even:				#00ffff;			/* 目次の偶数行	*/
		--base-odd:					#aaffff;			/* 目次の奇数行	*/

		--Opening-font-size:		x-large;
		--Opening-takasa:			30px;
}

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

.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 0px;										}		/* 箇条書き [上][右][下][左]														*/
ul li{									margin:0px 0px 0px -1em;		padding:0px 0px 0px 0px;	}		/* １文字 = 1em					デフォルトで一文字分下げられている模様				*/
ol   {	border:0px skyblue dashed;		margin: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;	line-height:120%;						}
span.is-message{	font-size:large;	color:navy;			font-weight:bold;	}
span.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-Block{
					display:		inline-block;
					width:			155px;
					margin-left:	10px;
					vertical-align:	bottom;
		}
}

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

button{
		font-size:			var(--base-font-size);
		background-color:	mediumblue;
		color:				white;
		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-ctrl{			background-color:	black;		}
		&.is-wide{			width:297px;					}
		&.is-min{			width:71px;						}
		&.is-buttonKen{
							margin:			0px 0px 0px 0px;
							min-width:		50px;
							min-height:		20px;
							border-radius:	0px;
		}
}

button:hover{				background-color:	red;	color:yellow;	}
button:active{				background-color:	white;					}

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

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

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-haikei-gijidou{
						background-color:		mediumblue;
						height:					180px;
						background-image:		url("2026-0101-3all.png");
						background-repeat:		no-repeat;						/* 背景画像は繰り返さない					*/
						background-position:	center center;					/* 背景画像は中央の上						*/
						background-size:		cover;							/* 背景画像の大きさ							*/
																				/*	auto		元の大きさのまま															*/
																				/*	contain		元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。	*/
																				/*	cover		元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。		*/
																				/*	数値(px)	明示的にpxで大きさを調整します。											*/
																				/*	数値(%)		要素に対しての割合で指定します。											*/
						background-attachment: local;							/* 背景画像をスクロールさせるか？															*/
																				/*	scroll	背景を要素自身に固定。要素内をスクロールしても背景は固定						*/
																				/*	fixed	背景を表示領域に固定。ページをスクロールしても背景は固定						*/
																				/*	local	背景をコンテンツに固定。背景も一緒にスクロールする。							*/
	}
}

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

img{
	border:				solid 0px black;
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 0px;
	&.is-auto{			width:auto;		height:auto;		}		/* 原寸大	*/
	&.is-LR-Change{		transform:		rotateY(180deg);	}		/* 左右反転 */
	&.is-border-on{		border:			solid 1px black;	}
	&.is-300{			width:300px;						}
	&.is-400{			width:400px;						}
	&.is-500{			width:500px;						}
	&.is-600{			width:600px;						}
	&.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);	/* 影で立体感 */
			}
	&.is-mark5{			width:150px;	height:220px;		}
	&.is-mark6{			width:150px;	height:122px;		}
	&.is-mark7{			width:150px;	height:118px;		}
	&.is-ringo{			width:90px;		height:100px;		}
	&.is-aiko{			width:90px;		height:100px;		}
	&.is-aimyon{		width:90px;		height:100px;		}
}

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

h1{
	font-size:		xx-large;
	text-align:		center;
	font-weight:	bold;
	margin:			10px 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) {
	:root{
		--Opening-font-size:	medium;
		--Opening-takasa:		20px;
	}

	.mode-pc {	display: none;		}
	.mode-sm {	display:			}

	table{			width:100%;		}
	img{
					width:100%;
		&.is-one{	width:50%;		}
		&.is-300{	width:300px;	}
		&.is-400{	width:100%;		}
		&.is-500{	width:100%;		}
		&.is-600{	width:100%;		}
	}
}