body {
width: 96%;
max-width: 600px;
margin: auto;
}

p {
font-size: 120%;
}

p.signal-cycle:after {
content: "数字は次の信号表示になるまでの秒数です。「青 30」の場合はあと30秒で青信号が終わることを示しています。二段階右折をする原付や自転車等は、信号交差点で右折する場合直進する車両とみなされます。";
white-space: normal;
}

.breadcrumb {
list-style: none;
}

.breadcrumb li {
display: inline;
list-style: none;
font-weight: bold;
}

.breadcrumb li:after {
content: '>';
padding: 0 0.1em;
}

.breadcrumb li:last-child:after {
  content: '';
}

table {
font-size: 100%;
margin: auto;
}

table.scrollable {
  font-weight: normal;
  display: block;
  overflow-x: scroll;
  overflow-y: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.fixed-x{
  position: sticky;
  left: 0;
  background: #ffffff;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }
}

.fixed-x2{
  position: sticky;
  left: 54px;
  background: #ffffff;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }
}

.fixed-y{
  position: sticky;
  top: 0;
  background: #ffffff;
  vertical-align: top;
  &:before{
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }
}

.green {
background: linear-gradient(45deg, #ada,#ada,#ada);
text-align: center;
&:before {
content: "青 ";
}}
.green-blink {
background: linear-gradient(45deg, #fff,#ada,#fff);
text-align: center;
&:before {
content: "青点滅 ";
}}
.green-arrow {
background: linear-gradient(45deg, #a9a,#ada,#a9a);
text-align: center;
&:before {
content: "青＋";
}}
.yellow {
background: linear-gradient(45deg, #ff9,#ff9,#ff9);
text-align: center;
&:before {
content: "黄 ";
}}
.yellow-blink {
background: linear-gradient(45deg, #fff,#ff9,#fff);
text-align: center;
&:before {
content: "黄点滅 ";
}}
.yellow-arrow {
background: linear-gradient(45deg, #ff9,#ada,#ff9);
text-align: center;
&:before {
content: "黄＋";
}}
.red {
background: linear-gradient(45deg, #faa,#faa,#faa);
text-align: center;
&:before {
content: "赤 ";
}}
.red-blink {
background: linear-gradient(45deg, #fff,#faa,#fff);
text-align: center;
&:before {
content: "赤点滅 ";
}}
.red-arrow {
background: linear-gradient(45deg, #faa,#ada,#faa);
text-align: center;
&:before {
content: "赤＋";
}}
.black {
background: linear-gradient(45deg, #333,#333,#333);
color: white;
text-align: center;
&:before {
content: "消灯 ";
}}

.yellow-marker {
font-size: 110%;
background: linear-gradient(90deg, #ff3 0%, #ffd 30%);
}

.left-black {
font-size: 110%;
color: #333;
background: linear-gradient(90deg, #111 0%, #eee 10%, #eee 100%);
}

.right-black {
font-size: 110%;
color: #333;
background: linear-gradient(90deg, #eee 0%, #eee 90%, #111 100%);
}

.black-bg {
color: #fff;
text-align: center;
font-weight: bold;
background: linear-gradient(180deg, #000 0%, #555 100%);
}

.blink{
    animation:blinking 1.0s ease-in-out infinite alternate;
}
@keyframes blinking{
    0% {opacity:0;}
    100% {opacity:1;}
}

.intersection {
 background:#000055;
 color:#fff;
}