map area {
	border : none;
	outline : none;
}
.mp_display_none {
	display : none !important;
}
.mp_visibility_off {
	visibility : hidden;
}
.zindex_top {
	z-index : 1;
}
article#mp_main_area {
	display : flex;
	position : relative;
	height : 100%;
	flex-direction: column;
}

#mp_map_header {
	width: 100%;
	height: 50px;
	z-index: 10;
	display: flex;
	justify-content: space-between;
}

#mp_area_notify_box {
	width: fit-content;
	display: flex;
}

.mp_map_header_fix_position {
	position: absolute;
	top: 0px;
	left: 0px;
}

#mp_info_area {
	position : relative ;
	overflow : hidden ;
	width: 100%;
	flex: 1;
}

#mp_info_box {
	width : 100% ;
	height : 100% ;
	transition-duration : 0.25s ;
}

#mp_map_area_base {
	width : 100%;
	height: 100%;
}

#mp_map_area {
	position : relative ;
	overflow : hidden ;
	float : left ;
	top : 0px ;
	background-color : rgba(245,245,245,1);
	display : flex;
	width : 100%;
	height: 100%;
}

#mp_map {
	width : 100%;
	height : 100%;
	position : relative;
	display : block;
}

/* 
* info area(エリア選択)
 */
#mp_area_select {
	position: relative;
	box-sizing: border-box;
	height: fit-content;
	padding: 6px;
	min-width: 182px;
}
#mp_area_list_box {
	position : relative;
	box-sizing : border-box;
	overflow : hidden;
	height: fit-content;
	background-color : #FF7F00;
	border-radius : 2px;
	box-shadow : 0px 2px 4px rgba(var(--color_black),var(--alpha_04));
	transition-duration : 0.25s;
	align-content: center;
}
.mp_area_list_fold{
	height : fit-content;
}
#mp_open_mark {
	box-sizing : border-box;
	width : 28px;
	font-size : 12px;
	text-align : center;
}

.mp_area_list_box_selected_area_name {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#mp_area_name {
	cursor : pointer;
	position : relative;
	box-sizing : border-box;
	font-size : 16px;
	font-weight: 500;
	padding: 6px;
	-webkit-tap-highlight-color: transparent;
}

#mp_area_select_ul {
	position : relative ;
	float : left;
	list-style : none;
	width : 100%;
	height : fit-content;
	max-height : 65dvh;
	overflow-y : scroll;
}

#mp_area_select_ul li {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	user-select : none ;
	-moz-user-select : none ;
	-webkit-user-select : none ;
	-ms-user-select : none ;
	width : 100% ;
	height : 36px ;
	background-color : rgba(var(--color_white), var(--alpha_025)) ;
	padding: 6px;
	margin-bottom : 1px ;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#mp_area_select_ul li:active {
	background-color : rgba(var(--color_white),var(--alpha_075)) ;
	color : #FF7F00 ;
}

#mp_area_select_ul span {
	display : block;
	box-sizing : border-box;
	width : 24px;
	height : 24px;
	color : #FF7F00;
	font-size : 14px;
	font-weight : 500;
	line-height : 24px;
	text-align : center;
	text-shadow : none;
	border-radius : 15px;
}

.mp_color_blue {
	color : #00ABF2 !important;
}
.mp_color_yellow {
	color : #FF9500 !important;
}
.mp_color_red {
	color : #D93636 !important;
}

/*
* data box (規制 menu) 
*/
#mp_info_data_box {
	position : relative ;
	width : 100% ;
	height : 100% ;
}
.mp_list_tab_area {
	display: flex;
	border-bottom : solid 3px #FF7F00;
	background : linear-gradient(0deg, rgba(var(--color_overlay),var(--alpha_02)) 0%, rgba(var(--color_overlay),var(--alpha_09)) 100%);
	align-items: end;
	height: 38px;
}
.mp_list_tab {
	flex: 1;
	box-sizing : border-box;
	display: flex;
	justify-content: center;
}
.mp_list_tab_on {
	position : relative;
	box-sizing : border-box;
	width : 135px;
	background : linear-gradient(0deg, rgba(var(--color_base_color),var(--alpha_10)) 0%, rgba(255,153,51,var(--alpha_10)) 100%);
	color : rgba(var(--color_white), var(--alpha_10)) ;
	line-height : 28px;
	text-align : center;
	text-shadow : 0px -1px 0px rgba(var(--color_black),var(--alpha_02));
	border-radius : 8px 8px 0px 0px;
}

.mp_list_tab_off {
	position : relative ;
	box-sizing : border-box ;
	width : 135px ;
	background : rgba(var(--color_black), var(--alpha_05)) ;
	color : rgba(var(--color_input_border), var(--alpha_10)) ;
	line-height : 30px ;
	text-align : center ;
	text-shadow : 0px -1px 0px rgba(var(--color_black), var(--alpha_02)) ;
	border-radius : 8px 8px 0px 0px ;
}

.mp_map_list_tab_common {
	margin: 0px 2px;
}

#mp_data_box_area_name {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	height : 50px ;
	font-size : 21px ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 14px ;
	padding-left : 25px ;
}

#mp_data_box {
	overflow : hidden ;
	width : 100% ;
	height: 100%;
	display: flex;
	flex-direction: column;
}

#mp_data_box .mp_loading_box {
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	width : 300px ;
	background-color : rgba(var(--color_base_color), 0.15) ;
	font-size : 10px ;
	font-weight : 500 ;
	line-height : 1em ;
	text-align : center ;
	transition-duration : 0.25s ;
	height : 80px;
}

.mp_loading_box_hide {
	height : 0px !important;
}
.mp_loading_box .mp_load_ani_icon {
	position : relative ;
	width : 24px ;
	height : 24px ;
	line-height : 1em ;
	margin-top : 21px ;
	margin-bottom : 5px ;
	margin-left : auto ;
	margin-right : auto ;
	animation-name : loadAniIcon ;
	animation-duration : 1.2s ;
	animation-fill-mode : both ;
	animation-play-state : running ;
	animation-iteration-count : infinite ;
	animation-timing-function : ease-in-out ;
}

.mp_loading_box .mp_load_ani_text {
	animation-name : loadAniText ;
	animation-duration : 1.2s ;
	animation-fill-mode : both ;
	animation-play-state : running ;
	animation-iteration-count : infinite ;
}

#mp_data_box_list_box_base {
	width: 100%;
	display: flex;
	flex: 1;
	min-height: 0;
}

#mp_data_box_list_kisei_count_box_base {
	width: 75px;
	height: 100%;
}


#mp_data_box_list_kisei_count_box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 6px;
	box-sizing: border-box;
	align-items: center;
}


#mp_data_box_list_kisei_count_box > div {
	margin: 6px 0px;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#mp_data_box_list_winter_count_box_base {
	width: 75px;
	height: 100%;
}

@media (orientation: landscape) and (max-height: 540px) {
	#mp_data_box_list_kisei_count_box_base,
	#mp_data_box_list_winter_count_box_base {
		overflow-y: scroll;
	}
}

#mp_data_box_list_winter_count_box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 6px;
	box-sizing: border-box;
	align-items: center;
}

@media (orientation: landscape) and (max-height: 540px) {
	#mp_data_box_list_kisei_count_box,
	#mp_data_box_list_winter_count_box {
		height: auto;
	}
}

#mp_data_box_list_winter_count_box > div {
	margin: 6px 0px;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mp_map_accident_closed_cnt {
	background-color: rgba(var(--color_closed), var(--alpha_10));
}
.mp_map_accident_ramp_cnt {
	background-color: rgba(var(--color_ramp), var(--alpha_10));
}
.mp_map_accident_snowChain_cnt {
	background-color: rgba(var(--color_snow_chain), var(--alpha_10));
}
.mp_map_accident_snowTires_cnt {
	background-color: rgba(var(--color_snow_tires), var(--alpha_10));
}
.mp_map_accident_jam_cnt {
	background-color: rgba(var(--color_jam), var(--alpha_10));
}
.mp_map_accident_oneLane_cnt {
	background-color: rgba(var(--color_one_lane), var(--alpha_10));
}
.mp_map_accident_accident_cnt {
	background-color: rgba(var(--color_accident), var(--alpha_10));
}
.mp_map_accident_snowPlow_cnt {
	background-color: rgba(var(--color_snow_plow), var(--alpha_10));
}
.mp_map_accident_antifreeze_cnt {
	background-color: rgba(var(--color_antifreeze), var(--alpha_10));
}
.mp_map_accident_rainCaution_cnt {
	background-color: rgba(var(--color_rain_caution), var(--alpha_10));
}

.mp_map_disable_accident_cnt {
	pointer-events: none;
}

#mp_data_box_list_box {
	position : relative ;
	flex: 1;
	height : 100% ;
}

#mp_data_box_list_box .mask_box {
	position : relative ;
	box-sizing : border-box ;
	overflow-x : hidden ;
	overflow-y : scroll ;
	scrollbar-width : none;
	-webkit-overflow-scrolling : touch ;
	width : 100%;
	height: 100%;

}
#mp_data_box_list_box .no_data {
	color       : rgba(var(--color_white), var(--alpha_10));
	font-weight : bold;
}
#mp_data_box_list_box .accident_area {
	position : relative ;
	box-sizing : border-box ;
	overflow-x : hidden ;
	scrollbar-width : none;
	-webkit-overflow-scrolling : touch ;
	width : 100%;
}

#mp_data_box_list_box .mp_list_box1 {
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	float : left ;
	width : 100% ;
	height : 100% ;
	overflow-y: auto;
	padding-bottom: 78px;
}

#mp_data_box_list_box .mp_list_box1 h5 {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	user-select : none ;
	-moz-user-select : none ;
	-webkit-user-select : none ;
	-ms-user-select : none ;
	top : 0px ;
	left : 0px ;
	height : 30px ;
	color : rgba(var(--color_white), var(--alpha_10)) ;
	font-size : var(--font_size_large) ;
	font-weight : var(--font_weight_normal) ;
	line-height : 1em ;
	text-align : left ;
	padding-top : 6px ;
	padding-left : 4px ;
	margin-bottom : 1px ;
}

#mp_data_box_list_box .mp_list_box1 .cnt_box {
	position : absolute ;
	box-sizing : border-box ;
	top : 3px ;
	right : 7px ;
	width : 24px ;
	height : 24px ;
	color : #666666 ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 5px ;
	border-radius : 12px ;
}

#mp_data_box_list_box .mp_list_box1 h6 {
	position : relative ;
	box-sizing : border-box ;
	height : 22px ;
	background : linear-gradient(0deg, rgba(var(--color_black), var(--alpha_00)) 0%, rgba(var(--color_black), var(--alpha_04)) 100%) ;
	color : rgba(var(--color_white), var(--alpha_10)) ;
	font-size : var(--font_size_large) ;
	font-weight : var(--font_weight_normal) ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 4px ;
	margin-bottom : 1px ;
}

#mp_data_box_list_box .mp_list_box1 ul {
	position : relative ;
	list-style : none ;
}

#mp_data_box_list_box .mp_list_box1 .text {
	position : relative ;
	color : #dddddd ;
	font-size : var(--font_size_medium) ;
	line-height : 18px ;
}

#mp_data_box_list_box .mp_list_box2 {
	position : relative ;
	box-sizing : border-box ;
	overflow : hidden ;
	height : 100%;
}

#mp_data_box_list_box .mp_list_box2 h6 {
	position : relative ;
	box-sizing : border-box ;
	height : 22px ;
	background : linear-gradient(0deg, rgba(var(--color_black), var(--alpha_00)) 0%, rgba(var(--color_black), var(--alpha_03)) 100%) ;
	color : rgba(var(--color_white), var(--alpha_10)) ;
	font-size : var(--font_size_large) ;
	font-weight : var(--font_weight_normal) ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 4px ;
	margin-bottom : 1px ;
}

#mp_data_box_list_box .mp_list_box2 ul {
	position : relative ;
	list-style : none ;
}

#mp_data_box_list_etc ul:last-child {
	padding-bottom: 78px;
}

/*
* その他の交通規制情報 
*/
#mp_data_box_list_etc li {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	min-height : 60px ;
	padding-top : 3px ;
	padding-bottom : 2px ;
	padding-left : 5px ;
	padding-right : 5px ;
	margin-bottom : 1px ;
}

#mp_data_box_list_etc .text {
	position : relative ;
	width : calc(100% - 58px);
	margin-right: 8px;
	color : #dddddd ;
	font-size : 14px ;
	line-height : 18px ;
}

#mp_data_box_list_etc span {
	color : #d9829f ;
}

#mp_data_box_list_etc .icon {
	position : absolute ;
	box-sizing : border-box ;
	top : 3px ;
	right : 3px ;
	width : 58px ;
	height : 54px ;
	background-color : #a7cc33 ;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* 
* mode box (map mode change button)
*/
#mp_map_mode_box {
	position : absolute;
	top : 170px;
	left : 12px;
}

@media (orientation: landscape) and (max-height: 540px) {
	#mp_map_mode_box {
		top: 70px;
		display: flex;
	}
}

#mp_map_mode_box .mp_map_mode_btn {
	position : relative ;
	box-sizing : border-box ;
	width : 44px ;
	height : 44px ;
	background-color : rgba(var(--color_overlay), var(--alpha_085)) ;
	line-height : 1em ;
	text-align : center ;
	padding : 2px ;
	box-shadow : 0px 2px 2px rgba(var(--color_black), var(--alpha_025)) ;
	transition-duration : 0.3s ;
}

#mp_map_mode_box .mp_map_mode_btn img {
	width : 40px ;
	height : 40px ;
}

#mp_map_mode_box .mp_map_mode_btn_selected {
	position : relative ;
	box-sizing : border-box ;
	width : 44px ;
	height : 44px ;
	background-color : rgba(var(--color_base_color), var(--alpha_10)) ;
	line-height : 1em ;
	text-align : center ;
	padding : 2px ;
	box-shadow : 0px 2px 2px rgba(var(--color_black), var(--alpha_04)) ;
	transition-duration : 0.3s ;
}

@media (orientation: landscape) and (max-height: 540px) {
	#mp_map_mode_box .mp_map_mode_btn_selected{
		box-shadow : 2px 0px 2px rgba(var(--color_black), var(--alpha_04)) ;
	}
}

#mp_map_mode_box .mp_map_mode_btn_selected img {
	width : 40px ;
	height : 40px ;
}

#mp_map_mode_box .mp_mode_icon_disable {
	display : block ;
	position : relative ;
	box-sizing : border-box ;
	width : 44px ;
	height : 44px ;
	background-color : rgba(var(--color_black), var(--alpha_06)) ;
	line-height : 1em ;
	text-align : center ;
	padding : 2px ;
	margin-bottom : 15px ;
	opacity : 0.25 ;
}

#mp_map_mode_box .mp_mode_icon_disable img {
	width : 40px ;
	height : 40px ;
}

#mp_map_mode_box_kisei {
	border-radius: 4px 4px 0px 0px;
}

#mp_map_mode_box_kisei_disable {
	border-radius: 4px 4px 0px 0px;
}

#mp_map_mode_box_snow {
	border-radius: 0px 0px 4px 4px;
	margin-bottom: 15px;
}

#mp_map_mode_box_snow_disable {
	border-radius: 0px 0px 4px 4px;
}

@media (orientation: landscape) and (max-height: 540px) {
	#mp_map_mode_box_kisei,
	#mp_map_mode_box_kisei_disable {
		border-radius: 4px 0px 0px 4px;
	}
}

@media (orientation: landscape) and (max-height: 540px) {
	#mp_map_mode_box_snow,
	#mp_map_mode_box_snow_disable {
		border-radius: 0px 4px 4px 0px;
	}
}

#mp_map_mode_box_camera {
	cursor : pointer ;
	margin-bottom: 15px;
	border-radius: 4px;
}

@media (orientation: landscape) and (max-height: 540px) {
	#mp_map_mode_box_snow,
	#mp_map_mode_box_snow_disable,
	#mp_map_mode_box_camera {
		margin-right: 15px;
	}
}

#mp_map_mode_box_camera.mp_map_mode_btn_selected:active {
	border-color : #FF5500 ;
	box-shadow : 0px 1px 4px rgba(var(--color_black), var(--alpha_04)) ;
	background-color : rgba(var(--color_base_color), var(--alpha_08)) ; 
	transition-duration : 0.3s ;
}

#mp_map_mode_box_help {
	border-radius: 4px;
}

.mp_map_disp_toggle_area ul {
	margin-left: 0;
	margin-right: 12px;
}

.mp_map_legend_li {
	display: flex;
	margin-top: 1px;
	align-items: center;
	box-sizing: border-box;
	padding-left: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.mp_map_legend_name {
	flex: 1;
	padding-left: 6px;
}

.mp_map_legend_disp_segment_button_area {
	height : 20px;
	width: 40px;
	display: flex;
	justify-content: center;
	margin-right: 6px;
}

.mp_map_legend_disp_segment_button_layout_base {
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	align-content : center ;
	width : 100% ;
	height : 100% ;
	box-sizing: border-box;
}
.mp_map_legend_disp_segment_button_layout_base li {
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	align-content : center ;
	text-align : center ;
	width: 20px;
	height: 20px;
}

.mp_map_legend_disp_segment_button_layout_base .mp_map_legend_disp_segment_button_selected {
	box-shadow : 0px 1px 4px var(--shadow_color) ;
}

.mp_map_legend_disp_segment_button_layout_base .mp_map_legend_disp_segment_button_off {
	color : rgba(51,34,18, var(--alpha_075)) ;
}


.mp_map_interchange_explanation_text {
	background-color: #e2dfda;
	border-radius: 999px;
	display: flex;
	margin: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
	justify-content: center;
	align-items: center;
}

/*
* map notify box
*/
#mp_map_notify_box {
position : relative;
	overflow : hidden;
	width : fit-content;
	border-radius : 4px;
	box-shadow : 0px 2px 3px rgba( var(--color_black), var(--alpha_03));
	height: fit-content;
	margin: auto 0;
}

#mp_notify_area_name {
	cursor : pointer ;
	position : relative ;
	box-sizing : border-box ;
	float : left ;
	line-height : 1em ;
	margin : 1px ;
	display : flex;
	align-items : center;
	justify-content : center;
	padding: 6px;
}
#mp_notify_area_overlay {
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

.mp_map_disp_toggle_area {
	width: fit-content;
}

@keyframes blink{
	0% {opacity:0;}
	100% {opacity:1;}
}

/*
* map key box
*/
.mp_map_key_box_full {
	height : 165px !important;
}

.mp_map_key_note_openPosition {
	top : 0px !important;
}

/* 
* camera
*/

div#layer_roadcam {
	top : 0px;
	left : 0px;
}

/* weather */
#mp_weather_div {
	top	 : 0px;
	left : 0px;
}

/* section mp_popArea*/
#mp_pop_area {
	position : fixed ;
	z-index : 900 ;
	overflow : hidden ;
	width : 100%;
	height : 100%;
	top : 0px;
	left : 0px; 
}

#mp_pop_cameralayer {
	position : relative ;
	z-index : 999 ;
	box-sizing : border-box ;
	width : 100% ;
	height : 100% ;
	background-color : rgba(var(--color_black), var(--alpha_08)) ;
	background-image : url(/sp/map/images/popback.png) ;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: flex;
	touch-action: pan-x ;
}

#mp_camera_pop_content_box {
	position: absolute;
	width: fit-content;
	height: fit-content;
	max-height: 90dvh;
	overflow: visible;
	top: 50%;
	transform: translateY(-50%);
	box-shadow: 0px 2px 4px rgba(var(--color_black), var(--alpha_02));
	border-radius: 8px;
}

#mp_pop_cameralayer_close_btn {
	position: absolute;
	overflow: hidden;
	top: 4px;
	right: 4px;
	width: 32px;
	height: 32px;
	background-color: rgba(var(--color_white));
	border-radius: 17px;
	z-index : 1;
}

#mp_pop_cameralayer_close_btn::before,
#mp_pop_cameralayer_close_btn::after {
	content: '';
	position: absolute;
	inset: 0;
	width: 18px;
	height: 4px;
	margin: auto;
	background-color: rgba(var(--color_off_button), var(--alpha_10));
}

#mp_pop_cameralayer_close_btn::before { 
	transform: rotate(45deg);
}

#mp_pop_cameralayer_close_btn::after  { 
	transform: rotate(-45deg);
}

#mp_camera_pop_content_box .mp_camera_scroll {
	position: relative;
	max-height: calc(90dvh - 50px); 
	overflow: auto;
	border-radius: 8px;
}

#mp_pop_cameralayer .title_box {
	position : relative ;
	width : 330px ;
	height : 40px ;
	background-color : rgba(var(--color_off_button), var(--alpha_10)) ;
	border-radius : 20px ;
	margin-bottom : 10px ;
	box-shadow : 0px 2px 8px rgba(var(--color_black), var(--alpha_085)) ;
}

#mp_pop_cameralayer .name_section {
	position : relative ;
	box-sizing : border-box ;
	width : 320px ;
	height : 40px ;
	line-height : 40px ;
	text-align : center ;
}

#mp_pop_cameralayer .photo_box {
	position : relative ;
	box-sizing : border-box ;
	width : 330px ;
	height : 285px ;
	text-align : center ;
	margin-left : auto ;
	margin-right : auto ;
	padding : 5px ;
	box-shadow : 0px 2px 8px rgba(var(--color_black), var(--alpha_085)) ;
}

#mp_pop_cameralayer .photos {
	position : relative ;
	width : 320px ;
	height : 240px ;
	background : linear-gradient(0deg, #222222 0%, #444444 100%) ;
}

#mp_pop_cameralayer .photos img {
	position : absolute ;
	top : 0px ;
	left : 0px ;
	width : 320px ;
	height : 240px ;
}

#mp_pop_cameralayer .btn_ctrl {
	cursor : pointer;
	position : relative;
	box-sizing : border-box;
	overflow : hidden;
	width : 320px;
	height : 30px;
	margin : 5px auto;
	display : block;
	line-height: 30px;
	text-decoration: underline;
	-webkit-tap-highlight-color: transparent;
}

#mp_pop_cameralayer .btn_ctrl:active {
	color : #FF5500 ;
	transition-duration : 0.3s ;
}

/*
* popup weather 
*/
#mp_pop_weatherlayer {
	position : relative ;
	box-sizing : border-box ;
	z-index : 999 ;
	width : 100% ;
	height: 100% ;
	background-color : rgba(38,165,255,0.8) ;
	background-image : url(/sp/map/images/popback.png) ;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: flex;
	touch-action: pan-x ;
}

#mp_weather_pop_content_box {
	position: absolute;
	width: fit-content;
	height: fit-content;
	max-height: 90dvh;
	overflow: visible;
	top: 50%;
	transform: translateY(-50%);
	box-shadow : 0px 2px 4px rgba( var(--color_black), var(--alpha_02)) ;
	border-radius: 8px;
}

#mp_weather_pop_content_box .mp_weather_scroll {
	position: relative;
	max-height: 90dvh;
	overflow: auto;
	border-radius: 8px;
}

#mp_pop_weatherlayer .mp_weather_pop_title_box {
	position : relative ;
	box-sizing : border-box ;
	width : 320px ;
	height: fit-content ;
	min-height : 48px ;
	background : linear-gradient(0deg, rgba(var(--color_white), var(--alpha_08)) 0%, rgba(var(--color_white), var(--alpha_095)) 100%) ;
	color : #1886f2 ;
	border-radius : 8px 8px 0px 0px ;
	box-shadow : 0px 2px 4px rgba(var(--color_black), var(--alpha_02)) ;
}

#mp_pop_weatherlayer .point_name {
	position : relative ;
	width : 100% ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 8px ;
}

#mp_pop_weatherlayer .update_text {
	position : relative ;
	width : 100% ;
	line-height : 1em ;
	text-align : center ;
	padding-top : 2px ;
}

#mp_weather_pop_obs_box {
	position : relative ;
	box-sizing : border-box ;
	width : 320px ;
	text-align : center ;
	padding : 4px ;
	margin-top : 1px;
	margin-left : auto ;
	margin-right : auto ;
	display: flex;
	align-items: center;
	justify-content: center;
}

#mp_obs_icon {
	display : inline-block ;
	overflow : hidden ;
	width : 60px ;
	height : 60px ;
	border-radius : 50% ;
	margin-right : 10px ;
}

#mp_obs_icon .color_none {
	background-color : #dddddd ;
}

#mp_obs_icon .color_sun {
	background-color : #ff9426 ;
}
#mp_obs_icon .color_cloud {
	background-color : #b1b1b1 ;
}
#mp_obs_icon .color_rain {
	background-color : #2625d8 ;
}
#mp_obs_icon .color_snow {
	background-color : #89bbee ;
}
#mp_obs_icon .color_sleet {
	background-color : #89bbee ;
}
#mp_obs_icon .color_heavySnow {
	background-color : #628bb3 ;
}
div#mp_pop_weather_summary {
	width : 235px;
	display : inline-block;
}
#mp_pop_weatherlayer .obs_table {
	width : 100%;
	display : flex;
	align-items : end;
	justify-content : start;
	flex-wrap : wrap;
	margin-top : 6px ;
	font-size : 16px ;
}
.obs_table .mp_pop_weatherlayer_obs_table_tr:nth-child(1) {
	margin-right : 8px ;
}
.mp_pop_weatherlayer_obs_table_tr div{
	display : block ;
	height : fit-content ;
	min-height : 22px ;
	line-height : 1em ;
	text-align : left ;
}
.mp_pop_weatherlayer_obs_table_tr span{
	display : inline-block ;
}
#mp_pop_weatherlayer .obs_index {
	color : #1886f2 ;
	width : 28px ;
}
#mp_pop_weatherlayer .obs_index2 {
	color : #1886f2 ;
	width : 28px ;
}
#mp_pop_weatherlayer .obs_index3 {
	color : #1886f2 ;
	width : 70px ;
}
#mp_pop_weatherlayer .obs_separate {
	width : 10px ;
	color : #1886f2 ;
	text-align : center ;
}
#mp_pop_weatherlayer .obs_val {
	color : rgba(var(--color_check_box_checked_before_border), var(--alpha_10)) ;
	width : auto ;
	min-width : 50px ;
}
#mp_pop_weatherlayer .obs_val2 {
	color : rgba(var(--color_check_box_checked_before_border), var(--alpha_10)) ;
	width : auto ;
}
#mp_pop_weatherlayer .weather_box {
	position : relative ;
	overflow-x : hidden ;
	overflow-y: visible ;
	width : 320px ;
	height: auto ;
	min-height : 100px ;
	line-height : 13px ;
	margin-top : 1px ;
	margin-left : auto ;
	margin-right : auto ;
	box-shadow : 0px 2px 4px rgba(var(--color_black), var(--alpha_02)) ;
}
#mp_pop_weatherlayer span.none_weather {
	width : 100%;
	background-color : rgba(var(--color_white), var(--alpha_10));
	display : block;
	line-height : 150px;
	text-align : center;
	position : relative;
	min-height : inherit;
	color : #1886f2;
	font-weight : bold;
}
#mp_pop_weatherlayer .weather_box ul {
	position : relative ;
	float : left ;
	list-style : none ;
	width : 63.2px ;
}

#mp_pop_weatherlayer .weather_box li:nth-child(1) {
	box-sizing : border-box ;
	width : 100% ;
	height : 60px ;
	font-size : var(--font_size_large) ;
	line-height : 18px ;
	text-align : center ;
	padding-top : 12px ;
	margin-bottom : 1px ;
}

#mp_pop_weatherlayer .weather_box li:nth-child(2) {
	box-sizing : border-box ;
	width : 100% ;
	height : 50px ;
	text-align : center ;
	margin-bottom : 1px ;
}

#mp_pop_weatherlayer .weather_box li:nth-child(3) {
	box-sizing : border-box ;
	width : 100% ;
	height : 60px ;
	text-align : center ;
	margin-bottom : 1px ;
}

#mp_pop_weatherlayer .weather_box li:nth-child(4) {
	box-sizing : border-box ;
	width : 100% ;
	height : 50px ;
	text-align : center ;
	margin-bottom : 1px ;
}

#mp_pop_weatherlayer .weather_box li:nth-child(5) {
	box-sizing : border-box ;
	width : 100% ;
	height : 50px ;
	text-align : center ;
	margin-bottom : 1px ;
}
#mp_pop_weatherlayer .weather_box li:nth-child(6) {
	box-sizing : border-box ;
	width : 100% ;
	height : 50px ;
	text-align : center ;
	margin-bottom : 1px ;
}
#mp_pop_weatherlayer .weather_box .index_list li {
	background-color : rgba(var(--color_white), var(--alpha_075)) ;
	color : #1886f2 ;
	font-size : var(--font_size_medium) ;
	border-bottom-color : rgba(0,26,102,0) ;
}

#mp_pop_weatherlayer .weather_box .weather_list {
	background-color : rgba(0,34,102,0.55) ;
	color : rgba(var(--color_white), var(--alpha_10)) ;
	margin-left : 1px ;
}

#mp_pop_weatherlayer .weather_box .weather_list li {
	background-color : rgba(0,34,102,0.4) ;
}

#mp_pop_weatherlayer .weather_box .val_text {
	display : inline-block ;
	font-size : 24px ;
	line-height : 1em ;
	padding-top : 7px ;
}
#mp_pop_weatherlayer .weather_box .unit {
	display : inline-block ;
	font-size : var(--font_size_x_small) ;
	line-height : 1em ;
	padding-top : 3px ;
}

#mp_pop_weatherlayer .mp_weather_pop_foot_box {
	position : relative ;
	width : 320px ;
	height : fit-content ;
	background : linear-gradient(0deg, rgba(var(--color_white), var(--alpha_08)) 0%, rgba(var(--color_white), var(--alpha_095)) 100%) ;
	text-align : center ;
	border-radius : 0px 0px 8px 8px ;
	margin-left : auto ;
	margin-right : auto ;
	box-shadow : 0px 2px 4px rgba(var(--color_black), var(--alpha_02)) ;
}

#mp_pop_weatherlayer .grgr {
	position : absolute ;
	width : 24px ;
	height : 24px ;
	line-height : 1em ;
	padding : 5px ;
	margin-left : auto ;
	margin-right : auto ;
	animation-name : loadAniIcon ;
	animation-duration : 1.2s ;
	animation-fill-mode : both ;
	animation-play-state : running ;
	animation-iteration-count : infinite ;
	animation-timing-function : ease-in-out ;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* pop_box */
#mp_pop_box {
	position : absolute ;
	width : 234px ;
	box-shadow : 0px 2px 3px rgba(var(--color_black), var(--alpha_04)) ;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#mp_pop_box_scroll {
	max-height: 450px;
	height: fit-content;
	overflow-y: scroll;
}

@media (orientation: landscape) and (max-height: 540px) {
	#mp_pop_box_scroll {
		max-height: 200px;
	}
}

#mp_pop_box .color8 {
	background-color : #e63900 ;
}

#mp_pop_box .title {
	position : relative ;
	box-sizing : border-box ;
	width : 234px ;
	color : rgba(var(--color_white), var(--alpha_10)) ;
	font-size : var(--font_size_large) ;
	line-height : 1em ;
	text-align : center ;
	padding : 4px ;
}

#mp_pop_box .road {
	position : relative ;
	box-sizing : border-box ;
	width : 234px ;
	background-color : rgba(var(--color_black), var(--alpha_01)) ;
	color : rgba(var(--color_check_box_checked_before_border), var(--alpha_10)) ;
	font-size : var(--font_size_medium) ;
	line-height : 1em ;
	text-align : center ;
	padding : 3px ;
}

#mp_pop_box .point {
	position : relative ;
	box-sizing : border-box ;
	width : 234px ;
	min-height : 60px ;
	color : rgba(var(--color_check_box_checked_before_border), var(--alpha_10)) ;
	font-size : var(--font_size_medium) ;
	line-height : 18px ;
	padding : 4px ;
	margin-top : 1px
}

#mp_pop_box .fillColor_closed {
	background-color : rgba(0,0,0,0.2) ;
}
#mp_pop_box .fillColor_ramp {
	background-color : rgba(191,72,124,0.1) ;
}
#mp_pop_box .fillColor_snowTires {
	background-color : rgba(33,107,217,0.1) ;
}
#mp_pop_box .fillColor_oneLane {
	background-color : rgba(45,179,45,0.1) ;
}
#mp_pop_box .fillColor_jam {
	background-color : rgba(255,148,0,0.15) ;
}
#mp_pop_box .fillColor_accident {
	background-color : rgba(230,0,0,0.1) ;
}
#mp_pop_box .fillColor_snowPlow {
	background-color : rgba(230,69,123,0.1) ;
}
#mp_pop_box .fillColor_antifreeze {
	background-color : rgba(204,204,0,0.1) ;
}
#mp_pop_box .fillColor8 {
	background-color : rgba(230,57,0,0.1) ;
}
#mp_pop_box .fillColor_underAdjustment {
	background-color : rgba(153,153,153,0.1) ;
}
#mp_pop_box .fillColor_snowChain {
	background-color : rgba(222,66,120,0.1) ;
}
#mp_pop_box .fillColor_rainCaution {
	background-color : rgba(222,66,120,0.1) ;
}
#mp_pop_box .point .jamText {
	width : 170px;
}
#mp_pop_box .point .jam {
	position : absolute;
	box-sizing : border-box ;
	top : 3px;
	right : 4px;
	width : 54px;
	height : 54px;
	background-color : rgb(var(--color_jam));
	color : rgba(var(--color_white), var(--alpha_10));
	text-align : center;
	font-size : 32px;
	padding-top : 7px;
	line-height : 1em;
	font-weight : var(--font_weight_semi_bold);
}

#mp_pop_box .point .jam span {
	position : absolute;
	left : 0px;
	bottom : 3px;
	width : 54px;
	height : 12px;
	line-height : 1em;
	text-align : center;
	font-size : var(--font_size_x_small);
}

/* SAPA box */
#mp_sp_box {
	position : absolute ;
	width : 180px ;
	min-height : 85px ;
	border-style : solid ;
	border-width : 2px ;
	border-color : #6bbf43 ;
	border-radius : 8px 8px 0px 8px ;
	box-shadow : 0px 2px 3px rgba(var(--color_black), var(--alpha_04)) ;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.mp_spap_point_name {
	position : relative ;
	box-sizing : border-box ;
	width : 234px ;
	min-height : 60px ;
	color : #6bbf43 ;
	font-size : var(--font_size_large) ;
	line-height : 18px ;
	padding : 0px 4px ;
	margin-top : 4px;
	text-align: center;
}

#mp_sapa_button_area {
	display: flex;
	width: 100%;
	margin: 4px 0px;
}

#mp_pop_box .btn {
	position : relative ;
	box-sizing : border-box ;
	flex: 1;
	height : 32px ;
	background-color : #6bbf43 ;
	color : rgba(var(--color_white), var(--alpha_10)) ;
	font-size : var(--font_size_medium) ;
	line-height : 1em ;
	border-radius : var(--border_radius_4) ;
}

.mp_sapa_link_img {
	width: 32px;
	height: 32px;
	background-image : url(/sp/map/images/iconMode3on.svg) ;
	background-size : 32px 32px ;
	background-repeat : no-repeat ;
}

#mp_pop_box .btn:last-child {
	margin-left : 4px ;
}

#mp_pop_box .btn:hover,#mp_pop_box .btnOne:active {
	background-color : #6bd936 ;
	box-shadow : 0px 1px 2px rgba(var(--color_black), var(--alpha_025)) ;
}
#mp_pop_box .btn a, #mp_pop_box .btnOne a{
	color : rgba(var(--color_white), var(--alpha_10));
}
#mp_pop_box .btnOne {
	position : relative;
	box-sizing : border-box;
	text-align : center;
	width : 226px;
	height : 32px;
	background-color : #6bbf43;
	color : rgba(var(--color_white), var(--alpha_10));
	font-size : var(--font_size_medium);
	line-height : 1em;
	border-radius : var(--border_radius_4);
}

.mp_sapa_link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

#mp_sp_name {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	background-color : #6bbf43 ;
	line-height : 1em ;
	text-align : center ;
	padding : 4px ;
}

#mp_sp_hw {
	position : relative ;
	box-sizing : border-box ;
	width : 100% ;
	background-color : rgba(var(--color_black), var(--alpha_01)) ;
	color : rgba(var(--color_check_box_checked_before_border), var(--alpha_10)) ;
	line-height : 1em ;
	text-align : center ;
	padding : 3px ;
}

#mp_balloon_camera {
	position : absolute;
	width : 270px;
	height : 50px;
	background-color : rgba(255, 127, 0, 0.75);
	left : 60px;
	border-radius : 20px;
	border : 2px outset #FF7F00;
	font-size : 11px;
	text-align : center;
	padding-top : 10px;
	top : 0px;
}

.unselectable {
	-webkit-touch-callout : none; /* iOS Safari */
	-webkit-user-select : none; /* Safari */
	-khtml-user-select : none; /* Konqueror HTML */
	-moz-user-select : none; /* Firefox */
	-ms-user-select : none; /* Internet Explorer/Edge */
	user-select : none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.mp_english_traffic_box_pos {
	position : absolute;
	top      : 70px;
	right    : 10px;
	display: flex;
	padding: 3px;
	align-items: center;
}