/* Search：Common */

/* Search：Main */
#sr_search {
	display        : flex;
	height         : 100%;
	width          : 100%;
	flex-direction : column;
}

.sr-line_gray {
	height     : 0;
	border-top : 1px solid #CEBBA9;
	margin     : 0px 12px;
}

.sr-line_white {
	height     : 0;
	border-top : 1px solid #FFFAF5;
	margin     : 0px 12px;
}

.sr_search_conditions_select_size {
	height:30px;
}

.sr_search_conditions_common_button {
	width           : 100px;
	height          : 44px;
	margin          : 10px auto;
	display         : flex;
	justify-content : center;
	align-items     : center;
	box-sizing      : border-box;
}

.sr_search_conditions_common_button:active {
	border-color : rgba(var(--color_white), var(--alpha_10));
	box-shadow   : 0px 2px 6px rgba(var(--color_overlay), var(--alpha_04)) ;
}

/* SearchConditions */
#sr_search_conditions_area {
	margin       : 24px;
}

.sr_search_conditions_title_box_common {
	width         : 100%;
	height        : 44px;
	background    : linear-gradient(0deg, #F26500 0%, #FFA019 100%);
	display       : flex;
	align-items   : center;
	padding       : 2px;
	box-sizing    : border-box;
}

.sr_search_conditions_title_box_common::after {
	content      : '';
	position     : relative;
	width        : 10px;
	height       : 10px;
	border       : solid 1px rgba(var(--color_label), var(--alpha_10));
	border-top   : none;
	border-left  : none;
	margin       : auto;
	margin-right : 10px;
	transform    : rotate(-45deg);
	border-width: 2px;
}

.sr_search_conditions_road_title_name {
	margin-left : 10px;
}

.sr_search_conditions_road {
	margin : 12px 6px;
	text-align: center;
	overflow : hidden;
}

.sr_search_road_title {
	background-color: rgba(248, 166, 85, 1);
}

.sr_search_select_area {
	position: relative;
	margin : 12px;
}

#sr_search_conditions_road_road {
	margin-top : 10px;
}

/* SearchConditions：IC */
#sr_search_conditions_ic_area {
	margin-top : 24px;
}

#sr_search_conditions_ic_select_box {
	display         : flex;
	justify-content : center;
	height          : 48px;
	box-sizing      : border-box;
	padding         : 6px;
}

#sr_searchIc_area {
	display        : flex;
	flex-direction : column;
	height         : 100%;
}

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

.sr_search_conditions_ic_box {
	display          : flex;
	flex-direction   : column;
}

.sr_select_bar {
	width : 240px;
}

.sr_toggle_on {
	background-color : rgba(var(--color_base_color), var(--alpha_10));
	color            : rgba(var(--color_white), var(--alpha_10));
}

.sr_toggle_off {
	color            : rgba(var(--color_font), var(--alpha_10));
}

/* SearchConditions：IC：Input */
#sr_search_conditions_ic_input_button {
	margin : 10px auto;
}

/* SearchConditions：IC：Road */
#sr_search_conditions_ic_conditions_road_box {
	margin : 12px 6px;
}

#sr_search_conditions_ic_conditions_input_box {
	margin : 12px 6px;
}

#sr_search_conditions_ic_conditions_road_dep_box {
	display        : flex;
	flex-direction : column;
	margin         : 0px 0px 12px 0px;
}

#sr_search_conditions_ic_conditions_road_arr_box {
	display        : flex;
	flex-direction : column;
	margin         : 0px 0px 12px 0px;
}

#sr_search_conditions_ic_conditions_road_car_box {
	margin         : 0px 0px 12px 0px;
}

#sr_search_conditions_ic_conditions_road_sort_box {
	margin         : 0px 0px 12px 0px;
}

#sr_search_conditions_ic_conditions_input_dep_box {
	display        : flex;
	flex-direction : column;
	margin         : 0px 0px 12px 0px;
}

#sr_search_conditions_ic_conditions_input_arr_box {
	display        : flex;
	flex-direction : column;
	margin         : 0px 0px 12px 0px;
}

#sr_search_conditions_ic_conditions_input_car_box {
	margin         : 0px 0px 12px 0px;
}

#sr_search_conditions_ic_conditions_input_sort_box {
	margin         : 0px 0px 12px 0px;
}

.sr_search_conditions_ic_conditions_box_padding {
	padding : 12px 12px 6px 12px;
}

#sr_searchIc_area select {
	margin-bottom : 6px;
	height : 30px;
}

#sr_search_conditions_ic_conditions_input_box input {
	margin-bottom : 6px;
	width : 100%;
	height : 36px;
	padding : 0px 12px;
	box-sizing: border-box;
}

#sr_search_conditions_ic_road_button {
	margin : 10px auto;
}

#sr_search_result_welcome_guidance {
	position         : relative;
	box-sizing       : border-box;
	text-align       : left;
	min-height       : 86px;
	padding          : 12px 12px 12px 90px;
	margin           : 24px 24px 0px;
	border           : 2px solid rgba(var(--color_base_color), var(--alpha_08));
}

#sr_search_result_welcome_guidance .sr_icon{
	position : absolute;
	top      : 50%;
	left     : 7px;
	width    : 76px;
	height   : 70px;
	transform: translateY(-50%);
}

#sr_search_result_welcome_warning {
	padding          : 12px;
	box-sizing       : border-box;
	margin           : 12px 24px 24px;
}

.sr_search_result_welcome_link {
	color           : #00aaff;
	text-decoration : underline;
}

.sr_search_result_welcome_link:active {
	color  : #ff8000;
	cursor : pointer;
}

/* SearchResult：Road */
#sr_search_result_road_area {
	height : 100%;
	width  : 100%;
}

#sr_search_result_road_box {
	height          : 100%;
	width           : 100%;
	margin          : 0 auto;
	display         : flex;
	justify-content : center;
	align-items     : center;
	flex-direction  : column;
}

/* SearchResult：Road：Header */
#sr_search_result_road_header_box {
	width          : 270px;
	margin-top     : 12px;
	display        : flex;
	flex-direction : column;
}

#sr_search_result_road_header_tab {
	height          : 40px;
	display         : flex;
	justify-content : space-between;
}

.sr_search_result_road_header_tab_common {
	width                   : 100%;
	display                 : flex;
	justify-content         : center;
	align-items             : center;
	border-bottom           : none;
	border-top-left-radius  : 10px;
	border-top-right-radius : 10px;
	box-sizing              : border-box;
	margin                  : 0 2px;
}

.sr_search_result_road_header_tab_selected {
	color            : rgba(var(--color_white), var(--alpha_10));
	background-color : rgba(var(--color_base_color), var(--alpha_10));
}

/* SearchResult：Road：Traffic */
#sr_search_result_road_traffic_area {
	width      : 100%;
	flex       : 1;
	overflow-x : hidden;
}

#sr_search_result_road_traffic_area_margin {
	margin : 10px 20px;
}

#sr_search_result_road_traffic_button {
	height           : 40px;
	display          : flex;
	justify-content  : center;
	align-items      : center;
	width            : 100%;
	list-style       : none;
	border-top       : 3px solid rgba(var(--color_base_color), var(--alpha_10));
}

.sr_search_result_road_traffic_area {
	border-top : 3px solid rgba(var(--color_base_color), var(--alpha_10));
}

.sr_search_result_road_traffic_junction_area {
	width           : 100%;
	height          : 100%;
	display         : flex;
	flex-direction  : column;
	justify-content : center;
	align-items     : center;
	margin          : 18px;
}

.sr_search_result_road_traffic_junction_box {
	display         : flex;
	flex-direction  : column;
	justify-content : center;
	align-items     : center;
	box-sizing      : border-box;
	min-width       : 300px;
	width           : 100%;
	position        : relative;
}

.sr_search_result_road_traffic_junction_title {
	display         : flex;
	flex-direction  : column;
	justify-content : center;
	align-items     : center;
}

.sr_search_result_road_traffic_junction_list {
	display                    : flex;
	flex-direction             : column;
	justify-content            : center;
	align-items                : center;
	box-sizing                 : border-box;
	min-width                  : 300px;
	width                      : 100%;
	padding                    : 6px 6px 12px;
	border-bottom-left-radius  : var(--border_radius_8);
	border-bottom-right-radius : var(--border_radius_8);
}

.sr_search_result_road_traffic_junction_list_item {
	width           : 100%;
	height          : 40px;
	margin          : 1px 0;
	display         : flex;
	justify-content : flex-start;
	align-items     : center;
	padding-left    : 5px;
	box-sizing      : border-box;
}

.sr_search_result_road_traffic_junction_list_item:active {
	color: rgba(var(--color_base_color), var(--alpha_10));
}

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

.sr_search_result_road_traffic_button_selected {
	color            : rgba(var(--color_white), var(--alpha_10));
	background-color : rgba(var(--color_base_color), var(--alpha_10));
}

.sr_search_result_road_traffic_info_none {
	padding          : 30px;
	line-height      : 22px;
}

/* SearchResult：Road：Time */
#sr_search_result_road_time_area {
	width      : 100%;
	flex       : 1;
	overflow-x : hidden;
}

#sr_search_result_road_time_title_box {
	height       : 30px;
	border-left  : 1px solid #ff8000;
	border-right : 1px solid #ff8000;
	display      : flex;
}

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

#sr_search_result_road_time_list_area {
	flex       : 1;
	overflow-y : scroll;
	width      : 100%;
	scrollbar-width : none;
}

#sr_search_result_road_time_list_box {
	display        : flex;
	margin-bottom  : 10px;
	border-radius  : 0px 0px 4px 4px;
	padding-bottom : 20px;
}

@supports (-ms-ime-align:auto) { /* for Edge */
	#sr_search_result_road_time_list_box {
		width      : 650px;
		box-sizing : border-box;
	}
}

.sr_search_result_road_time_ic_junction_box {
	height   : fit-content;
	position : relative;
}

.sr_search_result_road_time_ic_junction {
	position : absolute;
	top      : -13%;
	left     : 95%;
}

.sr_search_result_road_time_ic_left {
	width        : 50%;
	margin-right : auto;
}

.sr_search_result_road_time_ic_right {
	width       : 50%;
	margin-left : auto;
}

.sr_search_result_road_time_route {
	height   : 40px;
	margin  : 5px 0;
	display  : flex;
	position : relative;
}

.sr_search_result_road_time_route:has(:not(:empty)) {
	background-image: url(/sp/common/images/bg_route_ic_list.svg);
	background-size: 100% 50px;
	background-position: center;
	background-repeat: no-repeat;
}

.sr_search_result_road_time_route > div {
	flex            : 1;
	display         : flex;
	justify-content : center;
	align-items     : center;
	flex-direction : column;
}

.sr_search_result_road_time_route_left {
	position       : absolute;
	top            : 50%;
	left           : 0;
	transform      : translate(-50%, -50%);
	width          : 95px;
    height         : 40px;
}

.sr_search_result_road_time_route_right {
	position       : absolute;
	top            : 50%;
	right          : 0;
	transform      : translate(50%, -50%);
	width          : 95px;
    height         : 40px;
}

/* SearchResult：IC */
#sr_search_result_ic_area {
	height   : 100%;
	width    : 100%;
	position : relative;
	top      : 0px;
	left     : 0px;
}

#sr_search_result_ic_box {
	height         : 100%;
	width          : 100%;
	margin         : 0 auto;
	display        : flex;
	align-items    : center;
	flex-direction : column;
}

/* SearchResult：IC：Header */

/* SearchResult：IC：Price */
#sr_search_result_ic_price_total_area {
	display         : flex;
	flex-direction  : column;
	justify-content : center;
	width           : 100%;
}

#sr_search_result_ic_price_area {
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	width           : 100%;
	margin-top      : 10px;
}

#sr_search_result_ic_price_route_message_area {
	display        : flex;
	flex-direction : column;
	height         : fit-content;
	margin         : 0 5px;
}

#sr_search_result_ic_price_multiple_route_message_area {
	width       : 100%;
	display     : flex;
	height      : fit-content;
	display: inline;
}

#sr_search_result_ic_price_message_box {
	width      : 100%;
	height     : fit-content;
}

#sr_search_result_ic_price_message_area {
	margin-top : 5px;
	padding    : 5px;
	height     : fit-content;
}

#sr_search_result_ic_price_message_box a {
	color           : #00aaff;
	text-decoration : underline;
}

#sr_search_result_ic_price_message_box a:active {
	color  : #ff8000;
	cursor : pointer;
}

#sr_search_result_ic_price_detail_box {
	min-width       : 170px;
	height          : 30px;
	border-radius   : 5px;
	display         : flex;
	justify-content : center;
	align-items     : center;
	margin-right    : 8px;
}

#sr_search_result_ic_price_detail_box:active {
	border-color : rgba(var(--color_white), var(--alpha_10));
	box-shadow : 0px 2px 6px 0px var(--shadow_color);
}

#sr_search_result_ic_price_detail_box_title {
	margin-left : 10px;
}

#sr_search_result_ic_price_detail_box_icon {
	width       : 20px;
	height      : 20px;
	margin-left : 5px;
}

/* SearchResult：IC：Info */
#sr_search_result_ic_info_area {
	width          : 100%;
	flex           : 1;
	padding-top    : 20px;
	display        : flex;
	flex-direction : column;
	overflow-y     : hidden; /* for FireFox */
}

#sr_search_result_ic_traffic_button {
	height           : 40px;
	display          : flex;
	justify-content  : center;
	align-items      : center;
	list-style       : none;
	border-left      : 1px solid #ff8000;
	border-right     : 1px solid #ff8000;
}

/* SearchResult：IC：Info：Tab */
#sr_search_result_ic_info_tab_box {
	display         : flex;
	justify-content : center;
	padding         : 0px 6px;
}

.sr_search_result_ic_info_tab_common {
	width                   : 110px;
	padding                 : 10px 5px;
	border-top-left-radius  : 10px;
	border-top-right-radius : 10px;
	border-top              : 2px solid rgba(var(--color_base_color), var(--alpha_10));
	border-left             : 2px solid rgba(var(--color_base_color), var(--alpha_10));
	border-right            : 2px solid rgba(var(--color_base_color), var(--alpha_10));
	text-align              : center;
	box-sizing              : border-box;
	margin                  : 0 2px;
}

/* SearchResult：IC：Info：Detail */
#sr_search_result_ic_info_detail_area {
	flex           : 1;
	display        : flex;
	flex-direction : column;
	border-top     : 2px solid #ff8000;
	overflow-y     : hidden; /* for FireFox */
}

/* SearchResult：IC：Info：Detail：Header */
.sr_search_result_ic_info_detail_header {
	display       : flex;
	border-bottom : 1px solid #ff8000;
}

/* SearchResult：IC：Info：Detail：Myroute Add , Jam Prediction */
#sr_search_result_ic_info_detail_button_box {
	padding          : 10px;
	background-color : #fff7ec;
	display          : flex;
	justify-content  : center;
	align-items      : center;
}

#sr_search_result_ic_info_detail_add_button {
	width           : 160px;
	height          : 35px;
	display         : flex;
	align-items     : center;
	justify-content : center;
	margin-right    : 10px;
}

#sr_search_result_ic_info_detail_add_button:active {
	border-color : rgba(var(--color_white), var(--alpha_10));
	box-shadow   : 0px 2px 6px rgba(var(--color_overlay), var(--alpha_04)) ;
}

#sr_search_result_ic_info_detail_add_button_icon {
	width  : 18px;
	height : 18px;
}

#sr_search_result_ic_info_detail_add_button_title {
	margin-left : 5px;
	font-size   : 15px;
}

#sr_search_result_ic_info_detail_prediction_button {
	width           : 160px;
	height          : 35px;
	border          : 2px solid rgba(255, 204, 153, 1);
	display         : flex;
	align-items     : center;
	justify-content : flex-start;
	margin-left     : 10px;
}

#sr_search_result_ic_info_detail_prediction_button:active {
	border-color : rgba(var(--color_white), var(--alpha_10));
	box-shadow   : 0px 2px 6px rgba(var(--color_overlay), var(--alpha_04)) ;
}

#sr_search_result_ic_info_detail_prediction_button_icon {
	width  : 18px;
	height : 18px;
	margin : 0 10px;
}

#sr_search_result_ic_info_detail_prediction_button_title {
	margin-left : 5px;
	font-size   : 15px;
}

/* SearchResult：IC：Info：Detail：Info */
#sr_search_result_ic_info_detail_info_area {
	flex             : 1;
	padding          : 6px;
	display          : flex;
	overflow-y       : hidden; /* for FireFox */
}

/* SearchResult：IC：Info：Detail：Info：IC */
.sr_search_result_ic_info_detail_info_traffic_info_detail {
	flex         : 1;
	padding-left : 10px;
}

.sr_search_result_ic_info_detail_info_traffic_info_none {
	padding : 30px;
}

/* Jam Prediction : Search */
#sr_search_prediction_base {
	width            : 330px;
	max-width        : 90%;
	height           : 100%;
	line-height      : 20px;
	display          : flex;
	flex-direction   : column;
	justify-content  : center;
	box-sizing       : border-box;
	padding          : 50px 0px;
}

#sr_search_prediction_base_background {
	position   : relative;
	height     : fit-content;
	max-height : 100%;
}

#sr_search_prediction_box {
	max-height : calc(100% - 24px);
	height     : fit-content;
	overflow-y : auto;
}

#sr_search_prediction_box_area {
	height    : 100%;
	max-height: 90%;
}

#sr_search_prediction_title_area {
	width            : 100%;
	height           : 24px;
	display          : flex;
	justify-content  : space-between;
	padding          : 0px 10px;
	box-sizing       : border-box;
	align-items      : center;
}

#sr_search_prediction_close_button {
	width         : 30px;
	height        : 30px;
	border-radius : 15px;
	box-sizing    : border-box;
	padding       : 6px;
}

#sr_search_prediction_close_button:active {
	border-color : white;
}

#sr_search_prediction_contets_area {
	padding       : 10px 5px;
	box-sizing    : border-box;
	position      : relative;
	top           : 0px;
	left          : 0px;
	height        : fit-content;
}

#sr_search_prediction_route_distance {
	flex            : 1;
	display         : flex;
	padding         : 6px 0px;
}

#sr_search_prediction_route_distance_title {
	width : 2.5em;
}

#sr_search_prediction_route_time_title {
	width        : fit-content;
	margin-right : 0.5em;
	margin-left  : 1em;
}

#sr_search_prediction_route_info_area {
	position : relative;
	top      : 0px;
	left     : 0px;
}

#sr_search_prediction_route_info {
	padding          : 5px;
	white-space      : nowrap;
	text-overflow    : ellipsis;
	overflow         : hidden;
	width            : 100%;
	box-sizing       : border-box;
}

#sr_search_prediction_route_info_all {
	box-shadow       : 4px 4px 6px rgba(0,0,0,0.3);
	padding          : 5px;
	position         : absolute;
	width            : 100%;
	box-sizing       : border-box;
	top              : 0px;
	left             : 0px;
	line-height      : 20px;
}

/* Jam Prediction : Result */
#sr_search_prediction_search_caution_text {
	padding : 10px;
}

#sr_search_prediction_result_contets_area {
	padding : 10px;
	flex    : 1;
}

#sr_search_prediction_result_info_arrival_time {
	text-align : center;
	margin     : 5px;
}

#sr_search_prediction_result_info_cost_time {
	padding-right : 14px;
}

#sr_search_prediction_result_info_time_diff {
	color : #cc0000;
}

#sr_search_prediction_result_time_area {
	width  : 100%;
	margin : 0px auto;
}

#sr_search_prediction_result_prediction_calendar_link {
	margin-top    : 10px;
	margin-bottom : 10px;
}

#sr_search_prediction_result_none {
	text-align: center;
}

.sr_search_prediction_ic_title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.sr_search_prediction_result_time_departure_time_label {
	display         : flex;
	align-items     : center;
	justify-content : flex-end;
}

.sr_search_prediction_result_time_departure_time_margin_right {
	margin-right : 4px;
}

.sr_search_flex_1 {
	flex : 1;
}

.sr_search_prediction_result_time_recommended_info {
	padding-left : 5px;
	color        : #cc0000;
}

.sr_search_prediction_result_prediction_link {
	margin-left     : auto;
	color           : #00aaff;
	text-decoration : underline;
	width           : 135px;
}

.sr_search_prediction_result_prediction_link:active {
	color  : #ff8000;
}

#sr_search_prediction_conditions_area {
	padding-top : 5px;
	box-sizing  : border-box;
	margin-top  : 5px;
}

#sr_search_prediction_conditions_info {
	display     : flex;
	align-items : center;
	padding     : 15px 0px;
}

#sr_search_prediction_conditions_datepicker {
	width         : 100px;
	height        : 36px;
	text-align    : center;
	border-radius : 6px;
	background    : linear-gradient(0deg,#f2f2f2 0%,#ffffff 100%);
	margin-right  : 20px;
	font-family   : mplus1p, sans-serif;

}

#sr_search_prediction_result_time_area_center_box {
	display: flex;
	flex-direction: column;
	padding-left: 1em;
}

.sr_search_prediction_conditions_time_select {
	width              : 60px;
	height             : 36px;
	padding-left       : 5px;
	border-radius      : 6px;
	appearance         : none;
	-webkit-appearance : none;
	-moz-appearance    : none;
	background         : url(/sp/common/images/selectMark.svg) no-repeat right , linear-gradient(0deg,#f2f2f2 0%,#ffffff 100%);
	background-size    : 8px 100%;
	background-position : center right 6px, center ;
}

#sr_search_prediction_request_button {
	width           : 110px;
	height          : 36px;
	margin          : 0px auto;
	display         : flex;
	justify-content : center;
	align-items     : center;
	box-sizing      : border-box;
	border          : 3px solid rgba(var(--color_base_color), var(--alpha_10));
}

#sr_search_prediction_request_button:active {
	color: rgba(var(--color_white), var(--alpha_10));
	background: linear-gradient(0deg, rgba(var(--color_base_color), var(--alpha_10)) 0%, rgba(var(--color_base_color), var(--alpha_10)) 100%);	
	border-color: rgba(var(--color_white), var(--alpha_10));
	box-shadow : 0px 2px 6px rgba(var(--color_overlay), var(--alpha_04)) ;
}

.sr_search_prediction_conditions_time_select_label {
	padding     : 0px 10px;
	height      : 30px;
	line-height : 30px;
}

.sr_search_prediction_result_arrival_time {
	line-height : 20px;
	left        : 5px;
}

/* SR背景色定義 */
.sr_background_color_search_conditions_ic_select_box {
	background-color : rgba(81, 69, 58, var(--alpha_10));
}

.sr_background_color_search_conditions_ic_title {
	background-color : rgba(248, 166, 85, var(--alpha_10));
}

.sr_background_color_search_conditions_ic_box {
	background-color : rgba(254, 225, 195, var(--alpha_10));
}

.sr_background_color_select_bar {
	background-color : rgba(237, 236, 235, var(--alpha_10));
}

.sr_background_color_search_result_road_traffic_info_list {
	background-color : rgba(255, 247, 240, var(--alpha_10));
}

.sr_background_color_search_result_ic_price_message_box {
	background-color : rgba(231, 231, 231, var(--alpha_10));
}

.sr_background_color_search_result_road_black {
	background-color : rgba(0, 0, 0, var(--alpha_10));
}

.sr_background_color_search_result_road_junction_list {
	background-color : rgba(var(--color_white), var(--alpha_03));
}

.sr_background_color_search_result_road_time_title_common {
	background-color : rgba(255, 154, 51, var(--alpha_10));
}