@charset "utf-8";
/* CSS Document */

/* ===========================================================
 * 路線一覧トップ（/railway/）専用
 * railway.css の後に読み込む。基本はスマホ、980px以上をPC
 * =========================================================== */
 
/* -------------------------
 枠・基本の文字色
--------------------------*/
.rtBlock{
	margin: 0 0 4vw;
	padding: 0 0 20px;
	background: #fff;
	color: #1e3a56;
	font-size: 14px;
	line-height: 1.5;
}
 
.rtBlock .rpHead h1{
	margin-bottom: 0;
}
 
/* -------------------------
 説明文・凡例
--------------------------*/
.rtIntro{
	padding: 16px 12px 0;
}
 
.rtIntro p{
	margin: 0 0 12px;
	line-height: 1.7;
}
 
.rtLegend{
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	background: #f4f5f6;
	border-radius: 4px;
	font-size: 12px;
}
 
.rtLegend li{
	display: flex;
	align-items: center;
	gap: 8px;
}
 
.rtSw{
	display: inline-block;
	width: 22px;
	height: 8px;
	border-radius: 4px;
}
 
.rtSwMachi{ background: #2aa9ca; }
.rtSwPost { background: #4ac9b4; }
 
/* -------------------------
 全国の記録
--------------------------*/
.rtSum{
	margin: 14px 12px 0;
	padding: 14px 12px;
	background: #f4f5f6;
	border-radius: 4px;
}
 
.rtSum h2{
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: bold;
	color: #1e3a56;
}
 
.rtSumRow{
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas:
		"label track num"
		".     note  note";
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	margin: 0 0 10px;
}
 
.rtSumRow:last-child{
	margin-bottom: 0;
}
 
.rtSumLabel{ grid-area: label; font-size: 13px; font-weight: bold; }
.rtSumRow .rtTrack{ grid-area: track; height: 10px; border-radius: 5px; background: #e0e4e8; }
.rtSumNum{ grid-area: num; font-size: 13px; white-space: nowrap; }
.rtSumNum strong{ font-size: 17px; }
.rtSumNote{ grid-area: note; font-size: 11px; color: #5a6b7b; }
 
/* -------------------------
 地方ボタン
--------------------------*/
.rtNav{
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
	margin: 16px 12px 0;
}
 
.rtNav a{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 2px;
	background: #dfe6ec;
	border-radius: 2px;
	color: #1e3a56;
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}
 
.rtNav a:hover{
	background: #cbd6e0;
	color: #1e3a56;
	text-decoration: none;
}
 
/* -------------------------
 地方・事業者の見出し
--------------------------*/
.rtRegion{
	padding: 0 12px;
	scroll-margin-top: 80px;   /* 地方ボタンで移動したとき、見出しがヘッダーに隠れないように */
}
 
.rtRegion h2{
	margin: 28px 0 4px;
	padding: 0 0 8px;
	border-bottom: 2px solid #1e3a56;
	font-size: 19px;
	font-weight: bold;
	color: #1e3a56;
}
 
.rtGroup{
	margin: 16px 0 0;
	padding: 5px 10px;
	background: #eef1f3;
}
 
.rtGroup h3{
	font-size: 13px;
	font-weight: bold;
	color: #4a5a6a;
}
 
.rtCap{
	display: none;
}
 
/* -------------------------
 路線の行
--------------------------*/
.rtLine{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"name  total"
		"machi machi"
		"post  post";
	column-gap: 8px;
	row-gap: 6px;
	padding: 12px 2px;
	border-bottom: 1px solid #e8eaec;
}
 
.rtName{
	grid-area: name;
	font-size: 15px;
	font-weight: bold;
}
 
.rtTotal{
	grid-area: total;
	align-self: baseline;
	font-size: 12px;
	color: #5a6b7b;
}
 
.rtBar{
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 44px;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}
 
.rtMachi{ grid-area: machi; }
.rtPost { grid-area: post; }
 
.rtTrack{
	display: block;
	height: 8px;
	background: #e8eaec;
	border-radius: 4px;
	overflow: hidden;
}
 
.rtTrack span{
	display: block;
	height: 100%;
}
 
.rtMachi .rtTrack span{ background: #2aa9ca; }
.rtPost  .rtTrack span{ background: #4ac9b4; }
 
.rtNum{
	text-align: right;
	white-space: nowrap;
}
 
.rtOf{
	display: none;
}
 
 
/* -------------------------
 以下PC
--------------------------*/

@media
screen and (min-width: 980px){
 
.rtBlock{
	margin: 0 0 24px;
	padding: 0 0 28px;
}
 
.rtIntro{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 20px 24px 0;
}
 
.rtIntro p{
	margin: 0;
}
 
.rtLegend{
	flex-shrink: 0;
}
 
.rtSum{
	margin: 16px 24px 0;
	padding: 16px 20px;
}
 
.rtSumRow{
	grid-template-columns: 80px minmax(0, 1fr) 150px 190px;
	grid-template-areas: "label track num note";
	column-gap: 16px;
}
 
.rtSumLabel{ font-size: 14px; }
.rtSumNote{ font-size: 12px; }
 
.rtNav{
	grid-template-columns: repeat(10, minmax(0, 1fr));
	margin: 18px 24px 0;
}
 
.rtRegion{
	padding: 0 24px;
}
 
.rtRegion h2{
	margin-top: 32px;
	font-size: 20px;
}
 
/* 見出し行に、表の列の説明を出す */
.rtGroup{
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding: 6px 12px;
}
 
.rtCap{
	display: block;
	font-size: 12px;
	color: #4a5a6a;
}
 
/* 路線の行を表の形に */
.rtLine{
	grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas: "name machi post";
	column-gap: 20px;
	align-items: center;
	padding: 11px 12px;
}
 
.rtTotal,
.rtLabel{
	display: none;
}
 
.rtBar{
	grid-template-columns: minmax(0, 1fr) 72px;
	font-size: 13px;
}
 
.rtOf{
	display: inline;
}
 
}