@charset "utf-8";

        /* 画面を左右に分割するレイアウト */
        .container {
            display: flex;
            width: 1500px;
            height: 600px;
        }
	#header {
	    margin-top: 5px;
	    margin-bottom: 10px;
            width: 1500px;
            height: 60px;
	}
	.nav-container {
          width: 1500px;
	  position: relative; /* z-indexを有効にするために必須 */
	  z-index: 10000;       /* 他のdiv（コンテンツ）より大きい数字を指定 */
	}
        #mapcontainer {
            flex: 2; /* 地図を広めに配置 */
            height: 100%;
        }
        #list-container {
            flex: 1; /* リスト表示エリア */
            height: 100%;
            overflow-y: auto; /* スクロール可能にする */
            background: #f9f9f9;
            border-left: 15px solid #ccc;
        }
        .list-item {
            padding: 4px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background 0.2s;
        }
        .list-item:hover {
            background: #e0f7fa; /* ホバー時の色 */
        }
        /* タイトル(aタグ)をブロック要素にして下の余白をリセット */
        .spot-item a {
            display: block;
            margin-bottom: 2px; /* 文字間の広さをここで調整 */
        }
        /* 住所(pタグ)の上マージンをゼロにする */
        .spot-item .spot-title {
            margin-top: 0;
            margin-bottom: 0; /* 必要に応じて下の余白も調整 */
        }
        /* 偶数（2、4, 6番目...）の行の背景色を変える */
        .spot-item:nth-child(even) {
            background-color: #d6ffd6; /* 薄いグレー */
        }

        /* 奇数（1、3, 5番目...）の行の背景色を変える */
        .spot-item:nth-child(odd) {
            background-color: #ffffff; /* 白 */
        }


/* 以下はmenu表示 */
/* 基本のリセット */
.menu_btn{
  display: none;          /* 普段は隠す */
}

#menu_area{
    display:block;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a.nav-link {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 15px 20px;
}

/* 1. 親メニューを横並びにする */
.main-menu {
  display: flex;
  background-color: #f8f9fa;
}

/* 2. 子メニューの表示位置の基準にする */
.main-menu > li {
  position: relative;
}

.main-menu > li > a:hover {
  background-color: #e9ecef;
}

/* 3. 子メニュー（初期状態は非表示） */
.dropdown {
  display: none;          /* 普段は隠す */
  position: absolute;     /* 親要素を基準に浮かす */
  top: 100%;             /* 親メニューの真下に配置 */
  left: 0;
  background-color: #ffffff;
  min-width: 160px;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
  z-index: 999;

  /* 2列にするための設定 */
  width: 360px;                    /* メニュー全体の横幅（1列あたり180px × 2） */
  grid-template-columns: 1fr 1fr;  /* 幅を均等に2分割する */
  gap: 5px;                        /* 項目と項目の間のすき間 */
}

/*  ホバーした時に「grid」で表示する（ここが重要！） */
.main-menu > li:hover .dropdown {
  display: grid;
}

/* 各メニュー項目のデザイン（横幅いっぱいに広げる） */
.dropdown li a {
  padding: 10px 15px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.dropdown li a:hover {
  background-color: #f8f9fa;
}

/* 子メニューのリンクのデザイン */
.dropdown li a {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

.dropdown li a:hover {
  background-color: #f1f3f5;
}

/* 4. 親メニューにマウスが乗ったら、子メニューを表示する */
.main-menu > li:hover .dropdown {
  display: block;
}