/* CSSの上部に追記：サイト全体のすべてのリンクの下線をあらかじめリセットする */
a {
  text-decoration: none;
  color: inherit; /* リンク文字が勝手に青色や紫色になるのをリセット */
}

/* もし、通常の文章内のリンク（テキストリンク）だけに下線をつけたい場合の設定 */
/* 今回のカードのようなデザイン要素には影響しなくなります */
main p a {
  text-decoration: underline;
}

/* ===============================
  デザインシステム（変数）
=============================== */
:root {
  --color-main: #7FA32F;         /* 学芸大学様のプライベートグリーン */
  --color-accent: #9BC23C;
  --color-dark: #1A2506;          /* 文字などの引き締め用ダークカラー */
  --color-bg: #F8FAFC;
  --color-text: #2D3748;          /* 漆黒からモダンなダークグレーへ変更して可読性アップ */
  --color-white: #ffffff;
  --color-muted: #64748B;
  --color-border: #E2E8F0;

  /* 🛠️ フォント設定を元のシンプルな組み合わせに戻しました */
  --font-sans: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 108px;

  --radius: 0px;                  
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow: 0 10px 30px rgba(26, 37, 6, 0.06); 
  --transition: 0.35s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* ===============================
  ベース
=============================== */
body.site {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans); /* 全体を統一したゴシック体に */
  line-height: 1.8;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* コンテナ */
.container {
  max-width: 1200px; 
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md);
}

/* セクションタイトル */
.section {
  padding: var(--space-md) 0;
}

.section__title {
  font-family: var(--font-sans); /* ゴシック体に変更 */
  font-size: 32px;
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--space-md);
  letter-spacing: 0.1em;
}

.section__title::after {
  content: "";
  width: 40px;
  height: 3px;
  background: var(--color-main);
  display: block;
  margin-top: var(--space-xs);
}

/* ==========================================
  📦 全ページ共通：メインコンテンツ＆ローダー制御（バグ修正・決定版）
========================================== */

/* 1. メイン領域のベース設定（💡ここではopacity: 0にしない！） */
.main-content {
  position: relative;
  min-height: 500px; /* 読み込み前の画面の潰れ防止 */
}

/* 📌【新規追加】メインの中身（ローダー以外のコンテンツ要素）を最初は透明にして下げる */
/* これにより、ローダーとスピナーを隠さずに、後ろのコンテンツだけを準備状態にできます */
.main-content > *:not(.main-loader) {
  opacity: 0;
  transform: translateY(20px);
  /* じわ〜っと浮き上がるためのアニメーション速度 */
  transition: opacity 3.0s cubic-bezier(0.22, 1, 0.36, 1), 
              transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 📌【新規追加】読み込みが完了したら、中身を一斉にふわっと表示させる */
.main-content.content-ready > *:not(.main-loader) {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 2. ローダー背景（💡最初から100%くっきり見せる） */
.main-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* ページを覆うクリーンな白 */
  z-index: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* ローダー自体が消える時のスピード（0.6秒） */
  transition: opacity 0.6s ease, visibility 0.6s ease;
  opacity: 1;
  visibility: visible;
}

/* 3. 読み込み完了後にローダーを消す設定 */
.main-loader.is-loaded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* 4. 中央のスピナー配置（スクロール追従型） */
.main-loader__inner {
  text-align: center;
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 510; /* 白い背景よりさらに前面へ */
}

/* くるくる回るスピナー（円形） */
.main-loader__spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #1e3a8a; /* 大学のテーマカラー（紺） */
  border-radius: 50%;
  animation: spinMainLoader 0.8s infinite linear;
}

/* Loading...のテキスト */
.main-loader__text {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  color: #64748b;
  letter-spacing: 0.05em;
  margin: 0;
}

@keyframes spinMainLoader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ===============================
  ヘッダー & ドロップダウンナビ
=============================== */
.header {
  /* 🛠️ 透過を無くし、ロゴが透けないように完全な「白色」に変更しました */
  background: var(--color-white); 
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.header__logo img {
  height: 55px; 
  display: block;
}

.nav__menu {
  list-style: none;
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
  padding: 10px 0;
}

/* メインリンク */
.nav__main {
  display: block;
  font-family: var(--font-sans); /* ゴシック体に変更 */
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
  cursor: pointer;
  color: var(--color-dark);
  transition: var(--transition);
}

.nav__main small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

/* サブメニュー */
.nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(15px); 
  background: var(--color-white);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  list-style: none;
  padding: 16px 0;
  min-width: 220px;
  border-radius: var(--radius);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  z-index: 100;
}

.nav__submenu li {
  padding: 0;
}

.nav__submenu a {
  display: block;
  padding: 10px 24px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  transition: var(--transition);
}

.nav__submenu a:hover {
  background: rgba(127, 163, 47, 0.08);
  color: var(--color-main);
  padding-left: 28px; 
}

/* ホバー時の表示制御 */
.nav__item:hover .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(5px);
}

.nav__item:hover .nav__main {
  color: var(--color-main);
}

/* ==========================================
  🖨️ 印刷時のレイアウト崩れ・ロゴのズレ防止設定
========================================== */
@media print {
  /* 1. ヘッダーやロゴまわりの配置を印刷向けに固定する */
  .header {
    position: static !important; /* スクロール追従などを解除 */
    width: 100% !important;
  }
  
  .header__inner {
    display: flex !important;
    justify-content:间-between !important; /* 必要に応じてロゴとメニューの間隔を再設定 */
    align-items: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .header__logo {
    position: static !important;
    transform: none !important; /* 画面用の微調整をリセット */
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 200px; /* 🛈 印刷時に大きすぎないようサイズを制限（要調整） */
  }

  .header__logo img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 2. 印刷に不要な「メニュー開閉ボタン」などは非表示にする */
  .nav-toggle,
  .main-loader,
  .interview-nav {
    display: none !important;
  }
}

/* ==========================================
  📱 スマホ用ハンバーガーメニュー（レスポンシブ）
========================================== */

/* 通常（PCサイズ）時はスマホ用ボタンを隠す */
.nav-toggle {
  display: none;
}

/* 画面幅 768px 以下のスマホサイズに適用 */
@media (max-width: 768px) {
  
  /* ヘッダー内の要素の配置を調整 */
  .header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1001; /* メニューより前面に配置 */
  }

  /* ハンバーガーボタンの出現 */
  .nav-toggle {
    display: block;
    position: relative;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1010;
  }

  /* 三本線の共通スタイル */
  .nav-toggle__bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1e3a8a; /* 大学のテーマカラー（紺） */
    transition: all 0.3s ease;
  }

  /* 三本線のそれぞれの初期位置 */
  .nav-toggle__bar:nth-child(1) { top: 0; }
  .nav-toggle__bar:nth-child(2) { top: 11px; }
  .nav-toggle__bar:nth-child(3) { bottom: 0; }

  /* 💡 メニューが開いた時（JSでクラスが付与された時）の「✕」アニメーション */
  .nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
  }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
    opacity: 0; /* 真ん中の線を消す */
  }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }

/* ナビゲーションメニューをスマホ用に改造 */
  .nav {
    position: fixed;
    top: 0;
    right: -100vw;
    width: 100vw;
    box-sizing: border-box;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    padding: 100px 24px 40px;
    overflow-y: auto;          /* 💡縦スクロールを有効にして採用情報の下まで見せる */
    -webkit-overflow-scrolling: touch;
    transition: right 0.4s ease;
    z-index: 1000;
  }


  /* 💡【新しく追加】親要素の横幅を100%いっぱいに固定します */
  .nav__item {
    width: 100%;
    box-sizing: border-box;
    padding: 0; /* PC版の余白をリセット */
  }

  /* 💡 メニューが開いた時、画面内に滑り込ませる */
  .nav.is-open {
    right: 0;
  }

  /* メニューの中身を縦並びにする */
  .nav__menu {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* 💡【重要】サブメニュー（子階層）の初期状態をスマホ用にリセット */
  .nav__submenu {
    position: static; 
    opacity: 1 !important;        /* 強制表示 */
    visibility: visible !important; /* 強制表示 */
    box-shadow: none;
    left: auto;       
    transform: none !important;   /* PC版の「左に50%ずらす」を完全に消す */
    width: 100%;       
    box-sizing: border-box; 
    padding: 0;                   /* 上下の余白をリセット */
    padding-left: 16px;           /* 左側に少しだけインデントを入れる */
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: none;
    
    /* 動きを完全に止める */
    transition: none !important;
    animation: none !important;
  }

  /* 💡【超重要】タップ（ホバー）した時に左にすっ飛んでいくPC版の動きを完全無効化 */
  .nav__item:hover .nav__submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;   /* ←これでクリックしても左に移動しなくなります */
  }

  /* 子階層のリンクのパディングをスマホ用に調整 */
  .nav__submenu a {
    padding: 4px 0;
  }

  /* 背景スクロール固定用（メニュー開閉時に使用） */
  body.nav-open {
    overflow: hidden;
  }
}

/* ===============================
  ヒーロービジュアル（フェード仕様）
=============================== */
.hero {
  position: relative;
  height: 90vh;
  overflow: hidden;
  background: #000;
}

.hero__slides {
  position: absolute;
  width: 100%;
  height: 100%;
}

.hero__slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 1.5s ease-in-out;
}

.hero__slide:nth-child(1) { background-image: url("image1.jpg"); }
.hero__slide:nth-child(2) { background-image: url("image2.jpg"); }
.hero__slide:nth-child(3) { background-image: url("image3.jpg"); }
.hero__slide:nth-child(4) { background-image: url("image4.jpg"); }
.hero__slide--active { opacity: 0.75; } 

.hero__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%);
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  padding-top: 12vh;
}

.hero__sub {
  font-family: var(--font-sans); /* ゴシック体に変更 */
  letter-spacing: 0.2em;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--color-bg);
}

.hero__title {
  font-family: var(--font-sans); /* ゴシック体に変更 */
  font-size: 56px;
  line-height: 1.5;
  margin-bottom: var(--space-md);
  font-weight: 700;
  text-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.hero__text {
  max-width: 600px;
  margin-bottom: var(--space-lg);
  font-size: 16px;
  opacity: 0.9;
}

.hero__buttons {
  display: flex;
  gap: var(--space-sm);
}

/* ===============================
  ボタンコンポーネント
=============================== */
.btn {
  display: inline-block;
  padding: 16px 36px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.05em;
}

.btn--primary {
  background: var(--color-white);
  color: var(--color-main);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  background: var(--color-main);
  color: var(--color-white);
}

.btn--outline {
  border: 2px solid var(--color-white);
  color: var(--color-white);
}

.btn--outline:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.3);
}

/* ===============================
  NEWS
=============================== */
.news {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
}

.news__list {
  margin-top: var(--space-sm);
}

.news__item-text {
  font-size: 15px;
  margin-bottom: var(--space-xs);
  border-bottom: 1px dashed var(--color-border);
  padding-bottom: var(--space-xs);
}

.news__date {
  font-family: var(--font-sans); /* ゴシック体に変更 */
  font-weight: 700;
  color: var(--color-main);
  margin-right: var(--space-sm);
}

/* ===============================
  MESSAGE (学長セクション)
=============================== */
.message__visual {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 24 / 11;
  box-shadow: var(--shadow);
  background: #000;
}

.message__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.message__visual:hover .message__image {
  transform: scale(1.03);
}

.message__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 40%); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 10%;
  color: #fff;
  z-index: 2;
}

.message__label {
  font-family: var(--font-sans); /* ゴシック体に変更 */
  font-size: 12px;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-xs);
  color: var(--color-accent);
}

.message__title {
  font-family: var(--font-sans); /* ゴシック体に変更 */
  font-size: 38px;
  margin: 0 0 var(--space-lg) 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ===============================
  INTERVIEW (Swiperスライダー最適化)
=============================== */
.interview__slider-wrapper {
  position: relative;
  margin-top: var(--space-md);
  padding: 0 20px;
}

.interview__card.swiper-slide {
  height: auto; 
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: var(--transition);
}

.interview__card.swiper-slide:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(26, 37, 6, 0.12);
}

.interview-card__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000;
}

.interview-card__image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.15);
  opacity: 0;
  transition: var(--transition);
  z-index: 1;
}

.interview-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--transition);
}

.interview__card:hover .interview-card__image {
  transform: scale(1.05);
}

.interview__card:hover .interview-card__image-wrapper::after {
  opacity: 1;
}

.interview-card__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.interview-card__meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.meta-dept {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.dept-academic { background: #C63626; }
.dept-admin    { background: #08953E; }
.dept-finance  { background: #076785; }

.interview-card__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0 0 var(--space-xs) 0;
}

.interview-card__excerpt {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}

/* スライダー操作矢印ボタン */
.slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  font-weight: bold;
  color: var(--color-dark);
}

.slider__btn:hover {
  background: var(--color-main);
  color: var(--color-white);
  border-color: var(--color-main);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.slider__btn--prev { left: -25px; }
.slider__btn--next { right: -25px; }

/* ===============================
  SUMMARY (下部ナビグリッド)
=============================== */
.summary__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.summary-card {
  display: block;
  background: var(--color-white);
  padding: 40px var(--space-md);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
  border-top: 3px solid transparent; 
}

.summary-card:hover {
  transform: translateY(-6px);
  border-top-color: var(--color-main);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.summary-card__label {
  font-family: var(--font-sans); /* ゴシック体に変更 */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-main);
  margin-bottom: var(--space-xs);
}

.summary-card__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm) 0;
}

.summary-card__text {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.6;
}

/* ==========================================
  🐾 フッター（京都大学インスパイア・完全一体型）
========================================== */

/* 1. フッター全体のベース（既存の背景色） */
.footer__top {
  background: #1E293B; 
  color: var(--color-white);
  margin-top: 20px;
  padding: 70px 0; /* 上下にゆとりを持たせる */
}

/* 💡 PC版：左（住所）と右（ナビ）を横並びにするための大枠 */
.footer__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

/* 📌 左側：大学名・住所エリアの設定（幅を少し狭めてどっしり構える） */
.footer__info {
  width: 25%;
}

.footer__title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px 0;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.footer__address {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* 📌 右側：4列のナビゲーション（残りの広いスペースを4等分する） */
.footer__nav {
  width: 80%;
  display: flex;
  justify-content: space-between;
  gap: 25px;
}

.footer__nav-block {
  flex: 1;
}

/* 親カテゴリタイトル */
.footer__nav-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff; /* 京大のような洗練されたアクセントカラー */
  border-bottom: 1px solid #334155; /* 細い線にしてシャープに */
  padding-bottom: 8px;
  margin: 0 0 16px 0;
  letter-spacing: 0.05em;
}

/* 子階層リスト */
.footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__nav-list a {
  font-size: 13px;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.4;
}

.footer__nav-list a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* 2. 最下部コピーライトエリア（既存のまま） */
.footer__bottom {
  background: #0F172A;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 10px 0;
  font-size: 12px;
  font-family: var(--font-sans);
}


/* ==========================================
  📱 スマホサイズ（768px以下）のレイアウト調整
========================================== */
@media (max-width: 768px) {
  .footer__top {
    padding: 50px 20px; /* スマホ時の全体の左右余白 */
  }

  /* 横並びを解除して、上から下に縦並びにする */
  .footer__wrapper {
    flex-direction: column;
    gap: 40px;
  }

  /* スマホ時は幅100%に広げる */
  .footer__info {
    width: 100%;
  }

  .footer__title {
    font-size: 18px;
  }

  /* 4列横並びを、スマホ用に見やすい「2列×2行」の格子状に切り替える */
  .footer__nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }

  .footer__nav-title {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .footer__nav-list {
    gap: 10px;
  }

  .footer__nav-list a {
    font-size: 13px;
    display: block;
    padding: 2px 0;
  }
}

/* ===============================
  レスポンシブ対応
=============================== */
@media (max-width: 1024px) {
  .hero__title { font-size: 42px; }
  .nav__menu { gap: 20px; }
}

@media (max-width: 768px) {
  .section { padding: var(--space-lg) 0; }
  
  .header__inner {
    flex-direction: row; 
    justify-content: space-between;
    padding: 10px 0;
  }
  

  .hero { height: 70vh; }
  .hero__content { padding-top: 12vh; }
  .hero__title { font-size: 32px; }
  .hero__text { font-size: 14px; }
  .hero__buttons { flex-direction: column; gap: 12px; }
  .btn { padding: 14px 24px; width: 100%; box-sizing: border-box; }

  
  .message__visual {
    aspect-ratio: 4 / 3; /* 💡スマホ用に高さを出す */
  }

  .message__overlay {
    padding: var(--space-md); 
    align-items: center;       
    text-align: center;
  }

  /* 💡ここを変更：スマホの時だけタイトルを表示しない */
  .message__title {
    display: none;
  }

  .message__overlay .btn {
    width: auto;
    min-width: 160px;
    margin-top: 60px; /* 💡ここを追加！数字を大きくするほどボタンが下に下がります */
  }
 

  .summary__grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .slider__btn { display: none; }
  .interview__slider-wrapper { padding: 0; }
}

/* ==========================================
  🛠️ FEATURE（東京学芸大学の特色）追加スタイル
  京都大学サイトを意識した横並び・交互レイアウト
========================================== */

/* リード文セクションの調整 */
.section--lead {
  padding-bottom: 0;
}
.container--narrow {
  max-width: 1000px;
  margin: 0 auto;
}

/* 各特色行（1カラムずつのリッチブロック） */
.feature-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg); 
  margin-top: var(--space-md);
}

.feature-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg); /* 画像とテキストの隙間 */
  background: var(--color-white);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}

/* 京都大学のように、偶数番目（2個目、4個目）の要素は左右を反転させる */
.feature-row:nth-child(even) {
  flex-direction: row-reverse;
}

/* 画像側パネル */
.feature-row__image-panel {
  flex: 1;
  width: 50%;
  aspect-ratio: 16 / 11; /* 横長で綺麗なアスペクト比を維持 */
  overflow: hidden;
  background: #ffffff;
}

.feature-row__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--transition);
}

.feature-row:hover .feature-row__image {
  transform: scale(1.03); /* ホバー時に静かにズーム */
}

/* テキスト側パネル */
.feature-row__content-panel {
  flex: 1;
  width: 50%;
  padding: var(--space-lg);
  position: relative;
}

/* 大きな数字のナンバリング表示（京大風演出） */
.feature-row__number {
  display: block;
  font-size: 48px;
  font-weight: 700;
  color: var(--color-main);
  opacity: 0.3; /* 主張しすぎない透明度 */
  line-height: 1;
  margin-bottom: var(--space-xs);
  letter-spacing: 0.05em;
}

.feature-row__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 var(--space-sm) 0;
  position: relative;
  padding-bottom: var(--space-xs);
}

/* タイトルの下線アクセント */
.feature-row__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--color-main);
}

/* 反転した行（偶数）の下線は左側キープのまま美しく */
.feature-row:nth-child(even) .feature-row__title::after {
  left: 0;
}

.feature-row__text {
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.8;
  margin: 0;
}

/* ==========================================
  📱 特色ページのレスポンシブ（スマホ対応）
========================================== */
@media (max-width: 850px) {
  .feature-rows {
    gap: var(--space-lg);
  }

  /* スマホ時は全て「上画像、下テキスト」の標準的な1カラムにする */
  .feature-row,
  .feature-row:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
  }

  .feature-row__image-panel,
  .feature-row__content-panel {
    width: 100%;
    flex: none;
  }

  .feature-row__content-panel {
    padding: var(--space-md); /* スマホ時は内側の余白を適正に縮小 */
  }

  .feature-row__number {
    font-size: 36px;
  }

  .feature-row__title {
    font-size: 20px;
  }
}

/* ==========================================
  🛠️ PAGE HEADER（下層ページ共通ヒーローエリア）
  京都大学サイトを意識した背景画像＋文字視認性向上
========================================== */
.page-header {
  position: relative;
  height: 280px;              /* ヘッダーの高さを確保（京大風のゆったり感） */
  display: flex;
  align-items: center;        /* 文字を上下中央に配置 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  background-color: #1A2506;  /* 万が一画像が読み込めなかった時の保険用深緑 */
}

/* 枠線ではなく、写真の上に薄い黒の膜（オーバーレイ）を敷いて文字を読みやすくする */
.page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 1;
}

/* 文字コンテンツ（マスクの上に配置するため z-index を指定） */
.page-header .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

.page-header__sub {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-accent); /* アクセントカラー（黄緑など）で英語表記を際立たせる */
  margin: 0 0 8px 0;
  text-transform: uppercase;   /* 小文字で書いても自動で大文字（FEATURE）にする */
}

.page-header__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);   /* 文字色を完全な白に */
  margin: 0;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 画像の上でも文字がボヤけないように薄い影を配置 */
}

/* ==========================================
  📸 各ページ固有の背景写真の指定
========================================== */

/* 「東京学芸大学の特色」ページ用の背景画像 */
.page-header--about {
  background-image: url("about-hero.jpg"); /* 📂 実際のキャンパスの風景写真などに差し替えてください */
}

/* (参考) 今後もし「学長メッセージ」など他ページを作る場合も同様に追加可能です */
.page-header--message {
  background-image: url("message-hero.jpg"); 
}

.page-header--work {
  background-image: url("work-hero.jpg"); 
}

/* 📸 インタビューページの背景画像指定 */
.page-header--interview {
  background-image: url("interview-hero.jpg"); /* 📂 実際の背景用画像に差し替えてください */
}

/* 📸 ページヘッダーの背景画像（福利厚生ページ専用） */
.page-header--condition {
  background-image: url("condition-hero.jpg"); /* 📂 実際の背景用画像に差し替えてください */
}

/* 📸 ページヘッダーの背景画像（キャリア形成・研修制度ページ専用） */
.page-header--career {
  background-image: url("career-hero.jpg"); /* 📂 実際の背景用画像に差し替えてください */
}

/* 📸 ページヘッダーの背景画像（採用試験情報ページ専用） */
.page-header--recruit {
  background-image: url("recruit-hero.jpg"); /* 📂 実際の背景用画像に差し替えてください */
}

/* 📸 ページヘッダーの背景画像（ハラスメント関連ページ専用） */
.page-header--harassment {
  background-image: url("harassment-hero.jpg"); /* 📂 実際の背景用画像に差し替えてください */
}

/* 📸 ページヘッダーの背景画像（よくある質問ページ専用） */
.page-header--faq {
  background-image: url("faq-hero.jpg"); /* 📂 実際の背景用画像に差し替えてください */
}


/* ==========================================
  📱 スマホ時の表示微調整
========================================== */
@media (max-width: 768px) {
  .page-header {
    height: 180px; /* スマホでは高さを少しコンパクトにして見やすく */
  }
  .page-header__title {
    font-size: 24px; /* 文字サイズをスマホ向けに縮小 */
  }
}

/* ==========================================
  🛠️ MESSAGE DETAIL（学長メッセージページ）用スタイル
========================================== */

/* レイアウト幅の制限（読みやすい幅にギュッと狭める） */
.container--narrow {
  max-width: 1000px;
  margin: 0 auto;
}

/* 写真と紹介文の並び */
.message-detail__top {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  margin-bottom: var(--space-lg);
  background: var(--color-white);
  padding: var(--space-md);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* 学長写真の枠 */
.message-detail__img-wrapper {
  flex: 0 0 320px; /* 写真の横幅を320pxに固定 */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.message-detail__img {
  width: 100%;
  height: auto;
  display: block;
}

/* キャッチコピーと署名 */
.message-detail__intro {
  flex: 1;
}

.message-detail__catch {
  font-size: 45px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.6;
  margin: 0 0 24px 0;
  letter-spacing: 0.05em;
}

.message-detail__sign {
  font-size: 18px;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
  text-align: right; /* 右寄せ */
  padding-right: 30px;
  margin-top: 50px
}

.message-detail__sign span {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 6px;
  letter-spacing: 0.1em;
}

/* メッセージ本文の調整 */
.message-detail__body {
  background: var(--color-white);
  padding: 48px var(--space-lg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.message-detail__text {
  font-size: 16px;
  color: var(--color-text);
  line-height: 2.0; /* ゆったりとして読みやすい行間に */
  margin: 0 0 32px 0;
  text-align: justify; /* 両端を綺麗に揃える */
}

.message-detail__text:last-child {
  margin-bottom: 0;
}

/* ==========================================
  📱 学長メッセージ レスポンシブ（スマホ対応）
========================================== */
@media (max-width: 768px) {
  .message-detail__top {
    flex-direction: column; /* スマホでは縦並びに */
    align-items: center;
    text-align: center;
    padding: var(--space-sm);
  }

  .message-detail__img-wrapper {
    flex: none;
    width: 100%;
    max-width: 280px; /* スマホでは少しコンパクトに */
    margin-bottom: var(--space-sm);
  }

  .message-detail__catch {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .message-detail__body {
    padding: 32px var(--space-sm); /* 横の余白を詰めて文字幅を確保 */
  }

  .message-detail__text {
    font-size: 15px;
    margin-bottom: 24px;
  }
}

/* ==========================================
  🛠️ JOB FIELD（各部各課の業務紹介）用アコーディオン
========================================== */

.section__desc {
  text-align: center;
  font-size: 14px;
  color: var(--color-muted);
  margin-top: -12px;
  margin-bottom: var(--space-lg);
}

/* アコーディオンリスト全体の囲み */
.dept-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 個々のアコーディオン（details） */
.dept-accordion {
  background: var(--color-white);
  border: 1px solid #eef0f2;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.3s ease;
}

.dept-accordion[open] {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* クリックするヘッダー部分（summary） */
.dept-accordion__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 30px;
  background: var(--color-white);
  cursor: pointer;
  list-style: none; /* デフォルトの三角矢印を消す */
  user-select: none;
}

/* Safari向けにデフォルトの矢印を消す */
.dept-accordion__summary::-webkit-details-marker {
  display: none;
}

/* 左側の数字と部名グループ */
.dept-accordion__title-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 東大風のスタイリッシュな部番号 */
.dept-accordion__code {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-main);
  background: rgba(0, 89, 46, 0.06); /* テーマカラーの極薄の背景 */
  padding: 2px 8px;
  border-radius: 4px;
}

.dept-accordion__name {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  letter-spacing: 0.03em;
}

/* 右側の＋ー開閉アイコン */
.dept-accordion__icon {
  position: relative;
  width: 16px;
  height: 16px;
}

/* アイコンの横線 */
.dept-accordion__icon::before,
.dept-accordion__icon::after {
  content: "";
  position: absolute;
  background-color: var(--color-dark);
  transition: transform 0.3s ease;
}

.dept-accordion__icon::before {
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
}

/* アイコンの縦線（開くと消える） */
.dept-accordion__icon::after {
  top: 0;
  left: 7px;
  width: 2px;
  height: 16px;
}

/* アコーディオンが開いている時のアイコンの変化（縦線を回して隠す） */
.dept-accordion[open] .dept-accordion__summary {
  border-bottom: 1px solid #f0f2f5;
  background: #fafbfc; /* 開いている時はヘッダーを少しトーンダウン */
}

.dept-accordion[open] .dept-accordion__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}
.dept-accordion[open] .dept-accordion__icon::before {
  background-color: var(--color-main);
}

/* 📂 アコーディオンの中身（開いたときに現れるエリア） */
.dept-accordion__content {
  padding: 32px 30px;
  background: var(--color-white);
}

/* 中の課を並べるグリッド（2カラム並びが東大風で最も美しい） */
.dept-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* 📄 各課の紹介カード */
.dept-card {
  background: #f8fafb; /* カードにほんのり背景色をつけて見やすく */
  border-left: 4px solid var(--color-main); /* 左側に緑のアクセントライン */
  border-radius: 0 4px 4px 0;
  padding: 24px;
}

.dept-card h4 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0 0 12px 0;
  letter-spacing: 0.02em;
}

.dept-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dept-card li {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  position: relative;
  padding-left: 14px;
  margin-bottom: 8px;
}

.dept-card li:last-child {
  margin-bottom: 0;
}

/* 箇条書きの小さな四角いドット */
.dept-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  background-color: #a0aec0; /* 主張しすぎない上品なグレー */
  border-radius: 1px;
}

/* ==========================================
  📱 業務紹介一覧 レスポンシブ（スマホ対応）
========================================== */
@media (max-width: 768px) {
  .dept-accordion__summary {
    padding: 18px var(--space-sm);
  }

  .dept-accordion__name {
    font-size: 17px;
  }

  .dept-accordion__content {
    padding: 20px var(--space-sm);
  }

  .dept-grid {
    grid-template-columns: 1fr; /* スマホでは1カラムに綺麗に畳む */
    gap: 16px;
  }

  .dept-card {
    padding: 18px;
  }
}

/* ==========================================
  🛠️ INTERVIEW（職員インタビュー一覧）用スタイル
========================================== */

/* 💡 ページ内ジャンプ時にスーッと滑らかにスクロールさせる（※html全体に効かせます） */
html {
  scroll-behavior: smooth;
}



/* 🧱 部署ごとのグループ全体の囲みと余白 */
.interview-group {
  margin-bottom: 60px; /* グループとグループの間のしっかりとした隙間 */
  scroll-margin-top: 100px; /* 💡 ジャンプした時、上部固定ヘッダー等に被らないように手前で止める設定 */
}
.interview-group:last-child {
  margin-bottom: 0;    /* 一番最後のグループの下マージンは不要 */
}

/* 🧭 上部ジャンプリンク ナビゲーションエリア */
.interview-nav {
  text-align: center;
  margin-bottom: 48px; /* 下の最初のグループ（学務部）との隙間 */
  background: #f8fafc; /* ほんのり明るいグレーの背景 */
  padding: 24px;
  border: 1px solid #e2e8f0;
}

/* 「部署からインタビューを探す」の文字 */
.interview-nav__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 0;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

/* ボタンを並べる横方向のリスト */
.interview-nav__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 50px; /* ボタン同士の間隔 */
  flex-wrap: wrap; /* スマホなどの狭い画面では自動で折り返す */
}

/* ジャンプリンク用ボタンの共通土台 */
.interview-nav__btn {
  display: block;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* 各ボタン固有の色（テーマカラーの背景をほんのり薄く敷き、ホバーでソリッドに変化） */
.btn--academic {
  background-color: rgba(198, 54, 38, 0.08);
  color: #C63626;
  border: 1px solid rgba(198, 54, 38, 0.2);
}
.btn--academic:hover {
  background-color: #C63626;
  color: #fff;
}

.btn--admin {
  background-color: rgba(8, 149, 62, 0.08);
  color: #08953E;
  border: 1px solid rgba(8, 149, 62, 0.2);
}
.btn--admin:hover {
  background-color: #08953E;
  color: #fff;
}

.btn--finance {
  background-color: rgba(7, 103, 133, 0.08);
  color: #076785;
  border: 1px solid rgba(7, 103, 133, 0.2);
}
.btn--finance:hover {
  background-color: #076785;
  color: #fff;
}

/* 🏷️ 部署ごとの見出し（H3） */
.interview-group__title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 0;
  margin-bottom: 24px;   /* 見出しとカードの一覧の間の隙間 */
  padding-left: 12px;
  border-left: 4px solid var(--color-main); /* 左側に大学テーマカラー（緑）のアクセント線 */
  letter-spacing: 0.03em;
}

/* 👥 インタビューグリッド（3カラム） */
.interview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 通常画面では3列に並べる */
  gap: 32px; /* カード同士の間隔 */
}

/* 📄 インタビューのリンクカード本体 */
.interview-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid #eef0f2;
  overflow: hidden; /* 写真が角丸からはみ出さないようにマスクする */
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* マウスホバー時に全体を少し浮かせ、影を深める */
.interview-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}

/* 🖼️ 写真の枠（アスペクト比をきれいに保つ） */
.interview-card__image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 42.5%; /*（約2.35:1 の比率） */
  overflow: hidden;
  background-color: #f7f9fa;
}

/* カードの写真 */
.interview-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠に合わせて自動トリミング */
  transition: transform 0.4s ease; /* ズーム用のアニメーション */
}

/* 💡 マウスホバー時に、中の写真だけをじわっと大きくする */
.interview-card:hover .interview-card__image {
  transform: scale(1.05);
}

/* 📝 テキスト情報エリア */
.interview-card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 下揃えを整えるための余白の自動確保 */
  padding: 24px;
}

/* 🏷️ 部署別カラーラベル：共通の土台デザイン（ソリッド白文字版） */
.meta-dept {
  display: inline-block;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 500;
  color: #fff; /* 白文字 */
  line-height: 1.5;
  white-space: nowrap; /* スマホでラベルの中で文字が改行されるのを防ぐ */
}

/* 各部署の専用カラー（パキッとした背景色） */
.dept-academic { background: #C63626; } /* 赤：学務系 */
.dept-admin    { background: #08953E; } /* 緑：総務系 */
.dept-finance  { background: #076785; } /* 青：財務系 */

/* メタ情報（部署・年次・役職）の並び */
.interview-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.5;       /* 💡 行の高さを部署名と統一 */
}

/* 年次と役職の文字色を引き締める */
.meta-year,
.meta-position {
  background: #f0f2f5;
  color: var(--color-text);
  padding: 2px 6px;
}

/* インタビューのキャッチコピー（タイトル） */
.interview-card__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.5;
  margin: 0 0 12px 0; /* 下に説明文が続くので下マージンを設定 */
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}

/* ホバー時に文字色をメインカラー（緑）に変えて、クリックできることを強調 */
.interview-card:hover .interview-card__title {
  color: var(--color-main);
}

/* 💬 インタビューカード内の説明文（抜粋文） */
.interview-card__excerpt {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
  
  /* 💡 文字数がバラバラでもカードの高さを美しく揃える設定（3行でカットして「…」にする） */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* 🛠️ 互換性のためにプレフィックスなしの標準プロパティを追加 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================
  📱 職員インタビュー レスポンシブ（スマホ対応）
========================================== */
@media (max-width: 960px) {
  .interview-group {
    margin-bottom: 48px; /* タブレットサイズではグループ間隔を少し狭める */
  }

  .interview-grid {
    grid-template-columns: repeat(2, 1fr); /* タブレットサイズでは2カラム */
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .interview-nav {
    padding: 16px;
    margin-bottom: 32px;
  }
  .interview-nav__links {
    gap: 10px;
  }
  .interview-nav__btn {
    padding: 8px 16px;
    font-size: 13px;
    flex-grow: 1; /* スマホでは画面幅いっぱいにボタンが均等に広がるように */
    text-align: center;
  }

  .interview-group {
    margin-bottom: 40px; /* スマホサイズではさらに間隔を調整 */
  }

  .interview-group__title {
    font-size: 18px; /* スマホでは見出しを少し控えめに */
    margin-bottom: 16px;
  }

  .interview-grid {
    grid-template-columns: 1fr; /* スマホサイズではきれいな1カラム縦並び */
    gap: 20px;
  }

  .interview-card__content {
    padding: 20px;
  }
  
  .interview-card__title {
    font-size: 15px; /* スマホではタイトル文字サイズをほんの少し控えめに */
  }
}


/* ==========================================
  🛠️ BENEFITS（福利厚生・働く環境）用スタイル
========================================== */

/* 各セクション共通の説明文 */
.section__desc {
  text-align: center;
  font-size: 15px;
  color: var(--color-text);
  margin-top: -12px;
  margin-bottom: 40px;
  line-height: 1.6;
}


/* ==========================================
  📊 セクション1＆4：数字で見る環境 / 各種手当（背景淡グレー）
========================================== */
.data-section {
  background-color: #f8fafc; /* 淡い洗練されたグレーの背景 */
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

/* 3カラムのデータグリッド */
.data-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

/* データカード本体（中央揃え） */
.data-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 40px 24px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}

/* データの項目名 */
.data-card__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-muted);
  margin-top: 0;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

/* 数字と単位を綺麗に下揃えにするラッパー */
.data-card__number-wrapper {
  display: flex;
  align-items: baseline; /* 💡 数字と単位の下端のラインを美しく揃える */
  justify-content: center;
}

/* ダイナミックに目立たせる特大の数字 */
.data-card__number {
  font-family: var(--font-sans);
  font-size: 56px;
  font-weight: 700;
  color: var(--color-main); /* 学芸大のテーマカラー：深緑 */
  line-height: 1;
}

/* 単位（% や 時間/月） */
.data-card__unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark);
  margin-left: 4px;
}


/* ==========================================
  🗓️ セクション2：充実の休暇・休業制度（3カラム）
========================================== */
.benefit-section {
  background-color: var(--color-white);
}

.benefit-detailed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* 左側にアクセントラインを入れた美しい制度カード */
.benefit-detail-card {
  background: #ffffff;
  border-left: 4px solid var(--color-main); /* 左側に緑のアクセント線 */
  padding: 28px 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.02);
  border-top: 1px solid #eef0f2;
  border-right: 1px solid #eef0f2;
  border-bottom: 1px solid #eef0f2;
  border-radius: 0 8px 8px 0; /* 右側だけを角丸に */
  transition: transform 0.3s ease;
}

.benefit-detail-card:hover {
  transform: translateY(-4px);
}

.benefit-detail-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 0;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.benefit-detail-card__text {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}


/* ==========================================
  👶 セクション3：ライフステージサポート（子育て・介護 2カラム）
========================================== */
.support-flex-container {
  display: flex;
  gap: 40px;
  margin-top: 20px;
}

.support-block {
  flex: 1;
  background: #f8fafc;
  padding: 36px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* サポートブロックの見出し */
.support-block__title {
  font-size: 18px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
}

/* 子育ては親しみやすい赤系、介護は誠実な青系でデザインに意味を持たせる */
.support-block__title--child { color: #C63626; border-bottom-color: rgba(198, 54, 38, 0.2); }
.support-block__title--care  { color: #076785; border-bottom-color: rgba(7, 103, 133, 0.2); }

.support-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 箇条書き内の各制度のレイアウト */
.support-list li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.support-list li strong {
  font-size: 15px;
  color: var(--color-dark);
  position: relative;
  padding-left: 14px;
}

/* 制度名の前につく小さなスクエアドット */
.support-list li strong::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background-color: currentColor; /* 親（文字色）と同じ色を自動適用 */
  border-radius: 1px;
}

.support-list li span {
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.6;
  padding-left: 14px;
}


/* ==========================================
  🏠 セクション4：各種手当・福利厚生施設のグリッド
========================================== */
.welfare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.welfare-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 32px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.01);
}

.welfare-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 0;
  margin-bottom: 14px;
  line-height: 1.4;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
}

.welfare-card__text {
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}


/* ==========================================
  📱 福利厚生ページ レスポンシブ（スマホ・タブレット対応）
========================================== */
@media (max-width: 960px) {
  .section__desc {
    margin-bottom: 32px;
    font-size: 14px;
  }

  /* タブレットサイズ：3カラムの箇所をすべて2カラムまたは1カラムの最適配置へ */
  .benefit-detailed-grid, .welfare-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  /* 有給・育休などのデータエリアの隙間調整 */
  .data-grid {
    gap: 20px;
  }
  .data-card {
    padding: 32px 16px;
  }
  .data-card__number {
    font-size: 48px;
  }

  /* 子育て・介護を縦並びに */
  .support-flex-container {
    flex-direction: column;
    gap: 24px;
  }
  .support-block {
    padding: 28px;
  }
}

@media (max-width: 768px) {
  /* 完全なスマホサイズ：すべてきれいな1列の縦並びに統一 */
  .benefit-detailed-grid, .welfare-grid, .data-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 💡 スマホ特性：データエリアは縦に並ぶと間延びするため、横1行のコンパクト配置に自動変換 */
  .data-card {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .data-card__label {
    margin-bottom: 0;
  }
  .data-card__number {
    font-size: 38px;
  }

  .benefit-detail-card {
    padding: 24px 20px;
  }

  .welfare-card {
    padding: 24px 20px;
  }
}


/* ==========================================
  🏫 東京大学風（UT-STYLE）洗練されたテーブルレイアウト
========================================== */

.container--ut-style {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ut-section-title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 0;
  margin-bottom: 32px;
  padding-bottom: 12px;
  letter-spacing: 0.03em;
}

.ut-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  border-top: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
}

.ut-table th {
  width: 20%;
  background-color: #f9fafb;
  color: var(--color-dark);
  font-size: 15px;
  font-weight: 700;
  padding: 24px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #e5e7eb;
}

.ut-table td {
  font-size: 14.5px;
  color: var(--color-dark);
  line-height: 1.7;
  padding: 24px 24px;
  vertical-align: top;
  border-bottom: 1px solid #e5e7eb;
}

.ut-table__hint {
  display: inline-block;
  font-size: 12.5px;
  color: var(--color-text);
  margin-top: 8px;
}

/* 📄 箇条書きリスト全体のベース */
.ut-table-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各箇条書き（ドット付きの親） */
.ut-table-list li {
  position: relative;
  padding-left: 16px; /* ドットのぶん、左側に余白を開ける */
}

/* リストの先頭につく正方形ドット（常に制度名の1行目に追従） */
.ut-table-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px; /* 1行目の制度名の真ん中に綺麗に合わせる */
  width: 5px;
  height: 5px;
  background-color: var(--color-main); /* 学芸大テーマカラー */
  border-radius: 1px;
}

/* 💡 パターンA専用：上の制度名タイトルのデザイン */
.ut-table-list li strong {
  display: inline-block;
  color: var(--color-dark); /* 視認性の高い、はっきりした黒 */
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px; /* 下の説明文との心地よい微小な隙間 */
}

/* 💡 パターンA専用：改行された下の説明文のデザイン */
.ut-table-list__desc {
  display: block;
  font-size: 13.5px;          /* 項目名より少しだけスマートにして対比を出す */
  color: #555555;             /* ほんの少しだけ柔らかいグレーにして気品を持たせる */
  line-height: 1.6;
}

/* 各制度ごとの上下の間隔を美しくあける */
.ut-table-list--gap li {
  margin-bottom: 24px;
}
.ut-table-list--gap li:last-child {
  margin-bottom: 0;
}

/* ==========================================
  📱 東大スタイル テーブルレスポンシブ（スマホ最適化）
========================================== */
@media (max-width: 768px) {
  .ut-table, .ut-table tbody, .ut-table tr, .ut-table th, .ut-table td {
    display: block;
    width: 100%;
  }
  
  .ut-table tr {
    border-bottom: 1px solid #d1d5db;
  }
  .ut-table tr:last-child {
    border-bottom: none;
  }

  .ut-table th {
    width: 100%;
    padding: 12px 16px;
    background-color: #f3f4f6;
    border-bottom: none;
  }

  .ut-table td {
    width: 100%;
    padding: 16px 16px 20px 16px;
    border-bottom: none;
  }
  
  .ut-table-list--gap li {
    margin-bottom: 14px; /* スマホでは縦の間隔を少しだけきゅっと詰める */
  }
}



.ut-section-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 0;
  margin-bottom: 32px;
  padding-bottom: 12px;
  letter-spacing: 0.03em;
}

/* ==========================================
  🏫 東京大学ベース：洗練された勤務条件＆福利厚生スタイル
========================================== */

/* 全体のコンテナ */
.ut-info-section {
  padding: 40px 0;
  background-color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Arial, meiryo, sans-serif;
  box-sizing: border-box;
}

.ut-info-container {
  max-width: 1200px; /* 東大のコンテンツ幅に近い余裕のある設計 */
  margin: 0 auto;
  padding: 0 24px;
}

/* 横並びのレイアウト（左に見出し、右にコンテンツ） */
.ut-info-row {
  display: flex;
  margin-top: 60px;
  padding-top: 40px;
}

.ut-info-row:first-child {
  margin-top: 0;
}

/* 左カラム：大きなタイトル（全体の25%幅） */
.ut-info-label-col {
  width: 25%;
  flex-shrink: 0;
}

.ut-info-main-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* 右カラム：具体的な内容（全体の75%幅） */
.ut-info-content-col {
  width: 75%;
  flex-grow: 1;
}

/* 各項目ごとの区切り（細いグレーの境界線） */
.ut-info-item {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
  padding: 24px 0;
}

.ut-info-item:first-child {
  padding-top: 0;
}

.ut-info-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* 項目名（勤務時間、休日など） */
.ut-info-item-title {
  width: 200px; /* 項目名の幅をきれいに揃える */
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.6;
}

/* 項目の説明エリア */
.ut-info-item-desc {
  flex-grow: 1;
  font-size: 14.5px;
  color: #334155;
}

/* 一般的なテキスト指定 */
.ut-info-text {
  margin: 0 0 8px 0;
  line-height: 1.7;
}
.ut-info-text:last-child {
  margin-bottom: 0;
}

.ut-info-text-sub {
  margin: 0;
  color: #576574;
  font-size: 14px;
  line-height: 1.6;
}

/* 強調文字 */
.ut-info-bold {
  font-weight: 700;
  color: #0f172a;
}

/* 内側見出し（昇給・賞与など用） */
.ut-info-sub-title {
  font-weight: 700;
  color: #1e3a8a;
  display: inline-block;
}

/* 注意書き（※印）のスタイル */
.ut-info-hint {
  font-size: 12px;
  color: #64748b;
  margin: 8px 0 0 0;
  line-height: 1.5;
}

/* 💵 初任給専用のシンプルなミニテーブル */
.ut-salary-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4px;
}

.ut-salary-table tr th {
  text-align: left;
  font-weight: 500;
  color: #475569;
  font-size: 14px;
  padding: 6px 0;
  width: 160px;
}

.ut-salary-table tr td {
  padding: 6px 0;
}

.ut-salary-price {
  font-weight: 700;
  font-size: 16px;
  color: #0f172a;
}

.ut-salary-date {
  font-size: 12px;
  color: #64748b;
  margin-left: 6px;
}

/* 改行コントロール用 */
.ut-pc-only { display: inline; }


/* ==========================================
  📱 スマートフォン表示（画面幅768px以下のとき）
========================================== */
@media screen and (max-width: 768px) {
  .ut-info-section {
    padding: 20px 0 40px 0;
  }

  .ut-pc-only { display: none; }

  /* 左右並びを解除して縦並びにする（画面幅を広く使う） */
  .ut-info-row {
    flex-direction: column;
    margin-top: 40px;
    padding-top: 24px;
  }

  .ut-info-label-col {
    width: 100%;
    margin-bottom: 20px;
  }

  .ut-info-main-title {
    font-size: 18px;
    border-left: 4px solid var(--color-main); /* スマホでは左側にアクセント線を付与 */
    padding-left: 10px;
  }

  .ut-info-content-col {
    width: 100%;
  }

  /* 項目ごとのレイアウトもスマホ用に従列化 */
  .ut-info-item {
    flex-direction: column;
    padding: 16px 0;
  }

  .ut-info-item-title {
    width: 100%;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .ut-info-item-desc {
    font-size: 13.5px;
  }

  .ut-salary-table tr th {
    width: 130px;
    font-size: 13px;
  }
  
  .ut-salary-price {
    font-size: 15px;
  }
}

/* ==========================================
  📷 学内施設：写真4枚ギャラリー用スタイル
========================================== */

/* 写真を横に4枚並べるグリッドコンテナ */
.ut-facility-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* PCでは均等に2分割 */
  gap: 12px; /* 写真同士の間隔 */
  margin-top: 16px; /* 上のテキストとの間の余白 */
}

/* 写真1枚ずつのボックス */
.ut-facility-photo {
  display: flex;
  flex-direction: column;
}

/* 画像自体のデザイン設定 */
.ut-facility-photo img {
  width: 100%;
  height: 100%; /* 写真の縦幅を統一（好みに応じて変更してください） */
  object-fit: cover; /* 画像の比率を崩さずに指定サイズで綺麗に切り抜く */
  border-radius: 2px; /* 上品に見せる微細な角丸 */
  border: 1px solid #e2e8f0; /* 写真の輪郭をクリアにするごく薄い枠線 */
}

/* 写真の下につく説明文字（キャプション） */
.ut-facility-caption {
  font-size: 11px;
  color: #64748b;
  text-align: center;
  font-weight: 500;
}


/* ==========================================
  📱 スマートフォン表示（画面幅768px以下のとき）
========================================== */
@media screen and (max-width: 768px) {
  /* スマホでは画面幅が狭いため、横4枚並びから「2列 × 2段」に変更 */
  .ut-facility-gallery {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    margin-top: 12px;
  }

  .ut-facility-photo img {
    height: 150px; /* スマホ用に縦幅を少しコンパクトに調整 */
  }
  
  .ut-facility-caption {
    font-size: 10.5px;
  }
}


/* ==========================================
  📐 リアル階段式（キャリアパス画像完全再現）CSS
========================================== */

.container--stairs-fix {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 上部テキストエリア */
.stairs-intro {
  margin-bottom: 40px;
}
.stairs-intro p {
  font-size: 14.5px;
  color: var(--color-text);
  line-height: 1.75;
  margin-top: 0;
  margin-bottom: 10px;
}

/* 📈 階段全体の親コンテナ */
.career-stairs {
  position: relative;
  display: flex;
  align-items: flex-end; /* 下揃えで階段の形を作る */
  justify-content: space-between;
  background-color: transparent;
  height: 380px; /* 階段の最大高さ（部長の高さ） */
  padding: 20px 10px 0 10px;
  margin: 40px 0 16px 0;
}

.section--training {
  background-color: #fafafa;
  border-top: 1px solid #eeeeee;
}

/* 🚶 登る人ピクトグラム */
.stairs-walker {
  position: absolute;
  left: 1.5%;
  bottom: 85px; /* 1段目（係員）の枠の上に直に乗る高さ */
  font-size: 42px;
  line-height: 1;
  z-index: 10;
  animation: miniWalk 3s ease-in-out infinite alternate;
}

/* 🚶 楽しげに少し揺れるアニメーション */
@keyframes miniWalk {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

/* 🧱 各階段の共通外枠（画像特有の「濃いグレーの極太枠線」を表現） */
.st-bar {
  position: relative;
  width: 15.5%; /* 6つの段が等間隔で綺麗に並ぶ幅 */
  background-color: #2c3e35; /* 画像の外枠にある渋いディープグリーン */
  padding: 8px 8px 0 8px;    /* 上と左右に太い枠線を表現 */
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 💡 【階段の高さ設計】各段の高さを画像の比率通りに算出 */
.st-bar--1 { height: 80px; }
.st-bar--2 { height: 134px; }
.st-bar--3 { height: 188px; }
.st-bar--4 { height: 242px; }
.st-bar--5 { height: 296px; }
.st-bar--6 { height: 350px; }

/* 🟢 各階段の内側（画像通りの美しい縦グラデーション） */
.st-bar__inner {
  width: 100%;
  height: 100%;
  /* 上部が鮮やかな緑、中間が黄緑、下部が白に近い薄緑のグラデーション */
  background: linear-gradient(to bottom, #54914c 0%, #a2cc96 45%, #f4f9f1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 4px;
  box-sizing: border-box;
}

/* 階段の中の文字（太字・黒・画像準拠） */
.st-bar__label {
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.st-bar__label small {
  font-size: 12px;
  color: #111111;
  display: block;
  margin: 2px 0;
}

/* 💬 マウスをあてたときにフワッと飛び出す詳細解説ボックス */
.st-bar__popover {
  position: absolute;
  bottom: 105%; /* 階段のトップの真上に浮かす */
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  width: 250px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 12px 24px -4px rgba(0,0,0,0.08), 0 4px 12px -2px rgba(0,0,0,0.04);
  opacity: 0;
  visibility: hidden;
  z-index: 20;
  transition: all 0.2s ease;
}

/* 吹き出しの小さな下三角 */
.st-bar__popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
}

.st-bar__popover h4 {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-main);
}
.st-bar__popover p {
  margin: 0;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.55;
}

/* 🔥 ホバー時に枠線を発光させ、吹き出しを浮き上がらせる */
.st-bar:hover {
  background-color: var(--color-main); /* 枠線がブランドカラーの緑に輝く */
}
.st-bar:hover .st-bar__popover {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* 下部の案内案内テキスト */
.stairs-help-text {
  text-align: center;
  font-size: 12.5px;
  color: var(--color-muted);
  margin-top: 24px;
  margin-bottom: 40px;
}

/* ==========================================
  🆕 3. 🛠️ SECTION 2：研修システムデザイン（直角エッジ）
========================================== */
.tm-sub-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-dark);
  margin-top: 0;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #1e293b;
}

/* 左右をわける2カラム構造 */
.tm-layout {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
}
.tm-col {
  width: 50%;
}

/* --- 左側：階層別リストスタイル --- */
.tm-hierarchy-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tm-layer-row {
  display: flex;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
}
/* 左バッジ：キャリアパスのソリッドカラー比率に完全に同期 */
.tm-layer-badge {
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  padding: 16px 10px;
  text-align: center;
  border-right: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.tm-layer-badge--6 { background-color: #64a75b; }
.tm-layer-badge--4 { background-color: #81be79; }
.tm-layer-badge--3 { background-color: #a3d89b; }
.tm-layer-badge--1 { background-color: #cff2c7; }

/* 右テキスト部 */
.tm-layer-body {
  padding: 16px 20px;
  display: flex;
  align-items: center;
}
.tm-layer-body ul {
  margin: 0;
  padding-left: 18px;
}
.tm-layer-body li {
  font-size: 13.5px;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 4px;
}
.tm-layer-body li:last-child {
  margin-bottom: 0;
}

/* --- 右側：大学独自マネジメントプログラム（プロセス矢印） --- */
.tm-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tm-flow-card {
  display: flex;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  position: relative;
}
/* 矢印を意識した、ソリッドグレーのサイドブロック（直角） */
.tm-flow-side {
  width: 80px;
  background-color: #e2e8f0;
  color: #475569;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-right: 1px solid #cbd5e1;
}
/* メイン説明部 */
.tm-flow-main {
  padding: 16px 20px;
}
.tm-flow-main h4 {
  margin: 0 0 6px 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-dark);
}
.tm-flow-main p {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-muted);
  line-height: 1.5;
}

/* ==========================================
  4. 🎴 SECTION 3：3連キャリア開発システム
========================================== */
.biz-section-lead {
  font-size: 14.5px;
  color: var(--color-text);
  line-height: 1.7;
  margin-top: -16px;
  margin-bottom: 32px;
}
.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.biz-card {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0; 
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.biz-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.05);
}
.biz-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 10px;
}
.biz-card__icon {
  font-size: 22px;
  line-height: 1;
}
.biz-card__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-dark);
  margin: 0;
}
.biz-card__text {
  font-size: 13.5px;
  color: #555555;
  line-height: 1.6;
  margin: 0;
}
.biz-card__text strong {
  display: inline-block;
  color: var(--color-main);
  font-size: 13.5px;
  margin-bottom: 4px;
}

/* ==========================================
  5. 📱 スマートフォン表示最適化（レスポンシブ）
========================================== */
@media (max-width: 920px) {
  .biz-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .section { padding: 50px 0; }
  
  /* 📈 階段解体 */
  .career-stairs {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 0;
    gap: 12px;
    margin-top: 20px;
  }
  .stairs-walker, .stairs-help-text { display: none !important; }
  .st-bar { width: 100%; height: auto !important; padding: 4px; border-radius: 0; }
  .st-bar__inner { justify-content: flex-start; padding: 14px 16px; }
  .st-bar__label { font-size: 15px; text-align: left; }
  .st-bar__label br { display: none; }
  .st-bar__label small { margin: 0 6px; font-size: 14px; display: inline; }
  .st-bar__popover {
    position: relative; top: 0; left: 0; transform: none !important; width: 100%;
    opacity: 1; visibility: visible; border: none; box-shadow: none;
    padding: 12px 16px 14px 16px; background: #ffffff; margin-top: 4px; border-radius: 0; box-sizing: border-box;
  }
  .st-bar__popover::after { display: none; }
  .st-bar:hover { background-color: #1e293b; }

  /* 🛠️ 研修レイアウト解体（スマホでは縦に並べる） */
  .tm-layout {
    flex-direction: column;
    gap: 32px;
  }
  .tm-col {
    width: 100%;
  }
  .tm-layer-row {
    flex-direction: column;
  }
  .tm-layer-badge {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px;
    box-sizing: border-box;
  }
}


/* ==========================================
  📸 写真が主役の大型ヒーローエリア（detailスタイル）
========================================== */
.detail-hero {
  position: relative;
  width: 100%;            /* 基本は100%に広げつつ */
  max-width: 1200px;      /* 💡最大横幅を1200pxに制限 */
  margin: 0 auto;         /* 💡左右の余白を自動にして、全体を画面中央に配置 */
  height: 65vh; 
  min-height: 480px;
  max-height: 700px;
  overflow: hidden;
  background-color: #000000;
}

/* 背後の写真ベース */
.detail-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.detail-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center 35%; 
}

/* 写真の上に敷くグラデーションオーバーレイ */
.detail-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.015) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.3) 80%
  );
  display: flex;
  align-items: flex-end; 
}

/* 💡 下の本文コンテナと外枠の基準位置を強制的に完全同期させ、要素を左寄せにする設定 */
.detail-hero__overlay .container--narrow {
  display: block !important;           /* flexを解除し、自然なブロック配置で狂いを防ぐ */
  width: 100% !important;
  max-width: 800px !important;        /* 下の本文コンテナの最大幅と強制的に一致させる */
  margin: 0 auto !important;          /* 画面の中央に配置 */
  box-sizing: border-box !important;
  padding-left: 0 !important; 
  padding-right: 0 !important;
  padding-bottom: var(--space-md) !important; /* コンテナの内側下部に余白を確保 */
}

/* ヒーロー内の要素を個別に左寄せ */
.detail-hero__meta {
  margin-bottom: 20px;
  display: flex !important;
  justify-content: flex-start !important;
}

/* 💥 大型タイトル（記事の左端からぴったり開始） */
.detail-hero__catch {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.4;
  margin: 0 0 32px 0 !important;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  text-align: left !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ヒーロー内のネームサインライン（記事の左端に連動） */
.detail-hero__sign {
  border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
  padding-top: 16px !important;
  width: 100% !important;
  max-width: 400px; /* 境界線の長さの制限 */
  text-align: left !important;
}

.detail-hero__post {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 0 4px 0 !important;
  letter-spacing: 0.05em;
}

.detail-hero__name {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff !important;
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 12px;
}

.detail-hero__en {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5) !important;
  letter-spacing: 0.15em;
}


/* ==========================================
  2. 本文・Q&Aセクション（フラット化）
========================================== */
.detail-body {
  box-shadow: none !important;
  /* 💡 元のCSSが持つ大きな囲みパディングを打ち消し、左端のテキスト位置をコンテナ外枠に密着させる */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: var(--space-md) !important;
  padding-bottom: var(--space-md) !important;
  background: transparent !important;
}

.detail-qa {
  margin-bottom: 56px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 40px;
}

.detail-qa:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-qa__question {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 24px 0;
}

.detail-qa__num {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--color-main);
  line-height: 1;
  position: relative;
  top: 2px;
}

.detail-qa__q-text {
  font-size: 19px;
  font-weight: 700;
  color: #000000;
  line-height: 1.5;
}


/* ==========================================
  🕒 【完全独立版】detailスタイル タイムライン（完成版）
========================================== */
.detail-schedule-block {
  padding-top: 40px;
  margin-bottom: 80px;
}

/* 独立したスケジュール専用の見出しエリア */
.detail-schedule-header {
  margin-bottom: 48px;
  text-align: left;
}

.detail-schedule-title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 800;
  color: #000000;
  margin: 0 0 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 英字の小見出しを上に添えてプロ感を演出 */
.detail-schedule-title small {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-main); /* アクセントのグリーン */
  letter-spacing: 0.15em;
}

.detail-schedule-subtitle {
  font-size: 14px;
  color: var(--color-muted);
  margin: 0;
}

/* タイムラインの構造定義 */
.detail-timeline {
  position: relative;
  padding-left: 16px;
  padding-bottom: 24px; /* ←これ追加 */
}

/* 📌 タイムライン中央を貫く縦の軸線（100%伸ばし、最後を隠す仕様に変更） */
.detail-timeline::before {
  content: '';
  position: absolute;
  top: 27px;
  bottom: 27px;
  left: 103px;
  width: 1px;
  background-color: var(--color-border);
  z-index: 2;
}

/* 各時間帯の行 */
.detail-timeline__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 20px 16px 20px 0;
}

.detail-timeline__item:last-of-type {
  margin-bottom: 0;
}


/* 時間表示エリア（幅を完全に固定して縦のラインを固定） */
.detail-timeline__time-box {
  width: 70px;
  flex-shrink: 0;
  text-align: right;
  position: relative;
}

.detail-timeline__time {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #000000;
  line-height: 1.2;
}

/* 軸線の上に配置する目盛り（ドット） */
.detail-timeline__time-box::after {
  content: '';
  position: absolute;
  top: 8px;
  right: -23px; /* 縦の軸線の上にぴったり重ねる */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-main);
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px var(--color-border);
  z-index: 3; /* 線（z-index:1）より必ず前面にするため3に調整 */
}

/* スケジュールのテキストブロック */
.detail-timeline__content {
  flex-grow: 1;
  padding-top: 1px;
}

.detail-timeline__title {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.detail-timeline__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0;
}

/* 昼休み：目盛りをマイルドなグレーにして主張を抑える */
.detail-timeline__item--break .detail-timeline__time-box::after {
  background-color: #cbd5e1;
}
.detail-timeline__item--break .detail-timeline__title {
  color: var(--color-muted);
}

/* 退社：ソリッドブラックの目盛りで一日の終了を引き締める */
.detail-timeline__item--end .detail-timeline__time-box::after {
  background-color: #000000;
  width: 9px;
  height: 9px;
  right: -24px;
  top: 8px;
}


/* ==========================================
  ⏱️ 新規追加：時短勤務（jitan）用の強調デザイン（アイコンなし）
========================================== */
.detail-timeline__item--jitan {
  background-color: #fff1f3; /* 透明感のある薄いピンク */ 
  padding: 20px 16px 20px 0; 
  box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.03);
}

/* 時短エリア内の時間（数字）の色を連動 */
.detail-timeline__item--jitan .detail-timeline__time {
  color: #0284c7 !important;
}

/* 時短エリア内のタイトルの文字色 */
.detail-timeline__item--jitan .detail-timeline__title {
  color: #0c4a6e;
}


/* ==========================================
  🏡 既存ブラッシュアップ：プライベート（private）強調デザイン（アイコンなし）
========================================== */
.detail-timeline__item--private {
  background-color: rgba(127, 163, 47, 0.06); /* 薄いグリーンの敷物 */
  padding: 20px 16px 20px 0;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 4px 6px -1px rgba(127, 163, 47, 0.03);
}

/* プライベートエリア内の時間（数字）の色を連動 */
.detail-timeline__item--private .detail-timeline__time {
  color: #7fa32f !important;
}

/* プライベートエリア内のタイトルの文字色 */
.detail-timeline__item--private .detail-timeline__title {
  color: #2c3e0f;
}


/* ==========================================
  3. ボタン
========================================== */
.detail-back-box {
  text-align: center;
  margin-top: 56px;
}

.detail-btn {
  background: #000000 !important;
  color: #ffffff !important;
  min-width: 280px;
  padding: 18px 36px !important;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0.15em;
  border: none !important;
  box-shadow: none !important;
  transition: var(--transition);
}

.detail-btn span {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 4px;
  letter-spacing: 0.05em;
}

.detail-btn:hover {
  background: var(--color-main) !important;
  color: #ffffff !important;
  transform: translateY(-4px);
}


/* ==========================================
  📱 レスポンシブ対応（スマホ表示の最適化）
========================================== */
@media (max-width: 768px) {
  .detail-hero {
    height: 55vh;
    min-height: 380px;
  }
  
  /* スマホ環境下で元のCSSが持たせる画面端の余白（20pxなど）に上下で綺麗に合わせるガード */
  .detail-hero__overlay .container--narrow {
    padding-left: 20px !important; 
    padding-right: 20px !important;
  }
  
  .detail-hero__catch {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 24px;
  }
  
  .detail-hero__name {
    font-size: 20px;
  }
  
  .detail-qa__question {
    gap: 12px;
    margin-bottom: 16px;
  }
  
  .detail-qa__num {
    font-size: 18px;
    top: 1px;
  }
  
  .detail-qa__q-text {
    font-size: 16px;
  }

  .detail-btn {
    width: 100%;
    box-sizing: border-box;
  }

  /* タイムライン用のスマホ変形 */
  .detail-schedule-block {
    margin-top: 40px;
    padding-top: 40px;
  }

  .detail-timeline {
    padding-left: 8px;
  }

  .detail-timeline::before {
    left: 12px;
    top: 24px;
    height: calc(100% - 48px);
  }

  .detail-timeline__item {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
    padding-left: 28px; 
  }

  .detail-timeline__time-box {
    width: auto;
    text-align: left;
  }

  .detail-timeline__time-box::after {
    left: -20px;
    right: auto;
    top: 4px;
  }

  .detail-timeline__item--end .detail-timeline__time-box::after {
    left: -21px;
    right: auto;
    top: 3px;
  }

  .detail-timeline__item--private {
    margin-left: 0;
    padding: 16px;
  }
  .detail-timeline__item--private .detail-timeline__time-box {
    padding-left: 0;
  }
}

/* ==========================================
  採用情報：洗練されたテーブルシステム
========================================== */
.recruit-table {
  width: 100%;
  max-width: 1200px;
  margin: 32px auto 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.7;
  color: #333333;
}

.recruit-table th,
.recruit-table td {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  text-align: left;
}

.recruit-table th {
  width: 22%;
  font-weight: 700;
  color: #111111;
  background-color: transparent;
}

.recruit-highlight {
  font-weight: 800;
  color: var(--color-main, #7fa32f);
  font-size: 16px;
  background: linear-gradient(transparent 70%, rgba(127, 163, 47, 0.15) 70%);
  padding: 0 4px;
}

.recruit-table__note {
  font-size: 13px;
  color: #666666;
  margin: 6px 0 0 0;
}

.recruit-download-box {
  padding: 3px 3px 9px 3px;
  background-color: #f8fafc;
  border-left: 3px solid #64748b;
}

.recruit-download-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recruit-link-download {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: #1e3a8a;
  text-decoration: none;
  transition: color 0.2s ease;
}

.recruit-link-download:hover {
  color: var(--color-main, #7fa32f);
  text-decoration: underline;
}

.recruit-notice {
  margin: 18px 0;
  padding: 16px;
  border: 2px solid #dc2626;
  border-left: 8px solid #b91c1c;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.08);
}

.recruit-notice::before {
  content: "重要";
  display: inline-block;
  margin-right: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

.recruit-notice strong {
  display: inline;
  font-size: 18px;
  font-weight: 800;
}

/* ==========================================
  選考ルートセクション（独立デザイン）
========================================== */
.recruit-route-intro {
  max-width: 1000px;
  margin: 0 auto 32px;
  text-align: left;
  font-size: 15px;
  line-height: 1.8;
  color: #334155;
}

/* 2つのルートを横並びにするコンテナ */
.recruit-route-container {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 独立した各ルートのカードデザイン */
.recruit-route-card {
  flex: 1;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 32px;
  position: relative;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.recruit-badge {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 4px;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 14px;
  letter-spacing: 0.05em;
}

.recruit-badge--unity {
  background-color: #1e3a8a; /* 統一試験：ブルー */
}

.recruit-badge--original {
  background-color: var(--color-main, #7fa32f); /* 独自試験：学芸大グリーン */
}

.recruit-route-title {
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.recruit-route-text {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

.recruit-route-list {
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
  color: #334155;
  border-top: 1px dashed #e2e8f0;
  padding-top: 16px;
}

.recruit-route-list li {
  margin-bottom: 8px;
  list-style-type: disc;
}

.recruit-route-list li:last-child {
  margin-bottom: 0;
}

/* ==========================================
  タイムライン（縦型ステップ）
========================================== */
.recruit-flow {
  max-width: 1100px;
  margin: 40px auto 0;
  position: relative;
}

.recruit-flow::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 140px;
  width: 2px;
  height: calc(100% - 60px);
  background-color: #e2e8f0;
  z-index: 1;
}

.recruit-flow__item {
  display: flex;
  position: relative;
  margin-bottom: 48px;
}

.recruit-flow__item--last {
  margin-bottom: 0;
}

.recruit-flow__meta {
  width: 140px;
  flex-shrink: 0;
  padding-right: 32px;
  text-align: right;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.recruit-flow__step {
  display: inline-block;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  background-color: #1e293b;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 0 4px #ffffff;
}

.recruit-flow__step--final {
  background-color: var(--color-main, #7fa32f);
}

.recruit-flow__period {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 6px;
  font-weight: 700;
}

.recruit-flow__content {
  flex-grow: 1;
  padding-left: 32px;
  padding-top: 1px;
}

.recruit-flow__title {
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 8px 0;
}

.recruit-flow__detail {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
}

.recruit-flow__notes {
  margin: 12px 0 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: #666666;
}

.recruit-flow__notes li {
  margin-bottom: 6px;
  list-style-type: square;
}

/* ==========================================================================
   1カラム用パンフレットカード
   ========================================================================== */
.recruit-pamphlet-card {
  background-color: #fafbfc; /* メインカードより少しだけ落とした、柔らかなオフホワイト */
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 32px;
  position: relative;
  box-shadow: none; /* 目立ちすぎないよう、ふんわりしたシャドウをカット */
  box-sizing: border-box;

  display: block;
  width: 100%;
  max-width: 100%;
  margin: 32px 0 0 0;
}

/* 目立たせないための「枠線だけ」のバッジ */
.recruit-badge--pamphlet-sub {
  background-color: transparent !important; /* 塗りつぶしを解除 */
  border: 1px solid #94a3b8; /* 控えめなグレーの枠線 */
  color: #64748b !important; /* 文字色も柔らかなグレーに */
  font-size: 13px; /* メインバッジ（20px）より大幅に小さく */
  font-weight: 700;
  padding: 2px 8px;
  margin-bottom: 10px;
}

/* タイトルもメインのカード（18px）より控えめに */
.recruit-pamphlet-title {
  font-size: 16px;
  font-weight: 700;
  color: #334155;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

/* カード内のダウンロードブロック */
.recruit-pamphlet-card .recruit-download-box {
  border-top: 1px dashed #e2e8f0;
  padding-top: 20px;
  margin-top: 16px;
}

/* ==========================================
  📱 レスポンシブ対応
========================================== */
@media (max-width: 768px) {
  /* テーブルのレスポンシブ */
  .recruit-table tr {
    display: flex;
    flex-direction: column;
  }
  .recruit-table th, .recruit-table td {
    width: 100% !important;
    padding: 12px 16px;
  }
  .recruit-table th {
    padding-bottom: 0;
    font-size: 14px;
    color: var(--color-main, #7fa32f);
  }
  .recruit-table td {
    border-bottom: 1px solid #f1f5f9;
  }

  /* 💡 ルート案内をスマホ用に縦並びにする */
  .recruit-route-container {
    flex-direction: column;
    gap: 16px;
    padding: 0 16px;
  }
  .recruit-route-intro {
    padding: 0 16px;
    text-align: left;
    font-size: 14px;
  }
  /* 💡【カードの見た目を修正】縦並びを保証し、幅を100%にします */
  .recruit-route-card {
    display: flex;
    flex-direction: column; /* 縦並びに強制変更 */
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
  }

  /* タイムラインのレスポンシブ */
  .recruit-flow::before {
    left: 20px;
    top: 24px;
    height: calc(100% - 48px);
  }
  
  .recruit-flow__item {
    position: relative; 
    display: flex;
    flex-direction: column;
    padding-left: 56px; /* 💡左側の余白を少しだけ広げます */
    margin-bottom: 36px;
  }
  
  /* 💡【超重要】ここを修正：STEPの箱に最低限の高さを出すか、非表示にならないようにします */
  .recruit-flow__meta {
    width: auto;
    text-align: left;
    padding-right: 0;
    margin-bottom: 8px; /* 💡タイトルの上に8pxの隙間を作って、重なりを防止します */
    min-height: 28px;   /* 💡STEPの丸いバッジと同じくらいの高さを確保して、タイトルが上に食い込むのを防ぎます */
  }

  /* 💡【重なり防止】丸いステップの位置を完全に固定 */
  .recruit-flow__step {
    position: absolute;
    left: 0;   /* 💡親要素（item）の左端(0)に固定します */
    top: 0;
    transform: none !important; /* 💡PC版のセンター寄せ(translateX)を完全に無効化 */
  }
  .recruit-flow__period {
    margin-top: 0;
    display: inline-block;
    background-color: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
  }
  /* 💡本文の箱が左にめり込まないように位置をリセット */
  .recruit-flow__content {
    padding-left: 0;
    width: 100%;
    box-sizing: border-box;
  }
  .recruit-flow__title {
    margin-top: 0; /* 余計な上のマージンがあればリセット */
  }

  .recruit-notice {
    margin: 10px 0 ;
    padding: 14px 16px;
    font-size: 15px;
    text-align: left;
  }

  .recruit-notice strong {
    font-size: 16px;
  }

  .recruit-notice::before {
    display: inline-block;
    margin-bottom: 8px;
  }

  .recruit-pamphlet-card {
    padding: 20px;       /* 縦並びになった他のカード（20px）と内側の余白を揃える */
    margin-top: 16px;    /* カード間の隙間（gap: 16px）と統一 */
    margin-left: 16px;   /* 親のコンテナが持っている左右のインデント（16px）と合わせる */
    margin-right: 16px;  /* 親のコンテナが持っている左右のインデント（16px）と合わせる */
    width: calc(100% - 32px); /* 左右の余白分（16px × 2）を引いて完璧にフィットさせる */
    box-sizing: border-box;
  }
}

/* ==========================================
  FAQ（よくあるご質問）専用スタイル
========================================== */

/* カテゴリごとのブロック */
.faq-category {
  max-width: 1000px;
  margin: 0 auto 56px;
}

.faq-category:last-of-type {
  margin-bottom: 0;
}

/* カテゴリ見出し */
.faq-category__title {
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  border-left: 4px solid var(--color-main, #7fa32f);
  padding-left: 12px;
  margin: 0 0 24px 0;
  line-height: 1.4;
}

/* FAQリストコンテナ */
.faq-list {
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
}

/* 1つの質問・回答の枠 */
.faq-item {
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}

/* 質問エリア（ボタン） */
.faq-item__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  background: transparent;
  border: none;
  outline: none;
  padding: 24px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
}

/* Qアイコンの装飾 */
.faq-item__question::before {
  content: 'Q';
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--color-main, #7fa32f);
  font-weight: 800;
  font-size: 20px;
  margin-right: 16px;
  flex-shrink: 0;
}

/* 質問文のテキスト */
.faq-item__question span {
  flex-grow: 1;
  padding-right: 40px;
  line-height: 1.5;
}

/* 右端の開閉矢印アイコン */
.faq-item__question::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-50%) rotate(45deg);
  margin-top: -4px;
  transition: transform 0.2s ease;
  position: absolute;
  right: 24px;
  top: 50%;
}

/* 回答エリア（デフォルト非表示） */
.faq-item__answer {
  display: none;
  background-color: #f8fafc;
}

/* 回答の内枠余白 */
.faq-item__answer-inner {
  padding: 24px 24px 24px 52px;
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
}

.faq-item__answer-inner p {
  margin: 0 0 12px 0;
}
.faq-item__answer-inner p:last-child {
  margin-bottom: 0;
}

/* ==========================================
  JavaScript連動時のアクティブ状態（開いたとき）
========================================== */
.faq-item.is-active .faq-item__answer {
  display: block;
}

.faq-item.is-active .faq-item__question {
  background-color: #f1f5f9;
  color: #111111;
}

/* 開いたときに矢印を上に向ける */
.faq-item.is-active .faq-item__question::after {
  transform: translateY(-50%) rotate(-135deg);
  margin-top: 2px;
}

/* ==========================================
  📱 FAQスマホ用レスポンシブ
========================================== */
@media (max-width: 768px) {
  .faq-category {
    margin-bottom: 40px;
    padding: 0 16px;
  }
  
  .faq-category__title {
    font-size: 18px;
  }
  
  .faq-item__question {
    padding: 18px 12px;
    font-size: 14.5px;
  }
  
  .faq-item__question::before {
    font-size: 18px;
    margin-right: 10px;
  }
  
  .faq-item__answer-inner {
    padding: 16px 16px 16px 40px;
    font-size: 14px;
  }
}

/* ==========================================
  就活セクハラ防止への取組み（100%独立スタイル）
========================================== */

/* 💡 HTMLのstyleから移行：セクション1の背景と上下の境界線 */
.section--harassment-bg {
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  background-color: #fafafa;
}

/* セクションの大見出し（💡 下線と余白の指定をこちらに完全集約） */
.harassment-main-title {
  font-size: 24px;
  font-weight: 700;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 12px;
  margin-top: 0;
  margin-bottom: 32px;
  color: #111111;
}

/* 導入文のブロック */
.harassment-block {
  margin-bottom: 32px;
}

.harassment-lead {
  font-size: 16px;
  line-height: 1.8;
  color: #111111;
  margin-bottom: 16px;
}

.harassment-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: #4b5563;
}

/* 相談窓口のグレーのハコ */
.harassment-box {
  background-color: #f1f5f9;
  border-left: 4px solid #64748b;
  padding: 24px;
  border-radius: 4px;
  margin-top: 32px;
}

.harassment-box__title {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* 窓口内のテーブル装飾 */
.harassment-table {
  max-width: 100%;
  margin-top: 16px;
  background: #ffffff;
  border-radius: 6px;
  border-collapse: collapse;
  width: 100%;
}

.harassment-table th,
.harassment-table td {
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  text-align: left;
}

.harassment-table th {
  background: #f8fafc;
  font-weight: 700;
  color: #1e293b;
  font-size: 14px;
}

.harassment-table td {
  font-size: 14.5px;
  color: #1f2937;
}

.harassment-table__th-dept {
  width: 25%;
}

.harassment-table__mail-link {
  color: #1e3a8a;
  font-weight: bold;
  text-decoration: none;
}

.harassment-table__mail-link:hover {
  text-decoration: underline;
}

.harassment-table__notice-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: #4b5563;
}

/* 対応フロー（簡易タイムライン） */
.harassment-flow {
  max-width: 1200px;
  margin-top: 24px;
  margin-left: 8px;
}

.harassment-flow__item {
  display: flex;
  position: relative;
  padding-left: 50px;
  padding-bottom: var(--space-lg);
  border-left: 2px solid #e2e8f0; /* 縦のライン */
}

/* タイムラインの最後の項目（縦線を消す） */
.harassment-flow__item--last {
  border-left: none;
  padding-bottom: 0;
}

/* タイムラインの左側の数字バッジ */
.harassment-flow__meta {
  position: absolute;
  left: -20px; /* ラインの真上に重ねる調整 */
  top: 0;
}

.harassment-flow__step {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  background-color: #475569;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* ステップ03用の赤色バッジ */
.harassment-flow__step--alert {
  background-color: #dc2626;
}

.harassment-flow__content {
  padding-top: 2px;
}

.harassment-flow__title {
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  margin: 0 0 6px 0;
}

.harassment-flow__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0;
}

/* ==========================================
  📱 スマホ用レスポンシブ調整
========================================== */
@media (max-width: 768px) {
  .harassment-main-title {
    font-size: 20px;
    margin-bottom: 24px;
  }
  .harassment-box {
    padding: 16px;
  }
  .harassment-lead {
    font-size: 14.5px;
  }
  .harassment-text {
    font-size: 13.5px;
  }
  .harassment-flow__item {
    padding-left: 24px;
  }
  .harassment-flow__item--last {
    padding-left: 26px;
  }
  .harassment-table th,
  .harassment-table td {
    padding: 10px 12px;
    font-size: 13.5px;
  }
  .harassment-table__th-dept {
    width: 30%;
  }
}



/* ==========================================
  🗺️ アクセスページ専用スタイル（京大オマージュ）
========================================== */

.access {
  padding: 60px 0;
  background-color: #ffffff;
}

/* 1. マップエリア */
.access__map-wrapper {
  margin-bottom: 50px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.access__map-dummy {
  background-color: #f1f5f9;
  height: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* 2. 交通ルート概要（京大風カード並び） */
.access__sub-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 24px;
  padding-left: 10px;
  border-left: 4px solid #38bdf8;
}

.route-grid {
  display: flex;
  gap: 24px;
  margin-bottom: 50px;
}

.route-card {
  flex: 1;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.route-card__start {
  font-size: 14px;
  color: #475569;
}
.route-card__start strong {
  display: block;
  font-size: 18px;
  color: #1e293b;
  margin-top: 4px;
}

.route-card__arrow {
  position: relative;
  font-size: 12px;
  color: #0284c7;
  padding: 12px 0;
  margin: 12px 0;
  border-top: 1px dashed #cbd5e1;
  border-bottom: 1px dashed #cbd5e1;
}

.route-card__end {
  font-size: 16px;
  font-weight: 700;
  color: #1e3a8a;
}

/* 3. 駅別詳細案内ボックス */
.access__details {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.access__station-box {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.access__station-header {
  background-color: #1e293b; /* どっしりしたダークネイビー */
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}

.station-tag {
  background-color: #38bdf8; /* 水色のアクセントタグ */
  color: #1e293b;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.access__station-header h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.access__station-content {
  padding: 24px;
  background-color: #ffffff;
}

.access__method {
  margin-bottom: 24px;
}
.access__method:last-child {
  margin-bottom: 0;
}

.access__method h5 {
  font-size: 15px;
  font-weight: 700;
  color: #1e3a8a;
  margin: 0 0 12px 0;
}

.access__bus-gate {
  font-size: 14px;
  background-color: #f0f9ff;
  border-left: 3px solid #0284c7;
  padding: 8px 12px;
  margin: 0 0 12px 0;
  color: #0369a1;
}

.access__list {
  padding-left: 20px;
  margin: 0;
}

.access__list li {
  font-size: 14px;
  color: #334155;
  margin-bottom: 8px;
  line-height: 1.5;
}
.access__list li:last-child {
  margin-bottom: 0;
}


/* ==========================================
  📱 スマホサイズ（768px以下）のレスポンシブ
========================================== */
@media (max-width: 768px) {
  .access__map-dummy {
    height: 280px;
  }

  /* 交通ルートの横並びを縦一列に */
  .route-grid {
    flex-direction: column;
    gap: 16px;
  }

  .access__station-header {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .access__station-content {
    padding: 16px;
  }
}


/* ==========================================
  🏷️ インタビュー「#タグ検索」システム用スタイル
========================================== */

/* ボタンリンクの初期リセットと調整 */
.interview-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.interview-nav__btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* タグが選択されている時のアクティブカラー */
.interview-nav__btn.active,
.interview-nav__btn:hover {
  background-color: #1e3a8a; /* 学芸大のネイビー */
  border-color: #1e3a8a;
  color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(30, 58, 138, 0.2);
}

/* カード内に表示する#ハッシュタグのデザイン */
.interview-card__tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}

.interview-card__tags-display span {
  font-size: 12px;
  color: #0284c7; /* 鮮やかなライトブルー */
  background-color: #f0f9ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}

/* JSで非表示（フィルターアウト）にする際のアニメーション挙動 */
.interview-card {
  transition: opacity 0s ease, transform 0s ease, visibility 0s ease;
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

/* 選択されなかったカードは画面から綺麗に消去する */
.interview-card.is-hidden {
  opacity: 0;
  transform: scale(0.9);
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

/* グリッド自体の高さを自動で詰める設定 */
.interview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 30px;
  position: relative; /* 子の隠蔽を綺麗にするため */
}


/* ==========================================
  💼 業務経歴：履歴書（キャリアシート）風専用スタイル【完全版】
========================================== */

/* 1. ブロック全体のレイアウト設定 */
.career-resume {
  margin: 50px 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2. 見出し部分（下線：学芸大ネイビー） */
.career-resume__header {
  padding-bottom: 8px;
}

/* 英語のサブタイトル */
.career-resume__title-en {
  display: block;
  font-size: 12px;
  color: #1e3a8a;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  text-transform: uppercase; /* 小文字で書かれても大文字に統一 */
}

/* 3. 履歴書テーブル本体（外枠のグレー線） */
.career-resume__table {
  border: 1px solid #cbd5e1;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* ほんの少しだけ影をつけて立体感をもたせる */
}

/* 4. 履歴書の「行」の並び設定（横並び） */
.career-resume__row {
  display: flex;
  border-bottom: 1px solid #e2e8f0; /* 行同士を区切る横の罫線 */
  transition: background-color 0.2s ease;
}

/* 最後の行は一番下の外枠と重なって太くなるのを防ぐため、下線を消去 */
.career-resume__row:last-child {
  border-bottom: none;
}

/* 💡 出向の行（他機関での経験）だけ背景を薄いグレーにして引き締める */
.career-resume__row--highlight {
  background-color: #f8fafc;
}

/* 5. 左側：年月が入るセル（履歴書の「年・月」欄） */
.career-resume__date {
  flex-shrink: 0;
  width: 150px; /* 横幅を150pxでガチッと固定し、改行を防ぐ */
  padding: 20px;
  background-color: #f1f5f9; /* 履歴書らしさを演出するセル背景色 */
  border-right: 1px solid #cbd5e1; /* 年月と中身を分ける縦の罫線 */
  display: flex;
  align-items: center; /* 年月を縦方向に対して常に中央揃えにする */
}

/* 年月のテキストデザイン */
.career-resume__date span {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  text-align: left; /* ご要望通り確実に左に寄せる */
  line-height: 1.4;
  display: block;
  width: 100%;
}

/* 6. 右側：職務・配属内容が入るセル */
.career-resume__content {
  flex-grow: 1;
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 中身が少なくても縦中央に綺麗に収める */
}

/* 職名・配属部署のタイトル（太字） */
.career-resume__job {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.4;
}

/* 出向している行のタイトルは、より引き立つようにアクセントカラー（青）にする */
.career-resume__row--highlight .career-resume__job {
  color: #0284c7;
}

/* 業務内容の具体的な説明テキスト */
.career-resume__desc {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}


/* ==========================================
  📱 スマートフォン表示（画面横幅が600px以下のとき）
========================================== */
@media screen and (max-width: 600px) {
  /* 全体の上下余白をスマホ向けに少し縮める */
  .career-resume {
    margin: 35px 0;
  }

  /* 左右並びを解除して縦並び（一般的なスマホ用フォーマット）に変換 */
  .career-resume__row {
    flex-direction: column;
  }

  /* 年月エリアを横幅100%にして、すっきり見せる */
  .career-resume__date {
    width: 100%;
    padding: 12px 15px;
    border-right: none; /* 縦線を消す */
    border-bottom: 1px solid #e2e8f0; /* 代わりに下線を敷いて区切る */
    background-color: #f8fafc; /* スマホ時は少し明るめのグレーにして圧迫感を減らす */
  }

  /* 右側のコンテンツエリアの余白をスマホ向けに最適化 */
  .career-resume__content {
    padding: 15px;
  }

  /* スマホでの文字サイズ微調整 */
  .career-resume__job {
    font-size: 15px;
    margin-bottom: 6px;
  }

  .career-resume__desc {
    font-size: 13px;
  }
}

/* ==========================================
  💡 出向のオススメポイント専用スタイル（カード型）
========================================== */
.ex-points {
  margin: 100px 0;
  box-sizing: border-box;
}

/* タイトル部分 */
.ex-points__header {
  margin-bottom: 30px;
}

.ex-points__title-en {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-main);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.ex-points__main-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

/* カードを横に3つ並べるコンテナ（Flexbox） */
.ex-points__container {
  display: flex;
  gap: 20px; /* カード同士の隙間 */
}

/* カード1枚ずつの設定 */
.ex-points__card {
  flex: 1; /* 3つのカードを均等な横幅にする */
  background-color: #f8fafc; /* 上品なごく薄いグレー */
  border-top: 4px solid var(--color-main); /* カードの頭にアクセントカラーの線を敷く */
  border-radius: 0 0 6px 6px;
  padding: 25px 20px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 大きな数字の装飾 */
.ex-points__num {
  font-size: 32px;
  font-weight: 800;
  color: #ced4db; /* 主張しすぎない薄いグレー */
  line-height: 1;
  margin-bottom: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* カード内のタイトル */
.ex-points__card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-main);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

/* カード内の説明文 */
.ex-points__card-text {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}

/* 📱 スマートフォン表示（画面幅600px以下）の時は縦並びに変更 */
@media screen and (max-width: 600px) {
  .ex-points__container {
    flex-direction: column;
    gap: 15px;
  }
  
  .ex-points__card {
    padding: 20px;
  }
  
  .ex-points__card-title br {
    display: none; /* スマホでは不自然な改行を消す */
  }
}