/* 最新ニュース、進路図、… */
.tabBox {
  margin-bottom: 30px;
}

.tabBox .tab:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.tabBox ul.tab {
  margin: 0 auto 32px;
}

.tabBox ul.tab li {
  float: left;
  border: 2px solid #333;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  -ms-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.tabBox ul.tab li:not(:first-child) {
  border-left: none;
}

.tabBox ul.tab li.active {
  background-color: #333;
  color: #fff;
  position: relative;
  -webkit-transition:background-color 0.2s;
  -moz-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  -ms-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.tab_content > *{
    overflow: hidden;
}

/*スマホ*/
@media screen and (max-width: 599px){



    /* 最新ニュース、進路図、… */
    .tabBox ul.tab li {
      position: relative;
      height: 4em;
      width: 50%;
      margin-bottom: 0;
    }

    .tabBox ul.tab li span {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: center;
    }


    .tabBox ul.tab li{
      border: none;
      border-bottom: 2px solid #333;
    }

    .tabBox ul.tab li:nth-child(-n+2){
      border-top: 2px solid #333;
    }

    .tabBox ul.tab li:nth-child(odd) {
      border-left: 2px solid #333;
      border-right: 2px solid #333;
    }
    .tabBox ul.tab li:nth-child(even) {
      border-right: 2px solid #333;
    }

}
/*PC*/
@media screen and (min-width: 600px){

    .tabBox {
      margin-bottom: 60px;
    }
    .tabBox .tab {
        opacity: 0;
    }

    /* 最新ニュース、進路図、… */
    .tabBox .tab.tab-len-6{
        opacity: 1;
    }
    .tabBox .tab.tab-len-6 li {

      width: 16.6666%;

    }

    .tabBox .tab.tab-len-5{
        opacity: 1;
    }
    .tabBox .tab.tab-len-5 li {

      width: 20%;

    }

    .tabBox .tab.tab-len-4{
        opacity: 1;
    }
    .tabBox .tab.tab-len-4 li {

      width: 25%;

    }

    .tabBox .tab.tab-len-3{
        opacity: 1;
    }
    .tabBox .tab.tab-len-3 li {

      width: 33.3333%;

    }

    .tabBox .tab.tab-len-2{
        opacity: 1;
    }
    .tabBox .tab.tab-len-2 li {

      width: 50%;

    }

    .tabBox .tab.tab-len-1{
        opacity: 1;
    }

    .tabBox ul.tab li {
        font-size: 130%;
    }
    .tabMonthly li a {
        padding: 12px 20px;
    }

    .tabBox ul.tab li {
        line-height: 3em;
    }

    .tabBox ul.tab li:hover {
        background-color: #333;
        color: #fff;
    }

    .tabBox ul.tab li.active:after {
          content: "";
          display: block;
          position: absolute;
          bottom: -15px;
          left: 50%;
          margin-left: -25px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 15px 25px 0;
          border-color: #333 transparent transparent;
    }


}