@charset "UTF-8";
body{
  /*background: #faf8f5 url(../img/common/bg.jpg);*/
  background: #fff;
  margin: 0;
  /*font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
  box-sizing: border-box;
  font-family: Lato, YuGothic, "Yu Gothic", "游ゴシック", "游ゴシック体", sans-serif;
  font-size: 1.1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  letter-spacing: 0.03em;
  letter-spacing: 2px;
}

a{
  color: #333333;
  letter-spacing: 2px;
}

a:hover{
  color: #666666;
  text-decoration: underline;
}

.mincho{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

p{
  line-height: 2em;
  font-size: 0.9em;
  letter-spacing: 1.6px;
}

img{
  max-width: 100%;height: auto;border:0;
}

.mg{
  cursor: pointer;
  max-width: 500px;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}

.mg a img{
  height: auto;
  transition: transform .6s ease;
}

.mg a:hover img {
  transform: scale(1.1); /* 拡大 */
}

.show{
	transition: all 1.5s;
	opacity: 0.9;
}

.hide{
	transition: all 1.5s;
	opacity: 0;
  transform:translate(0px,-20px);
}

.showm{
	transition: all 0.5s;
	opacity: 1;
  display: block;
}

.hidem{
	transition: all 0.5s;
	opacity: 0;
  display: none;
}

.inner{
  padding: 0 10px;
}

a img:hover {opacity: 0.7;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);-khtml-opacity: 0.7;-moz-opacity: 0.7;}
a.noopa img:hover {opacity: 1.0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-khtml-opacity: 1.0;-moz-opacity: 1.0;}

.alrigt{
  text-align: right;
}

.alleft{
  text-align: left;
}

.alcent{
  text-align: center;
}

h2{
  font-size: 2em;
  letter-spacing: 8px;
  font-weight: bold;
}

h3{
  font-weight: normal;
  font-size: 1.3em;
  padding: 20px 0 30px 0;
}

.bd{
  font-weight: bold;
}

header{
  padding: 10px 0;
  position: fixed;
  /*background: #faf8f5 url(../img/common/bg.jpg);*/
  background: #fff;
  width: 100%;
  opacity: 0;
  z-index: 1000;
}

header .inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

header .inner a{
  font-size: 0.9em;
}

header .inner .menus{
  padding: 20px 0 0 0;
}

header .inner span{
  padding: 0 20px 0 0;
}

header h1, header .h1{
  margin: 0;
  padding: 0;
  color: #666;
  letter-spacing: 1px;
}

header #umenu{
  display: inline;
}

#maintex{
  padding-top: 40px;
  margin-bottom: -380px;
  display: none;
}

#maintex .inner{
  max-width: 1200px;
  margin: 0 auto;
}

#maintex img{
  padding-top: 80px;
  opacity: 0.8;
  margin: 0 0 0 auto;
}

#mainimage .inner{
  max-width: 2000px;
  margin: 0 auto;
  position: relative;
}

#mainimage .matex{
  position: absolute;
  bottom: 20px;
  right: 20px;
  text-align: center;
  font-size: 0.6em;
  background: #FFF;
  opacity: 80%;
  padding: 10px 20px;
  border-radius: 10px;
}

#mainimage .matex span{
  font-size: 1.4em;
}

#toptit{
  margin-left: 60px;
}

.maintit{
  margin: 40px 0;
  text-align: center;
  font-weight: 600;
  background : url(mtit_bg.png) center center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: contain;
}

.maintit .m1{
  color: #444;
  font-size: 1.6em;
  letter-spacing: 6px;
  padding: 40px 30px 0 30px;
}

.maintit .m2{
  font-weight: normal;
  font-size: 0.6em;
}

.nbg{
  background: none;
}

.subtit{
  margin: 40px 0;
  text-align: center;
}

.subtit span{
  color: #444;
  font-size: 1.5em;
  letter-spacing: 4px;
  background: #fff;
  padding: 20px 30px;
  font-weight: 600;
}

#sec01{
  margin-top: 0px;
  z-index: 1;
}

#midmap{
  position: relative;
  background : url(map_bg.png) center center / auto auto repeat scroll padding-box border-box transparent;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 0px;
  opacity: 90%;
}

.routepage #midmap{
  margin-top: 20px;
}

#midmap .midmapbtn{
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  opacity: 90%;
}

#midmap .midmapbtn a{
  display: block;
  width: 44px;
  height: 44px;
  margin-top: 2px;
  margin-left: 2px;
  border: 1.2px solid #AAA;
  border-radius: 50%;
  line-height:42px;
  text-align: center;
  cursor: pointer;
  font-size: 1.2em;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#midmap .midmapbtn a:hover{
  border: 1.2px solid #FFF;
  background: #ffe600;
  color: #FFF
;
}

#midmap .thispage{
  width: 44px;
  height: 44px;
  margin-top: 2px;
  margin-left: 2px;
  border-radius: 50%;
  line-height:42px;
  text-align: center;
  font-size: 1.2em;
  background: #ffd000;
  color: #FFF;
}

#midmap #bn01{
  top: 10%;
  left: 80%;
}

#midmap #bn02{
  top: 54%;
  left: 50%;
}

#midmap #bn03{
  top: 70%;
  left: 8%;
}

#midmap #bn04{
  top: 38%;
  left: 20%;
}

#midmap #bn05{
  top: 22%;
  left: 66%;
}

#midmap #bn06{
  top: 38%;
  left: 58%;
}

#midmap #bn07{
  top: 72%;
  left: 26%;
}

#midmap #bn08{
  top: 32%;
  left: 76%;
}

#midmap #bn09{
  top: 52%;
  left: 70%;
}

#midmap #bn10{
  top: 14%;
  left: 50%;
}

#midmap #bn12{
  top: 22%;
  left: 88%;
}

#midmap #bn13{
  top: 85%;
  left: 1%;
}

#midmap #bn14{
  top: 84%;
  left: 16%;
}

#midmap #bn15{
  top: 60%;
  left: 30%;
}

.section{
  padding: 0 0 30px 0;
}
.section .inner{
  max-width: 1200px;
  margin: 0 auto;
}

.ip{
  max-width: 1200px;
  margin: 0 auto;
}

#sec02{
  font-size: 0.9em;
  padding-top: 40px;
}

#sec02 .row{
  margin-bottom: 30px;
}
#sec02 .thumbs{
  background: #fff;
  padding: 10px 10px 16px 10px;
}

#sec02 .num{
  font-size: 1.2em;
  padding: 0 8px 0 4px;
}

#sec02 .tit{
  font-size: 1.1em;
  letter-spacing: 1.2px;
  padding: 6px 0 2px 0;
  text-align: center;
  font-weight: bold;
}
 
#sec02 .cat{
  font-size: 0.9em;
  font-weight: bold;
  letter-spacing: 3px;
  margin-left: 8px;
  padding: 0px 8px 4px 8px;
  text-align: center;
}

#sec02 .c1{
  /*background: url(../img/top/tab_bg_01.png);*/
  background-repeat: no-repeat;
  background-size: contain;
}

#sec02 .c2{
  /*background: url(../img/top/tab_bg_02.png);*/
  background-repeat: no-repeat;
  background-size: contain;
}

#sec02 .c3{
  /*background: url(../img/top/tab_bg_03.png);*/
  background-repeat: no-repeat;
  background-size: contain;
}

#sec02 .btns{
  text-align: center;
  padding-top: 10px;
  font-size: 0.8em;
}

#sec02 .btns a{
  background: #bce5f1;
  padding: 6px 12px;
}

#sec03, .wak{
	padding-top: 40px !important;
  padding-bottom: 40px;
}

#sec04{
  padding-bottom: 80px;
}


#news{
  background: #fff;
  border-radius: 20px;
  border: 1px solid #666;
}

#news a:hover{
  text-decoration: underline;
}

#news .item{
  padding: 20px 10px 20px 40px;
  border-bottom: 1px dotted #666;
}

#news .dec{
  border-bottom: 0px dotted #333;
}

#news .dayori{
  display: none;
}

.newsbtn{
  display: inline-block;
  margin-bottom: -1px;
  margin-left: 20px;
  font-size: 0.9em;
  padding: 5px 10px;
  background: #FFF;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
  border-right: 1px solid #666;
}

.yellow{
  background: rgb(255, 184, 31);
  color: #fff;
  border: 0px;
}

.infotable{
  overflow: auto;
  height: 355px;
}

.wave{
  margin-top: 60px;
  height: 120px;
  background : url(wave.svg) center center / cover no-repeat scroll padding-box border-box transparent;
  opacity: 80%;
}

footer{
  position: fixed;
  left: 0;
  top:0;
  width: 100%;
  padding: 120px 30px 30px 50px;
  opacity: 100%;
  background : url(bg.png) center top / auto auto no-repeat scroll padding-box border-box #ffffff;
  z-index: 999;
}

footer .inner{
  max-width: 1200px;
  margin: 0 auto;
}

footer a{
  color: #333;
}

footer #footerlink{
  font-size: 0.9em;
  line-height: 2.2em;
  padding-bottom: 50px;
}

footer #footerlink a{
  padding-left: 20px;
  background : url(li.png) left center / auto auto no-repeat scroll padding-box border-box transparent;
}

footer a img{
  border: 6px solid #fff;
}


.footbtm{
  padding-top: 60px;
  margin-top: 80px;
}

.copyright{
  padding-bottom: 20px;
}

#banners{
  max-width: 660px;
  margin: 0 0 0 0;
}

#psec00{
  padding: 0 0 0 0;
}

#psec01{
  z-index: 2;
}
#psec01 .roadtit{
  margin: -100px 0 -120px -120px;
  position: relative;
  z-index: 2;
  opacity: 98%;
}

#psec01 .mdesc{
  margin-top: 0px;
  margin-bottom: 50px;
}

#psec01 .descs{
  z-index: 10;
  position: relative;
  margin-top: 20px;
}

#psec01 .buttons{
  text-align: center;
}

#psec01 .buttons img{
  padding-bottom: 4px;
}

#psec01 .descs .title{
  font-size: 1.6em;
  letter-spacing: 6px;
  font-weight: bold;
  padding-bottom: 5px;
  margin-bottom: 10px;
  border-bottom: 1px solid #666;
}

#psec01 .desc{
  font-size: 1.2em;
  font-weight: bold;
  padding: 0 0 30px 0;
}

#psec02 .pic{
  padding: 20px 0 20px 0;
  text-align: center;
  position: relative;
}

#psec02 .pic span{
  position:absolute;
  right: 30px;
  bottom: 0px;
  font-size: 0.7em;
}

#psec02 .stit{
  font-size: 1.5em;
  letter-spacing: 1px;
  padding-bottom: 10px;
}

#psec02 .sdesc{
  max-width: 500px;
  margin: 0 auto;
}
#psec02 .sdesc p{
  font-size: 0.9em;
  padding: 0 10px 0 10px;
}

.cdec{
  padding-bottom: 20px;
}

.slide .inner{
  max-width: 2000px;
  margin: 0 auto;
  position: relative;
}

.slide .inner span{
  position:absolute;
  right: 0px;
  bottom: 0px;
  font-size: 0.7em;
  background: #FFF;
  padding: 4px 10px;
}

.slicks {
  opacity: 0;
}
.slick-initialized {
  opacity: 100;
}

.inpage .section{
  padding: 0 0 40px 0;
  margin-bottom: 80px;
}

.inpage .maintit{
  margin-bottom: 40px;
}

#isec01{
  padding-top: 140px;
}

#isec03 .infotable{
  font-size: 0.9em;
}

#isec03 .infotable a{
  font-size: 1.2em;
}

.stit{
  padding: 0px 20px 10px 0px;
  margin: 10px 0 0px 0;
  background: #FFF;
  display: inline-block;
}
.intit{
  padding: 60px 0 0 0;
}

.intit h2{
  border-bottom: 1px solid;
  margin-bottom: 30px;
}

rect {
  transform-origin: center center;
  scale: 0;
  opacity: 0.8;
}

circle {
  transform-origin: center center;
  opacity: 0.9;
}

#ontrain, #oncar{
  font-size: 1.3em;
  font-weight: bold;
  background: #EEE;
  padding: 10px 0;
  border-radius: 10px;
}

.rte{
  background : url(tline_bg.png) center center / auto auto repeat-y scroll padding-box border-box transparent;
  margin: 20px 0;
}

.rtc{
  background : url(cline_bg.png) center center / auto auto repeat-y scroll padding-box border-box transparent;
  margin: 20px 0;
}

#tf span{
  font-size: 0.8em;
}

.stn{
  display: block;
  width: 50%;
  text-align: center;
  padding: 10px 20px;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 10px;
  margin: 0 auto;
}

.rte .stn{
  background: #f5b848; 
}

.rtc .stn{
  background: #94ce82;
}

.trn{
  display: block;
  padding: 2px 10px;
  background: #FFF;
  font-size: 0.9em;
  text-align: center;
  margin: 5px auto;
  max-width: 240px;
}

.rte .trn{
  border: 2px solid #f5b848;
}

.rtc .trn{
  border: 2px solid #94ce82;
}

.traff{
  text-align: center;
}

.etm{
  font-size: 0.9em;
  padding: 2px 10px;
  margin-left: 20px;
  border: 0px solid #999;
  background: #EEE;
  margin-bottom: 20px;
  border-radius: 10px;
}

.ctit{
  font-size: 1.2em;
  font-weight: bold;
  background: #EEE;
  padding: 10px 20px;
  margin: 0 auto 10px auto;
  border-radius: 10px;
}

.icnseason{
  font-size: 0.9em;
  text-align: center;
  margin-bottom: 20px;
}

.icnseason div{
  display: inline-block;
  width: 16px;
  height: 16px;
  margin:0px 4px 0 0px;
}

.icns{
  display: inline-block;
  width: 24px;
  height: 24px;
  margin:4px 2px 0 0px;
}

.i1{
  border-radius: 50%;
  background: #f095ad;
}

.i2{
  border-radius: 50%;
  background: #81b9ff;
}

.i3{
  border-radius: 50%;
  background: #e29520;
}

.i4{
  border-radius: 50%;
  background: #3d3f8d;
}

.i5{
  border-radius: 50%;
  background: #CCC;
}

#page-top{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  cursor: pointer;
}

#page-top:hover {
  opacity: .5;
}


.sp{
  display: block;
}

.hp{
  display: none;
}

.sslick{
  margin-top: -56px;
}

#spmenu{
  position: relative;
  z-index: 9999;
  background: #FFF;
  opacity: 90%;
}

#spbtn{
  padding-left: 10px;
}

#spbtns{
  padding-top: 14px;
}

#spunder{
  position: absolute;
  top: 56px;
  left: 0;
  width: 100%;
  background: #FFF;
  z-index: 99999;
  display: block;
}

#spunder div{
  padding: 20px 20px;
  border-bottom: 1px solid #CCC;
}

#spunder div a{
  padding-left: 20px;
  background : url(li.png) left center / auto auto no-repeat scroll padding-box border-box transparent;
}

.sbtns{
  font-size: 0.9em;
}

.sbtns a{
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #333;
  min-width: 320px;
  margin-bottom: 20px;
}

.slicker img{
  padding: 0.5px;
}

.arrw{
  background : url(arrw.png) right center / auto auto no-repeat scroll padding-box border-box transparent;
  background-size: 30px 20px;
}

.mds{
  padding-top: 20px;
  text-align: center;
  font-size: 0.9em;
}

.ttit{
  font-size: 1.4em;
  letter-spacing: 20px;
  text-align: center;
  padding: 0 0 0 0;
  line-height: 200%;
}


@media (min-width: 768px) {

  .sp{
    display: none;
  }

  .hp{
    display: block;
  }

  #maintex{
    display: none;
  }

  #sec01{
    margin-top: -40px;
  }

  #midmap{
    margin-top: 140px;
  }

  .routepage #midmap{
    margin-top: -40px;
  }
  

  #psec01 .descs{
    z-index: 10;
    position: relative;
    margin-top: 50px;
  }

  #psec01 .mdesc{
    margin-top: 10px;
    margin-bottom: 50px;
  }

  #psec02 .pic img{
    max-width: 500px;
  }

  #spunder{
    display: none;
  }

  .ttit{
    font-size: 2.26em;
    letter-spacing: 20px;
    line-height: 200%;
  }
  
  .ul{
    margin-bottom: 20px;
  }

  .mds{
    padding-top: 120px;
    text-align: center;
    font-size: 0.9em;
  }

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {



}