/* company.css — 会社概要
   Figma: 2003:53503。会社概要テーブルと沿革タイムラインはこのページ固有 */

/* 会社概要テーブル Figma: 2005:54893 --------------------------------------- */
.company-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  padding-bottom: var(--space-40);
  color: var(--color-black);
}

.company-profile .heading {
  width: 100%;
}

.company-table {
  --company-table-width: 35.5rem; /* 568px */
  --company-table-label-width: 10rem; /* 160px */

  width: min(var(--company-table-width), 100%);
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.company-table__row {
  display: flex;
  align-items: center;
  padding: var(--space-16) 0 calc(var(--space-16) - var(--border-width)) var(--space-8); /* 線は高さに含まれない */
  border-bottom: var(--border-width) solid var(--color-black-70);
}

.company-table__label {
  flex-shrink: 0;
  width: var(--company-table-label-width);
  margin: 0;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-heading);
}

.company-table__value {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
  white-space: nowrap;
}

/* 沿革パネル Figma: 2005:54852 --------------------------------------------- */
.history-panel {
  --history-list-width: 35.5rem;                  /* 568px */
  --history-dot-center: calc(var(--font-size-body) * var(--line-height-body) / 2); /* 丸の中心＝本文1行目の中央 */
  --history-line-bottom: calc(-13 / 16 * 1rem);    /* 線の下端（一覧の下に 13px）*/
  --history-date-width: calc(118 / 16 * 1rem);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  padding: var(--space-40) 0 var(--space-60);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  background-image: linear-gradient(90deg, var(--color-genki-port-a89990-20), var(--color-genki-port-a89990-20));
  color: var(--color-black);
  overflow: hidden;
}

.history-panel__deco {
  position: absolute;
  top: var(--space-40);
  right: var(--space-56);
  width: calc(460 / 16 * 1rem);
  height: calc(303.592 / 16 * 1rem);
  pointer-events: none;
}

.history-panel__head {
  position: relative;
  width: 100%;
  padding-inline: var(--space-56);
}

.history-list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: min(var(--history-list-width), 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* タイムラインの縦線：最初の丸の中心を起点に、丸の中心を通って下へ（上にははみ出さない）*/
.history-list::before {
  content: "";
  position: absolute;
  top: var(--history-dot-center);
  bottom: var(--history-line-bottom);
  left: calc((var(--space-12) - var(--border-width)) / 2);
  border-left: var(--border-width) solid var(--color-genki-port-40848e);
}

/* 通過前の丸はグレー、通過でブランド色に */
.js .history-item__dot {
  background: var(--color-gray);
  transition: background-color var(--duration-fast) var(--ease-hover);
}

.js .history-item.is-passed .history-item__dot {
  background: var(--color-genki-port-40848e);
}

.js .history-item {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}

.js .history-item.is-passed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .history-item { opacity: 1; transform: none; }
  .js .history-item__dot { background: var(--color-genki-port-40848e); }
}

.history-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-16);
  width: 100%;
}

.history-item__dot {
  flex-shrink: 0;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  background: var(--color-genki-port-40848e);
}

.history-item__date {
  flex-shrink: 0;
  width: var(--history-date-width);
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.history-item__text {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);
}

/* 767px 以下（SP）：横並びを縦1列に。⚠ SPデザイン未確定のため仮レイアウト */
@media (max-width: 767px) {
  .company-profile {
    gap: var(--space-24);
  }

  .company-table__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .company-table__value {
    white-space: normal;
  }

  .history-panel__head {
    padding-inline: var(--space-24);
  }

  .history-panel {
    --history-dot-center: calc(var(--font-size-h3) * var(--line-height-tight) / 2); /* SP は1行目が丸＋日付だけなので、日付の行の中央 */
  }

  .history-list {
    padding-inline: var(--space-24);
  }

  /* 縦線は padding の内側（丸の中心）に合わせる */
  .history-list::before {
    left: calc(var(--space-24) + (var(--space-12) - var(--border-width)) / 2);
  }

  /* 丸＋日付の行の下に本文（丸のぶん字下げ）*/
  .history-item {
    flex-wrap: wrap;
    row-gap: var(--space-4);
  }

  .history-item__date {
    width: auto;
  }

  .history-item__text {
    flex: 0 0 100%;
    padding-left: calc(var(--space-12) + var(--space-16));
  }
}