/* about-us.html 専用CSS。
   デザインシステム(style.css)に該当コンポーネントが無いため、このページだけで使う想定で追加。 */

/* message-headline / about-prose / message-block / message-signature は
   recruit/message.htmlと共用するためsite/style.cssへ移動(2026-09-02)。 */

/* statement-band: ページ冒頭のステートメント専用の帯。page-header__lead(全ページ共通、
   幅640px)だとこの文の長さでは「プロフェッショ/ナル集団」のように不自然な位置で折り返すため、
   このページだけ背景を変えて独立させ、幅・フォントサイズを自由に取れるようにした(2026-08-31)。 */
.statement-band {
  background: var(--color-brand-700);
}
.statement-band__text {
  max-width: 880px;
  margin: 0;
  color: var(--color-surface);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.7;
}
/* nowrap: 「プロフェッショナル集団」のようなカタカナ複合語が行の途中で
   不自然に折り返されるのを防ぐ(このページ固有の言い回しに対するピンポイント対応) */
.nowrap {
  white-space: nowrap;
}

/* mvv-row: Mission/Vision/Value/Wayの1項目分。カードで囲わず、ラベルを見出しの上に小さく添えて、
   本文の主張(headline)を主役として大きく見せる。項目間は罫線ではなく余白だけで区切る
   (2026-08-31、ラベルを見出しの横に並べる形+項目間の罫線をやめてほしいという指摘を受けて変更)。 */
.mvv-row + .mvv-row {
  margin-top: calc(var(--space-24) + var(--space-8));
}
.mvv-row__label {
  margin-bottom: var(--space-6);
}
.mvv-row__label-en {
  display: block;
  font-family: var(--font-wordmark);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand-700);
}
.mvv-row__headline {
  margin-bottom: var(--space-8);
  color: var(--color-brand-700);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.6;
}
.mvv-row__body {
  display: grid;
  gap: var(--space-6);
  max-width: 760px;
}
.mvv-row__body p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* info-table: 会社概要のように項目名+値が並ぶ表組み(複数ページで必要になれば style.css へ提案) */
.info-table {
  max-width: 720px;
  margin: 0;
  border-top: 1px solid var(--color-border);
}
.info-table__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.info-table__row:last-child {
  border-bottom: 0;
}
.info-table__row dt {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}
.info-table__row dd {
  margin: 0;
}

/* simple-list: ValueやWayの項目を、Mission/Visionのheadlineと同じ熱量で読ませるための構成。
   Valueは2カラムのまま採番をやめ英単語タグに、Wayは項目が長いので1カラム+採番のままにする
   (2026-08-31)。 */
.simple-list {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.simple-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.simple-list__text {
  color: var(--color-brand-700);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.5;
}

.simple-list--value {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.simple-list--value li {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.simple-list__tag {
  flex: none;
  font-family: var(--font-wordmark);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.simple-list--way {
  grid-template-columns: 1fr;
  counter-reset: way-item;
}
.simple-list--way li {
  counter-increment: way-item;
}
.simple-list--way li::before {
  content: counter(way-item, decimal-leading-zero);
  flex: none;
  font-family: var(--font-wordmark);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

/* card-grid--2 内の cta-band 2枚も、.card-grid .card 同様に少しずつ遅らせて表示する
   (.reveal 本体の定義はstyle.css共通。ここは cta-band 用の delay だけ追加) */
.card-grid .cta-band.reveal:nth-child(1) { transition-delay: 0s; }
.card-grid .cta-band.reveal:nth-child(2) { transition-delay: .08s; }

@media (max-width: 800px) {
  .info-table__row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .simple-list--value {
    grid-template-columns: 1fr;
  }
  .mvv-row + .mvv-row {
    margin-top: var(--space-16);
  }
}