html,body{
    height:100%;margin:0;font-family:sans-serif;
}
#container{
    display:flex;height:100%;
}
h1 {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
}

/* 4分割マップ用 */
#map-container {
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  flex:1;
  gap:2px;
}
.map-wrapper {
  position:relative;
  border:2px solid #ccc;
  transition:border 0.2s;
}
.map-wrapper.highlight{
    border:3px solid red;
}
.map-wrapper .map{
    width:100%;
    height:100%;
}

/* お気に入りストリップ */
.map-favorites{
  position:absolute;
  top:40px;
  right:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:6px;
  min-width:120px;
  max-height:140px;
  overflow:auto;
  background:rgba(255,255,255,0.95);
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  z-index:1002;
  font-size:12px;
}
.map-favorites.collapsed { max-height: 36px; overflow: hidden; }
.map-favorites .fav-item{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(0,0,0,0.06);
  padding:2px 6px;
  border-radius:6px;
  background:#fff;
}
.map-favorites button{ cursor:pointer; background:transparent; border:none; }
.map-favorites-header{ width:100%; display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.map-favorites .collapse-btn{ font-weight:700; }



/* 座標表示 */
.coords {
  position:absolute;
  bottom:8px;
  left:8px;
  z-index:1000;
  background:rgba(255,255,255,0.7);
  padding:2px 6px;
  font-size:12px;
  border-radius:4px;
}

/* 地図切替セレクト */
.map-select {
  position:absolute;
  top:8px;
  right:8px;
  z-index:1000;
  padding:2px 6px;
  border-radius:4px;
  background:#fff;
  border:1px solid #ccc;
}

/* カスタムドロップダウン（ネイティブselectの代替） */
.custom-select {
  position:absolute;
  top:8px;
  right:8px;
  z-index:400;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
  padding:2px 6px;
  min-width:150px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
}
.custom-select .display {
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.custom-dropdown{
  position:absolute;
  top:36px;
  right:8px;
  z-index:1002;
  background:#fff;
  border:1px solid #ccc;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  width: calc(100% - 120px);
  max-height:220px;
  overflow:auto;
  padding:4px;
  border-radius:4px;
}

.custom-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 6px;
  justify-content:space-between;
}
 .custom-item:hover{
  background:#f6f6f6;
}
 .custom-star{
  width:28px;
  text-align:center;
  cursor:pointer;
  border:none;
  background:transparent;
  font-size:14px;
}
.group-header{
  font-weight:700;
  padding:6px 8px;
  border-bottom:1px solid #eee;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.group-header .collapse-toggle{
  cursor:pointer;
  font-size:20px;
  color:#666; }
@media (max-width: 700px) {
  #map-container.screens-4 .map-select {
    font-size: 10px;
    padding: 1px 3px;
    top: 4px;
    right: 4px;
    max-width: 120px;
  }
}

/* サイドバー */
#sidebar {
  width:0; padding:0; overflow:hidden; 
}
#sidebar.hidden {
  width:220px;
  background:#f4f4f4;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:0.3s;
  box-shadow:2px 0 6px rgba(0,0,0,0.2);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  }

@media (max-width: 700px) {
  #sidebar {
    width:220px;
    background:#f4f4f4;
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:8px;
    transition:0.3s;
    box-shadow:2px 0 6px rgba(0,0,0,0.2);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #sidebar.hidden {
    width:0; padding:0; overflow:hidden;
  }
}

/* サイドバー切替ボタン */
#toggleSidebar {
  position:absolute;
  top:8px;
  right:8px;
  z-index:1000;
  padding:6px;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
  cursor:pointer;
  font-size:20px;
  font-weight:bold;
}
#tytle {
  max-width: 80%;
  height: auto;
  z-index:1000;
  object-fit: contain;
}
.button-group{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  margin-bottom:4px;
  margin-top: 10px;
}
.button-group button{
  flex:1;
  padding:4px 6px;
  cursor:pointer;
  border-radius:4px;
  border:1px solid #ccc;
  background:#fff;
  transition:0.2s;
}
.button-group button:hover{
  background:#eee;
}
.search-group {
  display:flex;
  gap:4px;
  margin-bottom:8px;
  margin-top: 0px;
}
.search-group input:focus {
  outline:none; 
  border-color:#4caf50; 
}
.search-group button:hover {
  background:#eee; 
}
/* タスクバー */
.taskbar {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  margin-top: 10px;
}

.taskbar-toggle {
  width: 100%;
  text-align: left;
  padding: 6px;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
}

.taskbar-toggle:hover {
  background: #e0e0e0;
}

.taskbar-content {
  display: none;
  padding: 6px;
  gap: 8px;
}

.taskbar-content.active {
  display: block;
}

.title-style {
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  color: black;
}
.title-style:hover {
  background: #e6f2fb;
}
.higashiyama-style {
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  color: black;
}
.higashiyama-style:hover {
  background: #e6f2fb;
}
.map-botton {
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  text-decoration: none;
  color: black;
}
.school-logo {
  height: 12px;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 3px;
}
.main-logo {
  height: 60px !important;
  vertical-align: middle ;
  margin-top: -3px;
  margin-left: auto;
}
.mapbotton {
  display: inline-block;
  background: #0b78d1;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
}
.mapbotton:hover {
  background: #ddebf6;
}

#csvUploadSection{
  margin-top: 15px;
}
.overlay{
  margin-bottom: -3px;
}
#overlay-target,#overlay-layer {
  width: 200px;   /* 好きな幅に調整 */
  font-size: 14px; /* 文字サイズも小さめに */
}
.sidebar-section label {
  display: block;
  margin-top: 8px; /* 上に少し余白を入れると見やすい */
}

input[type="file"] {
  color: transparent; /* テキスト部分を透明にする */
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
/*メニューバー*/
.menu-group {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  margin-top: 10px;
}
.menu-group a {
  display: inline-block;
  padding: 6px 12px;
  white-space: nowrap;
}
.menu-toggle {
  width: 100%;
  text-align: left;
  padding: 6px;
  border: none;
  background: #f0f0f0;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px 4px 0 0;
}
.menu-toggle:hover {
  background: #e0e0e0;
}
.menu-content {
  display: none;
  padding: 6px;
  gap: 10px;
}
.menu-content.active {
  display: block;
}
.menu-content a {
  display: block;
  margin: 6px 0;
  padding: 8px 12px;
}
#sidebar::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
#sidebar {
  -ms-overflow-style: none;  /* IE, Edge */
  scrollbar-width: none;     /* Firefox */
}
#csvFileList {
  margin-top: 1px; /* タブの下に表示 */
  list-style: none;
  padding: 0;
}

#csvFileList li {
  cursor: pointer;
  padding: 5px;
}
#csvFileList li:hover {
  background-color: #f0f0f0;
}

.scrollable-input {
  flex: 1; /* 親要素のスペースを均等に埋める */
  overflow-x: auto; /* 横方向のスクロールを可能にする */
  white-space: nowrap; /* テキストが折り返されないようにする */
  padding-right: 2px; /* 少し余白を持たせる */
}
/* スクロールバーのデザインを隠す */
.scrollable-input::-webkit-scrollbar {
  height: 5px;
}

.scrollable-input::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.search-group input {
  min-width: 0; /* Flexboxのコンテナ内での幅の縮小を許可 */
}

@media (max-width: 700px) {
  #map-container {
    /* 1行2列の2画面レイアウトに変更 */
    grid-template-columns: 1fr; 
    grid-template-rows: 1fr 1fr;
  }
  .custom-dropdown{
  position:absolute;
  top:36px;
  right:8px;
  z-index:1002;
  background:#fff;
  border:1px solid #ccc;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  width: calc(100% - 20px);
  max-height:220px;
  overflow:auto;
  padding:4px;
  border-radius:4px;
  }
}