/* お勧め情報：共通 */

/* お勧め情報：メイン */
#rc_main {
	box-sizing       : border-box;
	padding-top      : 50px;
	height           : 100%;
	display          : flex;
	flex-direction   : column;
	align-items      : center;
	background-color : #e2eaf2;
}

#rc_main_title {
	position : relative;
}

#rc_main_title_text {
	box-sizing       : border-box;
	width            : 540px;
	height           : 40px;
	background-color : #ffffff;
	color            : #1894d2;
	font-size        : 22px;
	line-height      : 36px;
	text-align       : center;
	border           : 2px solid #1894d2;
	border-radius    : 20px;
}

#rc_main_menu {
	margin-top : 40px;
	display    : flex;
}

.rc_main_contents {
	cursor              : pointer;
	box-sizing          : border-box;
	width               : 200px;
	height              : 200px;
	background-color    : #1894d2;
	color               : #ffffff;
	border              : 1px solid #ffffff;
	border-radius       : 4px;
	margin              : 5px;
	box-shadow          : 0px 2px 2px rgba(0,0,0,0.25);
	display             : flex;
	flex-direction      : column;
	position            : relative;
	top                 : 0px;
	transition-duration : 0.15s;
}

.rc_main_contents:hover:not(.rc_main_contents_disable) {
	position   : relative;
	top        : -4px;
	box-shadow : 0px 6px 6px rgba(0,0,0,0.25);
}

.rc_main_contents_title {
	box-sizing      : border-box;
	width           : 100%;
	height          : 130px;
	font-size       : 32px;
	line-height     : 48px;
	text-align      : center;
	display         : flex;
	justify-content : center;
	align-items     : center;
}

.rc_main_contents_icon_area {
	flex            : 1;
	display         : flex;
	justify-content : center;
	align-items     : center;
}

.rc_main_contents_icon {
	box-sizing       : border-box;
	width            : 40px;
	height           : 40px;
	background-color : #fff;
	border-radius    : 20px;
}

.rc_main_contents_disable {
	cursor  : auto;
	opacity : 0.25;
}

#rc_main_sapastatus {
	display : none;
}

/* コンテンツ共通：メニュー */
#rc_common {
	box-sizing     : border-box;
	height         : 100%;
	display        : flex;
	flex-direction : column;
}

#rc_common_header {
	box-sizing       : border-box;
	height           : 50px;
	display          : flex;
}

#rc_common_header_menu {
	box-sizing       : border-box;
	width            : 240px;
	padding          : 8px 10px;
	background-color : rgba(0,0,0,0.65);
}

#rc_common_header_menu_box {
	box-sizing          : border-box;
	width               : 220px;
	height              : 32px;
	overflow            : hidden;
	color               : #ffffff;
	background-color    : #1894d2;
	border              : 1px solid #ffffff;
	border-radius       : 3px;
	box-shadow          : 0px 2px 2px rgba(0,0,0,0.4);
	transition-duration : 0.25s;
	align-items         : center;
	cursor              : pointer;
	position            : relative;
	z-index             : 1;
}

#rc_common_header_menu_title {
	position : relative;
}

#rc_common_header_menu_text {
	width       : 190px;
	height      : 30px;
	font-size   : 20px;
	line-height : 30px;
	text-align  : center;
}

#rc_common_header_menu_icon {
	font-size : 12px;
	position  : absolute;
	top       : 7px;
	right     : 7px;
}

#rc_common_header_menu_list {
	box-sizing : border-box;
	position   : relative;
	list-style : none;
}

#rc_common_header_menu_list > li {
	box-sizing       : border-box;
	margin-top       : 1px;
	width            : 100%;
	height           : 30px;
	background-color : rgba(255,255,255,0.75);
	color            : #1894d2;
	font-size        : 16px;
	line-height      : 30px;
	text-align       : center;
}

#rc_common_header_menu_list > li:hover:not(.rc_common_menu_disable) {
	background-color : rgba(255,255,255,1);
}

.rc_common_menu_disable {
	cursor : auto;
	color  : #ffbf80 !important;
}

#rc_common_header_setting {
	margin-left      : 1px;
	flex             : 1;
	background-color : rgba(0,0,0,0.65);
}

#rc_common_contents_base {
	flex       : 1;
	width      : 100%;
	overflow-x : hidden;
}

#rc_common_contents {
	box-sizing       : border-box;
	padding-top      : 20px;
	width            : calc(100% + 17px);
	height           : 100%;
	overflow-y       : scroll;
	display          : flex;
	justify-content  : center;
	background-color : #e2eaf2;
}

/* 雪道ライブカメラ：設定 */
#rc_common_setting_snowcamera {
	box-sizing : border-box;
	width      : 100%;
	height     : 100%;
	display    : flex;
}

#rc_setting_snowcamera_area {
	display         : flex;
	flex-direction  : column;
	justify-content : center;
	margin-left     : 20px;
}

#rc_setting_snowcamera_area > p {
	color       : #ffffff;
	font-size   : 12px;
	line-height : 12px;
}

#rc_setting_snowcamera_area_select {
	box-sizing         : border-box;
	margin-top         : 3px;
	height             : 22px;
	width              : 235px;
	padding-left       : 5px;
	color              : #595959;
	font-size          : 12px;
	border             : none;
	border-radius      : 3px;
	appearance         : none;
	-webkit-appearance : none;
	background         : url(/pcsite/common/images/select_icon.svg) no-repeat right , linear-gradient(0deg,#f2f2f2 0%,#ffffff 100%);
	background-size    : 20px 100%;
}

#rc_setting_snowcamera_area_select::-ms-expand {
	display : none;
}

#rc_setting_snowcamera_area_select >option {
	font-weight      : normal;
	color            : black;
	font-size        : 13px;
	background-color : #f2f5f7;
	cursor           : pointer;
}

/* 雪道ライブカメラ：コンテンツ */
#rc_snowcamera_area {
	display          : flex;
	flex-direction   : column;
	width            : 750px;
}

.rc_snowcamera_road {
	display          : flex;
	flex-direction   : column;
	flex             : none;
}

.rc_snowcamera_road_label {
	background-color : #7ec4e6;
	border           : 2px solid #b5ddf1;
	border-radius    : 30px;
	color            : #ffffff;
	font-size        : 18px;
	height           : 26px;
	padding-left     : 10px;
}

.rc_snowcamera_road_info {
	background-color : #ffffff;
	padding          : 5px 15px 5px 15px;
	margin           : 5px 0px 15px;
	display          : flex;
	flex-wrap        : wrap;
	border-radius	 : 10px;
}

.rc_snowcamera_road_box {
	width   : 110px;
	cursor  : pointer;
	margin  : 5px 5px 5px 5px;
}

.rc_snowcamera_road_camera {
	text-align : center;
}

.rc_snowcamera_road_camera >img {
	height : 75px;
	width  : 100px;
}

.rc_snowcamera_road_name {
	text-align : center;
	width      : 110px;
	font-size  : 13px;
	word-break : break-all;
}

/* 雪道ライブカメラ:popup */
#rc_pop_area {
    position : absolute;
    overflow : hidden;
    width    : 100%;
    height   : 100%;
    top      : 0px;
    left     : 0px;
}

#rc_pop_camera {
    position         : relative;
    z-index          : 1;
    box-sizing       : border-box;
    width            : 100%;
    height           : 100%;
    background-color : rgba(0,0,0,0.8);
    background-image : url(/pcsite/map/images/popback.png);
}

#rc_pop_camera .title_box {
	position         : relative ;
	width            : 330px ;
	height           : 40px ;
	background-color : #808080 ;
	border-radius    : 20px ;
	margin-left      : auto ;
	margin-right     : auto ;
	margin-bottom    : 10px ;
	box-shadow       : 0px 2px 8px rgba(0,0,0,0.85) ;
}

#rc_pop_camera .name_highway {
	position    : relative ;
	box-sizing  : border-box ;
	width       : 320px ;
	height      : 18px ;
	font-size   : 14px ;
	color       : #ffffff ;
	line-height : 1em ;
	text-align  : center ;
	padding-top : 3px ;
}

#rc_pop_camera .name_section {
	position    : relative ;
	box-sizing  : border-box ;
	width       : 320px ;
	height      : 22px ;
	font-size   : 18px ;
	color       : #ffffff ;
	line-height : 1em ;
	text-align  : center ;
}

#rc_pop_camera .btn_close {
	cursor           : pointer ;
	position         : absolute ;
	overflow         : hidden ;
	top              : 3px ;
	right            : 3px ;
	width            : 32px ;
	height           : 32px ;
	background-color : #808080 ;
	border-style     : solid ;
	border-width     : 1px ;
	border-color     : #808080 ;
	border-radius    : 17px ;
}

#rc_pop_camera .btn_close:hover {
	background-color : #1ba4d2 ;
	border-color     : #1ba4d2 ;
}

#rc_pop_camera .photo_box {
	position         : relative ;
	box-sizing       : border-box ;
	width            : 330px ;
	height           : 350px ;
	background-color : #ffffff ;
	text-align       : center ;
	border-radius    : 4px ;
	margin-left      : auto ;
	margin-right     : auto ;
	padding          : 5px ;
	box-shadow       : 0px 2px 8px rgba(0,0,0,0.85) ;
}

#rc_pop_camera .direct0 {
	position         : relative ;
	box-sizing       : border-box ;
	width            : 320px ;
	height           : 30px ;
	background-color : #808080 ;
	color            : #ffffff ;
	font-size        : 18px ;
	line-height      : 1em ;
	text-align       : center ;
	padding-top      : 6px ;
}

#rc_pop_camera .direct1 {
	position         : relative ;
	box-sizing       : border-box ;
	width            : 320px ;
	height           : 30px ;
	background-color : #808080 ;
	color            : #ffffff ;
	font-size        : 18px ;
	line-height      : 1em ;
	text-align       : center ;
	padding-top      : 6px ;
}

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

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

#rc_pop_camera .btn_ctrl {
	cursor           : pointer ;
	position         : relative ;
	box-sizing       : border-box ;
	overflow         : hidden ;
	width            : 32px ;
	height           : 32px ;
	background-color : #808080 ;
	border-style     : solid ;
	border-width     : 1px ;
	border-color     : #808080 ;
	border-radius    : 16px ;
	margin           : 5px auto 5px auto ;
}

#rc_pop_camera .btn_ctrl:hover {
	background-color    : #1ba4d2 ;
	border-color        : #1ba4d2 ;
	box-shadow          : 0px 0px 6px rgba(27,164,210,1) ;
	transition-duration : 0.3s ;
}

#rc_pop_camera .grgr {
	position                  : absolute ;
	bottom                    : 7px ;
	left                      : 148px ;
	width                     : 24px ;
	height                    : 24px ;
	background-color          : rgba(255,255,255,1) ;
	line-height               : 1em ;
	padding                   : 5px ;
	border-radius             : 20px ;
	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 ;
}