/**
 * 私たちについてページ専用スタイル
 */

/* ========================================
   アバウトヒーロー
   ======================================== */

.about-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  padding: var(--spacing-xxl) 0;
  background:
    linear-gradient(135deg, rgba(0, 81, 189, 0.70) 0%, rgba(255, 107, 53, 0.50) 100%),
    url('../images/about/about-hero.jpg') center/cover;
  color: var(--color-white);
  text-align: center;
  overflow: hidden;
}

.about-hero h1 {
  color: var(--color-white);
  margin-bottom: var(--spacing-m);
}

.about-hero-tagline {
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  margin-bottom: var(--spacing-m);
}

.about-hero p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
  margin: 0 auto;
  line-height: var(--line-height-body);
}

/* ========================================
   ミッション・哲学セクション
   ======================================== */

.about-mission {
  padding: var(--spacing-xl) 0;
}

.about-mission-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.about-mission h2 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-l);
}

.about-mission p {
  font-size: 18px;
  line-height: var(--line-height-body);
  color: var(--color-dark-gray);
  margin-bottom: var(--spacing-m);
}

/* ========================================
   伴走型アプローチ
   ======================================== */

.about-approach {
  padding: var(--spacing-xl) 0;
  background-color: var(--color-light-gray);
}

.about-approach h2 {
  text-align: center;
  color: var(--color-primary);
  margin-bottom: var(--spacing-l);
}

.about-approach-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-l);
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .about-approach-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .about-approach-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.about-approach-step {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-l);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-normal);
}

.about-approach-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.about-approach-step-number {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--spacing-m) auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
}

.about-approach-step-title {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-s);
}

.about-approach-step-description {
  font-size: 14px;
  color: var(--color-dark-gray);
  line-height: var(--line-height-body);
}

/* ========================================
   強み・実績
   ======================================== */

.about-strengths {
  padding: var(--spacing-xl) 0;
}

.about-strengths h2 {
  text-align: center;
  color: var(--color-primary);
  margin-bottom: var(--spacing-l);
}

.about-strengths-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-l);
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .about-strengths-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.about-strength-item {
  text-align: center;
  padding: var(--spacing-l);
}

.about-strength-icon {
  font-size: 48px;
  margin-bottom: var(--spacing-m);
}

.about-strength-title {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-s);
}

.about-strength-description {
  font-size: 14px;
  color: var(--color-dark-gray);
  line-height: var(--line-height-body);
}

/* ========================================
   実績数値
   ======================================== */

.about-stats {
  padding: var(--spacing-xl) 0;
  background-color: var(--color-light-gray);
}

.about-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-l);
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .about-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.about-stat-item {
  text-align: center;
  padding: var(--spacing-m);
}

.about-stat-number {
  font-size: 48px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  margin-bottom: var(--spacing-s);
}

.about-stat-label {
  font-size: 16px;
  color: var(--color-dark-gray);
}

/* ========================================
   チームメンバー
   ======================================== */

.about-team {
  padding: var(--spacing-xl) 0;
}

.about-team h2 {
  text-align: center;
  color: var(--color-primary);
  margin-bottom: var(--spacing-l);
}

.about-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-l);
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .about-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .about-team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.about-team-member {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-l);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-normal);
}

.about-team-member:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.about-team-avatar {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--spacing-m) auto;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* 実際の写真を使用する場合は、HTMLでインラインスタイルで background-image を指定 */
.about-team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.about-team-name {
  font-size: 20px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.about-team-role {
  font-size: 14px;
  color: var(--color-medium-gray);
  margin-bottom: var(--spacing-s);
}

.about-team-bio {
  font-size: 14px;
  color: var(--color-dark-gray);
  line-height: var(--line-height-body);
  text-align: left;
}

/* ========================================
   母体企業セクション
   ======================================== */

.about-parent {
  padding: var(--spacing-xl) 0;
  background-color: var(--color-light-gray);
}

.about-parent-content {
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--spacing-l);
  box-shadow: var(--shadow-card);
}

.about-parent h2 {
  color: var(--color-primary);
  margin-bottom: var(--spacing-m);
  text-align: center;
}

.about-parent h3 {
  font-size: 22px;
  color: var(--color-primary);
  margin-bottom: var(--spacing-s);
}

.about-parent p {
  line-height: var(--line-height-body);
  color: var(--color-dark-gray);
  margin-bottom: var(--spacing-m);
}

.about-parent-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-m);
  margin-top: var(--spacing-l);
}

@media (min-width: 768px) {
  .about-parent-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

.about-parent-feature {
  padding: var(--spacing-m);
  background-color: var(--color-light-gray);
  border-radius: var(--radius-card);
  border-left: 4px solid var(--color-accent);
}

.about-parent-feature-title {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-xs);
}

.about-parent-feature-description {
  font-size: 14px;
  color: var(--color-dark-gray);
  line-height: var(--line-height-body);
}

/* ========================================
   レスポンシブ調整
   ======================================== */

@media (max-width: 767px) {
  .about-hero-tagline {
    font-size: 20px;
  }

  .about-stat-number {
    font-size: 36px;
  }
}