/* ============================================================
   ビルメンNEXT LP — style.css
   移植元 ビルメンNEXT_LP.dc.html の <helmet> 内 <style> を移設し、
   style-hover 属性を :hover クラスへ、ハンバーガー/FAQ 等の
   挙動用スタイルを追加したもの。デザイントークンは README 準拠。
   ============================================================ */

/* ---------- Base reset (移植元 helmet より) ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #F4F2EC;
  color: #16150F;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: #EC5A16; color: #fff; }
a { color: inherit; }

/* ---------- Hero マーキー ---------- */
@keyframes bn-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   ホバー反転 (style-hover 属性の CSS 化 / 計5箇所)
   base スタイルはインラインで維持し、hover のみをここで定義。
   ============================================================ */

/* オレンジ地 → インク(黒)地に反転
   使用: ヘッダーCTA / Hero 主ボタン */
.bn-btn-ink {
  transition: background-color .18s ease, color .18s ease;
}
.bn-btn-ink:hover { background: #16150F !important; color: #fff !important; }

/* オレンジ地 → ペーパー地(文字インク)に反転
   使用: 先行利用CTA / 料金CTA / 最終CTA */
.bn-btn-paper {
  transition: background-color .18s ease, color .18s ease;
}
.bn-btn-paper:hover { background: #F4F2EC !important; color: #16150F !important; }

/* 副次リンク(下線)・ナビリンクのホバー */
.bn-link-underline { transition: color .18s ease, border-color .18s ease; }
.bn-link-underline:hover { color: #EC5A16; border-color: #EC5A16; }
.bn-nav a { transition: color .18s ease; }
.bn-nav a:hover { color: #EC5A16; }

/* ============================================================
   ヘッダーナビ / ハンバーガーメニュー
   ============================================================ */

/* ドロップダウン内 CTA はデスクトップでは非表示 (ヘッダー右端の CTA を使う) */
.bn-nav-cta { display: none; }

/* ハンバーガーボタンはデスクトップでは非表示 */
.bn-nav-toggle {
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 2px solid #16150F;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.bn-nav-toggle .bn-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: #16150F;
  transition: background-color .2s ease;
}
.bn-nav-toggle .bn-bars::before,
.bn-nav-toggle .bn-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #16150F;
  transition: transform .2s ease, top .2s ease;
}
.bn-nav-toggle .bn-bars::before { top: -6px; }
.bn-nav-toggle .bn-bars::after  { top: 6px; }

/* 開いている状態: バーを × に */
.bn-nav-toggle[aria-expanded="true"] .bn-bars { background: transparent; }
.bn-nav-toggle[aria-expanded="true"] .bn-bars::before { top: 0; transform: rotate(45deg); }
.bn-nav-toggle[aria-expanded="true"] .bn-bars::after  { top: 0; transform: rotate(-45deg); }

/* ============================================================
   レスポンシブ (移植元 helmet より / ハンバーガー対応を追記)
   ============================================================ */
@media (max-width: 980px) {
  /* デスクトップ横並びナビをドロップダウンパネル化 */
  [data-r="nav"] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #F4F2EC;
    border-bottom: 2px solid #16150F;
    padding: 8px 0 !important;
    box-shadow: 0 18px 40px rgba(22,21,15,0.14);
  }
  [data-r="nav"].is-open { display: flex !important; }
  [data-r="nav"] a {
    padding: 14px 22px;
    font-size: 16px;
    border-top: 1px solid #e2ded2;
  }
  [data-r="nav"] a:first-child { border-top: none; }

  .bn-nav-toggle { display: inline-flex; }

  /* モバイルではヘッダー右端の長い CTA を非表示にし、ハンバーガーを右端へ寄せる
     (CTA はドロップダウンメニュー内に表示する) */
  [data-r="hpad"] > .bn-btn-ink { display: none !important; }

  /* ドロップダウン内 CTA をオレンジのボタンとして表示 */
  .bn-nav-cta {
    display: block !important;
    margin: 12px 22px 6px;
    padding: 14px 20px !important;
    background: #EC5A16;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    border-top: none !important;
    border-radius: 2px;
  }
  .bn-nav-cta:hover { background: #16150F; color: #fff; }

  [data-r="hero"] { grid-template-columns: 1fr !important; gap: 36px !important; padding: 44px 22px 60px !important; }
  [data-r="phone"] { margin: 0 auto !important; }
  [data-r="g2"], [data-r="g3"], [data-r="g4"], [data-r="companies"] { grid-template-columns: 1fr !important; }
  [data-r="cdiv"] { display: none !important; }
  [data-r="cpanel2"] { border-top: 2px solid #16150F; }
  [data-r="pad"] { padding-left: 22px !important; padding-right: 22px !important; padding-top: 66px !important; padding-bottom: 66px !important; }
  [data-r="hpad"] { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 620px) {
  h1 { font-size: 38px !important; line-height: 1.18 !important; }
  h2 { font-size: 26px !important; }
  h3 { font-size: 20px !important; }
  [data-r="herobtns"] a { font-size: 15px !important; }
}

/* ============================================================
   FAQ アコーディオン
   (移植元 <sc-for> テンプレのインラインスタイルを CSS 化)
   ============================================================ */
.bn-faq-list { border-top: 2px solid #16150F; }
.bn-faq-item { border-bottom: 2px solid #16150F; }
.bn-faq-q {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 4px;
  text-align: left;
}
.bn-faq-num {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #EC5A16;
  flex-shrink: 0;
}
.bn-faq-text {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #16150F;
  flex: 1;
  line-height: 1.5;
}
.bn-faq-sign {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 900;
  font-size: 24px;
  color: #16150F;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.bn-faq-a { padding: 0 4px 26px 60px; }
.bn-faq-a p {
  font-size: 14.5px;
  line-height: 1.95;
  color: #45433A;
  margin: 0;
}
.bn-faq-a[hidden] { display: none; }

/* JS 無効時のフォールバック: 全回答を表示しておく */
@media (max-width: 620px) {
  .bn-faq-q { padding: 20px 2px; }
  .bn-faq-text { font-size: 15px; }
  .bn-faq-a { padding-left: 40px; }
}

/* ============================================================
   お問い合わせフォーム(#contact)
   ============================================================ */
.bn-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #0d0c08;
  border: 1px solid #35342a;
  border-radius: 2px;
  padding: 12px 14px;
  color: #F4F2EC;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .18s ease;
}
.bn-input::placeholder { color: #6b6a5c; }
.bn-input:focus { outline: none; border-color: #EC5A16; }
select.bn-input { appearance: none; }

.bn-btn-paper:disabled { opacity: .55; cursor: not-allowed; }
.bn-btn-paper:disabled:hover { background: #EC5A16 !important; color: #fff !important; }