/* トップページ(index.html)固有のスタイル。destyle→common→style の後に読み込む */

.hero {
  height: 480px;
  background-image: url("../images/top_hero_pc-01@2x.jpg");
}

.hero__heading {
  max-width: 640px;
  margin: 0 0 16px;
}

.hero__sub {
  max-width: 560px;
  margin: 0 0 24px;
  font-size: 17px;
}

.hero__cta {
  display: flex;
  gap: 16px;
}

.company-teaser {
  height: 480px;
  background-image: url("../images/top_office-01@2x.jpg");
}

/*
  見出し→本文→ボタンの間隔を、他セクション(私たちの強み・サービス)で
  使っている section 単位の余白(32px)に揃える。
  従来は h2 に margin指定がなく(0px)、p の margin-bottom も16pxと
  詰まって見えていた。
  なお、旧セレクタ `.company-teaser__inner` はHTML側に存在しないクラス名で
  誤って指定されており、実際には一度も適用されていなかったため、
  正しいセレクタ(.company-teaser 配下の h2 / p)に修正している。
*/
.company-teaser h2 {
  margin: 0 0 32px;
}

.company-teaser p {
  max-width: 480px;
  margin: 0 0 32px;
  line-height: 1.7;
}

/* 「サービス詳細を見る」ボタンの上余白 */
.service-cta {
  margin-top: 32px;
}

/*
  私たちの強み / サービス内容概要 カード共通:box-shadow + ホバー時の浮き上がり。
  スクロールフェードイン(.reveal)のopacityもここに合わせて含める
  (同一要素のtransitionは1つに統合されるため、別々に定義すると打ち消し合う)。
*/
.strength-card,
.service-card {
  box-shadow: 0 2px 8px rgba(13, 59, 102, 0.08);
  transition: transform 0.3s ease, box-shadow 0.2s ease, opacity 0.5s ease;
}

/* サービスカードは service.html の該当セクションへのリンクのため、a要素のデフォルト装飾を解除 */
a.service-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.strength-card:hover,
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(13, 59, 102, 0.14);
}

/* 私たちの強みカード(アイコン + 見出し+本文) */
.strength-card__icon {
  width: 36px;
  height: 36px;
  color: var(--color-accent);
  margin-bottom: 16px;
}

.strength-card__heading {
  margin: 0 0 8px;
  font-size: 16px;
}

.strength-card p {
  margin: 0;
  font-size: 16px;
}

/* サービス内容概要カード(番号を大きめに強調 + 見出し+本文) */
.service-card__no {
  font-size: 40px;
  margin-bottom: 4px;
}

.service-card__heading {
  margin: 0 0 8px;
  font-size: 16px;
}

.service-card p {
  margin: 0;
  font-size: 16px;
}

@media (max-width: 768px) {
  .hero {
    height: 340px;
    background-image: url("../images/top_hero_sp-01@2x.jpg");
  }

  .company-teaser {
    height: 340px;
  }

  .hero__cta {
    flex-direction: column;
  }
}