:root{
  --pageX: clamp(16px, 2vw, 28px);
  --sectionY: clamp(56px, 6vw, 96px);
}

/* fixed header 分 */
.pathways-page{
  padding-top: var(--headerH);
}

/* ===== HERO ===== */
.pw-hero{ padding: 0; }

.pw-hero__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100svh - var(--headerH));

  /* 背景を“1枚”として親に貼る */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 左半分まるごと：半透明白（高さはヒーローと同じ） */
.pw-hero__panel{
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(2px);

  display: flex;
  align-items: flex-start; /* 上寄せ */
  padding-top: clamp(28px, 4vw, 56px);

  border-radius: 0; /* 角丸なし */
}

/* 左テキスト（カード感を消す） */
.pw-hero__text{
  padding: clamp(24px, 4vw, 56px);
  max-width: 720px;

  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  margin: 0;
}

/* 右カラムは“何もしない”でOK */
.pw-hero__img{ min-height: 1px; }

/* Pathways（h1） */
.pw-hero__title{
  margin: 0 0 18px;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.02em;
}

/* Universal / Career Master の2ブロック間 */
.pw-hero__blocks{
  display: grid;
  gap: clamp(22px, 3.2vw, 40px);
}

/* subtitle（タイトルっぽい） */
.pw-hero__subtitle{
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 0 0 clamp(16px, 2vw, 40px);
}

/* body を1行ずつ縦積み */
.pw-hero__body{
  margin: 0;
  display: grid;
  gap: 6px;
}
.pw-hero__body span{
  display: block;
}

/* ===== HERO Responsive ===== */
@media (max-width: 900px){
  .pw-hero__grid{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .pw-hero__img{
    min-height: 42vh; /* 画像が見える高さ確保 */
  }

  .pw-hero__panel{ width: 100%; }
  .pw-hero__text{ max-width: none; }
}

/* =========================
   NEWS（必ず2カラムにする）
   ※program_page.cssの定義をここに移植
========================= */
.program-news{
  padding: clamp(34px, 4vw, 56px) var(--pageX);
}

.annc__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.6vw, 28px);
}

.annc__title{
  margin: 0 0 10px;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.02em;
}

/* 3件分だけ見えて内部スクロール（共通） */
.annc__scroll{
  max-height: 260px;
  overflow: auto;
  padding-right: 6px;
}

.annc__scroll::-webkit-scrollbar{ width: 10px; }
.annc__scroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
.annc__scroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.06);
}

/* =========================
   以降：Pathway Section（あなたのまま）
========================= */
.pw-sec{
  padding: var(--sectionY) var(--pageX);
}

.pw-sec__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #eee;
  background: #fff;
}

.pw-sec__left{
  min-height: clamp(240px, 30vw, 520px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pw-sec__right{
  padding: clamp(18px, 3vw, 44px);
}

.pw-sec__title{
  margin: 0 0 16px;
  font-size: clamp(18px, 2.1vw, 28px);
  line-height: 1.2;
}

.pw-sec__figure{
  margin: 0 0 18px;
}

.pw-sec__figure img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid #eee;
}

.pw-sec__items{
  display: grid;
  gap: 14px;
}

.pw-item{
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.pw-item__title{
  margin: 0 0 8px;
  font-size: 16px;
}

.pw-item__body{
  margin: 0;
  color: #222;
  line-height: 1.7;
}

/* =========================
   Responsive（programと同じ）
========================= */
@media (max-width: 900px){
  .annc__grid{
    grid-template-columns: 1fr;
  }

  .pw-sec__grid{
    grid-template-columns: 1fr;
  }
  .pw-sec__left{ order: 1; }
  .pw-sec__right{ order: 2; }
}

/* ===== HERO：Pathways(上) と 2つの塊(下)を“完全に離す” ===== */
.pw-hero__panel{
  align-items: stretch; /* 高さを使えるようにする（上書き） */
}

.pw-hero__text{
  display: flex;
  flex-direction: column;
  height: 100%; /* ここが大事：中で上下配置できる */
}

.pw-hero__blocks{
  display: flex;            /* 既存のgridを上書き */
  flex-direction: column;
  flex: 1;                  /* 空き高さを持たせる */
}

/* 上：Universal/Career のタイトル（今の位置） */
.pw-hero__blockTitles{
  display: grid;
  gap: clamp(22px, 3.2vw, 40px); /* 2タイトルの間 */
}

/* 下：中身（リスト）を“下に完全に”落とす */
.pw-hero__blockBodies{
  margin-top: auto;                       /* ←これが肝：下へ */
  padding-top: clamp(36px, 6vw, 140px);   /* ←Pathways/タイトル群との距離 */
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
}

/* Pathways（h1）は上、2つの塊は下へ */
.pw-hero__panel{
  align-items: stretch; /* 高さを使う */
}

.pw-hero__text{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 2つの塊を“下に押し下げる” */
.pw-hero__blocks{
  margin-top: auto;                   /* ←これが肝 */
  padding-top: clamp(28px, 6vw, 140px); /* h1との距離 */
}