:root{
	--moji-color:	black;
	--moji-size:	medium;				/* xx-small x-small small medium large x-large xx-large xxx-large	*/
	--haikei-table: white;
	--haikei-bg:	#eeeeee;
	--kaigyou-haba: 160%;
}

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

a.ss:link{		color:blue;			text-decoration:none;		font-weight:normal;	  }		  /* 通常表示		  */
a.ss:visited{	color:blue;			text-decoration:underline;	font-weight:normal;	  }		  /* 通常表示		  */
a.ss:hover{		color:red;			text-decoration:underline;	font-weight:normal;	  }		  /* カーソル直上	  */
a.ss:active{	color:red;			text-decoration:none;		font-weight:normal;	  }		  /* 押した瞬間		  */

p{											/* pタグはHTMLで段落を表現するための基本的な要素です。	*/
	margin:			0px 0px 20px 0px;	/* [上][右][下][左]										*/
	text-indent:	0em;				/* 最初の行の字下げ １文字 = 1em						*/
	padding:		0px 0px 0px 0px;	/* [上][右][下][左]										*/
}

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

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

html{										/* outline: red 0px solid; デバッグ用								*/
	color:			var(--moji-color);	/* 文字の色															*/
	font-size:		var(--moji-size);	/* xx-small x-small small medium large x-large xx-large xxx-large	*/
	letter-spacing: normal;				/* 文字間隔 normal 0px 0.1em										*/
	word-spacing:	normal;				/* 単語間隔															*/
	font-weight:	normal;				/* 文字の太さ normal, bold, lighter									*/
	line-height:	var(--kaigyou-haba);
	font-family:	"メイリオ";
								/* cursor: url("a_unchi_character50.png"),auto; マウスカーソルのデザイン指定 */
}

body{
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 0px;
	font-style:				normal;					/* 通常体 (normal 筆記体 (italic 斜体 oblique	*/
	margin:					0px 0px 0px 0px;		/* [上][右][下][左]								*/
	list-style-position:	outside;
	background-repeat:		no-repeat;
	background-position:	center bottom;
	background-color:		var(--haikei-bg);
	background-color:		#eeeeee;
	background-size:		cover;				/* 背景画像の大きさ																			*/
												/*	auto		元の大きさのまま															*/
												/*	contain		元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。	*/
												/*	cover		元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。		*/
												/*	数値(px)	明示的にpxで大きさを調整します。											*/
												/*	数値(%)		要素に対しての割合で指定します。											*/
}

table{
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 0px;
	border:				0px solid black;
	border-collapse:	collapse;					/* 隣接するセルの枠線を collapse 共有する	separate 間隔をあけて表示する（枠線非表示でも間隔が開く	*/
	background-color:	var(--haikei-table);
	th,td{											/* th,td以降でないと、パディング・文字寄せ等、効かない								*/
			vertical-align:	top;					/* 上下：上寄せ																		*/
			text-align:		left;					/* 左右：左寄せ																		*/
	}

	&.is-mokuji{
		height:					800px;
		background-image:		url("2024-1012.jpg");
		background-position:	center;
		background-size:		cover;				/* 背景画像の大きさ																			*/
		background-repeat:		no-repeat;
		table-layout:			fixed;				/* これを指定したら、背景画像を指定した時、tableが横に数ドット広がることを防げた	*/
		text-shadow:	3px 3px 3px white,	 -3px -3px 3px white,
					   -3px 3px 3px white,	  3px -3px 3px white,
						3px 0px 3px white,	 -3px -0px 3px white,
						0px 3px 3px white,	  0px -3px 3px white;
		td{
								height: 30px;
		}
	}

	&.is-in-table{
		background-color:	transparent;						/* 背景、透明 */
		td:nth-child(1){	width:	360px;				}
	}

	&.is-conversational-header{
		background-color:	#cccccc;
		th{					height:		100px;
		}
		th:nth-child(1){	text-align:	center;
							vertical-align:middle;
		}
		th:nth-child(2){	text-align:	right;
							vertical-align:middle;
							width:		120px;
		}
	}

	&.is-kubun-data{
		th,td{
							border:		1px solid black;
		}
		th{
							text-align:	center;
		}
		td:nth-child(1){
							width:			120px;
							font-weight:	bold;			/* 文字の太さ normal, bold, lighter		*/
					   }
		th:nth-child(3),td:nth-child(3){
							background-color:	aqua;		/* 背景、透明 */
					   }
		tr:nth-child(13){
			td:nth-child(1){
							font-weight:		lighter;
			}
		}
	}

	&.is-conversational-date{
		th,td{				border:		1px solid black;	}
		td:nth-child(1){	width:		120px;				}
		td:nth-child(2){	width:		300px;				}
		td:nth-child(3){	width:		100px;				}
	}

	&.is-conversational-history{
		td:nth-child(1){	width:		60px;				}
	}

	&.is-conversational{
		font-family:"ＭＳ ゴシック";
		td:nth-child(1) {
			width:		45px;
		}
	}

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

img{
	max-width:			100%;					/* 基準：原寸大表示なおかつ画面幅まで	*/
	width:				auto;					/* 基準：原寸大表示なおかつ画面幅まで	*/
	margin:				0px 0px 0px 0px;
	padding:			0px 0px 0px 0px;
	border:				1px solid black;
	outline:			none;
	display:			block;					/*インライン要素ではなくなり、ベースライン余白が消えます。	*/
	vertical-align:		bottom;					/* imgを含むインライン要素の初期値は「vertical-align: baseline;」が指定されており、表示後に隙間ができる原因となっているので、baseline以外のものを指定 */
	/*clip-path: inset(0 50% 0 0);				/* 左半分だけ表示						*/
	/*clip-path: inset(0 0 0 50%);				/* 右半分だけ表示						*/
}

h2{
	text-align:		center;
}

/*********************************************************************************/
/* 幅900px以上 *******************************************************************/
/*********************************************************************************/

@media screen and (min-width:900px) {
	.mode-pc {	display:			}	/* inline から空白に変えたら、枠線の変なのが消えた */
	.mode-sm {	display: none;		}

	table{	width: 900px;	}

	h1{
		font-size:		xxx-large;
		text-align:		center;
		line-height:	0%;
	}

	img{
		width:50%;
		&.is-75 {  width:75%;			}
		&.is-100{  width:100%;			}
		&.is-no-border{  border:none;	}
	}
}

/*********************************************************************************/
/* 幅899まで *********************************************************************/
/*********************************************************************************/

@media screen and (max-width:899px) {
	.mode-pc {	display: none;		}
	.mode-sm {	display:			}	   /* inline から空白に変えたら、枠線の変なのが消えた */

	table{	width: 100%;			}

	h1{		font-size: x-large;		}
}