/* ==========================================================================
   about.css — About ページ専用スタイル
   読み込み: is_page('about') のときのみ enqueue.php で読み込まれる
   依存: base.css > layout.css > components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   ページ共通
   -------------------------------------------------------------------------- */
.l-main--about {
  padding-block: 0;
}


/* --------------------------------------------------------------------------
   2. 代表メッセージ（.p-about-message）
   -------------------------------------------------------------------------- */
.p-about-message {
  background-color: var(--color-surface);
}

.p-about-message .l-section__header {
  text-align: left;
}

.p-about-message__inner {
  max-width: 720px;
  margin-inline: auto;
}

/* 引用フレーズ */
.p-about-message__quote {
  margin-block: var(--space-8);
  padding-left: var(--space-6);
  border-left: 4px solid var(--color-primary);
}

.p-about-message__quote-text {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* 本文 */
.p-about-message__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.p-about-message__body p {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.9;
}

/* 署名 */
.p-about-message__signature {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.p-about-message__signature-company {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.p-about-message__signature-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.06em;
}

@media (max-width: 767px) {
  .p-about-message__quote-text {
    font-size: var(--text-lg);
  }

  .p-about-message .l-section__header {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   3. 創業の経緯と思想（.p-about-origin）
   -------------------------------------------------------------------------- */
.p-about-origin {
  background-color: var(--color-bg);
}

.p-about-origin__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.p-about-origin__item {
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.p-about-origin__number {
  display: block;
  font-family: var(--font-en);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.p-about-origin__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.p-about-origin__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
}

@media (max-width: 1023px) {
  .p-about-origin__list {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin-inline: auto;
    gap: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   4. Yamato Works の特長（.p-about-strength）
   -------------------------------------------------------------------------- */
.p-about-strength {
  background-color: var(--color-surface);
}

.p-about-strength__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.p-about-strength__item {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
}

.p-about-strength__number {
  display: block;
  font-family: var(--font-en);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.p-about-strength__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.p-about-strength__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
}

@media (max-width: 767px) {
  .p-about-strength__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   サービスブリッジ（.p-about-service-bridge）
   -------------------------------------------------------------------------- */
.p-about-service-bridge {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.p-about-service-bridge__lead {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-8);
}

.p-about-service-bridge__desc {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.85;
}

.p-about-service-bridge__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

@media (max-width: 767px) {
  .p-about-service-bridge__actions {
    flex-direction: column;
    align-items: center;
  }

  .p-about-service-bridge__actions .c-button {
    width: 100%;
    max-width: 320px;
  }
}

/* --------------------------------------------------------------------------
   5. 代表プロフィール（.p-about-profile）
   -------------------------------------------------------------------------- */
.p-about-profile {
  background-color: var(--color-bg);
}

.p-about-profile__card {
  display: flex;
  gap: var(--space-8);
  max-width: 840px;
  margin-inline: auto;
  align-items: flex-start;
}

/* 写真エリア */
.p-about-profile__photo-wrap {
  flex-shrink: 0;
}

.p-about-profile__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.p-about-profile__photo-placeholder {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.p-about-profile__photo-initials {
  font-family: var(--font-en);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
}

/* プロフィール情報 */
.p-about-profile__body {
  flex: 1;
}

.p-about-profile__name-block {
  margin-bottom: var(--space-1);
}

.p-about-profile__name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.p-about-profile__name-en {
  font-family: var(--font-en);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

.p-about-profile__role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

/* DL */
.p-about-profile__dl {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-4);
}

.p-about-profile__dl-item {
  display: grid;
  grid-template-columns: 4em 1fr;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.p-about-profile__dt {
  font-weight: 500;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.p-about-profile__dd {
  color: var(--color-text);
}

/* 経験領域タグ */
.p-about-profile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.p-about-profile__tag {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: 2px 10px;
  border-radius: 2px;
  letter-spacing: 0.05em;
}

/* バイオ */
.p-about-profile__bio-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.p-about-profile__bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
}

@media (max-width: 767px) {
  .p-about-profile__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-6);
  }

  .p-about-profile__dl-item {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .p-about-profile__dt::after {
    content: '：';
  }

  .p-about-profile__bio {
    text-align: left;
  }

  .p-about-profile__tags {
    justify-content: center;
  }
}