@charset "UTF-8";

.topdelayinfo, .topdelayinfo * { box-sizing: border-box; }
.topdelayinfo { border: 1px solid #e1e1e1; }

.topdelayinfo h2 { width: 88px; height: 96px; }
.topdelayinfo h2 a { width: 88px; background-position: center; display: block; }

.topdelayinfo .wrap { width: calc(858px - 88px); padding: 22px 16px; min-height: 64px; border: none; border-left: 1px solid #e1e1e1; float: right; }
.topdelayinfo .message { padding-right: 0; }
.topdelayinfo .message span { display: block; }
.topdelayinfo .message span:nth-child(n+2){ padding-top: 16px; }
.topdelayinfo .buttons { vertical-align: top; padding: 5px 0 0 0; position: relative; left: 10px; }

.topdelayinfo .timestamp { position: absolute; bottom: 20px; right: 16px; font-size: 12px; }

.topdelayinfo-description {
	padding: 20px;
	margin: 20px 0;
	background-color: #ffeded;
	border: 2px solid #ffabab;
}

.topdelayinfo-guideline * { box-sizing: border-box; }
.topdelayinfo-guideline {
	margin: 20px 0;
	border: 1px solid #CCCCCC;
}
.topdelayinfo-guideline .tdi-wrapper::after { content: ""; display: block; clear: both; height: 0; }


.topdelayinfo-guideline .tdi-left { float: left; padding: 10px; }
.topdelayinfo-guideline .tdi-left figure { padding: 0; margin: 0; }
.topdelayinfo-guideline .tdi-left ol { list-style: none; padding: 8px 0; }
.topdelayinfo-guideline .tdi-left ol::after { content: ""; display: block; clear: both; height: 0; }
.topdelayinfo-guideline .tdi-left ol.saito-line { padding-left: 270px; padding-top: 2px; }
.topdelayinfo-guideline .tdi-left ol.main-line { padding-left: 18px; padding-bottom: 2px; }
.topdelayinfo-guideline .tdi-left ol li { position: relative; float: left; padding: 0 6px; }
.topdelayinfo-guideline .tdi-left ol li span { display: block; height: 30px; width: 30px; background-color: #FFFFFF; border: 2px solid #CCCCCC; border-radius: 30px; position: relative; z-index: 2; }
.topdelayinfo-guideline .tdi-left ol li:nth-child(n+2)::before { content: ""; height: 20px; width: 30px; background-color: #384D98; position: absolute; top: 5px; left: -15px; }
.topdelayinfo-guideline .tdi-left ol.saito-line li:nth-child(1) span { opacity: 0; }
.topdelayinfo-guideline .tdi-left ol.saito-line li:nth-child(1)::before { content: ""; height: 60px; width: 20px; background-color: #384D98; position: absolute; top: 5px; left: 10px; border-top-left-radius: 10px; }

.topdelayinfo-guideline .tdi-left ol li.stopped::before { background-color: #FF0000!important; }
.topdelayinfo-guideline .tdi-left ol li.delayed::before { background-color: #FFDD00!important; }



.topdelayinfo-guideline .tdi-right { float: left; border-left: 1px solid #CCCCCC; width: 218px; height: 320px; background-color: #F5F5F5; }

.topdelayinfo-guideline .tdi-right ul { padding: 12px 14px 0; min-height: 135px; }
.topdelayinfo-guideline .tdi-right ul li { margin: 5px 0; }
.topdelayinfo-guideline .tdi-right a { display: block; position: relative; border: 1px solid #E1E1E1; color: #333333; background-color: #FFFFFF; padding-left: 38px; line-height: 30px; width: 190px; text-decoration: none; }
.topdelayinfo-guideline .tdi-right a::before {
	content: "";
	background: url(../img/caption_arrow.png) left top no-repeat;
	position: absolute; top: 10px; bottom: 0; left: 10px; width: 28px;
}