/* ================================
   ヘッダー部分（グロナビ以外）
   共通デザイン、/assets/style.css/は変更できない。
   そのため <header class="common headerBizpost">
   のような形で「headerBizpost」というクラスをナビタグに追加して、分岐を作成。
   そこを起点に法人用のスタイルを当てている。
================================ */

/* トグルの色を変更 */
header.common.headerBizpost .subNav .customer-type-selector button.active {
  background: #0B2A3A;
}

.headerBlankItem {
  display: flex;
  align-items: center; 
}

.headerBlankLink {
  display: inline-flex;
  align-items: center;
  gap: var(--X3S);
  font-weight: 700;
  color: var(--color-texticon-secondary) !important;
  text-decoration: none;
}

/* ヘッダーのリンクに外部サイトアイコンを追加 */
.headerBlankLink::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("/bizpost/assets/img/components/header/blank.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

header.common .mf_finder_header .mf-search-bar_dropdown-list {
  display: block;
  width: 12em;
  right: -40px;
  left: auto;
  overflow-wrap: anywhere;
  padding: 4px 7px 4px 0;
  z-index: 9999;
}
header.common .mf_finder_header .mf-search-bar_dropdown-list li.mf-search-bar_dropdown-list_item {
  width: 100%;
  height: auto;
  font-size: var(--font-xs);
}
@media screen and (max-width: 767px) {
  header.common .mf_finder_header .mf-search-bar_dropdown-list {
    display: block;
    width: calc(100% + 40px);
  }
}

/* ================================
   以下、グロナビ (Bizpost)
   共通デザイン、/assets/style.css/は変更できない。
   そのため <nav class="globalNav globalNavBizpost" aria-label="グローバルナビゲーション">
   のような形で「globalNavBizpost」というクラスをナビタグに追加して、分岐を作成。
   そこを起点に法人用のスタイルを当てている。
================================ */

/* ================================
   グロナビ z-inex調整 (Bizpost)
================================ */

/* メガメニューのz-index調整 */
/* メニュー開閉時にメガメニューのz-indexをコンテンツより上にして、コンテンツにはオーバーレイ */
/* クラスの付け替えは既存のJSで対応しきれないため、assets/js/components/navGlobalBizpost.jsで対応 */

.globalNavBizpost {
  position: relative;
  z-index: 1000;
  /* bodyにも付与しているが、ここの不具合解消で使ったのでここにも書いている */
  /* 不要かもしれない */
  -webkit-text-size-adjust: 100%;
}

.globalNavBizpost .mega.is-open {
  /* 共通CSSで max-width:1366px が入っていたため解除 */
  max-width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 1000;
  /* ★ ここの高さはおおよそ。メガメニューの一番下のトップへのリンクの高さくらいにあわえている */
  /* これを行うことでbodyにスクロールロックかけてもメガメニューはスクロールできるように対応 */
  max-height: calc(100vh - 168px);
  overflow-y: auto;
}


body.is-mega-open .menuOverlay {
  position: fixed;
  /* ヘッダーの高さ分topずらし。おおよそです */
  top: 168px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 1;
  transition: opacity 0.22s ease;
  pointer-events: auto;
}

/* スクロールロック */
/* 本来、全体のスタイルを調整するcssに当てたいところですが、共通CSSが管理外にあるため、とりあえずここに設置 */
/* この.is-mega-openは、メガメニューが開いたときにbodyに付与されるクラス。assets/js/components/navGlobalBizpost.jsで制御してます */
body.is-mega-open {
  overflow: hidden;
}

/* ================================
   グロナビ メニューアイコン部の調整 
================================ */

.globalNavBizpost .globalNav__item {
  font-size: clamp(
    var(--font-xxs),
    0.9vw + 0.3rem,
    var(--font-m)
  );
}

/* グロナビのアイコンとテキストの間隔調整 */
.globalNavBizpost .globalNav__item span {
  padding-left: clamp(40px, 3.5vw, 48px);
  font-size: (--font-head-xs);
  font-family: "Noto Sans JP", "BIZ UDPGothic", "Helvetica Neue", Arial, "Hiragino Sans", Meiryo, sans-serif;
}

header.common .subNav ul .customer-type-selector button {
  font-family: "Noto Sans JP", "BIZ UDPGothic", "Helvetica Neue", Arial, "Hiragino Sans", Meiryo, sans-serif;
}

/* Bizpost専用：既存のfont-iconを殺す */
.globalNavBizpost .globalNav__item span::before {
  content: "";
  font-family: initial;
  width: clamp(32px, 3vw, 40px);
  height: clamp(32px, 3vw, 40px);
  position: absolute;
  left: 0;
  top: -5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.globalNavBizpost .globalNav__item--send span::before {
  background-image: url('/bizpost/assets/img/components/header/posttruck.svg');
}

.globalNavBizpost .globalNav__item--global span::before {
  background-image: url('/bizpost/assets/img/components/header/global.svg');
}

.globalNavBizpost .globalNav__item--logistics span::before {
  background-image: url('/bizpost/assets/img/components/header/logstics.svg');
}

.globalNavBizpost .globalNav__item--pr span::before {
  background-image: url('/bizpost/assets/img/components/header/pr.svg');
}

.globalNavBizpost .globalNav__item--efficiency span::before {
  background-image: url('/bizpost/assets/img/components/header/process-optimization.svg');
}

.globalNavBizpost .globalNav__item--welfare span::before {
  background-image: url('/bizpost/assets/img/components/header/heart.svg');
}

/* ================================
   右メニューの余白の調整
================================ */
.globalNavBizpost .mega .mega__panel .mega__heading2 {
    margin-top: var(--S);
}
.globalNavBizpost .mega .mega__content {
    padding: 0px 34px;
    min-height: 460px;
}


/* ================================
   各メガメニューの一番上のリンク部分の調整
================================ */
.globalNavBizpost .mega .mega__panel .mega__heading a::before {
  content: none;
}

.globalNavBizpost .mega .mega__panel .mega__heading a {
  border-bottom: none;
}

.globalNavBizpost .mega .mega__panel .mega__heading a:hover {
  text-decoration: none;
}

.globalNavBizpost .mega__headingText {
  text-decoration: none;
}

.globalNavBizpost .mega__heading a:hover .mega__headingText {
  text-decoration: underline;
}

.globalNavBizpost .mega .mega__panel .mega__heading a::after {
  font-family: "icon-jp-post2025";
  content: "\e902";
  margin-left: 10px;
  font-size: 0.9em;
}

.globalNavBizpost .mega .mega__panel .mega__grid a {
  font-size: var(--font-xs);
  margin-bottom: var(--X3S);
  word-break: break-word;
}

/* ================================
  各メガメニューの一番下の固定メニュー見出しリンクのアイコン設定
================================ */

/* アイコンとテキストの間隔調整 */
.globalNavBizpost .mega .mega__inner .fixmenu .fix__head a {
  padding-left: 56px;
}

.globalNavBizpost .mega .mega__inner .fixmenu .fix__head a::before {
  content: "";
  font-family: initial;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: -9px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: var(--X3S);
}

/* 国内配送 */
.mega--bizpost-send .fix__head a::before {
  background-image: url("/bizpost/assets/img/components/header/posttruck.svg");
}

/* 海外配送・越境EC */
.mega--bizpost-global .fix__head a::before {
  background-image: url("/bizpost/assets/img/components/header/global.svg");
}

/* 物流ソリューション */
.mega--bizpost-logistics .fix__head a::before {
  background-image: url("/bizpost/assets/img/components/header/logstics.svg");
}

/* 広告・PR支援 */
.mega--bizpost-promotion .fix__head a::before {
  background-image: url("/bizpost/assets/img/components/header/pr.svg");
}

/* 業務効率化 */
.mega--bizpost-efficiency .fix__head a::before {
  background-image: url("/bizpost/assets/img/components/header/process-optimization.svg");
}

/* 福利厚生 */
.mega--bizpost-other .fix__head a::before {
  background-image: url("/bizpost/assets/img/components/header/heart.svg");
}


/* ================================
  メガメニューの左側のサイドメニュー見出しリンクのアクティブ時のスタイル調整
================================ */

.globalNavBizpost .mega__sidebar .mega__sub {
  background: #F9FCFD;
}

/* アクティブ */
.globalNavBizpost .mega__sidebar .mega__sub.is-active {
  background: var(--color-fill);
  cursor: default;
}

/* サイドメニュー見出しリンクの下線追加 */
.globalNavBizpost .mega__sidebar .mega__sub::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  display: block;
  height: 1px;
  width: 90%;
  margin: auto;
  border-bottom: 1px solid var(--color-separate-secondary);
}

/* サイドメニュー見出しリンクの２つ目以降の下線が短いので上書き */
.globalNavBizpost .mega__sub + .mega__sub::after {
  width: 90% !important;
}


/* ================================
  メガメニューの左側のサイドメニュー見出しリンクのアイコンに関する調整
================================ */
/* 既存のアイコンは打ち消し */
/* 共通CSSいじっても良いが、どこが共通だったかわからなくなりそうなので、この形で対応 */

.globalNavBizpost .mega__sub span {
  position: relative;
  padding-left: 56px;
  color: var(--color-text-primary);
  font-family: "Noto Sans JP", "BIZ UDPGothic", "Helvetica Neue", Arial, "Hiragino Sans", Meiryo, sans-serif;
}

.globalNavBizpost .mega__sub span::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.75em;
  width: 40px;
  height: 40px;
}

.globalNavBizpost .mega__sub:before {
  color: var(--color-texticon-primary);
}

/* 配送サービス */
.globalNavBizpost .mega__sidebar .mega__sub[data-panel="send-01"] span::before {
  background-image: url("/bizpost/assets/img/components/nav-global-bizpost/icon-01.svg");
}

/* 決済 */
.globalNavBizpost .mega__sidebar .mega__sub[data-panel="send-02"] span::before {
  background-image: url("/bizpost/assets/img/components/nav-global-bizpost/icon-02.svg");
}

/* 海外配送・越境EC */
.globalNavBizpost .mega__sidebar .mega__sub[data-panel="recieve-01"] span::before {
  background-image: url("/bizpost/assets/img/components/nav-global-bizpost/icon-03.svg");
}

/* 物流ソリューション */
.globalNavBizpost .mega__sidebar .mega__sub[data-panel="service-01"] span::before {
  background-image: url("/bizpost/assets/img/components/nav-global-bizpost/icon-04.svg");
}

/* 広告・PR支援 */
.globalNavBizpost .mega__sidebar .mega__sub[data-panel="buy-01"] span::before {
  background-image: url("/bizpost/assets/img/components/nav-global-bizpost/icon-05.svg");
}

/* 業務効率化：発送業務 */
.globalNavBizpost .mega__sidebar .mega__sub[data-panel="finance-01"] span::before {
  background-image: url("/bizpost/assets/img/components/nav-global-bizpost/icon-06.svg");
}

/* 業務効率化：入金・送金業務 */
.globalNavBizpost .mega__sidebar .mega__sub[data-panel="finance-02"] span::before {
  background-image: url("/bizpost/assets/img/components/nav-global-bizpost/icon-07.svg");
}

/* 福利厚生の充実 */
.globalNavBizpost .mega__sidebar .mega__sub[data-panel="enjoy-01"] span::before {
  background-image: url("/bizpost/assets/img/components/nav-global-bizpost/icon-08.svg");
}

/* =========================================================
  Bizpost SP GlobalNav (drawer / drilldown)
  【最終・完全版CSS】
  - SPでは PC用globalNav__inner を隠す
  - SP用 drawer を表示
  - level1 → level2 ドリルダウン
  - level2中は不要要素を非表示
========================================================= */
@media (max-width: 767px) {

  /* 法人だけS Pメインメニューの下部が丸まっている */
  /* header.common[data-menu=open] #mobileMenu {
    border-radius: 0 0 24px 24px;
  } */

  nav.globalNav > .globalNav__inner {
    display: none !important;
  }

  .globalNav.globalNavBizpost .globalNav__slide {
    width: 100%;
  }

  /* =====================================================
     SP時：表示レイヤーの切り替え
  ===================================================== */
  
  /* =====================================================
     SPドロワー構造
  ===================================================== */

  /* =====================================================
    SPドロワー構造（個人側と同一思想）
  ===================================================== */

  /* =====================================================
     level1 カテゴリ
  ===================================================== */

  header.common.headerBizpost .subNav3.spDisp ul {
    padding: 0 var(--M);
    margin-top: var(--M);
  }   

  .globalNavBizpost nav.globalNav__menu button.globalNav__item:last-child span {
    border-bottom: 1px solid var(--color-separate-secondary);
  }

  .globalNavBizpost {
    box-shadow: none !important;
  }

  .globalNavBizpost .globalNav__menu {
    margin-bottom: 0 !important;
  }

  .globalNavBizpost .globalNav__inner {

    border-bottom: none;
  }

  .globalNavBizpost .globalNav__item {
    font-size: 18px;
    padding: 0;
    font-weight: 700;
  }

  .globalNavBizpost nav.globalNav__menu button.globalNav__item span {
    display: block;
    padding: var(--S) 0 var(--S) 47px;
    border-bottom: 1px solid var(--color-separate-secondary);
  }

  .globalNavBizpost nav.globalNav__menu button.globalNav__item  {
    border-left: none !important;
    /* padding: 0 var(--M); */
  }

  .globalNavBizpost nav.globalNav__menu button.globalNav__item span::before {
    width: 32px;
    font-size: 32px;
    height: 32px;
    top: 0;
    bottom: 0;
    margin: auto;
  }

   .globalNavBizpost nav.globalNav__menu button.globalNav__item span {
    position: relative;
    display: block;
    padding-right: 32px; /* シェブロン分 */
    background-image: url("/bizpost/assets/img/components/nav-global-bizpost/icon-09.svg");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: right center;
  }


  /* =====================================================
     subNav3（SP：その他メニュー）
     inlineArrowLink.after 相当
     main外ではデザインシステムあたらないので追記
  ===================================================== */
  header.common[data-menu="open"] .subNav3 ul.first li a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-texticon-secondary);
  }

  /* 矢印（テキスト直後） */
  header.common[data-menu="open"] .subNav3 ul.first li a::after {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url("/bizpost/assets/img/components/nav-global-bizpost/icon-09.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: translateY(0.05em); /* 光学調整 */
  }

  header.common[data-menu="open"] .subNav3 ul.first li a:hover {
    text-decoration: none;
  }

  /* =========================================
    second（企業情報 / 採用情報 / ニュース）
    カテゴリ準拠のSPナビリスト
  ========================================= */

  /* ul 全体 */
  header.common[data-menu="open"]
  .subNav3 ul.spNavList {
    /* border-bottom: 1px solid var(--color-separate-secondary); */
    margin-top: var(--S);
  }

  /* 最初の second だけ上線 */
  header.common[data-menu="open"]
  .subNav3 ul.spNavList:first-of-type {
    /* border-top: 1px solid var(--color-separate-secondary); */
  }

  header.common[data-menu="open"] .subNav3 ul.spNavList li:last-child a {
    border-bottom: 1px solid var(--color-separate-secondary);
  }

  /* li */
  header.common[data-menu="open"]
  .subNav3 ul.spNavList li {
    margin: 0;
  }

  header.common[data-menu="open"]
  .subNav3 ul.spNavList li:first-child {
    border-top: 1px solid var(--color-separate-secondary);
  }

  /* a：カテゴリと同じ行設計 */
  header.common[data-menu="open"]
  .subNav3 ul.spNavList li a {
    display: block;
    position: relative;
    font-size: 16px;
    color: var(--color-text-primary);
    padding: var(--S) 0;
    border-bottom: 1px solid var(--color-separate-secondary);
  }

  header.common[data-menu="open"]
  .subNav3 ul.spNavList li a:hover {
    text-decoration: none;
  }
  /* 右シェブロン（カテゴリと同じ） */
  header.common[data-menu="open"]
  .subNav3 ul.spNavList li a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 24px;
    height: 24px;
    background-image: url("/bizpost/assets/img/components/nav-global-bizpost/icon-09.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .subNav3 .bottom-wrap {
    margin-top: var(--M);
    margin-bottom: var(--L);
  }

  /* =========================================
    lang（English）
    テキスト直後に地球儀
  ========================================= */

  header.common[data-menu="open"]
  .subNav3 ul.spNavList.spNavList--lang {
    /* border-bottom: 1px solid var(--color-separate-secondary); */
    margin-top: var(--L);
  }

  header.common[data-menu="open"]
  .subNav3 ul.spNavList--lang li a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: 16px;
    color: var(--color-texticon-secondary);
    padding: 0;
    border-bottom: none;
  }

  header.common[data-menu="open"]
  .subNav3 ul.spNavList--lang li:first-child {
    border-top: none;
  }

  header.common[data-menu="open"]
  .subNav3 ul.spNavList--lang li a:last-child{
    border-bottom: none;
  }

  /* 地球儀：インライン */
  header.common[data-menu="open"]
  .subNav3 ul.spNavList--lang li a::after {
    font-family: "icon-jp-post2025";
    content: "\e91f";
    font-size: 1.3em;
    line-height: 1;
    position: static; 
    background: none; 
    transform: translateY(0.05em);
  }

  /* spNavList 側の線・枠を完全に無効化 */
  header.common[data-menu="open"]
  .subNav3 ul.spNavList--lang {
    border: none;
  }


  /* =====================================================
     level2 ヘッダー（戻る＋タイトル）
  ===================================================== */

  .globalNavBizpost.is-level2 .globalNav__level2Body .mega {
    display: block !important;
    position: relative !important;
    block-size: auto !important;
    max-block-size: none !important;
    height: auto !important;

    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;

    overflow: visible !important;
  }

   /* level2 左サイドメニュー：アイコン＋テキストを縦並び */
  .globalNavBizpost .mega__sidebar .mega__sub span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    padding-left: 0;
    text-align: center;
  }

  .globalNavBizpost .mega__sidebar .mega__sub span::before {
    position: static;
    display: block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .globalNavBizpost .mega .mega__content {
    padding: 0px;
  }

  .globalNavBizpost .mega__content .mega__panel .mega__heading.top {
    padding: 0 var(--S);
    border-bottom: 1px solid var(--color-separate-secondary);
  }

  .globalNavBizpost .mega__content .mega__panel .mega__heading.top + .mega__heading2 {
    margin-top: var(--X2L);
    padding: 0 var(--S);
    font-size: 16px;
  }

  .globalNavBizpost .mega__content .mega__panel .mega__grid + .mega__heading2 {
    margin-top: var(--X2L);
    padding: 0 var(--S);
    font-size: 16px;
  }

  .globalNavBizpost .mega__content .mega__panel .mega__grid {
    padding: 0 var(--S) 0 var(--XL);
  }

  .globalNavBizpost .mega__panel {
    padding-bottom: var(--X2L);
  }

  .globalNavBizpost .mega__inner .fixmenu .fix__head {
    margin-top: var(--S)
  }

  .globalNavBizpost .globalNav__level2Header .globalNav__title {
    font-size: 18px;
  }

  .globalNav .mega__content .mega__panel .mega__heading {
    font-size: 18px;
    /* font-weight: 700; */
  }

  .globalNavBizpost .mega .mega__panel .mega__grid a {
    font-size: 14px;
  }

  .globalNavBizpost .mega__panel .mega__grid a {
    padding-right: 2.2em;
  }
  
  .globalNavBizpost .mega__panel .mega__grid a span {
    font-size: 12px;
  }

  .globalNavBizpost button.mega__sub {
    font-size: 14px;
  }

  .globalNavBizpost .mega__panel .mega__heading a {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .globalNavBizpost .mega__panel .mega__heading a .mega__headingText {
    flex: 1 1 auto;
    min-width: 0;
  }

  .globalNavBizpost .mega__panel .mega__heading a::after {
    flex: 0 0 auto;
    font-size: 16px !important;
  }
  
  .globalNavBizpost .mega__inner .fixmenu .fix__head {
    font-size: 16px;
  }

  .globalNav .mega__content .mega__panel .mega__grid a:before {
    font-size: 16px;
  }

  .globalNav .globalNav__level2Header button.globalNav__back {
    padding-left: 28px;
    font-size: 16px;
  }

  .globalNav .globalNav__level2Header {
    padding: var(--XS);
  }

  .globalNavBizpost .mega__content .mega__panel .mega__heading.top {
    padding: var(--XS);
  }

  .globalNavBizpost .mega .fixmenu .fix__head a {
    position: relative;
    padding-right: 32px;
  }

  .globalNavBizpost .mega .fixmenu .fix__head a::after {
    font-family: "icon-jp-post2025";
    content: "\e902"; 
    position: absolute;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 16px;
    line-height: 1;
    color: var(--color-texticon-secondary);
  }
}