/* =========================================================
   sections/header.css — ヘッダー（左ロゴ・右お問い合わせボタン）
   【C-2：2層構造／外側=全幅白背景・内側=max1440中央寄せ両端揃え】
   - position 固定なし（ページ先頭にあるだけ・スクロールで流れる）。
   - 色は確定色（--color-white 背景 / --color-primary 黄ボタン / --color-text 黒文字）を使用。
   - ロゴは実寸240px指定（画像サイズ指定として許容）。height:auto でアスペクト比維持。
   - 生px禁止・トークン/8の倍数スペーシング参照（ロゴ幅のみ実寸例外）。
   ========================================================= */

/* ---- 外側：全幅の白背景 ---- */
.header {
  background: var(--color-white);
  padding-block: var(--space-16);       /* 上下 16px */
}

/* ---- 内側：中央寄せ・両端揃え（左ロゴ／右ボタン） ---- */
.header__inner {
  width: 100%;
  max-width: var(--container-max);      /* 1440px */
  margin-inline: auto;
  padding-inline: var(--space-56);      /* PC 左右ガター */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* ロゴ＋PRバッジの左側グループ（inner の space-between で左ブロックとして機能） */
.header__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-24);
}

/* ロゴリンク（トップへ。レイアウトを崩さないよう img と同じ振る舞いに） */
.header__logo-link {
  display: inline-flex;
  line-height: 0;
}
/* ロゴ（実寸240px・アスペクト比維持） */
.header__logo {
  width: 160px;                         /* ロゴ幅：元値240pxの2/3（画像サイズ指定・許容の実寸） */
  height: auto;
}

/* PRバッジ（日経ビジネス広告掲載）：ロゴのすぐ右・お問い合わせボタンと同じ高さ（実測52px） */
.header__pr-link {
  display: inline-flex;
  line-height: 0;
}
.header__pr-link img {
  display: block;
  height: 52px;                         /* .header__btn の実測高さに合わせる */
  width: auto;
}

/* お問い合わせボタン（黄背景・黒文字・ピル型／既存CTAと統一） */
.header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-32);
  border-radius: var(--space-48);       /* ピル型 */
  background: var(--color-primary);     /* #FCCB0C 黄 */
  box-shadow: var(--shadow-btn);        /* 既存ボタンのベベル＋ハイライト */
  font-weight: 700;
  font-size: var(--fs-sm);              /* 16px */
  line-height: 1;
  color: var(--color-text);             /* 黒文字 */
  text-decoration: none;
  white-space: nowrap;
}

/* =========================================================
   追加：右側アクション群（電話ブロック＋資料請求＋お問い合わせ の横並び）
   ※ PC(≥1024)/タブレット(768–1023)向け。電話ブロックと資料請求はSPで非表示。
   ========================================================= */
.header__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-24);                 /* 要素間 24px */
}

/* 電話ブロック（3行・左寄せ縦積み） */
.header__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.header__tel-label { font-size: var(--fs-xs);   color: var(--color-text); } /* 12px 小見出し */
.header__tel-num   { font-size: var(--fs-base); font-weight: 700; color: var(--color-text); } /* 24px 番号（大きめ） */
.header__tel-hours { font-size: var(--fs-xs);   color: var(--color-text); } /* 12px 受付時間 */

/* 資料請求ボタン（アウトライン・副ボタン／サイズは主ボタンと同一） */
.header__btn--outline {
  background: transparent;              /* 背景透明 */
  box-shadow: none;                     /* ベベル影なし（アウトライン） */
  color: var(--color-text);            /* 文字は黒（黄枠で主従を表現・判読性優先） */
}

/* 主ボタンのラベル出し分け（PC/タブレット=無料相談はこちら／SP=無料相談・資料請求）。
   SP用は基底で非表示＝PC/タブレットの見た目は不変（追加のみ／既存トークン不変）。 */
.header__btn-label--sp { display: none; }

/* ---- PC/タブレット共通（≥768）：主にも透明枠を付与し副ボタンと高さを一致（SPは対象外＝差分ゼロ） ---- */
@media (min-width: 768px) {
  .header__btn          { border: 2px solid transparent; }
  .header__btn--outline { border-color: var(--color-primary); } /* 副＝ブランド黄の枠線 */
}

/* =========================================================
   レスポンシブ
   ※ @media は var() 不可のため px 直書き＋トークン名をコメント併記。
   ========================================================= */

/* ---- タブレット（768–1023）：logo＋電話＋2ボタンを1行に収めるためガター/gap/padding/番号を圧縮 ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .header__inner   { padding-inline: var(--space-16); }     /* ガター 56→16px */
  .header__actions { gap: var(--space-16); }                /* 要素間 24→16px */
  .header__tel-num { font-size: var(--fs-md); }             /* 番号 24→20px */
  .header__btn     { padding: var(--space-16) var(--space-16); } /* 左右padding 32→16px */
}

/* ---- SP（≤767＝--bp-sp 未満）：画面端ガター＋ロゴ縮小・ボタン圧縮で375pxに収める ---- */
@media (max-width: 767px) {
  .header__inner { padding-inline: var(--container-pad); } /* 画面端ガター16px */
  .header__logo  { width: 106.67px; }                       /* SP指定：ロゴ幅 元値160pxの2/3(≈106.67px)（height:autoは基底） */
  .header__btn   { padding: var(--space-8) var(--space-16); } /* ボタン圧縮 */

  /* 追加要素はSPで非表示＝SPの見た目を現状維持（差分ゼロ） */
  .header__tel,
  .header__btn--outline,
  .header__pr-link       { display: none; }

  /* 主ボタンのSPラベル出し分け：SPは「無料相談・資料請求」を表示 */
  .header__btn-label--pc { display: none; }
  .header__btn-label--sp { display: inline; }
}