:root{
		--moji-color:	#dddddd;
		--moji-size:	medium;				/* xx-small x-small small medium large x-large xx-large xxx-large	*/
		--haikei-table: #302e2b;
		--haikei-bg:	#262522;
		--kaigyou-haba: 160%;
}

a.ss:link{		color:yellow;		text-decoration:none;		font-weight:normal;	  }		  /* 通常表示		  */
a.ss:visited{	color:yellow;		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;	  }		  /* 押した瞬間		  */

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:					0 0 0 0;			/* マージン [上][右][下][左]					*/
		list-style-position:	outside;

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

		background-repeat:		no-repeat;			/* 背景画像は繰り返さない					*/
		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:		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{
		border:				0px solid black;		/* 外枠																			*/
		border-collapse:	collapse;				/* 表の隣接するセルの枠線を重ねて共有するか、間隔をあけて表示するかを指定する	*/
													/* collapse 隣接するセルの枠線を共有して表示する								*/
													/* separate 隣接するセルの枠線を間隔をあけて表示する（枠線非表示でも間隔があく	*/
		margin:				0px 0px 0px 0px;		/* マージン	  [上][右][下][左]													*/
		background-color:	var(--haikei-table);
		th,td{													/* tableの基本構造は、パディング無し、左寄せ						*/
							padding:	0px 0px	 0px 0px;		/* パディング [上][右][下][左]										*/
							text-align: left;					/* td,td以降でないと、パディング・文字寄せ等、効かない				*/
		}
		&.is-mokuji{
			background-color:	transparent;			/* 背景、透明 */
			th{					height:		50px;
			}
			th:nth-child(1){	background-color: transparent;			/* 背景、透明 */
								width:		300px;
			}
			th:nth-child(2){	background-color: transparent;			/* 背景、透明 */
								width:		3px;
			}
			th:nth-child(3){	background-color: transparent;			/* 背景、透明 */
								color:		#555555;
								text-align: right;
			}
			td:nth-child(3){	background-color: transparent;			/* 背景、透明 */
								color:		#555555;
								text-align: right;
			}
		}

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

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

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

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

img{	border: 0px solid black;
		&.is-waku{ border: 1px solid black; }
}

table{	width: 900px;	}

h1{ font-family:	"メイリオ";
	font-size:		xxx-large;
	text-align:		center;
	line-height:	0%;
	/*
		text-shadow:	3px 3px 3px #000,	-3px -3px 3px #000,
					   -3px 3px 3px #000,	 3px -3px 3px #000,
						3px 0px 3px #000,	-3px -0px 3px #000,
						0px 3px 3px #000,	 0px -3px 3px #000;
	*/
}

/********************************************************************************* 文字修飾関係 */

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

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

@media screen and (min-width:900px) {
	.mode-pc {	display: inline;	}
	.mode-sm {	display: none;		}

	#suntory1{ width: 400px; }
	#suntory2{ width: 150px; }

img{
		width:50%;
		&.is-30	   { width:	 30%;	}
		&.is-40	   { width:	 40%;	}
		&.is-50	   { width:	 50%;	}
		&.is-100   { width:	 100%;	}
		&.daigaku1 { width:	 300px; }
		&.daigaku2 { width:	 700px; }
		&.daigaku3 { width:	 500px; }
		&.daigaku4 { width:	 300px; }
	}
}

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

@media screen and (max-width:899px) {
	.mode-pc {	display: none;		}
	.mode-sm {	display: inline;	}

	h1{		font-size: x-large;		}

	table{	width: 100%;			}

	img{	width: 100%;			}

	#suntory1{ width: 100%;	 }
	#suntory2{ width: 150px; }

}