.page-realtime-child .menutop,
.page-realtime-child .nav-side,
.page-realtime-child .p-header__spMenu {
  display: none !important;
}
.page-realtime-child .p-header__ttl__main a {
  pointer-events: none;
}

.hline01:not(:first-child) {
  margin-top: 4.8rem;
}
@media (min-width: 768px) {
  .hline01:not(:first-child) {
    margin-top: 6.4rem;
  }
}

.time-section {
  position: relative;
  width: 6.4rem;
  display: flex;
}
@media (min-width: 768px) {
  .time-section {
    width: 8.4rem;
  }
}
.time-section.left .time_wrap {
  padding-left: 1rem;
}
.time-section.left .time_wrap::before, .time-section.left .time_wrap::after {
  transform: scaleX(-1);
}
.time-section.left .time_wrap.stop {
  background-position: center left 60%;
}
.time-section.right {
  justify-content: flex-end;
}
.time-section.right .time_wrap {
  padding-right: 1rem;
}
.time-section.right .time_wrap.stop {
  background-position: center left 40%;
}
.time-section .time_wrap {
  width: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  aspect-ratio: 84/36;
}
.time-section .time_wrap::before, .time-section .time_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(calc(100% - 1.2rem) 0, 100% 50%, calc(100% - 1.2rem) 100%, 0 100%, 0 0);
}
@media (min-width: 768px) {
  .time-section .time_wrap::before, .time-section .time_wrap::after {
    clip-path: polygon(calc(100% - 1.7rem) 0, 100% 50%, calc(100% - 1.7rem) 100%, 0 100%, 0 0);
  }
}
.time-section .time_wrap::before {
  z-index: -1;
}
.time-section .time_wrap::after {
  z-index: -2;
}
.time-section .time_wrap.over1::before {
  background-color: #FFDF76;
}
.time-section .time_wrap.over2::before {
  background-color: #FF9155;
}
.time-section .time_wrap.over3 {
  color: #fff;
}
.time-section .time_wrap.over3::before {
  background-color: #5C2B82;
}
.time-section .time_wrap.stop {
  color: transparent;
  background-image: url(../images/common/icon_caution.svg);
  background-repeat: no-repeat;
  background-size: 35%;
}
.time-section .time_wrap.stop small {
  display: none;
}
.time-section .control_time,
.time-section .control_time2 {
  font-family: var(--font-en);
  font-weight: 500;
}

.realtime-box {
  border-width: 0.4rem;
  border-style: solid;
  padding: 1.6rem 0rem;
  margin-bottom: 3.2rem;
}
@media (min-width: 768px) {
  .realtime-box {
    margin-bottom: 6.4rem;
    border-width: 0.6rem;
    padding: 2.6rem 1rem;
  }
}
@media (min-width: 1000px) {
  .realtime-box {
    padding-inline: 6.4rem;
  }
}
.realtime-box.box01 {
  border-color: #9a308d;
}
.realtime-box.box02 {
  border-color: #e9528e;
}
.realtime-box.box03 {
  border-color: #2d608f;
}
.realtime-box.box04 {
  border-color: #00a0e9;
}
.realtime-box.box05 {
  border-color: #45b035;
}
.realtime-box.box06 {
  border-color: #d70051;
}
.realtime-box.box07 {
  border-color: #f08300;
}
.realtime-box.box08 {
  border-color: #009886;
}
.realtime-box:not(:last-child) {
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .realtime-box:not(:last-child) {
    margin-bottom: 4rem;
  }
}
@media (min-width: 768px) {
  .realtime-box.--child {
    padding-block: 3.5rem;
  }
}
@media (max-width: 767px) {
  .realtime-box.--child {
    padding-inline: 0.2rem;
  }
}
.realtime-box.--child .realtime-box__ttl {
  flex: 1 1;
}
.realtime-box__top {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
@media (min-width: 768px) {
  .realtime-box__top {
    margin-bottom: 2rem;
    gap: 17rem;
  }
}
.realtime-box__top-item {
  background: var(--color-area);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1rem;
  border-radius: 3.2rem;
  min-width: 8.8rem;
}
@media (min-width: 768px) {
  .realtime-box__top-item {
    min-width: 15.2rem;
  }
}
.realtime-box__meta {
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .realtime-box__meta {
    gap: 0.8rem;
  }
}
.realtime-box__ttl {
  font-weight: 700;
  text-align: center;
  flex: 1 1;
  font-size: 2rem;
  min-width: 6.4rem;
}
@media (min-width: 768px) {
  .realtime-box__ttl {
    font-size: 3.2rem;
  }
}
@media (max-width: 767px) {
  .realtime-box__ttl {
    padding-top: 3rem;
  }
}
.realtime-box__sub {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) {
  .realtime-box__sub {
    min-width: 20rem;
    font-size: 2.4rem;
  }
}
@media (max-width: 767px) {
  .realtime-box__sub {
    order: 1;
    flex-basis: 100%;
  }
}
.realtime-box__sub.--color01 {
  color: #9a308d;
}
.realtime-box__sub.--color01 .realtime-box__sub-box {
  border-color: #9a308d;
}
.realtime-box__sub.--color02 {
  color: #e9528e;
}
.realtime-box__sub.--color02 .realtime-box__sub-box {
  border-color: #e9528e;
}
.realtime-box__sub.--color03 {
  color: #2d608f;
}
.realtime-box__sub.--color03 .realtime-box__sub-box {
  border-color: #2d608f;
}
.realtime-box__sub.--color04 {
  color: #00a0e9;
}
.realtime-box__sub.--color04 .realtime-box__sub-box {
  border-color: #00a0e9;
}
.realtime-box__sub.--color05 {
  color: #45b035;
}
.realtime-box__sub.--color05 .realtime-box__sub-box {
  border-color: #45b035;
}
.realtime-box__sub.--color06 {
  color: #d70051;
}
.realtime-box__sub.--color06 .realtime-box__sub-box {
  border-color: #d70051;
}
.realtime-box__sub.--color07 {
  color: #f08300;
}
.realtime-box__sub.--color07 .realtime-box__sub-box {
  border-color: #f08300;
}
.realtime-box__sub.--color08 {
  color: #009886;
}
.realtime-box__sub.--color08 .realtime-box__sub-box {
  border-color: #009886;
}
.realtime-box__sub-note {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .realtime-box__sub-note {
    font-size: 1.6rem;
  }
}
.realtime-box__sub-box {
  text-align: center;
  border: 2px solid transparent;
  font-weight: 700;
  border-radius: 0.2rem;
  padding: 0.1rem 0.5rem;
  font-size: 1.4rem;
  min-width: 10rem;
  margin-top: 0.2rem;
  color: var(--color-base-black);
}
@media (min-width: 768px) {
  .realtime-box__sub-box {
    margin-top: 0.5rem;
    border-radius: 0.4rem;
    font-size: 1.6rem;
    padding: 0.3rem;
    min-width: 12.3rem;
  }
}
.realtime-box__info {
  display: flex;
  align-items: center;
  position: relative;
}
@media (max-width: 767px) {
  .realtime-box__info {
    gap: 0.7rem 0.7rem;
    flex-flow: wrap;
    justify-content: center;
  }
}
.realtime-box__info .time-section {
  width: 7.5rem;
  height: 3.6rem;
}
@media (min-width: 768px) {
  .realtime-box__info .time-section {
    width: 12.8rem;
    height: 7.5rem;
  }
}
@media (max-width: 767px) {
  .realtime-box__info .time-section {
    order: 2;
  }
}
@media (min-width: 768px) {
  .realtime-box__info .time-section.left .time_wrap {
    padding-left: 2rem;
  }
}
@media (min-width: 768px) {
  .realtime-box__info .time-section.right .time_wrap {
    padding-right: 2rem;
  }
}
.realtime-box__info .time-section .time_wrap {
  font-size: 2.4rem;
}
@media (min-width: 768px) {
  .realtime-box__info .time-section .time_wrap {
    font-size: 3.2rem;
  }
}
.realtime-box__info .time-section .time_wrap::before, .realtime-box__info .time-section .time_wrap::after {
  clip-path: polygon(calc(100% - 1.2rem) 0, 100% 50%, calc(100% - 1.2rem) 100%, 0 100%, 0 0);
}
@media (min-width: 768px) {
  .realtime-box__info .time-section .time_wrap::before, .realtime-box__info .time-section .time_wrap::after {
    clip-path: polygon(calc(100% - 2.5rem) 0, 100% 50%, calc(100% - 2.5rem) 100%, 0 100%, 0 0);
  }
}
.realtime-box__info .time-section .time_wrap small {
  font-size: 1.4rem;
  margin-top: 0.2rem;
  font-weight: 500;
}
@media (min-width: 768px) {
  .realtime-box__info .time-section .time_wrap small {
    font-size: 1.6rem;
    margin-top: 1rem;
  }
}
.realtime-box__info .time-section .time_wrap[class=time_wrap]::before, .realtime-box__info .time-section .time_wrap.stop::before {
  background-color: #000;
  mask: url(../images/common/arrow_box_03.svg) no-repeat center/100%;
}
@media (min-width: 768px) {
  .realtime-box__info .time-section .time_wrap[class=time_wrap]::before, .realtime-box__info .time-section .time_wrap.stop::before {
    mask-image: url(../images/common/arrow_box_01.svg);
  }
}
.realtime-box__info .time-section .control_time,
.realtime-box__info .time-section .control_time2 {
  font-weight: 600;
}
.realtime-box__center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 0.7rem;
}
@media (min-width: 768px) {
  .realtime-box__center {
    row-gap: 3rem;
  }
}
@media (max-width: 767px) {
  .realtime-box__center {
    max-width: 16.5rem;
  }
}
.realtime-box__center.--reverse {
  flex-direction: column-reverse;
}
.realtime-box__row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .realtime-box__row {
    margin: 0 auto 2rem;
    max-width: 70rem;
  }
}
.realtime-box__lead {
  text-align: center;
  font-weight: 500;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .realtime-box__lead {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 767px) {
  .realtime-box__lead {
    padding-right: 1rem;
  }
}
.realtime-box__lead .large {
  font-size: 1.6rem;
}
@media (min-width: 768px) {
  .realtime-box__lead .large {
    font-size: 2.4rem;
  }
}

.p-realtime {
  padding-block: 4rem;
}
@media (min-width: 768px) {
  .p-realtime {
    padding-block: 8rem;
  }
}
.p-realtime .inactive {
  position: relative;
  pointer-events: none;
}
.p-realtime .inactive:before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  z-index: 4;
  inset: 0;
}
.p-realtime .inactive-ttl {
  position: absolute;
  color: #fff;
  z-index: 6;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1.6;
  width: 100%;
  padding-inline: 1rem;
}
.p-realtime .inactive .btn-zoom.realtime:after {
  bottom: 0;
}
.p-realtime__note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.7;
  font-size: 1.2rem;
  margin-top: 1.6rem;
}
@media (min-width: 768px) {
  .p-realtime__note {
    font-size: 1.4rem;
  }
}
.p-realtime__note img {
  width: 85px;
  margin: 1rem 1rem 1rem 0;
}
@media (min-width: 768px) {
  .p-realtime__note img {
    width: auto;
    margin: 0.5rem 1rem 0.5rem 0;
  }
}
.p-realtime__tab .tab-head {
  position: relative;
  gap: 0.9rem;
}
@media (min-width: 768px) {
  .p-realtime__tab .tab-head {
    display: flex;
    gap: 2rem;
  }
}
@media (max-width: 767px) {
  .p-realtime__tab .tab-head {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .p-realtime__tab .tab-head:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background: var(--color-base-black);
    z-index: -1;
  }
}
.p-realtime__tab .tab-head li {
  background-color: var(--color-area);
  transition: var(--transition);
}
@media (min-width: 768px) {
  .p-realtime__tab .tab-head li {
    flex: 1 1;
  }
}
.p-realtime__tab .tab-head li:hover {
  background: #ddd;
}
.p-realtime__tab .tab-head li.active {
  background: #fff;
}
.p-realtime__tab .tab-head li.active:hover {
  background: #fff;
}
@media (min-width: 768px) {
  .p-realtime__tab .tab-head li.active a {
    border-bottom-color: #fff;
  }
  .p-realtime__tab .tab-head li.active a::before {
    opacity: 1;
  }
}
.p-realtime__tab .tab-head li a {
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-base-black);
  min-height: 4.4rem;
  border-radius: 0.5rem;
  position: relative;
  z-index: 2;
  padding: 1rem;
  font-size: 1.6rem;
}
.p-realtime__tab .tab-head li a::before {
  content: "";
  position: absolute;
  width: calc(100% - 2px);
  height: 2px;
  bottom: -1px;
  background-color: #fff;
  left: 1px;
  opacity: 0;
}
@media (min-width: 768px) {
  .p-realtime__tab .tab-head li a {
    min-height: 8rem;
    border-radius: 0.8rem 0.8rem 0 0;
  }
}
.p-realtime__tab .tab-head .c-arrow {
  background-color: var(--color-base-black);
  color: #fff;
  margin-inline: 0.2rem;
  font-size: 1.2rem;
  padding-bottom: 0.3rem;
}
@media (min-width: 768px) {
  .p-realtime__tab .tab-head .c-arrow {
    padding-bottom: 0.2rem;
    font-size: 1.4rem;
  }
}
.p-realtime__tab .tab-head .c-arrow.--primary {
  background-color: var(--color-primary);
}
.p-realtime__tab .tab-wrap {
  padding-top: 4rem;
}
.p-realtime__tab .tab-content {
  display: none;
}
.p-realtime__tab .tab-content.active {
  display: block;
}
.p-realtime__tab .hline03 {
  text-align: center;
}
.p-realtime__btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 2.4rem;
}
@media (min-width: 768px) {
  .p-realtime__btn {
    margin-top: 3.2rem;
  }
}
.p-realtime__btn .btn-basic01 {
  font-weight: 500;
  min-width: 25rem;
  cursor: pointer;
}
@media (min-width: 768px) {
  .p-realtime__btn .btn-basic01 {
    min-width: 31rem;
  }
}
.p-realtime__btn .inactive {
  background: transparent;
  border: solid 0.2rem #efefef;
  color: var(--color-gray);
}
.p-realtime__btn .inactive::after {
  color: var(--color-gray);
}
.p-realtime__btn .inactive:before {
  display: none;
}
.p-realtime__image {
  margin-block: 3.2rem;
  width: 100%;
  display: block;
}
@media (min-width: 768px) {
  .p-realtime__image {
    margin-block: 3.2rem;
  }
}
.p-realtime__image:first-child {
  margin-top: 0;
}
.p-realtime__image:last-child {
  margin-bottom: 0;
}
.p-realtime__map {
  position: relative;
}
.p-realtime__map img {
  width: 100%;
}

.c-row {
  margin-bottom: 2.8rem;
}
@media (min-width: 768px) {
  .c-row {
    margin-bottom: 3.2rem;
  }
}

.c-note {
  line-height: 1.6;
}
@media (min-width: 768px) {
  .c-note {
    line-height: 1.5;
  }
}
@media (max-width: 767px) {
  .c-note {
    font-size: 1rem;
  }
}
.c-note a {
  text-decoration: underline;
  font-weight: bold;
  transition: color 0.25s ease-in-out;
}
.c-note a:hover {
  color: var(--color-primary);
}

.box-img {
  position: relative;
}

.align-center {
  text-align: center;
}

@media (min-width: 768px) {
  .img-hachioji {
    width: 82.5rem;
  }
}

.img-style01 {
  border: 2px solid #000;
  width: 100%;
}

.img-style02 {
  width: 98rem !important;
}

.timeBox {
  position: absolute;
}
.timeBox.yellow {
  --timeColor: #ff9797;
}
.timeBox.red {
  --timeColor: #e70012;
}
.timeBox.pink {
  --timeColor: #ff2696;
}
.timeBox.green {
  --timeColor: #fff46a;
}
@media (max-width: 767px) {
  .timeBox.--padleft .control_time,
  .timeBox.--padleft .control_time2 {
    padding-left: 0.6rem;
  }
}
@media (max-width: 767px) {
  .timeBox.--padright small {
    padding-right: 0.6rem;
  }
}
.timeBox.--pos01, .timeBox.--pos02 {
  top: 14.9202733485%;
}
.timeBox.--pos03, .timeBox.--pos04 {
  top: 35.5353075171%;
}
.timeBox.--pos06, .timeBox.--pos07, .timeBox.--pos08, .timeBox.--pos09, .timeBox.--pos10 {
  top: 76.5375854214%;
}
.timeBox.--pos12, .timeBox.--pos13, .timeBox.--pos14, .timeBox.--pos15, .timeBox.--pos16 {
  top: 90.5466970387%;
}
.timeBox.--pos17, .timeBox.--pos18 {
  top: 55.7251908397%;
}
.timeBox.--pos01, .timeBox.--pos03, .timeBox.--pos17 {
  left: 25.3077975376%;
}
.timeBox.--pos02, .timeBox.--pos04, .timeBox.--pos18 {
  left: 38.9876880985%;
}
.timeBox.--pos05 {
  top: 75.5%;
  left: 8%;
}
@media (min-width: 1000px) {
  .timeBox.--pos05 {
    top: 491px;
    left: 89px;
  }
}
.timeBox.--pos06, .timeBox.--pos12 {
  left: 10.2599179207%;
}
.timeBox.--pos07, .timeBox.--pos13 {
  left: 18.4678522572%;
}
.timeBox.--pos08, .timeBox.--pos14 {
  left: 38.9876880985%;
}
.timeBox.--pos09, .timeBox.--pos15 {
  left: 58.8235294118%;
}
.timeBox.--pos10, .timeBox.--pos16 {
  left: 77.975376197%;
}
.timeBox.--pos11 {
  top: 87%;
  left: 7%;
}
@media (min-width: 1000px) {
  .timeBox.--pos11 {
    top: 570px;
    left: 89px;
  }
}
.timeBox.--hachi-01 {
  top: 17.8657074341%;
}
.timeBox.--hachi-02 {
  top: 31.0551558753%;
}
.timeBox.--hachi-01, .timeBox.--hachi-02 {
  left: 46.4242424242%;
}
.timeBox.--hachi-03 {
  top: 8.9928057554%;
}
.timeBox.--hachi-04 {
  top: 26.4988009592%;
}
.timeBox.--hachi-03, .timeBox.--hachi-04, .timeBox.--hachi-05, .timeBox.--hachi-06 {
  left: 58.1818181818%;
}
.timeBox.--hachi-05 {
  top: 37.7697841727%;
  left: 59.3939393939%;
}
.timeBox.--hachi-06 {
  top: 72.4220623501%;
}
.timeBox.--hachi-07 {
  top: 38.96882494%;
  left: 76.9696969697%;
}
.timeBox__box {
  position: relative;
}
.timeBox__box.up .time_wrap, .timeBox__box.down .time_wrap {
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-rl;
  left: -0.8rem;
  bottom: -0.8rem;
}
@media (min-width: 768px) {
  .timeBox__box.up .time_wrap, .timeBox__box.down .time_wrap {
    left: -2rem;
    bottom: -2rem;
  }
}
.timeBox__box.up .time_wrap .control_time,
.timeBox__box.up .time_wrap .control_time2,
.timeBox__box.up .time_wrap span, .timeBox__box.down .time_wrap .control_time,
.timeBox__box.down .time_wrap .control_time2,
.timeBox__box.down .time_wrap span {
  writing-mode: initial;
}
.timeBox__box.up .time_wrap .control_time {
  top: 0.2rem;
}
@media (min-width: 768px) {
  .timeBox__box.up .time_wrap .control_time {
    top: 0.4rem;
  }
}
.timeBox__box.up .time_wrap small {
  top: 0.4rem;
}
@media (min-width: 768px) {
  .timeBox__box.up .time_wrap small {
    top: 0.7rem;
  }
}
.timeBox__box.up .time_wrap:before {
  transform: rotate(90deg);
}
.timeBox__box.down .time_wrap .control_time {
  top: -0.3rem;
}
@media (min-width: 768px) {
  .timeBox__box.down .time_wrap .control_time {
    top: -0.4rem;
  }
}
.timeBox__box.down .time_wrap small {
  top: 0;
}
.timeBox__box.down .time_wrap:before {
  transform: rotate(-90deg);
}
.timeBox__box.left .time_wrap {
  padding-right: 11px;
}
@media (min-width: 576px) {
  .timeBox__box.left .time_wrap {
    padding-right: 10px;
  }
}
.timeBox__box.left .time_wrap.stop:after {
  right: 11px;
}
.timeBox__box.left .time_wrap:before {
  transform: rotate(180deg);
}
.timeBox__box.right .time_wrap {
  padding-left: 13px;
}
@media (min-width: 576px) {
  .timeBox__box.right .time_wrap {
    padding-left: 14px;
  }
}
.timeBox__box.right .time_wrap.stop:after {
  left: 6px;
}
.timeBox__box.right-down .time_wrap {
  padding-right: 11px;
  transform: rotate(40deg);
  transform-origin: top left;
}
@media (min-width: 576px) {
  .timeBox__box.right-down .time_wrap {
    padding-right: 10px;
  }
}
.timeBox__box.right-down .time_wrap.stop:after {
  right: 11px;
}
.timeBox__box.right-down .time_wrap::before {
  transform: rotate(180deg);
}
.timeBox__box .direction {
  display: block;
}
.timeBox__box .direction span {
  background-color: #efefef;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: max(1.73vw, 6.5px);
  margin: 0 auto;
  height: max(3.2vw, 12px);
  width: max(11.7vw, 44px);
}
@media (min-width: 768px) {
  .timeBox__box .direction span {
    font-size: 13px;
    height: 24px;
    width: 88px;
  }
}
.timeBox__box .time_wrap {
  aspect-ratio: 68/28;
  width: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 500;
  line-height: 1;
  position: relative;
}
@media (min-width: 768px) {
  .timeBox__box .time_wrap {
    font-size: 1.8rem;
    width: 9.1rem;
  }
}
.timeBox__box .time_wrap::before {
  content: "";
  mask: url("../img/realtime/bg_left.png") no-repeat center;
  mask-size: 100%;
  background: url("../img/realtime/bg_left.png") no-repeat center;
  position: absolute;
  inset: 0;
  background-size: contain;
}
.timeBox__box .time_wrap.over3 {
  --trafficColor: #5C2B82;
  color: #fff;
}
.timeBox__box .time_wrap.over3::before {
  background: none;
  background-color: var(--trafficColor, #fff);
}
.timeBox__box .time_wrap.over2 {
  --trafficColor: #FF9155;
}
.timeBox__box .time_wrap.over2::before {
  background: none;
  background-color: var(--trafficColor, #fff);
}
.timeBox__box .time_wrap.over1 {
  --trafficColor: #FFDF76;
}
.timeBox__box .time_wrap.over1::before {
  background: none;
  background-color: var(--trafficColor, #fff);
}
.timeBox__box .time_wrap.stop::after {
  content: "";
  background: url("../images/common/icon_caution.svg") no-repeat center/contain;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  top: 5px;
  width: 17px;
  height: 15px;
  margin: auto;
}
@media (max-width: 767px) {
  .timeBox__box .time_wrap.stop::after {
    width: 0.8rem;
    height: 0.8rem;
  }
}
.timeBox__box .time_wrap.stop * {
  display: none;
  opacity: 0;
}
.timeBox__box .time_wrap .control_time,
.timeBox__box .time_wrap .control_time2 {
  position: relative;
  z-index: 1;
}
.timeBox__box .time_wrap small {
  font-size: 0.5rem;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .timeBox__box .time_wrap small {
    top: 0.2rem;
    font-size: 1.4rem;
  }
}

.c-modal-time {
  position: relative;
}
@media (max-width: 767px) {
  .c-modal-time.--hachioji .timeBox__box .time_wrap {
    width: 5rem;
  }
}
@media (max-width: 767px) {
  .c-modal-time.--hachioji .timeBox__box.up .time_wrap, .c-modal-time.--hachioji .timeBox__box.down .time_wrap {
    left: -1.1rem;
    bottom: -0.9rem;
  }
}
@media (max-width: 767px) {
  .c-modal-time .timeBox__box.up .time_wrap, .c-modal-time .timeBox__box.down .time_wrap {
    left: -1.8rem;
    bottom: -1.8rem;
  }
}
@media (max-width: 767px) {
  .c-modal-time .timeBox__box .time_wrap {
    font-size: 1.3rem;
    width: 6rem;
  }
}
.c-modal-time .timeBox__box .time_wrap::before {
  content: "";
  mask: url("../img/realtime/bg_left.png") no-repeat center;
  mask-size: 100%;
  background: url("../img/realtime/bg_left.png") no-repeat center;
  background-size: contain;
}
.c-modal-time .timeBox__box .time_wrap.over3 {
  --trafficColor: #5C2B82;
  color: #fff;
}
.c-modal-time .timeBox__box .time_wrap.over3::before {
  background: none;
  background-color: var(--trafficColor, #fff);
}
.c-modal-time .timeBox__box .time_wrap.over2 {
  --trafficColor: #FF9155;
}
.c-modal-time .timeBox__box .time_wrap.over2::before {
  background: none;
  background-color: var(--trafficColor, #fff);
}
.c-modal-time .timeBox__box .time_wrap.over1 {
  --trafficColor: #FFDF76;
}
.c-modal-time .timeBox__box .time_wrap.over1::before {
  background: none;
  background-color: var(--trafficColor, #fff);
}
.c-modal-time .timeBox__box .time_wrap.stop::after {
  content: "";
  background: url("../images/common/icon_caution.svg") no-repeat center/contain;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  top: 5px;
  width: 14px;
  height: 14px;
  margin: auto;
}
@media (min-width: 768px) {
  .c-modal-time .timeBox__box .time_wrap.stop::after {
    width: 22px;
    height: 20px;
  }
}
.c-modal-time .timeBox__box .time_wrap.stop * {
  display: none;
  opacity: 0;
}
.c-modal-time .timeBox__box .time_wrap .control_time,
.c-modal-time .timeBox__box .time_wrap .control_time2 {
  position: relative;
  z-index: 1;
}
.c-modal-time .timeBox__box .time_wrap small {
  font-size: 9px;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .c-modal-time .timeBox__box .time_wrap small {
    font-size: 12px;
  }
}

.p-area.--child .p-area__content {
  display: flex;
  justify-content: center;
  flex-flow: wrap;
}
@media (min-width: 768px) {
  .p-area.--child .p-area__item {
    width: calc(25% - 3rem);
  }
}

.p-modal.scroll.realtime img {
  max-height: none;
}

.modal-home.modal-datetime.open .icon-close {
  opacity: 1 !important;
}
.modal-home.modal-datetime .icon-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  background-color: var(--color-primary);
}
@media (min-width: 768px) {
  .modal-home.modal-datetime .icon-close {
    width: 4rem;
  }
}
.modal-home.modal-datetime .c-modal__wrap {
  max-width: none;
  width: 100%;
  height: 100vh;
  border-radius: 0;
  bottom: auto;
  left: auto;
  transform: none !important;
  overflow: auto;
  background: #fff;
}
.modal-home.modal-datetime .rain_inner {
  padding: 2rem;
  max-height: none;
  height: 100vh;
  overflow: auto;
  text-align: center;
}
@media (max-width: 767px) {
  .modal-home.modal-datetime .rain_inner {
    display: flex;
    align-items: center;
  }
}
.modal-home.modal-datetime .modal-img-box .img img {
  max-width: 694px;
  width: auto;
  display: block;
  margin: 0 auto;
  height: auto;
}
@media (min-width: 768px) {
  .modal-home.modal-datetime .modal-img-box .img img {
    max-width: none;
  }
}

.update-time-wrap {
  text-align: left;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .update-time-wrap {
    text-align: left;
    margin-bottom: 30px;
  }
}

.update-time-display {
  text-align: center;
  font-weight: 700;
  color: #000;
  border: 2px solid #000;
  width: fit-content;
  font-size: 1.4rem;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
}
@media (max-width: 767px) {
  .update-time-display {
    margin: 0.5rem 0;
  }
}

@media (max-width: 767px) {
  .c-modal .update-time-wrap {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 13rem;
  }
  .c-modal .update-time-phase {
    font-size: 1rem;
  }
  .c-modal .update-time-display {
    font-size: 1.1rem;
    padding-inline: 1rem;
  }
}

.update-time-phase {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
  text-align: left;
  margin-top: 0.5rem;
}

.list-legend {
  --rtColor: #FFDF76;
  display: flex;
  font-size: 1.4rem;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.list-legend__box {
  display: flex;
  gap: 0.3rem 1rem;
}
@media (min-width: 768px) {
  .list-legend__box {
    gap: 1rem;
  }
}
@media (max-width: 767px) {
  .list-legend__box {
    flex-flow: wrap;
  }
}
.list-legend__note {
  border-radius: 4rem;
  border: 1px solid var(--color-base-black);
  line-height: 1;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0.4rem 1rem;
}
@media (max-width: 767px) {
  .list-legend__note {
    padding: 1rem 0.4rem;
    flex-shrink: 0;
    writing-mode: vertical-lr;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .list-legend__txt {
    flex-basis: 100%;
  }
}
.list-legend__status {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.list-legend__status::before {
  content: "";
  background: var(--rtColor);
  flex-shrink: 0;
  clip-path: polygon(100% 0%, 100% 100%, 0.5rem 100%, 0% 50%, 0.5rem 0%);
  aspect-ratio: 21/12;
  width: 2rem;
}
@media (min-width: 768px) {
  .list-legend__status::before {
    width: 2.1rem;
  }
}
.list-legend__status.over2 {
  --rtColor: #FF9155;
}
.list-legend__status.over3 {
  --rtColor: #5C2B82;
}
.list-legend__closed {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.list-legend__closed::before {
  content: "";
  background: url(../images/common/icon_caution.svg) no-repeat center/contain;
  width: 1.5rem;
  height: 1.4rem;
}