@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------------
	eastHokkaidoBus
------------------------------------------------------------- */
.mainImg .leadTxt{
	width:90%;
	text-align:center;
	margin:8px auto;
	font-size:1.1em;
	line-height:130%;
}
.map{
	background:url(../../img/topics/easternHokkaido/map.png);
	width:927px;
	height:522px;
	margin:8px auto;
	position:relative;
}
.map li{
	position:absolute;
}
.map li.route1{
	top:190px;
	left:122px;
}
.map li.route2{
	top:78px;
	left:519px;
}
.map li.route3{
	top:255px;
	left:647px;
}
.map li.route4{
	bottom:55px;
	left:348px;
}
.map h2{
	position:absolute;
	top:0px;
	left:-30px;
	font-size:1.5em;
	color:#FFF;
	background:#0099FF;
	padding:8px 15px;
}
@media only screen and (max-width: 767px){
.mainImg .leadTxt{
	width:96%;
	text-align:left;
	margin:8px auto;
	line-height:130%;
}
.map{
	background:url(../../img/topics/easternHokkaido/mapSp.png);
	width:100%;
	height:240px;
	background-size:100% auto;
	margin:8px auto;
	position:relative;
}
.map li{
	position:absolute;
	width:35%;
}
.map li img{
	width:100%;
	height:auto;
}
.map li.route1{
	top:15%;
	left:2%;
}
.map li.route2{
	top:0%;
	left:38%;
}
.map li.route3{
	width:42%;
	top:52%;
	left:55%;
}
.map li.route4{
	bottom:10%;
	left:30%;
}
.map h2{
	font-size:1.4em;
	color:#FFF;
	background:#0099FF;
	padding:8px 0px;
	text-align:center;
}	
}
.tourContents h3{
	text-align:center;
	color:#FFF;
	font-size:1.5em;
	padding:8px 0;
	margin-bottom:8px;
}
.tourContents .route1 h3{
	background:#C00;
}
.tourContents .route2 h3{
	background:#39F;
}
.tourContents .route3 h3{
	background:#060;
}
.tourContents .route4 h3{
	background:#f3981c;
}
.tourContents .tourBox{
	margin-bottom:50px;
}
.tourContents .slideImg{
	width:100%;
	position:relative;
}
.tourContents .slideImg img{
	height:355px;
}
.tourContents .slideImg span{
	position:absolute;
	bottom:0;
	width:99%;
	padding:8px 0 8px 8px;
	background:rgba(255,255,255,0.8)
	}
.tourContents .tourDetail h4{
	font-size:1.15em;
}
.tourContents .tourDetail p{
	margin-top:8px;
}
@media only screen and (max-width: 767px){
.tourContents .tourBox {
	padding:5px;
}
.tourContents .slideImg{
	margin-bottom:25px;
}
.tourContents .slideImg img{
	height:280px;
}
}
.tourContents .tourPrice{
	margin-top:10px;
	border-top:1px solid #999;
	border-bottom:1px solid #999;
	text-align:center;
	padding:5px 0;
}
.tourContents .tourPrice li{
	display:inline-block;
	margin-right:15px;
}
.tourContents .tourPrice span{
	font-size:1.4em;
	color:#FF0000;
	margin:0 5px;
}

.tourContents .button-link{
	background:#666666;
	color:#FFFFFF;
	padding:5px 10px;
	cursor:pointer;
	margin-top:8px;
}
.tourContents .button-link i{
	margin-right:3px;
	margin-left:3px;
}
.tourContents .itinerary .modalTtl{
	font-size:1.5em;
	font-weight:bold;
}
.tourContents .itinerary p{
	text-align:center;
}
.tourContents .itinerary ul{
	float:left;
	margin-right:30px;
	width:45%;
}
@media only screen and (max-width: 767px){
.tourContents .itinerary ul{
	float:none;
	margin-right:30px;
	width:100%;
}	
}
.tourContents .itinerary ul li{
	list-style:circle;
	margin-left:30px;
	background:url(../../img/topics/easternHokkaido/itIcon.png) no-repeat left;
	background-position: 30px 20px;
    padding-bottom: 21px;
}
.tourContents .itinerary ul li:last-child{
	background:none;
}
.tourContents .itinerary ul p{
	color:#CC0000;
}
.tourContents .reserveBtn {
	margin-top:8px;
}
.tourContents .reserveBtn p{
	margin-bottom:5px;
}
.tourContents .reserveBtn p i{
	margin-right:5px;
}
.tourContents .reserveBtn ul li a{
	display:block;
	background:#FF6600;
	color:#fff;
	text-align:center;
	padding:15px 0;
	font-weight:bold;
	font-size:1.2em;
	margin-bottom:5px;
	border-radius:5px;
}
.tourContents .reserveBtn ul li i{
	margin-left:8px;
}
.modal-content {
	 width: 70% ;
	 margin: 0 ;
	 padding: 10px 20px ;
	 border: 2px solid #aaa ;
	 background: #fff ;
	 position: fixed ;
	 display: none ;
	 z-index: 100 ;
}
.modal-overlay {
	z-index: 8 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.80 ) ;
}

.modal-content .modalTtl{
	font-weight:bold;
	font-size:1.2em;
}
.modal-content .closeBtn{
	text-align:center;
	cursor:pointer;
	font-size:1.1em;
	color:#333;
}
.modal-content .closeBtn i{
	margin-right:5px;
}