@charset "utf-8";
body, html {
    height: 100%;
    margin: 0;
/*    
    overflow: hidden;
*/          
}

li {
  padding: 0.25rem;
}

.text {
  margin-left: 80px;
  font-size: 8pt;
  color: #192f60;
  z-index: 2;
  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: rgba(141, 148, 243, 0.75);
  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;
}

.box.thumbnails.mannaka {
  display: flex;
  align-items: center; /* 横方向に中央揃え */
}

/* 必要なスタイルを追加 */
.box.thumbnails.mannaka a {
  margin-top: 10px; /* 各要素の上部にマージンを追加して下方向に配置 */
  color: #fffde0;
}

.arrow-container {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 5; /* 地図よりも上に表示するための z-index */
}

.arrow-left,
.arrow-right {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50px; /* 矢印の幅 */
  background-color: rgba(255, 255, 255, 0.5); /* 矢印の背景色 */
  cursor: pointer;
  z-index: 5; /* 地図よりも上に表示するための z-index */
}

.arrow-left {
  left: 0;
  margin-left: 10px; /* 左端からの距離を調整 */
}

.arrow-right {
  right: 0;
}