/* timetable */
.commuTimetableTopInfoText {
  margin-top: 40px;
  display: flex;
  justify-content: flex-start;
}

.commuTimetableTopInfoText p {
  font-size: 12px;
  line-height: 1.5em;
}

.commuTimetable {
  margin: 10px 0 40px 0;
}

.commuTimetable table {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4em;
  position: relative;
}

.commuTimetable td {
  position: relative;
}

/* CH */
.commuTimetableCh111 {
  background-color: #E64290;
  color: #fff;
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 2px;
  text-align: center;
  padding: 15px 0;
  border-radius: 15px 15px 0 0;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.commuTimetableCh112 {
  background-color: #EF8226;
  color: #fff;
  font-size: 22px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: normal;
  padding: 15px 0;
  border-radius: 15px 15px 0 0;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.commuTimetableCh101 {
  background-color: #39AD36;
  color: #fff;
  font-size: 22px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: normal;
  padding: 15px 0;
  border-radius: 15px 15px 0 0;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}


/* week */
.commuTimetableWeekSun {
  background-color: #F3AEBF;
  text-align: center;
  padding: 5px 0;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #3E3A39;
}

.commuTimetableWeekMon {
  background-color: #FAC866;
  text-align: center;
  padding: 5px 0;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #3E3A39;
}

.commuTimetableWeekTue {
  background-color: #FAC866;
  text-align: center;
  padding: 5px 0;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #3E3A39;
}

.commuTimetableWeekWed {
  background-color: #FAC866;
  text-align: center;
  padding: 5px 0;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #3E3A39;
}

.commuTimetableWeekThu {
  background-color: #FAC866;
  text-align: center;
  padding: 5px 0;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #3E3A39;
}

.commuTimetableWeekFri {
  background-color: #FAC866;
  text-align: center;
  padding: 5px 0;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #3E3A39;
}

.commuTimetableWeekSat {
  background-color: #79C8D0;
  text-align: center;
  padding: 5px 0;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #3E3A39;
}


/* hour */
.commuTimetableHour {
  background-color: #36BDEF;
  color: #fff;
  font-weight: normal;
  vertical-align: middle;
  text-align: center;
  width: 13px;
  border-left: 1px solid #3E3A39;
  border-right: 1px solid #3E3A39;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-size: 16px;
  padding: 2px 0;
}

.commuTimetableHour2 {
  background-color: #0080CB;
  color: #fff;
  font-weight: normal;
  vertical-align: middle;
  text-align: center;
  width: 13px;
  border-left: 1px solid #3E3A39;
  border-right: 1px solid #3E3A39;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-size: 16px;
  padding: 2px 0;
}

.commuTimetableTimeWhite {
  color: #fff;
}


/* zone */
.commuTimetableZone {
  width: 54px;
  letter-spacing: -0.5px;
  text-align: center;
  vertical-align: middle;
  font-size: 10.5px;
}

/* width */
.commuTimetableW95 {
  width: 95px;
}

.commuTimetableW14 {
  width: 14px;
}


/* color */
.commuTimetableBgCream {
  background-color: #FFFDED;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgIndigo {
  background-color: #5084C4;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgSakura {
  background-color: #F6C8DD;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgSkyblue {
  background-color: #7DCCF3;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgLightPurple {
  background-color: #BBB3D7;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgGreen {
  background-color: #00A43D;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgPink {
  background-color: #EA6DA4;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgPlum {
  background-color: #dda0dd;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgPurple {
  background-color: #A574AF;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgRed {
  background-color: #E50012;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgLightGreen {
  background-color: #AACC03;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgYellow {
  background-color: #FFF23F;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgKhaki {
  background-color: #f0e68c;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgGold {
  background-color: #ffd700;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgOrange {
  background-color: #EF8337;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgLightsalmon {
  background-color: #ffa07a;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgRose {
  background-color: #E8546B;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgLightBlue {
  background-color: #BBE1E8;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgEmerald {
  background-color: #69BC82;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgGray {
  background-color: #777777;
  border: 1px solid #3E3A39;
  padding: 2px;
}

.commuTimetableBgDarkYellow {
  background-color: #C68C4A;
  border: 1px solid #3E3A39;
  padding: 2px;
}


/* program */
.commuTimetableTime {
  position: absolute;
  left: 2px;
  top: 3px;
  font-weight: normal;
}

.commuTimetablePName {
  padding-left: 18px;
  display: inline-block;
  transform: scale(0.9, 1);
  transform-origin: top left;
  width: 110%;
}

.commuTimetablePNameWhite {
  color: #fff;
}

/* bigProgram */
.commuTimetableBigProgram {
  padding-top: 5px;
  padding-bottom: 5px;
}

.commuTimetableBigProgramBox {
  width: 480px;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: space-around;
  padding: 5px 10px;
  margin: 0 auto;
  border-top-left-radius: 3% 100%;
  border-top-right-radius: 3% 100%;
  border-bottom-left-radius: 3% 100%;
  border-bottom-right-radius: 3% 100%;
}

.commuTimetableBigProgramEach {
  text-align: center;
  width: 50%;
}

.commuTimetableBigProgramEach:hover {
  transform: scale(1.2);
	transition: 0.5s;
  opacity: 0.8;
}

.commuTimetableBigProgramEachImage {
  text-align: center;
  padding: 5px;
}

.commuTimetableBigProgramEachImage img {
  max-height: 40px;
  max-width: 220px;
}

.commuTimetableBigProgramEachBt {
  text-align: center;
  margin-bottom: 3px;
  font-size: 11px;
  border: 1px solid #019EB9;
  padding: 2px 10px;
  background-color: #FFF23F;
  color: #019EB9;
  transition: 0.5s;
  display: inline-block;
  border-radius: 5px;
}


/* miniProgram */
.commuTimetableMiniProgram {
}

.commuTimetableMiniProgramBox {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: space-around;
  padding: 2px;
  margin: 0 auto;
}

.commuTimetableMiniProgramEach {
  text-align: center;
  width: 100%;
}

.commuTimetableMiniProgramEach:hover {
  transform: scale(1.1);
	transition: 0.5s;
  opacity: 0.8;
}

.commuTimetableMiniProgramEachImage {
  text-align: center;
  /*padding: 2px 0 2px 10px;*/
  padding: 2px;
  min-height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.commuTimetableMiniProgramEachImage img {
  height: 55px;
}

.commuTimetableMiniProgramEachBt {
  text-align: center;
  margin-bottom: 3px;
  font-size: 10px;
  border: 1px solid #019EB9;
  padding: 2px 1px;
  background-color: #FFF23F;
  color: #019EB9;
  transition: 0.5s;
  display: inline-block;
  border-radius: 5px;
}


/* border */
.commuTimetableBorderHeavyLeftEmerald {
  /*border-left: 5px solid #69BC82;*/
}

.commuTimetableBorderHeavyLeftEmerald:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  left: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #69BC82;
}

.commuTimetableBorderHeavyRightEmerald {

}

.commuTimetableBorderHeavyRightEmerald:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  right: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #69BC82;
}

.commuTimetableBorderHeavyTopEmerald {
  border-top: 5px solid #69BC82 !important;
}

.commuTimetableBorderHeavyBottomEmerald {
  border-bottom: 5px solid #69BC82 !important;
}

.commuTimetableBorderHeavyLeftSkyblue {

}

.commuTimetableBorderHeavyLeftSkyblue:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  left: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #7DCCF3;
}

.commuTimetableBorderHeavyRightSkyblue {

}

.commuTimetableBorderHeavyRightSkyblue:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  right: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #7DCCF3;
}

.commuTimetableBorderHeavyTopSkyblue {
  border-top: 5px solid #7DCCF3 !important;
}

.commuTimetableBorderHeavyBottomSkyblue {
  border-bottom: 5px solid #7DCCF3 !important;
}

.commuTimetableBorderHeavyLeftPink {

}

.commuTimetableBorderHeavyLeftPink:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  left: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #EA6DA4;
}

.commuTimetableBorderHeavyRightPink {

}

.commuTimetableBorderHeavyRightPink:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  right: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #EA6DA4;
}

.commuTimetableBorderHeavyTopPink {
  border-top: 5px solid #EA6DA4 !important;
}

.commuTimetableBorderHeavyBottomPink {
  border-bottom: 5px solid #EA6DA4 !important;
}

.commuTimetableBorderHeavyLeftPlum {

}

.commuTimetableBorderHeavyLeftPlum:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  left: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #dda0dd;
}

.commuTimetableBorderHeavyRightPlum {

}

.commuTimetableBorderHeavyRightPlum:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  right: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #dda0dd;
}

.commuTimetableBorderHeavyTopPlum {
  border-top: 5px solid #dda0dd !important;
}

.commuTimetableBorderHeavyBottomPlum {
  border-bottom: 5px solid #dda0dd !important;
}

.commuTimetableBorderHeavyLeftOrange {

}

.commuTimetableBorderHeavyLeftOrange:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  left: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #EF8337;
}

.commuTimetableBorderHeavyRightOrange {

}

.commuTimetableBorderHeavyRightOrange:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  right: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #EF8337;
}

.commuTimetableBorderHeavyTopOrange {
  border-top: 5px solid #EF8337 !important;
}

.commuTimetableBorderHeavyBottomOrange {
  border-bottom: 5px solid #EF8337 !important;
}

.commuTimetableBorderHeavyLeftLightsalmon {

}

.commuTimetableBorderHeavyLeftLightsalmon:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  left: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #ffa07a;
}

.commuTimetableBorderHeavyRightLightsalmon {

}

.commuTimetableBorderHeavyRightLightsalmon:before {
  content: "";
  width: 5px;
  height: calc(100% + 9.75px);
  position: absolute;
  right: -2.5px;
  top: -4.75px;
  z-index: +1;
  background-color: #ffa07a;
}

.commuTimetableBorderHeavyTopLightsalmon {
  border-top: 5px solid #ffa07a !important;
}

.commuTimetableBorderHeavyBottomLightsalmon {
  border-bottom: 5px solid #ffa07a !important;
}

.commuTimetableTopBorderBlack {
  border-top: 1px solid #3E3A39;
}

.commuTimetableBottomBorderBlack {
  border-bottom: 1px solid #3E3A39;
}

.commuTimetableLeftBorderBlack {
  border-left: 1px solid #3E3A39;
}

.commuTimetableRightBorderBlack {
  border-right: 1px solid #3E3A39;
}


@media all and (max-width: 959px) {
  /* SP */
  .commuTimetableTopInfoText {
    padding-left: 20px;
  }

  .commuTimetableSpChList {
    margin-left: 20px;
  }

  .commuTimetableSpChList ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
  }

  .commuTimetableSpChList li {
    width: calc(100% / 3);
  }

  .commuTimetableSpChList111 {
    background-color: #E64290;
    color: #fff;
    font-size: 22px;
    font-weight: normal;
    letter-spacing: 2px;
    text-align: center;
    padding: 10px 0;
    border-radius: 15px 15px 0 0;
    opacity: 0.4;
  }

  .commuTimetableSpChList111.on {
    opacity: 1;
  }

  .commuTimetableSpChList112 {
    background-color: #EF8226;
    color: #fff;
    font-size: 22px;
    text-align: center;
    letter-spacing: 2px;
    font-weight: normal;
    padding: 10px 0;
    border-radius: 15px 15px 0 0;
    opacity: 0.4;
  }

  .commuTimetableSpChList112.on {
    opacity: 1;
  }

  .commuTimetableSpChList101 {
    background-color: #39AD36;
    color: #fff;
    font-size: 22px;
    text-align: center;
    letter-spacing: 2px;
    font-weight: normal;
    padding: 10px 0;
    border-radius: 15px 15px 0 0;
    opacity: 0.4;
  }

  .commuTimetableSpChList101.on {
    opacity: 1;
  }

  .commuTimetableSpWeek111List {
    margin-left: 20px;
  }

  .commuTimetableSpWeek111List ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1px;
  }

  .commuTimetableSpWeek111List li {
    width: calc(100% / 7);
    background-color: #DEDDDD;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 0;
  }

  .commuTimetableSpWeek111ListSun.on {
    background-color: #F3AEBF;
    color: #3E3A39;
  }

  .commuTimetableSpWeek111ListMon.on {
    background-color: #FAC866;
    color: #3E3A39;
  }

  .commuTimetableSpWeek111ListTue.on {
    background-color: #FAC866;
    color: #3E3A39;
  }

  .commuTimetableSpWeek111ListWed.on {
    background-color: #FAC866;
    color: #3E3A39;
  }

  .commuTimetableSpWeek111ListThu.on {
    background-color: #FAC866;
    color: #3E3A39;
  }

  .commuTimetableSpWeek111ListFri.on {
    background-color: #FAC866;
    color: #3E3A39;
  }

  .commuTimetableSpWeek111ListSat.on {
    background-color: #79C8D0;
    color: #3E3A39;
  }

  .commuTimetableSpWeek112List {
    margin-left: 20px;
    display: none;
  }

  .commuTimetableSpWeek112List ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1px;
  }

  .commuTimetableSpWeek112List li {
    width: calc(100% / 7);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 3px 0;
  }

  .commuTimetableSpWeek112ListSun {
    background-color: #F3AEBF;
  }

  .commuTimetableSpWeek112ListMon {
    background-color: #FAC866;
  }

  .commuTimetableSpWeek112ListTue {
    background-color: #FAC866;
  }

  .commuTimetableSpWeek112ListWed {
    background-color: #FAC866;
  }

  .commuTimetableSpWeek112ListThu {
    background-color: #FAC866;
  }

  .commuTimetableSpWeek112ListFri {
    background-color: #FAC866;
  }

  .commuTimetableSpWeek112ListSat {
    background-color: #79C8D0;
  }

  .commuTimetableSpWeek101List {
    margin-left: 20px;
    display: none;
  }

  .commuTimetableSpWeek101List ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1px;
  }

  .commuTimetableSpWeek101List li {
    width: calc(100% / 7);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 3px 0;
  }

  .commuTimetableSpWeek101ListSun {
    background-color: #F3AEBF;

  }

  .commuTimetableSpWeek101ListMon {
    background-color: #FAC866;
  }

  .commuTimetableSpWeek101ListTue {
    background-color: #FAC866;
  }

  .commuTimetableSpWeek101ListWed {
    background-color: #FAC866;
  }

  .commuTimetableSpWeek101ListThu {
    background-color: #FAC866;
  }

  .commuTimetableSpWeek101ListFri {
    background-color: #FAC866;
  }

  .commuTimetableSpWeek101ListSat {
    background-color: #79C8D0;
  }

  .commuTimetableSpCh111 {
    margin-top: 5px;
    display: none;
  }

  .commuTimetableSpCh112 {
    display: none;
    margin-top: 5px;
  }

  .commuTimetableSpCh101 {
    display: none;
    margin-top: 5px;
  }

  .commuTimetableHour {
    width: 20px;
  }

  .commuTimetableHour2 {
    width: 20px;
  }

  .commuTimetableTime {
    font-size: 12px;
    top: 2px;
  }

  .commuTimetablePName {
    font-size: 12px;
    width: 100%;
    transform: scale(1, 1);
  }

  .commuTimetableBigProgramBox {
    width: 93%;
    margin-left: 6%;
    margin-right: 1%;
    padding-left: 5px;
    padding-right: 5px;
  }

  .commuTimetableBigProgramBoxTTVSP {
    position: relative;
    z-index: 100;
    top: 10px;
  }

  .commuTimetableBigProgramEachImage {
    padding-top: 0;
  }

  .commuTimetableBigProgramEachImage img {
    max-width: 120px;
    max-height: 50px;
    width: auto;
    height: auto;
  }
}

@media all and (min-width:960px) {
  /* PC */

}