@charset "UTF-8";

/* =========================================================
   トプ100 ｜ トップページのヒーロー（1画面目）
   ---------------------------------------------------------
   2026-08-21 代表指示。フルワイドの背景画像を軸に作り直した。
   top.css から分離（200行目安）。index.php だけが読む。
   ========================================================= */

/* ---------- ヒーロー（フルワイドの背景画像＋白文字） ---------- */

/* 画像は images/common/hero-bg.svg（紋章の100ドットを右に大きく置いた
   濃い地）。文字は左に寄せ、画像の主役（右の紋章）と重ねない。
   高さは min-height で確保し、文字量が増えても切れない。 */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 560px;
  color: #FFFFFF;
  background-color: #1A1310;
  /* 左に濃い帯を重ねて、画面幅が変わっても文字の後ろが読める濃さを保つ */
  background-image:
    linear-gradient(90deg, rgba(20, 14, 10, 0.72) 0%, rgba(20, 14, 10, 0.48) 44%, rgba(20, 14, 10, 0) 64%),
    url("/images/common/hero-bg.svg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}

.hero__inner {
  width: 100%;
  padding-block: 80px;
}

.hero__eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--kaki-light);
}

.hero__copy {
  margin-top: 16px;
  font-size: 2.75rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #FFFFFF;
}

.hero__sub {
  max-width: 560px;
  margin-top: 20px;
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.hero__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #FFFFFF;
}

.hero__btn--primary {
  background: var(--kaki);
  border-color: var(--kaki);
}

.hero__btn--primary:hover {
  background: var(--kaki-deep);
  border-color: var(--kaki-deep);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: 48px;
}

.hero__fact {
  padding-inline: 24px;
}

.hero__fact:first-child {
  padding-left: 0;
}

.hero__fact + .hero__fact {
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.hero__fact dt {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.64);
}

.hero__fact dd {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  color: #FFFFFF;
}

.hero__num {
  font-family: var(--num);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--kaki-light);
  letter-spacing: 0.02em;
  margin-right: 2px;
  font-variant-numeric: tabular-nums;
}

/* ヒーロー直下の入口タイルは、濃い地から白地へ戻る余白を持たせる */
.hero + .container {
  padding-top: 40px;
}

/* ---------- 狭い画面 ---------- */

@media (max-width: 767px) {
  .hero {
    min-height: 440px;
    /* 狭い画面では紋章（右）が文字に重ならないよう、画像の右側を見せる */
    background-position: center, 72% center;
  }

  .hero__inner {
    padding-block: 56px 48px;
  }

  .hero__copy {
    font-size: 1.75rem;
  }

  .hero__br {
    display: none;
  }

  .hero__sub {
    font-size: 0.9375rem;
  }

  .hero__btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .hero__facts {
    margin-top: 32px;
  }

  .hero__fact {
    padding-inline: 16px;
  }

  .hero + .container {
    padding-top: 24px;
  }
}