:root{
	--vechel_tram_primary_color:rgba(204, 128,  51, 1);
	--vechel_rail_primary_color:rgba(204, 102, 102, 1);
	--vechel_bus_primary_color :rgba(102, 153, 204, 1);

	--vechel_tram_secondary_color:rgba(255, 250, 240, 1);
	--vechel_rail_secondary_color:rgba(255, 250, 250, 1);
	--vechel_bus_secondary_color :rgba(250, 252, 255, 1);

	--vid1_display_inline_block:inline-block;
	--vid2_display_inline_block:inline-block;
	--vid3_display_inline_block:inline-block;
}

.stops_options > div{
}
.stops_option_close{
    height:0;
    overflow:hidden;
    transition: height 0.05s;
}
.stops_option_open{
    height: calc(min(100vh ,100dvh) - 100px - 11em);
    transition: height 0.1s;
}
@media (min-width: 1024px) {
	.stops_option_open{
		height: calc(min(100vh ,100dvh) - 100px - 7em);
	}
}
article{
    background-color:transparent !important;
}

#stops_option_index div.inner{
		margin-bottom:0;
}

#ja_alphabetical_index_table{
  border-collapse:collapse;
	margin:0.2em auto 0;
}

#ja_alphabetical_index_table td{
	text-align:center;
	padding:3px;
}

#ja_alphabetical_index_table{
		user-select: none;
}
#alphabetical_index_index table td{
}

#ja_alphabetical_index_table span{
	display:inline-block;
	padding:0.3em 0.6em;
	background-color:rgba(200, 220, 240,0.5);
	border-radius:0.3em;
	cursor:pointer;
}
#alphabetical_index_wrapper div span{
	padding:0.2em 0.2em;
}
#alphabetical_index_row fieldset{
}
#ja_alphabetical_index_table span[data-count="0"]{
	background-color:rgba(200, 220, 240,0.1);
	color:#666;
	cursor:auto;
	pointer-events:none;
} 



.timetable_form{
		margin:0 auto 5px;
		max-width:100%;
}
.timetable_form ul{
		list-style-type:none;
		margin:0;
		padding:0;
		display:flex;
		flex-flow: wrap;
		align-items: center;
		justify-content: center;
		align-items: flex-start;
}
.timetable_form li{
	white-space:nowrap;
	padding:0;
	margin:0px 5px;
	max-width:100%;
	display:block;
}
.timetable_form input,
.timetable_form button,
.timetable_form select{
	box-sizing: border-box;
	height: 2.3em;
	border:1px solid rgba(0,0,0,0.4);
	vertical-align:middle;
	margin-bottom: 0.0em;
	font-size: 16px !important;
	padding:0 0.2em;
	color:rgba(0,0,0,1);
}
.timetable_form input[type=text]{
	width:calc(100% - 2em);
	min-width:15em;
}


.timetable_form button[type=submit]{
	width:3.5em;
	background-color:rgba(var(--main-rgb),1);
	color:rgba(255,255,255,1);
	font-weight:bold;
}
.timetable_form button[type=button]{
	background-color:rgba(var(--sub-rgb),0.2);
}
.timetable_form label{
}
.timetable_form .form_switch{
	font-weight:bold;
}
.timetable_form button[type=submit].secondary{
		background-color:rgba(160,160,160,1);
}
.timetable_form select{
		padding-right:1.5em;
}

.input-container{
	width:calc(100% - 2em);
}

#rosen_form input[type="text"]{
		transition: background-color 0.5s ease;
}
#rosen_form [data-vid="1"] input[type="text"]{
		border-color: var(--vechel_tram_primary_color);
		background-color:var(--vechel_tram_secondary_color);
}
#rosen_form [data-vid="1"] input[type="text"].flash {
  background-color: var(--vechel_tram_primary_color);
  transition: none;
}
#rosen_form [data-vid="2"] input[type="text"]{
		border-color: var(--vechel_rail_primary_color);
		background-color:var(--vechel_rail_secondary_color);
}
#rosen_form [data-vid="2"] input[type="text"].flash {
  background-color: var(--vechel_rail_primary_color);
  transition: none;
}
#rosen_form [data-vid="3"] input[type="text"]{
		border-color: var(--vechel_bus_primary_color);
		background-color:var(--vechel_bus_secondary_color);
}
#rosen_form [data-vid="3"] input[type="text"].flash {
  background-color: var(--vechel_bus_primary_color);
  transition: none;
}

#check_vid{
		text-align:center;
		margin:0.1em 0;
		padding:0.5em 0;
}
#check_vid label{
		padding:0.5em 0.5em 0.5em 0.2em;
		border-radius:0.4em;
		margin:0 0.1em;
		border:2px solid transparent;
}

#check_vid .vid_1, vid_1{
		border-color: var(--vechel_tram_primary_color);
		background-color:var(--vechel_tram_secondary_color);
}
#check_vid .vid_2,.vid_2{
		border-color: var(--vechel_rail_primary_color);
		background-color:var(--vechel_rail_secondary_color);
}
#check_vid .vid_3,.vid_3{
		border-color: var(--vechel_bus_primary_color);
		background-color:var(--vechel_bus_secondary_color);
}
.vid_1 input[type=checkbox]{
	accent-color: var(--vechel_tram_primary_color);;
}
.vid_2 input[type=checkbox]{
	accent-color: var(--vechel_rail_primary_color);;
}
.vid_3 input[type=checkbox]{
	accent-color: var(--vechel_bus_primary_color);;
}


/* suggest */
.suggestion-list {
		max-width: 18em;
		display: none;
		position: absolute;
		background: rgba(255,255,255,1);
		z-index: 100;
		list-style: none;
		padding: 0;
		margin: 0;
		max-height:60vh !important;
		overflow:scroll;
}
.suggestion-list li {
		padding: 4px;
		cursor: pointer;
		border-width: 1px;
		border-style:solid;
		border-left-width: 4px;
		border-radius:4px;
		min-width:200px;
		margin:5px 0px;
}
.suggestion-list li:hover {
		background-color: rgba(255,255,255,1);
}
.input-container {
		position: relative;
		display: inline-block;
		margin-bottom: 10px;
}
/* suggest  ここまで */

/* svg map */

#map_img {
		width: 100%;
		/*height: calc(100vh - 100px - 7em);*/
		height:100%;
		border: 1px solid rgba(0,0,0,0.3);
		overflow: hidden;
		position: relative;
		background-color: #f0f0f0;
		cursor: grab;
		/* テキスト選択や、ブラウザ標準のスクロール動作を防ぐ */
		user-select: none;
		touch-action: none; 
		/* コンテナが画面幅を超える場合の考慮 */
		max-width: 1900px;
		max-height: 100%;
		margin:0 auto;
}
#map_img:active {
		cursor: grabbing;
}
#map_img svg {
		position: absolute;
		transform-origin: 0 0;
		user-select: none;
		-webkit-user-select: none;
		pointer-events: auto; /* SVG内のリンクを有効にするため */
		will-change: transform;
		display: block; 
		width:3000px;
		height:auto;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;

}

#map_img svg text {
  pointer-events: bounding-box; 
}
/*
.st10 {
display:none;
-webkit-font-feature-settings: normal;
-webkit-font-feature-settings: "vrt2" 1, "vert" 1;
writing-mode: vertical-rl;
  font-variant-ligatures: normal;
  font-feature-settings: "vrt2" 1, "vert" 1;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}
*/
/*
  .tategaki {
    transform: rotate(90deg);
	rotate: 90deg;
   transform-origin: center;
-webkit-writing-mode: vertical-rl;
display: inline-block
  }
@supports (-webkit-hyphens:none) {
}
*/
/* svg map ここまで */

#stops_option_suggest > div{
		height:100%;
		overflow:scroll;
}
/* google map */
#gmap{
		width:100%;
		height:100%;
}
#check_vid #current_location_btn{
		cursor:pointer;
		background-color:rgba(200,200,200,0.2);
		border:2px solid rgba(200,200,200,0.5);
		border-radius:2em;
		text-align:center;
		padding:5px 5px 2px ;
}
.gmap_marker{
		position:absolute;
		transform:translate(-50%, -50%);
		padding:2px 4px;
		background-color:rgba(255,255,255,1);
		border:2px solid rgba(128,128,125,1);
		border-radius:4px;
		font-size:14px;
		font-weight:bold;
		color:rgba(0,0,0,1);
		box-shadow:1px 2px 4px 2px rgba(0, 0, 0, 0.2);
		white-space:nowrap;
		cursor:pointer;

}
/* 50音 路線一覧 */
#stops_option_ja_alphabetical,
#rosen_list{
}
#rosen_list_index,
#ja_alphabetical_index_index{
		height:100%;
		overflow:scroll;
}
#alphabetical_index_row,
#rosen_list_index,
#rosen_data{
		max-width:1200px;
		margin:0 auto;
}
#alphabetical_index_row fieldset,
#rosen_data fieldset{
		display:none;
}
#direction_stops fieldset,
#alphabetical_index_row fieldset{
	overflow:scroll;
	max-height:calc(100% - 1em);
	box-sizing:border-box;
}


fieldset{
	box-sizing: border-box;
	margin:0.5em;
	border-radius:0.5em;
}
.close_index_list{
		cursor:pointer;
}
fieldset > div > span,
fieldset > span{
		border:1px solid #000;
		border-left:3px solid #000;
		border-radius:2px;
		cursor:pointer;
		width:8.3em;
		display:inline-block;
		padding:0.2em 0.1em;
		overflow:hidden;
}
fieldset > div > span span,
fieldset > span span{
  transform-origin: left top;
  transform: scaleX(min(1, 7.8 / var(--name_character_count) ));
	display:inline-block;
	white-space:nowrap;
	color:rgba(0,0,0,1);
}

@container style(--name_character_count >= 10) {
  fieldset > span span {
    font-weight: 600;
  }
}

/*@media (min-width: 1024px) {*/
@media (min-width: 768px) {
		fieldset > div > span,
		fieldset > span{
				width:14em;
				padding:0.2em 0.3em;
		}
		fieldset > div > span span,
		fieldset > span span{
				transform: scaleX(min(1, 13 / var(--name_character_count) ));
		}
		
		@container style(--name_character_count >= 10) {
				fieldset > span span {
				font-weight: normal;
				}
		}
		@container style(--name_character_count >= 15) {
				fieldset > span span {
				font-weight: 500;
				}
		}
}

.route_vehicle_1,
.route_vehicle_1 a{
	background-color:var(--vechel_tram_secondary_color);
	border-color:var(--vechel_tram_primary_color);
	display: var(--vid1_display_inline_block)
}

.route_vehicle_2,
.route_vehicle_2 a{
	background-color:var(--vechel_rail_secondary_color);
	border-color:var(--vechel_rail_primary_color);
	display: var(--vid2_display_inline_block)
}
.route_vehicle_3,
.route_vehicle_3 a{
	background-color:var(--vechel_bus_secondary_color);
	border-color:var(--vechel_bus_primary_color);
	display: var(--vid3_display_inline_block)
}

/* 路線一覧 */

#rosen_list_index fieldset{
}
.tableroute{
		width:100%;
		overfolw:scroll-x;
}


.scroll_tbody > tr {
}
.scroll-row > td {
}