@charset "utf-8";
/*---------------------------------*/
/*サイドバー*/
/*---------------------------------*/
div.side_content {
	margin-bottom: 10px;
}
h2.side_ttl_top {
	margin-bottom: 5px;
    background-color:#F2F2F2;
    line-height:44px;
    padding-left:10px;
}
h2.side_ttl {
	margin-bottom: 5px;
    background-color:#F2F2F2;
    line-height:44px;
    padding-left:25px;
    position:relative;
}
h2.side_ttl:before{
    content:"";
    position:absolute;
    top: 8px;
    left: 7px;
    width: 5px;
    height: 30px;
    background-color: #1c93cf;
}
div#adbn {
	/*margin-left: 30px;*/
	padding-left: 30px;
}

div.side_btn {
	text-align: right;
	margin-bottom: 10px;
}
div.side_btn a{
    background-color:#dadada;
    border-radius:4px;
    font-size:10px;
    display: inline-block;
    padding:2px 10px;
    color:#333;
}
ul#service_list {
	padding-left: 5px;
}

ul#service_list li {
	float: left;
	margin-right: 6px;
	display: inline;
	height: 36px;
	margin-bottom: 5px;
}

p#view {
	margin-bottom: 5px;
}

table#baseinfo_table {
	border-top: 1px dotted #d6d6d6;
	width: 100%;
}

table#baseinfo_table tr th,
table#baseinfo_table tr td {
	border-bottom: 1px dotted #d6d6d6;
}
table#baseinfo_table tr th{
    padding:5px 5px 5px 0;
}
table#baseinfo_table tr th span{
    background-color:#686868;
    color:#fff;
    display: inline-block;
    border-radius:4px;
    text-align: center;
    width:100%;
    white-space:nowrap;
    font-weight: normal;
    font-size: 10px;
    padding: 2px 4px;
    box-sizing: border-box;
}

table#baseinfo_table tr td {
    vertical-align: top;
    padding:5px 0px 5px 5px;
}

/*20121128_add*/

table#baseinfo_table tr th#hover_btn_1 a,
table#baseinfo_table tr th#hover_btn_2 a {
	display: block;
	width: 85px;
	height: 19px;
	text-indent: -9999px;
}

table#baseinfo_table tr th#hover_btn_1 a {
	background: url(/sapa/images/img_sapa_23.jpg) 0px 0px;
}

table#baseinfo_table tr th#hover_btn_2 a {
	background: url(/sapa/images/img_sapa_24.jpg) 0px 0px;
}

table#baseinfo_table tr th#hover_btn_1 a:hover,
table#baseinfo_table tr th#hover_btn_2 a:hover {
	background-position: 0px -19px;
}/*20121128_add*/

ul#road_btn {
	margin-bottom: 5px;
}

ul#road_btn li {
	float: left;
}

ul#road_btn li#other_btn {
	width: 181px;
	background: url(/sapa/images/back_sapa_05.jpg) no-repeat;
	text-indent: 20px;
	font-size: 10px;
	line-height: 21px;
	margin-right: 5px;
	display: inline
}

ul#road_btn li#other_btn a {
	color: #000;
}

ul#road_btn li#other_btn a:hover {
	text-decoration: none;
}

/*SAPA個店マップの拡大*/
div#sapa_base_map {
	height: 21px;
	position: relative;
	margin-bottom: 10px;
}

div#sapa_base_map div#zoom_btn {
    text-align: right;
}

div#sapa_base_map div#zoom_btn a {  
	display: inline-block;
	height: 21px;
	cursor: default;
}
div#sapa_base_map div#zoom_btn a span.thumbnail{
    position:relative;
    display: inline-block;
    padding:2px 10px 2px 23px;
    background-color:#dadada;
    font-size:12px;
    color:#333;
    border-radius: 4px;
}
div#sapa_base_map div#zoom_btn a span.thumbnail:before{
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    background-color:#000;
    left:5px;
    top:6px;
}
div#sapa_base_map div#zoom_btn a span.thumbnail:after{
    content:"+";
    position:absolute;
    color:#fff;
    left:6px;
    top:2px;
    font-weight: bold;
}
    
    


div#sapa_base_map div#zoom_btn a:hover {  
	position: relative;  
    opacity:1;
}
div#sapa_base_map div#zoom_btn a:hover .thumbnail{
    background-color:#E1E1E1;
}

div#sapa_base_map div#zoom_btn a .zoom {  
	display: none;  
} 

div#sapa_base_map div#zoom_btn a:hover .zoom {
	width: 410px;
	height: 260px;
	display: block;  
	position: absolute;  
	top: -260px; 
	left: -410px;
	cursor: default;
    border:solid 4px #fff;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

/*ロードマップ*/
div#road_map_frame {
	height: 316px;
}
div#road_map_frame h2{
    display: flex;
    flex-wrap:wrap;
    background-color:#F1F1F1;
    border:solid 1px #ccc;
    border-radius:4px;
    padding:10px;
}
div#road_map_frame h2:before{
    content:none;
}

div#road_map_frame h2 span:first-child{
    white-space:nowrap;
    width:35%;
    display: flex;
    align-items: center;
}
div#road_map_frame h2 span:last-child{
    font-size:10px;
    font-weight: normal;
    width:65%;
    line-height:1.2;
}

div.road_info {
	padding: 5px 10px;
	border: 1px solid #cfcfcf;
	margin-bottom: 5px;
}

div.road_info h3 {
	border-bottom: 1px solid #cfcfcf;
	margin-bottom: 5px;
	color: #0099d2;
}

div.road_info table {
	width: 100%;
}

div.road_info table tr th,
div.road_info table tr td {
	border-bottom: 1px dotted #cfcfcf;
	text-align: left;
}

div.road_info table tr th#road_info_1,
div.road_info table tr th#road_info_2 {
	width: 40%;
}

div.road_info table tr th#road_info_3 {
	width: 20%;
}

/*div#road_info_none {
	margin-top: 275px;
	width: 100%;
	height: 1px;
}*/

/*div#road_info_up {
	margin-top: 275px;
}*/

div#west_map {/*ドラッグで動かすマップ*/
	width: 258px;
	height: 258px;
	border: 1px solid #cfcfcf;
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
}

div#west_map div#sapa_baloon2 {/*ポップアップバルーン*/
	display:none;
	width: 110px;
	position: absolute;/*仮表示用位置調整*/
	top: 30px;/*仮表示用位置調整*/
	left: 74px;/*仮表示用位置調整*/
}

div#west_map div#sapa_baloon_inner2 {
	padding: 5px;
	border: 2px solid #0095d3;
	background: #FFF;
	text-align: center;
}

div#west_map div#sapa_baloon_inner2 h5 {
	color: #0095d3;
	padding-bottom: 2px;
	margin-bottom: 2px;
	border-bottom: 1px dotted #0095d3;
}

div#west_map div#sapa_baloon_foot {
	height: 19px;
	background: url(/images/common/map_search/balloon_foot.png) no-repeat center top;
	margin-top: -2px;
}

/*サービスエリア・パーキングエリアからのお知らせ*/
ul#sapa_tab {
	margin-bottom: 10px;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    position:relative;
}
ul#sapa_tab:before {
    z-index: 1;
}
ul#sapa_tab:after {
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #1c93cf;
    z-index: 1;
}
ul#sapa_tab li{
    height:36px;
    z-index:0;
    font-size:11px;
    font-weight: bold;
    box-sizing: border-box;
    letter-spacing: -1px;
}
ul#sapa_tab li:nth-child(1){
    width:76px;
}
ul#sapa_tab li:nth-child(2){
    width:84px;
    margin:0 3px;
}
ul#sapa_tab li:nth-child(3){
    font-size:10px;
    width:94px;
    letter-spacing: -2px;
}
ul#sapa_tab li a{
    display: flex;
    align-items: center;
    width:100%;
    height:100%;
    color:#333;
    border-radius:6px 6px 0 0;
    border:solid 1px #ccc;
    border-bottom:none;
    box-sizing:border-box;
    padding-left:22px;
    position:relative;
}
ul#sapa_tab li[refsel^="sel"],
ul#sapa_tab li:hover{
    z-index:2;
}
ul#sapa_tab li:hover a{
    opacity:1;
}
ul#sapa_tab li[refsel^="sel"] a:after,
ul#sapa_tab li:hover a:after {
    content:"";
    position:absolute;
    bottom: 0px;
    border-bottom: 2px solid #fff;
    z-index: 6;
    width: 100%;
    left: 0;
}
ul#sapa_tab li#sapa_tab_1 a {
	background: url(/sapa/images/img_sapa_28.png) no-repeat 3px center;
    background-size:18px auto;
}
ul#sapa_tab li#sapa_tab_2 a {
	background: url(/sapa/images/img_sapa_29.png) no-repeat 3px center;
    background-size:18px auto;
    padding-left:24px;
}
ul#sapa_tab li#sapa_tab_3 a {
	background: url(/sapa/images/img_sapa_30.png) no-repeat 3px center;
    background-size:auto 18px;

}
div#sapa_panel {
	width: 260px;
}
div#sapa_panel div#sapa_panel_2,
div#sapa_panel div#sapa_panel_3 {
	display: none;
}
div#sapa_panel div ul li {
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px dotted #ccc;
}

div#sapa_panel div.list_btn {
	text-align: right;
}
div#sapa_panel div.list_btn a{
    position:relative;
    background-color:#1C93CF;
    color:#fff;
    font-size:10px;
    padding-left:10px;
    border-radius:4px;
    padding:3px 7px 2px 16px;
    display: inline-block;
}
div#sapa_panel div.list_btn a:before{
    position:absolute;
    content:"";
    top:6px;
    left:6px;
    border: 4px solid transparent;
    border-left: 4px solid #fff;
}
div#sapa_panel div ul li span {
	display: block;
	/*color: #0095d3;*/
	/*text-indent: 50px;*/
}

/*div#sapa_panel div ul li span.sapa_info_a {
	background: url(/images/index/img_index_20.jpg) no-repeat left center;
}

div#sapa_panel div ul li span.sapa_info_b {
	background: url(/images/index/img_index_21.jpg) no-repeat left center;
}

div#sapa_panel div ul li span.sapa_info_c {
	background: url(/images/index/img_index_22.jpg) no-repeat left center;
}*/

/*インフォメーション*/
ul#info_bn_list {
}

ul#info_bn_list li {
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px dotted #ccc;
}

ul#link_list li {
	float: left;
}

#panel {
	display: none;
}

/*最新イベントキャンペーン情報*/
ul#new_campaign_info {
}

ul#new_campaign_info li {
	padding-bottom: 7px;
	margin-bottom: 7px;
	border-bottom: 1px dotted #cfcfcf;
}

ul#new_campaign_info li div.campaign_detail {
	margin-bottom: 5px;
}

ul#new_campaign_info li div.campaign_detail p.campaign_img {
	float: left;
	width: 66px;
	display: inline;
	margin-right: 5px;
	height: 51px;
	padding: 1px;
	border: 1px solid #cfcfcf;
}

/*ピックアップ特集*/
ul#pick_up_list {
}

ul#pick_up_list li {
	margin-bottom: 5px;
}

/*ツールチップ*/
div#title-tip {
	margin: 0 1em 0 0;
	border: solid #ccc 1px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	padding: .3em .5em;
	background: #fff;
	opacity: .8;
	filter: alpha(opacity=80);
	font-size: 86%;
	white-space: nowrap;
}