: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:			#eecccc;		/* 目次の奇数行	*/
		--base-odd:				#eedddd;		/* 目次の奇数行	*/
}

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

.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;   }	   /* 押した瞬間	   */

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

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;				/* 四辺ふちどり 5px										*/
		cursor:				pointer;
		transition:			background-color 0.3s ease;
		&.is-ctrl{			background-color:	black;	}
		&.is-wide{			width:297px;				}
		&.is-min{			width:71px;					}
}
button:hover{				background-color:	red;	}
button:active{				background-color:	white;	}

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

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）	*/
		font-family:		"Arial","メイリオ","sans-serif";
}

body{
		background-color:		var(--base-haikei);				/* 背景色									*/
		margin:					0px 0px 0px 0px;				/* マージン	  [上][右][下][左]				*/
		list-style-position:	outside;						/* リスト表示の位置指定 inside; outside;	*/

		background-image:		var(--base-haikei-gazou);
		background-repeat:		no-repeat;
		background-position:	center top;
		background-blend-mode:	none;				/* background-blend-mode は、その要素にある「背景」の重なり方（描画）を制御するプロパティです。「背景画像」と「背景色」が重なったときの表示の挙動が変わります。*/
													/* background-blend-mode: overlay; は、「背景色」を「背景画像」にかぶせて表示したような効果が出ます。														   */
		background-size:		auto;				/* 背景画像の大きさ																			*/
													/*	auto		元の大きさのまま															*/
													/*	contain		元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。	*/
													/*	cover		元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。		*/
													/*	数値(px)	明示的にpxで大きさを調整します。											*/
													/*	数値(%)		要素に対しての割合で指定します。											*/
		background-attachment: local;				/* 背景画像をスクロールさせるか？															*/
													/*	scroll	背景を要素自身に固定。要素内をスクロールしても背景は固定						*/
													/*	fixed	背景を表示領域に固定。ページをスクロールしても背景は固定						*/
													/*	local	背景をコンテンツに固定。背景も一緒にスクロールする。							*/
}

table{
		margin:				0px 0px 0px 0px;					/* マージン[上][右][下][左]					*/
		border:				0px solid black;					/* 外枠										*/
		border-collapse:	collapse;							/* collapse:セル同士の間に間隔を空けない separate:間隔をあけて表示する（枠線非表示でも間隔があく	*/
		background-color:	var(--base-haikei-table);
		th,td{													/* tableの基本構造は、パディング無し、左寄せ						*/
							text-align:		left;				/* td,td以降でないと、パディング・文字寄せ等、効かない				*/
							vertical-align: middle;				/* 文字の縦(垂直)方向の位置を指定									*/
		}

		&.is-header{
			background-image:	var(--base-hangyojin);
			background-size:	contain;
			background-repeat:	no-repeat;
			tr,th,td{		text-align: right;
							padding:	0px 0px 0px 0px;			/* それっぽいの、すべて設定しても、ボタンとボタンの間隔があく */
							margin:		0px 0px 0px 0px;
							border:				0px solid black;
							border-collapse:	collapse;
							border-spacing:		0px;
			}
		}

		&.is-mokuji{
			margin:				0px 0px 30px 0px;					/* マージン[上][右][下][左]		*/
			td:nth-child(1){	width:	450px;				}		/* 一列目 */
			tr,th,td{			height:			30px;		}
			/*
			td:nth-child(even){	background-color: red;	}			/* 偶数列
			td:nth-child(odd){	background-color: blue;	}			/* 奇数列
			*/
			tr:nth-of-type(even){	background-color: var(--base-even);	}		/* 偶数行 */
			tr:nth-of-type(odd)	{	background-color: var(--base-odd);	}		/* 奇数行 */
		}

		&.is-honbun{
			margin:				0px 0px 30px 0px;					/* マージン[上][右][下][左]		*/
		}

		&.is-midashi{
			th:nth-child(2){	text-align:right;					}
		}

		&.is-intable{
			th,td{				border: 1px solid #aaaaaa;
								text-align:		center;
 			}
			th:nth-child(1){	width:		40px;				}
			th:nth-child(4){	width:		40px;				}
			th:nth-child(5){	width:		80px;				}
			td:nth-child(2){	text-align:	left;				}
		}
}

h1{
	font-size:		xx-large;	   /* xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large */
	text-align:		center;
	font-weight:	bold;
	line-height:	120%;
	margin-top:		0;
	margin-bottom:	0;
	font-style:		normal;
	background-size: 200% 100%;		/* 白が走る速度 */
	background-image: linear-gradient(
										70deg,			/* 光の角度 */
										black	45%,	/*--アニメーション後の文字色--*/
										white	50%,	/*--アニメーション中の文字色--*/
										black	55%		/*--アニメーション前の文字色--*/
									);
	background-clip:	text;
	color:				transparent;
	animation: shine 2s;								/* アニメーションの速さ */
	animation-iteration-count:	var(--FlagMoJi-pika);	/* アニメーションの回数 */
}

ul{
		margin:					0px 0px 0px 0px;				/* マージン	  [上][右][下][左]				*/
		padding:				0px 0px 0px 30px;				/* パディング [上][右][下][左]				*/
		list-style-position:	outside;						/* リスト表示の位置指定 inside; outside;	*/
}

img{
		border: solid 0px black;
		margin:					0px 0px 0px 0px;				/* マージン	  [上][右][下][左]				*/
}

video{
		border: solid 0px black;
		width:	100%;
}

/* 幅900px以上 **********************************************************************/
@media screen and (min-width:900px) {

	.mode-pc {	display:		}	/* 最初は inlineだったが、blockやinline-blockだと枠線が変に表示され、空白だとよくなった */
	.mode-sm {	display: none;	}

	table{	max-width: 900px;		/* 横幅の最大値 */
			min-width: 900px;		/* 横幅の最小値	 */
	}

	img{
		&.is-400{	width: 400px; }
	}
}

/* 幅899まで *********************************************************************/
@media screen and (max-width:899px) {

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

	table{		width:	100%;	}

	img{		width: 100%;	}
}