@charset "utf-8";

/* -----------------------------------------
	時刻表（停車駅一覧）
----------------------------------------- */
.bgGray_02 {
	background: #eee;
	padding: 40px 0;
}

.line_nameBox {
	max-width: 970px;
	width: 100%;
	margin: 0 auto;
	padding: 0 10px;
}

.line_nameBox .line_name {
	font-weight: bold;
	font-size: 2.0rem;
	text-align: center;
}

.serviceDay {
	background: #fff;
	padding: 30px;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}

.serviceDay .cautionbox {
	background: #fef2f2;
	padding: 10px;
	font-size: 1.3rem;
	color: #eb0000;
	margin-bottom: 25px;
}

.serviceDay .calecaption_01,
.serviceDay .calecaption_02 {
	display: flex;
	align-items: center;
}
.serviceDay .calecaption_01 {
	margin-bottom: 10px;
}
.serviceDay .calecaption_01:before,
.serviceDay .calecaption_02:before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin-right: 15px;
}

.serviceDay .calecaption_01:before {background: #c1f5f7;}
.serviceDay .calecaption_02:before {background: #fee3a8;}

.serviceDay .calecaption_02 {
	margin-bottom: 20px;
}


.serviceDay .serviceDayCalendar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.serviceDay .serviceDayCalendar .calendar-month {
	width: 200px;
	border-collapse: separate;
	border-spacing: 6px 3px;
}

.serviceDay .serviceDayCalendar .calendar-month caption {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 10px 0;
	margin-bottom: 15px;
}

.serviceDay .serviceDayCalendar .calendar-month tr td {
	text-align: center;
	font-size: 1.2rem;
	width: 1em;
}
.serviceDay .serviceDayCalendar .calendar-month tr span.weekday {color: #333;}
.serviceDay .serviceDayCalendar .calendar-month tr td.none span.weekday {color: #999;}
.serviceDay .serviceDayCalendar .calendar-month tr span.dayoff {color: #ec2424;}
.serviceDay .serviceDayCalendar .calendar-month tr td.none span.dayoff {color: #ff8d8d;}

.serviceDay .serviceDayCalendar .calendar-month tr td.ok {
	background-color: #c1f5f7;
	font-weight: bold;
}

.serviceDay .serviceDayCalendar .calendar-month tr td.other {
	background-color: #fee3a8;
}

.serviceDay .serviceDayCalendar .calendar-month tr td span.weekday a {
	color: #333;
	text-decoration: underline;
}

.serviceDay .serviceDayCalendar .calendar-month tr td span.dayoff a {
	color: #eb0000;
	text-decoration: underline;
}

.trainlist {
	background: #fff;
	width: 100%;
	padding: 10px;
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
}

.trainlist .scroll_train {
	overflow-x:auto;
/*
	overflow-scrolling:touch;
	-webkit-overflow-scrolling:touch;
*/
}

.trainlist .scroll_train::-webkit-scrollbar {
	height: 14px;
}
.trainlist .scroll_train::-webkit-scrollbar-track {
	border-radius: 7px;
	background: #f0f0f0;
}
.trainlist .scroll_train::-webkit-scrollbar-thumb {
	border-radius: 7px;
	background: #008803;
}


.trainlist tr th,
.trainlist tr td {
	padding: 10px 20px;
	vertical-align: middle;
}

.trainlist #tbl_train.num_train_1 { width: 330px; }
.trainlist #tbl_train.num_train_2 { width: 530px; }
.trainlist #tbl_train.num_train_3 { width: 730px; }
.trainlist #tbl_train.num_train_4 { width: 930px; }
.trainlist #tbl_train.num_train_5 { width: 1130px; }
.trainlist #tbl_train.num_train_6 { width: 1330px; }
.trainlist #tbl_train.num_train_7 { width: 1530px; }


.trainlist tr.train,
.trainlist tr.label {
	border-bottom: 1px solid #ddd;
}

.trainlist tr.train th,
.trainlist tr.label th {
	background: #f1f9f1;
}

.trainlist tr.train th,
.trainlist tr.time th.time {
	width: 130px;
}

.trainlist tr.train td {
	width: 200px;
}

.trainlist tr.label th.jikoku,
.trainlist tr.time td.time {
	width: 120px;
}

.trainlist tr.label th.bansen,
.trainlist tr.time td.platform {
	width: 80px;
}

.trainlist tr.last td {
	width: 200px;
	vertical-align: top;
}

.trainlist tr.time:nth-child(odd) {
	background: #f8f8f8;
}
.trainlist tr.time:nth-child(even) {
	background: #ffffff;
}

.trainlist tr.last {
	background: #eeeeee !important;
}

.trainlist tr th:nth-child(1){
	border-right: 1px solid #ddd;
}

.trainlist tr.time th {
	text-align: left;
	font-weight: normal;
}
.trainlist tr.train td + td,
.trainlist tr.label th.bansen + th.jikoku,
.trainlist tr.time td.platform + td.time,
.trainlist tr.last td.note + td.note {
	border-left: 1px dashed #ddd;
}

.trainlist tr.time td {
	text-align: center;
}


.trainlist + .cautionBox02 {
	padding: 10px;
	margin-top: 20px;
}





@media screen and (max-width: 750px){

/* -----------------------------------------
		時刻表（停車駅一覧）
	----------------------------------------- */
	.bgGray_02 {
		background: #eee;
		padding: 8% 0;
	}

	.line_nameBox {
		max-width: 100%;
		width: 100%;
		padding: 0 2%;
	}

	.line_nameBox .line_name {
		font-weight: bold;
		font-size: 1.8rem;
		text-align: center;
	}

	.serviceDay_h {
		background: #444;
		color: #fff;
		padding: 2%;
		position: relative;
		margin-bottom: 0;
	}
	
	.cText {
		text-align: center;
		font-weight: bold;
		color: #eb0000;
		background: #fef2f2;
		padding: 3%;
	}

	.serviceDay_h:before {
		content: "";
		display: block;
		width: 3px;
		height: 17px;
		background: #fff;
		position: absolute;
		right: 17px;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	.serviceDay_h:after {
		content: "";
		display: block;
		width: 17px;
		height: 3px;
		background: #fff;
		position: absolute;
		right: 10px;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	
	.serviceDay_h.open:before {
		content: none;
	}

	.serviceDay {
		padding: 3%;
		display: none;
	}

	.serviceDay .cautionbox {
		background: #fef2f2;
		padding: 3%;
		margin-bottom: 10%;
	}

	.serviceDay .calecaption_01,
	.serviceDay .calecaption_02 {
		display: flex;
		align-items: flex-start;
	}
	.serviceDay .calecaption_01 {
		margin-bottom: 3%
	}
	.serviceDay .calecaption_01:before,
	.serviceDay .calecaption_02:before {
		margin-right: 3%;
	}

	.serviceDay .calecaption_02 {
		margin-bottom: 10%;
	}


	.serviceDay .serviceDayCalendar {
		display: block;
	}

	.serviceDay .serviceDayCalendar .calendar-month {
		width: 100%;
		border-collapse: separate;
		border-spacing: 3px 6px;
		margin-bottom: 15%;
	}

	.serviceDay .serviceDayCalendar .calendar-month caption {
		padding: 10px 0;
		margin-bottom: 3%;
	}

	.serviceDay .serviceDayCalendar .calendar-month tr td {
		text-align: center;
		font-size: 1.2rem;
		width: 1em;
	}

	.trainlist {
		background: #fff;
		width: 100%;
		/*padding: 3%;*/
		padding: 3vw;
	}

	.trainlist .scroll_train {
		transform: scaleY(-1);
		overflow-x:auto;
	}
	.trainlist .scroll_train::-webkit-scrollbar {
		height: 8px;
	}
	.trainlist .scroll_train::-webkit-scrollbar-track {
		border-radius: 5px;
		background: #eee;
	}
	.trainlist .scroll_train::-webkit-scrollbar-thumb {
		border-radius: 5px;
		background: #008803;
	}

	.trainlist #tbl_train {
		transform: scaleY(-1);
	}

	.trainlist tr th,
	.trainlist tr td {
		padding: 3vw;
		font-size: 3.3vw;
	}

	.trainlist #tbl_train.num_train_1 { width: 53vw; }
	.trainlist #tbl_train.num_train_2 { width: 86vw; }
	.trainlist #tbl_train.num_train_3 { width: 119vw; }
	.trainlist #tbl_train.num_train_4 { width: 152vw; }
	.trainlist #tbl_train.num_train_5 { width: 185vw; }
	.trainlist #tbl_train.num_train_6 { width: 218vw; }
	.trainlist #tbl_train.num_train_7 { width: 251vw; }

	.trainlist tr.train th,
	.trainlist tr.time th.time {
		width: 20vw;
	}

	.trainlist tr.train td {
		width: 33vw;
	}

	.trainlist tr.label th.jikoku,
	.trainlist tr.time td.time {
		width: 23vw;
	}

	.trainlist tr.label th.bansen,
	.trainlist tr.time td.platform {
		width: 10vw;
	}

	.trainlist tr.last td {
		width: 33vw;
	}

	.trainlist tr.time th {
		text-align: left;
		font-weight: normal;
		border-right: 1px solid #ddd;
		font-size: 3.3vw;
	}

	.trainlist tr.time td {
		text-align: center;
		padding: 1.5vw;
	}

	.trainlist tr.time td img {
		width: 7vw;
	}

	.trainlist + .cautionBox02 {
		padding: 3%;
		margin-top: 15px;
	}

}