/* ==========================================================================
   research.css
   研究内容ページ固有のスタイル（.pg-research .sect-* スコープ）
   - 共通のものは common.css に書く。ここは research 単体の装飾のみ。
   - media query は SP(max-width:1023px) → PC(min-width:1024px) の順。
   - 仕様: docs/css-architecture.md／design/page-research.md
   ========================================================================== */

/* research.html 独自：page-hero にオーバーレイ無し（背景写真の地の暗さで十分なため） */
.pg-research .page-hero::before {
  background: none;
}

/* === lead（rack：SP/PC共通1カラム。下部を区切り線で分ける） ================ */
/* 本体は common.css の .page-lead 共通パーツ。research のみ中央寄せテキストにする上書き。 */
.pg-research .page-lead__text {
  text-align: center;
}

/* === projects（rack：タイトルを全幅で上に独立／fluid：写真＋本文はSP縦積み・PC 2カラムgrid） === */
.pg-research .sect-research-projects__list {
  display: flex;
  flex-direction: column;
}
.pg-research .sect-research-projects__item {
  padding-block: 48px;
  border-bottom: 1px solid var(--color-border);
  /* indexのResearchカードから#detail-0Nへアンカー遷移した際、fixedヘッダーに隠れないための余白 */
  scroll-margin-top: 90px;
}
.pg-research .sect-research-projects__item--last {
  border-bottom: none;
}
/* タイトルブロック（全幅・title-enのmargin-bottomがbodyとの間隔を兼ねる） */
.pg-research .sect-research-projects__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.pg-research .sect-research-projects__title {
  margin-bottom: 10px;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-navy);
}
.pg-research .sect-research-projects__title-en {
  margin-bottom: 28px;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}
.pg-research .sect-research-projects__photo {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-surface);
}
.pg-research .sect-research-projects__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 右カラム：説明文＋タグ */
.pg-research .sect-research-projects__right {
  display: flex;
  flex-direction: column;
}
.pg-research .sect-research-projects__desc {
  margin-bottom: 24px;
  font-size: 1rem;
  line-height: 2.2;
}
.pg-research .sect-research-projects__desc-en {
  margin-bottom: 28px;
  font-size: 0.875rem;
  line-height: 2;
  color: var(--color-secondary);
}
@media (min-width: 1024px) {
  .pg-research .sect-research-projects__item {
    padding-block: 64px;
  }
  /* PCは説明文量が多いため、写真を左に浮かせて文章が囲むように回り込ませる（floatの許容例外） */
  .pg-research .sect-research-projects__body {
    display: block;
    overflow: hidden;
  }
  .pg-research .sect-research-projects__photo {
    float: left;
    width: 560px;
    max-width: none;
    margin: 0 40px 24px 0;
  }
  .pg-research .sect-research-projects__right {
    display: block;
  }
}

/* === EN版（research-en.html）専用の装飾 =====================================
   research-en.html は body に `.pg-research` と `.pg-research-en` の両方を持つため、
   上記の `.pg-research` ルールがそのまま適用される（レイアウト・余白等はJA版と共通）。
   英語コンテンツだけに必要な微調整（英文が長くなる場合の line-height / max-width 等）
   がある場合のみ、ここに `.pg-research-en .sect-xxx { ... }` として追記する。
   現時点は調整不要のため未使用。 */