@charset "utf-8";

#wrapper{
  font-family: 'Roboto', sans-serif;
}
.table-pc-scroll{
  white-space:normal;
}
/* ========================================================
top
======================================================== */
/* .mv-slider
----------------------- */
.mv-slider{
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  position: relative;
  opacity: 0;
  height: 330px;
}
.mv-slider .slick-list{
  padding: 0 !important;
  overflow:visible;
}
.mv-slider .slick-list::after{
  content: "";
  display: block;
  width: 100vw;
  height: 330px;
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 908px;
}
.mv-slider .slick-slide {
  overflow: hidden;
  -webkit-transition:all 0.25s ease-in-out;
  transition:all 0.25s ease-in-out;
  width: 100%;
  border-radius: 16px;
}
.mv-slider .slick-slide:not(.slick-center) {
  -webkit-transform: scale(.94);
  -moz-transform: scale(.94);
  -ms-transform: scale(.94);
  -o-transform: scale(.94);
  transform: scale(.94);
}
.mv-slider .slick-slide a{
  display: block;
}
.mv-slider .slick-slide img{
  width: 100%;
  height: auto;
}
.mv-slider .slick-dots{
  position: absolute;
  top: 288px;
  right: 70px;
}
.mv-slider .slick-dots li{
  display: inline-block;
  position: relative;
}
.mv-slider .slick-dots li button{
  font-size: 0;
  line-height: 0;
  border: none;
  padding: 0;
  position: relative;
  z-index: 5;
  cursor: pointer;
  background-color: #DEDEDE;
  border-radius: 9999px;
  margin: 0 6px;
  width: 8px;
  height: 8px;
}
.mv-slider .slick-dots li.slick-active button{
  background-color: #38ACB5;
}
.mv-slider .slick-dots li div{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode:multiply;
  width: 16px;
  height: 16px;
}
.mv-slider .slick-dots li div::before,
.mv-slider .slick-dots li div::after{
  position: absolute;
  content: "";
  display: block;
}
.mv-slider .slick-dots li div::before{
  width: 16px;
  height: 16px;
  left: 0;
  top: 0;
  clip-path: circle();
}
.mv-slider .slick-dots li.slick-active div::before{
  background-image: conic-gradient(black 0deg, white 0deg);
  animation-name: loadingCircle;
  animation-fill-mode:forwards;
  animation-duration:4s;
  animation-delay: 0.5s;
}
.mv-slider .slick-dots.stop li div::before{
  display: none;
}
.mv-slider .slick-dots li div::after{
  width: 14px;
  height: 14px;
  left: 1px;
  top: 1px;
  background-color: white;
  clip-path: circle();
}
.mv-slider__bt{
  position: absolute;
  right: 25px;
  bottom: 22px;
}
.mv-slider__bt a{
  display: block;
  border-radius: 9999px;
  box-shadow: 0px 0px 6px #114B505C;
  width: 32px;
  height: 32px;
}
.mv-slider__bt.mv-slider__bt__start a{
  background: url("../../image/common/ic_play.svg") 60% center #333333 no-repeat;
  -moz-background-size: 30% auto;
  background-size: 30% auto;
}
.mv-slider__bt.mv-slider__bt__stop a{
  background: url("../../image/common/ic_stop.svg") center center #333333 no-repeat;
  -moz-background-size: 25% auto;
  background-size: 25% auto;
}
@media screen and (max-width: 767px){
  .mv-slider{
    height: 47.4vw;
    padding: 0;
    margin: 0 -4.2vw;
  }
  .mv-slider .slick-list::after{display: none;}
  .mv-slider .slick-slide {
    border-radius: 0;
  }
  .mv-slider .slick-slide:not(.slick-center) {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    box-shadow: 0px 0px 5vw #114B501F;
  }
  .mv-slider .slick-dots{
    top: 41.2vw;
    right: calc(50% + 5vw);
    transform: translate(50%, 0);
  }
  .mv-slider .slick-dots li button{
    margin: 0 1.6vw;
    width: 2.1vw;
    height: 2.1vw;
  }
  .mv-slider .slick-dots li div{
    width: 4.6vw;
    height: 4.6vw;
  }
  .mv-slider .slick-dots li div::before{
    width: 4.6vw;
    height: 4.6vw;
  }
  .mv-slider .slick-dots li div::after{
    width: 4vw;
    height: 4vw;
    left: 0.3vw;
    top: 0.3vw;
  }
  .mv-slider__bt{
    right: 33vw;
    bottom: 1vw;
  }
  .mv-slider__bt a{
    width: 8.5vw;
    height: 8.5vw;
  }
}

/* .global-info
----------------------- */
.global-info{
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
}
.global-info__status,
.global-info__notice{
  width: calc((100% - 20px) / 2);
}
.global-info__status h2,
.global-info__notice h2{
  background-color: #38ACB5;
  color: #fff;
  padding: 0.5em 1em 0.3em;
  font-size: 18px;
  border-radius: 16px 16px 0 0;
}
.global-info__status h2 .icon-inline{
  margin-right: 0.5em;
}
.global-info__link{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.global-info__link:last-child{
  border-radius: 0 0 16px 16px;
}
.global-info__status .global-info__link{
  border: solid 2px #38ACB5;
  border-top:none;
  background-color: #fff;
}
.global-info__notice .global-info__link{
  border: solid 2px #F0F0F0;
  border-top:none;
  background-color: #F0F0F0;
}
.global-info__link:not(:last-of-type){
  border-bottom:none;
}
.global-info__link a{
  display: block;
  position: relative;
  color: #38ACB5;
  padding: 0.5em 3em 0.3em 1em;
}
.global-info__link a .icon-arrow{
  position: absolute;
  right: 1em;
  top: calc(50% - 0.5em);
}
@media screen and (max-width: 767px){
  .global-info{
    margin-top: 0.6vw;
  }
  .global-info__status,
  .global-info__notice{
    width: 100%;
    display:flex;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 28.8vw;
    margin-top: 2.6vw;
    position: relative;
  }
  .global-info__status h2,
  .global-info__notice h2{
    padding: 0;
    border-radius: 3.2vw 0 0 3.2vw;
    width: 28.8vw;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 3.2vw;
    display:flex;
    justify-content: center;
    align-items: center;
  }
  .global-info__link{
    font-size: 3.2vw;
    line-height: 1.2em;
    width: 100%;
  }
  h2 + .global-info__link{
    border-radius: 0 3.2vw 0 0;
  }
  .global-info__link:last-child{
    border-radius: 0 0 3.2vw 0;
  }
  h2 + .global-info__link:last-child{
    border-radius: 0 3.2vw 3.2vw 0;
  }
  .global-info__status .global-info__link{
    border: solid 2px #38ACB5;
    border-left:none;
  }
  .global-info__link a{
    padding: 0.5em 3em 0.3em 1em;
  }
}

/* .global-subbnr
----------------------- */
.global-subbnr{
  display: flex;
  width: 100%;
  font-size: 0;
  line-height: 0;
  gap: 20px;
  margin-top: 60px;
}
.global-subbnr li{
  width: calc((100% - 20px) / 2);
}
.global-subbnr li:first-child:last-child{
  width: 100%;
}
.global-subbnr a{
  display: block;
}
.global-subbnr a .image{
  width: 100%;
}
@media screen and (max-width: 767px){
  .global-subbnr{
    margin-top: 3.2vw;
  }
  .global-subbnr li{
    margin-top: 2.6vw;
    width: 100%;
  }
}

/* .global-routemap
----------------------- */
.global-routemap{
  border-radius: 1em;
  overflow: hidden;
}
.global-routemap__link a{
  text-align: center;
  color: #fff;
  display: block;
  padding: 1em;
  background-color: #333333;
}
@media screen and (max-width: 767px){
}

/* .global-bgboxlink
----------------------- */
.global-bgboxlink{
  padding: 0;
}
.global-bgboxlink a{
  position: relative;
  display: block;
  padding: 1.2em;
  font-weight: bold;
  color: #38ACB5;
}
.global-bgboxlink a .icon-arrow,
.global-bgboxlink a .icon-pdf{
  position: absolute;
  right: 1.2em;
  top: calc(50% - 0.5em);
}
@media screen and (max-width: 767px){
}

/* .global-bnrlink
----------------------- */
.global-bnrlink{
  margin-top: 80px;
  line-height: 0;
  font-size: 0;
    display:flex;
    -ms-flex-pack:distribute;
    flex-wrap: wrap;
  gap: 16px;
}
.global-bnrlink li{
  display: inline-block;
  vertical-align: top;
  width: calc((100% - 48px) / 4);
}
.global-bnrlink li a{
  display: block;
}
.global-bnrlink li a img{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px){
  .global-bnrlink{
    margin-top: 16vw;
    gap: 2vw;
  }
  .global-bnrlink li{
    width: calc((100% - 4vw) / 3);
  }
}

/* ========================================================
map
======================================================== */
/* .map-content
----------------------- */
.map-content{
      display:flex;
    -ms-flex-pack:distribute;
    flex-direction: column;
    flex-wrap: wrap;
}
/* .zoom-bt
----------------------- */
@media screen and (min-width: 768px){
  .zoom-bt{
    background-color: #F0F0F0;
    border-radius: 10px;
    padding: 10px;
    width: 200px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin-left: auto;
    margin-top: -56px;
  }
  .zoom-bt__title{
    font-weight: bold;
    color: #38ACB5;
    display: inline-block;
    vertical-align: middle;
    background:url("../../image/common/ic_zoom_gr.svg") left center no-repeat;
    -moz-background-size: auto 100%;
    background-size: auto 100%;
    line-height: 26px;
    padding-top: 7px;
    padding-left: 40px;
    padding-bottom: 3px;
  }
  .zoom-bt__minus,.zoom-bt__plus{
    display: inline-block;
    vertical-align: middle;
    background-color: #38ACB5;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    position: absolute;
    cursor: pointer;
    top: 10px;
  }
  .zoom-bt__minus{
    right: 56px;
  }
  .zoom-bt__plus{
    right: 10px;
  }
  .zoom-bt__minus::before,.zoom-bt__plus::before,.zoom-bt__plus::after{
    content: "";
    display: block;
    width: 16px;
    height: 4px;
    background-color: #fff;
    border-radius: 9999px;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 2px);
  }
  .zoom-bt__plus::after{
    transform: rotate(90deg);
  }
}
@media screen and (max-width: 767px){
  .zoom-bt{display: none;}
}
/* .map-wrap
----------------------- */
.map-wrap{
  position: relative;
  width: 100%;
  overflow: hidden;
  text-align: center;
  cursor: move;
}
.map-wrap__loading{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.dir-guide{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
@media screen and (min-width: 768px){
  .map-wrap{
    height: 460px;
    order: -1;
    margin-top: 20px;
    border: 5px solid #ccc;
  }
}
@media screen and (max-width: 767px){
  .map-wrap{
    height: 60vw;
    border: 0.5vw solid #ccc;
  }
}

/* .controller-bt
----------------------- */
.controller-bt{
    display:flex;
    -ms-flex-pack:distribute;
    flex-wrap: wrap;
}
.controller-bt li{
  cursor: pointer;
  display:flex;
  align-items: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
    padding: 0.5em 1em;
    line-height: 1.2em;
    min-height: 4.4em;
}
.controller-bt li.active{color: #fff;font-weight: bold;}
.controller-bt li#btn01{border: solid 1px #C76865;}
.controller-bt li#btn02{border: solid 1px #E45883;}
.controller-bt li#btn03{border: solid 1px #5B0EF5;}
.controller-bt li#btn04{border: solid 1px #459BDC;}
.controller-bt li#btn05{border: solid 1px #F09235;}
.controller-bt li#btn06{border: solid 1px #DA6B2A;}
.controller-bt li#btn07{border: solid 1px #3D8A38;}
.controller-bt li#btn08{border: solid 1px #587324;}
.controller-bt li#btn09{border: solid 1px #173D9F;}
.controller-bt li#btn10{border: solid 1px #664112;}
.controller-bt li#btn11{border: solid 1px #3981A1;}
.controller-bt li.active#btn01{background-color: #C76865;}
.controller-bt li.active#btn02{background-color: #E45883;}
.controller-bt li.active#btn03{background-color: #5B0EF5;}
.controller-bt li.active#btn04{background-color: #459BDC;}
.controller-bt li.active#btn05{background-color: #F09235;}
.controller-bt li.active#btn06{background-color: #DA6B2A;}
.controller-bt li.active#btn07{background-color: #3D8A38;}
.controller-bt li.active#btn08{background-color: #587324;}
.controller-bt li.active#btn09{background-color: #173D9F;}
.controller-bt li.active#btn10{background-color: #664112;}
.controller-bt li.active#btn11{background-color: #3981A1;}
@media screen and (min-width: 768px){
  .controller-bt{
    margin: 0 -5px;
  }
  .controller-bt li{
    width: calc((100% - 40px) / 4);
    margin: 10px 5px 0;
    border-radius: 10px;
  }
}
@media screen and (max-width: 767px){
  .controller-bt{
    margin: 0 -1vw;
  }
  .controller-bt li{
    width: calc((100% - 4vw) / 2);
    margin: 2vw 1vw 0;
    border-radius: 2vw;
  }
}
/* global-train
----------------------- */
.global-train__list{display: none;}
.global-train__slider .slick-slide{
  padding: 0 6px;
}
.global-train__slider .slick-slide .image{
  width: 100%;
}
.global-train__slider .slick-dots{
  text-align: right;
}
.global-train__slider .slick-dots li{
  display: inline-block;
  margin: 0 6px;
}
.global-train__slider .slick-dots > li:only-child{display: none;}
.global-train__slider .slick-dots li button{
  border-radius: 9999px;
  font-size: 0;
  line-height: 0;
  border: none;
  background-color: #DEDEDE;
  padding: 0;
  width: 12px;
  height: 12px;
}
.global-train__slider .slick-dots li.slick-active button{
  background-color: #38ACB5;
}
@media screen and (max-width: 767px){
  .global-train__slider .slick-slide{
    padding: 0;
  }
  .global-train__slider .slick-dots{
    position: absolute;
    right: 3.3vw;
    bottom: 4.8vw;
  }
  .global-train__slider .slick-dots li{
    margin: 0 1.5vw;
  }
  .global-train__slider .slick-dots li button{
    width: 2vw;
    height: 2vw;
  }
}

/* ========================================================
timetable_gare
======================================================== */
.table-pc-scroll::after{
  background:url("../../image/global/common/ic_scroll.png") no-repeat;
}
.table-sp-scroll::after{
  background:url("../../image/global/common/ic_scroll.png") no-repeat;
  -moz-background-size: 100% auto;
  background-size: 100% auto;
}
/* .table-timetable
----------------------- */
.table-timetable{
  width: 100%;
  border-left: solid 1px #DEDEDE;
  border-bottom: solid 1px #DEDEDE;
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.3em;
}
.table-timetable td{
  border-right: solid 1px #DEDEDE;
  border-top: solid 1px #DEDEDE;
  vertical-align: middle;
  padding: 0.5em;
}
.table-timetable td.station{
  color: #fff;
  height: 3em;
  word-break: break-word;
  background-color: #38ACB5;
}
.table-timetable td.station span{display: none;}
.table-timetable-en td.station span.lang-en{display: block;}
.table-timetable-cin td.station span.lang-cin{display: block;}
.table-timetable-tw td.station span.lang-tw{display: block;}
.table-timetable-korea td.station span.lang-korea{display: block;}
@media screen and (max-width: 767px){
  .table-timetable{
    margin-top: 5.3vw;
    font-size: 3.7vw;
  }
}

/* ========================================================
infoArea__table
======================================================== */
.infoArea__image{
  margin-top: 20px;
}
.infoArea__table{
  border-left: solid 1px #DEDEDE;
  border-top: solid 1px #DEDEDE;
  width: 100%;
  margin-top: 20px;
}
.infoArea__table a{
  text-decoration: underline;
  color: #38ACB5;
}
.infoArea__table a:hover{
  text-decoration: none;
}
.infoArea__table th,
.infoArea__table td{
  border-right: solid 1px #DEDEDE;
  border-bottom: solid 1px #DEDEDE;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.5em 0.8em;
  vertical-align: middle;
}
.infoArea__table thead th{
  text-align: center;
  font-weight: bold;
  color: #fff;
  background-color: #38ACB5;
}
.infoArea__table tbody th{
  font-weight: bold;
  background-color: #EDF6F7;
  word-break: keep-all;
}
.infoArea__table tbody td{
  width: 100%;
}
@media screen and (max-width:767px){
  .infoArea__image{
    margin-top: 4vw;
  }
  .infoArea__table{
    margin-top: 5.3vw;
  }
  .infoArea__table th,
  .infoArea__table td{
    padding: 0.5em;
  }
}

/* ========================================================
operation/index
======================================================== */
.operation-indexlist{
  padding-top: 2em;
}
.operation-indexlist li{
  margin: 1em auto 0;
  width: 50%;
}
ul.bt-set.aline-center.operation-indexlist a{
  text-align: center;
  padding: 2.1em 3em 2.1em 3em;
}
@media screen and (max-width: 767px){
  .operation-indexlist li{
    width: 100%;
  }
}

@keyframes loadingCircle{
  0% {background-image: conic-gradient(black 0deg, white 0deg);}
  2.5% {background-image: conic-gradient(black 9deg, white 9deg);}
  5% {background-image: conic-gradient(black 18deg, white 18deg);}
  7.5% {background-image: conic-gradient(black 27deg, white 27deg);}
  10% {background-image: conic-gradient(black 36deg, white 36deg);}
  12.5% {background-image: conic-gradient(black 45deg, white 45deg);}
  15% {background-image: conic-gradient(black 54deg, white 54deg);}
  17.5% {background-image: conic-gradient(black 63deg, white 63deg);}
  20% {background-image: conic-gradient(black 72deg, white 72deg);}
  22.5% {background-image: conic-gradient(black 81deg, white 81deg);}
  25% {background-image: conic-gradient(black 90deg, white 90deg);}
  27.5% {background-image: conic-gradient(black 99deg, white 99deg);}
  30% {background-image: conic-gradient(black 108deg, white 108deg);}
  32.5% {background-image: conic-gradient(black 117deg, white 117deg);}
  35% {background-image: conic-gradient(black 126deg, white 126deg);}
  37.5% {background-image: conic-gradient(black 135deg, white 135deg);}
  40% {background-image: conic-gradient(black 144deg, white 144deg);}
  42.5% {background-image: conic-gradient(black 153deg, white 153deg);}
  45% {background-image: conic-gradient(black 162deg, white 162deg);}
  47.5% {background-image: conic-gradient(black 171deg, white 171deg);}
  50% {background-image: conic-gradient(black 180deg, white 180deg);}
  52.5% {background-image: conic-gradient(black 189deg, white 189deg);}
  55% {background-image: conic-gradient(black 198deg, white 198deg);}
  57.5% {background-image: conic-gradient(black 207deg, white 9deg);}
  60% {background-image: conic-gradient(black 216deg, white 216deg);}
  62.5% {background-image: conic-gradient(black 225deg, white 225deg);}
  65% {background-image: conic-gradient(black 234deg, white 234deg);}
  67.5% {background-image: conic-gradient(black 243deg, white 243deg);}
  70% {background-image: conic-gradient(black 252deg, white 252deg);}
  72.5% {background-image: conic-gradient(black 261deg, white 261deg);}
  75% {background-image: conic-gradient(black 270deg, white 270deg);}
  77.5% {background-image: conic-gradient(black 279deg, white 279deg);}
  80% {background-image: conic-gradient(black 288deg, white 288deg);}
  82.5% {background-image: conic-gradient(black 297deg, white 297deg);}
  85% {background-image: conic-gradient(black 306deg, white 306deg);}
  87.5% {background-image: conic-gradient(black 315deg, white 315deg);}
  90% {background-image: conic-gradient(black 324deg, white 324deg);}
  92.5% {background-image: conic-gradient(black 333deg, white 333deg);}
  95% {background-image: conic-gradient(black 342deg, white 342deg);}
  97.5% {background-image: conic-gradient(black 351deg, white 351deg);}
  100% {background-image: conic-gradient(black 360deg, white 360deg);}
}