@charset "UTF-8";
/* ============================================================
   東洋ビューティサプライ ヘッダー (lib-header-BS01 typeN)
   PC(>=1202px)   : 横並びグローバルナビ（既存 t-bs.co.jp 準拠 / 文字#00466d hover#1397C3）
   タブレット以下(<=1201px): ハンバーガー + 右スライドイン「黒」ドロワー（既存準拠）
   ※#tbs-custom(0,4,0)!important を確実に上書きするため全セレクタに html を前置(0,4,1)
   ※開閉は BM 既定 JS の html.is-open トグルを利用
   ============================================================ */

/* ---- 全幅共通: 白ソリッドヘッダー ---- */
html .lib-header__outer.lib-header-BS01.typeN{
  position: sticky !important; top: 0 !important; left: 0; width: 100%; z-index: 1000;
  height: auto !important; background: #fff !important; box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
}
html .lib-header__outer.lib-header-BS01.typeN .lib-header__logo a{ display: block; line-height: 0; background: transparent !important; }
html .lib-header__outer.lib-header-BS01.typeN .lib-header__logo img{ width: auto !important; background: transparent !important; }

/* ============================================================
   PC (>=1202px) : 横並びナビ
   ============================================================ */
@media (min-width: 1202px){
  html .lib-header__outer.lib-header-BS01.typeN .lib-header__inner{
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    max-width: 1300px !important; margin: 0 auto !important; padding: 0 24px !important; position: relative !important;
  }
  html .lib-header__outer.lib-header-BS01.typeN .lib-header__bar{
    width: auto !important; flex: 0 0 auto !important; height: 74px !important; padding: 0 !important;
    background: transparent !important; position: static !important; transform: none !important; margin: 0 !important;
  }
  html .lib-header__outer.lib-header-BS01.typeN .lib-header__logo img{ height: 38px !important; }
  /* バーガー非表示 */
  html .lib-header__outer.lib-header-BS01.typeN .lib-menu__btn{ display: none !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-header__nav{ position: static !important; width: auto !important; }
  /* パネル/カバー = 静的インライン（バー右側に横並び表示） */
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__panel{
    position: static !important; inset: auto !important; width: auto !important; flex: 1 1 auto !important;
    height: auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important;
    visibility: visible !important; opacity: 1 !important; background: none !important; transform: none !important;
    overflow: visible !important; padding: 0 !important; z-index: auto !important;
  }
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__cover{
    position: static !important; width: auto !important; height: auto !important; background: none !important;
    box-shadow: none !important; transform: none !important; overflow: visible !important; padding: 0 !important;
    display: flex !important; align-items: center !important;
  }
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__outer{ display: flex !important; align-items: center !important; width: auto !important; margin: 0 !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__list{ display: flex !important; align-items: center !important; width: auto !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__item{ border: none !important; width: auto !important; list-style: none !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__btn{
    display: flex !important; align-items: center !important; height: auto !important; width: auto !important;
    padding: 0 15px !important; font-family: var(--fntBase); font-size: 14px !important; font-weight: 600 !important;
    letter-spacing: .02em !important; color: #00466d !important; white-space: nowrap !important; background: none !important;
    border: none; text-decoration: none;
  }
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__btn:hover{ color: #1397C3 !important; background: none !important; }
  /* CTA お問い合わせ = プレーンリンク（既存は専用ボタン無し） */
  html .lib-header__outer.lib-header-BS01.typeN .lib-induce__outer{ display: flex !important; align-items: center !important; margin: 0 0 0 6px !important; padding: 0 !important; width: auto !important; flex: 0 0 auto !important; list-style: none !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-induce__outer > li{ width: auto !important; list-style: none; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-induce__btn{
    display: inline-flex !important; align-items: center !important; width: auto !important; max-width: none !important; height: auto !important;
    padding: 0 15px !important; background: none !important; color: #00466d !important; font-family: var(--fntBase);
    font-size: 14px !important; font-weight: 600 !important; border: none !important; border-radius: 0 !important; white-space: nowrap !important; text-decoration: none;
  }
  html .lib-header__outer.lib-header-BS01.typeN .lib-induce__btn:hover{ color: #1397C3 !important; background: none !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-induce__btn .inhide{ display: inline !important; }
}

/* ============================================================
   タブレット以下 (<=1201px) : ハンバーガー + 黒右ドロワー
   ============================================================ */
@media (max-width: 1201px){
  html .lib-header__outer.lib-header-BS01.typeN .lib-header__inner{ max-width: 1300px !important; margin: 0 auto !important; position: relative !important; padding: 0 !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-header__bar{
    display: flex !important; align-items: center !important; justify-content: flex-start !important;
    position: static !important; transform: none !important; margin: 0 !important;
    width: 100% !important; height: 60px !important; padding: 0 16px !important; background: transparent !important;
  }
  html .lib-header__outer.lib-header-BS01.typeN .lib-header__logo img{ height: 30px !important; }

  /* バーガー: ヘッダー右端・縦中央。開時も×として押せるよう z-index をパネル上に */
  html .lib-header__outer.lib-header-BS01.typeN .lib-header__nav{
    display: flex !important; align-items: center !important; justify-content: flex-end !important;
    position: absolute !important; top: 0 !important; bottom: 0 !important; right: 12px !important; left: auto !important;
    height: auto !important; width: auto !important; max-width: none !important; z-index: 1002 !important;
  }
  html .lib-header__outer.lib-header-BS01.typeN .lib-menu__btn{
    display: flex !important; flex: 0 0 auto; width: 48px !important; height: 48px !important;
    background: none !important; border: none; cursor: pointer;
  }
  html .lib-header__outer.lib-header-BS01.typeN .lib-menu__btn > .line{ background-color: #333 !important; }

  /* パネル = 黒60%バックドロップ（ヘッダー下） */
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__panel{
    position: fixed !important; inset: 60px 0 0 0 !important; width: 100% !important; max-width: none !important; height: auto !important;
    display: block !important; visibility: hidden; opacity: 0; background: rgba(0,0,0,.6) !important; z-index: 1001 !important;
    transform: none !important; transition: opacity .3s ease, visibility .3s ease !important; overflow: hidden !important; padding: 0 !important;
  }
  html.is-open .lib-header__outer.lib-header-BS01.typeN .lib-nav__panel{ visibility: visible; opacity: 1; }

  /* カバー = 右からスライドインする「黒」パネル（既存準拠） */
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__cover{
    position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important;
    width: min(400px, 80vw) !important; height: 100% !important; max-width: none !important;
    background: #000 !important; box-shadow: -5px 0 20px rgba(0,0,0,.4) !important;
    transform: translateX(100%) !important; transition: transform .3s ease !important; overflow-y: auto !important; padding: 0 0 40px !important;
  }
  html.is-open .lib-header__outer.lib-header-BS01.typeN .lib-nav__cover{ transform: translateX(0) !important; }

  /* ドロワー中身: 縦積み・白文字・#ddd区切り */
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__outer{ display: block !important; width: 100% !important; margin: 0 !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__list{ display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__item{ display: block !important; width: 100% !important; list-style: none !important; border-bottom: 1px solid #ddd !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__btn{
    display: flex !important; align-items: center !important; width: 100% !important; margin: 0 !important; height: 60px !important; padding: 0 20px !important;
    background: none !important; border: none; cursor: pointer; font-family: var(--fntEN); font-weight: 600; font-size: 13px !important;
    letter-spacing: .04em !important; color: #fff !important; text-decoration: none; white-space: nowrap; transition: background .2s;
  }
  html .lib-header__outer.lib-header-BS01.typeN .lib-nav__btn:hover{ background: #444 !important; color: #fff !important; }

  /* CTA お問い合わせ = ドロワー内リスト項目（既存は色ボタン無し） */
  html .lib-header__outer.lib-header-BS01.typeN .lib-induce__outer{ display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; width: 100% !important; flex: none !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-induce__outer > li{ width: 100% !important; list-style: none; border-bottom: 1px solid #ddd !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-induce__btn{
    display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; max-width: none !important; height: 60px !important; padding: 0 20px !important;
    background: none !important; color: #fff !important; font-weight: 600; font-size: 13px !important; border: none !important; border-radius: 0 !important; text-decoration: none; white-space: nowrap;
  }
  html .lib-header__outer.lib-header-BS01.typeN .lib-induce__btn:hover{ background: #444 !important; }
  html .lib-header__outer.lib-header-BS01.typeN .lib-induce__btn .inhide{ display: inline !important; }
}