/* 三重高等学校 Bootstrap5カスタムスタイル */
/* VI: シンボルカラー #005096 (DIC 255) */

.site {
  --navy:#005096; --navy-deep:#003c70; --navy-soft:#e3edf6;
  --accent:#1b1f27; --accent-soft:#eceef1;
  --bg-alt:#f4f7fa;
  --ink:#1b2435; --muted:#5a6878; --line:#d6dde6;
  --head-font:'Noto Serif JP', serif;
}

body { font-family:'Noto Sans JP', sans-serif; color:var(--ink); line-height:1.7; }

.ff-head { font-family:var(--head-font); }
.text-navy { color:var(--navy) !important; }
.text-accent { color:var(--accent) !important; }
.bg-navy { background:var(--navy) !important; }
.bg-navy-deep { background:var(--navy-deep) !important; }
.bg-soft { background:var(--bg-alt) !important; }
.border-soft { border-color:var(--line) !important; }

.btn-navy { background:var(--navy); color:#fff; border:1px solid var(--navy); border-radius:0; }
.btn-navy:hover { background:var(--navy-deep); color:#fff; }
.btn-outline-navy { border:1px solid var(--navy); color:var(--navy); background:#fff; border-radius:20px; }
.btn-outline-navy:hover { background:var(--navy); color:#fff; }

/* NAVBAR */
.navlink { font-weight:500; letter-spacing:.03em; padding-bottom:4px !important; border-bottom:2px solid transparent; color:var(--ink) !important; }
.navlink:hover, .navlink.active { border-bottom-color:var(--accent); color:var(--navy) !important; }

/* スマホメニュー（<lg 折りたたみ時）をリスト型に洗練：
   区切り線 / 左アクセントバー / 淡いネイビー地 / 右シェブロン */
@media (max-width: 991.98px) {
  #mainNav .navbar-nav { margin-top:.75rem; border-top:1px solid var(--line); }
  #mainNav .nav-item { border-bottom:1px solid var(--line); }
  #mainNav .navlink {
    display:flex; align-items:center;
    padding:15px 8px 15px 14px !important;
    border-bottom:none !important;               /* PC用の下線を無効化 */
    border-left:3px solid transparent;           /* アクティブ左アクセント */
    font-size:16px; letter-spacing:.06em;
    transition:background .18s, border-color .18s, color .18s, padding-left .18s;
  }
  #mainNav .navlink::after {                      /* 右向きシェブロン › */
    content:""; width:8px; height:8px; margin-left:auto;
    border-top:2px solid var(--muted); border-right:2px solid var(--muted);
    transform:rotate(45deg); transition:border-color .18s, transform .18s;
  }
  #mainNav .navlink:hover,
  #mainNav .navlink.active {
    background:var(--navy-soft); border-left-color:var(--navy);
    color:var(--navy) !important; padding-left:18px !important;
  }
  #mainNav .navlink:hover::after,
  #mainNav .navlink.active::after { border-color:var(--navy); }
}

/* ハンバーガー：3本線 → ✕ アニメーション */
.th-toggle { width:44px; height:40px; padding:0; }
.th-toggle:focus { box-shadow:none; }
.th-bars { position:relative; display:block; width:22px; height:16px; margin:0 auto; }
.th-bars span {
  position:absolute; left:0; width:100%; height:2px; background:var(--navy); border-radius:2px;
  transition:top .25s ease, transform .25s ease, opacity .2s ease;
}
.th-bars span:nth-child(1){ top:0; }
.th-bars span:nth-child(2){ top:7px; }
.th-bars span:nth-child(3){ top:14px; }
.th-toggle[aria-expanded="true"] .th-bars span:nth-child(1){ top:7px; transform:rotate(45deg); }
.th-toggle[aria-expanded="true"] .th-bars span:nth-child(2){ opacity:0; }
.th-toggle[aria-expanded="true"] .th-bars span:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* 背面マスク（黒半透明・タップで閉じる） */
.nav-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1029;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.nav-backdrop.show { opacity:1; visibility:visible; }
body.nav-open { overflow:hidden; }
@media (min-width:992px){ .nav-backdrop{ display:none !important; } body.nav-open{ overflow:auto; } }

/* スマホ時はメニューをオーバーレイ表示（本文を押し下げず、背面を暗く） */
@media (max-width:991.98px){
  .navbar-collapse#mainNav {
    position:absolute; top:100%; left:0; right:0;
    background:#fff; z-index:1031;
    padding:0 clamp(20px,4vw,32px) 8px;
    box-shadow:0 16px 30px rgba(0,0,0,.16);
    border-top:1px solid var(--line);
  }
  #mainNav .navbar-nav { margin-top:0; border-top:none; }
}

/* カード */
.promo-card { transition:transform .18s, box-shadow .18s; }
.promo-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(13,27,53,.22); }
.feat-card { transition:transform .2s, box-shadow .2s; }
/* ホバー演出はリンク(<a>)カードのみ。非リンクの静的カード(TOPの01-02-03等)は動かさない */
a.feat-card:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(22,41,77,.1); }
.feat-ico { width:64px; height:64px; border-radius:50%; background:var(--navy-soft); color:var(--navy); font-family:var(--head-font); font-weight:700; }
.lu { width:1em; height:1em; display:inline-block; vertical-align:-.125em; flex-shrink:0; }

/* ニュース */
.news-link { color:var(--ink); transition:background .15s; }
.news-link:hover { background:rgba(22,41,77,.03); }
.cat { font-size:11px; border-radius:2px; padding:3px 9px; white-space:nowrap; }
/* お知らせのタイトル。
   スマホ: min-width で押し出して日付・カテゴリの下に独立した行で出す
   PC(768px〜): min-width:0 にして日付と同じ行に置き、長いタイトルは中で折り返す
   （min-width を 0 にしないと flex アイテムの最小幅が内容幅になり、
     長いタイトルだけ丸ごと次の行へ落ちてしまう） */
.news-title { font-size:14.5px; min-width:200px; }
@media (min-width:768px){ .news-title { min-width:0; } }

/* クイックリンク */
.ql { transition:.18s; color:var(--ink); }
.ql:hover { border-color:var(--navy) !important; color:var(--navy) !important; }
.ql-alert { background:var(--accent); border:1px solid var(--accent); color:#fff; font-weight:700; }
.ql-alert:hover { background:#000; border-color:#000; color:#fff; }
.ql-fill { background:var(--navy); transition:background .18s, transform .18s; }
.ql-fill:hover { background:var(--navy-deep); transform:translateX(2px); }
.ql-emg { transition:.18s; }
.ql-emg:hover { border-color:var(--navy) !important; }
.ql-photo { transition:transform .18s, box-shadow .18s; }
.ql-photo:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,80,150,.2); }

/* フッター */
.foot-link { color:rgba(255,255,255,.72); font-size:13px; }
.foot-link:hover { color:#fff; }

/* ニュースタブ */
.ntabs { display:flex; flex-wrap:wrap; gap:4px; border-bottom:2px solid var(--navy); }
.ntab { font-size:13px; font-weight:600; padding:9px 18px; border:1px solid transparent; border-bottom:none; background:transparent; border-radius:5px 5px 0 0; cursor:pointer; margin-bottom:-2px; transition:.15s; font-family:'Noto Sans JP',sans-serif; }
.ntabs .ntab.is-active, .ntabs .ntab.is-active:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.ntab.c-club { color:#2f8159; }
.ntab.c-parent { color:#005096; }
.ntab.c-exam { color:#b15c28; }
.ntab.c-club:hover { background:rgba(47,129,89,.1); border-color:rgba(47,129,89,.4); }
.ntab.c-parent:hover { background:rgba(0,80,150,.1); border-color:rgba(0,80,150,.4); }
.ntab.c-exam:hover { background:rgba(177,92,40,.1); border-color:rgba(177,92,40,.4); }

/* ニュースアイテム非表示制御 */
.ntab-content { display:none; }
.ntab-content.is-active { display:block; }

/* HERO
   高さを幅に連動させ、枠の比率を 2.4:1 に固定する。
   旧 clamp(320px,44vw,560px) は幅1272px超で高さが560pxに張り付き、
   画面が横長になるほど枠が扁平化 → cover で写真の上が切れる量が増えていた。
   上限は px ではなく vh。通常のPC(16:9等)では比率が保たれ、
   超横長・低い画面でのみヒーローが画面を占有しないよう抑える。 */
.hero-slide { height:clamp(320px,41.667vw,82vh); }

/* PAGE HERO（下層ページ見出しの背景）
   ------------------------------------------------------------------
   背景画像はここだけで管理する。各ページのHTMLにパスを書かないこと。
   画像を差し替えるときは images/common/hero/ の該当ファイルを
   同じファイル名で入れ替えれば、そのセクション全ページに反映される。
   セクションの出し分けは .page-hero--◯◯ 修飾クラスで行う。
   （body の id は使わない。旧CSSに #club #news 等の id 依存ルールが
     残っており、id を足すと意図しないスタイルが復活するため） */
.page-hero {
  height:160px;
  /* 既定（news / target / zaikousei_hogosha / shinrosido など4セクション以外）。
     TOPスライダー(images/top/slide/)とは意図的に別ファイル。
     スライダー差し替えが下層ページに波及しないようにするため。 */
  background:url('/high/images/common/hero/hero_default.jpg') center center/cover no-repeat;
}
.page-hero--tokusyoku { background-image:url('/high/images/common/hero/hero_tokusyoku.jpg'); } /* 学校案内 */
.page-hero--life      { background-image:url('/high/images/common/hero/hero_life.jpg'); }      /* スクールライフ */
.page-hero--club      { background-image:url('/high/images/common/hero/hero_club.jpg'); }      /* クラブ活動 */
.page-hero--nyushi    { background-image:url('/high/images/common/hero/hero_nyushi.jpg'); }    /* 入試情報 */

/* プロモバンド */
.promo-band { background:var(--navy-deep); }
.promo-pickup { color:rgba(255,255,255,.6); }
.promo-pickup .pu-line { background:rgba(255,255,255,.4); }

/* ========================================================
   サイドバー (下層ページ)
   ======================================================== */
.sub-side { font-size:14px; }

.sub-side-nav { border:1px solid var(--line); border-radius:3px; overflow:hidden; margin-bottom:1.5rem; }

.sub-side-nav__ttl {
  background:var(--navy);
  color:#fff;
  font-family:var(--head-font);
  font-weight:700;
  font-size:13.5px;
  line-height:1.5;   /* 明示（ページ側CSSの継承に依存しない） */
  letter-spacing:.06em;
  padding:10px 14px;
  margin:0;
}

.sub-side-nav__list { list-style:none; margin:0; padding:0; }
.sub-side-nav__list li { border-top:1px solid var(--line); }
.sub-side-nav__list li:first-child { border-top:none; }
.sub-side-nav__list a {
  display:block;
  padding:9px 14px 9px 22px;
  font-size:14px;    /* 明示（.sub-side 継承に依存しない） */
  line-height:1.5;   /* 明示 */
  color:var(--ink);
  text-decoration:none;
  position:relative;
  transition:background .12s, color .12s;
}
.sub-side-nav__list a::before {
  content:'›';
  position:absolute;
  left:10px;
  color:var(--navy);
  font-size:15px;
  line-height:1;
  top:50%;
  transform:translateY(-50%);
}
.sub-side-nav__list a:hover {
  background:var(--navy-soft);
  color:var(--navy);
}
.sub-side-nav__list a.is-current {
  background:var(--navy-soft);
  color:var(--navy);
  font-weight:600;
}

/* 旧 layout.css 対策の #side 限定上書きは撤廃（layout.css は全ページ未使用）。
   サイドバーは .sub-side-nav__* の本体ルールのみで #side / aside どちらでも同一描画。 */