/* Basic reset for better cross-browser compatibility */
 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body styling */
body {
   font-family: 'Helvetica Neue', Arial, sans-serif; 

  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
  margin: 0; 

}


.site-message {
  background-color: #fdfcf6;
  padding: 20px;
  margin: 10px auto;
  max-width: 800px;
  border-radius: 8px;
  line-height: 1.7;
  font-size: 1em;
}

.site-message h2 {
  margin-top: 0;
  color: #2a77b8;
  font-size: 1.2em;
}


.topic-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      padding: 40px 20px;
      gap: 20px;
      background: white;
    }
    
    
.topic-card {
  background: #ffffff;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 20px;
  width: 280px;
  box-shadow: 0 0 0 2px #fff, 0 0 12px rgba(0, 0, 0, 0.1);
  background-clip: padding-box, border-box;
  background-origin: border-box;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #ff7e5f, #feb47b); /* グラデ縁 */
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.topic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 2px #fff, 0 8px 16px rgba(0, 0, 0, 0.15);
}

.topic-card h3 {
  color: #d14a00;
  margin-top: 0;
  font-size: 1.2em;
}

.topic-card a {
  color: #d14a00;
  text-decoration: none;
  font-weight: bold;
}

.topic-card a:hover {
  text-decoration: underline;
}


.timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px; /* 20px → 10px */
    max-width: 600px;
    position: relative;
}

.event {
    background: white;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    padding: 5px; /* 20px → 15px */
    margin: 5px 0; /* 10px → 5px */
    width: 90%; /* 固定幅をやめて可変に */
    max-width: 350px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-left: 5px solid #0077cc;
    position: relative;
}

.event h2 {
    font-size: 1em; /* 1.2em → 1em */
    margin-bottom: 3px; /* 少し詰める */
    color: #0077cc;
    border-bottom: 2px solid #28a745;
    padding-bottom: 3px;
}

.event p {
    font-size: 0.9em;
    color: #555;
}

/* モバイル専用の調整 */
@media screen and (max-width: 600px) {
    .timeline {
        padding: 3px;
    }
    .event {
        padding: 3px;
        margin: 3px 0;
    }
    .event h2 {
        font-size: 0.95em;
    }
    .event p {
        font-size: 0.8em;
    }
}

        
   .event h2 .subtitle {
    font-size: 0.9em;
    color: #0077cc;
    font-weight: normal;
    margin-left: 5px;
}

   
        

/* 注釈スタイル */
.note {
  font-size: 0.8em;
  color: #555;
  margin-top: 5px;
  padding-left: 0.6em; /* マーク分だけ余白 */
  position: relative;
}

.note::before {
  content: "†";
  position: absolute;
  left: 0;
  font-size: 0.8em;
  color: #777;
}



caption {
    caption-side: top;
    text-align: left;
}


  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  
  

  
  table, th, td {
    border: 1px solid black;
  }
  th, td {
    padding: 10px;
    text-align: left;
  }

td img {
    width: 100%; /* 画像の幅をtdの幅に合わせる */
    height: 100%; /* 画像の高さをtdの高さに合わせる */
    object-fit: cover; /* 画像をtdに合わせてトリミングする */
}


/* Container styling */
#container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  overflow: hidden;
  background: #fff;
  
}

/* Map styling */

#map { height: 100vh; width: 30vw; }
    .bar {
      fill: rgba(0, 123, 255, 0.7);
      stroke: rgba(0, 123, 255, 1);
    }

  @media screen and (max-width: 768px) {
      #map {
       
       
       width: 97vw;
       
      }
    }  
    
    
  #map-container {
  
max-width: 1200px;   /* PCでは最大1200pxまで広がる */
  width: 100%;         /* 画面幅に応じて自動で縮む（スマホ対応） */
  margin: 0 ;      /* 中央寄せ */
  padding: 0 ;     /* 左右の余白を確保 */
  background: #fff;    /* 背景は白のまま */
  box-sizing: border-box; /* paddingを含めて幅計算する（重要） */
  
}  
    
    
    .tooltip {
      position: absolute;
      background-color: rgba(0,0,0,0.8);
      color: white;
      padding: 5px 8px;
      border-radius: 4px;
      font-size: 13px;
      z-index: 9999;
    }

.leaflet-overlay-pane svg {
  z-index: 1000 !important;
  pointer-events: auto !important;
}


.leaflet-control-attribution {
  white-space: normal;   /* ← 改行を許可する */
  max-width: 120vw;       /* ← 画面幅に収まるように */
  font-size: 11px;
  box-sizing: border-box;
}

.label {
      font-size: 10px;
      color: #222;
      font-weight: bold;
      background: none;
      border: none;
    }

.map-overlay-title {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 1.1em;
  font-weight: bold;
  color: #0077cc;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  pointer-events: none; /* 地図操作の妨げにならないように */
}

@media (max-width: 600px) {
  .map-overlay-title {
    font-size: 0.95em;
    padding: 6px 12px;
  }
}


  
/* Header styling */
header {

 display: flex;
    align-items: left;
    justify-content: flex-start; /* 全体のコンテンツを左寄せ */
 }

header img{ 
  max-width: 100%;
  height: auto;
  display: flex;
  margin: 0; /* 画像を左寄せにする */
  }

header .logo {
  max-height: 200px; 
  margin-right: 20px;
  text-align: left;
}

.title-menu {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向の中央揃え */
}

header h1 {
  font-size: 1.3em;
  color: #e74c3c; /* Red color */
}

.site-title {
  font-size: 1.3em;
  font-weight: bold;
  color: #e74c3c; /* Red color */
}



.subtitle {
  font-size: 0.8em;
  color: #34dbba; /* Blue color */
  letter-spacing: 0.05em;
  margin-left: 10px; /* Optional spacing from the title */
}


header nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 15px;
  font-size: 1.2em; /* メニューのフォントサイズを大きくする */
  margin-top: auto; /* ロゴのボトムに合わせて配置 */
  
  margin: 1;
  overflow: hidden;
  background-color: white;
  flex-wrap: wrap;
  
}

header nav ul li {
  display: inline;
  float: left;
}

header nav ul li a {
  text-decoration: none;
  color: #27ae60; /* Green color */
  font-weight: bold;
  display: block;
  text-align: center;
  padding: 14px 16px;
 
}

header nav ul li a:hover {
  color: #e67e22; /* Orange color */
  background-color:  #ddd;
}

nav ul.nav-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
}

nav ul.nav-menu li {
  flex: 1 1 auto;
}

nav ul.nav-menu li a {
  display: block;
  color: green;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav ul.nav-menu li a:hover {
  background-color: #ddd;
}

@media (max-width: 600px) {
  nav ul.nav-menu {
    flex-direction: column;
  }
}



/* 目次全体のデザイン */
section #toc {
  border: 2px solid #007BFF; /* 枠線の色と太さ */
  border-radius: 10px; /* 角丸の半径 */
  padding: 1em; /* 内側の余白 */
  background-color: #f9f9f9; /* 背景色 */
  margin: 1em 0; /* 上下の余白 */
  max-width: 600px; /* 最大幅を指定 */
}

/* 目次のタイトル */
section #toc h2 {
  margin-top: 0; /* 上の余白をリセット */
  font-size: 1.2em; /* フォントサイズ */
  color: #007BFF; /* タイトルの色 */
  text-align: left; 
  border-bottom: none;
}

/* 目次のリスト */
section #toc li {
  list-style-type: decimal; /* デフォルトのリストスタイルを削除 */
  padding: 0; /* パディングを削除 */
  margin: 0.1em 0; /* 項目間の余白 */
}

/* リンクのデザイン */
section #toc li a {
  text-decoration: none; /* 下線を削除 */
  color: #333; /* リンクの色 */
  font-weight: bold; /* 強調表示 */
  padding: 0.2em 0.5em; /* リンク周りの余白 */
  display: inline-block; /* ブロック化でクリック範囲を広げる */
  border-radius: 5px; /* リンク自体の角丸 */
  transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

/* ホバー時のスタイル */
section #toc li a:hover {
  background-color: #f6ff00; /* 背景色を変更 */
}





table {
    width: 100%;
    border-collapse: collapse;
  }
  table, th, td {
    border: 1px solid black;
  }
  th, td {
    padding: 10px;
    text-align: left;
  }





/* Content and ads layout */
#content {
  display: flex;
}

main {
  flex: 3;
  margin-right: 20px;
}

aside#ads {
  flex: 1;
}

/* Section styling */
section {
  margin-bottom: 20px;
}

section h1 {
  font-size: 1.3em;
  margin-bottom: 2px;
  border-bottom: 2px solid #27ae60; /* Green color */
  padding-bottom: 2px;
  color: #27ae60; /* Green color */
}

section p {
  margin-bottom: 20px;
  line-height: 1.8;
}




section ul {
  list-style: disc;
  margin-left: 20px;
}


section ul li {
  margin-bottom: 10px;
  list-style: disc;
}


  
 section  h3 {
  font-size: 1.3em;
  color: #ff6347; /* Change the color as needed */
  font-weight: bold;
  text-align: left;
  background-color: #FFFFFF; 
  padding: 1px;
  border-radius: 10px;
} 
  
  section h3 a {
  color:  #ff6347; /* リンクの色 */
  text-decoration: none; /* アンダーラインを削除 */
}

section h3 a:hover {
  color:  #ff6347; /* リンクのホバー時の色 */
  background-color: #ffffe0 ; /* ホバー時の背景色 */
}

section h3 a:active {
  color:  #ff6347; /* クリック時の色 */
}
 
section h3 a:visited {
  color:  #ff6347; /* 訪問後もリンクの色を維持 */
  text-decoration: none; /* アンダーラインを削除 */
}

.highlight-tag1 {
    font-size: 0.6em;
    background-color: #27ae60; /* Green background to match navigation and footer */
    color: #fff; /* White text */
    font-weight: bold;
    padding: 2px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }


  
  
.highlight-tag1 {
    font-size: 0.6em;
    background-color: #27ae60; /* Green background to match navigation and footer */
    color: #fff; /* White text */
    font-weight: bold;
    padding: 2px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
  
.highlight-tag2 {
    font-size: 0.6em;
    background-color: #1023eb; /* Green background to match navigation and footer */
    color: #fff; /* White text */
    font-weight: bold;
    padding: 2px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


 
 section  h4 {
  font-size: 1.1em;
  color: #0095d9; /* Change the color as needed */
  font-weight: bold;
  text-align: left;
  background-color: #FFFFFF; 
  padding: 1px;
  border-radius: 10px;
} 

 section  h5 {
  font-size: 1.0em;
  font-weight: bold;
  text-align: left;
  background-color: #FFFFFF; 
  padding: 1px;
  border-radius: 10px;
} 



.button {
        font-size: 10px;
        padding: 1px 2px;
    }





/* Footer styling */
footer {
  text-align: center;
  padding: 20px 0;
  margin-top: 40px;
  background: #27ae60; /* Green color */
  color: #fff;
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}





/* Responsive design */
@media (max-width: 600px) {
  body {
    margin: 3px;
    }
      
  }

  header {
    flex-direction: column;
    align-items: center;
  }

  header h1 {
    
      font-size: 1.3em;
  margin-bottom: 2px;
  padding-bottom: 2px;
  color: #e74c3c; /* Red color */
    
  }
  
  

  header nav ul {
    flex-direction: column;
    align-items: center;
  }
  

  header nav ul li {
    display: block;
    margin: 3px 0;
  }
  
  
  

  #container {
    padding: 5px;
  }

  #content {
    flex-direction: column;
  }

  main {
    margin-right: 3px;
  }

  aside#ads {
    margin-top: 20px;
  }
}

/* パンくずリスト全体のデザイン */
#breadcrumb ul {
  list-style: none; /* デフォルトのリストスタイルを削除 */
  display: flex; /* 横並びに設定 */
  padding: 0; /* パディングを削除 */
  margin: 0; /* マージンを削除 */
  align-items: center; /* 縦位置を中央揃え */
}

/* リスト項目のデザイン */
#breadcrumb li {
  display: inline; /* インライン表示 */
  margin: 0; /* マージンをリセット */
}

/* リスト項目間の矢印デザイン */
#breadcrumb li::after {
  content: ' > '; /* 矢印を挿入 */
  margin: 0 0.5em; /* 矢印の両側にスペースを追加 */
  color: #555; /* 矢印の色を設定 */
}

/* 最後の項目の矢印を非表示 */
#breadcrumb li:last-child::after {
  content: ''; /* 矢印を表示しない */
}

/* リンクのデザイン */
#breadcrumb li a {
  text-decoration: none; /* 下線を削除 */
  color: #007BFF; /* リンクの色 */
  font-weight: bold; /* 強調表示 */
}

#breadcrumb li a:hover {
  text-decoration: underline; /* ホバー時に下線を追加 */
}



#toc ol li a {
    display: block; /* 各リンクをブロック要素に */
    margin-bottom: 5px; /* 改行幅を5pxに */
  }

  /* トップレベルリンクの余白を調整 */
  #toc ol li > a:first-of-type {
    margin-bottom: 7px; /* トップレベルリンクに大きめの余白 */
  }