/* Reset and Basic Styles */
body {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  background-color: #f8f8f8; /* 少し明るい背景 */
  color: #333;
  line-height: 1.7; /* 少し行間を広げる */
  font-size: 16px; /* ベースフォントサイズ */
}

*, *::before, *::after {
  box-sizing: border-box; /* 崩れにくいレイアウトのため */
}

a {
  color: #0062ff; /* 落ち着いた青系 */
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: #b3ff00; /* ホバー時のアクセント */
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px; /* 画像に軽い角丸 */
}

/* Header */
header {
  background-color: #00000094;
  color: #fff; /* 文字色を白に変更してコントラストを明確に */
  padding: 20px 15px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
  margin: 0 0 8px 0;
  font-size: 2.4em;
  font-weight: 700; /* より太く */
  letter-spacing: 1px;
}

header p {
  margin: 0 0 15px 0;
  font-size: 1.05em;
  font-style: italic;
  opacity: 0.9;
}

header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px; /* ナビゲーションアイテム間の隙間 */
}

header nav li {
  margin: 0; /* gapで管理するので個別マージン不要 */
}

header nav a {
  color: #fff;
  font-weight: 600;
  padding: 10px 15px; /* パディングを少し大きく */
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: inline-block; /* パディングを有効にするため */
}

header nav a:hover {
  background-color: rgba(255,255,255,0.2); /* 薄い白背景 */
  text-decoration: none;
}

/* Main Content Area */
main {
  max-width: 960px; /* 少し狭めて読みやすく */
  margin: 30px auto;
  padding: 0 15px;
}

/* Main Visual */
.main-visual {
  margin-bottom: 0; /* #info-overlay が重なるため */
  position: relative;
  z-index: 1;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* 影を少し強調 */
}

.main-visual img {
  width: 100%;
  border-radius: 6px; /* 角丸を少し大きく */
}

/* Overlay Info Section (#info-overlay) - デフォルト (PCなど広い画面) */
#info-overlay {
  position: relative; 
  z-index: 2;         
  margin-top: -150px; 
  width: 90%;         
  max-width: 500px;   
  margin-left: auto;  
  margin-right: auto; 
  background-color: rgba(25, 25, 25, 0.88); 
  color: #fff;        
  padding: 20px;      
  border-radius: 6px; 
  box-shadow: 0 6px 18px rgba(0,0,0,0.35); 
  margin-bottom: 40px; 
}

#info-overlay h2 {
  font-size: 1.6em;   
  color: #f1c40f;    
  border-bottom: 2px solid #f1c40f; 
  padding-bottom: 10px; 
  margin-top: 0;      
  margin-bottom: 15px;
  text-align: center; 
  letter-spacing: 0.5px; 
}

#info-overlay h3 {
  font-size: 1.1em;   
  color: #e0e0e0;    
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 500;   
}

#info-overlay table {
  width: 100%;        
  border-collapse: collapse; 
  margin-top: 10px;
}

#info-overlay th, 
#info-overlay td {
  border: 1px solid #444; 
  padding: 10px;      
  text-align: left;   
  vertical-align: top;
  font-size: 0.9em;   
}

#info-overlay th {
  background-color: rgba(255, 255, 255, 0.08); 
  font-weight: 600;   
  color: #dadada;    
  width: 25%;         
}

#info-overlay td p {
  margin: 4px 0;      
  line-height: 1.5;   
}


/* Responsive Adjustments for #info-overlay */

/* タブレットサイズ (例: 768px以下) */
@media (max-width: 768px) {
  #info-overlay {
    margin-top: -120px; 
    width: 92%;         
    max-width: 520px;   
    padding: 18px;      
    margin-bottom: 35px;
  }

  #info-overlay h2 {
    font-size: 1.45em;  
    padding-bottom: 8px;
    margin-bottom: 12px;
  }

  #info-overlay h3 {
    font-size: 1.05em; 
    margin-bottom: 8px;
  }

  #info-overlay th, 
  #info-overlay td {
    padding: 9px;       
    font-size: 0.88em;  
  }

  #info-overlay th {
    width: 28%;         
  }
}



  #info-overlay td p {
    margin: 2px 0;
    line-height: 1.4;     /* 行間を少し詰める */
  }


/* Common Content Section Styling */
.content-section {
  background-color: #fff;
  padding: 25px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
}

.content-section h2 {
  font-size: 2em;
  color: #b71c1c; /* メインの赤系 */
  border-bottom: 3px solid #b71c1c;
  padding-bottom: 12px;
  margin-top: 0;
  margin-bottom: 25px;
  text-align: center;
  letter-spacing: 0.5px;
}

.content-section h3 {
  font-size: 1.6em;
  color: #2c3e50; /* ダークブルー系 */
  margin-top: 30px;
  margin-bottom: 15px;
  padding-left: 12px;
  border-left: 5px solid #e67e22; /* オレンジアクセント */
  font-weight: 600;
}
/* Specific paragraph styling if needed, e.g., lead paragraph */
.section-lead {
    text-align: center;
    font-size: 1.1em;
    color: #555;
    margin-bottom: 30px;
    line-height: 1.8;
}


/* Introduction Text Section (#introduction-text) */
#introduction-text p {
  margin-bottom: 18px; /* 段落間のスペース */
  font-size: 1.05em;
  line-height: 1.8;
}

/* Yamakasa Introduction Section (#introduction-yamakasa) */
.yamakasa-name-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* 画像間のスペースを均等に */
  gap: 20px; /* 画像間の隙間 */
  margin-top: 20px;
}

.yamakasa-name-gallery a {
  display: block;
  text-align: center;
  transition: transform 0.25s ease-out; /* 少し滑らかな動きに */
  border-radius: 6px; /* リンクエリアにも角丸 */
}

.yamakasa-name-gallery a:hover {
  transform: translateY(-6px) scale(1.03); /* ホバー効果を少し大きく */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.yamakasa-name-gallery img {
  width: 180px;
  border: none; /* ホバーで枠線をつけるなら普段は消すなど */
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  /* transition: border-color 0.3s ease; */ /* a:hover で shadow をつけるので不要かも */
}
/*
.yamakasa-name-gallery img:hover {
  border-color: #c0392b;
}
*/

/* Schedule Section (#schedule) */
#schedule ul {
  list-style: none;
  padding-left: 0;
}

#schedule li {
  background-color: #f9f9f9;
  padding: 12px 20px;
  margin-bottom: 10px;
  border-left: 5px solid #ccc;
  border-radius: 0 4px 4px 0;
  transition: background-color 0.2s ease, border-left-color 0.2s ease;
  font-size: 1em;
}
#schedule li:hover {
  background-color: #e9e9e9;
}

#schedule li.honsai {
  border-left-color: #2980b9; /* 青 */
  background-color: #eaf5ff;
  color: #1c5d87;
}
#schedule li.honsai:hover {
  background-color: #d8eaff;
}

#schedule li.bangai {
  border-left-color: #f39c12; /* オレンジ */
  background-color: #fff8e1;
  color: #8c5c0a;
}
#schedule li.bangai:hover {
  background-color: #fef0cd;
}

.schedule-note { /* スケジュール下の注釈 */
  margin-top: 20px;
  font-style: italic;
  color: #666;
  text-align: center;
  font-size: 0.9em;
}

/* Access Section (#access) */
#access p {
  margin-bottom: 18px;
  font-size: 1.05em;
}

.map-container { /* Yahoo Map Script Tag Wrapper */
  margin-top: 10px;
  margin-bottom: 25px;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden; /* If map script creates an iframe that might overflow */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Footer */
footer {
  background-color: #333;
  color: #bbb; /* 文字色を少し明るく */
  text-align: center;
  padding: 30px 15px; /* パディング調整 */
  margin-top: 40px;
  font-size: 0.9em;
}

footer p {
  margin: 10px 0;
  line-height: 1.6;
}
footer a { /* フッター内のリンクがあれば */
    color: #fff;
    text-decoration: underline;
}
footer a:hover {
    color: #f1c40f;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  body {
    font-size: 15px;
  }
  header h1 {
      font-size: 2em;
  }
  header p {
      font-size: 1em;
  }
  header nav ul {
      flex-direction: column;
      gap: 5px;
  }
  header nav a {
      padding: 8px 12px;
      display: block; /* 縦並びで幅いっぱいに */
  }

  main {
    padding: 0 10px;
  }

  .content-section h2 {
      font-size: 1.7em;
  }
  .content-section h3 {
      font-size: 1.4em;
  }

  /* Overlay Info Section (#info-overlay) for Tablet */
  #info-overlay {
      margin-top: -100px;
      width: 95%;
      padding: 15px;
  }
  #info-overlay h2 { font-size: 1.4em; margin-bottom: 12px;}
  #info-overlay h3 { font-size: 1em; margin-bottom: 8px; }
  #info-overlay th, #info-overlay td { font-size: 0.85em; padding: 8px;}
  #info-overlay th { width: 30%; }

  .yamakasa-name-gallery img {
      width: 150px;
  }
  .yamakasa-name-gallery {
      gap: 15px;
  }

  #schedule li {
      padding: 10px 15px;
      font-size: 0.95em;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px; /* スマホではベースフォントをさらに小さく */
  }
  header {
    padding: 15px 10px;
  }
  header h1 {
      font-size: 1.7em;
  }
  header p {
      font-size: 0.9em;
      margin-bottom: 10px;
  }
  header nav a {
      padding: 8px 10px; /* 少し小さく */
      font-size: 0.95em;
  }

  main {
      margin-top: 20px;
      padding: 0 8px;
  }

  .content-section {
      padding: 20px;
      margin-bottom: 25px;
  }
  .content-section h2 {
      font-size: 1.5em;
      margin-bottom: 20px;
      padding-bottom: 10px;
  }
  .content-section h3 {
      font-size: 1.25em;
      margin-bottom: 12px;
      padding-left: 10px;
  }
  #introduction-text p, #access p {
    font-size: 1em; /* bodyの14pxに対して1em */
    line-height: 1.7;
  }
  .section-lead {
      font-size: 1em;
      margin-bottom: 20px;
  }

  .yamakasa-name-gallery {
      gap: 10px;
      justify-content: center; /* 中央揃え */
  }
  .yamakasa-name-gallery img {
      width: clamp(100px, 30vw, 130px); /* 画面幅に応じて調整、最小100px、最大130px */
  }

  /* Overlay Info Section (#info-overlay) for Mobile - Remove Overlay */
  #info-overlay {
      position: static; /* 通常の配置に戻す */
      margin-top: 25px;
      margin-bottom: 25px;
      width: auto;
      max-width: none;
      background-color: #fff; /* 通常のセクション背景 */
      color: #333; /* 通常の文字色 */
      box-shadow: 0 3px 10px rgba(0,0,0,0.07); /* 通常の影 */
      padding: 20px;
  }
  #info-overlay h2 {
      font-size: 1.5em; /* 他のセクションタイトルと合わせる */
      color: #b71c1c;
      border-bottom: 3px solid #b71c1c;
  }
  #info-overlay h3 {
      font-size: 1.25em;
      color: #555;
      text-align: center;
  }
  #info-overlay table { margin-top: 15px; }
  #info-overlay th, #info-overlay td {
      border: 1px solid #ddd;
      color: #333;
      font-size: 0.85em; /* テーブル内は少し小さめ */
      padding: 6px 8px;
  }
  #info-overlay th {
      background-color: #f5f5f5;
      width: auto; /* 幅自動 */
  }

  #schedule li {
      padding: 10px 12px;
      font-size: 0.9em;
      margin-bottom: 8px;
  }
  .schedule-note {
      font-size: 0.85em;
  }

  footer {
      padding: 20px 10px;
  }
  footer p {
      font-size: 0.85em;
  }
}