/* ==============================
  AIRMAX ランディングページ — 案#2 / #3（ダーク）
  style.css を読み込んだうえでの差分。
  ヘッダーとヒーローを濃紺で締め、下部（CTA・フッター）は参考案の構成に合わせる。
============================== */

/* ==============================
  ヘッダー
============================== */
.site-header {
  background: var(--color-navy);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.header-brand {
  color: #fff;
}

.header-tel-label {
  color: rgba(255, 255, 255, 0.55);
}

.header-tel-number {
  color: var(--color-accent-bright);
}


/* ==============================
  ファーストビュー：写真を全面に敷き、上に情報を重ねる
============================== */
.section-hero {
  /* 専用写真は敷かず、body の1枚の固定背景 Airmax_base を共有する。減光は ::before が担う */
  background: transparent;
  color: #fff;
  padding: 60px 0 56px;
  position: relative;
}

/* 明るい写真の上で白文字とロゴを成立させるための減光 */
.section-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 21, 38, 0.74) 0%, rgba(10, 21, 38, 0.84) 100%);
}

.section-hero .container {
  position: relative;
  z-index: 1;
}

/* ロゴは外周のみを透過処理した PNG/WebP を使う。
   screen 合成だと白フチの内側の黒地まで抜けてしまうため使わない。 */
.hero-logo-img {
  width: 320px;
  max-width: 80%;
}

.hero-catch {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* 明るい地色向けの色指定を打ち消す */
.section-hero .hero-lead {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.section-hero .hero-note {
  color: rgba(255, 255, 255, 0.62);
}

.hero-facts {
  border-top-color: rgba(255, 255, 255, 0.24);
}

.hero-fact + .hero-fact::before {
  background: rgba(255, 255, 255, 0.24);
}

.section-hero .hero-fact dt {
  color: rgba(255, 255, 255, 0.62);
}

/* 写真の上では標準の青が沈むため、明るい青に差し替える */
.section-hero .btn-call {
  background: var(--color-accent-bright);
}

.section-hero .btn-call:hover,
.section-hero .btn-call:active {
  background: var(--color-accent);
}


/* ==============================
  CTA：参考案に合わせ、淡い青の面に立体的な電話ボタンを置く
============================== */
.section-cta {
  border-top: none;
  /* 斜めの光沢と細かいドットを重ねた下地 */
  background:
    radial-gradient(circle at 1px 1px, rgba(0, 64, 156, 0.10) 1px, transparent 1px) 0 0 / 13px 13px,
    linear-gradient(112deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(160deg, #e7eef9 0%, #f8fbfe 55%, #e9eff8 100%);
}

.cta-title {
  color: #101828;
}

.cta-phone {
  max-width: 560px;
  border: 3px solid #0a2f7a;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(10, 35, 90, 0.22);
}

.cta-phone:hover {
  box-shadow: 0 10px 26px rgba(10, 35, 90, 0.28);
}

/* 見出し帯は紺地に金文字 */
.cta-phone-head {
  background: linear-gradient(100deg, #0a2f7a 0%, #14479f 50%, #0a2f7a 100%);
  color: #f0cf76;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  padding: 10px 16px;
}

.cta-phone-head::before,
.cta-phone-head::after {
  background: #f0cf76;
  box-shadow: 0 5px 0 #f0cf76, 0 -5px 0 #f0cf76;
}

.cta-phone-body {
  padding: 20px 16px;
}

.cta-phone-icon {
  width: 44px;
  height: 44px;
}

.cta-phone-number {
  color: #0a3f9e;
}

.cta-feature-body dt {
  color: #101828;
}


/* ==============================
  フッター：黒地に反転
============================== */
.site-footer {
  background: #080d18;
  color: rgba(255, 255, 255, 0.6);
  border-top: none;
}

.footer-name {
  color: #fff;
}

.footer-name::before,
.footer-name::after {
  background: var(--color-accent-bright);
}

.footer-contact {
  color: var(--color-accent-bright);
}

.footer-contact + .footer-contact::before {
  background: rgba(255, 255, 255, 0.25);
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
}

.footer-links a:hover {
  color: #fff;
}

.footer-copy {
  color: rgba(255, 255, 255, 0.35);
}