/* ==========================================================================
   会社概要（pages/company.html）
   Figma PC 537:18411 / SP 619:6014
   SP を基準に書き、@media (min-width: 1025px) で PC に切り替える
   400〜1024px は SP のレイアウトのまま、中身を最大 640px で中央寄せにしている（幅は Figma に指定なし）

   目次
    1. hero             .p-company-hero
    2. mission-vision   .p-company-mission / .p-company-statement / .p-company-ceo
    3. company-profile  .p-company-profile
   ========================================================================== */

/* ==========================================================================
   1. hero（PC 537:18419 / SP 619:6044）
   ========================================================================== */
.p-company-hero {
  padding: var(--space-48) var(--space-20);
  background: var(--color-white);
}

.p-company-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  max-width: 640px; /* SP〜タブレットの最大幅。Figmaに指定なし */
  margin-inline: auto;
}

.p-company-hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

/* 英字のタグ（ABOUT US） */
.p-company-hero__tag {
  padding: 3px 11px; /* Figmaは 4px 12px で枠線が内側。枠線1pxぶん引いて外寸（高さ25px）を合わせる */
  border: 1px solid var(--color-text-primary);
  border-radius: 20px; /* Figmaの実値 */
  font: 700 12px/1.4 var(--font-en);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.p-company-hero__title {
  font: 700 24px/1.4 var(--font-jp); /* 文字/見出し/中 */
  text-align: center;
}

.p-company-hero__lead {
  font: 500 14px/1.6 var(--font-jp); /* 文字/本文/標準 */
  color: var(--color-text-secondary);
  text-align: center;
}

@media (min-width: 1025px) {
  .p-company-hero {
    padding: var(--space-64) var(--space-40);
  }

  .p-company-hero__inner {
    gap: var(--space-24);
    max-width: 800px; /* Figmaの実値（リード文の幅） */
  }

  .p-company-hero__head {
    gap: var(--space-24);
  }

  .p-company-hero__title {
    font-size: 40px; /* Figmaの実値（文字スタイルの 32px ではない） */
  }

  .p-company-hero__lead {
    font-size: 16px;
    font-weight: 400; /* Figmaの実値（Regular） */
  }
}

/* ==========================================================================
   2. mission-vision（PC 537:18425 / SP 619:6049）
   ========================================================================== */
.p-company-mission {
  padding: var(--space-48) var(--space-20);
  background: var(--color-white);
}

.p-company-mission__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  max-width: 640px; /* SP〜タブレットの最大幅。Figmaに指定なし */
  margin-inline: auto;
}

.p-company-mission__statements {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

/* ---- ミッション・ビジョン（PC 537:18432・537:18428 / SP 619:6055・619:6050） ---- */
.p-company-statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
}

.p-company-statement__label {
  font: 700 12px/1.4 var(--font-en);
  color: var(--color-text-secondary);
}

.p-company-statement__title {
  font: 700 20px/1.4 var(--font-jp); /* 文字/見出し/小 */
  text-align: center;
}

.p-company-statement__text {
  align-self: stretch;
  font: 500 14px/1.6 var(--font-jp); /* 文字/本文/標準 */
  color: var(--color-text-secondary);
}

/* ---- 代表メッセージ（PC 537:18436 / SP 619:6060） ---- */
.p-company-ceo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
}

.p-company-ceo__label {
  font: 700 14px/1.4 var(--font-en);
  color: var(--color-text-secondary);
}

.p-company-ceo__title {
  font: 700 24px/1.4 var(--font-jp); /* 文字/見出し/中 */
  text-align: center;
}

.p-company-ceo__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
  align-self: stretch;
}

/* 写真の枠は 260x340。正方形の写真を高さに合わせて入れ、左右を切る（Figmaの切り抜き位置：左に37px） */
.p-company-ceo__photo {
  flex: none;
  width: 260px;
  max-width: 100%;
  aspect-ratio: 260 / 340;
  overflow: hidden;
}

.p-company-ceo__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46.25% 0; /* 37px ÷（340px − 260px） */
}

.p-company-ceo__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  align-self: stretch;
}

.p-company-ceo__text {
  font: 500 14px/1.6 var(--font-jp); /* 文字/本文/標準 */
  color: var(--color-text-secondary);
}

/* 社名・肩書き＋サイン（右寄せ） */
.p-company-ceo__sign {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-8);
}

.p-company-ceo__sign-text {
  font: 700 12px/1.6 var(--font-jp); /* 文字/本文/小・強調 */
  color: var(--color-text-secondary);
  text-align: right;
}

.p-company-ceo__sign-img {
  flex: none;
  width: 160px;
  height: 38px;
  object-fit: cover;
}

@media (min-width: 1025px) {
  .p-company-mission {
    padding: var(--space-80) var(--space-40);
    border-top: 1px solid var(--color-border-default); /* heroとの間の線（PC 537:18424）。SPには無い */
  }

  /* 余白は #33 で決めた値（Figmaと違う）
     ミッション → ビジョン 80px、ビジョン → 代表メッセージ 80px、代表メッセージ → 会社情報の表 80px（セクションの下の余白） */
  .p-company-mission__inner {
    gap: var(--space-80);
    max-width: 900px; /* Figmaの実値 */
  }

  .p-company-mission__statements {
    gap: var(--space-80);
  }

  /* 区切り線は SP だけ */
  .p-company-mission__divider {
    display: none;
  }

  /* 小見出し → 見出し 12px（#33）。見出し → 本文は 24px のまま */
  .p-company-statement {
    gap: var(--space-12);
    padding-inline: var(--space-40);
  }

  .p-company-statement__text {
    margin-top: var(--space-12);
  }

  .p-company-statement__label {
    font-size: 14px;
  }

  .p-company-statement__title {
    font-size: 24px; /* 文字/見出し/中 */
  }

  .p-company-statement__text {
    align-self: center;
    max-width: 614px; /* Figmaの実値 */
    text-align: center;
  }

  /* 枠の内側の余白をなくし、幅を下の会社情報の表（900px）にそろえる（#33。Figmaは左右40pxの余白つき） */
  .p-company-ceo {
    gap: var(--space-12); /* 小見出し → 見出し（#33） */
  }

  .p-company-ceo__content {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-32); /* 写真 → 本文（#33） */
    margin-top: var(--space-20); /* 見出し → 写真・本文を 32px に（gap 12px ＋ 20px。#33） */
  }

  /* 写真の枠は 256x320 で地色 #f3f3f3。正方形の写真を 352px 角にして、上 9px・左 -36px に置く
     （顔が枠の左右の真ん中、頭の上に少し余白、胸から下は枠で切る）。#33 で決めた値（Figmaは 272x356） */
  .p-company-ceo__photo {
    position: relative;
    width: 256px;
    height: 320px;
    aspect-ratio: auto;
    background: #f3f3f3;
  }

  .p-company-ceo__photo img {
    position: absolute;
    top: 9px;
    left: -36px;
    width: 352px;
    height: 352px;
    max-width: none;
    object-fit: cover;
  }

  .p-company-ceo__body {
    flex: 1 1 0;
    min-width: 0;
    gap: var(--space-24);
  }
}

/* ==========================================================================
   3. company-profile（PC 537:18449 / SP 619:6072）
   <dl> の中に <div class="__row"><dt><dd></div> を並べる。行は足し引きしても崩れない
   ========================================================================== */
.p-company-profile {
  padding: 0 var(--space-20) var(--space-60);
  /* SPのFigmaはこのセクションに背景の指定が無く、ページの地色（#fafafa）が出る。PCは白 */
}

.p-company-profile__list {
  max-width: 640px; /* SP〜タブレットの最大幅。Figmaに指定なし */
  margin-inline: auto;
  border: 1px solid var(--color-border-default);
  border-radius: 8px; /* Figmaの実値 */
  background: var(--color-white);
  overflow: hidden;
}

.p-company-profile__row {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Figmaの実値 */
  padding: var(--space-16);
}

.p-company-profile__row + .p-company-profile__row {
  border-top: 1px solid var(--color-border-default);
}

.p-company-profile__term {
  font: 700 12px/1.6 var(--font-jp); /* 文字/本文/小・強調 */
  color: var(--color-text-secondary);
}

.p-company-profile__desc {
  font: 500 14px/1.6 var(--font-jp); /* 文字/本文/標準 */
  color: var(--color-text-primary);
}

@media (min-width: 1025px) {
  .p-company-profile {
    padding: 0 var(--space-40) var(--space-80);
    background: var(--color-white);
  }

  .p-company-profile__list {
    max-width: 900px; /* Figmaの実値 */
  }

  .p-company-profile__row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-24);
    padding: var(--space-24);
  }

  .p-company-profile__term {
    flex: none;
    width: 200px; /* Figmaの実値 */
    font-size: 14px; /* 文字/本文/標準・強調 */
  }

  .p-company-profile__desc {
    flex: 1 1 0;
    min-width: 0;
  }
}