:root{--bg:#3E3A39;--fg:#FFF000;--fg2:#ffffff}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:#111}
body{display:flex;flex-direction:column;min-height:100vh;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}

.topbar{background:var(--bg);color:var(--fg);padding:12px 12px 8px;box-shadow:0 2px 10px rgba(0,0,0,.3);position:sticky;top:0;z-index:10}

.topbar h1{
  margin:0;
  font-size:22px;
  letter-spacing:.05em;
  font-weight:800;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  display:flex;
  align-items:center;   /* ← 縦方向の中央揃え */
  gap:8px;
}
.topbar-icon{
  height:1.6em;      /* タイトル文字とだいたい同じ高さ */
  width:auto;
  display:block;
}

.topbar h1 span{
  line-height:1;     /* 文字の上下の余白を詰めて中央に見せる */
}

/* タイトル文字を少しだけ下に下げる */
.topbar-title {
  margin: 0;
  padding-top: 2px;   /* ここを 1〜3px くらいでお好みに調整 */
}

.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:640px){.controls{grid-template-columns:repeat(3,1fr)}}@media(max-width:380px){.controls{grid-template-columns:1fr}}
.controls select{
    appearance:none;width:100%;
    background:transparent;
    color:var(--fg);
    border:2px solid var(--fg);
    border-radius:28px;
    padding:10px 14px;
    font-size:16px;
    font-weight:700;
    outline:none;
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'><path d='M1 1l6 8 6-8' fill='none' stroke='%23FFF000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#map{flex:1;min-height:70vh}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;background:#222;color:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.35);z-index:20}
.gm-style .gm-style-iw-c { background:#fff; border-radius:14px; }
.gm-style .gm-style-iw-d, .gm-style .gm-style-iw-c, .kuma-iw { color:#000 !important; }
.kuma-iw a { color:#3E3A39; text-decoration: underline; }


/* ドロップダウン本体はそのまま */
.controls {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media (max-width:640px){
  .controls{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:380px){
  .controls{grid-template-columns:1fr}
}

/* 閉じているときはセレクト群だけ消す */
.controls.is-collapsed{
  display:none;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}


/* タイトル左寄せ、全体センター寄せ */
.topbar{
  background:var(--bg);
  color:var(--fg);
  padding:12px 12px 8px;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
  position:sticky;
  top:0;
  z-index:10;
  text-align:center;
}
.topbar h1{
  margin:0 0 8px;
  font-size:22px;
  letter-spacing:.05em;
  font-weight:800;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  text-align:left; /* タイトルだけ左に寄せる */
}

/* ==============================
   ナビ開閉トグルボタン（＋ / −）
   ============================== */
.controls-toggle {
  display:block;
  width:32px;           /* 正方形 */
  height:32px;
  margin:8px auto 0;    /* 上に少し余白＋左右センター */
  padding:0;

  border:2px solid var(--fg);   /* 黄色い枠線 */
  border-radius:7px;            /* 角丸 7px */
  background-color:var(--bg);   /* 他と同じ #3E3A39 */
  color:var(--fg);              /* ＋/− を黄色に */

  font-size:20px;
  font-weight:700;
  line-height:1;
  cursor:pointer;

  position:relative;
  z-index:1;
}
.controls-toggle .sign{
  display:block;
  transform:translateY(-1px); /* ほんの少し上に */
}

/* タイトル行（クマデータ + ボタン）を横並びにする */
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* 開閉ボタンの見た目 */
.ctrl-toggle {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;            /* ほぼ正方形 */
  border: 2px solid #fff000;     /* 黄色い枠線 */
  background: #3E3A39;           /* 他の背景と同じ色 */
  color: #fff000;                /* ＋／− の色を黄色に */
  font-size: 18px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ctrl-toggle:active {
  transform: scale(0.95);
}

/* アコーディオン閉じ状態 */
.controls.is-collapsed {
  display: none;
}