@charset "UTF-8";
/* ==========================================================================
  About page（section / card / contact-box は style.css の共通スタイルを利用）
========================================================================== */

/* ファーストビュー */
.about-hero {
  /* 上は他の下層ページ（.page）と同じ、下はトップのセクション間隔と同じ */
  padding: calc(var(--header-h) + 60px) 0 80px;
}
.about-hero h1 {
  margin: 10px 0 20px;
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.04em;
}
.about-hero__lead {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--muted);
}

/* 他の下層ページ（price / portfolio / knowledge）と同じく、要素はコンテナ幅いっぱいに使う。
   style.css の .section-head の最大幅（95ch）もこのページでは外す */
.about-page .section-head {
  max-width: none;
}

/* 読み物の本文：濃い色の本文が続くため、見出しとの間は詳細ページ（22px）に近い20px。行間はトップと同じ1.9 */
.about-text {
  margin-top: 20px;
}
.about-text p {
  margin: 0;
  line-height: 1.9;
}
.about-text p + p {
  margin-top: 12px;
}

/* 社名の由来（幅は Values のカードと同じコンテナ全幅） */
.about-origin {
  padding: 24px 28px;
  border-left: 3px solid var(--accent);
  border-radius: 0 16px 16px 0;
  background: var(--accent-soft);
}
.about-origin h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
}
.about-origin p {
  margin: 0;
  line-height: 1.9;
}

/* 大切にしていること（4項目） */
.cards.cards--values {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cards.cards--values {
  margin-top: 26px; /* トップの Service カードと同じ */
}
.cards--values .card {
  padding: 36px 32px;
}
@media (hover: hover) and (pointer: fine) {
  .cards--values .card:hover {
    transform: none; /* リンクではないので浮かせない */
  }
}
.about-note {
  margin: 26px 0 0;
  line-height: 2;
  color: var(--muted);
}

/* 代表メッセージの署名 */
.about-sign {
  margin: 0;
  text-align: right;
  line-height: 1.8;
}
.about-sign span {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
}
.about-sign strong {
  font-size: 1.15rem;
  letter-spacing: 0.12em;
}

/* 最後のCTA */
.about-cta h2 {
  margin: 0 0 8px;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.5;
}
.about-cta p {
  margin: 0;
}
.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 820px) {
  .about-origin {
    padding: 20px;
  }
  .about-hero {
    padding: calc(var(--header-h) + 48px) 0 60px;
  }
  .cards.cards--values {
    grid-template-columns: 1fr;
  }
  .about-cta__actions {
    justify-content: center;
  }
}