/* ==========================================================================
   会社概要・代表プロフィール（about.html）
   ========================================================================== */

/* 見出し帯のカバー画像（PC用 2400×1018 / スマホ用 1080×1080） */
.page-header--cover {
  background-image: var(--cover-overlay), url("../assets/covers/cover-about-pc.jpg");
}

@media (max-width: 767px) {
  .page-header--cover {
    background-image: var(--cover-overlay), url("../assets/covers/cover-about-sp.jpg");
  }
}

/* 会社概要表の下はすぐCTAが続くため、下側の余白をなくして間を詰める */
.section--about {
  padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   代表メッセージ（写真 ＋ メッセージ・沿革）
   -------------------------------------------------------------------------- */
.message {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 56px;
  align-items: start;
}

.message__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  max-width: 440px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.message__eyebrow {
  font-family: var(--font-latin);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--brand-primary);
}

.message__role {
  font-size: 14px;
  color: var(--text-muted);
}

.message__name {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}

.message__name rt {
  font-size: 0.4em;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.message__text {
  margin: 0;
  font-size: var(--fs-body-lg);
  line-height: 2;
  color: var(--text-body);
  text-wrap: pretty;
}

/* 沿革 */
.history {
  border-top: 1px solid var(--border-default);
}

.history__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-default);
}

.history__year {
  font-family: var(--font-latin);
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-primary);
}

.history__text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-body);
}

/* --------------------------------------------------------------------------
   仕事の哲学
   -------------------------------------------------------------------------- */
.philosophy {
  background: var(--surface-alt);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 6vw, 72px);
}

.philosophy__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 40px;
}

.philosophy__title {
  margin: 0;
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}

/* --------------------------------------------------------------------------
   会社概要
   -------------------------------------------------------------------------- */
.profile {
  border-top: 1px solid var(--border-default);
}

.profile__row {
  display: grid;
  grid-template-columns: minmax(96px, 200px) 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-default);
  font-size: 15px;
  line-height: 1.8;
}

/* スマホでは項目名の列が最大幅まで広がり値が窮屈になるため、列幅を固定して詰める */
@media (max-width: 767px) {
  .profile__row {
    grid-template-columns: 80px 1fr;
  }
}

.profile__key {
  font-weight: 700;
  color: var(--text-heading);
}

.profile__value {
  color: var(--text-body);
}