/* ===== program page base ===== */
.program-page{
  padding-top: var(--headerH);
}

/* ===== TOP 50/50 ===== */
.program-hero__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100svh - var(--headerH));
}

.program-hero__img{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.program-hero__panel{
  background: #1437c7; /* 単色 */
  color: #fff;
  display: flex;
  align-items: center;
}

.program-hero__text{
  padding: clamp(24px, 4vw, 56px);
  max-width: 720px;
}

.program-hero__title {
  margin: 0 0 20px; /* 下（Entrepreneurコース等）との間隔を少し広めに調整 */
  line-height: 1.2;
  letter-spacing: 0.01em;
  font-weight: 800;
  display: flex;    /* gridからflexに変更 */
  flex-direction: column; /* 縦並び */
}

/* 1行目：Glocal Diploma / Advanced Diploma */
.program-hero__title span:first-child {
  font-size: clamp(28px, 4.2vw, 56px); 
  margin-bottom: 8px; /* 間隔を少し詰め、一体感を出す */
}

/* 2行目：UK/AUS大学学士コース１・２年目 */
.program-hero__title span:last-child {
  font-size: 0.75em;   /* ★ 0.55から0.75へ。これでコース名より一回り大きくなります */
  font-weight: 700;    /* ★ 500から700へ。タイトルとしての力強さを出します */
  line-height: 1.3;
  opacity: 1;          /* 透過をやめてハッキリ見せる */
}

.program-hero__subLink{
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding: 2px 0;
  width: fit-content;
}

.program-hero__subLink:hover{
  text-decoration: underline;
}

.program-hero__sub{
  margin: 0;
  line-height: 1.7;
  opacity: 0.95;
  font-size: clamp(14px, 1.5vw, 18px);
  display: grid;
  gap: 2px; /* 3行 */
}
.program-hero__sub span{ display:block; }

/* ===== NEWS 2列 ===== */
.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;
}

.annc__list{
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.annc__item{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid #eee;
}

.annc__item:first-child{ border-top: 0; }

.annc__date{
  color: #666;
  font-size: 13px;
}

.annc__link{
  color: #111;
  text-decoration: none;
}
.annc__link:hover{ text-decoration: underline; }
.annc__text{ color:#111; }

/* ===== About（横長画像＋中央タイトル） ===== */
.about-hero{
  width: 100%;
  min-height: clamp(220px, 30vw, 420px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: grid;
  place-items: center;
}

.about-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.25);
}

.about-hero__title{
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: clamp(22px, 3.2vw, 44px);
  text-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.about-inner{
  padding: clamp(34px, 4vw, 56px) var(--pageX);
}

/* 4要素：2列→1列 */
.about-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.6vw, 28px);
}

.about-card{
  overflow: visible;
}

/* タイトル（単色四角） */
.about-card__label{
  background: #2e44d6;
  color: #fff;
  padding: 12px 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.about-card__body{
  padding: 14px;
  line-height: 1.75;
  color: #222;
  font-size: 14px;
}

/* ===== responsive ===== */
@media (max-width: 900px){
  .program-hero__grid{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .program-hero__img{ min-height: 42vh; }

  .annc__grid{ grid-template-columns: 1fr; }
  .annc__item{ grid-template-columns: 96px 1fr; }

  .about-grid{ grid-template-columns: 1fr; }
}

/* ===== News 2カラム（Announcement / Events & News） ===== */
.annc__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 24px var(--pageX);
}

@media (max-width: 900px){
  .annc__grid{ grid-template-columns: 1fr; }
}

/* ===== yamada news layout ===== */
.yamada-newsList{
  list-style: none;
  margin: 0;
  padding: 0;
}

.yamada-newsItem{
  display: grid;
  grid-template-columns: 110px 1fr; /* サムネ / 右テキスト */
  gap: 14px;
  padding: 12px 14px;
  border-top: 1px solid #eee;
  align-items: start;
}

.yamada-newsItem:first-child{ border-top: 0; }

.yamada-newsThumb img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

.yamada-newsMeta{
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}

.yamada-newsDate{
  color: #666;
  font-size: 13px;
}

.yamada-newsTitle a{
  color: #111;
  text-decoration: none;
  font-weight: 700;
}

.yamada-newsTitle a:hover{
  text-decoration: underline;
}

.yamada-newsExcerpt{
  margin-top: 6px;
  color: #444;
  font-size: 13px;
  line-height: 1.65;
}

/* スマホ：サムネ上、文字下 */
@media (max-width: 520px){
  .yamada-newsItem{
    grid-template-columns: 1fr;
  }
  .yamada-newsThumb{
    max-width: 220px;
  }
}

/* ===== News: 3件分だけ見えて内部スクロール ===== */

/* だいたい「3件分」の高さ。必要なら数値調整 */
.annc__scroll{
  max-height: 260px;   /* ←ここを増減して3件ちょうどに近づける */
  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);
}


/* 画像2枚コンテナ：本文と同じ左右余白で揃える */
.about-card__imgs{
  padding: 0 14px;            /* ←本文と同じ */
  margin: 12px 0 12px;        /* 上下だけ */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ←狭くても潰れにくい */
  gap: 12px;
}

.about-card__img{
  margin: 0;
}

.about-card__img img{
  width: 100%;
  height: auto;      /* 比率維持 */
  display: block;
  border-radius: 0px;
  border: 1px solid #eee;
}

/* 画像1枚のときは大きく（1カラム） */
.about-card__imgs:has(.about-card__img:only-child){
  grid-template-columns: 1fr;   /* ←1枚なら1列に */
}

/* 1枚のときは画像の最大幅を上げたいなら（任意） */
.about-card__imgs:has(.about-card__img:only-child) .about-card__img img{
  width: 100%;
  height: auto;
}

/* 接続先大学：ロゴグリッド（4列 → 2列） */
.about-card__logos{
  padding: 14px;                 /* body と同じ余白感 */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}

.about-card__logo{
  display: grid;
  place-items: center;
}

.about-card__logo img{
  width: 100%;
  max-width: 160px;   /* ロゴが伸びすぎないように（任意） */
  height: auto;       /* 比率維持 */
  display: block;
}

/* 画面が狭い時：2列×2 */
@media (max-width: 900px){
  .about-card__logos{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* はみ出し防止（保険） */
.about-card,
.about-card__body{
  min-width: 0;
  overflow-wrap: anywhere;
}

/* カードが1列になった時（あなたのブレイクポイントに合わせて）画像も縦並び */
@media (max-width: 900px){
  .about-card__imgs{
    grid-template-columns: 1fr;
  }
}

/* =========================
   職域セクション
========================= */

.area-sec{
  padding: var(--sectionY) var(--pageX);
  margin-top: 24px;     /* ★セクション間の隙間 */
}

.area-sec:first-of-type{
  margin-top: 0;        /* 最初だけ詰める */
}

/* 上（hero）：左画像 / 右パネル */
.area-hero__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(360px, 48vw, 520px);
  border-radius: 0px;
  overflow: hidden;
}

.area-hero__img{
  background-size: cover;
  background-position: center;
  min-height: 280px;
}

.area-hero__panel{
  background: #F28C28; /* ここはサイト基調色に合わせて */
  color: #fff;
  display: grid;
  place-items: center;
  padding: clamp(22px, 3vw, 36px);
}

.area-hero__text{
  max-width: 560px;
  width: 100%;
}

.area-hero__title{
  margin: 0 0 14px;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.area-hero__body{
  margin: 0;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.9;
  opacity: 0.95;
}

/* 下：カード3つ（2列→1列） */
.area-inner{
  margin-top: clamp(18px, 2.4vw, 28px);
}

.area-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
}

.area-card{
  background: #fff;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.area-card__label{
  padding: 14px 16px;
  background: #F28C28; /* ラベルの色も合わせて */
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.area-card__imgs{
  padding: 14px 16px 18px;
}

.area-card__img{
  margin: 0;
}

.area-card__img img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0px;
}

.area-card__body{
  padding: 14px 16px 18px;
  line-height: 1.9;
  font-size: 15px;
}

/* レスポンシブ：1列 */
@media (max-width: 900px){
  .area-hero__grid{
    grid-template-columns: 1fr;
  }
  .area-cards{
    grid-template-columns: 1fr;
  }
}