@charset "UTF-8";
/* ==========================================================================
   top.css ― トップページ専用（読込スコープ：/index.html のみ）
   --------------------------------------------------------------------------
   - 命名：新コア命名（p-* / c-*）。現行 l- には寄せない。
   - 色は必ず var(--color-*) 経由（#1a2a5e 直書き禁止）。
   - components.css / nav.css は触らない。トップ固有の追加はすべて本ファイル。
   - Phase 1：共通部品（c-heading-top / c-cardGrid--3,--imgTop / c-btn 一式）
             ＋ §6 教育・研究 / §7 医療。MV等の重量セクションは Phase 2。
   ========================================================================== */

/* ==========================================================================
   1. セクション共通見出し（英大文字＋日本語サブ）  §3で新設・以降使い回し
   ========================================================================== */
.c-heading-top {
  text-align: center;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: .08em;
  font-weight: var(--fw-bold);
  color: var(--color-main);
  margin-top: 24px;
  margin-bottom: 32px;
}
.c-heading-top__sub {
  display: block;
  font-size: var(--fs-sm);
  letter-spacing: .2em;
  color: var(--color-gray-700);
  margin-top: 3px;
}
.c-heading-top--left { text-align: left; }
.c-heading-top--white,
.c-heading-top--white .c-heading-top__sub { color: #fff; }

/* ==========================================================================
   2. カードグリッド追加 modifier（§6/§7 で使用）
   --------------------------------------------------------------------------
   - 基底 .c-cardGrid / __item / __inner / __img / __link / .c-heading-5 は
     components.css 側に定義済み（②カテゴリトップで使用中）。ここでは差分のみ。
   - --imgTop は「画像→見出し」順。order は使わず HTML 記述順で並べる方式。
     __inner は components.css で flex-direction:column 済みのため、
     HTML を 画像→見出し の順に書けばそのまま画像が上に来る。
   ========================================================================== */
@media (min-width: 769px) {
  .c-cardGrid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* 画像の下に来る見出しの余白調整（②の見出し上配置用 margin を打ち消す） */
.c-cardGrid--imgTop .c-heading-5 {
  margin-top: 12px;
  margin-bottom: 0;
  min-height: 0; /* 画像下では2行ぶんの高さ確保は不要 */
}

/* ==========================================================================
   3. ボタン（c-btn 基底＋ modifier）  新コア命名
   --------------------------------------------------------------------------
   - 境界確認の結論：既存 .c-btn は未定義。基底ごと本ファイルに新規定義する。
   - 短大由来の .btn 系（components.css）とは別系統。トップ以降は c-btn を使用。
   - --arrow：右に chevron 自動付与（§4/§8/§11）。--ghost：紺背景上の白枠（§5）。
   ========================================================================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid var(--color-main);
  border-radius: var(--radius-pill);
  background-color: #fff;
  color: var(--color-main);
  font-weight: var(--fw-bold);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.c-btn:hover {
  background-color: var(--color-main);
  color: #fff;
}

/* 右矢印（自動付与） */
.c-btn--arrow::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f054"; /* chevron-right */
  font-size: .8em;
  transition: transform var(--transition-base);
}
.c-btn--arrow:hover::after { transform: translateX(4px); }

/* 丸矢印バリアント：白ピル＋紺丸＋白›（§11/§4用）。プレーン›の --arrow とは別物 */
.c-btn--arrowCircle::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f054"; /* chevron-right（--arrow と同じ） */
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1em; height: 2.1em; margin-left: 10px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-main); color: #fff; /* 白は例外許容（白トークン無し） */
  font-size: .8em; line-height: 1;
  padding-top: 0.2em;
}

/* 紺背景の上に置くゴーストボタン（§5 About 用） */
.c-btn--ghost {
  border-color: #fff;
  background-color: transparent;
  color: #fff;
}
.c-btn--ghost:hover {
  background-color: #fff;
  color: var(--color-main);
}

/* ==========================================================================
   4. §6 教育・研究 / §7 医療（流用セクション）
   --------------------------------------------------------------------------
   - 構造は §6/§7 同一。c-cardGrid--3 --imgTop を使用、各5枚（端数は左寄せ）。
   - 教育・研究＝斜め紺グラデ背景／医療＝白背景。
   ========================================================================== */
.p-edu,
.p-medical { padding: 64px 0; }

/* 教育・研究：背景画像 */
.p-edu {
  background-image: url(/corporations/assets/img/top/edu_bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
/* 教育・研究：セクション見出しは紺（背景左が白のため） */
.p-edu .c-heading-top,
.p-edu .c-heading-top__sub { color: var(--color-main); }
/* カードのオーバーレイラベルは白のまま（画像＋グラデ上） */
.p-edu .c-cardGrid__link .c-heading-5 { color: #fff; }

/* 医療：背景画像 */
.p-medical {
  background-image: url(/corporations/assets/img/top/med_bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 医療：セクション見出しは白（背景左が紺のため） */
.p-medical .c-heading-top,
.p-medical .c-heading-top__sub { color: #fff; }

@media (max-width: 768px) {
  .p-edu,
  .p-medical { padding: 40px 0; }
  .p-edu {
    background-image: none;
    background-color: #fff;
  }
  .p-medical {
    background-image: none;
    background-color: var(--color-main);
  }
  /* 医療のみSP1列に戻す（教育・研究は2列のまま維持） */
  .p-medical .c-cardGrid--3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5. §1 MVスライダー（Swiper）
   --------------------------------------------------------------------------
   - タグラインは画像焼き込み前提＝スライドは画像のみ。1枚縮小表示（picture不要）。
   - 比率＝短大MV準拠：aspect-ratio 固定でなく height:auto（画像の実比率で表示）。
     実画像が入れば画像比率で表示。仮画像の間だけ __slide の min-height で枠を見せる。
   - 演出：Swiper fade（top.js）＋アクティブ画像のゆっくり拡大（縦パンなし）。
   ========================================================================== */
.p-mv { position: relative; width: 100%; overflow-x: hidden; }
.p-mv__slider { overflow: hidden; }                          /* チラ見せ廃止＝はみ出しを隠す */
.p-mv__slide { position: relative; width: 100%; overflow: hidden; }  /* 1枚＝全幅／拡大分をクリップ */
.p-mv__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1920 / 800;                                  /* PC：1920×800の比率で帯を固定（幅に追従） */
  object-fit: cover;
  background: var(--color-gray-50);
  transform: scale(1);                                       /* ズームの基点 */
  will-change: transform;
  backface-visibility: hidden;                               /* 拡大時のちらつき防止 */
}

/* ズームフェード（アクティブ画像だけ緩やかに拡大・縦パンなし） */
.swiper-slide-active .p-mv__img,
.swiper-slide-duplicate-active .p-mv__img,
.swiper-slide-prev .p-mv__img {
  animation: mvZoomUp 8s linear both;
}
@keyframes mvZoomUp {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }                            /* 上品めに1.1（TDCは1.2） */
}

/* スライド内リンク（画像＋テキストを内包） */
.p-mv__link { position: relative; display: block; text-decoration: none; }

/* オーバーレイ：左下に紺の半透明帯＋短い紺ライン＋白タイトル */
.p-mv__overlay {
  position: absolute;
  left: 0; bottom: 0;
  max-width: min(90%, 900px);
  padding: 16px 32px 16px 24px;
  background: color-mix(in srgb, var(--color-main) 78%, transparent); /* 紺の半透明帯 */
  display: flex; align-items: center; gap: 16px;
  /* テキスト切替：非アクティブは消す。アクティブ側でフェードイン */
  opacity: 0;
  transition: opacity .8s ease;
}
/* タイトル脇の短い紺ライン（帯より濃い紺で視認） */
.p-mv__overlay::before {
  content: ""; flex: 0 0 auto;
  width: 32px; height: 3px;
  background: #fff;
}
.p-mv__title {
  margin: 0;
  color: #fff;                     /* 白文字（#fff は許可） */
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

/* アクティブスライドのオーバーレイのみ表示（Swiperが付与する swiper-slide-active に連動） */
.swiper-slide-active .p-mv__overlay { opacity: 1; }

/* ==========================================================================
   キャプションをスライダー外に出し常時表示（.p-mv__head）
   - 上の .p-mv__overlay 系・.p-mv__link はスライドごとのリンク/キャプションと
     セットの旧実装。参照が無くなったが未削除。
   - .p-mv__title はここで画像キャプション前提の指定に再定義（上の text 用指定は不使用）。
   - 位置は現行（stylef88b.css の .p-mv__head/.p-mv__title--01）を数値そのまま踏襲せず、
     新MVの寸法（1920×800）に対して「左寄せ・やや下」に見えるよう仮置き。実装後の報告を参照。
   ========================================================================== */
.p-mv__head {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  z-index: 2;
  max-width: min(90%, 900px);
  padding: 0 32px;
}
.p-mv__title img {
  display: block;
  width: min(100%, 550px);
  height: auto;
}

@media (max-width: 768px) {
  .p-mv__img { aspect-ratio: 750 / 842; }            /* SP：mv_0X_sp.jpg 実寸比率に合わせる（旧4:3から変更） */
  .p-mv__overlay { padding: 10px 16px; max-width: 100%; gap: 10px; }
  .p-mv__title   { font-size: var(--fs-base); }
  .p-mv__overlay::before { width: 20px; }

  .p-mv__head { padding: 0 16px; max-width: 100%; top: 55%; }  /* 縦中央からやや下へ（transformは基本指定を継承） */
  .p-mv__title img { width: min(100%, 300px); }
}

/* モーション低減設定の利用者はズームを無効化（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  .swiper-slide-active .p-mv__img,
  .swiper-slide-duplicate-active .p-mv__img,
  .swiper-slide-prev .p-mv__img { animation: none; }
}

.p-mv__pagination.swiper-pagination { position: static; margin-top: 16px; }
.p-mv .swiper-pagination-bullet { width: 10px; height: 10px; background: var(--color-gray-300); opacity: 1; }
.p-mv .swiper-pagination-bullet-active { background: var(--color-main); opacity: 1; }

/* ==========================================================================
   6. §3 TOPICS カルーセル（Swiper・中央強調）
   - SP 1.2枚見せ／PC 3枚・中央拡大・dots（送りは JS の breakpoints で可変）。
   - カード＝画像（16/10）＋タイトル。見出しは c-heading-top を使用。
   ※ 現在 index.html では未使用（バナースライダーに置換済み）
   ========================================================================== */
.p-topics {
  margin-top: 48px;
  padding: 16px 0 30px;
  background-image: url(/corporations/assets/img/top/topics_bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.p-topics__heading { margin-bottom: 24px; }
.p-topics__slider {
  position: relative;
  padding: 0 48px;
}
.p-topics__card {
  display: block;
  color: var(--color-gray-900);
  text-decoration: none;
}
.p-topics__inner {
  display: block;
  background: rgba(255,255,255,.6);
  padding: 16px;
  transition: transform .35s ease;
}
.p-topics__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-gray-50);
}
.p-topics__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.p-topics__title { margin-top: 12px; font-size: var(--fs-base); line-height: 1.6; text-align: center; }
.p-topics__pagination.swiper-pagination { position: static; margin-top: 16px; }

.p-topics .swiper-slide-active .p-topics__inner { transform: scale(1.15); position: relative; z-index: 1; }
.p-topics .swiper-slide:not(.swiper-slide-active) .p-topics__inner { transform: scale(.9); }

.p-topics .swiper-pagination-bullet { width: 10px; height: 10px; background: var(--color-gray-300); opacity: 1; }
.p-topics .swiper-pagination-bullet-active { background: var(--color-main); opacity: 1; }

.p-topics .swiper-button-prev,
.p-topics .swiper-button-next {
  color: var(--color-main); /* 矢印＝紺 */
  top: 31%;
}

@media (max-width: 768px) {
  .p-topics { margin-top: 32px; padding: 16px 0 30px; }
  .p-topics__slider { padding: 0 32px; }
}

/* ==========================================================================
   §3 バナー用スライダー（Swiper・6枚・PC4/SP2・矢印のみ）
   --------------------------------------------------------------------------
   - 幅は l-container（1200px）内。矢印は __carousel の左右 padding 領域に置く。
   - 矢印＝紺の円＋白いシェブロン（Swiper既定のボタンを円形化して使用）。
     円の直径は --swiper-navigation-size と width を同値にする（PC40px / SP32px）。
     シェブロンは ::after を border で描画（太さ＝border-width で調整可）。
   ========================================================================== */
.p-banner-slider {
  /* 上余白を半分に（MV→バナー用）。下余白も半分に
     （バナー→NEWSの間隔を半分にするため。上下とも半分で統一） */
  padding-top: 20px;
  padding-bottom: 20px;
  --swiper-navigation-size: 45px;   /* 円の直径。上下センタリングもこの値に追従 */
}
.p-banner-slider__carousel { position: relative; padding: 0 44px; }
.p-banner-slider__slider { position: relative; overflow: hidden; }
.p-banner-slider__item {
  display: block;
  transition: opacity .3s ease;
}
.p-banner-slider__item:hover { opacity: .8; }
.p-banner-slider__item img {
  display: block;
  width: 100%;
  height: auto;
}

/* Swiper 初期化前も初期化後と同じ枚数で並べる（読み込み時に画像が大きく出るのを防ぐ） */
.p-banner-slider__slider:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 3px) / 2);
  margin-right: 3px;
}
@media (min-width: 769px) {
  .p-banner-slider__slider:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 15px) / 4);
    margin-right: 5px;
  }
}

/* 矢印：紺の円＋白いシェブロン */
.p-banner-slider .swiper-button-prev,
.p-banner-slider .swiper-button-next {
  width: 45px;                      /* 既定は横長のため正円にする */
  border-radius: 50%;
  background: var(--color-main);
  color: #fff;
}
.p-banner-slider .swiper-button-prev { left: -5px; }   /* 値を大きくするほど内側へ */
.p-banner-slider .swiper-button-next { right: -5px; }

/* シェブロン：border で描画（太さ＝border-width、大きさ＝width/height） */
.p-banner-slider .swiper-button-prev::after,
.p-banner-slider .swiper-button-next::after {
  content: "";
  width: 10px;
  height: 10px;
  border: 0 solid currentColor;
  border-top-width: 3px;
  border-right-width: 3px;
  font-size: 0;                     /* 既定グリフの余白対策 */
}
.p-banner-slider .swiper-button-next::after { transform: translateX(-2px) rotate(45deg); }
.p-banner-slider .swiper-button-prev::after { transform: translateX(2px) rotate(-135deg); }

@media (max-width: 768px) {
  .p-banner-slider {
    /* 上余白を半分に（MV→バナー用）。下余白も半分に
       （バナー→NEWSの間隔を半分にするため。上下とも半分で統一） */
    padding-top: 12px;
    padding-bottom: 12px;
    --swiper-navigation-size: 32px;
  }
  .p-banner-slider__carousel { padding: 0 34px; }
  .p-banner-slider .swiper-button-prev,
  .p-banner-slider .swiper-button-next { width: 32px; }
  .p-banner-slider .swiper-button-prev { left: 6px; }
  .p-banner-slider .swiper-button-next { right: 6px; }
  .p-banner-slider .swiper-button-prev::after,
  .p-banner-slider .swiper-button-next::after {
    width: 8px;
    height: 8px;
    border-top-width: 2.5px;
    border-right-width: 2.5px;
  }
}

/* ==========================================================================
   7. §10 関連施設カルーセル（Swiper・8項目）
   --------------------------------------------------------------------------
   - SP2.5 / PC5（slidesPerView は top.js の breakpoints で可変）。矢印ナビ。
   - アイコン＝写真の円形トリミング。ラベルは h3.p-related__title（英語サブ無し）。
   ========================================================================== */
.p-related { padding: 56px 0; }
.p-related__carousel { position: relative; padding: 0 48px; }
.p-related__slider { position: relative; }
.p-related__item { text-align: center; text-decoration: none; color: var(--color-gray-900); }
.p-related__icon {
  width: 80%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  background: var(--color-gray-50);
}
.p-related__icon img { width: 100%; height: 100%; object-fit: cover; }
/* Swiper 初期化前も初期化後と同じ枚数で並べる（読み込み時に画像が大きく出るのを防ぐ） */
.p-related__slider:not(.swiper-initialized) .swiper-slide {
  width: calc((100% - 24px) / 2.5);
  margin-right: 16px;
}
@media (min-width: 769px) {
  .p-related__slider:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 96px) / 5);
    margin-right: 24px;
  }
}
.p-related__title { margin-top: 12px; font-size: var(--fs-base); text-align: center; line-height: 1.5; }
.p-related .swiper-button-prev,
.p-related .swiper-button-next { color: var(--color-main); }

@media (max-width: 768px) {
  .p-related { padding: 40px 0; }
  .p-related__carousel { padding: 0 32px; }
}

/* ==========================================================================
   8. §5 神奈川歯科大学について（About・2カラム・斜め紺背景）
   --------------------------------------------------------------------------
   - 左カラム：縦書き見出しのみ（明朝・vertical-rl/upright確定）。SPは横書き。
   - 右カラム：入れ子gridで「写真=右上(はみ出し)・リード/ボタン=左・タグ=下右寄せ」。
   - 斜め紺背景＝.p-about__diagonal（SVG・preserveAspectRatio="none"）を右上に重ねて表現。
     幅いっぱいに引き伸ばし斜めの両端が画面幅に追従（％三角の::before方式は幅で暴れたため廃止）。
     写真は z-index:2 で斜めの前面。SPは .p-about__diagonal { display:none } で斜め解除＋縦積み。
   - #タグ＝表示のみ・遷移なし（span・hover無し）。ghostボタンは §3 ボタン節で定義済。
   ========================================================================== */
/* 紺背景セクション。斜めは .p-about__diagonal（SVG・preserveAspectRatio="none"）を右上に重ねる */
.p-about {
  --about-diagonal-h: clamp(102px, 18.7vw, 221px);  /* 斜め帯の高さ（.p-about__diagonal の height と .p-about__headingArea の margin-top 式が共有参照） */
  position: relative;
  background: var(--color-main); color: #fff;
  padding: 140px 0 57px;            /* 上部を広げ、見出し/リード/タグを斜めSVGの下に。写真のみ右上で斜めにかかる。実機で微調整。
                                        下パディングをPCのみ15px縮小（72px→57px）。padding-topは変更なし */
  overflow: hidden;                 /* SVG斜めのはみ出しを隠す */
}
/* 斜め白領域：SVGを右上に。preserveAspectRatio="none" で幅いっぱいに引き伸ばし、
   斜めの開始点(58%)・終了点(右端)が常に画面幅に追従する。高さは viewBox 比で決まる */
.p-about__diagonal {
  position: absolute; top: 0; left: 0;
  width: 100%; height: var(--about-diagonal-h);  /* 斜め帯の高さ。実機でカンプ微調整 */
  z-index: 0; display: block;
}
.p-about__layout {
  position: relative; z-index: 1;   /* SVG斜めより前面 */
  display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: start;
}

/* 見出しが斜め白領域（.p-about__diagonal）に隠れないよう開始位置を下げる。
   斜めの高さ --about-diagonal-h に対する比率(0.919)で連動させ、
   斜めが浅い幅では自動的に0まで縮む（実測：viewport1406pxで白の深さ239px/斜め260px=0.919）。 */
@media (min-width: 1025px) {
  .p-about__headingArea {
    margin-top: max(0px, calc(var(--about-diagonal-h) * 0.919 - 120px));
  }
  /* 見出しをPCのみ下げる（元は margin-top 指定なし＝0px→15px→25px） */
  .p-about__heading {
    margin-top: 25px;
  }
}

/* 左カラム：縦書き見出し（明朝・upright確定）。height:100%は紺余白の原因のため削除 */
.p-about__heading {
  writing-mode: vertical-rl;
  text-orientation: upright;           /* 字向き＝upright（全文字正立）確定 */
  font-family: "Noto Serif JP", serif; /* 明朝（head で読込済） */
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: .15em; line-height: 1.1; font-weight: 700;  /* height:100% 削除＝内容高さで余白防止 */
  border-left: 1px solid rgba(255, 255, 255, .6);
  padding-left: 24px;
}

/* 右カラム：入れ子grid。写真=右上、リード/ボタン=左、タグ=下右寄せ */
.p-about__body {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 48%);
  grid-template-areas:
    "lead  photo"
    "more  photo"
    "tags  tags";
  column-gap: 40px; row-gap: 12px;
  align-items: start;
}
.p-about__lead { grid-area: lead; line-height: 1.9; font-size: var(--fs-base); margin-top: 200px; }
.p-about__more { grid-area: more; align-self: start; }
/* 写真：右上。紺上辺を超えてはみ出す。白三角の前面（z-index）。
   ★高さは lead+more 行に self-align（縦長固定だと下に紺の余白が出るため）。
   実画像配置時に aspect-ratio と margin-top をカンプ最終調整（(B)）。 */
.p-about__photo {
  grid-area: photo;
  position: relative; z-index: 2;
  align-self: start;            /* 写真が背伸びしないよう内容高さに固定 */
  aspect-ratio: 1172 / 731; 
  margin-top: -40px;            /* 紺上辺を超えて上にはみ出す（実画像時に最終調整） */
  overflow: hidden;
  margin-right: calc(50% - 25vw); /* 第一段階の仮値。実測後に調整 */
}
.p-about__slider { width: 100%; height: 100%; }
.p-about__slider img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* タグ：写真の下・右寄せ。幅を写真側に合わせ 2個ずつ折り返す */
.p-about__tags {
  grid-area: tags; justify-self: end;
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  justify-content: flex-end; max-width: 520px;   /* 2-2-2 折返し用に幅制限 */
  list-style: none;
  padding: 0; margin: 0;
}

/* タグ＝表示のみ・遷移なし。spanで組む */
.p-about__tag {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base);
}
.p-about__tag:hover {
  background-color: #fff;
  color: var(--color-main);
}

/* SP簡略：斜め（白三角）解除・通常紺背景・縦積み（崩れ防止） */
@media (max-width: 1024px) {
  .p-about { padding: 48px 0; }
  .p-about__diagonal { display: none; }                  /* SVG斜めを消す＝斜め解除 */
  .p-about__layout { display: block; }
  .p-about__heading { writing-mode: horizontal-tb; font-size: clamp(22px, 6vw, 30px); text-align: center; } /* 横書き */
  /* 右カラムを素直な縦積みに：写真→リード→ボタン→タグ */
  .p-about__body { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin-top: 28px; }
  .p-about__photo { aspect-ratio: auto; width: 100%; min-width: 0; height: 62vw; min-height: 0; margin-top: 0; margin-right: 0; order: -1; } /* 循環参照回避：aspect-ratio→auto、幅・高さをvw/親基準で固定。margin-rightはPC用grid列基準の値がflexアイテム幅基準に化けるため0にリセット */
  .p-about__lead { margin-top: 0; }                       /* PCの下げ余白を打消し（縦積みでは不要） */
  .p-about__tags { justify-self: auto; justify-content: flex-start; max-width: none; }
}

/* ==========================================================================
   9. §4 NEWS＋中高生体験プログラムバナー（p-news / p-program）
   --------------------------------------------------------------------------
   - PC2カラム（NEWS本体 1fr ＋ バナー 320px）。SPは1カラム縦積み。
   - 見出しは c-heading-top--left（既存・§3で定義済）、ボタンは c-btn--arrow（既存）を流用。
   - NEWS一覧は /news/_list_top.html を SSI include（断片側に p-news__item 等を保持）。
   - p-news__ 系の定義は pages/news.css へ移設済み（2026-09-07・お知らせ移行仕様書）。
     下層ページ（/corporations/news/ 配下）は top.css を読み込まないため、
     記事ページにも適用できるよう移設した。このファイルには p-program のみ残す。
   ========================================================================== */
.p-program { display: block; color: var(--color-gray-900); text-decoration: none; }
.p-program__hd {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  margin-bottom: 12px;
}
.p-program__img { aspect-ratio: 6 / 4; overflow: hidden; background: var(--color-gray-50); } /* 仮バナー枠（実画像配置時は object-fit:cover で覆われる） */
.p-program__img img { width: 100%; height: 100%; object-fit: cover; }
.p-program__body {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 12px;
}
.p-program__text {
  margin-top: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  flex: 1;
}
.p-program__arrow::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f054";
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1em; height: 2.1em; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-main); color: #fff;
  font-size: .8em; line-height: 1;
}
/* ==========================================================================
   10. §2 重要なお知らせバー：カンプ準拠（薄枠＋紺ラベル全高）
   --------------------------------------------------------------------------
   - nav.css の .p-notice 系（基底）を、トップ修飾子 .p-notice--top でのみ上書き。
     nav.css は触らず残置。色はトークン経由・hex直書きなし。
   - 紺背景・白文字・font-weight は nav.css 基底（.p-notice__label）を継承（再宣言しない）。
   - .inner を flex/align-items:stretch＋全周薄枠＋overflow:hidden にし、紺ラベルを全高化。
   ========================================================================== */
/* 外側divの基底 border-top/bottom（画面幅いっぱいの上下線）を打ち消す。nav.cssは触らない */
.p-notice--top { border-top: none; border-bottom: none; margin-top: 30px; }
.p-notice--top .inner {
  display: flex; align-items: stretch;
  padding: 0;                              /* 上下左右0。上下の隙間も除去（余白は子要素側で確保） */
  border: 1px solid var(--color-main);   /* カンプ＝紺枠（gray-200 から変更） */
  border-radius: 0;
  overflow: hidden;
}
.p-notice--top .p-notice__label {
  display: flex; align-items: center; flex-shrink: 0;
  min-width: 220px; padding: 18px 28px; border-radius: 0;
  /* 紺背景・白文字は nav.css 既存を継承（再宣言しない） */
}
.p-notice--top .p-notice__date {
  display: flex; align-items: center; flex-shrink: 0;
  padding-left: 28px; color: var(--color-gray-900);
}
.p-notice--top .p-notice__body {
  display: flex; align-items: center;
  padding: 0 28px;
}
.p-notice--top .p-notice__body a {
  color: var(--color-gray-900); text-decoration: none;
}
.p-notice--top .p-notice__body a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .p-notice--top .inner { flex-direction: column; align-items: stretch; }
  .p-notice--top .p-notice__label { min-width: 0; padding: 12px 20px; }
  .p-notice--top .p-notice__date { padding: 12px 20px 0; }
  .p-notice--top .p-notice__body { padding: 4px 20px 12px; }
}

/* ==========================================================================
   11. §8 オープンキャンパス×2：チャコールパネル方式（SP縦積み）
   ========================================================================== */
.p-oc { padding: 56px 0; }
.p-oc__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.p-oc__banner { display: flex; align-items: stretch; overflow: hidden; text-decoration: none; }
.p-oc__img { width: 55%; flex-shrink: 0; aspect-ratio: 16 / 11; background: var(--color-gray-200); }
.p-oc__img img { width: 100%; height: 100%; object-fit: cover; }
.p-oc__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 24px 28px; background: var(--color-main); color: #fff; }
.p-oc__title { font-weight: var(--fw-bold); font-size: var(--fs-lg); line-height: 1.4; }
@media (max-width: 768px) {
  .p-oc__layout { grid-template-columns: 1fr; }
  .p-oc__banner { flex-direction: column; }
  .p-oc__img { width: 100%; }
}

/* ==========================================================================
   12. §9 写真帯：写真のみ（静的・JS不要）
   --------------------------------------------------------------------------
   - オーバーレイ方式は使わない。.p-stats/__bg/__inner・c-heading-top--white は不使用。
   ========================================================================== */
.p-stats__hero { position: relative; height: clamp(240px, 30vw, 440px); overflow: hidden; }
.p-stats__img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  .p-stats__hero { height: clamp(180px, 40vw, 240px); }
  .p-stats__band { padding: 36px 0; }
}

/* ==========================================================================
   13. §11 関連リンク／SNS：横並びボタン＋薄グレー帯＋小見出し（SP縦積み）
   ========================================================================== */
.p-related-link { padding: 48px 0; background: var(--color-gray-25); }
.p-related-link__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.p-related-link__heading { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-main); margin-bottom: 16px; }
.p-related-link__list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
@media (max-width: 768px) {
  .p-related-link__layout { grid-template-columns: 1fr; gap: 32px; }
}