/**
 * teachers.html 色修正用CSS
 * 展開エリア全体を白背景・黒文字にして読みやすく
 */

/* ========================================
   展開エリア全体のスタイル
   ======================================== */


#people-overlay {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 展開時の詳細情報エリアを白（ちょっとアイボリー寄り）背景に */
.people .v-expandable-hidden {
  background-color: #ffeee8 !important;  /* 白背景 */
  padding: 20px !important;
  border-radius: 8px !important;
  margin-top: 0px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;  /* 軽い影 */
}

/* 展開エリア内のすべてのテキストを黒に */
.people .v-expandable-hidden h5,
.people .v-expandable-hidden p,
.people .v-expandable-hidden div,
.people .v-expandable-hidden span {
  color: #333 !important;  /* 濃いグレー（読みやすい） */
}

/* 見出し（出身、趣味など）をさらに強調 */
.people .v-expandable-hidden h5 {
  color: #000 !important;  /* 真っ黒 */
  font-weight: bold !important;
  border-bottom: 2px solid #009900 !important;  /* 4Csのグリーンのアンダーライン */
  padding-bottom: 5px !important;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}

/* 最初の見出しの上マージンを削除 */
.people .v-expandable-hidden h5:first-of-type {
  margin-top: 0 !important;
}

/* 本文テキストの可読性向上 */
.people .v-expandable-hidden p {
  line-height: 1.8 !important;  /* 行間を広げる */
  margin-bottom: 15px !important;
}

/* ========================================
   プロフィール画像エリア
   ======================================== */

/* 画像の表示エリア */
.people .person-info {
  background-color: #f8f8f8 !important;  /* 薄いグレー背景 */
  padding: 10px !important;
  border-radius: 8px !important;
  margin-bottom: 10px !important;
}

/* ========================================
   レスポンシブ対応
   ======================================== */

/* スマホでの余白調整 */
@media (max-width: 767px) {
  .people .v-expandable-hidden {
    padding: 15px !important;
  }
  
  .people .v-expandable-hidden h5 {
    font-size: 16px !important;
  }
  
  .people .v-expandable-hidden p {
    font-size: 14px !important;
  }
}