/* academic.css — 学術的背景ページ専用スタイル
   共通レイアウトは inner.css（.inner / .section-* 系）に集約。
   ここには学術的背景ページ固有の要素のみを記述する。 */

/* ===== 05-02 Research Flow ===== */
.academic-flow-caption {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 24px;
}

.academic-flow {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 20px;
  flex-wrap: wrap;
}

.academic-flow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 100px;
}

/* フロー用アイコン画像はキャプション文字を内包している */
.academic-flow-icon {
  width: 100%;
  max-width: 124px;
}

.academic-flow-icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.academic-flow-arrow {
  flex-shrink: 0;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.academic-flow-arrow img {
  width: 16px;
  height: auto;
  opacity: 0.5;
}

/* ===== 05-01 Environment cards ===== */
.academic-env-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 28px;
}

.academic-env-card figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: 12px;
}

.academic-env-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.academic-env-card-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.academic-env-card-desc {
  font-size: 1.25rem;
  color: var(--sub-color);
  line-height: 1.7;
}

/* ===== 05-03 Activities list image (right column) ===== */
.academic-activities-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== 05-04 Network diagram ===== */
.academic-network-img {
  margin-top: 28px;
}

.academic-network-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Bottom CTA — 研究活動にご関心のある方へ ===== */
.academic-cta {
  margin-top: 64px;
}

/* 先頭の「F」を全行にまたがるドロップキャップに */
.academic-cta-head {
  display: flow-root;
  margin-bottom: 36px;
}

.academic-cta-en-title {
  font-family: var(--en-font);
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1.4;
}

.academic-cta-en-title::first-letter {
  float: left;
  font-size: clamp(10rem, 15vw, 15rem);
  line-height: 0.66;
  color: #d6d6d6;
  margin-right: 28px;
  margin-top: 0.04em;
}

.academic-cta-en {
  font-family: var(--en-font);
  font-size: 1.2rem;
  color: var(--sub-color);
  line-height: 1.8;
  margin-top: 10px;
}

.academic-cta-body {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 40px;
  align-items: start;
}

.academic-cta-jp-head {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.5;
}

.academic-cta-jp {
  font-size: 1.4rem;
  line-height: 1.9;
}

.academic-cta-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.academic-cta-cards a {
  display: block;
  border: 1px solid #e0e0e0;
  transition: opacity 0.2s;
}

.academic-cta-cards a:hover {
  opacity: 0.8;
}

.academic-cta-cards img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .academic-env-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .academic-cta-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .academic-flow {
    gap: 8px;
    justify-content: center;
  }

  .academic-flow-arrow {
    display: none;
  }

  .academic-flow-item {
    min-width: calc(33% - 8px);
    flex: none;
  }

  .academic-env-cards {
    grid-template-columns: 1fr 1fr;
  }

  .academic-cta-head {
    padding-left: 48px;
  }

  .academic-cta-cards {
    grid-template-columns: 1fr;
    max-width: 360px;
  }
}