.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #3264a0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;

  transition: opacity 0.5s ease; /* じんわり切替 */
  opacity: 1;
}
#footer{
  height: 375px;
}
.bottom-bar.hidden {
  opacity: 0;
  pointer-events: none; /* 消えてる間は押せないように */
}

.bottom-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  height: 100%;
}

/* アイコン付き風に */
.btn {
  display: flex;              /* ← 重要！ これで中のimgに下端寄せが効く */
  align-items: flex-end;      /* 画像の底を .btn（=バーの底）に合わせる */
  justify-content: center;
  height: 50px;               /* バーと同じ高さに固定 */
  padding-left: 5px;             /* お好みで */
}

.btn img {
  height: 36px;
  margin: 0px;
  width: auto;
  /* margin-left: 0px; */
}
.btn.pagetop img {
  height: 60px;         /* PageTopだけ大きく */
  align-self: flex-end; /* 下端に揃える */
  margin-left: auto;        /* ← これで右端に寄せる */
  margin-right: 12px;
  display: flex;
  align-items: flex-end;    /* 下端揃え */
  justify-content: center;
}

/* 600pxを超えたらPC用レイアウトに切替 */
@media (min-width: 601px) {

  /* ボトムバー：260×300 / 左下配置 / マージン 左30 下40 / 透明度70% / 縦並び */
  .bottom-bar {
    position: fixed;
    width: 140px;
    height: 180px;
    left: 30px;
    bottom: 40px;
     border-radius: 5px;   /* ← 角を5px丸める */
    /* 透明度：子要素はクッキリのままにしたい場合は背景だけ透過にする */
    background: rgba(50, 100, 160, 0.7);  /* 70%の不透明度（=30%透過） */
    /* もしコンテナ全体を薄くしたいなら上の1行を消して、下を有効に
       opacity: 0.7; */

    display: flex;
    flex-direction: column;    /* 縦並び */
    align-items: center;
    justify-content: space-evenly;
    gap: 12px;                 /* お好みの間隔 */
    padding: 8px 10px;         /* 端の余白（任意） */
    z-index: 1000;
    transition: opacity 0.5s ease;
  }

  /* スクロール時のフェード用（そのまま活かす） */
  .bottom-bar.hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* ボタン共通：縦並び用に自動サイズに */
  .bottom-bar .btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;       /* 縦並びで中央に */
    justify-content: center;
    height: auto;              /* 横並びの50px指定を上書き */
    width: 100%;               /* 横幅いっぱい（任意） */
  }

  /* アイコンサイズ（必要なら調整） */
  .bottom-bar .btn img {
    height: 40px;
    width: auto;
    display: block;
    margin: 0;
  }
  .btn.pagetop {
    position: fixed;       /* 画面基準にする */
    right: 20px;           /* 右から20px */
    bottom: 20px;          /* 下から20px */
    margin: 0;             /* 余計なマージンはリセット */
    z-index: 1100;         /* バーより上に */
    display: flex;
    align-items: right;
    justify-content: right;
  }

  .btn.pagetop img {
    height: 60px;          /* 大きさ調整（例:60px） */
    width: auto;
    display: block;
  }
  .btn.pagetop {
  opacity: 0;
  pointer-events: none;       /* 非表示時はクリック不可 */
  transition: opacity 0.4s ease;
}

.btn.pagetop.visible {
  opacity: 1;
  pointer-events: auto;
}
}
.map-container {
  display: flex;
  justify-content: center;    /* 中央寄せ */
  margin: 20px auto;          /* 上下余白も追加（任意） */
  width: 100%;                /* 横幅いっぱい */
}

.map-container iframe {
  width: 80%;                 /* 横幅80% */
  max-width: 800px;           /* 最大800pxまで */
  height: 450px;              /* 高さはお好み */
  border: 0;
}