/*=============================
=== header
============================*/
.header{
	display:flex;
	justify-content: space-between;
	padding:0 1vw 0 2vw;
	height: 50px;
}

.logo_wrapper{
	display: grid;
	place-items: center;
}

.logo{
	height:30px;
	margin-top:5px;
}

.new_icon{
	height: 0.9rem;
	position:relative;
	right:-50px
}

.header_icon_warpper{
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:0 3px;
	cursor:pointer
}

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

.header_icon > img{
	height: 1.1rem;
}

.header_icon_txt{
	font-size:0.5rem;
	margin-top:1px;
	color:var(--red);
}

 /*============================
slide 
============================*/
 /** =======================
 *  header nav
 ===========================*/
#fadeLayer {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: #333333;
  opacity: 0.5;
  display: none;
  z-index: 100;
}

#slide_nav{
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background: #333333;
  z-index: 101;
}


#slide_nav ul {
  padding-top: 0px;
}
#slide_nav ul li {
  display: block;
  position: relative;
}
#slide_nav ul li a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  border-bottom: 1px dotted #FFF;
  color: #f5f5f5;
  font-size:0.8rem;
}
#slide_nav ul li a:hover {
  background: #c0c0c0;
}
#slide_nav ul ul {
  margin: -2px 0 0;
  padding: 0;}
#slide_nav ul ul {
  display: none;
}
#slide_nav ul ul li {
  background: #525252;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  border-bottom: none;
}
#slide_nav ul ul li a {
  font-size: 0.65em;
  padding-top: 13px;
  padding-bottom: 13px;
  color: #f5f5f5;
}

.slide_menu_button .menu-icon {
  display: block;
  float: left;
  margin:10px;
  cursor: pointer;
}
.slide_menu_button .menu-icon span {
  display: block;
  margin-bottom: 4px;
  width: 30px;
  height: 4px;
  background: #f5f5f5;
}
/*hamburger menu style*/
#nav_toggle {
  display: block;
  margin: 10px;
  top: 8px;
  width: 30px;
  height: 30px;
  position: relative;
  z-index: 110;
  cursor: pointer;
}
#nav_toggle div {
  position: relative;
}
#nav_toggle span {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--blue-100);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
/*hamburger menu close style*/
#nav_toggle span:nth-child(1) {
  top: 0px;
}
#nav_toggle span:nth-child(2) {
  top: 8px;
}
#nav_toggle span:nth-child(3) {
  top: 16px;
}
/*hamburger menu open style*/
.open #nav_toggle span:nth-child(1) {
  top: 6px;
  background: #f5f5f5;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
}
.open #nav_toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.open #nav_toggle span:nth-child(3) {
  top: 6px;
  background: #f5f5f5;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  transform: rotate(-135deg);
}


 /*============================
 serarch input
============================*/
.search_area{
	padding:2px 20px 2% 20px;
	background-color:rgba(227, 227, 226,1);
	margin-bottom:10px;
}

.search_stop_container{
	display:flex;
	align-items:center;
}

.search_time_container{
	display:flex;
	align-items:center;
	flex-grow: 1;
}




.serach_title{
	position: absolute;
	margin-left: 4px;
}

.serach_title > span{
	font-size: 0.8rem;
	color:#818181;
}

.search_input{
	flex-grow: 1;
}

.search_input > input{
	font-size:1.0rem;
	padding:0 0 0 45px;
	width: calc(100% - 2.1rem);
	border:none;
	background-color: #fff;
	border-radius:10px 10px 0 0;
	height:1.7rem;
}

.search_input_icon{
	width: 0px;
	position:relative;
	right:25px;
	top:0px;
	border: none;
	background-color: transparent;
	cursor: pointer;
}

.search_input_icon > span{
	cursor:pointer;
	font-size:0.9rem;
	color:#bcbcbc;
}


.exchange_button{
	position: relative;
	top:4px;
}

.exchange_button > img{
	height: 90%;
	width: auto;
	cursor: pointer;
}


.set_now_button{
	background-color: var(--red);
	color:#fff;
	border:none;
	border-radius:10px;
	height:1.7rem;
	width: 100%;
	height: 100%;
	font-size: 0.7rem;
	line-height: 0.72rem
}


.select_container{
	width: 100%;
	margin-top:20px;;
	display:flex; gap:2%;
}

.select_container > div{
	width: 49%;
}

.select_container > div > select:focus {
  outline: none;
}

.select_container > div > select{
	font-size: 1.0rem;
	width: 100%;
	height: 1.7rem;
	border:none;
	border-radius:5px;
	font-size: 0.95rem;
	background-color: #fff;
}


.suggest_area{
	position: relative;
	height:auto;
	overflow: auto;
	overflow: visible;
	margin-top:1px;
	width: calc(100% + 0px);
	height:0px;
	z-index:101;
}

.suggest_text{
	padding: 5px 10px;
	background-color: #fff;
	border: 1px solid #c8c8c8;
	border-top: none;
	cursor: pointer;
	border-radius:5px;
	display:block;
	z-index:100;
	cursor: pointer;
}


.suggest_text:hover{
	background-color:var(--red);
	color:#fff;
}



.serach_btn{
	width:100%;
	background-color:var(--brown);
	color:#fff;
	border:none;
	border-radius:10px;
	padding:0.3rem 0;
	font-size:1.2rem
}


#major_btn1{
	touch-action: none;
}
#major_btn2{
	touch-action: none;
}

#major_btn3{
	touch-action: none;
}

#major_btn4{
	touch-action: none;
}



 /*============================
serach tab
 ============================*/
.select_tab {
	margin-top:3rem;
	margin-left: auto;
	margin-right: auto;
}

.select_tab_list {
	align-items: flex-end;
	display: flex;
	justify-content:flex-end;
}
.tab-menu {
	align-items: center;
	background-color: rgba(227, 227, 226, 0.35);
	color:#535353;
	cursor: pointer;
	display: flex;
	font-size: 1.0rem;
	height: 55px;
	flex-grow: 1;
	justify-content: center;
	padding-right: 10px;
	position: relative;
	transition: all .3s ease-out;
	max-width: 105px;
}

.tab-menu:not(:first-of-type) {
	border-left: 1px solid #fff;
}

.tab-menu.current {
	background-color:rgba(227, 227, 226,1);
	transition: all .3s ease-in-out;
	color:#000;
	box-shadow:none;
}

.content-box {
	display: none;
	background-color:rgba(227, 227, 226,1);
}

.speechBubble {
	position: relative;
	display: inline-block;
	border-radius: 24px;
	background-color: var(--red);
	text-align: center;
	color: #ffffff;
	padding:13px 3px;
}

.speechBubble::after {
	content: "";
	position: absolute;
	bottom: 15px;
	left: 6px;
	border-style: solid;
	border-width: 17px 5px 0 5px;
	border-color:  var(--red) transparent transparent;
	translate: -50% 100%;
}
 

/*============================
=== hist
============================*/
.hist_container{
	width: 96%;
	min-height: 15vh;
	padding:10px 2%;
}


.no_hist{
	font-size:0.9rem;
	color:var(--red);
	padding:5px 10px;
}


.hist_warpper{
	display:flex;
	justify-content:space-between;
	align-items:stretch;
	margin-bottom:0.5rem;
	gap:3px;
}

.hist_del_warpper{
	width: 80px;
}

.hist_del_btn{
	background-color:var(--red);
	color:#fff;
	font-size:0.8rem;
	padding:0 0.5rem;
	cursor:pointer;
	height: 100%;
	border-radius:10px;
	border:none;
}

.hist_del_btn:hover{
	background-color:#000;
	color:#fff;
}


.hist_main{
	width: calc(100% - 80px);
	background-color:#fff;
	font-size:1.0rem;
	border-radius:5px;
	padding:0.3rem;
	display:flex;
	justify-content: space-between;
	align-items: center;
	cursor:pointer;
}

.hist_main:hover{
	background-color:var(--red);
	color:#fff;
}

.hist_txt{
	width: 42%;
	text-align:center;
	font-size:0.8rem;
}

.hist_arrow{
	width: 18%;
}

/*============================
=== land
============================*/
.land_container{
	width: 98%;
	min-height: 15vh;
	padding:10px 1%;
}

.no_land{
	font-size:0.9rem;
	color:red;
	margin-left:1rem;
}

.land_select{
	border: none;
	outline:none;
	background-color: rgba(255, 255,255, 0.8);
/*	padding:5px 20px;*/
/*	width: 100%;*/
	padding:5px;
	font-size:1.0rem;
	border-radius: 10px;
	height: 1.7rem;
	border:solid 3px var(--red);
	margin:0.5rem 0;
	
}

.land_warpper{
	padding: 15px 10px 5px 10px;
	margin-bottom:10px;
	border-top:1px solid #b6b6b6;
}

.land_body{
	display:flex;
}

.land_img_warpper{
	width:45%;
	min-width:48%;
}

.land_body_txt{
	flex-grow: 1;
}

.land_name_warpper{
	display: flex;
	align-items:center;
	flex-wrap: wrap;
}

.land_name{
	margin-left:5px;
	font-size:0.8rem;
	flex-grow: 1;
}

.land_img{
	aspect-ratio: 16 / 9;
	width:100%;
	height: auto
}


.land_hp_map_warpper{
	display: block;
	line-height: 0.6rem;
}

.land_btn1{
	padding: 0px 15px;
	margin-left:5px;
	border:none;
	cursor:pointer;
	font-size:0.6rem;
}


.land_stop_head_txt{
	font-size:0.5rem;
	margin-top:5px;
	margin-left:5px;
}

.land_stop_text{
	font-size:0.7rem;
}

.land_btn2{
	font-size:0.7rem;
	background-color: var(--red);
	padding:5px 10px;
	margin: 2px 0 2px 5px;
	cursor: pointer;
	color: #fff;
	border:none;
	border-radius: 10px;
}


/*============================
=== map
============================*/
#map_loading {
	position: absolute;
	z-index: 15;
	top: 0;
	background-color:rgba(0,0,0,0.5);
	color:#fff;
}

#map_input {
	position: absolute;
	z-index: 10;
	top: 11px;
	left:60px;
}


.method_map{
	height:65vh;
	z-index:0;
}

.method_map_text_box{
	position:absolute;
	bottom:26px;
	left:2px;
	z-index:1;
	margin-left:10px;
}

.location_btn{
	display: block;
	height: 1.65rem;
	font-size:0.7rem;
	padding: 0 10px;
	border:none;
	outline: 1px solid #c3c3c3;
	outline-offset: -1px;

}

.method_map_search_place{
	display: flex;
	padding:2px 0;
	height: 1.5rem
}

.method_map_search_place > input{
	display: block;
	height:100%;
	font-size:0.75rem;
	border: none;
}

.method_map_search_place > input::placeholder{
	font-size:0.7rem;
	padding-left:5px;
}


.method_map_search_place > button{
	display: block;
	height: 100%;
	font-size:0.75rem;
	padding:0 10px;
	border:none;
	outline: 1px solid #c3c3c3;
	outline-offset: -1px;
	margin-left:3px;
}



  
  /*============================
  === result
  ============================*/
.result_container{
	display:none;
	margin:1vh 1vw
}

.icon_container{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding:7px 20px;	
}

.icon_container_txt{
	font-size:0.6rem;
	margin-right:5px;
	margin-left:5px;
}

.icon_wapper{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap:3px;
}

.icon_time_warpper{
	display: flex;
	align-items: center;
	gap:0;
}

.icon_time_warpper > img{
	height: 0.9rem;
}

.icon_time_warpper > div{
	font-size:0.65rem;
	margin-left:-2px;
}


  
.result_15min{
	display:flex;
	justify-content:space-between;
	margin:20px 5px 15px 5px;
}

.next_previous_btn{
	border:none;
	position:relative;
	width:120px;
	background-color:transparent;
}

.next_previous_btn > img{
	width:100%;
}

.next_previous_btn > div{
	position:absolute;
	bottom:7px;
	font-size:17px;
	color:#fff;
}






.result_warpper{
	border:1px solid var(--brown);
	margin-bottom:15px;
}

.candidate_header{
	background-color:var(--brown);
	display:flex;
	justify-content:space-between;
	align-items: center;
	padding:10px 1vw;
}

.header_info{
	flex-grow:1;
	display:flex;
	flex-wrap:wrap;
	gap:0 10px
}

.header_info > div{
	font-size:0.8rem;
	color:#fff;
}

.header_approach{
	width:2.5rem;
	text-align: right;
	height: 100%;
}

.header_approach_btn{
	background-color:var(--brown);
	border:none;
	height: 100%
}


.approach_img, .header_approach > form {
	height: 2.3rem;
}

.result_gray{
	display:flex;
	align-items: center;
	justify-content:space-between;
	background-color:rgba(227, 227, 226,1);
	padding:5px 10px;
}

.stop_time_outer{
	flex-grow:1;
	display:flex;
	flex-wrap:wrap;
	align-items: center;
}

.time_txt{
	width:4rem;
	font-size: 0.8rem;
}

.stop_outer{
	flex-grow: 1;
	display:flex;
	align-items: center;
}

.stop_outer > img{
	height: 1.1rem;
}

.stop_outer > div{
	font-size: 0.8rem;
	margin-left:3px;
}

.timetable_map_outer{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	gap:0 10px;
}

.timetable_map_btn{
	display:flex;
	align-items:center;
	border:none;
	color:var(--red);
	background-color:transparent;
	cursor: pointer;
}

.timetable_map_img{
	height:1.0rem;
	margin-top:3px
}

.timetable_map_btn >div{
	font-size:0.65rem;
}

.result_white{
	background-color:rgba(255, 255,255, 0.3);
	padding:10px 10px; ;
	display:flex;
	align-items: center;
}

.time_fare_outer{
	margin:auto 0;
	width:4rem;
}

.time_fare_outer > div{
	font-size:0.8rem;
}


.headsign_outer{
	width:calc(100% - 4.0rem);
}


.delay_time_txt{
	margin:auto 0 auto 10px;
	color:red;
	font-size:0.7rem;
}

.route_txt{
	margin:auto 0;
	display:flex;
	flex-wrap: wrap;
}

.route_txt > div{
	font-size:0.8rem;
	margin-left:10px;
}

.result_trasfer{
	background-color:#fff;
	display:flex;
	height:12px;
}

.trasfer_icon{
	position:relative;
	left:5px;
	bottom:13px;
}

.trasfer_icon > span{
	color:#fff;
	background-color:var(--orange-color);
	font-size:0.7rem;
	padding:3px 10px;
	border-radius: 10px;
}