/* --- 共通変数設定 --- */
:root {
  --sidebar-width: 240px;
  /* 基本のサイドバー幅 */
}

/* --- ベースリセット --- */
body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  overflow-x: hidden;
}

/* =========================================================
   1. サイドバー全体のレイアウト (.sidebar)
   ※ 透過（opacity）で透明感を実現し、はみ出し表示を阻害しない設定
   ========================================================= */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;

  /* 透明感のある白グラデーション背景 */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 245, 250, 0.88) 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 4px 0 20px rgba(0, 32, 64, 0.08);

  box-sizing: border-box;
  z-index: 1000;
}

/* --- 連続タップ・誤動作防止用の操作無効化クラス --- */
.sidebar.is-disabled {
  pointer-events: none !important; /* タップ・クリック判定を完全に無効化 */
  opacity: 0.8; /* 視覚的に「操作受付中」であることをわずかに表現（お好みで調整） */
  transition: opacity 0.1s ease;
}

/* ロゴ画像エリア */
.nav-logo {
  padding: 20px 15px;
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(0, 50, 100, 0.08);
  text-align: center;
}

.nav-logo img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

/* =========================================================
   2. ナビゲーションメニュー (.nav)
   ========================================================= */
.nav,
.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li {
  position: relative;
  /* サブメニューの配置基準点 */
}

/* メニュー項目（通常時） */
.nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  color: #2c3e50;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(0, 50, 100, 0.04);
  background: transparent;
  transition: all 0.2s ease;
}

/* ホバー時の装飾（ホバー位置がわかりやすいアクセント線と透明感） */
.nav li:hover>a {
  background: rgba(255, 255, 255, 0.95);
  color: #0284c7;
  /* さわやかなブルー */
  padding-left: 24px;
  /* 右に少しスライド */
  box-shadow: inset 3px 0 0 #0284c7;
  /* 左端にアクセントライン */
}

/* --- サブメニュー展開（ホバー時） --- */

/* 初期状態：隠す */
.nav ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  /* 親liの右端へぴったり配置 */
  width: 240px;

  /* サブメニューも透明感のあるデザイン */
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(0, 50, 100, 0.1);
  border-radius: 0 8px 8px 0;
  box-shadow: 6px 6px 20px rgba(0, 32, 64, 0.12);
  z-index: 1001;
}

/* ホバー時：確実に右隣へ表示 */
.nav li:hover>ul {
  display: block;
}

/* サブメニュー内部のスタイル */
.nav ul a {
  font-size: 13px;
  padding: 11px 18px;
  color: #475569;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.nav ul li:hover>a {
  background: rgba(241, 245, 249, 0.95);
  padding-left: 22px;
  box-shadow: inset 2px 0 0 #0284c7;
}

/* =========================================================
   3. メインコンテンツ（16:9トップ画像領域）
   ========================================================= */
.contents {
  margin-left: var(--sidebar-width);
  width: calc(100vw - var(--sidebar-width));
  height: 100vh;
  position: relative;
  overflow: hidden;
}

/* ★ 上部の横ボーダー（校章の上端と同じ深青色 #003399 で画面横いっぱいに伸びる） ★ */
.contents::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;              /* ボーダーの太さ（必要に応じて調整） */
  background-color: #003399; /* 校章画像の一番上と同じ濃い青色 */
  z-index: 101;             /* 校章バッジや背景画像より前面に表示 */
}

/* 学校ロゴバッジ */
.school-logo-badge {
  position: absolute;
  top: 0;
  left: 30px;       /* 左端からの余白 */
  z-index: 102;     /* スライドショー画像の上に重なるように前面へ */
  width: 200px;     /* PCでのロゴ幅（必要に応じて調整） */
  
  /* 画像の切抜き指定：上は直角、下左右のみ丸くする */
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  
  /* 立体感を出すための影 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.school-logo-badge img {
  width: 100%;
  height: auto;
  display: block;
}

/* 画面右固定のサイドナビボタン */
.side-nav-buttons {
  position: absolute;
  top: 100px;
  right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* ★すべてのボタンを右端に揃える★ */
  gap: 20px;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 6px;
  width: 42px;          /* 通常時の幅 */
  background-color: #ffca28;
  color: #333333;
  text-decoration: none;
  border-radius: 8px 0 0 8px;
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.15);
  transition: width 0.2s ease, background-color 0.2s ease;
  box-sizing: border-box; /* パディング等によるブレを防止 */
}

/* ホバー時の処理（右端に固定されたまま左へ幅が広がる） */
.nav-btn:hover {
  background-color: #ffc107;
  width: 52px;          /* ★広げたい幅を指定（例: 52px）★ */
}

/* アイコンのスタイル */
.nav-btn i {
  font-size: 18px;
  margin-bottom: 8px;
}

/* 縦書きテキスト設定 */
.nav-btn span {
  writing-mode: vertical-rl; /* 縦書き指定 */
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;       /* 文字間隔の調整 */
  line-height: 1;
}

.pan-slideshow {
  width: 100%;
  height: 100%;
  position: relative;
}

.pan-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* PCでは画面にぴったり切り取って配置 */
  opacity: 0;
  will-change: transform, opacity;
}

/* =========================================================
   アクセスモーダル
   ========================================================= */
/* 暗転背景 */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99999;           /* 確実に最前面へ */
  
  /* Flexboxで上下左右の中央に寄せる */
  justify-content: center;
  align-items: center;
  
  padding: 16px;
  box-sizing: border-box;
}

.modal-overlay.is-active {
  display: flex !important; /* 強制的にFlexbox表示 */
}

.modal-content {
  position: relative;
  background: #ffffff;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  margin: auto;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;

  /* ★ はみ出しによるスクロールバーを非表示にする ★ */
  overflow: hidden; 
}

/* スクリプト等でスクロールが必要な場合もスクロールバー自体を完全に隠す指定 */
.modal-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}
.modal-content {
  -ms-overflow-style: none; /* IE, Edge */
  scrollbar-width: none;  /* Firefox */
}

/* 閉じるボタン (×) */
.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: #666;
  cursor: pointer;
  line-height: 1;
}

.modal-close-btn:hover {
  color: #000;
}

/* モーダル内タイトル */
.modal-title {
  margin: 0 0 16px 0;
  font-size: 20px;
  color: #003399;
  border-bottom: 2px solid #003399;
  padding-bottom: 8px;
}

/* 連絡先情報 */
.access-info {
  margin-bottom: 16px;
  line-height: 1.6;
  color: #333;
}

.access-info .school-name {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}

.access-info p {
  margin: 4px 0;
  font-size: 14px;
}

.access-info i {
  color: #003399;
  width: 20px;
}

/* Googleマップ枠 */
.map-container {
  width: 100%;
  height: 250px; /* 必要に応じて220px〜250px程度に微調整してください */
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
}

/* ---------------------------------------------------------
   PC表示用（769px以上）：フェードイン・フェードアウト切替
   --------------------------------------------------------- */
@media (min-width: 769px) {
  .pan-slide {
    animation: pcFadeSlideshow60s 60s infinite ease-in-out;
  }

  /* 1枚あたり10秒ずつ出現タイミングをズラす */
  .pan-slide:nth-child(1) { animation-delay: 0s; }
  .pan-slide:nth-child(2) { animation-delay: 10s; }
  .pan-slide:nth-child(3) { animation-delay: 20s; }
  .pan-slide:nth-child(4) { animation-delay: 30s; }
  .pan-slide:nth-child(5) { animation-delay: 40s; }
  .pan-slide:nth-child(6) { animation-delay: 50s; }
}

/* PC用キーフレーム（パンなし・フェードのみ） */
@keyframes pcFadeSlideshow60s {
  0% { opacity: 0; }
  3% { opacity: 1; }
  13.33% { opacity: 1; }
  16.66% { opacity: 0; }
  100% { opacity: 0; }
}

/* =========================================================
   4. ディスプレイアスペクト比の自動検出（16:9 用計算ロジック）
   ========================================================= */
@media (min-aspect-ratio: 16/9) {
  :root {
    --sidebar-width: calc(100vw - (100vh * 16 / 9));
  }

  .sidebar {
    width: max(200px, var(--sidebar-width));
  }

  .contents {
    margin-left: max(200px, var(--sidebar-width));
    width: calc(100vw - max(200px, var(--sidebar-width)));
  }
}

/* =========================================================
   5. スマートフォン・タブレット用 レスポンシブ対応 (768px以下)
   ========================================================= */

/* スマホ用ボタンとオーバーレイ（PCでは非表示） */
.menu-toggle,
.sidebar-overlay {
  display: none;
}

@media (max-width: 768px) {
  /* 1. メインコンテンツと幅の調整 */
  :root {
    --sidebar-width: 0px; /* PC用のマージンをリセット */
  }

  .contents {
    margin-left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* スマホでの上部ボーダー太さ調整 */
  .contents::before {
    height: 6px;
  }

  .school-logo-badge {
    left: 20px;     /* スマホでは端に寄せる */
    width: 130px;   /* スマホ画面に合わせてサイズを少し小さく */
    border-radius: 0 0 16px 16px; /* 角丸も少し控えめに */
  }

  .side-nav-buttons {
    top: 200px;
    gap: 20px;
  }
  .nav-btn {
    width: 36px;          /* スマホ時の固定幅 */
    padding: 10px 4px;
    transition: none;     /* ★アニメーションを無効化★ */
  }

  /* ★スマホではホバー時の幅変更・背景色変化を適用しない★ */
  .nav-btn:hover {
    width: 36px;          /* 幅を通常時と同じに保持 */
    background-color: #ffca28; /* 背景色も通常時のまま変化させない */
  }

  .nav-btn i {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .nav-btn span {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .pan-slideshow {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .pan-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    min-width: 100%;
    object-fit: cover;
    opacity: 0;
    will-change: transform, opacity;
  }

  .modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    
    /* 上端揃えにして余白を調整 */
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 40px !important; /* 上からの位置（数字を小さくするとさらに上へ移動） */
    
    box-sizing: border-box !important;
    z-index: 99999 !important;
  }

  .modal-overlay.is-active {
    display: flex !important;
  }

  .modal-content {
    width: 92% !important;
    max-width: 360px !important;
    max-height: 85vh !important;
    margin: 0 auto !important;
    
    /* 下部の余白（padding-bottom）を広げる */
    padding: 16px 12px 24px 12px !important; 
    
    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  .access-info {
    margin-bottom: 10px !important;
  }

  .access-info p {
    font-size: 11px !important;
    margin: 2px 0 !important;
  }

  /* 地図の高さ（画面からはみ出さないよう調整） */
  .map-container {
    height: 250px !important;
    border-radius: 6px !important;
  }

  /* =========================================================
    レスポンシブ調整（768px以下：1枚10秒 × 6枚 ＝ 60秒パンアニメーション）
    ========================================================= */
  @media (max-width: 768px) {
    .contents {
      margin-left: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important; /* スマホのアドレスバー考慮 */
    }

    /* スマホ時は幅を140%に拡大して横移動（パン）の余白を作る */
    .pan-slide {
      width: 140% !important;
      max-width: none !important;
      animation: spPanAndFade60s 60s infinite linear;
    }

    /* 1枚あたり10秒ずつズラす */
    .pan-slide:nth-child(1) { animation-delay: 0s; }
    .pan-slide:nth-child(2) { animation-delay: 10s; }
    .pan-slide:nth-child(3) { animation-delay: 20s; }
    .pan-slide:nth-child(4) { animation-delay: 30s; }
    .pan-slide:nth-child(5) { animation-delay: 40s; }
    .pan-slide:nth-child(6) { animation-delay: 50s; }
  }

  /* スマホ用キーフレーム（パン移動＋フェード） */
  @keyframes spPanAndFade60s {
    0% {
      opacity: 0;
      transform: translateX(0%); /* 画像の左端を表示 */
    }
    2% {
      opacity: 1; /* フェードイン完了 */
    }
    14% {
      opacity: 1;
      transform: translateX(-28%); /* 約8.4秒かけて左へ動かすことで、視線（カメラ）は「左から右」へ移動 */
    }
    16.66% {
      opacity: 0; /* フェードアウト完了 */
      transform: translateX(-28%);
    }
    100% {
      opacity: 0;
    }
  }

  /* 2. サイドバーを画面外に格納 */
  .sidebar {
    width: 280px !important;
    height: 100vh;
    height: 100dvh; /* モバイル端末のツールバー変動に対応する高さ設定 */
    position: fixed;
    top: 0;
    left: 0;
    
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: none;

    /* ★ サイドバー内部のスクロール制御を追加 ★ */
    overflow-y: auto !important; /* メニュー内部で縦スクロールを許可 */
    -webkit-overflow-scrolling: touch; /* iOS（iPhone/iPad）での慣性スクロールを有効化 */
    box-sizing: border-box;
    padding-bottom: 80px; /* 一番下のメニューが見切れないよう余白を確保 */
  }

  .sidebar.active {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
  }

  /* 3. ハンバーガーボタン（画面右上に固定） */
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: fixed;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 50, 100, 0.1);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    cursor: pointer;
  }

  .menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: #0284c7;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* ボタンのアニメーション (「×」印に変化) */
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* 4. 背景暗転用オーバーレイ */
  .sidebar-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
  }

  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* 5. スマホでのサブメニュー表示調整 (アコーディオン風に展開) */
  .nav li > ul {
    position: static;
    width: 100%;
    box-shadow: none;
    border-left: 2px solid #0284c7;
    border-radius: 0;
    background: rgba(240, 245, 250, 0.5);
  }

  /* フッターテッカーのスマホ調整 */
  .blog-ticker-footer {
    left: 0 !important;
    width: 100vw !important;
    padding-right: 70px; /* ハンバーガーボタンと被らないように調整 */
  }
}

body.no-scroll {
  overflow: hidden !important;
  height: 100% !important;
}

/* --- サブメニュー誤爆タップ防止用スタイル --- */

/* 1. 通常時はサブメニュー内部のリンクをクリック不可にする準備 */
.nav li > ul {
  pointer-events: none; /* 非表示時はクリック不可 */
}

/* 2. ホバーまたはタップで表示された瞬間 */
.nav li:hover > ul,
.nav li.active > ul {
  pointer-events: auto; /* 表示されたらクリック可にする */
  animation: preventAccidentalClick 0.35s ease forwards; /* 0.35秒間はクリック判定を遅延 */
}

/* 展開直後の一瞬だけ pointer-events を none に固定するキーフレーム animation */
@keyframes preventAccidentalClick {
  0% {
    pointer-events: none;
    opacity: 0.8;
  }
  80% {
    pointer-events: none; /* 展開中・直後はタップを無視 */
  }
  100% {
    pointer-events: auto; /* アニメーション完了後にタップ可能化 */
    opacity: 1;
  }
}