:root{
	/* 配色用 */
	--main-color:rgb(113, 189, 189);
	--main-color-alpha:rgba(113,189,189,0.40);
	--sub-color:rgba(113,189,189,0.40);
}

/*上部コンテンツ*/
.contents_1st_div {
	margin-top: 5%;
	margin-left: 15%;
}
.bus_box{
   width: 85%;
   background-color: rgba(255, 255, 255, 0.30);
   margin-bottom: 5%;
   height:auto;
   overflow:hidden;
	box-shadow: 0 5px 15px rgba(128, 128, 128, 0.432);
}
.bus_table{
	width: 100%;
	margin:0 auto;
	vertical-align:top;
	margin-bottom: 5%;
}
.bus{
   margin: 1%;
   width: 45%;
   font-size: 1.1em;
   line-height: 2em;
   text-align: center;
   float: left;
}
.bus p{
	border-bottom: 1px solid #c0c0c0;
	display: inline-block;
}

.bus span{
	font-size: 1.3em;
}

.bus h2{
	font-size: 1em;
}
.title{
    margin-bottom: 3%;
} 
h1{
    font-size: 1.0em;
    font-weight: bold;
}
h1 img{
	width: 32px;
	height: 100%;
	margin-right: 3%;
	vertical-align: top;
}


#heading{
  display: flex;
  width:100%;
  margin: 0 auto;
}
.distination{
  text-align: center;
  margin-left: 4%;
  margin-right: 4%;
  float:left;
  width: 46%;
}
.allow{
  text-align: center;
  width: 10%;
}

div.distination div{
  width: 130px;
  margin: auto;
}

/* 電車テーブル */
a {
  position: relative;
}
span.tip {
  opacity: 0;
  transition: 0.5s;
  background: rgb(113,189,189);
  position: absolute;
  color: #fff;
  padding: 2px; /*テキストの余白*/
  width: 200px;
  bottom: calc(100% + 17px);
  left:-25%;
  box-sizing: content-box;
  text-align: left;
  border-radius: 5px;
  visibility: hidden;
  pointer-events: none;
}

a::before {
  opacity: 0;
  transition: 0.5s;
  content: "";
  position: absolute;
  border: 7px solid transparent;
  border-top: 14px solid rgb(0, 0, 0);
  bottom:12px;
  left:calc(50% - 7px);
  margin-top: -3px;
  visibility: hidden;
  pointer-events: none;
}
a:hover:before {
  opacity: 1;
  visibility: visible;
}
a:hover span {
  opacity: 1;
  visibility: visible;
}
/*<a ontouchstart> スマホ対応*/
a:active:before {
  opacity: 1;
  visibility: visible;
}
a:active span {
  opacity: 1;
  visibility: visible;
}
.train_table{
  width: 100%;
  margin: 0 auto;
  vertical-align:top;
	margin-bottom: 5%;

}

div.train_dire_main{
	text-align: center;
  width: 100%;
	height: auto;
  display: inline-block;
  margin-left: auto;
	margin-right: auto;


}

table.train_dire{
  text-align: center;
	border:none;	
	display: inline-block;
	width: 80%;
  max-width: 80%;
  word-wrap:break-word;
  position: relative;

}

table.train_dire span{
  display: inline-block;
}
  
table.train_dire td{
  position: relative;
  width:16%;
  height:27.5px;
}

table.train_dire_hour{
  table-layout: fixed;
  border:none;	
  display: inline-block;
  width: 8%;
}
  
  
table.train_dire_hour tr{
  width: 100%;
}
table.train_dire_hour td,th{
  height:27.5px;
  width: 7%;
}


/* バスダイヤテーブル */



.bus_dire_main img{
	width:32px;
	height:32px;
}

div.bus_dire_main{
	text-align: center;
  width: 100%;
	height: auto;
  margin:0 auto;


}




table.bus_dire{
  float:left;
	border:none;	
	display: inline-block;
	width: 46%;

	margin-left: 0;
	margin-right: 0;

}

table.bus_dire span{
display: inline-block;

}

table.bus_dire td{
	width:20%;
	height:27.5px;
}

table.bus_dire_hour{
  float: left;
  table-layout: fixed;
	border:none;	
	display: inline-block;
	width: 8%;

	margin-left: 0;
	margin-right: 0;
}


table.bus_dire_hour tr{
	width: 100%;
}
table.bus_dire_hour td,th{
	height:27.5px;
  width: 7%;
}
@keyframes next-bus {
	0%,20%,80%,100% { 
		outline-color: var(--main-color);
	}
	50% { 
		outline-color:var(--main-color-alpha); 		
	}
}
/* PC用 */
@media screen and (min-width:551px){
  .box{
    width: 75%;
    margin: 5% auto;
    padding-bottom: 50px;
    color: var(--black-color);
  }
}
/* スマホ用 */
@media screen and (max-width:550px){
  .box{
    width: 94%;
    margin: 5% auto;

    color: var(--black-color);
  }
}

table.bus_dire tr:nth-child(even) td{	
	background-color:rgba(0,0,0,0);
}
table.bus_dire tr:nth-child(odd) td{
	background-color:var(--sub-color);
}
table.bus_dire td.next_bus{
	animation: next-bus 5s infinite !important;
	outline: 5px solid;
	  outline-offset: -5px;
}

table.bus_dire_hour tr:nth-child(odd) td{
	background-color:rgba(0,0,0,0);
}
table.bus_dire_hour tr:nth-child(even) td{
	background-color:rgba(0,0,0,0.1);
}

table.train_dire tr:nth-child(even) td{	
	background-color:rgba(0,0,0,0);
}
table.train_dire tr:nth-child(odd) td{
	background-color:var(--sub-color);
}
table.train_dire td.next_bus{
	animation: next-bus 5s infinite !important;
	outline: 5px solid;
	outline-offset: -5px;
}
table.train_dire_hour tr:nth-child(odd) td{
	background-color:rgba(0,0,0,0);
}
table.train_dire_hour tr:nth-child(even) td{
	background-color:rgba(0,0,0,0.1);
}


/*タブ*/
#TAB-01:checked ~ #TAB-01-content,
#TAB-02:checked ~ #TAB-02-content
{
    display: block;
}
.tab-wrap {
    display: flex;
    flex-wrap: wrap;
    margin:20px 0;
}
.tab-wrap:after {
    content: '';
    width: 100%;
    height: 3px;
    background: rgba(113,189,189,0.60);
    display: block;
    order: -1;
  }
.tab-label {
    color: White;
    background: LightGray;
    font-weight: bold;
    /*text-shadow: 0 -1px 0 rgba(0,0,0,.2);*/
    white-space: nowrap;
    text-align: center;
    padding: 10px;
    order: -1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    flex: 30%;
}
.tab-label:not(:last-of-type) {
    margin-right: 5px;
  }
.tab-content {
    width: 100%;
    height: 0;
    margin: 1% auto;
    overflow: hidden;
    opacity: 0;
    font-size: 15px;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
    background: rgba(113,189,189,0.60);
  }
.tab-switch:checked+.tab-label+.tab-content {
    height: auto;
    opacity: 1;
    transition: .5s opacity;
    /*box-shadow: 0 0 3px rgba(0,0,0,.2);*/
}
/* ラジオボタン非表示 */
.tab-switch {
    display: none;
}