/* =========================================================
   完全版 CSS（整理済み）
   - 下線はボーダー風（通常は透明、ホバーで表示）
   - 第2/第3階層は visibility/opacity で制御してホバーの隙間を潰す
   - !important を極力排除（既存の強い指定が残る場合は該当セレクタを特定）
========================================================= */

/* -------------------------
   変数（微調整ポイント）
   ------------------------- */
:root{
  --nav-bg: #2e1a47;
  --submenu-bg: #3a2a6a;
  --sub-submenu-bg: #4a3a7a;
  --nav-link-underline-color: rgba(255,255,255,0.9);
  --submenu-offset: 6px; /* 第3階層の右オフセット（正で右寄せ、負で左寄せ） */
  --submenu-overlap: -2px; /* 親→孫の隙間を潰す量（px） */
}

/* =========================================================
   リセット / 基本
========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

body{
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  background: #f8f9fb;
  color: #222;
  line-height: 1.6;
  padding-top: 144px; /* header 84 + nav 60 */
}

img{ max-width:100%; height:auto; display:block; }

/* =========================================================
   ヘッダー
========================================================= */
.header{
  background: linear-gradient(90deg,#3b2b5a,#1e1a3a);
  padding: 12px 20px;
  color: #fff;
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 9999;
}
.header-inner{
  display:flex; align-items:center; gap:20px;
  max-width:1200px; margin:0 auto; overflow:hidden;
}
.header-logo{ height:60px; }
.header-title h1{ margin:0; font-size:1.5rem; font-weight:400; }
.header-title p{ margin:0; font-size:0.85rem; opacity:0.75; }

/* =========================================================
   ハンバーガー（モバイル）
========================================================= */
.hamburger{
  position:absolute; right:16px; top:18px;
  width:28px; height:22px; cursor:pointer; z-index:20000;
}
.hamburger span{
  display:block; height:3px; background:#fff; margin-bottom:6px; border-radius:2px; transition:0.3s;
}
.hamburger.open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* =========================================================
   ナビ（共通）
   - 下線は border-bottom を使い通常は透明、hover/focus で表示
========================================================= */
.nav ul{ list-style:none; margin:0; padding:0; }

.header .nav > ul > li > a,
.nav > ul > li > a{
  display:block;
  padding:14px 20px;
  color:#fff;
  text-decoration:none;
  border-bottom:2px solid transparent; /* 下線（通常は透明） */
  padding-bottom:10px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

/* ホバー / フォーカスで下線表示（キーボード対応） */
.header .nav > ul > li > a:hover,
.header .nav > ul > li > a:focus,
.nav > ul > li > a:hover,
.nav > ul > li > a:focus{
  border-bottom-color: var(--nav-link-underline-color);
  transform: translateY(-2px);
  outline: none;
}
.nav > ul > li > a:focus{
  box-shadow: 0 0 0 3px rgba(106,79,191,0.12);
}

/* =========================================================
   モバイル（max-width:899px）
========================================================= */
@media (max-width:899px){

  /* nav（開閉メニュー） */
  .nav{
    position: fixed;
    top: 72px !important;
    left:0;
    width:100%;
    max-height: calc(100vh - 72px);
    overflow-y:auto;
    background: var(--nav-bg);
    display:none;
    padding:10px 0;
    z-index:9999;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }
  .nav.open{
    display:block;
    transform: translateY(0);
  }

  /* header（高さ72pxで固定） */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    z-index: 9999;
  }

  /* header-inner（あなたのデザインそのまま） */
  .header-inner{
    width: calc(100% - 60px);
    display: flex;
    align-items: center;
    gap:10px;
    margin: 0;
    padding: 0;
  }

  /* ロゴ・学校名（そのまま） */
  .header-logo {
    width: 38px;
    height: auto;
    display: block;
  }
  .header-title h1 {
    font-size: 1.15rem;
    line-height: 1.25;
    margin: 0;
  }
  .header-title p {
    font-size: 0.72rem;
    margin: 2px 0 0;
    line-height: 1.2;
  }

  .header-title-img, .header-logo {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
  }


  /* ハンバーガー（そのまま） */
  .hamburger {
    width: 36px;
    height: 26px;
    top: 50%;
    transform: translateY(-50%);
    right: 14px;
  }
  .hamburger span {
    height: 3px;
    border-radius: 2px;
  }

  /* header の高さ分だけ body を下げる（最安定） */
  body {
    padding-top: 56px !important;
  }

  /* hero は位置を動かさない */
  .hero {
    margin-top: 0 !important;
    top: 0 !important;
    position: relative;
    height: auto;
    aspect-ratio: 9/7;
  }

  /* nav は header の下に固定 */
  .nav {
    top: 72px !important;
  }

  /* 新着情報との距離 */
  .news-section {
    margin-top: 10px;
  }

  /* submenu（そのまま） */
  .submenu{
    display:none;
    background: rgba(70, 50, 120, 0.92);
  }
  .submenu li a{
    padding:12px 30px;
    display:block;
    color:#fff !important;
    border-bottom:1px solid rgba(255,255,255,0.15);
    line-height:1.6;
    text-decoration:none;
  }
  .submenu li a:hover{
    background-color: rgba(255,255,255,0.10);
  }
  .submenu li a:focus{
    outline:2px solid rgba(255,255,255,0.4);
    background-color: rgba(255,255,255,0.15);
  }

  /* sub-submenu（そのまま） */
  .sub-submenu{
    display:none;
    background: rgba(120, 95, 180, 0.25);
  }
  .sub-submenu li a{
    padding:12px 45px;
    display:block;
    color:#fff !important;
    line-height:1.6;
    text-decoration:none;
  }
  .sub-submenu li a:hover{
    background-color: rgba(255,255,255,0.12);
  }
  .sub-submenu li a:focus{
    outline:2px solid rgba(255,255,255,0.4);
    background-color: rgba(255,255,255,0.18);
  }
  .footer-logo {
    width: 90% !important; 
    max-width: none !important;
  }
}



/* =========================================================
   PC（min-width:900px）
   - 第2/第3階層は visibility/opacity で制御してホバーの隙間を潰す
   - position の基準を明確にする（第1階層 li / 第2階層 li）
========================================================= */
@media (min-width:900px){
  .hamburger{ display:none; }

  .nav{
    position: fixed; top:84px; left:0; width:100%;
    background: var(--nav-bg); padding:0; z-index:9998; height:60px; overflow:visible;
  }

  .nav > ul{
    display:flex; justify-content:center; gap:20px; height:60px; align-items:center; white-space:nowrap;
  }

  .nav ul ul{ display:block; flex-direction:column; }

  /* 親リンク（PC） */
  .nav > ul > li > a{
    padding:0 20px; height:60px; line-height:60px; display:flex; align-items:center;
    border:none; font-weight:400; letter-spacing:0.04em; transition:0.25s ease;
    border-bottom:2px solid transparent; padding-bottom:0;
  }
  .nav > ul > li > a:hover{ background: rgba(255,255,255,0.12); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.25); }

  /* 第1階層 li を基準にする */
  .nav > ul > li{ position: relative; }

  /* 第2階層（submenu）: visibility/opacity 制御 */
  .nav > ul > li > .submenu{
    position: absolute; top:60px; left:0; min-width:220px;
    background: var(--submenu-bg); padding:6px 0; border-radius:6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity 0.08s linear; z-index:1000; overflow: visible;
  }

  /* 第2階層の li を基準にする（第3階層の基準） */
  .nav > ul > li > .submenu > li{
    position: relative; box-sizing: border-box; margin:0; padding:0; background: var(--submenu-bg);
  }

  .nav > ul > li > .submenu > li a{
    display:block; padding:10px 16px; color:#fff; line-height:1.2;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }

  /* 第3階層（孫）: 親との隙間を潰すため少し重ねる */
  .nav > ul > li > .submenu > li > .sub-submenu{
    position: absolute;
    top: 0;
    left: calc(100% + var(--submenu-overlap)); /* var(--submenu-overlap) は負値で重ねる */
    min-width: 220px;
    background: var(--sub-submenu-bg);
    padding:6px 0; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.28);
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity 0.08s linear; z-index:2000; white-space:nowrap;
  }

  .sub-submenu li a{ padding:10px 16px; display:block; color:#fff; border-bottom:1px solid rgba(255,255,255,0.06); }

  /* 表示トリガー（親 li / submenu / sub-submenu のいずれかに hover/focus があれば表示を維持） */
  .nav > ul > li:hover > .submenu,
  .nav > ul > li:focus-within > .submenu,
  .nav > ul > li > .submenu:hover,
  .nav > ul > li > .submenu:focus-within{
    visibility: visible; opacity: 1; pointer-events: auto;
  }

  .nav > ul > li > .submenu > li:hover > .sub-submenu,
  .nav > ul > li > .submenu > li:focus-within > .sub-submenu,
  .nav > ul > li > .submenu > li > .sub-submenu:hover,
  .nav > ul > li > .submenu > li > .sub-submenu:focus-within{
    visibility: visible; opacity: 1; pointer-events: auto;
  }

  .footer-logo {
    width: 600px !important;
    max-width: none !important;
  }

  /* 安全策：親要素が overflow を持つ場合に切られないようにする（必要なら有効化） */
  /* .nav, .nav > ul, .nav > ul > li, .nav > ul > li > .submenu { overflow: visible; } */

  /* stacking context の影響を避ける（通常は不要だが問題が残る場合に検討） */
  /* .nav, .nav * { transform: none; -webkit-transform: none; } */
}

/* =========================================================
   hero / その他（既存を維持）
========================================================= */
.hero{
  width:100%; height:700px; overflow:hidden; position:relative; margin-top:0 !important; padding-top:0 !important;
}
.slick-hero, .slick-hero div{ height:100%; }
.slick-hero img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-copy{
  position:absolute; bottom:10%; left:5%; z-index:3; color:#fff;
  font-size:clamp(18px,4vw,40px); font-weight:300; text-shadow:0 3px 10px rgba(0,0,0,0.4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:768px){
  .hero-copy{ font-size:clamp(16px,5vw,28px); left:50%; transform:translateX(-50%); text-align:center; max-width:95%; }
}

/* =========================================================
   新着 / サイド / フッター（既存維持）
========================================================= */
.news-section{ max-width:1100px; margin:60px auto; padding:0 20px; }
.section-title{ font-size:1.8rem; margin-bottom:20px; padding-left:10px; border-left:6px solid #6a4fbf; color:#2e1a47; font-weight:600; }
.news-list{ display:grid; grid-template-columns:1fr; gap:20px; }
.news-card{ background:#fff; padding:26px; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,0.12); }
.news-date{ font-size:0.9rem; color:#6a4fbf; font-weight:bold; }
.news-text{ margin:10px 0; }
.news-link{ color:#4a3fa3; font-weight:bold; text-decoration:none; }
.news-link:hover{ text-decoration:underline; }
.news-list .news-card:nth-of-type(n+4){ display:none; }
.news-more-toggle{ text-align:center; margin:20px 0; padding:12px; background:#eee; border-radius:6px; cursor:pointer; font-weight:bold; }
.news-archive{ display:none; margin-top:20px; }
@media (min-width:900px){ .news-list{ grid-template-columns:1fr 1fr; } }

.side-banners{ max-width:1100px; margin:60px auto; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .side-banners{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .side-banners{ grid-template-columns:1fr; } }

.banner-card{ display:block; background:#fff; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1); overflow:hidden; text-align:center; transition: transform 0.3s ease; }
.banner-card:hover{ transform:scale(1.03); }
.banner-thumb{ width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; }
.banner-title{ padding:12px; font-weight:600; color:#2e1a47; }

.footer{ background:var(--nav-bg); padding:30px 10px; text-align:center; color:#fff; }
.footer-logo{ max-width:300px; margin:0 auto; }

/* アクセシビリティ / フォーカス可視化 */
.nav a:focus, .nav a:active{
  outline: 3px solid rgba(106,79,191,0.25);
  outline-offset: 2px;
  background: rgba(255,255,255,0.02);
}

/* モバイルの開閉は display を直接操作しているため transition を抑制 */
.nav, .nav .submenu { transition: none !important; }

@media (max-width:768px){ .hero{ height:320px; } }

/* サブメニューのリンクは下線を消して統一 */
.nav .submenu a,
.nav .sub-submenu a {
  border-bottom: none !important;
  text-decoration: none !important;
  color: inherit; /* 親の色継承、必要なら明示的に指定 */
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.12s ease;
  display: block;
  padding: 10px 16px; /* 既存と合わせる */
  border-radius: 6px; /* 浮いたときの角丸 */
}

/* ホバー時の「少し浮く」演出（マウス） */
.nav .submenu a:hover,
.nav .sub-submenu a:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  background-color: rgba(255,255,255,0.03); /* 軽い背景で可視化 */
  text-decoration: none;
}

/* キーボードフォーカス時は同じ視覚変化を付与（アクセシビリティ） */
.nav .submenu a:focus,
.nav .sub-submenu a:focus {
  outline: 3px solid rgba(106,79,191,0.18);
  outline-offset: 2px;
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  background-color: rgba(255,255,255,0.03);
}

/* 親メニュー（リンクが # や空 href の場合）の見た目安定化 */
.nav > ul > li.parent > a,
.nav > ul > li.has-child > a {
  cursor: pointer;
}

/* 親にリンクが無くてもキーボードでフォーカス可能にする（必要なら） */
.nav > ul > li.parent > a[href="#"],
.nav > ul > li.parent > a[href=""] {
  /* 見た目はそのまま、フォーカス可能に */
}

/* モバイルでは transform を抑える（タッチでの誤動作防止） */
@media (max-width: 899px) {
  .nav .submenu a,
  .nav .sub-submenu a {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
}

/* DESKTOP: 単一の統一ブロック（ロゴ・header・body padding・hero を一箇所で管理） */
@media (min-width:900px){
  .header-title-img, .header-logo {
    height: 68px !important;
    max-height: 68px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .header {
    padding: 10px 20px !important;
    box-sizing: border-box;
  }

  /* header(84) + nav(60) を想定した body padding（必要なら +/−4px で微調整） */
  body {
    padding-top: calc(84px + 60px) !important;
  }

  .hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}