*{
	box-sizing: border-box;
}
:root{
	background-color: #222;
	color: white;
	height: 100%;
}
body{
	padding-top: 60px;
	padding-bottom: 160px;
}
.crusor-progress, .crusor-progress *{
	cursor: progress!important;
}
a{color: lightskyblue;}
td{
	background-color: inherit;
}
label{
	cursor: pointer;
}
.fa-exclamation-triangle{
	color: gold;
	margin-right: 0.2em;
	font-size: 80%;
}
[data-currentContent="index"] .nav-icon-index{background-color: royalblue;}
[data-currentContent="delay"] .nav-icon-delay{background-color: royalblue;}
[data-currentContent="diagram"] .nav-icon-diagram{background-color: royalblue;}

header{
	border: none;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	height: 60px;
	padding-top: 5px;
	background-color: #555;
	width: 100%;
	box-shadow: black 0px 0px 10px;
	z-index: 1000;
}
#progress{
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	transition: width 0.3s, color 0.3s;
	width: 100%;
	height: 5px;
	background-color: midnightblue;
	z-index: 11000;
}
header h1{
	font-size: 1.6em;
	font-weight: normal;
	text-shadow:
		1px 1px 1px rgba(255,255,255,0.5),
		1px -1px 1px rgba(255,255,255,0.5),
		-1px 1px 1px rgba(255,255,255,0.5),
		-1px -1px 1px rgba(255,255,255,0.5);
	margin: 0!important;
	padding: 0!important;
	border: none!important;
}
header h1 label{
	display: flex;
	height: 100%;
	width: 100%;
	line-height: 55px;
}
header h1 .icon{
	font-size: 70%;
}
.icon{
	text-shadow: none;
	display: inline-block;
	width: 4em;
	text-align: center;
}
.icon-i{
	font-size: 140%;
	line-height: 1.5em;
}
.icon-name{
	font-size: 80%;
	line-height: 1em;
}
nav.to-under-900{
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 55px;
	background-color: #555;
	box-shadow: black 0px 0px 10px;
	cursor: pointer;
	z-index: 1000;
}
nav.to-under-900>*{
	flex-grow: 1;
	text-align: center;
	font-size: 1.6em;
	line-height: 55px;
	font-size: 100%;
	padding: 0.2em 0;
}
nav.to-under-900 .icon{
	border-radius: 50%;
	height: 100%;
}
header h1{
	flex-grow: 1;
}
nav.to-over-900{
	height: 100%;
	font-size: 120%;
	padding: 15px 10px 0;
}
nav.to-over-900>div{
	height: 100%;
	padding: 0 1em;
	margin: 0 0.5em;
	line-height: 40px;
	border-radius: 15px 15px 0 0;
	cursor: pointer;
	background-color: #222;
	transition: background-color 0.3s;
}
nav.to-over-900>div:hover{
	background-color: royalblue;
}
nav.to-over-900 i{
	font-size: 80%;
}
@media (min-width: 900px) {
	/*900以上*/
	header{
		display: flex;
	}
	nav.to-over-900{
		display: flex;
	}
}
@media (max-width: 899px) {
	/*900以下*/
	.to-over-900{display: none!important;}
}
@media (min-width: 900px) {
	/*900以上*/
	.to-under-900{display: none!important;}
}
@media (max-width: 599px) {
	/*600以下*/
	.to-pc{display: none!important;}
}
@media (min-width: 600px) {
	/*600以上*/
	.to-sp{display: none!important;}
}

#aside{
	position: fixed;
	top: 0;
	left: -250px;
	z-index: 100;
	transition: all ease 0.3s;
	width: 240px;
	height: 100vh;
	overflow-y: scroll;
	background-color: #222;
	padding-top: 60px;
	padding-bottom: 60px;
	border-right: 1px solid black;
	-webkit-overflow-scrolling: touch;
}
#aside h3{
	margin: 0;
	padding: 0.25em;
}
#aside h4{
	margin: 0;
	padding: 0.25em;
}
.aside-help{
	font-size: 150%;
	background-color: royalblue;
	margin: 0.5em;
	border-radius: 0.5em;
	cursor: pointer;
}
.aside-help:hover{
	background-color: cornflowerblue;
}
#select-line>div>div{
	cursor: pointer;
	padding: 0.25em;
	background-color: #333;
	border-top: 1px solid #222;
	border-left: 10px solid #222;
	border-bottom: 1px solid #222;
}
[data-currentContent="index"] #select-line div.viewing{
	background-color: royalblue;
	color: white;
	font-weight: bold;
}
[data-currentContent="delay"] #select-line-title,
[data-currentContent="delay"] #select-line,
[data-currentContent="delay"] #select-clear,
[data-currentContent="diagram"] #select-line-title,
[data-currentContent="diagram"] #select-line,
[data-currentContent="diagram"] #select-clear{
	display: none;
}
.delay-line::after{
	content: "\f071";
	font-weight: bold;
	font-family:'Font Awesome 5 Free';
	font-size: 80%;
	color: gold;
	margin-left: 0.2em;
}
#select-clear{
	margin: 1em 0.8em;
	padding: 0.5em;
	background-color: white;
	border-radius: 0.5em;
	font-weight: bold;
	background-color: crimson;
	text-align: center;
	cursor: pointer;
}
footer{
	background-color: inherit;
}


#reload{
	position: fixed;
	display: block;
	padding: 0;
	margin: 0;
	right: 2em;
	bottom: 5em;
	border: 0.1em solid white;
	background-color: midnightblue;
	color: white;
	font-weight: bold;
	border-radius: 50%;
	width: 5.2em;
	height: 5.2em;
	line-height: 5em;
	text-align: center;
	box-shadow: 2px 2px 10px 0px black;
	z-index: 10;
}
#reload:hover{
	cursor: pointer;
}
#reload:active{
	background-color: deepskyblue;
}

.disp-menu-label{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;
}
#is-disp-aside:checked~.disp-menu-label{
	display: block;
	z-index: 90;
}
#is-disp-aside:checked~main>#aside{
	left: 0;
}
@media (min-width: 600px) {
	/*600以上*/
	#is-disp-aside:checked~main>#massage-area,
	#is-disp-aside:checked~main>#view-area,
	#is-disp-aside:checked~main>#ad-area{
		padding-left: 250px;
	}
	#is-disp-aside:checked~.disp-menu-label{
		display: none;
	}
}

#view-area{
	padding: 0;
	min-height: calc(100vh - 260px);/*デフォルト表示のposition:sticky;位置用*/
	transition: padding 0.3s;
}
#view-area>div{
	margin: 2em 3%;
	background-color: #444;
	border-radius: 1em;
	box-shadow: 2px 2px 5px 0px black;
}
[data-currentcontent="diagram"]{
	padding: 0;
	height: 100%;
}
[data-currentcontent="diagram"] main,
[data-currentcontent="diagram"] #view-area,
[data-currentcontent="diagram"] #view-area>div{
	height: 100%;
	margin: 0;
	border-radius: 0;
}
[data-currentcontent="diagram"] main{
	padding: 65px 0 60px;
}
@media (min-width: 900px) {
	[data-currentcontent="diagram"] main{
		padding-bottom: 0;
	}
}
[data-currentcontent="diagram"] #reload{
	display: none;
}
.delay-info h4{
	padding: 0.5em;
	margin: 0;
}
.delay-info table{
	width: 100%;
	margin: 0;
}
.delay-info table, .delay-info tr{
	border: none;
}
.delay-info tr:nth-last-child(n+2){
	border-bottom: 1px solid #aaa;
}
.delay-info td:first-child{
	width: 5em;
	font-weight: bold;
}
.delay-info td:last-child{
	text-align: left;
}
.delay-info+.delay-default-info{
	display: none;
}
.delay-default-info{
	background-color: greenyellow!important;
	padding: 1em;
	position: sticky;
	left: 0;
	top: calc(50vh - 60px);
	text-align: center;
	font-weight: bold;
	color: black;
}
.delay-default-info::before{
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	border-radius: 50%;
	border: 0.3em solid royalblue;
	vertical-align: sub;
}
.traffic-info{
	overflow: hidden;
	transition: height 0.3s, background-color 0.3s;
}
.traffic-info .title{
	padding: 0.5em;
}
.traffic-info .title h3{
	margin: 0;
}
.traffic-info .info{
	padding: 0.8em;
	border-bottom: 1px solid #aaa;
}
.traffic-info .running, .traffic-info .canceled{
	padding: 0.8em 0;
	border-bottom: 1px solid #aaa;
}
.traffic-info .running>div{
	padding: 1em;
	text-align: center;
}
.traffic-info .running h4, .traffic-info .canceled h4{
	margin: 0 0.2em;
}
.train-table{
	font-size: 80%;
	border: none;
	cursor: pointer;
}
.train-table tr{
	border: none;
}
.train-table tr:nth-child(odd){
	background-color: #555;
}
.train-table td{
	padding: 0.5em 0.2em;
}
.train-table td span{
	display: inline-block;
	padding: 0.1em;
	border-radius: 0.2em;
}
.station-dep{
	font-size: 90%;
}
.owner{
	border-radius: 0!important;
}
.traffic-info[data-only-direction="1"] tr.direction-0,
.traffic-info[data-only-direction="2"] tr.direction-1{
	display: none;/*0-1-2で全-上りのみ-下りのみ切り替え*/
}
.traffic-info[data-only-direction="1"] .menu-direction-display,
.traffic-info[data-only-direction="2"] .menu-direction-display{
	background-color: #222!important;
	box-shadow: inset 3px 3px 5px black;
}
.traffic-info .menu{
	display: flex;
}
.traffic-info .menu>div{
	padding: 0.2em 0 0.5em;
	border-right: 1px solid black;
	cursor: pointer;
}
.traffic-info .menu>div:active, .reversed .menu-reverse{
	background-color: #222!important;
	box-shadow: inset 3px 3px 5px black;
}
.train-table .hk-0::before, .reversed .train-table .hk-1::before{
	content: "\f062";
	color: hotpink;
	font-weight: bold;
	font-family:'Font Awesome 5 Free';
	font-size: 80%;
}
.train-table .hk-1::before, .reversed .train-table .hk-0::before{
	content: "\f063";
	color: lightskyblue;
	font-weight: bold;
	font-family:'Font Awesome 5 Free';
	font-size: 80%;
}
.no-wrap{
	white-space: nowrap;
}
.align-left{
	text-align: left;
}
#add-new-line{
	position: sticky;
	top: calc(50vh - 60px);
	left: 0;
	background-color: royalblue!important;
	text-align: center;
	padding: 0.5em;
}
#add-new-line label{
	display: block;
	border: 2px dashed white;
	padding: 0.5em;
	border-radius: 0.5em;
}

/*時刻表*/

#detail-wrap{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 10000;
}
#view-detail{
	position: fixed;
	top: 40px;
	left: 30px;
	background-color: #222;
	z-index: 10010;
	width: calc(100% - 60px);
	height: calc(100% - 80px);
	border-radius: 0.5em;
}
#detail-content{
	height: calc(100% - 60px);
	overflow-y: scroll;
}
#detail-close{
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-weight: bold;
	background-color: #444;
	background: linear-gradient(crimson 5%, #444 5%);
	cursor: pointer;
}
#detail-close:hover{
	background: linear-gradient(crimson 5%, #666 5%);
}
#detail-content-top{
	padding: 0.5em 0;
	background-color: silver;
	background: linear-gradient(165deg, #eee, silver 30%);
}
.detail-content-top-train-info{
	position: relative;
}
.detail-content-top-train-info::before,
.detail-content-top-train-info::after{
	content: "";
	display: block;
	position: absolute;
	top: 10%;
	height: 80%;
	background-color: var(--line-color, royalblue);
}
.detail-content-top-train-info::before{left: 0;width: 0.5em;}
.detail-content-top-train-info::after{right: 0;width: calc(100% - 17.1em);min-width: 0.5em;}
.houkoumaku{
	display: flex;
	font-size: 1.6em;
	max-width: 10em;
	font-weight: bold;
	margin: 0.5em;
	border-radius: 0.25em;
	overflow: hidden;
	font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;/*"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";*/
}
.houkoumaku-left,
.houkoumaku-right{
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}
.houkoumaku-left{
	width: 30%;
	overflow: hidden;
	background-color: var(--type-color, darkblue);
	color: var(--type-text-color, whitesmoke);
	box-shadow: inset 6px 6px 9px -6px black;
}
.houkoumaku-right{
	width: 70%;
	overflow: hidden;
	background-color: whitesmoke;
	color: midnightblue;
	box-shadow: inset -6px 6px 9px -6px black;
}
.houkoumaku-left span,
.houkoumaku-right span{
	width: 10000px;
	display: block;
	text-align: center;
	margin-left: calc(-5000px + 50%);
	height: 1em;
	line-height: 1em;
}
.houkoumaku-left span{transform: scaleX(0.55);}
.houkoumaku-right span{transform: scaleX(0.68);}
.houkoumaku-en{
	font-size: 0.5em;
}
.detail-content-top-cautions{
	margin: 0.5em;
	font-size: 80%;
}
.detail-content-top-cautions>span{
	margin: 0.2em;
	border-radius: 0.5em;
	background-color: lemonchiffon;
	color: saddlebrown;
	padding: 0.2em;
	display: inline-block;
}
.detail-content-top-cautions i{
	color: goldenrod;
}
.detail-content-menu{
	display: flex;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 10;
	padding: 0 10px;
	background: linear-gradient(silver 50%, #333 50%);
	border-top: 0.2em solid silver;
}
.detail-content-menu::before,
.detail-content-menu::after{
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	width: 10px;
	background-color: silver;
	z-index: 100;
}
.detail-content-menu::before{
	left: 0;
	border-bottom-right-radius: 10px;
}
.detail-content-menu::after{
	right: 0;
	border-bottom-left-radius: 10px;
}
.detail-content-menu>label{
	height: 40px;
	line-height: 40px;
	width: 50%;
	flex-shrink: 1;
	text-align: center;
	color: #333;
	font-weight: bold;
	cursor: pointer;
	position: relative;
	background-color: silver;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.detail-content-menu>label:first-child{
	border-bottom-right-radius: 10px;
}
.detail-content-menu>label:last-child{
	border-bottom-left-radius: 10px;
}
.detail-content-menu>label:first-child::before,
.detail-content-menu>label:last-child::before{
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	width: 10px;
	background-color: inherit;
	z-index: 10;
}
.detail-content-menu>label:first-child::before{left: -10px;}
.detail-content-menu>label:last-child::before{right: -10px;}
.detail-content-menu~*{display: none;}
#disp-timetable:checked~div label[for="disp-timetable"],
#disp-train-info:checked~div label[for="disp-train-info"]{
	background-color: #333;
	color: white;
}
#disp-timetable:checked~#detail-content-timetable{display: block;}
#disp-train-info:checked~#detail-content-train-info{display: block;}
#detail-content-timetable{
	overflow-y: scroll;
	height: calc(100% - 40px);
	-webkit-overflow-scrolling: touch;
}
#detail-content-train-info{
	/*overflow-y: scroll;*/
	/*height: calc(100% - 80px);*/
	-webkit-overflow-scrolling: touch;
}
#detail-content-timetable>div{
	position: relative;
	background-color: #555;
	max-width: 500px;
	margin: 10px auto;
}
#detail-content-timetable div table{
	border: none;
	font-size: 100%;
	margin: 0;
}
#detail-content-timetable div table:first-child{
	width: 100%;
	left: 0;
}
#detail-content-timetable div table:last-child{
	top: 0;
	position: absolute;
	right: 0;
}
#detail-content-timetable table tr{
	border: none;
	border-bottom: 1em solid transparent;
}
#detail-content-timetable table:first-child tr{
	/*background: linear-gradient(transparent 95%, #000 95%);*/
	border-bottom: 0.5em solid #222;
	background-color: #444;
}
#detail-content-timetable table:first-child td{
	text-align: left;
	padding-left: 0.5em;
}
#detail-content-timetable td{
	height: 5em;
	max-height: 5em;
	vertical-align: middle;
	padding: 0 0.1em;
	white-space: nowrap;
}
#detail-content-timetable td .station-name{
	font-weight: bold;
}
#detail-content-timetable td[rowspan]{
	vertical-align: top;
	position: relative;
}
#detail-content-timetable td[rowspan]>div:first-child{
	height: 1.8em;
	line-height: 1.8em;
	position: sticky;
	top: 10px;
	left: 0;
	z-index: 2;
}
#detail-content-timetable td[rowspan]>div:first-child span{
	display: inline-block;
	line-height: 1.8em;
	font-weight: bold;
	margin: 0.23em auto;
	padding: 0 0.1em;
	border-radius: 0.3em;
	background-color: var(--type-color, var(--line-color, royalblue));
	color: var(--type-text-color, var(--line-text-color, white));
}
#detail-content-timetable td[rowspan]>div.allow{
	width: 5px;
	height: calc(100% - 0.8em);
	margin: auto;
	position: absolute;
	top: 0.5em;
	left: calc(50% - 2.5px);
	z-index: 1;
	background-color: var(--type-color, var(--line-color, royalblue));
	opacity: 0.5;
}
#detail-content-timetable td[rowspan]>div.allow::after{
	content: "";
	position: absolute;
	bottom: -1.3em;
	left: calc(49% - 0.5em);
	display: block;
	width: 1em;
	height: 2em;
	box-sizing: border-box;
	border-top: 1em solid var(--type-color, var(--line-color, royalblue));
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-bottom: 1em solid transparent;
}
#detail-content-train-info table{
	border: none;
}
#detail-content-train-info tr{
	border: none;
}
#detail-content-train-info td{
	border: none;
}
#detail-content-train-info th{
	border: none;
}
#detail-content-train-info tr:nth-child(odd){
	background-color: #444;
}
#help-wrap{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 10000;
}
#help{
	position: fixed;
	top: 40px;
	left: 30px;
	background-color: #333;
	z-index: 10010;
	width: calc(100% - 60px);
	height: calc(100% - 80px);
	border-radius: 0.5em;
}
.help-content{
	height: calc(100% - 80px);
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.help-close{
	height: 80px;
	line-height: 80px;
	text-align: center;
	font-weight: bold;
	background-color: #444;
	background: linear-gradient(crimson 5%, #444 5%);
	cursor: pointer;
}
.help-close:hover{
	background: linear-gradient(crimson 5%, #666 5%);
}
.help-content>div{
	margin: 0 0 2em;
}
.help-content h3{
	margin: 0;
	padding: 0.5em;
	background: linear-gradient(135deg, midnightblue 3%, #333 3%, #666);
	position: sticky;
	top: 0;
	left: 0;
}
.help-content h4{
	padding: 0.2em;
}

#massage-area>div {
	padding: 0.5em 1em;
	border-radius: 1em;
	background-color: crimson;
	color: white;
	margin: 2em 3%;
	outline: 5px solid white;
}