/* ヘッダー全体：中身を横に並べる */
.site-header {
  display: flex;          /* 子どもを横並びにする */
  align-items: center;    /* 縦方向の真ん中にそろえる */
  height: 104px;          /* 余白指示どおり */
  padding: 0 80px;        /* 上下0、左右80px */
    position: sticky;          /* 追加：スクロールしても上にくっつく */
  top: 0;                    /* 追加：画面のいちばん上で止まる */
  z-index: 10;               /* 追加：写真などより手前に */
  background-color: #fff;    /* 追加：下の内容が透けないように */
}

/* ロゴの大きさ */
.site-logo img {
  width: 362px;   /* Figmaで見たロゴの幅 */
}

.site-logo {
  flex-shrink: 0;        /* ロゴを縮ませない */
}

/* メニュー：右に寄せる */
.global-nav {
  margin-left: auto;      /* 左側の余白を最大まで広げて、右に押しやる */
}

/* メニューの中の項目も横並びにする */
.global-nav ul {
  display: flex;
  gap: 40px;              /* 項目どうしの間隔 */
}

/* 資料請求ボタンとメニューの間をあける */
.btn-request {
  margin-left: 40px;
}

body {
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  color: #191919;
}

/* メニューの文字 */
.global-nav a {
  font-size: 16px;
  font-weight: 500;
  color: #191919;
  white-space: nowrap;   /* メニューの文字を折り返さない（既存の指定に追記） */
}

/* 資料請求ボタン：紺の角丸 */
.btn-request {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 999px;   /* 大きくすると両端が丸くなる */
  background-color: #1E3E6E;
  color: #fff;
  font-size: 16px;
  white-space: nowrap;   /* ボタンの文字を折り返さない（既存の指定に追記） */
  flex-shrink: 0;        /* ボタンを縮ませない（既存の指定に追記） */
}

.global-nav a:hover {
  color: #16345C;          /* やや濃いネイビー */
}

.btn-request:hover {
  background-color: #E8D9A7;
  color: #191919;
}

/* 色がふわっと変わるように */
.global-nav a,
.btn-request {
  transition: 0.3s;
}

/* ハンバーガーボタン：PCでは隠す */
.menu-btn {
  display: none;
}

/* ===== メインビジュアル ===== */
.hero {
  position: relative;      /* 文字を重ねるときの「基準」になる */
}

.hero__img {
  display: block;
  width: 100%;
  height: 696px;
  object-fit: cover;       /* 縦横比を保ったまま、枠いっぱいに切り抜く */
}

.hero__text {
  position: absolute;      /* .hero を基準に、好きな位置に置く */
  right: 80px;             /* 右から80px */
  bottom: 64px;            /* 下から64px */
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero__en {
  font-size: 20px;
}

.hero__title {
  font-size: 48px;
  font-weight: 500;
}

.hero__lead {
  font-size: 18px;
}

.hero__btns {
  display: flex;
  gap: 42px;
  margin-top: 32px;
}

.hero__btn {
  display: flex;
  align-items: center;
  justify-content: center;  /* 文字をボタンの真ん中に */
  width: 274px;
  height: 52px;
  border-radius: 999px;
  background-color: #1E3E6E;
  color: #fff;
  font-size: 16px;
  text-shadow: none;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;                 /* 上下左右0＝.hero全体を覆う */
    background:
    linear-gradient(to bottom, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(to right,  rgba(255,255,255,0.4)  0%, rgba(255,255,255,0) 40%),
    linear-gradient(to top,    rgba(0,0,0,0.45)      0%, rgba(0,0,0,0)       50%);

  pointer-events: none;     /* モヤがクリックの邪魔をしないように */
  
}

/* ===== セクション共通の見出し ===== */
.section-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 32px;
}

/* ===== NEWS ===== */
.news {
  padding: 64px 20px;          /* 上下64px、左右20px */
  background-color: #F8F9FB;   /* 薄いグレー（Figmaの色スタイル） */
}

.news__list {
  max-width: 640px;            /* 横に広がりすぎないように */
  margin: 0 auto;              /* 左右autoで真ん中に寄せる */
}

.news__item {
  display: flex;               /* 日付とタイトルを横並び */
  gap: 24px;
  font-size: 16px;
  line-height: 30px;
}

.news__date {
  flex-shrink: 0;              /* 日付は縮ませない */
}

.news__link {
  color: #191919;
}

.news__link:hover {
  color: #16345C;
  text-decoration: underline;
}

.news__more {
  text-align: center;
  margin-top: 24px;
}

.news__more a {
  color: #191919;
}

/* ===== PICK UP ===== */
.pickup {
  padding: 64px 80px;
}

.pickup__list {
  display: flex;
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
}

.pickup__item {
  flex: 1;                   /* 3枚で幅を均等に分ける */
}

.pickup__card {
  display: block;            /* <a> を箱として扱う */
  color: #191919;
}

.pickup__num {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.pickup__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;       /* 横3：縦2の比率に固定 */
  object-fit: cover;
}

.pickup__title {
  margin-top: 12px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

.pickup__text {
  margin-top: 4px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
}

.pickup__card:hover .pickup__img {
  opacity: 0.8;              /* カードに乗せると写真が少し薄くなる */
}

.pickup__more {
  text-align: center;
  margin-top: 32px;
}

.pickup__more a {
  color: #191919;
}

/* ===== FACULTY ===== */
.faculty {
  padding: 64px 80px;
  background-color: #F8F9FB;
}

.faculty__list {
  display: flex;
  flex-wrap: wrap;                        /* 入りきらない分は次の段へ */
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
}

.faculty__item {
  width: calc((100% - 32px * 2) / 3);     /* 3枚ぶんの幅を計算 */
}

.faculty__card {
  display: block;
  background-color: #fff;
  color: #191919;
}

.faculty__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.faculty__name {
  display: block;
  padding: 12px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

.faculty__card:hover .faculty__img {
  opacity: 0.8;
}

/* ===== フッター ===== */
.site-footer {
  background-color: #1E3E6E;     /* 紺。Figmaのフッターの色に合わせて変更 */
  color: #fff;
  padding: 48px 80px 24px;       /* 上48px、左右80px、下24px */
}

.site-footer a {
  color: #fff;                   /* フッターの中のリンクは全部白に */
}

.footer__top {
  display: flex;
  justify-content: space-between;   /* 左と右の端に分ける */
  align-items: flex-start;
}

.footer__name {
  font-size: 16px;
  font-weight: 700;
}

.footer__address,
.footer__en {
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.8;                  /* 少しだけ薄くして、大学名を目立たせる */
}

.footer__nav {
  display: flex;
  gap: 24px;
  font-size: 13px;
}

.footer__sns {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.footer__sns img {
  width: 24px;
}

.footer__bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);   /* 半透明の白い線 */
  text-align: center;
}

.footer__links {
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 12px;
  flex-wrap: wrap;
}

.footer__note {
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.7;
}

.footer__copy {
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.7;
}

/* スマホだけで見せる項目は、PCでは隠す */
.sp-only {
  display: none;
}

/* ページ内リンクで飛んだとき、ヘッダーの高さぶん下で止める */
section[id],
footer[id] {
  scroll-margin-top: 104px;
}

/* ページ内リンクで、なめらかにスクロールする */
html {
  scroll-behavior: smooth;
}

/* ===== 少し狭いPC（1200px以下）===== */
@media (max-width: 1200px) {
  .site-header {
    padding: 0 40px;
  }
  .global-nav ul {
    gap: 24px;
  }
  .btn-request {
    margin-left: 24px;
  }
}

/* ===== タブレット（1024px以下）：ハンバーガーに切り替え ===== */
@media (max-width: 1024px) {
  .global-nav,
  .btn-request {
    display: none;
  }

  .menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    margin-left: auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .menu-btn span {
    display: block;
    height: 2px;
    background-color: #1E3E6E;
  }

    /* 線が動くときに、ふわっと変化させる */
  .menu-btn span {
    transition: transform 0.3s, opacity 0.3s;
  }

  /* is-open のとき：1本目を下にずらして、右下がりに傾ける */
  .site-header.is-open .menu-btn span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  /* is-open のとき：2本目（真ん中）を消す */
  .site-header.is-open .menu-btn span:nth-child(2) {
    opacity: 0;
  }

  /* is-open のとき：3本目を上にずらして、逆向きに傾ける */
  .site-header.is-open .menu-btn span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

    .pickup {
    padding: 64px 40px;
  }

    .faculty {
    padding: 64px 40px;
  }

  /* is-open のときだけメニューを表示 */
  .site-header.is-open .global-nav {
    display: block;
    position: absolute;
    top: 100%;                /* ヘッダーのすぐ下 */
    right: 0;
    width: 240px;
    padding: 24px;
    background-color: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }

  /* メニューの項目を縦に、右寄せで並べる */
  .global-nav ul {
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
  }

  .sp-only {
    display: block;           /* スマホでは表示 */
  }
}

/* ===== スマホ（767px以下）===== */
@media (max-width: 767px) {

  .site-header {
    height: 64px;
    padding: 0 20px;      /* スマホの左右余白 */
  }

  .site-logo img {
    width: 200px;         /* スマホでのロゴの幅 */
  }

    /* メインビジュアル（スマホ） */
  .hero__img {
    height: 400px;
  }

  .hero__text {
    left: 20px;        /* 左右20pxの余白の中に収める */
    right: 20px;
    bottom: 24px;
  }

  .hero__en {
    font-size: 14px;
  }

  .hero__title {
    font-size: 28px;
  }

  .hero__lead {
    font-size: 13px;
  }

  .hero__btns {
    gap: 16px;
    margin-top: 20px;
  }

  .hero__btn {
    flex: 1;           /* 2つのボタンで幅を半分ずつ分ける */
    width: auto;       /* PCの274pxを解除 */
    height: 44px;
    font-size: 13px;
    }

    /* NEWS（スマホ）：日付をタイトルの上に */
  .news__item {
    flex-direction: column;
    gap: 0;
    margin-bottom: 12px;
    font-size: 14px;     /* 追加 */
    line-height: 1.6;    /* 追加 */
  }

  .news__date {
    font-size: 12px;
  }

    /* 4件目以降を隠す */
  .news__item:nth-child(n+4) {
    display: none;
  }

    /* PCだけで見せる部分を隠す */
  .pc-only {
    display: none;
  }

    .pickup {
    padding: 64px 20px;
  }

  .pickup__list {
    flex-direction: column;  /* 縦1列に */
    gap: 32px;
  }

    .faculty {
    padding: 64px 0;                      /* カードを画面の端まで流すため、左右0 */
  }

  .faculty__list {
    flex-wrap: nowrap;                    /* 折り返さず1列に */
    overflow-x: auto;                     /* はみ出した分は横スクロール */
    scroll-snap-type: x mandatory;        /* スクロールが止まるとき、カードにピタッと合わせる */
    gap: 16px;
    padding: 0 20px;
  }

  .faculty__item {
    flex: 0 0 75%;                        /* 1枚を画面の75%の幅に固定 */
    scroll-snap-align: center;            /* カードの真ん中で止まる */
  }

    .site-footer {
    padding: 40px 20px 20px;
  }

  .footer__top {
    flex-direction: column;      /* 左右に分けていたのを縦に */
    gap: 24px;
  }

    section[id],
  footer[id] {
    scroll-margin-top: 64px;
  }
}