@charset "utf-8";

/* box-romancecar-timetable
---------------------------------------------------------- */
.box-romancecar-timetable {
  width: 1080px;
  margin: 14px auto 0;
}
  .txt-timetable-date {
    margin-bottom: 70px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    text-align: right;
    letter-spacing: 0.045em;
  }
  .txt-timetable-new-timetable {
    margin-bottom: 70px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    text-align: left;
    letter-spacing: 0.045em;
  }
  .txt-timetable-new-timetable a {
    color: #df3232;
  }  

/* 2020ダイヤ改正2nd */
.txt-trans-search-01 {
  margin: 20px 90px 20px;
  line-height: 1.5;
  letter-spacing: -0.03em;
  text-align: center;
  padding:10px;
  border: solid 0.5px #dddddd;
  color: #ff0000;
}

.txt-trans-search-01 .odawara{
  width:50%;
  text-align:center;
     float:left;
}

.txt-trans-search-01 .odawara p,
.txt-trans-search-01 .shinjuku p{
  text-align:center;
  color:#333333;
  font-size:20px;
}
.txt-trans-search-01 .shinjuku{
  width:50%;
  text-align:center;
    float:right;
}

.txt-trans-search-01 .odawara a,
.txt-trans-search-01 .shinjuku a{
    margin:10px 20px;}

.txt-trans-search-01 .clearfix:after{
	content: "";
	clear: both;
	display: block;
}

/* box-tab-button */
.box-tab-button {
  position: relative;
  display: -ms-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 50px;
}
  .box-tab-button .col-01,
  .box-tab-button .col-02 {
    flex: 0 0 490px;
  }
    .box-tab-button .title {
      margin-bottom: 14px;
      font-family: 'Oswald', sans-serif;
      font-size: 28px;
      text-align: center;
      letter-spacing: 0.07em;
    }
    .box-tab-button .list {
      display: -ms-flex;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
      .box-tab-button .list .item {
        flex: 0 0 240px;
      }
        .box-tab-button .list .item .link {
          display: -ms-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          width: 100%;
          height: 80px;
          padding-bottom: 3px;
          background-color: #eee;
          -webkit-border-radius: 3px 3px 0 0;
          -moz-border-radius: 3px 3px 0 0;
          border-radius: 3px 3px 0 0;
          font-family: 'Oswald', sans-serif;
          font-size: 18px;
          text-align: center;
          line-height: 1.2;
          letter-spacing: 0.03em;
          -webkit-transition: all 0.2s ease 0s;
          transition: all 0.2s ease 0s;
          color: #666;
        }
          .box-tab-button .list .item .link:hover,
          .box-tab-button .list .item .link:focus {
            text-decoration: none;
          }
          .box-tab-button .list .item .link:after {
            content: '';
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 10px;
            background-color: #004ea2;
          }
          .box-tab-button .list .item .link.is-active {
            color: #fff;
          }
          .box-tab-button .list .item .link.blue.is-active {
            background-color: #004ea2;
          }
          .box-tab-button .list .item .link.red.is-active {
            background-color: #da4c3e;
          }
          .box-tab-button .col-01 .list .item:first-child .link.blue.is-active:after {
            background-color: #004ea2;
            z-index: 1;
          }
          .box-tab-button .col-01 .list .item:last-child .link.red.is-active:after {
            background-color: #da4c3e;
            z-index: 2;
          }
          .box-tab-button .col-02 .list .item:first-child .link.blue.is-active:after {
            background-color: #004ea2;
            z-index: 3;
          }
          .box-tab-button .col-02 .list .item:last-child .link.red.is-active:after {
            background-color: #da4c3e;
            z-index: 4;
          }
          
  /* box-tab */
  .box-tab-wrap {
    margin-bottom: 52px;
  }
    .box-tab {
      display: none;
    }


@media screen and (max-width: 768px) {
.box-romancecar-timetable {
  width: 100%;
  padding: 0 15px;
  margin: 6px auto 0;
}
  .txt-timetable-date {
    margin-bottom: 12px;
    font-size: 10px;
  }
  .txt-timetable-new-timetable {
    margin-bottom: 12px;
    font-size: 10px;
  }  
    
/* 2020ダイヤ改正2nd mobile */
 .txt-trans-search-01 {
  margin: 15px 15px 15px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  text-align: center;
  padding: 5px;
  border: solid 0.5px #dddddd;
  color: #ff0000;
}
 .txt-trans-search-01 .odawara{
     width:100%;}
    
 .txt-trans-search-01 .odawara a{
     margin:3px;
 display:block;
 text-decoration: underline}
    
 .txt-trans-search-01 .shinjuku{
     width:100%;}
    
 .txt-trans-search-01 .shinjuku a{
     margin:3px;
  display:block;
  text-decoration: underline}

    
    
    
/* box-tab-button */
.box-tab-button {
  display: block;
  margin-bottom: 21px;
}
  .box-tab-button .col-01,
  .box-tab-button .col-02 {
    flex: 0 0 100%;
    margin-bottom: 15px;
  }
    .box-tab-button .title {
      margin-bottom: 7px;
      font-size: 15px;
      letter-spacing: 0.07em;
    }
    .box-tab-button .list {
      margin: 0 -8px 0 -7px;
    }
      .box-tab-button .list .item {
        flex: 0 0 50%;
        padding: 0 7px 0 8px;
      }
        .box-tab-button .list .item .link {
          height: 40px;
          padding-bottom: 0;
          -webkit-border-radius: 2px;
          -moz-border-radius: 2px;
          border-radius: 2px;
          font-size: 12px;
          color: #fff;
        }
          .box-tab-button .list .item .link:after {
            display: none;
          }
          .box-tab-button .list .item .link.blue {
            background-color: #004ea2;
          }
          .box-tab-button .list .item .link.red {
            background-color: #da4c3e;
          }
          
  /* box-tab */
  .box-tab-wrap {
    margin-bottom: 30px;
  }
      .box-tab .image img {
        width: 100%;
      }

}