@charset "UTF-8";
/*
 * ms-shop-web-2026 / header-fix.css  v1.3.0
 *
 * 【方針】601px以上（PC・タブレット）のヘッダーには一切手を触れない。
 *         600px以下のスマートフォン表示だけを補正する。
 *
 * v1.2.0 までは全幅共通で .h-logo img に width:auto / max-width:none を当てており、
 * PC表示でロゴが原寸まで拡大してヘッダーを破壊していた。その指定は全て削除した。
 */

/* ============================================================
   600px以下（スマートフォン）のみ
   ============================================================ */
@media screen and (max-width: 600px) {

  body header .h-inner,
  body .site-header .h-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    padding-left: 14px;
    padding-right: 12px;
  }

  /* ロゴ：高さ基準で表示し、横方向に潰させない */
  body header .h-logo,
  body header .logo,
  body .site-header .h-logo {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 62vw;
  }

  body header .h-logo img,
  body header .logo img,
  body .site-header .h-logo img {
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
  }

  /* 社名テキスト・キャッチは非表示 */
  body header .name,
  body header .h-logo .name,
  body header .h-catch,
  body header .site-description { display: none; }

  /* SNS・電話ブロックは非表示 */
  body header .h-sns,
  body header .sns,
  body header .h-tel { display: none; }

  /* お問い合わせボタン：小さく、折り返さず、はみ出さない */
  body header .h-cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  body header .h-contact,
  body header .h-cta .btn,
  body header .h-cta a.contact {
    font-size: 12px;
    line-height: 1.2;
    padding: 8px 12px;
    min-width: 0;
    width: auto;
    height: auto;
    border-radius: 6px;
    white-space: nowrap;
  }

  /* ハンバーガーは常に見える位置に */
  body header .h-menu,
  body header .menu-btn,
  body header .hamburger {
    flex: 0 0 auto;
    margin-left: 2px;
  }
}

/* ============================================================
   380px以下（小型端末）
   ============================================================ */
@media screen and (max-width: 380px) {
  body header .h-logo img,
  body header .logo img { height: 30px; }

  body header .h-contact,
  body header .h-cta .btn,
  body header .h-cta a.contact {
    font-size: 11px;
    padding: 7px 9px;
  }
}