/* ==========================================================================
   共通ヘッダー+メニューオーバーレイ
   Figma: PC ヘッダー 1:28/1:2351, PC メニュー 1:2322, SP ヘッダー 1:2398/1:4798, SP メニュー 1:4420
   ========================================================================== */

/* --- ヘッダーバー --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 59px;
  background: var(--color-green-dark);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-green-pale);
  opacity: 0.3;
}

/* ロゴ(校章+学校法人+大阪成蹊学園) */
.site-logo {
  position: absolute;
  left: 20px;
  top: 15px;
  width: 180px;
  height: 28px;
  display: block;
}
.site-logo img { position: absolute; max-width: none; }
.site-logo .logo-mark  { left: 0;       top: 0;     width: 28px;    height: 28px; }
.site-logo .logo-hojin { left: 34.5px;  top: 5.9px; width: 16.9px;  height: 16.4px; }
.site-logo .logo-main  { left: 56.8px;  top: 5.3px; width: 122.4px; height: 17px; }

/* メニューボタン(2本線 ⇔ ×) */
.menu-toggle {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 64px;
  height: 44px;
  z-index: 110;
}
.menu-toggle .bar {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 40px;
  height: 2px;
  background: var(--color-gold);
  transition: transform 0.35s ease;
}
.menu-toggle .bar-1 { transform: translateY(-4px); }
.menu-toggle .bar-2 { transform: translateY(2px); }
body.menu-open .menu-toggle .bar-1 { transform: translateY(-1px) rotate(20deg); }
body.menu-open .menu-toggle .bar-2 { transform: translateY(-1px) rotate(-20deg); }
/* hover: 「＝」の間隔が少し開く。中心(-1px)を保ったまま上下へ2pxずつ広げる。
   実ホバー環境のみ(@media hover)で、メニュー展開中のXには効かせない(:not(.menu-open))。 */
@media (hover: hover) {
  body:not(.menu-open) .menu-toggle:hover .bar-1 { transform: translateY(-6px); }
  body:not(.menu-open) .menu-toggle:hover .bar-2 { transform: translateY(4px); }
}

/* --- メニューオーバーレイ --- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--color-green-dark);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
body.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}
body.menu-open { overflow: hidden; }

/* ナビ項目のフェードアップ(遅延は JS が --d に設定) */
.menu-overlay .anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0s;
}
body.menu-open .menu-overlay .anim {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--d, 0s);
}

/* ================= PC レイアウト ================= */
@media (min-width: 768px) {
  /* 左面:黒地+OSモチーフ線描パターン(装飾)。
     中間幅では右面 640px を優先し、左面が狭まって隠れていく */
  .menu-visual {
    position: absolute;
    left: 0;
    top: 59px;
    bottom: 0;
    width: calc(100% - 640px);
    background: var(--color-black);
    overflow: hidden;
  }
  .menu-visual img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 左エリアの中心基準 */
    width: 1017.9px;
    height: 955.3px;
    max-width: none;
    mix-blend-mode: color-dodge;
  }

  /* 右面:ナビ(幅 640px 固定・右寄せで体裁を維持) */
  .menu-nav {
    position: absolute;
    right: 0;
    top: 59px;
    width: 640px;
    bottom: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    letter-spacing: 0.03em;
    color: var(--color-green-pale);
  }
  .menu-nav::before {
    /* 中央の縦罫線(下部の横罫線 bottom:91px に接する高さまで伸ばす) */
    content: "";
    position: absolute;
    left: 319px;
    top: 0;
    bottom: 91px;
    width: 1px;
    background: var(--color-green-pale);
    opacity: 0.3;
  }
  .menu-col-1 { position: absolute; left: 29px; top: 0; width: 260px; }
  .menu-col-2 { position: absolute; left: 350px; top: 0; width: 220px; }

  .menu-group { position: absolute; left: 0; width: 100%; white-space: nowrap; }
  .menu-group .group-label {
    font-weight: 700;
    line-height: 1.8;
    display: block;
  }
  .menu-group ul { margin-top: 0; }
  .menu-group ul a,
  .menu-list ul a {
    display: block;
    line-height: 25px;
    margin-bottom: 10px;
    transition: color 0.25s ease;
  }
  .menu-group ul li:last-child a,
  .menu-list ul li:last-child a { margin-bottom: 0; }
  .menu-nav a:hover { color: var(--color-gold); }

  /* col1: 学園について(y119)/情報公開関連(y379)。ラベル下 50px からリスト、リスト字下げ 15px
     ※Figma は text-box-trim(キャップトップ基準)のため、行ボックスの半レディング分(約5.5px)上へ補正 */
  .menu-group-about { top: 54.4px; }
  /* Figma は 314.4px(学園について5項目時)。「役員・諮問委員」追加で1項目(35px)増えたため、
     グループ間の余白 45px を保つよう下げる */
  .menu-group-joho  { top: 349.4px; }
  .menu-group .group-label { margin-bottom: 0; }
  .menu-group ul { padding-left: 15px; margin-top: 24.8px; }

  /* col2: リンク集(y119)/学校一覧(y354) */
  .menu-list-links   { position: absolute; top: 54.5px; }
  .menu-list-schools { position: absolute; top: 289.5px; }

  /* 下部リンク+罫線 */
  .menu-bottom-rule {
    position: absolute;
    width: 640px;
    right: 0;
    bottom: 91px;
    height: 1px;
    background: var(--color-green-pale);
    opacity: 0.3;
  }
  .menu-bottom-links {
    position: absolute;
    right: 30px;
    bottom: 30.5px;
    display: flex;
    gap: 28px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    line-height: 25px;
    letter-spacing: 0.03em;
    color: var(--color-green-pale);
  }
  .menu-bottom-links a { transition: color 0.25s ease; }
  .menu-bottom-links a:hover { color: var(--color-gold); }

  /* SP 専用要素を隠す */
  .sp-only { display: none !important; }
}

/* ================= SP レイアウト ================= */
@media (max-width: 767px) {
  .pc-only { display: none !important; }

  .site-header { height: 56px; }
  .site-logo {
    left: 10px;
    top: 15px;
    width: 160px;
    height: 25px;
  }
  .site-logo .logo-mark  { left: 0;      top: 0;      width: 25px;   height: 25px; }
  .site-logo .logo-hojin { left: 30.9px; top: 5.2px;  width: 15px;   height: 14.6px; }
  .site-logo .logo-main  { left: 50.7px; top: 4.95px; width: 109.4px; height: 15.2px; }

  .menu-toggle { right: 4px; top: 6px; width: 62px; height: 44px; }
  .menu-toggle .bar { left: 12px; width: 37.5px; height: 1.5px; }
  .menu-toggle .bar-1 { transform: translateY(-3.5px); }
  .menu-toggle .bar-2 { transform: translateY(2.5px); }
  body.menu-open .menu-toggle .bar-1 { transform: translateY(-0.5px) rotate(20deg); }
  body.menu-open .menu-toggle .bar-2 { transform: translateY(-0.5px) rotate(-20deg); }

  .menu-overlay {
    top: 0;
    padding-top: 56px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .menu-visual { display: none; }

  .menu-nav {
    display: block;
    font-family: var(--font-sans);
    letter-spacing: 0.03em;
    color: var(--color-green-pale);
    padding-top: 27px; /* 1行目タイトルのグリフ上端がヘッダー下 60px になる位置 */
  }
  .menu-col-1, .menu-col-2, .menu-group, .menu-list { position: static; }

  /* アコーディオン/リンク行 共通 */
  .sp-row {
    border-bottom: 1px solid rgba(204, 212, 186, 0.3);
  }
  .sp-row .row-head {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    padding: 27.4px 60px 20.4px 20px; /* 行ピッチ 74px(Figma 148px@2x、border 1px 込み) */
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.03em;
    color: var(--color-green-pale);
  }

  /* +/− アイコン */
  .sp-row .icon-plus {
    position: absolute;
    right: 20px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -6.5px;
  }
  .sp-row .icon-plus::before,
  .sp-row .icon-plus::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 13px;
    height: 1px;
    background: var(--color-gold);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .sp-row .icon-plus::after { transform: rotate(90deg); }
  .sp-row.is-open .icon-plus::after { transform: rotate(0deg); opacity: 0; }

  /* → アイコン(直リンク行):共通の矢印SVG(Figma 23.314px@750 = 11.657px@375) */
  .sp-row .icon-arrow {
    position: absolute;
    right: 23.1px;
    top: 50%;
    width: 11.72px;
    height: 12.45px;
    margin-top: -2.7px; /* テキストのキャップ中心に合わせる(行の上下パディング差を補正) */
    background-color: var(--color-gold);
    -webkit-mask: url(../img/arrow-gold.svg) no-repeat center / contain;
    mask: url(../img/arrow-gold.svg) no-repeat center / contain;
  }

  /* アコーディオン内容 */
  .sp-row .row-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
  }
  .sp-row.is-open .row-body { max-height: 400px; }
  .sp-row .row-body ul { padding: 12px 0 18px; }
  .sp-row .row-body a {
    position: relative;
    display: block;
    padding: 0 60px 0 35px;
    font-size: 13px;
    line-height: 32.5px;
    letter-spacing: 0.03em;
  }
  .sp-row .row-body a::after {
    /* > シェブロン */
    content: "";
    position: absolute;
    right: 23px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-top: 1px solid var(--color-gold);
    border-right: 1px solid var(--color-gold);
    transform: rotate(45deg);
  }

  /* 学校ロゴグリッド */
  .schools-grid { border-bottom: 1px solid rgba(204, 212, 186, 0.3); }
  .schools-grid .grid-row {
    display: flex;
    height: 120.5px;
  }
  .schools-grid .grid-row + .grid-row {
    border-top: 1px solid rgba(204, 212, 186, 0.3);
  }
  .schools-grid .cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .schools-grid .cell + .cell {
    border-left: 1px solid rgba(204, 212, 186, 0.3);
  }
  /* 各ロゴ:紋章+校名の縦組み(Figma 実測値) */
  .school-logo { display: flex; flex-direction: column; align-items: center; }
  .school-logo img { max-width: none; }
  .school-logo-univ    { width: 56.7px; }
  .school-logo-univ    .crest { width: 41px;   height: 48px; }
  .school-logo-univ    .name  { width: 56.7px; height: 8.6px;  margin-top: 2.3px; }
  .school-logo-biwako  { width: 95.4px; }
  .school-logo-biwako  .crest { width: 32.6px; height: 41.5px; }
  .school-logo-biwako  .name  { width: 95.4px; height: 10.3px; margin-top: 3.3px; }
  .school-logo-tandai  { width: 75.4px; }
  .school-logo-tandai  .whole { width: 75.4px; height: 58.9px; }
  .school-logo-koko    { width: 55.2px; }
  .school-logo-koko    .crest { width: 47.2px; height: 47.9px; }
  .school-logo-koko    .name  { width: 55.2px; height: 19px;   margin-top: 2.4px; }
  .school-logo-yochien { width: 53.5px; }
  .school-logo-yochien .crest { width: 41.8px; height: 48.7px; }
  .school-logo-yochien .name  { width: 53.5px; height: 15.4px; margin-top: 2.5px; }

  /* 下部リンク */
  .menu-bottom-links {
    padding: 36px 20px 38px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
  }
  .menu-bottom-links a {
    display: block;
    line-height: 32.5px;
    margin-bottom: 5px;
  }
  .menu-bottom-rule, .menu-copyright { display: none; }
}