.traScheduleListBox {width: 35rem; margin: 0 auto; margin-top: 2rem}
.traScheduleItem {height: 50px; display: flex; justify-content: center; align-items: center; position: relative; width: 35rem; margin-bottom: 1rem}
.traScheduleTime {font-size: 1.5rem; width: 5rem; padding: 0 0.2rem}
.traScheduleTime > p {font-size: 0.8rem}
.traScheduleStation {width: 15rem; height: 50px; position: relative; display: flex; align-items: center; background-color: #EEE; padding: 0 1rem}
.traScheduleItem > div:first-child {justify-content: right; text-align: right; width: 15rem}
.traScheduleItem > div:last-child {justify-content: left; text-align: left}
.traStationTitle {font-size: 1.2rem}
.traDateTitle {color: gray; margin-top: 0.5rem}
.traYandexAdvert {font-size: 0.8rem}

.traNameLong {display: block; z-index: 1}
.traNameShort {display: none; z-index: 1}

.traArrowR1 {border-radius: 0; position: absolute; top:0; left: 0; background-color: #CFC; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid white;}
.traArrowR2 {border-radius: 0; position: absolute; top:0; right: 0; background-color: white; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid #CFC;}
.traArrowBodyR {border-radius: 0; background-color: #CFC}
.traArrowL1 {border-radius: 0; position: absolute; top:0; left: 0; background-color: white; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 25px solid #EEE;}
.traArrowL2 {border-radius: 0; position: absolute; top:0; right: 0; background-color: #EEE; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 25px solid white;}
.traArrowBodyL {border-radius: 0; background-color: #EEE}
.traBgL {border-radius: 0; background-color: #DDD}
.traBgR {border-radius: 0; background-color: #9F9}

.traArrowRevR1 {border-radius: 0; position: absolute; top:0; left: 0; background-color: #EEE; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid white;}
.traArrowRevR2 {border-radius: 0; position: absolute; top:0; right: 0; background-color: white; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 25px solid #EEE;}
.traArrowBodyRevR {border-radius: 0; background-color: #EEE !important}
.traArrowRevL1 {border-radius: 0; position: absolute; top:0; left: 0; background-color: white; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 25px solid #CFC;}
.traArrowRevL2 {border-radius: 0; position: absolute; top:0; right: 0; background-color: #CFC; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-right: 25px solid white;}
.traArrowBodyRevL {border-radius: 0; background-color: #CFC !important}
.traBgRevL {border-radius: 0; background-color: #9F9 !important}
.traBgRevR {border-radius: 0; background-color: #DDD !important}

@media only screen AND (max-width: 500px) 
{
  .traScheduleListBox {width: 19rem}
  .traScheduleItem {width: 19rem}
  .traScheduleTime {font-size: 1.2rem; width: 4rem}
  .traScheduleStation {font-size: 0.8rem; width: 10rem}
  .traScheduleItem > div:first-child {width: 10rem}
  .traNameLong {display: none}
  .traNameShort {display: block}
}