/* ========== 基本設定 ========== */
:root {
  --brand: #a900acbe;      /* メインカラー（青）*/
  --brand-dark: #00407d; /* 濃い青 */
  --accent: hsla(299, 100%, 34%, 0.745);     /* アクセント（黄）#f4b400*/
  --text: #222;
  --muted: #666;
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --border: #e5e8ef;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--text); background: var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  line-height: 1.6; font-size: 16px;
}

.container { width: min(1200px, 92%); margin: 0 auto; }
.skip-link { position: absolute; left: -999px; top: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--brand); color: #fff; padding: .5rem .75rem; border-radius: .25rem; }
.brand {
  margin-left: -16px;  /* ← 好みで -6px ～ -16px くらい */
}

/* 校名（高校名） */
.school-name {
  white-space: nowrap;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 1.25rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25)
}


/* ========== ヘッダー＆ナビ ========== */
.site-header { position: relative; border-bottom: 1px solid var(--border); background: #fff; }
.header-bar { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--brand-dark); font-weight: 700; }
.brand__logo { display:grid; place-items:center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color:#fff; font-weight: 800; }
.brand__text { font-size: 1.125rem; color:#a900acbe;}

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.nav-toggle:focus{ outline: none; }
.nav-toggle__bar { display: block; width: 26px; height: 3px; background: var(--brand-dark); margin: 4px 0; border-radius: 2px; }


.site-nav { display: block; }
.menu { list-style: none; display: flex; gap: .5rem; margin: 0; padding: 0; }
.menu__item { position: relative; }
.menu__link { white-space: nowrap; display: block; padding: .75rem .9rem; text-decoration: none; color: var(--text); border-radius: .5rem; }
.menu__link:hover{ background: var(--bg-alt); color: var(--brand-dark); }

/* サブメニュー（PCデフォルトは隠す） */
.submenu { position: absolute; left: 0; top: 100%; min-width: 200px; background: #fff; border: 1px solid var(--border); border-radius: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: .25rem; display: none; z-index: 1000; }
.submenu li { list-style: none; }
.submenu__link { display: block; padding: .6rem .8rem; text-decoration: none; color: var(--text); border-radius: .4rem; }
.submenu__link:hover, .submenu__link:focus { background: var(--bg-alt); color: var(--brand-dark); }

/* PC：ホバー/フォーカスで表示 */
@media (min-width: 961px) {
  /* PC: ホバー機能を無効化。クリック（--open）時のみ表示 */
  .menu__item--has-children > .submenu {
    display: none;
    position: absolute; left: 0; top: 100%;
  }
  .menu__item--open > .submenu { display: block; }
}
  .menu__item--open > .submenu {
    display: block;
  }
  /* PCでのリンク見た目（手のひらカーソル等）は維持 */
  .menu__link {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    caret-color: transparent;
  }

/* ========== スライダー ========== */

.hero { position: relative; background: var(--bg-alt); }
.slider { position: relative; overflow: hidden; }
.slides { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; transition: transform .6s ease; }
.slide { position: relative; height: clamp(220px, 36vw, 520px); }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide__caption {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  background: rgba(170, 168, 172, 0.5);
  backdrop-filter:saturate(120%);
  -webkit-backdrop-filter: saturate(120%);
  color:#fff ;
  padding: 1.2rem clamp(0.8rem, 3vw, 2rem);
  border-radius: 12px;
  max-width: min(96%, 1100px);
  text-align: center;
}
.slide__caption h2 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  margin: 0 0 .3rem;
  font-size: clamp(1.4rem, 2.5vw, 2.4rem);
  font-weight: 700;
  text-wrap: balance;
}
.slide__caption p {
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
}

.slider__control { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,.35); color: #fff; cursor: pointer; display: grid; place-items: center; }
.slider__control:hover { background: rgba(0,0,0,.5); }
.slider__control.prev { left: 10px; }
.slider__control.next { right: 10px; }

.slider__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: .5rem; }
.slider__dot {
  width: 10px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  border: none;
  cursor: pointer;
}
.slider__dot[aria-selected="true"] { background: var(--accent); }

/* ========== セクション ========== */
.section { padding: clamp(1.8rem, 3vw, 3rem) 0; }
.section__title { font-size: 1.5rem; margin: 0 0 1rem; border-left: 6px solid var(--brand); padding-left: .6rem; }
.section__subtitle { margin-top: 0; color: var(--muted); }
.news-list { padding-left: 1.2rem; }
.news-list time { color: var(--muted); margin-right: .5rem; }
.feature-list { margin: .5rem 0 0; padding-left: 1.2rem; }

/* グリッド */
.grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .grid { grid-template-columns: 1.3fr 1fr; } }

/* ボタン */
.btn { display: inline-block; background: var(--brand); color: #fff; text-decoration: none; padding: .6rem 1rem; border-radius: .5rem; transition: background .2s; }
.btn:hover, .btn:focus{ background: var(--brand-dark); }

/* フッター */
.site-footer { background: #0f172a; color: #cbd5e1; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; }
.footer-links { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
.footer-links a {color: #cbd5e1; text-decoration: none;}
.footer-links a:hover, .footer-links a:focus {text-decoration: underline;}
/*フッター上*/
.footer-info {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(203, 213, 225, 0.2);
}
.footer-info p {
  margin: 0.2rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.footer-school {
  font-weight: 700;
}
/*フッター下*/
.footer-copy {
  padding: 0.8rem 0;
}
.footer-copy .copyright {
  margin: 0;
  font-size: 0.8rem;
  text-align: left;
}

/* ========== モバイル ========== */
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 64px; background: #fff; border-bottom: 1px solid var(--border); z-index: 1001; }
  .site-nav.is-open { display: block; }
  .menu { flex-direction: column; gap: 0; padding: .5rem; }
  .menu__link { padding: .9rem 1rem; }

  /* ---- 視認性向上：サブメニューの背景・枠・区切り ---- */
  .submenu { position: static; display: block; border: 1px solid var(--border); background: #f9fbff; margin: .25rem .5rem .6rem; padding: .25rem .25rem .4rem; border-radius: .5rem; }
  .submenu li + li { border-top: 1px dashed #d9e2f1; }
  .submenu__link { padding: .7rem .9rem .7rem 1.1rem; color: #0f172a; line-height: 1.55; }
  .submenu__link:hover, .submenu__link:focus { background: #eef4ff; color: var(--brand-dark); }

  /* ---- スライドダウン・アニメ ---- */
  .menu__item--has-children > .submenu { overflow: hidden; height: 0; opacity: 0; transition: height .28s ease, opacity .28s ease; }
  .menu__item--open > .submenu { opacity: 1; }
}

@media (max-width: 600px) {
  .slide__caption {
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .slide__caption h2 {
    font-size: clamp(1.2rem, 5vw, 2.2rem);
    ine-height: 1.3;
  }
  .slider__dots {
    display: none;
  }
}


/* === PC：ホバーで自動展開（アニメ）、クリックで固定 === */
@media (min-width: 961px) {
  /* PC: ホバー機能を無効化。クリック（--open）時のみ表示 */
  .menu__item--has-children > .submenu {
    display: none;
    position: absolute; left: 0; top: 100%;
  }
  .menu__item--hover > .submenu {
    display: block;
  }
} 
  /* ホバー中 or 固定展開中は操作可能にして表示 */
  .menu__item--hover > .submenu,
  .menu__item--open  > .submenu {
    opacity: 1;
    pointer-events: auto;
  }
}

/* 動きを好まない方への配慮（PC/スマホ共通で効く） */
@media (prefers-reduced-motion: reduce) {
  .submenu { transition: none !important; }
}