@charset 'UTF-8';

/*--------------------------------------------------*/
/* map */
/*--------------------------------------------------*/

#map{
    background: url(/img/top/map/bg_map.jpg) no-repeat top;
    background-size: 100% 100%;
	padding: 30px 0;
}
#map h2 .icon {
    background: url(/common/images/icon/icon_loope_03.png) no-repeat left center;
    background-size: 28px;
    display: inline-block;
    padding-left: 40px;
}
#routeSearchBox{
	display: table;
	width: 100%;
}
#rsFormBox{
	width: 31%;
	display: table-cell;
	box-sizing: border-box;
	background: #082d8c;
	padding: 25px 0 20px;
	margin-bottom: 15px;
}
#rsFormBox .rsFormBlock{
	padding: 0 7%;
}
#rsFormBox .hokuriku{
	color: #FFFFFF;
	font-size: 1.5rem;
	letter-spacing: -0.1em;
	margin-bottom: 7px;
	padding: 0 7%;
}
#rsFormBox .hokuriku a{
	color: #FFFFFF;
	text-decoration: underline;
}
#rsFormBox select{
	width: 100%;
	font-size: 1.7rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 5px 3%;
	border: #002299 3px solid;
	background: url(/img/top/map/arrow_select.png) no-repeat 92% center;
	background-color: #FFFFFF;
}
#rsFormBox select:focus{
	outline: #002299 3px solid;
}
#rsFormBox select::-ms-expand {
	display: none;
}
#rsFormBox select#searchRouteMonth{
	width: 33%;
	margin-right: 1%;
}
#rsFormBox select#searchRouteDay{
	width: 40%;
	margin-right: 4%;
}
#routeSearchBox.step1 #rsFormBox .step1,
#routeSearchBox.step2 #rsFormBox .step2,
#routeSearchBox.step3 #rsFormBox .step3{
	background: url(/img/top/map/icon_map_select.png) no-repeat right 70%;
}
#routeSearchBox.step1 #rsFormBox .step1 select,
#routeSearchBox.step2 #rsFormBox .step2 select,
#routeSearchBox.step3 #rsFormBox .step3 select{
	border: #89aaff 3px solid;
	border-radius: 3px;
}
#rsFormBox .ttl{
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -1px;
	margin-top: 10px;
	margin-bottom: 3px;
}
#rsFormBox .btnArea{
	display: inline-block;
}
#rsFormBox .calender_btn{
	width: auto;
	height: 4rem;
    vertical-align: middle;
}
#rsMapBox{
	width: 68%;
	box-sizing: border-box;
	display: table-cell;
	position: relative;
	background: #FFFFFF;
}
#rsMapBox .map{
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
}
#rsMapBox .msg{
	position: absolute;
	z-index: 20;
	left: 40px;
	top: 35px;
	font-size: 1.3rem;
	font-weight: bold;
}
#rsMapBox .msg .ttl{
	font-size: 2.2rem;
	color: #082d8c;
	line-height: 1.5;
	border-bottom: #082d8c 1px solid;
}
#rsMapBox .msg .ttl span{
	font-size: 3rem;
}
.e #rsMapBox .msg .ttl span{
	font-size: 2.8rem;
}
#rsMapBox .msg .step3 .ttl span.point{
	font-feature-settings: "palt";
}
#rsMapBox .msg .note{
	font-size: 1.2rem;
	line-height: 1.5;
	margin-top: 10px;
	padding-left: 35px;
	background: url(/img/top/map/icon_check.png) no-repeat left top;
}
#rsMapBox .msg .step1,
#rsMapBox .msg .step2,
#rsMapBox .msg .step3{
	display: none;
}
#routeSearchBox.step1 .msg .step1{
	display: block;
}
#routeSearchBox.step2 .msg .step2{
	display: block;
}
#routeSearchBox.step3 .msg .step3{
	display: block;
}
#rsMapBox .pref .btn{
	position: absolute;
	z-index: 30;
	background: #082d8c;
	padding: 5px;
	color: #FFFFFF;
	line-height: 1;
	cursor: pointer;
	border-radius: 3px;
}
#rsMapBox .pref .btn.disable{
	display: none;
}
#rsMapBox .pref .btn.prefStart,
#rsMapBox .pref .btn.prefEnd{
	display: block;
}
#rsMapBox .prefIcon .icon{
	position: absolute;
	z-index: 25;
}
#rsMapBox .prefIcon .icon.disable{
	display: none;
}
#rsMapBox .prefMap .mapOn{
	position: absolute;
	z-index: 24;
	display: none;
}
#rsMapBox .prefMap .mapOn.prefStartMap,
#rsMapBox .prefMap .mapOn.prefEndMap,
#rsMapBox .prefMap .mapOn.select{
	display: block;
}
#rsMapBox .prefMap .mapOn.disable{
	/*display: none;*/
}

/* 出発地 */
#rsMapBox .pref .btn.prefStart{
	background: #ed5503;
	cursor: default;
}
/* 到着地 */
#rsMapBox .pref .btn.prefEnd{
	background: #ed5503;
	cursor: default;
}
/* hover */
#rsMapBox .pref .btn.select{
	background: #ed5503;
	cursor: pointer;
}

/* 千葉 */
#rsMapBox .pref .btn._12{
	right: 37px;
	top: 199px;
}
#rsMapBox .prefMap .mapOn._12{
    right: 15px;
    top: 162px;
}
/* 東京 */
#rsMapBox .pref .btn._13{
	right: 95px;
	top: 174px;
}
#rsMapBox .prefIcon .icon._13{
	right: 80px;
	top: 141px;
}
#rsMapBox .prefMap .mapOn._13{
    right: 84px;
    top: 172px;
}
/* 神奈川 */
#rsMapBox .pref .btn._14{
	right: 92px;
	top: 208px;
}
.e #rsMapBox .pref .btn._14{
	right: 92px;
	top: 211px;
}
#rsMapBox .prefMap .mapOn._14{
    right: 97px;
    top: 196px;
}
/* 富山 */
#rsMapBox .pref .btn._16{
	right: 250px;
	top: 87px;
}
#rsMapBox .prefIcon .icon._16{
	right: 225px;
	top: 54px;
}
#rsMapBox .prefMap .mapOn._16{
    right: 235px;
    top: 68px;
}
/* 石川 */
#rsMapBox .pref .btn._17{
	right: 311px;
	top: 100px;
}
#rsMapBox .prefIcon .icon._17{
	right: 308px;
	top: 60px;
}
.e #rsMapBox .prefIcon .icon._17 {
    right: 299px;
    top: 63px;
}
#rsMapBox .prefMap .mapOn._17{
    right: 260px;
    top: 17px;
}
/* 山梨 */
#rsMapBox .pref .btn._19{
	right: 154px;
	top: 184px;
}
#rsMapBox .prefIcon .icon._19{
	right: 154px;
	top: 151px;
}
#rsMapBox .prefMap .mapOn._19{
    right: 140px;
    top: 165px;
}
/* 長野 */
#rsMapBox .pref .btn._20{
	right: 193px;
	top: 133px;
}
#rsMapBox .prefMap .mapOn._20{
    right: 169px;
    top: 68px;
}
/* 岐阜 */
#rsMapBox .pref .btn._21{
	right: 270px;
	top: 175px;
}
#rsMapBox .prefIcon .icon._21{
    right: 256px;
    top: 133px;
}
#rsMapBox .prefMap .mapOn._21{
    right: 246px;
    top: 114px;
}
/* 静岡 */
#rsMapBox .pref .btn._22{
    right: 198px;
    top: 229px;
}
.k #rsMapBox .pref .btn._22,
.e #rsMapBox .pref .btn._22{
	right: 188px;
	top: 236px;
}
#rsMapBox .prefIcon .icon._22{
    right: 174px;
    top: 255px;
}
.e #rsMapBox .prefIcon .icon._22,
.k #rsMapBox .prefIcon .icon._22{
    right: 174px;
    top: 262px;
}
#rsMapBox .prefMap .mapOn._22{
    right: 140px;
    top: 193px;
}
/* 名古屋 */
#rsMapBox .pref .btn._23{
	right: 260px;
	top: 228px;
}
#rsMapBox .prefIcon .icon._23{
    right: 256px;
    top: 252px;
}
#rsMapBox .prefMap .mapOn._23{
    right: 242px;
    top: 209px;
}
/* 三重 */
#rsMapBox .pref .btn._24{
	right: 313px;
	top: 262px;
}
#rsMapBox .prefMap .mapOn._24{
    right: 307px;
    top: 220px;
}
/* 滋賀 */
#rsMapBox .pref .btn._25{
	left: 326px;
	top: 220px;
}
#rsMapBox .prefMap .mapOn._25{
    left: 320px;
    top: 180px;
}
/* 京都 */
#rsMapBox .pref .btn._26{
    left: 268px;
    top: 193px;
}
#rsMapBox .prefIcon .icon._26{
    left: 255px;
    top: 146px;
}
#rsMapBox .prefMap .mapOn._26{
    left: 257px;
    top: 171px;
}
/* 大阪 */
#rsMapBox .pref .btn._27{
	left: 274px;
	top: 265px;
}
#rsMapBox .prefIcon .icon._27{
    left: 285px;
    top: 219px;
}
#rsMapBox .prefMap .mapOn._27{
    left: 273px;
    top: 240px;
}
/* 兵庫 */
#rsMapBox .pref .btn._28{
	left: 227px;
	top: 222px;
}
#rsMapBox .prefMap .mapOn._28{
    left: 208px;
    top: 178px;
}
/* 広島 */
#rsMapBox .pref .btn._34{
	left: 91px;
	top: 239px;
}
.k #rsMapBox .pref .btn._34{
	left: 83px;
	top: 239px;
}
.e #rsMapBox .pref .btn._34{
	left: 75px;
	top: 239px;
}
#rsMapBox .prefIcon .icon._34{
	left: 80px;
	top: 261px;
}
#rsMapBox .prefMap .mapOn._34{
    left: 46px;
    top: 224px;
}
/* 徳島 */
#rsMapBox .pref .btn._36{
	left: 180px;
	top: 317px;
}
#rsMapBox .prefIcon .icon._36{
	left: 198px;
	top: 317px;
}
.e #rsMapBox .prefIcon .icon._36,
.k #rsMapBox .prefIcon .icon._36{
    left: 198px;
    top: 332px;
}
#rsMapBox .prefMap .mapOn._36{
    left: 161px;
    top: 302px;
}
/* 香川 */
#rsMapBox .pref .btn._37{
	left: 165px;
	top: 284px;
}
#rsMapBox .prefIcon .icon._37{
    left: 192px;
    top: 263px;
}
.e #rsMapBox .prefIcon .icon._37,
.k #rsMapBox .prefIcon .icon._37{
    left: 188px;
    top: 246px;
}
#rsMapBox .prefMap .mapOn._37{
    left: 156px;
    top: 289px;
}
/* 愛媛 */
#rsMapBox .pref .btn._38{
	left: 66px;
	top: 335px;
}
#rsMapBox .prefIcon .icon._38{
	left: 25px;
	top: 347px;
}
#rsMapBox .prefMap .mapOn._38{
    left: 45px;
    top: 307px;
}

.resetBtnArea{
	position: absolute;
	z-index: 40;
	right: 25px;
    bottom: 25px;
}
#resetBtn{
	display: block;
	margin: 0 auto;
	padding: 5px 15px;
	text-align: center;
	background: #FFFFFF;
	color: #082d8c;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: -1px;
	text-decoration: none;
	border: #082d8c 2px solid;
	border-radius: 5px;
}
#resetBtn span{
	background: url(/img/top/map/icon_close.png) no-repeat left center;
	padding-left: 1.3em;
}
#rsMapBox #resetBtn{
	display: none;
}
#routeSearchBox.step3 #resetBtn{
	display: block;
}
.rsBtnArea{
	margin-top: 20px;
	font-size: 1.6rem;
}
.rsBtnArea.ok #rsSubmit{
	display: block;
}
.rsBtnArea.ok #rsSubmitDisable{
	display: none;
}
#rsSubmit{
	width: 43%;
	display: none;
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
	font-weight: bold;
	background: #f18101;
	color: #FFFFFF;
	text-decoration: none;
	border-radius: 5px;
}
#rsSubmitDisable{
	width: 43%;
	display: block;
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
	background: #7F7F7F;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
	border-radius: 5px;
}
#searchMesseArea{
	display: none;
	position: absolute;
	z-index: 80;
	top: 0;
	left: 0;
  bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.8);
  cursor: pointer;
}
#searchMesseArea .searchMesse{
	width: 66%;
	font-size: 2.4rem;
	font-weight: bold;
	background: #e6e6e6;
	margin: 0 auto;
	text-align: center;
	padding: 50px 0;
	margin-top: 120px;
	box-sizing: border-box;
}

/* モーダル */

#routeSearchWrap{
	position: relative;
}
#routeSearchWrap .selectModal{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.8);
	z-index: 80;
}
#routeSearchWrap .selectModal._on{
	display: block;
}
#routeSearchWrap .selectModal .selectArea {
    width: 66%;
    font-size: 2.4rem;
    font-weight: bold;
    background: #e6e6e6;
    margin: 0 auto;
    text-align: center;
    padding: 50px 0;
    margin-top: 120px;
    box-sizing: border-box;
}
#routeSearchWrap .selectModal .selectSt{
	margin-top: 10px;
}
#routeSearchWrap .selectModal .selectSt .btn{
	width: 45%;
	margin: 0 auto;
	background: #082d8c;
	margin-bottom: 10px;
	border-radius: 5px;
}
#routeSearchWrap .selectModal .selectSt .btn:last-child{
	margin-bottom: 0;
}
#routeSearchWrap .selectModal .selectSt .btn:hover{
	opacity: 0.8;
}
#routeSearchWrap .selectModal .selectSt .btn p{
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	cursor:pointer;
}

@media screen and (max-width:767px) {
	#map{
		width: 100%;
		padding: 4% 0;
	}
	#map .section-inner {
		padding: 0 3%;
	}
	#map h2 {
		margin-bottom: 1.2rem;
		font-size: 1.6rem;
		color: #002299;
	}
	#map h2 .icon {
		background: url(/common/images/icon/icon_loope_03.png) no-repeat left center;
		background-size: contain;
		display: inline-block;
		padding-left: 2rem;
	}
	#rsFormBox{
		width: 100%;
		height: auto;
		float: none;
	}
	#rsFormBox .rsFormBlock{
		padding: 0 5%;
	}
	#rsFormBox .hokuriku{
		font-size: 1.4rem;
	}
	#rsFormBox .ttl{
		font-size: 1.4rem;
	}
	#rsFormBox select{
		font-size: 1.4rem;
	}
	#rsMapBox{
		display: none;
	}
	#routeSearchBox.step1 #rsFormBox .step1,
	#routeSearchBox.step2 #rsFormBox .step2,
	#routeSearchBox.step3 #rsFormBox .step3{
		background: none;
	}
	#rsFormBox .btnArea {
		width: 13%;
	}
	#rsFormBox .calender_btn{
		height: auto;
	}
	#rsSubmit,
	#rsSubmitDisable{
		font-size: 1.4rem;
	}
	#searchMesseAreaSp{
		margin-top: 20px;
		padding: 0 5%;
		display: none;
	}
	#searchMesseAreaSp .searchMesse{
		font-size: 1.4rem;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 1.3;
	}
	#routeSearchWrap .selectModal .selectArea{
		width: 90%;
		margin-top: 80px;
	}
	#routeSearchWrap .selectModal .selectSt .btn{
		width: 90%;
	}

}