/* =================================================================
   about.css
   About ページ（about.html）固有のスタイル
   白基調：拠点紹介 → Our Philosophy → 拠点長メッセージ → 分野横断ハブ
   ================================================================= */

body {
  background-color: #ffffff;
  line-height: 1.8;
}

footer { text-align: center; }

/* =================================================================
   各セクションは中央配置のコンテナ（max-width 1000px）＋テキスト左揃え。
   画像（拠点長写真・概念図）は右置き。
   ================================================================= */

/* ----- Our Philosophy ---------------------------------------------- */
.section-content {
  padding: 30px 8vw 90px;
  max-width: 1000px;
  margin: 0 auto;
  background-color: #ffffff;
  text-align: left;
}
.section-title {
  font-size: 1rem;
  color: var(--waseda-red);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.catchphrase {
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1.6;
  margin: 0 0 40px;
  color: var(--dark-navy);
}
.text-block {
  font-size: 1.05rem;
  color: #555;
  text-align: justify;
  margin: 0;
  max-width: 760px;
}

/* ----- 拠点長メッセージ（グレー帯・中身は中央配置） ---------------- */
.message-section {
  padding: 100px 8vw;
  background-color: var(--light-gray);
}
/* 帯は全幅のまま、中身だけ他セクションと同じ幅で中央に */
.message-section .section-title {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.message-container {
  display: flex;
  flex-direction: row-reverse; /* 写真は右置き */
  gap: 60px;
  align-items: flex-start;
  max-width: 1000px;
  margin: 50px auto 0;
}
.message-portrait {
  flex-shrink: 0;
  width: 240px;
  height: 300px;
  background-color: #e9ecef;
  border-radius: 6px;
  overflow: hidden; /* 中身がどんなサイズでも枠外にはみ出させない */
  /* 写真がない場合のプレースホルダー */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 4rem;
}
.message-body { flex: 1; }
.message-body p {
  font-size: 1.05rem;
  color: var(--text-main);
  margin: 0 0 20px 0;
  text-align: justify;
}
.message-signature {
  margin-top: 30px !important;
  text-align: right;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.message-signature strong {
  display: block;
  font-size: 1.3rem;
  color: var(--dark-navy);
  margin-top: 5px;
}

/* ----- 分野横断ハブ（Cross-Disciplinary Hub） ---------------------- */
/* テキスト（左）＋概念図（右横）。図は多少テキスト側に重なってよい */
.connect-section {
  background: #ffffff;
  padding: 100px 8vw;
  text-align: left;
}
.connect-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
}
.connect-copy {
  flex: 0 0 46%;
  position: relative;
  z-index: 1; /* 図が重なってもテキストを前面に */
  background: rgba(255, 255, 255, 0.86); /* 半透明の白背景：重なった図がうっすら透ける */
  padding: 30px 36px 30px 0;
  border-radius: 0 6px 6px 0;
  box-sizing: border-box;
}
.connect-lead {
  font-size: 2rem;
  font-weight: 300;
  color: var(--dark-navy);
  line-height: 1.5;
  margin: 10px 0 30px;
}
.connect-text {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.9;
  text-align: justify;
}
.hub-graphic {
  flex: 1;
  min-width: 0;
  margin-left: -70px; /* 図をテキスト側に少し重ねる */
}
.hub-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 420 / 560; /* 縦型レイアウトの viewBox 比を確保 */
  max-width: 420px;
  display: block;
  margin: 0 auto;
}

/* ----- スマホ対応（768px以下） ------------------------------------ */
@media (max-width: 768px) {
  .section-content { padding: 15px 7vw 70px; }
  .catchphrase { font-size: 1.55rem; }
  .message-section { padding: 70px 7vw; }
  .message-container { flex-direction: column; align-items: center; gap: 30px; }
  .message-portrait { width: 180px; height: 220px; }
  .connect-section { padding: 70px 7vw; }
  .connect-lead { font-size: 1.5rem; }
  .connect-inner { flex-direction: column; align-items: stretch; gap: 34px; }
  .connect-copy { flex: none; background: none; padding: 0; } /* 縦積みでは重ならないので背景不要 */
  .hub-graphic { margin-left: 0; }
  .hub-svg { max-width: 340px; }
}

/* ----- 見出しのアクセント画像（page-head 右上） ------------------- */
.page-accent { background-image: url('../images/earth.jpeg'); }

/* 拠点長の写真（枠にフィットさせ、はみ出しはトリミング） */
.message-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}