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

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

footer { text-align: center; }

/* =================================================================
   Our Philosophy 以降は「左揃え → 右揃え → 左揃え」の交互レイアウト。
   将来ここに画像を足しても映えるよう、各ブロックを片側に寄せている。
   ================================================================= */

/* ----- Our Philosophy（左揃え） ------------------------------------ */
.section-content {
  padding: 30px 8vw 90px;
  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 { text-align: right; }
.message-container {
  display: flex;
  flex-direction: row-reverse; /* 写真を右側に（左揃えセクションとの対比） */
  gap: 60px;
  align-items: flex-start;
  margin-top: 50px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: 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: 1200px;
  margin: 0;
  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;
}