@charset "utf-8";


@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

.unko { color: #456990;}
.ichibuunkyu { color: #f45b69;}
.unkyu { color: #FF0000; font-weight: 700;}



/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */
@media print, screen and (min-width: 768px) {

.comHeader .w1200 h2 { padding-top: 56px; }


/*cont01
----------------------------------------*/
.cont01 { padding: 50px 0;}
.cont01 p { margin: 0 0 50px; font-size: 1.6rem; text-align: center;}
.cont01 .msg { width: 700px; margin: auto auto 50px; border: solid 2px #f45b69;}
.cont01 .msg h3 { padding: 20px 0 20px; text-align: center; background: #f45b69; color: #FFF;}
.cont01 .msg ul { list-style: none; padding: 20px;}
.cont01 .msg ul li {}
.cont01 .reload { margin: 0 0 0; text-align: center;}
.cont01 .reload a { display: inline-block; width: 400px; padding: 20px 50px; background: #f45b69; color: #FFF;}





/*cont02
----------------------------------------*/
.cont02 { padding: 50px 0;}
.cont02 h2 { font-size: 2.6rem; line-height: 34px; font-weight: 300; letter-spacing: 1px; display: block; background-color: #fefffa; margin: 0; cursor: pointer;}
.cont02 p {}

.cont02 dl { border-bottom: solid 1px #CCC; margin: 30px 0 50px;}
.cont02 dl dt { display: block; cursor: pointer;  padding-right: 15px; padding: 20px; border-top: solid 1px #CCC; position: relative;}
.cont02 dl dt::after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 0; bottom: 0; margin: auto 0; right: 20px; width: 30px; height: 30px; background: #086DB0;  text-align: center; line-height: 30px; border-radius: 50%; color: #FFF;}
.cont02 dl dt:hover::after { opacity: 0.8;}
.cont02 dl dt.active::after { transform: rotate( 180deg);}
.cont02 dl dd { display: none; padding: 0 20px 20px;}

.cont02 dl dt .inner { display: flex; justify-content: flex-start;}
.cont02 dl dt .inner .box01 { width: 750px;}
.cont02 dl dt .inner .box01 h4 { margin: 0 0 10px;}
.cont02 dl dt .inner .box01 p { margin: 0; font-size: 1.4rem; color: #999;}
.cont02 dl dt .inner .box02 { width: 150px; display: flex; align-items: center; justify-content: center;}
.cont02 dl dt .inner .box02 p { font-size: 2.4rem;}
.cont02 dl dt .inner .box03 { width: 200px; text-align: center;}
.cont02 dl dt .inner .box03 p { margin: 0;}
.cont02 dl dd .txt { padding: 15px; background: #f5fff4; font-size: 1.6rem;}

.cont02 .attention { border: solid 5px #456990; margin: 0 0 0; padding: 30px;}
.cont02 .attention h3 { margin: 0; border-bottom: dotted 1px #456990; padding: 0 0 10px;}
.cont02 .attention ul { margin: 10px 0 0 25px;}
.cont02 .attention ul li {}



.sys_newsList { padding: 50px 0;}
.sys_newsList ul { list-style: none; margin: 0 0 40px; padding: 0;}
.sys_newsList ul li { padding: 5px 0; }
.sys_newsList ul li dl { display: flex; margin: 0;}
.sys_newsList ul li dl dt { width: 240px; margin: 0 0 0 0; }
.sys_newsList ul li dl dt .day {}
.sys_newsList ul li dl dt .mark { font-size: 1.2rem; line-height: 24px; width: 80px; height: 24px; text-align: center; display: inline-block; float: right;}
.sys_newsList ul li dl dd { margin: 0 0 0 50px; width: 910px;}
.sys_newsList .cate01 { color: #006fff; border: solid 1px #006fff;}
.sys_newsList .cate02 { color: #ff392c; border: solid 1px #ff392c;}
.sys_newsList .cate03 { color: #feda00; border: solid 1px #feda00;}
.sys_newsList .cate04 { color: #4cc365; border: solid 1px #4cc365;}
.sys_newsList .cate05 { color: #bf2aff; border: solid 1px #bf2aff;}
.sys_newsList .is-hide { display: none;}



/*sys
--------------------------------------*/
.joho_table { /* 全体 */
width: 100%;
margin-bottom: 50px;
font-size: 1.4rem;
}

.joho_table:last-child {
margin-bottom: 0;
}

.joho_table th { /* 現在時刻と路線 */
width: 14.4em;
font-weight: normal;
white-space: nowrap;
text-align: left;
background-color: rgb(250,255,255);
}

.joho_table th,
.joho_table td { /* thとtd */
border: #c2e0f4 solid 1px;
padding: 6px 12px;
}

#mdtp th,
#mdtp td { /* thとtd */
border: #bbb solid 2px;
padding: 6px 12px;
}

.joho_table .situation2 { /* 現在状況 */
display: inline-block;
color: rgb(255,255,255);
width: 10em;
padding: 5px 0;
margin-top: 3px;
margin-right: 20px;
line-height: 1;
border-radius: 4px;
text-align: center;
float: none;
margin-bottom: 5px;
}

.joho_table .unko { /* 通常運行 */
background-color: #086DB0;
}

.joho_table .ichibuukai { /* 一部迂回運行 */
  background-color: rgb(255, 255, 210);
  color: black; /* 文字色を黒に設定 */
  }

.joho_table .ukaiunko { /* 迂回運行 */
  background-color: rgb(255, 200, 50);
  color: black; /* 文字色を黒に設定 */
  }

  .joho_table .oohabachien { /* 大幅な遅延 */
    background-color: rgb(255, 230, 180);
    color: black;
    
    }
      
.joho_table .ichibuunkyu { /* 一部運休 */
background-color: #F45B69;

}

.joho_table .unkyu { /* 運休 */
  background-color:rgb(190,30,40);
}

.joho_table .unkosaikai { /* 運行再開 */
  background-color: rgb(39,166,200);
}

.joho_table .oshirase { /* お知らせ */
  background-color: rgb(120, 50, 160);
}


.joho_table .rosen { /* 路線名 */
background-color: rgb(255,255,235);
}

.joho_table .rosen:after { /* 路線名クリアフィックス */
content:"";
display: block;
clear: both;
}

.joho_table .rosen p { /* 路線名テキスト */
overflow: hidden;
_zoom: 1;
padding: 0;
padding-top: 0.2em;
margin-bottom: 0;
font-size: 2rem;
font-weight: 700;
color:#f45b69;
display: inline;
padding-right: 20px;
}

.black .joho_table .rosen p { /* 路線名テキスト */
color: #333;
}

.joho_table th.date { /* 現在日時 */
background-color: rgb(180,220,245);
}

.unkou-normal { /* 情報無し表示 */
margin: 2em auto 3em auto;
text-align: center;
font-size: 108%;
}



}

/* モバイルレイアウト : 480 px およびそれ以下. */
/*sp*/
@media only screen and (max-width: 767px) {

.comHeader .w1200 h2 { padding-top: 56px; }


/*cont01
----------------------------------------*/
.cont01 { padding: 50px 5%;}
.cont01 p { margin: 0 0 50px; font-size: 1.6rem; text-align: center;}
.cont01 .msg { width: 100%; margin: auto auto 50px; border: solid 2px #f45b69;}
.cont01 .msg h3 { padding: 20px 0 20px; text-align: center; background: #f45b69; color: #FFF;}
.cont01 .msg ul { padding: 20px; margin: 0 0 0 25px;}
.cont01 .msg ul li {}
.cont01 .reload { margin: 0 0 0; text-align: center;}
.cont01 .reload a { display: inline-block; width: 100%; padding: 20px 0; background: #f45b69; color: #FFF;}





/*cont02
----------------------------------------*/
.cont02 { padding: 50px 5%;}
.cont02 h2 { font-size: 26px; line-height: 34px; font-weight: 300; letter-spacing: 1px; display: block; background-color: #fefffa; margin: 0; cursor: pointer;}
.cont02 p {}

.cont02 dl { border-bottom: solid 1px #CCC; margin: 30px 0 50px;}
.cont02 dl dt { display: block; cursor: pointer;  padding-right: 15px; padding: 20px; border-top: solid 1px #CCC; position: relative;}
.cont02 dl dt::after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 0; bottom: 0; margin: auto 0; right: 20px; width: 30px; height: 30px; background: #086DB0;  text-align: center; line-height: 30px; border-radius: 50%; color: #FFF;}
.cont02 dl dt:hover::after { opacity: 0.8;}
.cont02 dl dt.active::after { transform: rotate( 180deg);}
.cont02 dl dd { display: none; padding: 0 20px 20px;}

.cont02 dl dt .inner { display: inherit; justify-content: flex-start; position: relative;}
.cont02 dl dt .inner .box01 { width: 100%;}
.cont02 dl dt .inner .box01 h4 { margin: 0 0 10px;}
.cont02 dl dt .inner .box01 p { margin: 0; font-size: 1.4rem; color: #999;}
.cont02 dl dt .inner .box02 { width: 100%; display: flex; align-items: flex-start; justify-content: flex-start;}
.cont02 dl dt .inner .box02 p { font-size: 2.0rem; padding: 5% 0;}
.cont02 dl dt .inner .box03 { width: 100%; text-align: left; display: block;}
.cont02 dl dt .inner .box03 p { margin: 0; display: inline-block; font-size: 1.6rem;}
.cont02 dl dd .txt { padding: 15px; background: #f5fff4; font-size: 1.6rem;}

.cont02 .attention { border: solid 5px #456990; margin: 0 0 0; padding: 20px;}
.cont02 .attention h3 { margin: 0; border-bottom: dotted 1px #456990; padding: 0 0 10px;}
.cont02 .attention ul { margin: 10px 0 0 25px;}
.cont02 .attention ul li {}


.sys_newsList { padding: 5% 0;}
.sys_newsList select { width: 90%; margin: auto auto 2%; border: solid 1px #999; padding: 5px; display: block;}

.sys_newsList { padding: 5px 5%;}
.sys_newsList ul { list-style: none; margin: 0 0 2%;}
.sys_newsList ul li { padding: 5px 0; }
.sys_newsList ul li dl { display: inherit;}
.sys_newsList ul li dl dt { width: 240px; flex-basis: 240px; margin: 0 50px 5px 0; display: flex; justify-content: space-between;}
.sys_newsList ul li dl dt .day { font-size: 1.6rem;}
.sys_newsList ul li dl dt .mark { font-size: 1.2rem; line-height: 20px; width: 80px; text-align: center;}
.sys_newsList ul li dl dd { font-size: 1.4rem; margin: 0 0 2%; padding: 0 0 2%; border-bottom: dotted 1px #000;}
.sys_newsList .cate01 { color: #006fff; border: solid 1px #006fff;}
.sys_newsList .cate02 { color: #ff392c; border: solid 1px #ff392c;}
.sys_newsList .cate03 { color: #feda00; border: solid 1px #feda00;}
.sys_newsList .cate04 { color: #4cc365; border: solid 1px #4cc365;}
.sys_newsList .cate05 { color: #bf2aff; border: solid 1px #bf2aff;}
.sys_newsList .is-hide { display: none;}
.sys_newsList .btn { text-align: center;}
.sys_newsList .btn a { display: inline-block; background: #1e86bb; color: #FFF; padding: 10px 50px;}





/*sys
--------------------------------------*/
.joho_table { /* 全体 */
width: 100%;
margin-bottom: 30px;
font-size: 1.4rem;
border-top: #c2e0f4 solid 1px;
border-right: #c2e0f4 solid 1px;
}

.joho_table:last-child {
margin-bottom: 0;
}

.joho_table th { /* 現在時刻と路線 */
font-weight: normal;
white-space: nowrap;
text-align: left;
background-color:rgb(235,250,250);
}

.joho_table th,
.joho_table td { /* thとtd */
padding: 6px 12px;
display: block;
width: 100%;
border-left: #c2e0f4 solid 1px;
border-bottom: #c2e0f4 solid 1px;
box-sizing: border-box;
}

.joho_table .situation2 { /* 現在状況 */
display: inline-block;
color: rgb(255,255,255);
width: 8em;
padding: 5px 0;
margin-top: 3px;
margin-right: 20px;
line-height: 1;
border-radius: 4px;
text-align: center;
float: none;
margin-bottom: 5px;
}

.joho_table .unko { /* 通常運行 */
  background-color: #086DB0;
  }
  
  .joho_table .ichibuukai { /* 一部迂回運行 */
    background-color: rgb(255, 255, 210);
    color: black; /* 文字色を黒に設定 */
    }
  
  .joho_table .ukaiunko { /* 迂回運行 */
    background-color: rgb(255, 200, 50);
    color: black; /* 文字色を黒に設定 */
    }
  
    .joho_table .oohabachien { /* 大幅な遅延 */
      background-color: rgb(255, 230, 180);
      color: black;
      
      }
        
  .joho_table .ichibuunkyu { /* 一部運休 */
  background-color: #F45B69;
  
  }
  
  .joho_table .unkyu { /* 運休 */
    background-color:rgb(190,30,40);
  }
  
  .joho_table .unkosaikai { /* 運行再開 */
    background-color: rgb(39,166,200);
  }
  
  .joho_table .oshirase { /* お知らせ */
    background-color: rgb(120, 50, 160);
  }

.joho_table .rosen { /* 路線名 */
background-color: rgb(255,255,235);
}

.joho_table .rosen:after { /* 路線名クリアフィックス */
content:"";
display: block;
clear: both;
}

.joho_table .rosen p { /* 路線名テキスト */
overflow: hidden;
_zoom: 1;
padding: 0;
padding-top: 0.2em;
margin-bottom: 0;
font-size: 1.8rem;
font-weight: 700;
color:#f45b69;
display:block;
}

.black .joho_table .rosen p { /* 路線名テキスト */
color: #333;
}

.joho_table th.date { /* 現在日時 */
background-color: rgb(180,220,245);
}

.unkou-normal { /* 情報無し表示 */
margin: 2em auto 3em auto;
text-align: center;
font-size: 108%;
}



}