/* ************************************************** */
/* **********　　　ここから概要部　　　　　********** */

#outline{
	 /* 概要部の位置および背景画像の指定 */
	position:	absolute;
	top:	245px;	left:	0px;
	width:	240px;
	background-image : url(blue_sky.gif);
	padding:	15px;
}
#outline h1{
	 /* 作品番号の位置・大きさ・色・シャドウの指定
                中央寄せ、サイズ：XXL、色：黄色に紺の影 */
	text-align:	center;
	color:	#ffff30;
	font-size:	xx-large;
	text-shadow:	navy -3px 3px, navy 0px 3px, navy 3px 3px;
}
#outline h2{
	 /* 概要部に含まれる項目名の文字特性の指定
                大文字表記、太字、文字間：大、サイズ：XL、 色：白 */
	color:	white;
	font-variant:	small-caps;
	font-size:	x-large;
	font-weight:	bold;
	letter-spacing:	3px;
}
#outline h3{
	 /* 来訪者カウンター説明文の文字特性指定
                大文字表記、太字、サイズ：M、色：白 */
	color:	white;
	font-variant:	small-caps;
	font-size:	medium;
	font-weight:	bold;
}
#outline h4{
	 /* 幻実館／夢創館の別
                太字、サイズ：L、色：黄色（影付き） */
	text-align:	center;
	color:	#ffff30;
	font-size:	large;
	font-weight:	bold;
	text-shadow:	navy -2px 2px, navy 3px 2px;
}
#outline p, #outline td{
	 /* 概要部に含まれる項目の内容説明文の文字特性指定
               太字、サイズ：M、色：濃い青 */
	color:	#000099;
	font-size:	medium;
	font-weight:	bold;
}
#outline a{
	 /* 概要部に含まれるハイパーリンク部分の文字特性指定
               太字、サイズ：S、色：濃い青、行間：広め */
	color:	#000099;
	font-size:	small;
	font-weight:	bold;
	line-height:	110%;
}

/* **********　　　ここまで概要部　　　　　********** */
/* ************************************************** */
/* **********　　　ここから各ページ共通　　********** */

#cur_pavilion{
	 /* 電車画像中央看板の位置およびサイズの指定 */
	position:	absolute;
	top:	245px;	left:	630px;
}
#pre_pavilion{
	 /* 電車画像右側看板の位置およびサイズの指定 */
	position:	absolute;
	top:	262px;	left:	1035px;
}
#fol_pavilion{
	 /* 電車画像左側看板の位置およびサイズの指定 */
	position:	absolute;
	top:	262px;	left:	309px;
}
img.diorama{
	 /* 電車画像の下の余白 */
	margin: 0 0 10px 0;
	border-radius:	15px;
}

#quiz, #backstage{
/* コンテンツ部の位置を指定 */
	position:	absolute;
	top:	235px;	left:	280px;
	width:	850px;
	padding:	10px;
}
#quiz h1, #backstage h1{
/* 各ページのタイトルの文字色を白に、大きさをXLに */
	padding:	5px 0 0 0;
	color:	#ffff30;
	font-size:	x-large;
}

#quiz h2{
/* クイズのページタイトル下の注意書きを白に */
	padding:	10px;
	color:	white;
	font-size:	medium;
}
#backstage h2{
/* 舞台裏のページタイトル下の注意書きを白に */
	padding:	0 0 15px 0;
	color:	white;
	font-size:	small;
}
#quiz h3, #backstage h3{
/* 各ページ末尾のジャンプ先表示部の角を丸くすると共に、文字の大きさをLに */
	color:	white;
	font-size:	large;
	text-align:	center;
	padding:	10px;
	border-radius:	0 0 15px 15px;
}
#quiz a, #backstage a{
/* ページ下端以外のハイパーリンク部分を紺に */
	color:	navy;
}
#quiz h3>a, #backstage h3>a{
/* ページ下端のハイパーリンク部分を白に */
	color: white;
}

/* **********　　　ここまで各ページ共通　　********** */
/* ************************************************** */
/* **********　　　ここからクイズ用　　　　********** */

#quiz{
	 /* 全体の背景を淡い緑に */
	background-color:	#80ff80;
}
#quiz h1, table.quiz, #quiz h3{
/* ページタイトルおよびページ末のジャンプ先表示部の背景を緑に */
	background-color:	#006400;
}
#quiz_table{
	/* 表の両脇を空ける */
	margin:	0 30px 0 30px;
}
#quiz_table td{
	 /* 表の内容を上揃えに、文字は緑の大文字に */
	vertical-align:	top;
	color:	#006400;
	font-size:	large;
	line-height:	120%;
}
#quiz_table a{
	/* リンクも緑に */
	color:	#006400;
}

/* **********　　　ここまでクイズ用　　　　********** */
/* ************************************************** */
/* **********　　　ここから舞台裏用　　　　********** */

#backstage{
	 /* 全体の背景を淡いピンクに */
	background-color:	 #edccbc;
}
#backstage h1, table.backstage, #backstage h3{
/* ページタイトルおよびページ末のジャンプ先表示部の背景を茶色に */
	background-color:	#a0522d;
}
td.scene{
/* 場面選択用選択肢 */
	margin: 0px 15px 0px 15px;
	padding: 10px 20px 10px 20px;
	border-radius:	20px;
	background-color:	#ffff60;
	font-weight:	bold;
	color:	darkgreen;
}
#scenes a{
/* 場面選択エリアのリンク */
	color:	darkgreen;
}
p.scene, p.comment, p.backstage1, p.backstage2{
/* 場面および写真に関するコメントの背景の形の定義、上に白、下に緑の影を */
	border-radius:	10px;
	text-align:	left;
}
table.scene{
/* 場面に関するコメントを書くための表の設定 */
	width:	100%;
	margin:	20px 0 0 0;
}
p.scene{
/* 場面に関するコメントの背景をオレンジ色に */
	padding:	10px 20px 10px 20px;
	font-size:	large;
	background-color:	#ffc000;
	box-shadow:	-5px -5px white, 5px 5px green;
}
td.scene_left{
/* 場面に関するコメントを書くための欄の設定（左側） */
	width:	93%;
}
td.scene_right{
/* 場面に関するコメントの横に設けるページトップへのジャンプ用（右側） */
	width:	7%;
	text-align:	right;
	vertical-align:	bottom;
}

p.comment{
/* 写真に関するコメントの背景を黄色に */
	margin:	10px 0 0 0;
	padding:	5px 20px 5px 20px;
	color:	skyblue;
	background-color:	#ffff60;
	box-shadow:	-5px -5px white, 5px 5px #30c030;
}
p.backstage1{
/* 裏話（大）の背景を茶色に */
	margin:	20px 0 0 0;
	padding:	10px 20px 10px 20px;
	font-size:	large;
	background-color:	#a0522d;
	box-shadow:	-5px -5px white, 5px 5px  #400000;
}
p.backstage2{
/* 裏話（小）の背景を薄茶色に */
	margin:	20px 30px 0 30px;
	padding:	10px 20px 10px 20px;
	color:	navy;
	background-color:	#e1a070;
	box-shadow:	-5px -5px white, 5px 5px #70e070;
}
#backstage td{
/* 写真およびコメントのための表の中身を上揃えに */
	vertical-align:	top;
}
table.original, table.modified{
	 /* 写真枠の背景の形状を定義 */
	padding: 10px;
	border-radius:	20px 30px 10px 45px;
	text-align:	right;
}
table.original{
	 /* 写真枠の背景を淡い黄色に */
	background-color:	lightgoldenrodyellow;
}
table.modified{
	 /* 写真枠の背景を薄茶色に */
	background-color:	#e1a070;
}
table.original, table.modified, table.contents{
	 /* 上記２背景およびその中のコンテンツ配置用の表の幅を最大に */
	width:	100%;
}
img.original_23, img.original_43,
img.modified_23, img.modified_43{
/* 縁取りの幅の指定 */
	margin:	10px;	padding: 10px;
}
img.original_23, img.modified_23{
/* 縦長画像の大きさ指定 */
	width:	150px;	height:	225px;
}
img.original_43, img.modified_43{
/* 壁紙型画像の大きさ指定 */
	width:	200px;	height:	150px;
}
img.original_23, img.original_43{
/* 縦長画像の縁取りの色指定 */
	background-color:	#ffff60;
	opacity:	0.7;
}
img.modified_23, img.modified_43{
/* 壁紙型画像の縁取りの色指定 */
	background-color:	#a0522d;
}
hr.backstage{
	/* 本編スライドショー下の水平線を定義 */
	margin:	30px;
	width:	90%;	height:	5px;
	background-color:	#a0522d;
	border:	#a0522d;
	box-shadow:	0px -3px white, 0px 3px  #400000;
}

/* **********　　　ここまで舞台裏用　　　　********** */
/* ************************************************** */