@charset "utf-8";

/* 全体構造 */
* {
	margin: 0px;
	padding: 0px;
}
#all {
	max-width: 1500px; /* JSのLayout.MAX_PAGE_WIDTHに一致させる */
	margin: 0px auto;
	background: #ffffff;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75);
}
#header_block {
	width: 100%;
	height: 120px;
	background: #202020 url('title_bg.png') no-repeat;
	background-position: right center;
	background-size: 540px 120px;
	color: #ffffff;
}
#intro_block {
	float: left;
}
#canvas_block {
	float: right;
}
#canvas_inner_block {
	background: #ffffff;
	z-index: 100;
}
#canvas_inner_block.canvas_sticky {
	position: fixed;
	top: 0px;
}
#canvas_frame {
	border: 1px solid #cccccc;
	overflow: hidden;
	position: relative;
}
#canvas_panel {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}
#main_block {
	float: left;
	clear: left;
	padding-bottom: 16px;
}
.section {
	padding: 0px 0px 0px 16px;
}
.info {
	margin: 16px 0px 0px 16px;
	padding: 0px 16px;
	border: 1px solid #009900;
	border-radius: 8px;
	background: #ddffcc;
	color: #006600;
}
#footer_block {
	clear: both;
	width: 100%;
	height: 48px;
	background: #202020 url('title_bg.png') no-repeat;
	background-position: right center;
	background-size: 540px 120px;
	color: #ffffff;
}

/* 各種タグ */
body {
	background: #f0f0f0;
	font-size: 14px;
	font-family: sans-serif;
}
h1 {
	margin: 0px 24px;
	padding-top: 48px;
	font-size: 24px;
	line-height: 24px;
	letter-spacing: 0.2em;
}
h2 {
	margin: 24px 0px 16px;
	padding: 4px 8px;
	border: 1px solid #000000;
	border-left: 12px solid #000000;
	font-size: 16px;
	line-height: 16px;
}
h3 {
	margin: 24px 0px 16px;
	font-size: 14px;
}
p {
	margin: 16px 0px 16px;
	line-height: 1.5;
}
p.subtitle {
	margin: 8px 24px 0px;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 0.2em;
}
p.navi {
	margin: 16px 0px 0px;
	font-size: 12px;
}
p.copy {
	margin: 0px;
	text-align: center;
	line-height: 48px;
}
p.img {
	text-align: center;
}
p.img img {
	width: 404px;
	height: 285px;
	border: 1px solid #cccccc;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
ul {
	margin: 16px 0px 16px 24px;
	line-height: 1.5;
}
dt {
	margin: 16px 0px 0px;
	font-size: 11px;
	font-weight: bold;
	line-height: 11px;
}
dd {
	margin: 8px 0px 0px;
	padding: 4px 8px;
	line-height: 1.5;
	text-indent: 18px;
	position: relative;
}
a:link, a:visited {
	color: #3333ff;
}
a:link:hover, a:visited:hover {
	color: #ff3333;
}

/* 横幅の狭い縦長表示の場合 */
@media screen and (max-width: 800px) and (orientation: portrait) {
	#header_block {
		height: 96px;
		background-position: right top;
	}
	#intro_block {
		float: none;
	}
	#canvas_block {
		float: none;
	}
	#main_block {
		float: none;
	}
	.section {
		padding: 0px 8px;
	}
	.info {
		margin: 16px 8px;
	}
	h1 {
		margin: 0px 16px;
		padding-top: 32px;
		letter-spacing: 0px;
	}
	p.subtitle {
		margin: 8px 16px 0px;
		letter-spacing: 0px;
	}
	p.img img {
		width: 80vw;
		max-width: 404px;
		height: unset;
	}
}

/* 横幅が狭い場合（タイトル画像の位置調整用） */
@media screen and (max-width: 540px) {
	#header_block {
		background-position: left top;
	}
	#footer_block {
		background-position: left middle;
	}
}

/* 路線カラー */
.X {
	border: 1px solid #d0d0d0;
	border-left: 8px solid #d0d0d0;
	color: #808080; }
.W {
	border: 1px solid #202020;
	border-left: 8px solid #202020;
	color: #202020; }
.G { background: #f9cb7f; border-left: 8px solid #f39700; }
.M { background: #f27f88; border-left: 8px solid #e60012; }
.H { background: #cdd6db; border-left: 8px solid #9caeb7; }
.T { background: #7fd3ed; border-left: 8px solid #00a7db; }
.C { background: #7fcca1; border-left: 8px solid #009944; }
.Y { background: #ebe1a3; border-left: 8px solid #d7c447; }
.Z { background: #cdbdea; border-left: 8px solid #9b7cb6; }
.N { background: #7fd6d4; border-left: 8px solid #00ada9; }
.F { background: #ddb18e; border-left: 8px solid #bb641d; }
.A { background: #f3a8cb; border-left: 8px solid #e85298; }
.I { background: #7fbce0; border-left: 8px solid #0079c2; }
.S { background: #b5ddac; border-left: 8px solid #6cbb5a; }
.E { background: #da7fbc; border-left: 8px solid #b6007a; }

/* 年表中の記号 */
p i {
	width: 15px;
	height: 15px;
	margin-right: 4px;
	background-color: #202020;
	background-repeat: no-repeat;
	background-size: 15px 15px;
	vertical-align: middle;
	display: inline-block;
}
dd i {
	width: 15px;
	height: 15px;
	background-color: #202020;
	background-repeat: no-repeat;
	background-size: 15px 15px;
	position: absolute;
	left: 6px;
	top: 6px;
}
dd.X i {
	background-color: #d0d0d0;
}
.sNL { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAdhwAAHYcBj+XxZQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACzSURBVEiJ7ZUxCsMwDEWl7qUXSMaSu5uUzIVeKYX6Aq+LA4UmNpHtZPEDbf5+i9AXaRwN0AMj4MNMwHCEdOafN9DXFI8r0gVXw6lB7EXkavpAVS25iyVUgkX8irxxukIROzBsLNcMdBsZAErIO8ABnzAP4B55X0a8l1zx6cvVxE3cxEmq9XvsgFTt94Q42e/mlsk4l15Vb2csFyIZy7XW0T9dPUWiT6sziaXfS8p39XujGl8bHEEVkmDW8AAAAABJRU5ErkJggg==); }
.sEL { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAdhwAAHYcBj+XxZQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABOSURBVEiJ7ZVBCgAgDMNW8f9fnh+YOgRRRnLVNvQ0M4BqaPbg7p4qkMKOVV6SWqb8Bn334WRRJv9sMWLEiBEj/l/czfKXJuI0+2wxQD0G8IMUJPV3nM0AAAAASUVORK5CYII=); }
.sCL { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAdhwAAHYcBj+XxZQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACPSURBVEiJ7ZZRCoAgEAW1c+R3Z0+CLlZdYfoxkLRCS8rY+VvQHRfkqVLC39F+AZDcQGt9vSqkydn0Kjhy9782sYi/KwYMMHj1CHTPHisunQlZAFNSPESkGzal1+3kSpJ5KVdHcrmLdERfUty5i7RnAtpiYic3gPUnLS7dHUAeCRGfkvVfUur+/6yO5BKqZAXqgbmDa18R9AAAAABJRU5ErkJggg==); }
.sNS { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAdhwAAHYcBj+XxZQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFrSURBVEiJ7ZZNTgJBEEarh8BGvIHxAMhKbyDRLQjGO4gQ4zHAK+gd8BpGXQgLDbozegBWavS54JukTfiZnoHdVNLpzEx99Wq60tVtlltuazKX1BEomVlDY9fMtvTpzcwezGxgZgPn3NfKsgNawCvL7QVorgIYAZde4EfgHKgAGxo7ejf0/PpAlAUcQz+B00XBlGRbvgC9tNCWB90P0NU8eCMUWvJq2k6RdEfaMVAMEZ54NS2kABeAkWIcz/KZV7MjzVfOuZ9QsDTXeky+3MCzsq2EQr0YVcV4ChFNJCpnAG8qxmTW9/R7bbnFXfE3BPyueTsDONZ+hIDvNB9kAB9qvk2s8LbTcF3baZ6wpIYPcJYC3E3VQCRuei2zFqDzW2Y9NOk4SN+DdxYtu5a3m/mQULDIg6O6Xag5lDWqejfy/HpkORa9BBqq1zIbk/BECrn6FM2sbtPeu2f/rz73Nr363DjnvsN+K7fcVmx/43wEDtJT4lMAAAAASUVORK5CYII=); }
.sCS { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAdhwAAHYcBj+XxZQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGaSURBVEiJ7ZY9TkJBFIXPQKRRS4kmrgC10RWo0VaCxj2AqGEZ4DZMbHEBbsCohY9EDNpZ2FOpiZ8Fl2Q0vJ8B7DjJZPLuPfee+XlzZ6QZZvgnuKxEoCCpbG1T0qq53iQ9SGpLajvnPqc2OuAQeCUdL0BlGoI54MJL/AicAyVg3tqa2SKP1wJykwgPRT+AalIyG2TNuADNcUUPPdGdGE4VKP6x7Xri5VDRgrentRhOzfzRCPG6+XrAXIjwsben+RjOkvkBnoAVz5cHOuY7ChG+sqCzFF6SeMPslyHCzxZUysAdKQ6sm60bIty3oAXPlhURUAQW7bs/SmP8s5aOYVX8zhwx4VIvmz1xqeNmfGf9XpqopBtJG5K6kradc+/m3rf+Nm3wfsLhcYrIfpyWPd/Yx6nAoOADnMRwkgrIqfnCCogFVyz4A9iN4aSVzIMgUS9JyxOvxy27cfM208kuCUuW88SxfWvYH7tgbd1sHY/XZJJr0RtA2fYrDT0y3kghT585SQcaPH229Pvpc6/B0+faOfcVNq0ZZpgyfgBhiOFKtrA/XQAAAABJRU5ErkJggg==); }
.sNT { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAdhwAAHYcBj+XxZQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAB3SURBVEiJ7ZVLDoAgDAUb4xU0ekQ9ri48zrgAXbgQIrZ+0lkTphT6EPkbwAC01tKRwGwqBxpgivIF6F1esukV9juviiuwZjtCYs2x1Z26WEWaEqtJM8R6AZLRap3IzHlcZzw2Ti52sYtvoxYJYWAt/t5/7DivZQUoSgLIJEZFtwAAAABJRU5ErkJggg==); }
.sET { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAdhwAAHYcBj+XxZQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACVSURBVEiJ7ZcxDoAgDACN8QsafaI+Vwefcw6CgyHQAIWEcDPhoJQWhqE1gB1YSksPXq6icmAGTiO/ga3LUyaN4TvzMXkFpbFbCIz5h3pVF6tIQ2I1qUCsV0AEodYpmZLk8jHZSfItSUab99iH2o6rJFe16+QoIPlaYkTJzCOPbBK9H+vgCHW+LtWlRlznQW/k5b8wEh4xzfloa46mcQAAAABJRU5ErkJggg==); }
.sOX { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAdhwAAHYcBj+XxZQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAB+SURBVEiJ7dY7CoAwEABR8aoKAb1/qWMlWMSY/WKRqRdestVO02j0t4AClGx0BQ7gBPZs9C4er6DxeAONwztQf1yA+uEK1I4bUD3ugH7i85st3VDrH7JpWBxWvemeqsf1qAG3owrcDxXg/mgHHoc28Hi0guehDzz/9BmNeroALLgITLo+sj4AAAAASUVORK5CYII=); }

/* JSがOFFの場合の初期値（ONの場合は全てJSが上書き） */
#intro_block { width: 40%; }
#canvas_block { width: 60%; }
#canvas_inner_block { width: 100%; }
#canvas_frame { width: calc(100% - 32px); margin-top: 16px; margin-left: 16px; }
#main_block { width: calc(100% - 16px); }
#noscript_img { width: 100%; }
@media screen and (max-width: 800px) and (orientation: portrait) {
	#intro_block { width: 100%; }
	#canvas_block { width: 100%; }
	#canvas_inner_block { width: 100%; }
	#canvas_frame { width: calc(100% - 16px); margin-top: 16px; margin-left: 8px; }
	#main_block { width: 100%; }
	#noscript_img { width: 100%; }
}