/* 全体 */
body {
  margin: 0;
  font-family: Meriyo UI;
  font-size: 14px;
}
#displayArea {
  margin-top: 80px;
}
.zekkeiTable {
  text-align: center;
}
/* ヘッダーnavbar */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #111;
}
.active {
  background-color:blue;
}
/* 絶景ランキングテーブル */
table, td {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  border: 1px solid gray;
}
caption {
  font-size: 20px;
  font-weight: bold;
}
.tablehead1 {
  background-color: aliceblue;
}
.tablehead2 {
  background-color: beige;
}
/* 絶景MAP */
#header {
  text-align: center;
  background-color: darkblue;
  font-weight: bold;
  color: white;
  padding: 2px;
  width: 90%;
  margin:0 auto;
  margin-bottom: 5px;
  border: 1px outset gray;
}
#map {
  /* position:absolute; */
  width: 90%;
  margin:0 auto;
  height: 500px;
  margin-bottom: 80px;
  border: 1px outset gray;
}
footer{
  font-size: 100%; /*フォントサイズの指定*/
  width: 100%;    /*横幅の指定*/
  text-align: center; /*文字の中央寄せ*/
  padding-top: 12px;  /*文字上部の余白指定*/
  padding-bottom: 12px;   /*文字下部の余白指定*/
  background-color: #333;  /*背景色の指定*/
}
footer small{
  color: #fff;    /*文字色の指定*/
  /* letter-spacing: 5px;    文字と文字の間隔をあける */
  /* font-style: normal; 文字の斜体を取り消す */
}
#ad {
  text-align: center;
}

/* モーダル背景 */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* モーダル本体 */
.modal-content {
  background: white;
  padding: 20px;
  width: 700px;
  max-width: 90%;
  border-radius: 10px;
  position: relative;
}

/* 閉じるボタン */
.close-button {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 20px;
  cursor: pointer;
}

/* Aboutリンク */
.modal-link {
  float: right;
  cursor: pointer;
}
