@charset "utf-8";
/* CSS Document */
body{min-width:1360px;}
.pcNone{display:none!important;}
/**/
#multiScroll .sectionInr{text-align:center;padding:50px 10px;box-sizing:border-box;}
#multiScroll .sectionInr .title{font-size:6.6rem;}
#multiScroll .sectionInr .titleIndex{font-size:6.6rem;}
#multiScroll .sectionInr .tableA{font-size:1.2rem; border-top:1px solid #ddd;border-left:1px solid #ddd;}
#multiScroll .sectionInr .tableA th,
#multiScroll .sectionInr .tableA td{border-bottom:1px solid #ddd;border-right:1px solid #ddd;padding:8px 5px; vertical-align:middle;}
#multiScroll .sectionInr .tableA th{background-color:#eee;}
.ms-left .sec00{width:200%!important; background-color:transparent;}
.ms-right .sec01,.ms-right .sec02,.ms-right .sec03{background:center center no-repeat;background-size:cover;}
.ms-left .sec01.gClr{background: #008580;
background: -moz-linear-gradient(-45deg,  #008580 0%, #0078cc 100%);
background: -webkit-linear-gradient(-45deg,  #008580 0%,#0078cc 100%);
background: linear-gradient(135deg,  #008580 0%,#0078cc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008580', endColorstr='#0078cc',GradientType=1 );}
.ms-right .sec01{background-image:url(../img/ms_01r.png);}
.ms-right .sec02{background-image:url(../img/ms_02r.png);}
.ms-right .sec01{background-color:#000; color:#fff}
.ms-right .sec02{background-color:#f7f7f7;}
.ms-right .sec02 .sectionInr ol{text-align:left;}
.ms-right .sec02 .sectionInr li{font-size:3.6rem;border-bottom:1px solid #ddd;padding:35px 0;}
.ms-right .sec02 .sectionInr li:first-child{padding-top:0;}
.ms-right .sec02 .sectionInr li .num{color:#aaa;padding-right:0.5em;font-size:5.0rem;font-family:Helvetica, Arial, sans-serif;font-weight:300;}
.ms-left .sec03 .mapUnit{}
.ms-left .sec03 .mapUnit .map{width:693px;height:768px;position:relative;margin:0 auto;}
.ms-left .sec03 .mapUnit .maplayer{background:url(../img/ms03_map_cov.png) no-repeat 53% 179px;width:693px;height:768px;position: absolute;margin:0 auto; pointer-events: none;}
.ms-left .sec03 .mapUnit .heading{position:absolute;top:8%;left:6%;}
.ms-left .sec03 .mapUnit .map .information{display:none;}
.ms-left .sec03 .mapUnit .map .information img{width:100%;height:auto;}
.ms-left .sec03 .buttonUnit_list li{position:absolute;}
.ms-left .sec03 .buttonUnit_list .areaMap_areaName{font-family: 'Roboto'; position:relative;}
/* .ms-left .sec03 .buttonUnit_list button span.pin{position:absolute;top:0;left:0;}
.ms-left .sec03 .buttonUnit_list button span.pin img{width:16px;height:21px;} */
.ms-left .sec03 .buttonUnit_list .areaMap_areaName span.cityName{color:#fff;font-size:1.4rem;position:absolute;top:0;left:0;}
.ms-left .sec03 .buttonUnit_list .information{position:fixed;top:23.5vh;left:26.5vw;transform:translateX(-340px);font-family:"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;width:240px;}
.ms-left .sec03 .buttonUnit_list .information .information_inr{
background: rgba(0, 23, 27, 0.9); 
padding: 20px 15px;
}
.ms-left .sec03 .buttonUnit_list .information .information_btn{
	margin-top: 15px;
}
.svgunit svg{
    width: 100%;
    height: auto;
    position: absolute;left: 66px;top: 45px;
}
.ms-left .sec03 .buttonUnit_list .information .information_btn a{
	text-align: center;
	display: block;
	color: #fff;
	border: 1px solid #fff;
    padding: 5px 0;
    border-radius: 15px;
    font-size: 1.2rem;
    width: 140px;
    margin: 0 auto;
}
.ms-left .sec03 .buttonUnit_list .information img{vertical-align:bottom;}
.ms-left .sec03 .buttonUnit_list .information .railwayInfo_btn{background-color:rgba(0,0,0,.8);color:#fff;font-family:1.6rem;text-align:center;position:relative;padding:12px 0;display:none;}
.ms-left .sec03 .buttonUnit_list .information .railwayInfo_btn::after{content:"";display:inline-block;width:9px;height:15px;background:url(../img/s_btn_arw.png) no-repeat 0 0;background-size:9px 15px;position:absolute;right:10px;top:50%;transform:translateY(-50%);}
.ms-left .sec03 .buttonUnit_list button.is-active + .information{display:block!important;opacity:1!important;} */
.ms-left .sec03 .buttonUnit_list .information figcaption{text-align:left;font-size:1.4rem;color:#fff;}
.ms-left .sec03 .copy{font-family:"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;position:absolute;left:20px;bottom:10px;}
.areaMap.is-active .information{
    display: block !important;
    opacity: 1 !important;
}
.ms-left .sec03 .areaMap_areaNamelist .areaMap_areaName{
    font-family: 'Roboto';
    position: relative;
}
.ms-left .sec03 .areaMap_areaNamelist .areaMap_areaName span.cityName {
    color: #fff;
    font-size: 1.4rem;
    position: absolute;
    top: 0;
    left: 0;
}
.ms-left .sec03 .areaMap_areaNamelist{
    position: relative;
    height: 0;
}
.ms-left .sec03 .areaMap_areaName.fukuoka{
	top: 203px;
    left: 157px;
    width: 64px;
    height: 22px;
}
.ms-left .sec03 .areaMap_areaName.takamatsu{
	top: 356px;
    left: 242px;
    width: 85px;
    height: 22px;
}
.ms-left .sec03 .areaMap_areaName.hiroshima{
    top: 207px;
    left: 204px;
    width: 77px;
    height: 22px;
}
.ms-left .sec03 .areaMap_areaName.osaka{
    top: 363px;
    left: 296px;
    width: 45px;
    height: 22px;
}
.ms-left .sec03 .areaMap_areaName.kyoto{
    top: 225px;
    left: 304px;
    width: 45px;
    height: 22px;
}
.ms-left .sec03 .areaMap_areaName.kanazawa{
    top: 207px;
    left: 314px;
    width: 77px;
    height: 22px;
}
.ms-left .sec03 .areaMap_areaName.nagoya{
	top: 388px;
    left: 425px;
    width: 57px;
    height: 22px;
}
.ms-left .sec03 .areaMap_areaName.tokyo{
	top: 350px;
    left: 472px;
    width: 46px;
    height: 22px;
}
.ms-left .sec03 .areaMap_areaName.sendai{
    top: 293px;
    left: 494px;
    width: 50px;
    height: 22px;
}
.ms-left .sec03 .areaMap_areaName.aomori{
	top: 240px;
    left: 350px;
    width: 58px;
    height: 22px;
}
.ms-left .sec03 .areaMap_areaName.sapporo{
    top: 191px;
    left: 348px;
    width: 66px;
    height: 22px;
}
/* #btnPin_sapporo button{top:196px;left:429px;width:69px;height:22px;overflow:visible;}
#btnPin_sendai button{top:300px;left:429px;width:62px;height:22px;overflow:visible;}
#btnPin_tokyo button{top:402px;left:439px;width:52px;height:22px;overflow:visible;}
#btnPin_nagoya button{top:470px;left:421px;width:61px;height:22px;overflow:visible;}
#btnPin_kyoto button{top:342px;left:302px;width:51px;height:22px;overflow:visible;}
#btnPin_osaka button{top:509px;left:309px;width:52px;height:22px;overflow:visible;}
#btnPin_takamatsu button{top:567px;left:238px;width:89px;height:22px;overflow:visible;}
#btnPin_hiroshima button{top:388px;left:190px;width:82px;height:22px;overflow:visible;}
#btnPin_fukuoka button{top:463px;left:110px;width:69px;height:22px;overflow:visible;} */
/* #btnPin_sapporo .pin{top:-20px;left:14px;}
#btnPin_sendai .pin{top:21px;left:12px;}
#btnPin_tokyo .pin{top:0;left:-20px;}
#btnPin_nagoya .pin{top:-51px;left:-72px;}
#btnPin_kyoto .pin{top:78px;left:17px;}
#btnPin_osaka .pin{top:-68px;left:0px;}
#btnPin_takamatsu .pin{top:-122px;left:35px;}
#btnPin_hiroshima .pin{top:52px;left:46px;}
#btnPin_fukuoka .pin{top:-1px;left:71px;} */
.ms-right .sec03{}
.ms-right .sec03{background-color:#111;color:#fff;font-family:"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;box-sizing:border-box;}
.ms-right .sec03 .ms-tableCell{height:100%!important;}
.ms-right .sec03 .scrollBox{height:calc(100vh - 40px);overflow:auto;}
.ms-right .sec03 .readWrap{color:#333;padding:40px 0;position:relative;z-index:1;width:600px;margin:0 auto;}


.ms-right .sec03 .readWrap .tabUnit{margin-top:20px;}
.ms-right .sec03 .readWrap .tabUnit .tab{display:inline-block;margin-left:20px;}
.ms-right .sec03 .readWrap .tabUnit .tab:first-child{margin-left:0;}
.ms-right .sec03 .readWrap .tabUnit .tab button{background-color:rgba(255,255,255,0.2);text-align:center;width:288px;height:50px;line-height:50px;color:#fff;font-size:1.8rem;}
.ms-right .sec03 .readWrap .tabUnit .tab.is-current button{background-color:rgba(255,255,255,0.4);}

.ms-right .sec03 .readWrap .readWrap_inr{}
.ms-right .sec03 .readWrap .readWrap_inr a{color:#fff;}



.ms-right .sec03 .bgBrightness{background:url(../img/ms_03r.png) center center no-repeat;background-size:cover; width:100%;height:100%;position:absolute;top:0;left:0;z-index:0;}
.ms-right .sec03 .listTitle{font-size:40px;text-align:center;color:#fff;}
.ms-right .sec03 .railBox{margin-top:20px;}
.ms-right .sec03 .railBox .inr{ background-color:rgba(255,255,255,.2);box-sizing:border-box;margin-top:10px;padding:15px 20px;border-top:2px solid;}
.ms-right .sec03 .railBox .inr.jrCentral{border-color:#ff6a00;}
.ms-right .sec03 .railBox .inr.jrEast{border-color:#008a00;}
.ms-right .sec03 .railBox .inr.tobu{border-color:#0a89c4;}
.ms-right .sec03 .railBox .inr.odakyu{border-color:#0e5ebd;}
.ms-right .sec03 .railBox .railTitle{color:#fff;text-align:center;font-size:1.8rem;}
.ms-right .sec03 .railBox .inr dd{margin-top:13px;}
.ms-right .sec03 .railBox .railList{font-size:0;}
.ms-right .sec03 .railBox .railList > li{display:inline-block;font-size:1.6rem;margin-left:10px;width:180px;position:relative;}
.ms-right .sec03 .railBox .railList > li:first-child{margin-left:0;}
.ms-right .sec03 .railBox .railList > li > a{display:block;text-align:center;border:1px solid #fff;padding:10px 0;border-radius:30px;font-size:1.4rem;}
.ms-right .sec03 .railBox .railList > li > a{text-align:center;position:relative;overflow:hidden;-webkit-transition:.3s;transition:.3s;}
.ms-right .sec03 .railBox .railList > li > a:after{position:absolute;-webkit-transition:.3s;transition:.3s;content:'';width:0;bottom:0;background:#fff;height:120%;left:-10%;-webkit-transform:skewX(15deg);transform:skewX(15deg);z-index:-1;}
.ms-right .sec03 .railBox .railList > li > a:hover{color:#111;}
.ms-right .sec03 .railBox .railList > li > a:hover:after{left:-10%;width:120%;}
.ms-right .sec03 .railBox .railList > li.multiLink .JS_linkDown.is-active{ background-color:rgba(255,255,255,0.5);color:#000;border-color:rgba(255,255,255,0);}
.ms-right .sec03 .railBox .railList > li .multiLink_select{position:absolute;top:50px;left:10px;width:160px;z-index:200;}
.ms-right .sec03 .railBox .railList > li .multiLink_select.downOn{transform:translate3d(0px, 0px, 100px);}


.ms-right .sec03 .railBox .railList > li .multiLink_select li > a{background-color:rgba(0,23,27,0.9);padding:10px 3px;text-align:center;display:block;font-size:14px;border-top:1px solid #798585;}
.ms-right .sec03 .railBox .railList > li .multiLink_select li:first-child > a{border-top:none;}
.ms-right .sec03 .railBox .railList > li .multiLink_select li > a:hover{background-color:rgba(255,255,255,0.9);color:#000;}


.leftCt{color:#fff;}
.bgGradient{
display:block;opacity:0;width:50%;height:100%;position:fixed;top:0;left:0;z-index:-1;
background: #008580;
background: -moz-linear-gradient(-45deg,  #008580 0%, #0078cc 100%);
background: -webkit-linear-gradient(-45deg,  #008580 0%,#0078cc 100%);
background: linear-gradient(135deg,  #008580 0%,#0078cc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008580', endColorstr='#0078cc',GradientType=1 );
}
/*
.brightness{-webkit-filter:brightness(0.3);-moz-filter:brightness(0.3);-ms-filter: brightness(0.3);filter: brightness(0.3);transition: filter 0.5s;}
*/
.brightness:after{content:"";display:inline-block;width:100%;height:100%; background-color:rgba(0,0,0,.75);position:absolute;top:0;right:0;}
.ms-viewing-2 .bgGradient,
.ms-viewing-3 .bgGradient{opacity:1!important;}
.rightCt{}
.bottomUnit{width:100%;height:100%;position:fixed;top:0;left:0;z-index:-1;background:url(../img/ms00.png) no-repeat center center;background-size:cover;}
.logo{position:absolute;top:15px;left:20px;z-index:1000;}
.logo a:focus{outline: 3px solid #CC0000;}
.logo img{width:233px;height:22px;}
.bottomUnit .ms00_txt{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}

/* bottomアンカー */
.btmArw{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);z-index:10 !important;}
.ms-viewing-1 button.btmArw,
.ms-viewing-2 button.btmArw,
.ms-viewing-3 button.btmArw,
.ms-viewing-4 button.btmArw{z-index:0;}

/* ページ内アンカー*/
#multiscroll-nav ul{position:relative;}
#multiscroll-nav ul:after{content:"";display:block;width:1px;height:calc(100% - 10px);background:#fff;opacity:0.6;position:absolute;top:5px;left:50%; margin-left:-1px;}
#multiscroll-nav li{margin-top:38px!important;}
#multiscroll-nav li:first-child{margin-top:0!important;}
#multiscroll-nav li span{background:#fff;border:none;width:9px;height:9px;}
#multiscroll-nav li a.active span{background:#fff;width:14px;height:14px;left:0;}
.scrollBody{position:absolute;top:0;right:0;width:100%;height:100%;box-sizing:border-box;padding:40px; overflow:hidden;}
.scrollBody >ul{ overflow:auto; height:100%;background-color:#fff;}
/*animate*/
.swing-in-top-fwd{/*-webkit-animation:swing-in-top-fwd 1.5s cubic-bezier(.175,.885,.32,1.275) both;*/animation:swing-in-top-fwd 1.5s cubic-bezier(.175,.885,.32,1.275) both;position:relative;}
.swing-in-top-fwd{animation-duration:2.6s;}
.swing-in-top-fwd:nth-of-type(2){animation-delay:0.2s;}.swing-in-top-fwd:nth-of-type(3){animation-delay:0.4s;}.swing-in-top-fwd:nth-of-type(4){animation-delay:0.6s;}.swing-in-top-fwd:nth-of-type(5){animation-delay:0.8s;}.swing-in-top-fwd:nth-of-type(6){animation-delay:1.0s;}.swing-in-top-fwd:nth-of-type(7){animation-delay:1.2s;}.swing-in-top-fwd:nth-of-type(8){animation-delay:1.4s;}.swing-in-top-fwd:nth-of-type(9){animation-delay:1.6s;}.swing-in-top-fwd:nth-of-type(10){animation-delay:1.8s;}.swing-in-top-fwd:nth-of-type(11){animation-delay:2.0s;}.swing-in-top-fwd:nth-of-type(12){animation-delay:2.2s;}.swing-in-top-fwd:nth-of-type(13){animation-delay:2.4s;}.swing-in-top-fwd:nth-of-type(14){animation-delay:2.6s;}.swing-in-top-fwd:nth-of-type(15){animation-delay:2.8s;}.swing-in-top-fwd:nth-of-type(16){animation-delay:3.0s;}.swing-in-top-fwd:nth-of-type(17){animation-delay:3.2s;}.swing-in-top-fwd:nth-of-type(18){animation-delay:3.4s;}.swing-in-top-fwd:nth-of-type(19){animation-delay:3.6s;}.swing-in-top-fwd:nth-of-type(20){animation-delay:3.8s;}.swing-in-top-fwd:nth-of-type(21){animation-delay:4.0s;}.swing-in-top-fwd:nth-of-type(22){animation-delay:4.2s;}.swing-in-top-fwd:nth-of-type(23){animation-delay:4.4s;}.swing-in-top-fwd:nth-of-type(24){animation-delay:4.6s;}.swing-in-top-fwd:nth-of-type(25){animation-delay:4.8s;}.swing-in-top-fwd:nth-of-type(26){animation-delay:5.0s;}.swing-in-top-fwd:nth-of-type(27){animation-delay:5.2s;}.swing-in-top-fwd:nth-of-type(28){animation-delay:5.4s;}.swing-in-top-fwd:nth-of-type(29){animation-delay:5.6s;}.swing-in-top-fwd:nth-of-type(30){animation-delay:5.8s;}
/*more infomation*/
.ms-right .sec03 .railBox .railList > li.js_moreBtn > a{
	background: url('../img/btn_more_arw03.png') no-repeat right 15px center;
}
.ms-right .sec03 .railBox .railList > li.js_moreBtn > a:hover{
	background: url('../img/btn_more_arw01.png') no-repeat right 15px center;
}
.ms-right .sec03 .railBox .railList > li.js_moreBtn > a.is-active{
	background: rgba(255, 255, 255, 0.25) url(../img/btn_more_arw02.png) no-repeat right 15px center;
}
.is-active + .moreinfo_list{
	display: block;
}
.moreinfo_list{
	display: none;
	position: absolute;
	width: 100%;
	top: 53px;
}
.ms-left .sec03 .buttonUnit_list .is-active .information{
    display: block!important;
    opacity: 1!important;
}
.ms-right .sec03 .railBox .inr.js_moreBtn_box{
	z-index: 1
}
.moreinfo_list li a{
	display: block;
	width: 100%;
	line-height: 40px;
	font-size: 14px;
	text-align: center;
	background: rgba(0, 23, 27, 0.9);
	border-top: 1px solid rgba(255, 255, 255, 0.7);
}
.moreinfo_list li:nth-of-type(1) a{
	border-top: 0;
}
.moreinfo_list li a:hover{
	color: #000 !important;
	background: #fff;
}
.ms-right .sec03 .railBox .railList > li > a:focus,
.moreinfo_list li a:focus,
#mapOnlycut g:focus,
button:focus{
    outline: 3px solid #CC0000;
}
#mapOnlycut g:focus{
    opacity: 0.5;
}
.pageTop{
    display: none;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10 !important;
}
@-webkit-keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}@keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}


/*responsive*/
@media (max-width:1280px){
	.blockTxt img{width:90%;height:auto;}
	.ms-left .sec03 .mapUnit .heading{top:8%;left:5%;}
	.ms-left .sec03 .mapUnit .heading img{width:90%;height:auto;}
	.ms-left .sec03 .buttonUnit_list .information{left:31%;top:18%;}
}

@media (min-width:1366px){
	.ms-left .sec03 .buttonUnit_list .information{left:25%;top:23%;}
}

@media (min-width:1920px){
	.ms-left .sec03 .buttonUnit_list .information{left:20vw;top:20vh;}
}