/*
 * 富山県学生寮 共通CSS
 *
 * 責務と優先順位
 *   tokens      色・文字・余白・角丸・影・動きの共通トークン（旧CSSの変数名は別名で提供）
 *   base        リセット・本文・リンク・フォーム・フォーカス・動きを減らす設定
 *   layout      長文幅・グリッド・表の横スクロールなど共通レイアウト部品
 *   components  共通ヘッダー（丸いバー）・メニュー・フッター・外部AI導線・入場アニメーション
 *   （レイヤー外）各ページ固有CSS … 共通CSSより後に読み込み、ページ固有の指定が優先される
 *
 * デザイン変更はまず tokens の値を変える。共通部品のマークアップは cmd/site-src/ から生成される。
 */
@layer tokens, base, layout;

/* Project-wide: keyboard focus uses a fill or underline, never an outer ring.
   The important reset also covers the older page styles loaded after this file. */
html :is(:focus, :focus-visible) {
  outline: none !important;
}

html :is(input, select, textarea):focus {
  box-shadow: none !important;
}

html :is(a, button, summary):focus-visible {
  text-decoration-line: underline;
  text-underline-offset: .2em;
}

html .site-menu-button:focus-visible {
  background: var(--color-bar-current);
}

/* ==================================================================
 * tokens
 * ================================================================== */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* 色（明） */
    /* D-017: 青を含む白い地と、静かなアクセント。写真と文章の余白を主役にする。 */
    --color-bg: #f7fbff;
    --color-bg-soft: #eaf5fc;
    --color-surface: #ffffff;
    --color-ink: #172b42;
    --color-ink-muted: #576779;
    --color-link: #0070c4;
    --color-link-hover: #005da6;
    --color-accent: #0088f4;
    --color-accent-2: #5ac8fa;
    --color-accent-strong: #0075ce;
    --color-action: #0075ce;
    --color-on-accent: #ffffff;
    --color-line: rgba(22, 23, 26, 0.10);
    --color-focus: #0066cc;
    --color-field-bg: #ffffff;
    --color-glass: rgba(255, 255, 255, 0.92);
    --color-glass-border: rgba(22, 23, 26, 0.06);

    /* 太字のロゴは青からシアンへ。通常サイズの本文には --color-link を使う。 */
    --brand-gradient: linear-gradient(110deg, #0076cf 0%, #0087a7 100%);
    --color-brand: #0070c4;
    --color-brand-sub: #475569;
    --hero-light-overlay: linear-gradient(180deg, #214f7bf2 0%, #2d6eafb3 36%, #3796ff70 68%, var(--color-bg) 100%);
    --home-light-overlay: linear-gradient(180deg, #214f7bf5 0%, #2d6eafd9 16%, #3796ff9c 42%, #3796ff2b 72%, var(--color-bg) 100%);
    --hero-light-ink: #ffffff;
    --hero-light-muted: #ffffff;

    /* 共通メニューのバー */
    --color-bar: rgba(255, 255, 255, 0.96);
    --color-bar-solid: #ffffff;
    --color-bar-border: rgba(22, 23, 26, 0.06);
    --color-bar-hover: rgba(22, 23, 26, 0.05);
    --color-bar-current: rgba(0, 102, 204, 0.08);
    --color-nav-current: var(--color-link);
    --color-bar-icon-bg: rgba(241, 245, 249, 0.9);
    --color-nav-link: rgba(22, 23, 26, 0.72);
    --color-nav-link-expanded: #16171a;
    --color-overlay: rgba(232, 240, 255, 0.28);
    --shadow-bar: 0 4px 24px rgba(22, 45, 72, 0.07);

    /* フッター */
    --footer-bg: linear-gradient(180deg, #0a0e27 0%, #1a1d35 50%, #0a0e27 100%);
    --footer-ink: #d1d1d6;
    --footer-link: #a8adc0;
    --footer-muted: #8b90a0;
    --footer-line: rgba(255, 255, 255, 0.08);

    /* 文字 */
    --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    --font-display: "Montserrat", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-nav: 0.9375rem;
    --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
    --text-xl: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
    --text-2xl: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
    --text-3xl: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
    /* 見出しは大きく・詰めて。和文も字間を少し詰めると締まる（D-015） */
    --tracking-tight: -0.03em;
    --tracking-snug: -0.02em;
    --leading-tight: 1.12;

    /* 余白・幅 */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: clamp(2rem, 1.5rem + 2vw, 3rem);
    --section-space: clamp(3rem, 1.8rem + 5vw, 7rem);
    --gutter: clamp(1rem, 0.6rem + 2vw, 3rem);
    --measure: 42rem;
    /* 広い画面で節が伸びすぎないようにする読みやすい上限（D-014）。容器ではなく節に効かせる */
    --content-max: 76rem;
    --tap-min: 2.75rem;

    /* 角丸・影 */
    --radius-sm: 0.625rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(22, 23, 26, 0.05);
    --shadow-md: 0 12px 32px rgba(22, 23, 26, 0.07);
    --shadow-md-hover: 0 18px 44px rgba(22, 23, 26, 0.10);
    --shadow-lg: 0 30px 70px rgba(22, 23, 26, 0.12);

    /* 動き */
    --motion-fast: 200ms;
    --motion-menu: 320ms;
    --motion-enter: 560ms;
    --motion-ambient: 8s;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-emphasized: cubic-bezier(0.2, 0.9, 0.22, 1);

    /* 共通メニューの寸法 */
    --bar-height: 4rem;
    --bar-inset: 0.75rem;
    --bar-compact-max: 40rem;
    --site-header-space: calc(var(--bar-height) + 2 * var(--bar-inset));

    /* 旧CSSの変数名（ページ固有CSSが参照）→ 共通トークンへの別名 */
    --primary-blue-start: var(--color-accent);
    --primary-blue-end: var(--color-accent-2);
    --primary-gradient: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
    --text-gradient-up: linear-gradient(to top, var(--color-accent-2), var(--color-accent));
    --text-dark: var(--color-ink);
    --text-light: var(--color-ink-muted);
    --glass-bg: var(--color-glass);
    --glass-border-color: var(--color-glass-border);
    --glass-blur: blur(20px);
    --glass-saturate: saturate(180%);
    --border-radius: var(--radius-lg);
    --soft-shadow: var(--shadow-md);
    --soft-shadow-hover: var(--shadow-md-hover);
    --header-height: var(--site-header-space);
    --nav-height: 0px;
    --mobile-nav-padding-top: var(--site-header-space);
    --mobile-nav-width: min(280px, 85vw);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      /* 暗色は無彩色の灰ではなく、ブランドの青に寄せた濃紺で段階をつける（地→カード→浮いた面） */
      --color-bg: #0d1219;
      --color-bg-soft: #131a24;
      --color-surface: #161f2c;
      --color-ink: #e6ecf5;
      --color-ink-muted: #a9b6c9;
      --color-link: #6cb4ff;
      --color-link-hover: #9dd2ff;
      --color-accent: #0a84ff;
      --color-accent-2: #64d2ff;
      --color-accent-strong: #3395ff;
      --color-action: #0871cf;
      --color-line: rgba(148, 163, 184, 0.16);
      --color-focus: #6cb4ff;
      --color-field-bg: #131a24;
      --color-glass: rgba(22, 31, 44, 0.82);
      --color-glass-border: rgba(148, 163, 184, 0.16);

      --brand-gradient: linear-gradient(135deg, #6cb4ff 0%, #9dd2ff 100%);
      --color-brand: #8cc4ff;
      --color-brand-sub: rgba(226, 232, 240, 0.78);

      --color-bar: rgba(40, 58, 88, 0.94);
      --color-bar-solid: #283a58;
      --color-bar-border: rgba(148, 163, 184, 0.34);
      --color-bar-hover: rgba(255, 255, 255, 0.08);
      --color-bar-current: rgba(108, 180, 255, 0.14);
      /* current link sits on a pill tinted with the link blue: #6cb4ff measured 4.18:1, #9dd2ff about 5.7:1 */
      --color-nav-current: #9dd2ff;
      --color-bar-icon-bg: rgba(70, 88, 120, 0.92);
      --color-nav-link: rgba(226, 232, 240, 0.86);
      --color-nav-link-expanded: #e2e8f0;
      --color-overlay: rgba(2, 6, 23, 0.42);
      --shadow-bar: 0 10px 30px rgba(2, 6, 23, 0.32);
      --shadow-lg: 0 28px 70px rgba(2, 6, 23, 0.4);

      --footer-bg: #080d14;
    }
  }
}

/* ==================================================================
 * base
 * ================================================================== */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--site-header-space) + var(--space-sm));
  }

  body {
    font-family: var(--font-sans);
    /* D-015: 本文を少し大きく・行間を広めにして、落ち着いた読み心地にする */
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--color-ink);
    background-color: var(--color-bg);
  }

  /* メニュー表示中はビューポートだけを固定する（bodyをスクロールコンテナにすると共通ヘッダーのstickyが外れる） */
  html.site-menu-open {
    overflow: hidden;
  }

  a {
    color: var(--color-link);
  }

  a:hover {
    color: var(--color-link-hover);
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-inline-size: 100%;
  }

  img,
  video {
    block-size: auto;
  }

  input,
  button,
  select,
  textarea {
    font: inherit;
  }

  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="submit"], [type="button"]), select, textarea) {
    background-color: var(--color-field-bg);
    color: var(--color-ink);
  }

  [hidden] {
    display: none !important;
  }

  /* ページ内リンクの移動（旧スクリプトの固定オフセット付きスクロールの置き換え。位置は scroll-padding で調整） */
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      transition-delay: 0s !important;
      scroll-behavior: auto !important;
    }

    .site-reveal {
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

/* ==================================================================
 * layout
 * ================================================================== */
@layer layout {
  .site-prose {
    max-inline-size: var(--measure);
  }

  /*
   * 広い画面での節の幅（D-014）。ページ容器には最大幅を置かず（PLAN §5）、
   * 節そのものを76remで中央にそろえる。狭い画面では従来どおり幅いっぱい。
   * ページ側で別の幅を指定している節（よくある質問の72remなど）はそちらが優先される。
   */
  :where(.main-content, .page-main, .content-area, .download-shell) > :where(
    .content-section,
    .page-panel,
    .page-hero,
    .page-top-card,
    .cta-section,
    .cost-top-card,
    .cost-summary,
    .cost-section,
    .cost-closing,
    .contact-panel,
    .contact-channel-strip,
    .contact-scenarios,
    .contact-answers,
    .archive-assist,
    .latest-articles,
    .faq-hero,
    .parents-hero,
    .update-info
  ) {
    /* グリッドの子では auto マージンだけだと内容幅に縮むため、幅100%と併せて指定する */
    inline-size: 100%;
    max-inline-size: var(--content-max);
    margin-inline: auto;
  }

  /*
   * 長文の行長だけを42remに抑える。ページ容器・写真・カード一覧は幅を使い切る。
   * セクション直下の段落・本文ブロックが対象（カード内の短文やグリッドには効かない）。
   */
  :where(.content-section, .page-panel, .page-top-card__inner, .content-text-block) :where(.seo-intro, .intro-copy-block, .section-body, .section-copy-block, .content-text-block) > :where(p, .content-text, .section-lead, .page-lead) ,
  :where(.content-section, .page-panel, .page-top-card__inner, .content-text-block) > :where(p, .content-text, .section-lead, .page-lead, blockquote, ul:not([class]), ol:not([class])) {
    max-inline-size: var(--measure);
  }

  :where(.content-section, .page-panel) > :where(h2, h3):where(:not([class*="title"])) {
    max-inline-size: var(--measure);
  }

  .site-table-scroll {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .site-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--site-grid-min, 16rem)), 1fr));
  }
}

/* ==================================================================
 * components
 * ================================================================== */
/* Shared shell components are deliberately NOT in a cascade layer: page stylesheets are unlayered,
   and unlayered rules beat every layer regardless of specificity, so a page's bare `a { color }`
   (univ/assets/style.css) repainted the menu links. Unlayered, the .site-* class selectors win by
   normal specificity. Tokens, base and layout stay layered below page CSS. */

  /* ---------- 本文へスキップ ---------- */
  .site-skip {
    position: absolute;
    z-index: 1100;
    inset-block-start: var(--space-sm);
    inset-inline-start: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-ink);
    color: var(--color-bg);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--motion-fast) var(--ease-standard);
  }

  .site-skip:focus,
  .site-skip:hover {
    color: var(--color-bg);
    transform: none;
  }

  /* ---------- 共通ヘッダー（丸い半透明バー） ---------- */
  /* ヘッダーの高さは固定。開いたメニューはページの上に重なり、本文の位置を動かさない */
  .site-header {
    position: fixed;
    z-index: 1000;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--site-header-space);
    padding: var(--bar-inset);
    pointer-events: none;
  }

  /* 本文はバーの下から始める。全面画像のヒーローがあるページだけ画像を画面上端まで広げ、バーを画像に重ねる */
  html.site-js body {
    padding-block-start: var(--site-header-space);
  }

  html.site-js body.site-hero-top {
    padding-block-start: 0;
  }

  html.site-js body.site-hero-top :is(.hero, .students-hero) {
    padding-block-start: calc(var(--site-header-space) + var(--space-sm));
  }

  html:not(.site-js) .site-header {
    position: relative;
    block-size: auto;
  }

  .site-bar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: calc(var(--bar-height) - 2px) 0fr;
    align-items: center;
    column-gap: var(--space-sm);
    inline-size: min(100%, var(--bar-compact-max));
    min-block-size: var(--bar-height);
    margin-inline: auto;
    padding-inline: 1rem 0.5rem;
    border: 1px solid var(--color-bar-border);
    border-radius: calc(var(--bar-height) / 2);
    background: var(--color-bar);
    box-shadow: var(--shadow-bar);
    color: var(--color-ink);
    pointer-events: auto;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }

  .site-bar.is-ready {
    transition:
      inline-size var(--motion-menu) var(--ease-emphasized),
      grid-template-rows var(--motion-menu) var(--ease-emphasized),
      border-radius var(--motion-menu) var(--ease-emphasized),
      box-shadow var(--motion-fast) var(--ease-standard),
      background-color var(--motion-fast) var(--ease-standard);
  }

  .site-bar[data-elastic] {
    will-change: transform;
  }

  .site-brand {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    justify-self: start;
    gap: 0.1rem;
    min-inline-size: 0;
    min-block-size: var(--tap-min);
    color: var(--color-ink);
    line-height: 1.05;
    text-decoration: none;
  }

  .site-brand__org {
    color: var(--color-brand-sub);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  .site-brand__name {
    color: var(--color-brand);
    font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    white-space: nowrap;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .site-menu-button {
    display: inline-grid;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    place-items: center;
    inline-size: var(--tap-min);
    block-size: var(--tap-min);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-bar-icon-bg);
    box-shadow: inset 0 0 0 1px var(--color-line);
    color: var(--color-ink);
    cursor: pointer;
  }

  .site-menu-button__icon {
    position: relative;
    display: block;
    inline-size: 1.125rem;
    block-size: 0.875rem;
  }

  .site-menu-button__icon span {
    position: absolute;
    inset-inline: 0;
    block-size: 2px;
    border-radius: var(--radius-pill);
    background: currentColor;
    transition:
      transform var(--motion-menu) var(--ease-emphasized),
      opacity var(--motion-fast) var(--ease-standard);
  }

  .site-menu-button__icon span:nth-child(1) {
    inset-block-start: 0;
  }

  .site-menu-button__icon span:nth-child(2) {
    inset-block-start: calc(50% - 1px);
  }

  .site-menu-button__icon span:nth-child(3) {
    inset-block-end: 0;
  }

  .site-menu-button[aria-expanded="true"] .site-menu-button__icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .site-menu-button[aria-expanded="true"] .site-menu-button__icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
  }

  .site-menu-button[aria-expanded="true"] .site-menu-button__icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* 狭い幅：バーが縦に伸びてパネルになる */
  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    /* 行の高さ（閉じているときは0）で切り取る。中央揃えのままだとパネルが本文の上に出る */
    align-self: stretch;
    min-block-size: 0;
    block-size: 100%;
    overflow: hidden;
    visibility: hidden;
  }

  .site-bar.is-ready .site-nav {
    transition: visibility 0s linear var(--motion-menu);
  }

  .site-bar.is-open {
    grid-template-rows: calc(var(--bar-height) - 2px) 1fr;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
  }

  .site-bar.is-open .site-nav {
    max-block-size: calc(100dvh - var(--bar-height) - 2 * var(--bar-inset) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: visible;
  }

  .site-bar.is-ready.is-open .site-nav {
    transition-delay: 0s;
  }

  .site-nav__list,
  .site-nav__related-list {
    list-style: none;
  }

  .site-nav__list {
    display: grid;
    gap: 0.1rem;
    padding: var(--space-xs) 0.25rem var(--space-md);
  }

  .site-nav__link {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-min);
    padding: 0.35rem 0.25rem;
    color: var(--color-nav-link);
    font-size: clamp(1.75rem, 1.2rem + 3vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-decoration: none;
  }

  .site-nav__link:hover,
  .site-nav__link:focus-visible {
    color: var(--color-ink);
  }

  .site-nav__link[aria-current="page"] {
    color: var(--color-nav-current);
  }

  .site-nav__item,
  .site-nav__related-list li {
    opacity: 0;
    transform: translateY(1rem);
  }

  .site-bar.is-ready :is(.site-nav__item, .site-nav__related-list li) {
    transition:
      opacity var(--motion-fast) var(--ease-standard),
      transform var(--motion-menu) var(--ease-emphasized);
    transition-delay: calc(var(--i, 0) * 40ms + 80ms);
  }

  /* 閉じるときは下の項目から消える */
  .site-bar.is-ready.is-closing :is(.site-nav__item, .site-nav__related-list li) {
    opacity: 0;
    transform: translateY(0.75rem);
    transition-duration: var(--motion-fast), var(--motion-fast);
    transition-delay: calc((var(--total, 12) - var(--i, 0)) * 26ms);
  }

  /* Reflow menu contents immediately; let the pill itself change width smoothly. */
  .site-bar.is-switching * {
    transition: none !important;
  }

  .site-bar.is-switching { overflow: clip; }
  .site-bar[data-nav-mode].is-switching .site-nav { visibility: hidden; }
  .site-bar.is-switching { grid-template-rows: calc(var(--bar-height) - 2px) 0fr; }
  .site-bar[data-nav-mode="expanded"].is-switching { grid-template-rows: calc(var(--bar-height) - 2px); }

  .site-bar.is-open :is(.site-nav__item, .site-nav__related-list li) {
    opacity: 1;
    transform: none;
  }

  .site-nav__related {
    margin-inline: 0.25rem;
    padding-block: var(--space-sm) var(--space-md);
    border-block-start: 1px solid var(--color-line);
  }

  .site-nav__related-toggle {
    display: none;
  }

  .site-nav__related-list {
    display: grid;
  }

  .site-nav__related-list a {
    display: flex;
    align-items: center;
    min-block-size: var(--tap-min);
    padding-inline: 0.25rem;
    color: var(--color-ink-muted);
    font-size: var(--text-md);
    text-decoration: none;
  }

  .site-nav__related-list a:hover,
  .site-nav__related-list a[aria-current="page"] {
    color: var(--color-link);
  }

  /* JavaScriptなし：リンクを常に表示する */
  html:not(.site-js) .site-bar {
    grid-template-rows: auto auto;
    border-radius: var(--radius-xl);
  }

  html:not(.site-js) .site-nav {
    overflow: visible;
    visibility: visible;
  }

  html:not(.site-js) :is(.site-nav__list, .site-nav__related-list) {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-md);
  }

  html:not(.site-js) .site-nav__link {
    font-size: var(--text-md);
    letter-spacing: 0;
  }

  html:not(.site-js) :is(.site-nav__item, .site-nav__related-list li) {
    opacity: 1;
    transform: none;
  }

  /* 広い幅：同じバーが横に拡張し、主要7項目を常時表示する */
  .site-bar[data-nav-mode="expanded"],
  .site-bar--measure {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: calc(var(--bar-height) - 2px);
    inline-size: min(100%, var(--site-bar-expanded-size, 100%));
    padding-inline: 1.25rem 0.375rem;
  }

  /* 幅の計測用コピー：大きさ0の領域に閉じ込め、表示・操作・はみ出しに影響させない */
  .site-measure-host {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .site-bar--measure {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: max-content !important;
    pointer-events: none;
    transition: none !important;
  }

  .site-bar--measure,
  .site-bar--measure * {
    visibility: hidden !important;
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) .site-nav {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 0.125rem;
    min-block-size: auto;
    max-block-size: none;
    overflow: visible;
    visibility: visible;
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) .site-nav__list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.125rem;
    padding: 0;
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) .site-nav__item--home {
    display: none;
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) :is(.site-nav__item, .site-nav__related-list li) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) .site-nav__link {
    padding: 0.5rem clamp(0.5rem, 0.3rem + 0.35vw, 0.875rem);
    border-radius: var(--radius-pill);
    color: var(--color-nav-link-expanded);
    font-size: var(--text-nav);
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) .site-nav__link:hover {
    background: var(--color-bar-hover);
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) .site-nav__link[aria-current="page"] {
    background: var(--color-bar-current);
    color: var(--color-nav-current);
    font-weight: 600;
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) .site-nav__related {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) .site-nav__related-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: var(--tap-min);
    padding: 0.5rem clamp(0.625rem, 0.4rem + 0.35vw, 1rem);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-nav-link-expanded);
    font-size: var(--text-nav);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
  }

  .site-nav__related-toggle:hover {
    background: var(--color-bar-hover);
  }

  .site-nav__chevron {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--motion-fast) var(--ease-standard);
  }

  .site-nav__related[data-open="true"] .site-nav__chevron {
    transform: translateY(2px) rotate(-135deg);
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) .site-nav__related-list {
    position: absolute;
    z-index: 1;
    inset-block-start: calc(100% + 0.9rem);
    inset-inline-end: 0;
    min-inline-size: 14rem;
    padding: var(--space-xs);
    border: 1px solid var(--color-bar-border);
    border-radius: var(--radius-lg);
    background: var(--color-bar-solid);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
    transform-origin: top right;
    visibility: hidden;
    transition:
      opacity var(--motion-fast) var(--ease-standard),
      transform var(--motion-fast) var(--ease-standard),
      visibility 0s linear var(--motion-fast);
  }

  .site-bar[data-nav-mode="expanded"] .site-nav__related[data-open="true"] .site-nav__related-list {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) .site-nav__related-list a {
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    color: var(--color-ink);
    white-space: nowrap;
  }

  :is(.site-bar[data-nav-mode="expanded"], .site-bar--measure) .site-nav__related-list a:hover {
    background: var(--color-bar-hover);
  }

  /* JSが幅を測る前の仮表示（広い画面での読み込み時の位置ずれを抑える） */
  @media (min-width: 75rem) {
    html.site-js .site-bar:not([data-nav-mode]) {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-rows: calc(var(--bar-height) - 2px);
      inline-size: min(100%, 66rem);
      padding-inline: 1.25rem 0.375rem;
    }

    html.site-js .site-bar:not([data-nav-mode]) .site-menu-button {
      display: none;
    }

    html.site-js .site-bar:not([data-nav-mode]) .site-nav {
      display: flex;
      grid-column: 2;
      grid-row: 1;
      align-items: center;
      justify-content: flex-end;
      overflow: visible;
      visibility: visible;
    }

    html.site-js .site-bar:not([data-nav-mode]) .site-nav__list {
      display: flex;
      padding: 0;
    }

    html.site-js .site-bar:not([data-nav-mode]) .site-nav__item--home,
    html.site-js .site-bar:not([data-nav-mode]) .site-nav__related-list {
      display: none;
    }

    html.site-js .site-bar:not([data-nav-mode]) .site-nav__item {
      opacity: 1;
      transform: none;
    }

    html.site-js .site-bar:not([data-nav-mode]) .site-nav__link {
      padding: 0.5rem 0.75rem;
      color: var(--color-nav-link-expanded);
      font-size: var(--text-nav);
      font-weight: 500;
      letter-spacing: 0;
      white-space: nowrap;
    }

    html.site-js .site-bar:not([data-nav-mode]) .site-nav__related {
      margin: 0;
      padding: 0;
      border: 0;
    }

    html.site-js .site-bar:not([data-nav-mode]) .site-nav__related-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      min-block-size: var(--tap-min);
      padding: 0.5rem 0.875rem;
      border: 0;
      background: transparent;
      color: var(--color-nav-link-expanded);
      font-size: var(--text-nav);
      font-weight: 500;
    }
  }

  .site-backdrop {
    position: fixed;
    z-index: 999;
    inset: 0;
    background: var(--color-overlay);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  /* ---------- 共通フッター ---------- */
  .site-footer {
    position: relative;
    isolation: isolate;
    /* Clip the decorative glow without scrolling the panel when a link receives focus. */
    overflow: clip;
    margin-block-start: var(--section-space);
    padding: clamp(3rem, 2rem + 3vw, 4.5rem) var(--gutter) 1.25rem;
    background: var(--footer-bg);
    color: var(--footer-ink);
  }

  .site-footer::before {
    position: absolute;
    inset: 0 0 auto;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), var(--color-accent-2), transparent);
    content: "";
  }

  .site-footer::after {
    position: absolute;
    z-index: -1;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: 200%;
    block-size: 200%;
    background: radial-gradient(circle at 50% 0%, rgba(0, 122, 255, 0.15) 0%, transparent 50%);
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    max-inline-size: 76rem;
    margin-inline: auto;
    gap: var(--space-xl) clamp(1.5rem, 1rem + 2.5vw, 4rem);
  }

  .site-footer__heading {
    display: inline-block;
    margin-block-end: var(--space-sm);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    background: var(--text-gradient-up);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .site-footer address {
    font-style: normal;
    line-height: 1.8;
  }

  .site-footer__list {
    list-style: none;
  }

  .site-footer a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    color: var(--footer-link);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard);
  }

  .site-footer a:hover,
  .site-footer a:focus-visible {
    color: var(--color-accent-2);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .site-footer__contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.4em;
  }

  .site-footer__keywords {
    color: var(--footer-link);
    font-size: 0.9em;
    line-height: 1.8;
  }

  .site-footer__brand {
    margin-block: clamp(2.5rem, 1.5rem + 4vw, 4rem) clamp(1.5rem, 1rem + 2vw, 3rem);
    color: transparent;
    font-family: var(--font-display);
    font-size: clamp(3rem, 14vw, 13rem);
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(0, 122, 255, 0.2) 0%, rgba(90, 200, 250, 0.4) 25%, rgba(0, 122, 255, 0.25) 50%, rgba(90, 200, 250, 0.4) 75%, rgba(0, 122, 255, 0.2) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(0, 122, 255, 0.3));
    overflow-wrap: anywhere;
    pointer-events: none;
    transform: skewY(-2deg);
    user-select: none;
    animation: site-shimmer var(--motion-ambient) ease-in-out infinite;
  }

  /* With JS, the ambient shimmer only runs while the brand is on screen: an off-screen
     infinite animation on a filtered, text-clipped layer repaints every frame during load (P6-02). */
  .site-js .site-footer__brand:not(.is-in-view) {
    animation-play-state: paused;
  }

  @keyframes site-shimmer {
    0%,
    100% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs) var(--space-lg);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--footer-line);
    color: var(--footer-muted);
    font-size: var(--text-sm);
    text-align: center;
  }

  .site-footer__bottom a {
    color: var(--footer-link);
  }

  /* ---------- いつものAIへ、公式情報を引き継ぐ ---------- */
  .site-ai {
    position: relative;
    display: grid;
    gap: 1.25rem;
    max-inline-size: 76rem;
    margin: 0 auto var(--space-xl);
    padding: clamp(1rem, 2.5vw, 1.75rem);
    border: 1px solid #b6d6ff26;
    border-radius: 1.25rem;
    background: #101c2b;
  }
  .site-ai__intro { align-self: center; min-inline-size: 0; }
  .site-ai__title {
    margin: 0;
    color: #f5f8fd;
    font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.5;
    text-wrap: balance;
  }
  .site-ai__lead {
    margin: .375rem 0 0;
    color: #b9c8da;
    font-size: 1rem;
    line-height: 1.7;
    text-wrap: pretty;
  }
  .site-ai__services {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
  }
  .site-footer .site-ai__service {
    position: relative;
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: .625rem;
    min-inline-size: 0;
    min-block-size: 3rem;
    padding: .5rem 2rem .5rem .75rem;
    border: 1px solid #b6d6ff26;
    border-radius: .75rem;
    background: transparent;
    color: #f5f8fd;
    text-decoration: none;
    transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
  }
  .site-ai__mark { display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; }
  .site-ai__icon { display: block; inline-size: 1.25rem; block-size: 1.25rem; object-fit: contain; filter: invert(1); }
  .site-ai__name { font-size: 1rem; font-weight: 600; line-height: 1.4; }
  .site-ai__hint {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .site-footer .site-ai__service::after {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: .75rem;
    color: #8babc7;
    content: "↗";
    font-size: 1rem;
    line-height: 1;
    transform: translateY(-50%);
    transition: color var(--motion-fast) var(--ease-standard);
  }
  .site-footer .site-ai__service:hover,
  .site-footer .site-ai__service:focus-visible {
    background-color: #1d3046;
    border-color: #b6d6ff80;
    color: #fff;
    text-decoration: none;
  }
  .site-footer .site-ai__service:hover::after,
  .site-footer .site-ai__service:focus-visible::after { color: #fff; }
  .site-ai__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
  }
  .site-ai__reference { flex: 1 1 24rem; margin: 0; max-inline-size: 42rem; color: #afc0d2; font-size: .875rem; line-height: 1.65; }
  .site-ai__actions { flex: 0 0 auto; }
  .site-ai__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-block-size: var(--tap-min);
    padding: .65rem 1rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    background: transparent;
    color: #e6f0ff;
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
  }
  .site-ai__copy svg { flex: none; }
  .site-ai__copy:hover, .site-ai__copy:focus-visible { background: #b6d6ff1a; }
  .site-ai__status { margin: 0; color: #cde6fb; font-size: .875rem; line-height: 1.8; }
  .site-ai__status:empty { display: none; }
  .site-ai__fallback[hidden] { display: none; }
  .site-ai__fallback label { display: block; margin-block-end: var(--space-xs); color: #e5e7eb; font-size: var(--text-sm); }
  .site-ai__fallback textarea {
    inline-size: 100%;
    padding: var(--space-sm);
    border: 1px solid #b6d6ff40;
    border-radius: var(--radius-md);
    background: #091224;
    color: #f5f5f7;
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: 1.7;
    resize: vertical;
  }
  @media (min-width: 768px) {
    .site-ai__services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 960px) {
    .site-ai__services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* ---------- 入場アニメーション（site.js が画面外の画像・カードにだけ付与） ---------- */
  .site-reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition:
      opacity var(--motion-enter) var(--ease-standard),
      transform var(--motion-enter) var(--ease-emphasized);
  }

  .site-reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  @media (forced-colors: active) {
    .site-brand__name,
    .site-footer__heading {
      background: none;
      -webkit-text-fill-color: currentColor;
    }
  }

  @media print {
    .site-header,
    .site-backdrop,
    .site-footer {
      display: none;
    }
  }


/* ---------- 暗色での本文ハイライト（D-014） ----------
   各ページのCSSが `mark { background-color: #fff3cd }`（明色用）を持っており、
   暗い地の上ではクリーム色の帯が浮いて読みにくい。ページCSSは層の外なので、
   同じく層の外・要素2つ分の詳細度（html mark）で暗色のときだけ上書きする。
   明色の見た目は変えない。 */
@media (prefers-color-scheme: dark) {
  html mark {
    background-color: rgba(108, 180, 255, 0.22);
    color: var(--color-ink);
  }
}

/* ==================================================================
 * 全体の調子（D-015）
 * 参照した雰囲気：暖かい無彩色の地に白い面、見出しは大きく詰めて黒に近く、
 * 説明文は落ち着いた灰色、面は大きめの角丸と薄い影。青はアクセントとして残す。
 * ページ側CSSは層の外にあるため、ここも層の外で「要素1つ分だけ強い」詳細度で上書きする。
 * ================================================================== */
html :is(.section-title, .page-title, .cost-top-card__title, .page-top-card .page-title) {
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  /* グラデーション文字をやめて黒に近い1色にする（下の飾り線も細い青の短線に置き換える） */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

html .section-title {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 700;
  border-bottom: 0;
  border-image: none;
  padding-bottom: 0;
  margin-bottom: var(--space-lg);
}

/* 見出しの上に短い青の線を置いて、ブランドの青を残す */
html .section-title::before {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 3px;
  margin-block-end: 0.85rem;
  border-radius: 999px;
  background: var(--color-link);
}

html :is(.hero, .students-hero, .page-hero, .parents-hero) :is(h1, h2) {
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

html :is(.content-text, .section-lead, .page-lead, .contact-lead) {
  color: var(--color-ink-muted);
  line-height: 1.9;
}

/* 面：白・大きめの角丸・薄い影・細い境界。半透明のぼかしはやめる */
html :is(.content-section, .page-panel, .facility-card, .contact-card, .sidebar, .cost-card, .contact-panel) {
  background: var(--color-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

html :is(.content-section, .page-panel) {
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
}

html :is(.content-section, .page-panel, .facility-card, .sidebar):hover {
  box-shadow: var(--shadow-md);
}

/* 主ボタン：青の平らな丸ボタン。光る影と拡大はやめて、わずかに持ち上げるだけにする */
html .cta-button {
  background: var(--color-link);
  border-radius: var(--radius-pill);
  box-shadow: none;
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
}

html .cta-button:hover {
  background: var(--color-link-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* 写真の下端を地の色へ溶かす（参照した雰囲気の「画像が紙に馴染む」感じ）。
   文字のコントラストに影響しないよう、重ねの濃さは変えずに下端だけをぼかす。 */
html :is(.hero, .students-hero, .page-hero, .parents-hero) {
  box-shadow: inset 0 -90px 70px -70px var(--color-bg);
}

/* 見出しの中のグラデーション文字（ページCSSの .title-text など）も1色にそろえる（D-015） */
html :is(.section-title, .page-section-title, .page-title, .panel-title) :is(span, em, strong) {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

/* D-017: common rhythm for the existing pages. Functional panels and forms
   retain their surfaces; content sections flow on the page with more space. */
html .content-section {
  background: transparent;
  border: 0;
  box-shadow: none;
}
html .content-section:hover { box-shadow: none; }
html .section-title::before { inline-size: 1.5rem; block-size: 2px; }
html .cta-button { border-radius: .85rem; }