@charset "UTF-8";

/* *********************************************
　経路探索
********************************************* */
.pc_page_routesearch .ov_modeselect_switch li a span {
  display:inline-block;
  position:relative;
  text-align:center;
  padding-left:45px;
  min-width: 240px;
}
.pc_page_routesearch .ov_modeselect_switch li a span:before {
  content:"";
  display:inline-block;
  position:absolute;
  width:40px;
  height:40px;
  left:0;
  top:50%;
  margin-top:-21px;
}
.pc_page_routesearch .ov_modeselect_switch li.selected01 a span:before,
.pc_page_routesearch .ov_modeselect_switch li.route-tab01 a span:before {
  background:url('/img/menu_keiro_clock.png') no-repeat center center / auto 90%;
}
.pc_page_routesearch .ov_modeselect_switch li.selected02 a span:before,
.pc_page_routesearch .ov_modeselect_switch li.route-tab02 a span:before {
  background:url('/img/menu_keiro_cell.png') no-repeat center center / auto 90%;
}
.pc_page_routesearch .route_select {
  width: 100%;
  height: auto;
  top: 0px;
  left: 0px;
  padding:15px;
}
.pc_page_routesearch .route_select_topline {
  display:table;
  width: 100%;
  padding:10px 15px;
}
.pc_page_routesearch .route_select_topline > div {
  display:table-cell;
  text-align:right;
  vertical-align: top;
}
.pc_page_routesearch .route_select_topline .list_route_change {
  float:none;
  text-align:left;
}
.pc_page_routesearch .route_select_topline .search-route-input-text-area {
  height: 50px;
  width: 365px;
  float: none;
}
.option-toggle-wrap {
  width: 300px;
  height: auto !important;
  max-height: 350px;
  z-index: 2;
  position: relative;
  top: 0px;
  left: 59px;
  overflow: auto;
  border-left: 1px solid #9c9c9c;
  border-right: 1px solid #9c9c9c;
}

.pc_page_routesearch .route_select_topline input[type="text"] {
  margin-bottom:0px;
}
.pc_page_routesearch p.explain-departure,
.pc_page_routesearch p.explain-arrival {
  position: relative;
  top: 0px;
  left: 0px;
  margin-top:8px;
}
.pc_page_routesearch .over.modal-open.btn-border1.departure01,
.pc_page_routesearch .normal.modal-open.btn-border1.departure01,
.pc_page_routesearch .over.modal-open.btn-border2.departure01,
.pc_page_routesearch .normal.modal-open.btn-border2.departure01,
.pc_page_routesearch .over.modal-open.btn-border1.arrival01,
.pc_page_routesearch .normal.modal-open.btn-border1.arrival01,
.pc_page_routesearch .over.modal-open.btn-border2.arrival01,
.pc_page_routesearch .normal.modal-open.btn-border2.arrival01 {
  position: relative;
  top: 0px;
  left: auto;
  right: auto;
}

.pc_page_routesearch span.edge-token {
  top: 50%;
  left: 7px;
  margin-top:-5px;
}

.pc_page_routesearch div.search_condition_type {
  position: relative;
  top: 0px;
  bottom: 0px;
  left: 0px;
  padding:20px 15px;
}

.pc_page_routesearch div.choose-route {
  position: relative;
  top: 0px;
  left: 0px;
  height: auto;
  padding:10px 15px;
}
.pc_page_routesearch div.choose-route > div {
  vertical-align: top;
  padding:0px 15px;
}
.pc_page_routesearch div.choose-route > div:nth-child(1) {
  margin-right: 30px;
}
.pc_page_routesearch div.choose-route > div:first-child > input,
.pc_page_routesearch div.choose-route > div:last-child > input {
  position: absolute;
  display:inline-block;
  vertical-align: top;
  left: 0px;
  top:0px;
}

.pc_page_routesearch div.choose-route > div:nth-child(1) > div,
.pc_page_routesearch div.choose-route > div:nth-child(2) > div {
  position: relative;
  top: -3px;
  left: 0px;
  width: 250px;
  height: auto;
  padding-left: 25px;
}
.pc_page_routesearch div.choose-route > div:nth-last-of-type(1) {
  position: relative;
  left: 0px;
}

.pc_page_routesearch .flex_parent {
  position: relative;
  bottom: 0px;
  left: 0px;
  clear: both;
  margin-top:20px;
}
.pc_page_routesearch .flex_parent > div a {
  display:inline-block;
  width:auto;
  min-width:140px;
}

/* Time designation mode 修正 */

.pc_page_routesearch .search_timeset {
  clear:both;
  padding-top:20px;
  text-align: center;
}
.pc_page_routesearch .search_timeset table {
  display:inline-table;
  max-width:80%;
  margin:0 auto;
}
.pc_page_routesearch .search_timeset table tbody,
.pc_page_routesearch .search_timeset table tbody > tr:last-child {
  border: none;
}



.pc_page_routesearch .search_timeset table td {
  padding:5px;
}
.pc_page_routesearch .search_timeset table td.item_name {
  width:15%;
  text-align:right;
  padding-top:10px;
}
.pc_page_routesearch .search_timeset table td.item_name.for_dp {
  padding-top:23px;
}
.pc_page_routesearch .search_timeset table td.item_name span {
  font-size: 15px;
  font-weight: bold;
  color: #3e7472;
}
.pc_page_routesearch .search_timeset table td.item_body {
  width:85%;
}
.pc_page_routesearch div.datetimePicker {
  position: relative;
  bottom: auto;
  text-align:left;
  padding:0px;
  margin-bottom: 15px;
}
.pc_page_routesearch div.datetimePicker input,
.pc_page_routesearch div.datetimePicker select,
.pc_page_routesearch div.datetimePicker > figure {
  margin-bottom:3px;
}
.pc_page_routesearch div.datetimePicker > figure img {
  position: relative;
  top:5px;
}

.pc_page_routesearch div.search_timeset_type {
  height: auto;
  top: 0px;
  padding:0px;
  text-align:left;
}
.pc_page_routesearch div.search_timeset_type > div {
  float:left;
  margin-right:20px;
  position:relative !important;
}
.pc_page_routesearch div.search_timeset_type.for_cond > div:nth-child(4) {
  clear:both;
}
.pc_page_routesearch div.search_timeset_type > div span {
  font-size:20px;
  line-height:30px;
}
.pc_page_routesearch div.search_timeset_type > div span.mock-radio {
  font-size:14px;
}


.pc_page_routesearch div.over-module-contents {
  height: auto;
  padding-bottom:30px;
}

/* *********************************************
　接近情報（Approaching bus information）
********************************************* */


section.approach-list-wrap ul.approach-list {
  width: 700px;
  margin:0 auto;
}
section.approach-list-wrap ul.approach-list li {
  display:block;
  width:100%;
  clear: both;
  padding-top: 5px;
  position: relative;
  min-height:92px;
}
section.approach-list-wrap ul.approach-list li > div.page_approachingbus_ride_getoff {
  float:left;
  width:70px;
  min-height:20px;
}
section.approach-list-wrap ul.approach-list li > div.page_approachingbus_ride_getoff span {
  display:inline-block;
  border-width:1px;
  border-style:solid;
  border-radius:5px;
  padding:2px 5px;
  font-size:12px;
  text-align:center;
  width:60px;
}
section.approach-list-wrap ul.approach-list li > div.page_approachingbus_ride_getoff span.marker_ride {
  color:#ed1c24;
  border-color:#ed1c24;
}
section.approach-list-wrap ul.approach-list li > div.page_approachingbus_ride_getoff span.marker_getoff {
  color:#0000ff;
  border-color:#0000ff;
}


section.approach-list-wrap ul.approach-list li > div.page_approachingbus_time {
  text-align:center;
  line-height:20px;
  margin-right: 20px;
  float:left;
  max-width: 80px;
  word-break: break-all;
  padding-top: 3px;
}
section.approach-list-wrap ul.approach-list li > div.page_approachingbus_arrow {
  position:relative;
  width:20px;
  min-height: 20px;
  margin-right: 5px;
  float:left;
}
section.approach-list-wrap ul.approach-list li > div.page_approachingbus_icons {
  position: relative;
  float:right;
  min-width: 100px;
  font-size: 0px;
  display:block;
  height:50px;
}
section.approach-list-wrap ul.approach-list li:nth-last-child(1) > div.page_approachingbus_icons {
  display:none;
}
section.approach-list-wrap ul.approach-list li > div.page_approachingbus_icons img {
  width:50px;
  height:50px;
  left:0px;
  cursor:pointer;
}
section.approach-list-wrap ul.approach-list li > div.page_approachingbus_station {
  display:block;
  height:30px;
  float:left;
}
section.approach-list-wrap ul.approach-list li > div.page_approachingbus_station.selected {
  height:auto;
}
section.approach-list-wrap ul.approach-list li > div.page_approachingbus_station span {
  white-space:nowrap;
  display: inline-block;
}

section.approach-list-wrap ul.approach-list li > div.page_approachingbus_station span.target-place-display {
  top: 0px;
}

/* *********************************************
　サイドバー
********************************************* */
#sidebar ul.banner-link li {
  padding-bottom:8px;
}
#sidebar .sec_app_info .appli-banner {
  padding:10px 5px 10px;
}
#sidebar .sec_app_info .app_guide {
  word-wrap: break-word;
  position: relative;
  clear: both;
}
#sidebar .sec_app_info .app_guide a {
  display: table;
  width:100%;
}
#sidebar .sec_app_info .app_guide a > div {
  display: table-cell;
  vertical-align: middle;
}
#sidebar .sec_app_info .app_guide a > div.app_title {
  display:table-caption;
}
#sidebar .sec_app_info .app_guide a > div.qr_code {
  width:35%;
  text-align:center;
}
#sidebar .sec_app_info .app_guide a > div.qr_code img {
  width: 80px;
}
#sidebar .sec_app_info .app_guide a > div.app_detail {
  width:65%;
}
#sidebar .sec_app_info .app_guide a > div.app_title img {
  max-width:150px;
  display:block;
}
#sidebar .sec_app_info .app_guide a > div.app_detail span {
  color:#000000;
  font-size:12px;
}
#sidebar .sec_app_info .app_guide a > div.app_title span.app_name {
  color: #a0a0a0;
  font-size: 20px;
}
#sidebar .sec_useful_link a {
  color:#548235;;
  display:block;
  padding:10px 5px;
  cursor: default;
}
#sidebar li a .info_sapporo_call_center {
  text-align:center;
}
#sidebar li a .info_sapporo_call_center span {
  display:block;
  line-height:115%;
}
#sidebar li a .info_sapporo_call_center .scc_1 {
  color:#000000;
  font-weight:bold;
}
#sidebar li a .info_sapporo_call_center .scc_2 {
  color:#000000;
}

/* *********************************************
　経路検索 候補一覧 #18684
********************************************* */
.sec_resultRouteList {
  margin-top:70px;
  margin-bottom:60px;
}
.root_table_zone {
  margin-bottom:40px;
}
/* *********************************************
　経路検索 リセットボタン #18682, #18720
********************************************* */
.pc_route_select_cancelBtn {
  text-align:center;
  padding-top:20px;
}
.top_image_float .pc_route_select_cancelBtn .btn_normal_green a {
  width:auto;
}

/* *********************************************
　バス事業者のアイコン説明　#18816
********************************************* */
.sec_trafic_icon_exp {
  width: 100%;
  border: 2px solid #3e7472;
  text-align: center;
  margin-bottom: 15px;
}
.sec_trafic_icon_exp > .icon_exp_title {
  text-align: center;
  display: block;
  background: #3e7472;
  width: 150px;
  border-bottom-right-radius: 5px;
  height: 25px;
  line-height: 25px;
  color: #FFF;
  font-weight: bold;
}
.sec_trafic_icon_exp > .icon_exp {
  display: inline-block;
}
.sec_trafic_icon_exp > .icon_exp > .title {
  display: inline-block;
  vertical-align: middle;
  padding: 0 0 0 15px;
  font-weight: bold;
}
.sec_trafic_icon_exp > .icon_exp > .title:nth-child(0) {
  padding: 0;
}
.sec_trafic_icon_exp > .icon_exp > .icon {
  display: inline-block;
  vertical-align: middle;
}
.sec_trafic_icon_exp > .icon_exp > .icon > img {
  width: 55px;
}

/* *********************************************
　前の便・次の便 #18692
********************************************* */
.sec_busapproach_arrow {
  display:block;
  text-align:center;
  margin:0 auto;
  padding-top: 10px;
}
.busapproach_arrow_btn {
  position: relative;
  display: inline-block;
}
.busapproach_arrow_btn>div {
  position: relative;
  display: inline-block;
  padding-bottom:5px;
}
.sec_routesearch_arrow {
  display:block;
  text-align:center;
  margin:0 auto;
  height:60px;
  height:60px;
}
.routesearch_arrow_btn {
  position: relative;
  display: inline-block;
}
.routesearch_arrow_btn>div {
  position: relative;
  display: inline-block;
  padding-bottom:5px;
}
.routesearch_arrow_btn>div.sec_before_after {
  width: 500px;
}

.before_after_count>.inline {
  border: 1px solid #9E9E9E;
  padding: 5px 15px;
}

.line_arrow {
  position:relative;
  display:block;
  padding:10px;
  white-space: nowrap;
  background: #efa311;
  color: #fff;
  font-weight: bold;
  z-index:1;
  cursor:pointer;
  box-shadow:0px 3px 0px 0px #c36900;
}
.over.line_arrow {
  background: #c36900;
}


.line_arrow.before-line {
  margin-left: 16px;
}
.line_arrow.present-line {
  margin:0 16px;
}
.line_arrow.after-line {
  margin-right: 16px;
}

.present-line.over {
  background: #c36900;
}

.line_arrow::before,
.line_arrow::after {
  content: "";
  position: absolute;
  top: 0px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  z-index: 1;
}
.line_arrow::before {
  left: -15px;
}
.line_arrow::after {
  right: -15px;
}

.present-line::before,
.before-line::before {
  border-right: 15px solid #efa311;
}

.present-line.over::before,
.before-line.over::before {
  border-right: 15px solid #c36900;
}

.present-line::after,
.after-line::after {
  border-left: 15px solid #efa311;
}

.present-line.over::after,
.after-line.over::after {
  border-left: 15px solid #c36900;
}


/* shadow */
.line_arrow_shadow_left,
.line_arrow_shadow_right {
  position: absolute;
  top: 3px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  z-index: 0;
}
.line_arrow_shadow_left {
  left: 1px;
  border-right: 15px solid #c36900;
}
.line_arrow_shadow_right {
  right: 1px;
  border-left: 15px solid #c36900;
}

/* *********************************************
　トップページでライン揃える #18689
********************************************* */
.side-contents.side-contents_top {
  min-height:270px;
}
section#module-header .module-header_title {
  border-bottom: solid 8px #334269;
  margin-bottom: 10px;
  margin-top: 0;
  height:50px;
  box-sizing:content-box;
}

section#module-header .module-header_title h1 {
  font-size: 30px;
  line-height:50px;
  color: #334269;
  font-weight: bold;
  display: inline;
}

.top_slide_unit {
  min-height:290px;
}
/* *********************************************
　ドロップダウンに border追加 #18695
********************************************* */
.dropdown_selectlist {
  z-index: 2;
  position: absolute;
  border-left:1px solid #9c9c9c;
  border-right:1px solid #9c9c9c;
}
.input-text-area > div.input-text-area_inner {
  width:550px;
}
.dropdown_selectlist.dropdown_selectlist_busservice {
  top: 37px;
  left: 110px;
  width: 440px;
}
.dropdown_selectlist.dropdown_selectlist_timetable {
  max-height:233px;
  height:auto !important;
  left: 0 ;
  top: 37px;
  width:100%;
}

/* *********************************************
　バス会社名を四角で囲む #18707
********************************************* */
.companyname_box {
  display:inline-block;
  border-width:1px;
  border-style:solid;
  font-weight:normal !important;
  font-size:14px;
  padding:2px 8px 1px;
  margin-right:8px;
  line-height:19px;
  position:relative;
  border-color:#ffffff;
}
.ov_timetable_list_header_station .companyname_box.cb_busapproach_main {
  font-size:14px;
  top:-3px;
}
.ov_timetable_list_header_station .companyname_box.cb_timetable_main {
  font-size:14px;
  top:-3px;
}
.companyname_box.cb_busapproach_list {
  border-color:#3e7472;
  top:-2px;
}