@font-face { 
  font-family: "Hiragino Maru Gothic ProN W4"; 
  src: url("type/HiraginoMaruGothicProNW4.otf") format("opentype");
}
.main {
  position: absolute;
  left: 0;
  top: 0;
  width: 1048px;
  height: 588px;
  background-color: #1E1E1E;
}
.delaydetail {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 1032px;
  height: 462px;
  background-color: #EFEFEF;
}
.delaygraph {
  position: absolute;
  left: 308px;
  top: 2px;
  width: 722px;
  height: 458px;
  background-color: #0D1431;
}
.delayinfo {
  position: absolute;
  left: 8px;
  top: 488px;
  width: 1032px;
  height: 92px;
  background-color: #C1C1C1;
}
.delayinfotext {
  position: absolute;
  left: 8px;
  top: 34px;
  width: 1016px;
  height: 50px;
  background-color: #15162F;
  overflow: hidden;
  white-space: nowrap;
}
.infotext {
  font-size: 38px;
  font-family: "Hiragino Maru Gothic ProN W4"; 
  color: #EFEFEF;
  position: absolute;
  top: -3px;
  transform: translateX(1020px);
  white-space: nowrap;
}
.blink {
  animation: blink 1s linear infinite;
  color: red;
}
.red {
  color: red;
}
.unkojoho {
  font-size: 20px;
  font-family: "Hiragino Maru Gothic ProN W4"; 
  font-weight: bold;
  color: #2F2F4C;
  position: absolute;
  top: 1px;
  left: 8px;
}
.text{
  font-family: "Hiragino Maru Gothic ProN W4"; 
  font-weight: bold;
}
.tabletext{
  font-family: "Hiragino Maru Gothic ProN W4"; 
}
@keyframes marquee {
  0% {
    transform: translateX(1020px);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes blink {
  0% {opacity: 1;}
  39% {opacity: 1;}
  40% {opacity: 0;}
  90% {opacity: 0;}
  100% {opacity: 1;}
}
.fade-in {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}