/**
 * スティッキーヘッダー（固定ヘッダー）スタイル
 * スクロール時にヘッダーとナビゲーションを上部に固定
 */

/* ========================================
   スティッキーラッパー - 基本設定
   ======================================== */
.sticky-header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background-color: #ffffff;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ページコンテンツが固定ヘッダーの下に隠れないようマージンを追加 */
body {
  padding-top: 145px; /* ヘッダー + ナビゲーションの高さ */
  transition: padding-top 0.3s ease;
}

/* ========================================
   スクロール時のコンパクト表示
   ======================================== */
.sticky-header-wrapper.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* スクロール時: トップバーを非表示にしてコンパクトに */
.sticky-header-wrapper.scrolled .header-topbar {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  transition: all 0.3s ease;
}

/* スクロール時: メインヘッダーのパディングを縮小 */
.sticky-header-wrapper.scrolled .header-main {
  padding: 8px 0;
  transition: all 0.3s ease;
}

/* スクロール時: ロゴを少し小さく */
.sticky-header-wrapper.scrolled .header-logo img {
  max-width: 300px;
  transition: all 0.3s ease;
}

/* スクロール時: コンタクト情報を少しコンパクトに */
.sticky-header-wrapper.scrolled .header-tel {
  padding: 8px 15px;
  transition: all 0.3s ease;
}

.sticky-header-wrapper.scrolled .tel-number {
  font-size: 16px;
  transition: all 0.3s ease;
}

.sticky-header-wrapper.scrolled .header-cta-button {
  padding: 10px 20px;
  transition: all 0.3s ease;
}