/* =========================================
   about.css - Aboutページ用スタイル
   ※ 共通スタイル(header / footer / hero-label / section-head 等)は style.css を使用
   ========================================= */

/* コンテンツ幅は読みやすさに合わせて狭めに */
.about-container { max-width: 760px; }

/* ===== Page label ===== */
.about-hero { padding: 72px 0 0; }
.about-title {
  font-size: clamp(24px, 3.5vw, 34px); font-weight: 700;
  line-height: 1.5; letter-spacing: 0.01em;
  margin-top: 8px;
}

/* ===== Intro ===== */
.about-intro { padding: 32px 0 72px; }
.about-intro p {
  font-size: 14.5px; color: var(--gray-700); line-height: 2;
}

/* ===== Profile ===== */
.about-profile { padding-bottom: 112px; }
.about-table {
  width: 100%; border-collapse: collapse;
}
.about-table th,
.about-table td {
  padding: 20px 8px; text-align: left; vertical-align: top;
  font-size: 14px; line-height: 1.8;
  border-bottom: 1px solid var(--gray-100);
}
.about-table th {
  width: 180px; font-weight: 700; color: var(--black);
  white-space: nowrap;
}
.about-table td { color: var(--gray-700); }
.about-table a {
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-300);
  transition: color .2s, border-color .2s;
}
.about-table a:hover { color: var(--accent); border-color: var(--accent); }

/* ===== Responsive ===== */
@media (max-width: 600px) {
  .about-hero { padding-top: 48px; }
  .about-intro { padding: 24px 0 56px; }
  .about-profile { padding-bottom: 80px; }
  .about-table th { width: 96px; white-space: normal; }
  .about-table th,
  .about-table td { padding: 16px 4px; font-size: 13.5px; }
}