body, html {
    height: 100%;
    margin: 0;
/*    
    overflow: hidden;
*/          
}

li {
  padding: 0.25rem;
}

.text {
  margin-left: 80px;
  font-size: 8pt;
  color: #192f60;
  z-index: 1;
  position: fixed;
  box-sizing: border-box;
  padding: 0 25px 0 25px;
  border-radius: 10px;
  width: fit-content;
  line-height: 1;
  border: 2px solid #192f60;
}
.orange {
  background-color: #f3dbcc;
}
.green {
  background-color: #cff1c5; 
}
.yellow {
  background-color: #f3f0cc;   
}
.perple {
  background-color: #e9c3f0;
}
.red {
  background-color: #f3c3d9; 
}
.blue {
  background-color: #c8d0f0; 
}
iframe {
  width: 100%;
  height: 100%; /* タイトルの高さ分の余白を確保 */
  border: none;
  display: block; /* インライン余白の問題を回避 */
  z-index: 0; /* タイトルよりも背後に配置 */             
}
.t_color {
  color: #f3dbcc;
}
.t_sky {
  color:rgb(130, 247, 255)
}
.t_beni {
  color:#d709df
}
.box {
  margin-left: auto;
  margin-right: auto;
  background-color: rgb(9, 19, 110);
  font-size: 8pt;
  color: #fffde0;
  z-index: 1;
  position: fixed;
  bottom: 2px; /* 画面下からの距離を調整 */
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 10px;
  width: fit-content;
  line-height: 1;
}

.container {
  display: grid;
  grid-template-columns: repeat(10, 90px); /* ボックスの幅を90pxに設定 */
  grid-template-rows: repeat(7, 110px); /* ボックスの高さを100pxに設定 */
  width: 900px; /* グリッドの幅を設定 */
  height: 770px; /* グリッドの高さを設定 */
  margin: 0 auto; /* グリッドを中央に配置 */
  border: 1px solid #000; /* グリッドの境界線を表示 */
}

.map_box {
  background-size: 90px 110px; /* 背景画像のサイズを90x100に設定 */
  background-repeat: no-repeat;
  background-position: auto;
}

.map_box img {
  width: 90px;
  height: 110px;
}

.t_color {
  text-align: center;
}