/* ==========================================================================
   ヘッダー / ナビゲーション / 色面 / フッター（v4）
   ========================================================================== */

/* --- ヘッダー：ゆったりした高さ、控えめな背景 --------------------------- */
.phn-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(250, 249, 242, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.phn-header__inner { display: flex; align-items: center; gap: var(--phn-space-6); min-height: var(--phn-header-h); }

.phn-logo { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: inherit; flex: none; min-block-size: 44px; }
.phn-logo__mark { inline-size: 31px; block-size: 31px; flex: none; object-fit: contain; }
.phn-logo__text { display: flex; flex-direction: column; line-height: 1.3; }
.phn-logo__univ { font-size: 0.75rem; color: var(--phn-ink-muted); letter-spacing: 0.08em; }
.phn-logo__name { font-family: var(--phn-font-head); font-size: 1.3125rem; font-weight: 700; color: var(--phn-deep); letter-spacing: 0.06em; }

.phn-nav { margin-left: auto; }
.phn-nav__list { display: flex; align-items: center; gap: var(--phn-space-1); list-style: none; margin: 0; padding: 0; }
.phn-nav__list li { list-style: none; }
.phn-nav__list a {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: 0.9rem; border-radius: var(--phn-radius-pill);
  font-family: var(--phn-font-head);
  font-size: var(--phn-text-sm); font-weight: 700; letter-spacing: 0.05em;
  color: var(--phn-ink); text-decoration: none; white-space: nowrap;
  transition: color var(--phn-duration) var(--phn-ease), background-color var(--phn-duration) var(--phn-ease);
}
.phn-nav__list a:hover { color: var(--phn-green-ink); background: rgba(255, 255, 255, 0.7); }
.phn-nav__list .current-menu-item > a,
.phn-nav__list .current_page_item > a,
.phn-nav__list .current_page_parent > a,
.phn-nav__list a[aria-current="page"] { color: var(--phn-green-ink); }
.phn-nav__list .current-menu-item > a::after,
.phn-nav__list .current_page_item > a::after,
.phn-nav__list .current_page_parent > a::after,
.phn-nav__list a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 4px;
  inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--phn-sky); transform: translateX(-50%);
}

.phn-header__actions { display: flex; align-items: center; gap: var(--phn-space-3); flex: none; }

/* --- スマートフォン用メニュー ------------------------------------------- */
.phn-navtoggle {
  display: none; align-items: center; justify-content: center; gap: 0.5em;
  min-inline-size: 64px; min-block-size: 46px; padding-inline: 0.85rem;
  background: var(--phn-surface); border: 2px solid var(--phn-green-ink);
  border-radius: var(--phn-radius-pill); color: var(--phn-green-ink);
  font-family: var(--phn-font-head); font-size: var(--phn-text-xs); font-weight: 700; cursor: pointer;
}
.phn-navtoggle__bars { position: relative; inline-size: 16px; block-size: 12px; flex: none; }
.phn-navtoggle__bars span {
  position: absolute; left: 0; inline-size: 100%; block-size: 2px; border-radius: 2px; background: currentColor;
  transition: transform var(--phn-duration) var(--phn-ease), opacity var(--phn-duration) var(--phn-ease);
}
.phn-navtoggle__bars span:nth-child(1) { top: 0; }
.phn-navtoggle__bars span:nth-child(2) { top: 5px; }
.phn-navtoggle__bars span:nth-child(3) { top: 10px; }
.phn-navtoggle[aria-expanded="true"] .phn-navtoggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.phn-navtoggle[aria-expanded="true"] .phn-navtoggle__bars span:nth-child(2) { opacity: 0; }
.phn-navtoggle[aria-expanded="true"] .phn-navtoggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- スマートフォン用ドロワー（右から出る）-------------------------------
   ハンバーガーが出るのは 1279px 以下なので、ドロワーの見た目もその幅で囲う。
   PC（1280px 以上）のヘッダー・ナビゲーション・本文には一切かからない。 */
@media (max-width: 1279px) {

  .phn-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;                 /* ヘッダー(900)・追従ナビ(700)より前、スキップリンク(2000)より後ろ */
    visibility: hidden;
    pointer-events: none;          /* 閉じているときは操作を邪魔しない */
    transition: visibility 0s linear 280ms;
  }
  .phn-drawer[data-open="true"] {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* 背後を薄く覆う。押すと閉じる */
  .phn-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 280ms var(--phn-ease);
  }
  .phn-drawer[data-open="true"] .phn-drawer__overlay { opacity: 1; }

  /* 本体。右端から出し、左側に背後のページを残す */
  .phn-drawer__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    inline-size: min(86vw, 360px);
    max-inline-size: calc(100vw - 48px);   /* 左に必ず 48px 残す */
    block-size: 100dvh;
    background: var(--phn-white);
    box-shadow: -10px 0 28px rgba(47, 79, 62, 0.10);
    border-start-start-radius: 8px;
    border-end-start-radius: 8px;
    transform: translateX(100%);
    transition: transform 280ms var(--phn-ease);
    will-change: transform;
  }
  .phn-drawer[data-open="true"] .phn-drawer__panel { transform: translateX(0); }

  /* 上部：メニューであることを示す見出しと、閉じるボタン */
  .phn-drawer__head {
    flex: none;
    display: flex; align-items: center; justify-content: space-between; gap: var(--phn-space-3);
    min-block-size: 60px;
    padding-inline: 18px;
    border-block-end: 1px solid var(--phn-line);
  }
  .phn-drawer__title {
    margin: 0;
    font-family: var(--phn-font-head);
    font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
    color: var(--phn-deep);
  }
  .phn-drawer__close {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px;
    margin-inline-end: -10px;
    padding: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--phn-ink); cursor: pointer;
  }
  .phn-drawer__close:hover { background: var(--phn-ivory); }
  .phn-drawer__close svg { inline-size: 20px; block-size: 20px; }

  /* 中身だけが縦に流れる。項目が多くても下まで操作できる */
  .phn-drawer__body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-block-end: max(12px, env(safe-area-inset-bottom));
  }

  /* 主要ナビ：角丸カードをやめ、区切り線だけのリストにする */
  .phn-drawer__list { list-style: none; margin: 0; padding: 0; display: block; }
  .phn-drawer__list li { list-style: none; }
  .phn-drawer__list li + li { border-block-start: 1px solid rgba(226, 230, 223, 0.7); }

  .phn-drawer__link {
    position: relative;
    display: flex; align-items: center; gap: 11px;
    min-block-size: 50px;                 /* タップ領域は 44px 以上 */
    padding: 10px 18px;
    font-family: var(--phn-font-head);
    font-size: 14px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.45;
    color: var(--phn-ink); text-decoration: none;
    background: transparent; border-radius: 0;
    transition: background-color var(--phn-duration) var(--phn-ease);
  }
  .phn-drawer__link:hover { background: rgba(238, 247, 232, 0.55); }
  .phn-drawer__text { min-inline-size: 0; }

  .phn-drawer__icon {
    inline-size: 19px; block-size: 19px; flex: none;
    color: var(--phn-ink-muted);
  }
  .phn-drawer__link .phn-ext-icon { margin-inline-start: auto; color: var(--phn-ink-muted); }

  /* 現在地は控えめに：淡い緑の面＋左の細い線＋少し太い字 */
  .phn-drawer__link.is-current {
    background: var(--phn-green-pale);
    color: var(--phn-green-ink);
    font-weight: 700;
  }
  .phn-drawer__link.is-current::before {
    content: "";
    position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: 3px;
    background: var(--phn-green-ink);
  }
  .phn-drawer__link.is-current .phn-drawer__icon { color: var(--phn-green-ink); }

  /* 下部：主要ナビと線で分け、文字も一段小さくする */
  .phn-drawer__sub {
    margin-block-start: 10px;
    padding: 14px 18px 6px;
    border-block-start: 1px solid var(--phn-line);
    display: grid; gap: 2px; justify-items: start;
  }
  .phn-drawer__cta { inline-size: 100%; margin-block-end: 6px; }
  .phn-drawer__sublink {
    display: inline-flex; align-items: center; gap: 0.45em;
    min-block-size: 44px;
    font-size: 13px; letter-spacing: 0.03em;
    color: var(--phn-ink-muted); text-decoration: none;
  }
  .phn-drawer__sublink:hover { color: var(--phn-green-ink); }
  .phn-drawer__sublink .phn-ext-icon { inline-size: 0.85em; block-size: 0.85em; }

  /* 動きを控える設定のときは、スライドをやめて切り替えだけにする */
  @media (prefers-reduced-motion: reduce) {
    .phn-drawer,
    .phn-drawer__overlay,
    .phn-drawer__panel { transition-duration: 1ms; }
  }
}

/* 本文のスクロール止めは JavaScript 側で position: fixed にして行う。
   （iOS Safari では overflow: hidden だけでは背景が動いてしまうため）
   スクロール位置は JavaScript が覚えて、閉じたときに戻す。 */
/* 外部サイトのアイコン。大きさを決めておかないと、リンクの高さいっぱいまで
   引き伸ばされる（フッターで 50px になっていた）。 */
.phn-ext-icon { inline-size: 0.85em; block-size: 0.85em; flex: none; }

body.phn-nav-open { overflow: hidden; width: 100%; }

/* 項目名を折り返さない代わりに、1 行で並びきらない幅ではメニューボタンへ切り替える。
   「教員・メンバー」に変えて横幅が増えたため、境目を 1099px から 1279px へ上げている。 */
@media (max-width: 1279px) {
  .phn-nav, .phn-header__actions .phn-btn { display: none; }
  .phn-navtoggle { display: inline-flex; }
}
@media (min-width: 1280px) { .phn-drawer { display: none !important; } }
/* 1280〜1399px：項目の左右を詰めて 1 行に収める */
@media (min-width: 1280px) and (max-width: 1399px) {
  .phn-header__inner { gap: var(--phn-space-4); }
  .phn-nav__list a { padding-inline: 0.6rem; font-size: 0.875rem; letter-spacing: 0.03em; }
}
/* 所属名が長いため、狭い画面ではロゴ側を縮められるようにする */
@media (max-width: 767px) {
  .phn-header__inner { gap: var(--phn-space-3); }
  .phn-header__actions { margin-left: auto; }
  .phn-logo { flex: 0 1 auto; min-inline-size: 0; gap: 0.6rem; }
  .phn-logo__text { min-inline-size: 0; }
  /* 所属名（18 文字）も 1 行に収める。360px 幅でも入るよう、幅に応じて 9〜11px */
  .phn-logo__univ { white-space: nowrap; line-height: 1.3; font-size: min(0.6875rem, 2.9vw); letter-spacing: 0.04em; }
  /* 教室名は 1 行・17px（PC は 21px）。
     2 行に折れるとヘッダーが 2 倍の高さになり、追従したときに本文を隠すため。
     360px では 16.5px まで下がるが、省略記号では切らない。 */
  .phn-logo__name { font-size: min(1.0625rem, 4.6vw); white-space: nowrap; letter-spacing: 0.03em; }

  /* ハンバーガーは 3 本線だけ。文字・枠線・丸い囲みは付けない。タップ領域 44×44 */
  .phn-navtoggle {
    inline-size: 44px; block-size: 44px; min-inline-size: 44px; min-block-size: 44px;
    padding: 0; gap: 0;
    border: 0; background: transparent; border-radius: 8px;
    color: var(--phn-deep);
  }
  .phn-navtoggle__label { display: none; }
  .phn-navtoggle__bars { inline-size: 22px; block-size: 16px; }
  .phn-navtoggle__bars span { block-size: 2px; border-radius: 2px; }
  .phn-navtoggle__bars span:nth-child(1) { top: 0; }
  .phn-navtoggle__bars span:nth-child(2) { top: 7px; }
  .phn-navtoggle__bars span:nth-child(3) { top: 14px; }
  .phn-navtoggle[aria-expanded="true"] .phn-navtoggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .phn-navtoggle[aria-expanded="true"] .phn-navtoggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ドロワーそのものの見た目は上の「スマートフォン用ドロワー」の節にまとめている。
     ここでヘッダーの下に開かせていた旧指定（全画面表示）は 2026-09-26 に廃止した。 */
}
@media (max-width: 380px) {
  .phn-logo { gap: 0.5rem; }
  .phn-logo__mark { inline-size: 24px; block-size: 24px; }
  .phn-logo__name { letter-spacing: 0.02em; }
}

/* --- 色面（セクション）：白 → 淡い空色 → アイボリー → 淡い緑 → 白 ----------
   角をひとつ大きく丸めて、直線ではないゆるやかな境界をつくる。 */
.phn-section {
  position: relative;
  padding-block: var(--phn-section) var(--phn-section-end);
  overflow: hidden;
}
.phn-section--sm { padding-block: var(--phn-section-sm); }
/* ベースは白〜アイボリーだけ。青や緑で面を塗り分けない。 */
.phn-section--ivory { background: var(--phn-ivory); }
.phn-section--white { background: var(--phn-white); }
.phn-section--sky, .phn-section--sky-soft, .phn-section--sky-pale { background: var(--phn-white); }
.phn-section--green, .phn-section--green-soft, .phn-section--green-pale { background: var(--phn-ivory); }
.phn-section--yellow { background: var(--phn-ivory); }
.phn-section--deep { background: var(--phn-deep); color: #EAF6E2; }
.phn-section--deep h2, .phn-section--deep h3 { color: #fff; }
.phn-section--deep .phn-eyebrow { color: var(--phn-sky-soft); }
.phn-section--deep .phn-eyebrow::before { background: var(--phn-sky-soft); }
.phn-section--deep .phn-lead { color: #D6E4DC; }

/* 以前の「大きな角丸で面を重ねる」区切りは廃止。余白とレイアウトで区切る。
   クラスは下層ページのテンプレートに残っているため、無効化だけしている。 */
.phn-section--band-tl, .phn-section--band-tr,
.phn-section--band-bl, .phn-section--band-br { border-radius: 0; margin-top: 0; }

.phn-section > .phn-container { position: relative; z-index: 1; }

/* 前の面の色を、次の面の角丸の裏側に見せるための下地 */
.phn-band { position: relative; }
.phn-band--ivory { background: var(--phn-ivory); }
.phn-band--white { background: var(--phn-white); }
.phn-band--sky { background: var(--phn-sky-pale); }
.phn-band--green { background: var(--phn-green-pale); }

/* --- フッター ------------------------------------------------------------ */
.phn-footer {
  position: relative;
  z-index: 1;
  background: var(--phn-deep);
  color: #DCEFD3;
  /* 上の余白は PC で 60〜80px。以前は 64〜96px あり、SITE MAP までが空きすぎていた。 */
  padding-block: clamp(2.75rem, 3rem + 1.5vw, 5rem) var(--phn-space-7);
  font-size: var(--phn-text-sm);
  border-top-left-radius: var(--phn-radius-band);
  /* 以前は負の margin で本文の上に重ねていたため、末尾の CTA がフッターに隠れていた。
     角丸だけを残し、重なりはなくす。 */
  margin-top: 0;
}
.phn-footer a { color: #F3F8F5; text-decoration: none; }
.phn-footer a:hover { color: var(--phn-sky-soft); }

.phn-footer__grid { display: grid; gap: var(--phn-space-8); grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
.phn-footer__brandname { font-family: var(--phn-font-head); font-size: var(--phn-text-xl); color: #fff; margin: 0.15rem 0 var(--phn-space-3); letter-spacing: 0.06em; }
.phn-footer__univ { font-size: var(--phn-text-xs); color: #C3E0B6; letter-spacing: 0.05em; }
.phn-footer__coltitle {
  font-family: var(--phn-font-en); font-size: var(--phn-text-xs); font-weight: 800; color: var(--phn-sky-soft);
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: var(--phn-space-4);
}
.phn-footer__list { display: grid; gap: 0.1rem; }
.phn-footer__list a { display: inline-flex; align-items: center; gap: 0.4em; min-block-size: 44px; font-size: var(--phn-text-sm); letter-spacing: 0.04em; }
.phn-footer__bottom {
  margin-top: var(--phn-space-9); padding-top: var(--phn-space-5);
  border-top: 1px solid rgba(220, 239, 211, 0.25);
  display: flex; flex-wrap: wrap; gap: var(--phn-space-3) var(--phn-space-5);
  align-items: center; justify-content: space-between;
  font-size: var(--phn-text-xs); color: #C3E0B6; letter-spacing: 0.03em;
}
@media (max-width: 960px) { .phn-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .phn-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--phn-space-7); } }

/* --- スマートフォン：フッターを短く（2026-09-26 第 2 回）-------------------
   研究室名 → サイトマップ（2 列）→ 大学リンク・お問い合わせ（横並び）→ 著作権。
   掲載情報は変えず、余白とタップ領域の取り方だけを変える。PC は上の指定のまま。 */
@media (max-width: 767px) {
  .phn-footer { padding-block: 2.25rem 2rem; font-size: 0.8125rem; }
  .phn-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
  /* 研究室名とサイトマップは全幅、大学リンクとお問い合わせは半分ずつ */
  .phn-footer__grid > div:nth-child(1),
  .phn-footer__grid > div:nth-child(2) { grid-column: 1 / -1; }
  .phn-footer__brandname { font-size: 1.125rem; margin: 0.1rem 0 0.35rem; }
  .phn-footer__univ { font-size: 0.6875rem; line-height: 1.6; }
  .phn-footer__coltitle { margin-bottom: 0.25rem; font-size: 0.6875rem; }
  .phn-footer__list { gap: 0; }
  .phn-footer__grid > div:nth-child(2) .phn-footer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .phn-footer__list a { min-block-size: 40px; padding: 0.3rem 0; font-size: 0.8125rem; letter-spacing: 0.02em; }
  .phn-footer__bottom { margin-top: 1.25rem; padding-top: 0.875rem; font-size: 0.6875rem; line-height: 1.6; }
}