/* ビジネスページ専用ヘッダー: プルダウンを左寄せにする上書きのみ */

.nav_menu .service_menu .drop_menu {
  width: 210px;
}

.nav_menu ul .drop_menu li {
  text-align: left;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* ナビ幅をFigmaに合わせて拡張（ボタン込みで6項目分） */
.nav_menu ul {
  width: 700px;
}

/* お問い合わせボタン（Figma: 赤ピル 156x32・白13px・封筒アイコン） */
.business_contact_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 156px;
  height: 32px;
  background: #e60039;
  color: #fff !important;
  font-size: 13px;
  font-weight: bold;
  border-radius: 50px;
  text-decoration: none;
  box-sizing: border-box;
}

.business_contact_btn img {
  width: 17px;
  height: 12px;
}

.nav_menu li.business_contact_li:hover {
  color: inherit;
}

.nav_menu li a.business_contact_btn {
  transition: opacity 0.3s ease;
}

.nav_menu li a.business_contact_btn:hover {
  opacity: 0.6;
  color: #fff !important;
}

/* =========================================================================
   SP（モバイル）ヘッダー: Figma node 23678:5645（バー）/ 23678:5725（展開メニュー）
   ブレイクポイントは他ページ踏襲で 750px。既存テーマのSPドロワー土台
   （#toggle→body.is-open で #nav-content スライド、.service_menu アコーディオン）
   を活かし、見た目のみFigmaに合わせる。PCには一切影響させない。
   ========================================================================= */

/* PC: バー内お問い合わせピルは非表示 / CTAの「はこちら」も非表示 */
.business_sp_contact { display: none; }
.contact_btn_suffix { display: none; }

@media screen and (max-width: 750px) {

  /* PC用に広げたナビ幅(700px)をSPでは全幅へ戻す（#nav-content内で右側クリップ＝矢印/ボタン欠けを防ぐ） */
  .nav_menu ul { width: 100%; }

  /* --- ヘッダーロゴのリンク当たり判定をロゴ画像のみに限定 ---
     style.css(L7990)は位置決めをimgのmargin(26px上/20px左)で作っており、
     inline-blockの<a>がそのmarginを取り込む＝ロゴ左上の余白までタップ判定に入る。
     オフセットを<a>のmargin(当たり判定の外)へ移し、imgのmarginを消す＝
     <a>が画像ぴったりに収縮し、タップ対象がロゴ画像だけになる（見た目位置は不変）。 */
  .top_nav .logo a {
    margin: 26px 0 0 20px;
  }
  .top_nav .logo img {
    margin: 0;
  }

  /* --- ヘッダーバー内 お問い合わせ赤ピル（Figma: 128x32・右76px・上19px） --- */
  .business_sp_contact {
    display: block;
    position: fixed;
    top: 19px;
    right: 76px;
    z-index: 300; /* logoバー(200)より上・#toggle(1000)より下 */
  }
  .business_sp_contact_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 128px;
    height: 32px;
    background: #e60039;
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
  }
  .business_sp_contact_btn img { width: 17px; height: 12px; }
  .business_sp_contact_btn:hover { opacity: 0.6; color: #fff; }

  /* --- ドロワー: トップレベル項目（Figma: 69px行・13px黒・左36px・下線#828282） --- */
  .nav_menu > ul > li {
    display: block;       /* 修正依頼#2: PC由来のinline-blockだとiOSで空padding領域のタップが発火しない。縦ドロワーの行としてblockが正しく、行全体をタップ対象にする */
    padding: 0 0 0 36px;  /* 右paddingは0（矢印は::beforeで絶対配置。サブメニューを右端まで伸ばす）。※.f_menuは下で左paddingを0にしaへ移す */
    border-bottom: 1px solid #828282;
    font-size: 13px;
    line-height: 69px;   /* 素の文字ノードで69px行を作り、直後のサブメニューを69pxから開始させる */
    color: #000;
  }
  .nav_menu > ul > li:first-of-type {
    border-top: 1px solid #828282; /* Figma Line 11（バー下の区切り） */
  }
  .nav_menu > ul > li .drop_menu { line-height: normal; } /* 親のline-height:69pxをサブ項目に波及させない */

  /* 修正依頼#2: リンク項目（.f_menu＝安心の理由/資料DL/企業情報）も行全体をタップ可能にする。
     .service_menuはJSクリックが<li>に乗り全幅が既に有効だが、.f_menuは<a>が当たり判定。
     liの左paddingを廃し、<a>自身をフル幅block化＋左36pxのインデントをaへ移す＝左端デッドスペースを解消。 */
  .nav_menu > ul > li.f_menu {
    padding-left: 0;
  }
  .nav_menu > ul > li.f_menu > a {
    display: block;
    padding-left: 36px;  /* テキスト位置は従来どおり左36px（liから移設） */
    /* line-height:69px を継承しblock高69px、幅はblockで行いっぱい */
  }
  /* 矢印::beforeはposition:absolute＝<a>の上に描かれ右端20pxの当たり判定を奪う。
     装飾なので当たりを透過させ、行右端まで<a>のタップを通す */
  .nav_menu > ul > li.f_menu::before {
    pointer-events: none;
  }

  /* 赤丸▶アイコン（Figma menu arrow 20x20・右20px。素材は▼→CSSで-90°回転して▶に） */
  .nav_menu > ul > li.service_menu::before,
  .nav_menu > ul > li.f_menu::before {
    content: "";
    position: absolute;
    top: 24.5px;              /* (69-20)/2 ＝行内で縦中央（li高が伸びても固定） */
    right: 20px;
    width: 20px;
    height: 20px;
    border: none;            /* テーマのborder製chevronを打ち消す */
    background: url(../image/business/icon_menu_arrow.svg) center / contain no-repeat;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
  }
  /* アコーディオン展開時は「白抜き円＋赤▼」に差替（Figma 23807:7554。回転でなく別アセット） */
  .nav_menu > ul > li.service_menu.arrow_rotate::before {
    background-image: url(../image/business/icon_menu_arrow_open.svg);
    transform: rotate(0deg);
  }
  /* 用途別=4子/機種別=3子。テーマ既定の max-height:122px では見切れるため十分に確保 */
  .nav_menu > ul > li.service_menu .open_submenu { max-height: 400px !important; }

  /* --- 第2階層（サブメニュー）: Figma 23807:7554 --- */
  /* サブ項目行: 40px・白背景・テキスト左56px(=li左36px+20px)・W4細字13px黒 */
  /* PC用ドロップダウンの width:210px / left:50% / translateX(-50%) がSPに残るので全てリセット */
  .nav_menu > ul > li.service_menu .drop_menu {
    /* 修正依頼#2: サブ項目も行全体タップ可に。親service_menu liの左padding36pxの外へ
       出し（margin-left:-36px＋width拡張）、ドロワー全幅(x0〜393)を占有させる。
       背景は親ドロワーもサブliも#fffなので左へ広げても見た目は不変。 */
    width: calc(100% + 36px);
    padding-left: 0;
    margin-left: -36px;
    left: 0;
    right: auto;
    transform: none;
  }
  /* サブ群末尾の下28px余白（Figma: サブ末尾258→区切り線286）。
     paddingはmax-height:0でも残る(border-boxでも漏れる)ため、最終子のmargin-bottomで。
     overflow:hiddenのBFCでmarginは保持され、閉時はmax-height:0で全体クリップ＝漏れない */
  .nav_menu > ul > li.service_menu .drop_menu li:last-child {
    margin-bottom: 28px;
  }
  .nav_menu > ul > li.service_menu .drop_menu li {
    padding: 0;            /* 左インデント56px(=36+20)は<a>へ移設。行全体を<a>のタップ対象にする */
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    font-weight: 400;      /* Figma: Hiragino W4（親のMediumより細く） */
    background: #fff;
    border: none;
  }
  /* 修正依頼#2: サブリンクをフル幅block化＝行全体タップ可。テキスト左56pxはpaddingで維持 */
  .nav_menu > ul > li.service_menu .drop_menu li a {
    display: block;
    height: 40px;
    line-height: 40px;
    padding-left: 56px;    /* Figma: サブ項目テキスト左56px */
    color: #000;
    font-weight: 400;
  }
  /* サブ項目の赤▶小三角（円なし・約7.5x8.66px）＝CSSボーダー三角で忠実再現。
     right:26px で三角の中心を親の丸矢印(中心x363)と同じ縦列に揃える */
  .nav_menu > ul > li.service_menu .drop_menu li::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 26px;
    left: auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4.33px 0 4.33px 7.5px;
    border-color: transparent transparent transparent #e60039;
    background: none;
    transform: translateY(-50%);
    pointer-events: none;    /* 修正依頼#2: absolute配置で<a>右端の当たり判定を奪うため透過。矢印上のタップも遷移させる */
  }

  /* --- ドロワー下部: オレンジ「お問い合わせはこちら」CTA（Figma: 353x60・#dd7e0f/#dc3509枠） --- */
  .contact_btn_suffix { display: inline; }

  .nav_menu ul li.business_contact_li {
    padding: 100px 20px 40px;        /* Figma: 最終項目下端(418)→ボタン上端(518)=100px＋左右20pxマージン */
    border-bottom: none;
  }
  .nav_menu ul li.business_contact_li .business_contact_btn {
    width: 100%;                     /* 393 - 20*2 = 353px */
    height: 60px;
    gap: 12px;
    background: #dd7e0f;
    border: 2.353px solid #dc3509;
    border-radius: 11.767px;
    font-size: 20px;
    font-weight: bold;
    color: #fff !important;
  }
  .nav_menu ul li.business_contact_li .business_contact_btn img {
    width: 28px;                     /* Figma封筒 28x20（既存icon_envelope_smを拡大流用） */
    height: 20px;
    margin: 0;                       /* テーマ last-child img の margin:0 auto を打消し（flex内でauto余白吸収→片寄り） */
  }
  .nav_menu ul li.business_contact_li .business_contact_btn:hover {
    opacity: 0.6;
    color: #fff !important;
  }
}