:root{
		--moji-color:	black;
		--moji-size:	medium;				/* xx-small x-small small medium large x-large xx-large xxx-large	*/
		--haikei-table: #ffffff;
		--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 5px 0px 5px;	/* [上][右][下][左]										*/
}

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

html{										/* outline: red 1px 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 1px 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{
		font-style:				normal;					/* 通常体 (normal 筆記体 (italic 斜体 oblique	*/
		margin:					0px 0px 0px 0px;		/* [上][右][下][左]								*/
		list-style-position:	outside;

		/*	background-image:		url("ah-syabusyabu.jpg");
			background-image:		url("ah-abesouri2.jpg"),
									url("ah-zekkyou.jpg"),
									url("ah-goukyuu.jpg"),
									url("ah-saitou.jpg"),
									url("ah-syabusyabu.jpg");
		*/

		background-repeat:		no-repeat;
		/*
		background-repeat:		no-repeat,						/* 背景画像は繰り返さない					*/
								/* no-repeat; */

		background-position:	center bottom;

		/*
		background-position:	center top,			 /*	 left 50px center top; 中央の上		left bottom right top */
								/* center calc( 10px + 1303px								 ), */
								/* center calc( 10px + 1303px + 10px + 1072px				 ), */
								/* center calc( 10px + 1303px + 10px + 1072px + 10px + 819px ), */
		/*						   center bottom; */

		/*
		background-blend-mode:	overlay;			/* background-blend-mode は、その要素にある「背景」の重なり方（描画）を制御するプロパティです。今回の例では、「背景画像」と「背景色」が重なったときの表示の挙動が変わります。*/
													/* 機能としては、Photoshop などの「画像編集アプリ」にある、レイヤーの「ブレンドモード」とだいたい同じです。																	 */
													/* background-blend-mode: overlay; は、大雑把にいうと「背景色」を「背景画像」にかぶせて表示したような効果が出ます。															 */

		background-color:		var(--haikei-bg);
		background-color:		#eeeeee;
		/* background-color:	   rgba(0, 0, 0, 0.81); /* 半透明の黒色 */
													/* 背景色 rgba(86, 86, 86, 0.6); 背景に限らず総ての色指定は rgba指定により透明度を指定できる 0だと透明 0.9だとほぼ白 */

		background-size:		auto;				/* 背景画像の大きさ																			*/
													/*	auto		元の大きさのまま															*/
													/*	contain		元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。	*/
													/*	cover		元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。		*/
													/*	数値(px)	明示的にpxで大きさを調整します。											*/
													/*	数値(%)		要素に対しての割合で指定します。											*/
		background-attachment: local;				/* 背景画像をスクロールさせるか？															*/
													/*	scroll	背景を要素自身に固定。要素内をスクロールしても背景は固定						*/
													/*	fixed	背景を表示領域に固定。ページをスクロールしても背景は固定						*/
													/*	local	背景をコンテンツに固定。背景も一緒にスクロールする。							*/
}

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

		&.is-mokuji{
			height:					800px;
			background-image:		url("2024-1012.jpg");
			background-position:	center;
			background-size:		cover;				/* 背景画像の大きさ */
			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:		50px;
			}
			th:nth-child(1){	text-align:	center;
			}
			th:nth-child(2){	text-align:	right;
								width:		120px;
			}
		}

		&.is-kubun-date{
			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;		/* 背景、透明 */
						   }

		}

		&.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{	border: 0px solid black;
}

b{									/* <b>昔からある太文字タグだがテスト設定。細文字に変態設定することもできる	*/
		font-weight:	bold;		/* 文字の太さ	normal, bold, lighter										*/
		text-decoration:underline;
}

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-max	{  width:  100%;								}
		&.is-70		{  width:  70%;									}
		&.is-99		{  width:  99%;		border: 1px solid black;	}		/******* 100%で枠を付けると、画面がぶれる */
		&.is-hagaki {  width:  90%;	 	border: 1px solid black;	}
		&.is-map	{  width:  50%;		border: 1px solid black;	}
		&.is-729	{  width:  729px;	border: 1px solid black;	}
		&.is-566	{  width:  566px;	border: 1px solid black;	}
	}
}

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

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

	table{	width: 100%;			}

	h1{		font-size: x-large;		}

	img{	width: 100%;			}
}