/*
 * 会社概要ページ専用スタイル
 * 文字の大きさ・太さ・行間・色は Typography トークンが持つ。ここでは余白・配置のみ。
 */

/*
 * ページタイトル
 */
.company-head {
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--color-rule);
}

.company-head__kicker {
  margin-bottom: 22px;
}

/*
 * 01 代表挨拶
 * PC: 左に写真（2行ぶち抜き）、右に見出し → 本文
 * SP: 見出し → 写真 → 本文 の縦積み
 */
.company-message {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "ceo heading"
    "ceo text";
  grid-template-rows: auto 1fr;
  column-gap: 64px;
  align-items: start;
  padding: 60px 0 76px;
  border-bottom: 1px solid var(--color-rule);
}

.company-message__heading {
  grid-area: heading;
}

.company-message__ceo {
  grid-area: ceo;
  margin: 0 0 0 76px;
  max-width: 420px;
}

.company-message__photo {
  padding: 10px;
}

.company-message__photo img {
  aspect-ratio: 3 / 4;
  height: auto;
}

.company-message__name {
  margin-top: 20px;
}

.company-message__text {
  grid-area: text;
}

.company-message__catch {
  margin-bottom: 28px;
}

.company-message__body {
  text-align: justify;
}

/*
 * 02 会社情報
 */
.company-profile {
  padding: 76px 0;
}

.company-profile__table {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  font-family: "Shippori Mincho B1", serif;
}

.company-profile__th,
.company-profile__td {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}

.company-profile__th {
  padding-right: 40px;
  white-space: nowrap;
}

/*
 * SP
 */
@media (max-width: 767px) {
  .company-head {
    padding: 44px 0 32px;
  }

  .company-head__kicker {
    margin-bottom: 14px;
  }

  .company-message {
    display: flex;
    flex-direction: column;
    padding: 36px 0;
  }

  .company-message__ceo {
    margin: 0;
    max-width: none;
  }

  .company-message__photo {
    padding: 8px;
  }

  .company-message__name {
    margin-top: 14px;
  }

  .company-message__text {
    margin-top: 26px;
  }

  .company-message__catch {
    margin-bottom: 22px;
  }

  .company-profile {
    padding: 36px 0;
  }

  /* 見出し列と値を縦に積む */
  .company-profile__table {
    border-top: 1px solid var(--color-rule);
  }

  .company-profile__table tr {
    display: block;
    padding: 16px 2px;
    border-bottom: 1px solid var(--color-rule);
  }

  .company-profile__th,
  .company-profile__td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .company-profile__th {
    margin-bottom: 6px;
    white-space: normal;
  }
}