/* ===================================================================
 * company.css — 会社案内(block/page/company.php)
 *
 * KSサービスについて: ページヒーローのクリームから地を続け、中央揃えの4行の文。雲(左上)と鳥(右下)は装飾。
 * リンクカード: 子ページ2つを同じ大きさで横に並べる(最大幅 1000px の中で等分。SP は1列)。
 * カードのホバーは下線を出さず、矢印の丸を右へ動かし写真を少し明るくして示す。
 * =================================================================== */

/* --- KSサービスについて ------------------------------------------- */

.company-about {
  padding-block: 2.5rem var(--space-6xl);
}

.company-about__lead {
  line-height: 1.9;
}

.company-about__cloud {
  top: 10%;
  left: 6%;
  width: 9vw;
  max-width: 150px;
}

.company-about__bird {
  right: 8%;
  bottom: 14%;
  width: 7vw;
  max-width: 120px;
}

/* --- リンクカード ------------------------------------------------- */

.company-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}

.company-card:focus-visible {
  outline-offset: 4px;
}

.company-card__photo {
  aspect-ratio: 3 / 2;
  transition: opacity 0.2s;
}

.company-card:hover .company-card__photo {
  opacity: 0.85;
}

.company-card__title {
  font-size: 1.5rem;
  line-height: 1.4;
}

.company-card .arrow-circle {
  right: var(--space-lg);
  bottom: var(--space-lg);
  transition: transform 0.2s;
}

.company-card:hover .arrow-circle {
  transform: translateX(4px);
}

@media (max-width: 767.98px) {
  .company-about {
    padding-block: var(--space-lg) 2.5rem;
  }

  .company-about__cloud {
    top: 4%;
    left: 2%;
    width: 64px;
  }

  .company-about__bird {
    right: 3%;
    bottom: 4%;
    width: 52px;
  }

  .company-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .company-card__title {
    font-size: 1.25rem;
  }
}