/* ========================================
   base.css - 全ページ共通の基本スタイル（モバイルファースト）
   
   【設計方針】
   - モバイル（320px〜）を基準にデザイン
   - min-widthメディアクエリで大画面に対応
   - 既存のPC仕様は完全に保持
   - iPhone16等の新しいデバイスのセーフエリア対応
   
   【ブレークポイント】
   - 基本: 320px〜（スマートフォン）
   - 901px〜: デスクトップ（既存仕様を保持）
======================================== */

/* ========================================
   全体共通の基本スタイル（モバイル基準）
======================================== */
body {
  margin: 0; /* デフォルトマージンをリセット */
  font-family: sans-serif; /* 基本フォント */
  line-height: 1.6; /* 読みやすい行間 */
  overflow-y: scroll; /* 縦スクロールバーを常に表示 */
  font-size: 14px; /* モバイル基準のフォントサイズ */
  background-color: #ecfae5; /* 薄い緑の背景色 */
}

/* ========================================
   ヘッダー全体のスタイル（モバイル基準）
======================================== */
header {
  background-color: #006400; /* 濃い緑 */
  color: white; /* 白文字 */
  min-height: 60px; /* モバイル：最小高さ60px */
  display: flex; /* フレックスボックス */
  flex-direction: column; /* モバイル：縦方向配置 */
  flex-wrap: nowrap; /* 折り返しなし */
  justify-content: center; /* 垂直中央揃え */
  align-items: center; /* 水平中央揃え */
  padding: 10px 15px; /* モバイル：上下10px、左右15pxの余白 */
  position: sticky; /* スティッキー配置 */
  top: 0; /* 上端に固定 */
  z-index: 5000; /* 重ね順：最前面 */

  /* セーフエリア対応 */
  padding-top: max(10px, env(safe-area-inset-top));
  padding-left: max(15px, env(safe-area-inset-left));
  padding-right: max(15px, env(safe-area-inset-right));

  /* アニメーション用のトランジション */
  transition: min-height 0.3s ease, padding 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
  will-change: padding, min-height, background-color, transform; /* パフォーマンス最適化 */
}

/* ========================================
   社名とロゴ部分（モバイル基準）
======================================== */
.site-title {
  display: flex; /* フレックスボックス */
  align-items: center; /* 垂直中央揃え */
  gap: 0.5rem; /* ロゴと文字の間隔 */
  font-family: HG正楷書体-PRO; /* 日本語フォント */
  font-weight: bold; /* 太字 */
  font-size: clamp(1rem, 4vw, 1.5rem); /* モバイル：レスポンシブフォントサイズ */
  letter-spacing: 0.05em; /* 文字間隔 */
  flex: none; /* フレックス伸縮なし */
  min-width: 150px; /* 最小幅 */
  width: 100%; /* 幅100% */
  justify-content: center; /* 水平中央揃え */
  padding-right: 10px; /* 右余白 */
  margin: 0; /* マージンリセット */

  /* アニメーション用のトランジション */
  transition: font-size 0.3s ease, opacity 0.3s ease, height 0.3s ease, visibility 0.3s ease;
}

/* ========================================
   ロゴ画像（モバイル基準）
======================================== */
.logo {
  max-height: 35px; /* モバイル：最大高さ35px */
  object-fit: contain; /* 縦横比を保持 */
  width: auto; /* 幅は自動調整 */

  /* アニメーション用のトランジション */
  transition: opacity 0.3s ease;
}


.site-link {
  text-decoration: none; /* 下線を消す */
  color: inherit;         /* 親の色を使う（通常の黒とか） */
}


/* ========================================
   ナビゲーションメニュー（モバイル基準：フルスクリーンメニュー）
======================================== */
nav ul {
  display: none; /* 初期状態：非表示 */
  position: fixed; /* 固定配置 */
  top: 0; /* 上端 */
  left: 0; /* 左端 */
  width: 100vw; /* ビューポート幅いっぱい */
  height: 100vh; /* ビューポート高さいっぱい */
  height: 100dvh; /* 動的ビューポート高さ（iPhone対応） */
  background-color: rgba(0, 100, 0, 0.98); /* 濃い緑背景（半透明で背景を隠す） */
  backdrop-filter: blur(10px); /* 背景ぼかし効果 */
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
  z-index: 9999; /* 最前面 */
  flex-direction: column; /* 縦方向配置 */
  justify-content: center; /* 垂直中央揃え */
  align-items: center; /* 水平中央揃え */
  text-align: center; /* テキスト中央揃え */
  padding: 0; /* 余白なし */
  margin: 0; /* マージンなし */
  list-style: none; /* リストマーカーなし */

  /* セーフエリア対応 */
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));

box-sizing: border-box; /* 追加：パディングを幅に含める */

  /* フェードイン・アウト効果 */
  opacity: 0; /* 初期状態：透明 */
  visibility: hidden; /* 初期状態：非表示 */
  transition: opacity 0.4s ease, visibility 0.4s ease, backdrop-filter 0.4s ease;

  /* スクロール可能にする（メニューが多い場合） */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS用スムーススクロール */
}

/* メニュー表示時のスタイル */
nav.show ul {
  display: flex; /* フレックス表示 */
  opacity: 1; /* 不透明 */
  visibility: visible; /* 表示 */
}

/* ナビゲーションリンク（モバイル基準） */
nav li {
  margin: 8px 0; /* 上下8pxの余白（間隔を詰める） */
  width: 85%; /* 幅85% */
  max-width: 320px; /* 最大幅320px */

  /* アニメーション効果（順次表示） */
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.6s ease forwards;
}

/* メニューアイテムの順次表示アニメーション */
nav.show li:nth-child(1) {
  animation-delay: 0.1s;
}
nav.show li:nth-child(2) {
  animation-delay: 0.15s;
}
nav.show li:nth-child(3) {
  animation-delay: 0.2s;
}
nav.show li:nth-child(4) {
  animation-delay: 0.25s;
}
nav.show li:nth-child(5) {
  animation-delay: 0.3s;
}
nav.show li:nth-child(6) {
  animation-delay: 0.35s;
}
nav.show li:nth-child(7) {
  animation-delay: 0.4s;
}
nav.show li:nth-child(8) {
  animation-delay: 0.45s;
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

nav a {
  color: white; /* 白文字 */
  text-decoration: none; /* 下線なし */
  font-weight: bold; /* 太字 */
  font-size: 1.1rem; /* モバイル：フォントサイズ1.1rem（少し小さく） */
  padding: 12px 20px; /* 内側余白（少し小さく） */
  display: block; /* ブロック表示 */
  border-radius: 12px; /* 角丸 */
  transition: all 0.3s ease; /* アニメーション */
  border: 2px solid rgba(255, 255, 255, 0.2); /* 半透明白枠線 */
  background-color: rgba(255, 255, 255, 0.1); /* 半透明白背景 */
  backdrop-filter: blur(5px); /* 軽いぼかし効果 */
  -webkit-backdrop-filter: blur(5px); /* Safari対応 */

  /* タッチ操作の改善 */
  min-height: 44px; /* iOS推奨のタッチターゲットサイズ */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* リンクホバー・フォーカス時の効果 */
nav a:hover,
nav a:focus,
nav a:active {
  background-color: rgba(255, 255, 255, 0.9); /* 白背景 */
  color: #006400; /* 緑文字 */
  transform: translateY(-2px) scale(1.02); /* 少し上に移動＆拡大 */
  border-color: #ecfae5; /* 薄い緑の枠線 */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* 影効果 */
}

/* アクティブページのスタイル */
/*nav a.active {*/
/*  background-color: #ecfae5; /* 薄い緑背景 */
/*  color: #006400; /* 緑文字 */
/*  border-color: white; /* 白い枠線 */
/*  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 影効果 */
/*}*/


/* ========================================
     ドロップダウンメニュー（モバイル専用）
  ======================================== */
  .dropdown {
    position: relative;
    width: 100%;
  }

  .dropdown-content {
    display: none;
    width: 100%;/*85%;*/
    max-width: 300px;
    margin: 5px auto 15px auto;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  .dropdown.show .dropdown-content {
    display: block;
    animation: fadeInDown 0.3s ease;
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .dropdown-content a {
    font-size: 1rem;
    padding: 8px 15px;
    margin: 2px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.05);
    min-height: 36px;
  }

  .dropdown-content a:hover,
  .dropdown-content a:focus {
    background-color: rgba(255, 255, 255, 0.8);
    color: #006400;
    transform: translateY(-1px);
  }

  .dropdown-toggle {
    position: relative;
  }

  .dropdown-toggle::after {
    content: ' ▼';
    font-size: 0.8em;
    margin-left: 5px;
    transition: transform 0.3s ease;
  }

  .dropdown.show .dropdown-toggle::after {
    transform: rotate(180deg);
  }

/* ========================================
   ハンバーガーメニューボタン（モバイル専用）
======================================== */
.hamburger-menu {
  display: flex; /* フレックス表示 */
  flex-direction: column; /* 縦方向配置 */
  gap: 4px; /* 線の間隔 */
  background: rgba(0, 0, 0, 0.1); /* 半透明黒背景（視認性向上） */
  border: none; /* 枠線なし */
  position: fixed; /* 固定配置 */
  top: 15px; /* 上から15px */
  right: 15px; /* 右から15px */
  z-index: 11000; /* ナビより前面 */
  cursor: pointer; /* ポインターカーソル */
  padding: 10px; /* 内側余白（タッチ領域拡大） */
  border-radius: 8px; /* 角丸 */
  transition: all 0.2s ease; /* アニメーション */

  /* セーフエリア対応修正 */
  top: max(15px, env(safe-area-inset-top));
  right: max(15px, env(safe-area-inset-right));

  /* タッチ操作の改善 */
  min-width: 44px; /* iOS推奨のタッチターゲットサイズ */
  min-height: 44px;
  justify-content: center;
  align-items: center;
}

/* ハンバーガーメニューの線 */
.hamburger-menu div {
  width: 25px; /* 線の幅 */
  height: 3px; /* 線の太さ */
  background: white; /* 白色 */
  border-radius: 2px; /* 角丸 */
  transition: all 0.3s ease; /* アニメーション */
}

/* ハンバーガーメニューのホバー効果 */
.hamburger-menu:hover,
.hamburger-menu:focus {
  transform: scale(1.05); /* 少し拡大 */
  background: rgba(0, 0, 0, 0.2); /* 背景を少し濃く */
}

/* メニューが開いている時のハンバーガーアイコン（Xマーク）修正版 */
.hamburger-menu.active {
  background: rgba(255, 255, 255, 0.2); /* 開いている時は白っぽく */
}

.hamburger-menu.active div:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px); /* 1本目：正確な45度回転 */
}

.hamburger-menu.active div:nth-child(2) {
  opacity: 0; /* 2本目：非表示 */
}

.hamburger-menu.active div:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px); /* 3本目：正確な-45度回転 */
}

/* ========================================
   スクロール禁止用クラス
======================================== */
.no-scroll {
  position: fixed; /* 固定配置 */
  top: 0; /* 上端 */
  left: 0; /* 左端 */
  width: 100%; /* 幅100% */
  height: 100%; /* 高さ100% */
  overflow: hidden; /* スクロール禁止 */
}

body.no-scroll {
  overflow: hidden; /* bodyのスクロール禁止 */
  position: fixed; /* 位置固定でスクロール完全禁止 */
  width: 100%;
  height: 100%;
}

/* ========================================
   アクティブリンクのスタイル
======================================== */
nav a.section-active {
  background-color: rgba(255, 255, 255, 0.2); /* 半透明白背景 */
  border-color: rgba(255, 255, 255, 0.5); /* 半透明白枠線 */
}

/* ========================================
   デスクトップ向けスタイル（901px以上）
   ※既存のPC仕様を完全に保持
======================================== */
@media (min-width: 901px) {
  /* 基本フォントサイズをデスクトップ用に */
  body {
    font-size: 16px;
  }
  
  /* ハンバーガーメニューを非表示 */
  .hamburger-menu {
    display: none;
  }
  
  /* ヘッダーをデスクトップレイアウトに（元の高さに復元） */
  header {
    flex-direction: row; /* 横方向配置 */
    flex-wrap: wrap; /* 折り返し許可 */
    justify-content: space-between; /* 両端揃え */
    align-items: center; /* 垂直中央揃え */
    padding: 15px 30px; /* 上下15px、左右30pxの余白（元の仕様に戻す） */
    min-height: 90px; /* 最小高さを90pxに増加（元の高さに近づける） */
    /* デスクトップではセーフエリアリセット */
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 30px;
  }
  
  /* サイトタイトルをデスクトップ用に（元のサイズに復元） */
  .site-title {
    flex: 1 1 auto; /* フレックス伸縮許可 */
    min-width: 250px; /* 最小幅250px */
    width: auto; /* 幅自動 */
    font-size: clamp(1.8rem, 5vw, 2.8rem); /* フォントサイズを大きく（元の仕様に戻す） */
    justify-content: flex-start; /* 左揃え */
    padding-right: 0; /* 右余白なし */
  }
  
  /* ロゴをデスクトップ用に（元のサイズに復元） */
  .logo {
    max-height: 60px; /* 最大高さを60pxに増加（元の仕様に戻す） */
  }
  
  /* ナビゲーションをデスクトップ用に */
  nav ul {
    display: flex; /* フレックス表示 */
    position: static; /* 通常配置 */
    width: auto; /* 幅自動 */
    height: auto; /* 高さ自動 */
    background-color: transparent; /* 透明背景 */
    backdrop-filter: none; /* ぼかし効果なし */
    -webkit-backdrop-filter: none;
    z-index: auto; /* z-index自動 */
    flex-direction: row; /* 横方向配置 */
    justify-content: flex-end; /* 右揃え */
    align-items: center; /* 垂直中央揃え */
    gap: 15px; /* アイテム間の隙間を少し狭く */
    padding: 0; /* 余白なし */
    margin: 0; /* マージンなし */
    list-style: none; /* リストマーカーなし */
    opacity: 1; /* 不透明 */
    visibility: visible; /* 表示 */
    overflow-y: visible; /* スクロール無効 */
    /* 重要：文字の向きを正常に */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
  }
  
  /* ナビゲーションアイテムをデスクトップ用に */
  nav li {
    margin: 0; /* マージンなし */
    padding: 0; /* 余白なし */
    width: auto; /* 幅自動 */
    max-width: none; /* 最大幅制限なし */
    opacity: 1; /* 不透明 */
    transform: none; /* 変形なし */
    animation: none; /* アニメーションなし */
    /* 重要：文字の向きを正常に */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    /* フレックスアイテムとして最適化 */
    flex-shrink: 0; /* 縮小を防ぐ */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
  }
  
  /* ナビゲーションリンクをデスクトップ用に */
  nav a {
    display: inline-block; /* インラインブロック表示に変更 */
    font-size: 1rem; /* フォントサイズ1rem */
    padding: 8px 12px; /* 内側余白を調整 */
    color: white; /* 白文字 */
    text-decoration: none; /* 下線なし */
    border-radius: 5px; /* 角丸 */
    transition: background-color 0.3s, color 0.3s, border-radius 0.3s; /* アニメーション */
    border: none; /* 枠線なし */
    background-color: transparent; /* 透明背景 */
    backdrop-filter: none; /* ぼかし効果なし */
    -webkit-backdrop-filter: none;
    min-height: auto; /* 最小高さリセット */
    box-shadow: none; /* 影効果なし */
    /* 重要：文字の向きと配置を正常に */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: nowrap; /* テキストの折り返しを防ぐ */
    text-align: center; /* テキスト中央揃え */
    line-height: 1.2; /* 行間調整 */
  }
  
  /* デスクトップでのリンクホバー効果 */
  nav a:hover {
    background-color: #ecfae5; /* 薄い緑背景 */
    color: #006400; /* 緑文字 */
    transform: none; /* 移動効果なし */
    box-shadow: none; /* 影効果なし */
  }
  
  /* デスクトップでのアクティブリンク */
/*  nav a.active {*/
/*    background-color: #ecfae5; /* 薄い緑背景 */
/*    color: #006400; /* 緑文字 */
/*    box-shadow: none; /* 影効果なし */
/*  }*/
  
/* ========================================
   ドロップダウンメニュー修正版（PC専用 - 901px以上）
   
   【修正点】
   1. 文字のはみ出し問題を解決（十分な幅確保）
   2. 矢印の挙動を統一（ホバーのみ、クリック無効化）
   3. ホバー判定エリアを最適化（使いやすく）
======================================== */

@media (min-width: 901px) {
  /* ドロップダウンメニューがある場合の対応 */
  .dropdown {
    position: relative;
    width: auto;
    display: inline-block;
  }

  .dropdown-toggle {
    width: auto !important;
    display: inline-block !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* クリック動作を完全に無効化 */
    cursor: default !important;
    pointer-events: none; /* クリックイベントを無効化 */
    position: relative;
    outline: none !important;
    border: none !important;
  }

  /* ドロップダウン全体でホバー判定（クリックも有効に） */
  .dropdown {
    cursor: pointer;
    pointer-events: auto;
  }

  .dropdown-toggle::after {
    content: " ▼";
    font-size: 0.8em;
    margin-left: 5px;
    transition: transform 0.3s ease;
    display: inline-block;
  }

  /* ドロップダウンメニューのコンテンツ */
  .dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 8px); /* 少し間隔を空ける */
    left: 50%;
    transform: translateX(-50%); /* 中央揃え */
    background-color: #006400;
    /* 幅を十分に確保して文字のはみ出しを防ぐ */
    min-width: 220px; /* 最小幅を大きく設定 */
    width: max-content; /* コンテンツ幅に自動調整 */
    max-width: 280px; /* 最大幅制限 */
    box-shadow: 0px 8px 20px rgba(0,0,0,0.3);
    z-index: 1000;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s ease;
    padding: 8px 0; /* 上下の余白 */
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* ホバー判定エリアを拡張（使いやすさ向上） */
  .dropdown::before {
    content: "";
    position: absolute;
    top: -15px; /* 上の判定エリアを拡張 */
    left: -20px; /* 左の判定エリアを拡張 */
    right: -20px; /* 右の判定エリアを拡張 */
    bottom: -10px; /* 下の判定エリアを拡張 */
    z-index: -1;
  }

  /* ドロップダウンコンテンツにもホバー判定を追加 */
  .dropdown-content::before {
    content: "";
    position: absolute;
    top: -8px; /* ドロップダウンとの隙間をカバー */
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
  }

  /* ホバー時の親要素のスタイル */
  .dropdown:hover .dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 5px;
  }

  /* ホバー時の表示 */
  .dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  /* ドロップダウンメニュー内のリンク */
  .dropdown-content a {
    display: block;
    padding: 12px 20px; /* 上下のパディングを調整 */
    color: white;
    text-decoration: none;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: nowrap; /* 文字の折り返しを防ぐ */
    transition: all 0.2s ease;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: left;
    border-radius: 4px;
    margin: 2px 8px; /* 左右に少し余白 */
    /* 文字のはみ出しを完全に防ぐ */
    overflow: hidden;
    text-overflow: ellipsis; /* 長すぎる場合は省略記号 */
  }

  .dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: #006400;
    transform: translateX(3px); /* 軽い移動効果 */
  }

  /* ドロップダウンアイコンの回転効果（ホバー時のみ

  /* ドロップダウンアイコンの回転効果（ホバー時のみ） */
  .dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
  }

  /* クリック時の不要な効果を完全に無効化 */
  .dropdown-toggle:active,
  .dropdown-toggle:focus,
  .dropdown-toggle:visited {
    background-color: inherit !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* クリック時の矢印回転を防ぐ */
  .dropdown-toggle:active::after,
  .dropdown-toggle:focus::after {
    transform: rotate(0deg) !important;
  }

  /* ホバー終了時の滑らかな非表示（遅延を短縮して反応を良く） */
  .dropdown:not(:hover) .dropdown-content {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition-delay: 0.05s; /* 遅延を短縮 */
  }

  .dropdown:not(:hover) .dropdown-toggle::after {
    transform: rotate(0deg);
  }

  /* アクティブなドロップダウンセクションのスタイル */
  .dropdown-toggle.section-active {
    background-color: rgba(236, 250, 229, 0.2); /* 薄い緑背景 */
    border-radius: 5px;
  }
}/* ========================================
   サブタイトル用スタイル
======================================== */
.sub-title {
  text-align: center; /* 中央揃え */
}

.sub-title h2 {
  border-bottom: 2px solid #006400; /* 下線：緑色 */
  display: inline-block; /* インラインブロック（中央下線用） */
}