/* =========================================
   MENU page only
========================================= */
body.page-menu main.menu-page{
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 40px 80px;
  box-sizing: border-box;
}

/* intro */
body.page-menu .menu-intro{
  margin: 8px 0 24px;
  line-height: 1.9;
}

/* section */
body.page-menu .menu-section{
  margin: 26px 0 34px;
}
body.page-menu .menu-h2{
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;
}
body.page-menu .menu-lead{
  margin: 0 0 14px;
  line-height: 1.9;
  color: #333;
}

/* plan wrap */
body.page-menu .plan-wrap{
  background: #f7f7f7;
  border-radius: 18px;
  padding: 22px;
}
body.page-menu .plan-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
body.page-menu .plan-head-title{
  font-weight: 800;
  margin: 0;
}
body.page-menu .plan-head-note{
  margin: 0;
  font-size: 12px;
  opacity: .7;
}

/* grid */
body.page-menu .plan-grid{
  display: grid;
  gap: 16px;
}
body.page-menu .plan-grid.is-3{ grid-template-columns: repeat(3, 1fr); }
body.page-menu .plan-grid.is-2{ grid-template-columns: repeat(2, 1fr); }

/* card */
body.page-menu .plan-card{
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 18px 18px 16px;
}
body.page-menu .plan-card.is-recommend{
  border-color: #e60012;
  box-shadow: 0 0 0 1px rgba(230,0,18,.12) inset;
}
body.page-menu .plan-name{
  font-weight: 900;
  margin: 0 0 6px;
}
body.page-menu .badge{
  display: inline-block;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e60012;
  color: #fff;
  font-weight: 800;
  margin-left: 8px;
}
body.page-menu .plan-price{
  font-weight: 900;
  font-size: 20px;
  margin: 0 0 6px;
}
body.page-menu .plan-desc{
  margin: 0 0 12px;
  font-size: 12px;
  opacity: .75;
  line-height: 1.6;
}
body.page-menu .plan-list{
  margin: 0;
  padding-left: 18px;
  line-height: 1.75;
  font-size: 13px;
}
body.page-menu .plan-note{
  margin: 12px 0 0;
  font-size: 11px;
  opacity: .7;
  line-height: 1.7;
}

/* anchors (sticky header offset) */
body.page-menu .menu-anchor{
  scroll-margin-top: 140px;
}

/* CTA button */
body.page-menu .btn-cta{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}
body.page-menu .btn-cta:hover{
  opacity: .9;
}

/* flow */
body.page-menu .flow-steps{
  margin: 0;
  padding-left: 18px;
  line-height: 1.9;
}

/* responsive */
@media (max-width: 960px){
  body.page-menu .plan-grid.is-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  body.page-menu main.menu-page{ padding: 28px 18px 60px; }
  body.page-menu .plan-wrap{ padding: 16px; }
  body.page-menu .plan-grid.is-3,
  body.page-menu .plan-grid.is-2{ grid-template-columns: 1fr; }
  body.page-menu .plan-head{ flex-direction: column; align-items: flex-start; }
}

/* =========================================
   BF mega menu (料金の青字リンクが常時出る崩れを止める)
   ※ 料金ページだけに限定
========================================= */
body.page-menu .has-bf-mega{
  position: relative;
}


body.page-menu .bf-mega__panel{
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
}

body.page-menu .bf-mega__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.page-menu .bf-mega__link{
  color: #000;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .06em;
}

body.page-menu .bf-mega__link:hover{
  color: #e60012;
}

body.page-menu .bf-mega__item.is-active .bf-mega__link{
  color: #e60012;
  font-weight: 800;
}

/* ===== mega menu: hoverで消えないようにする（gap対策込み） ===== */

/* まず閉じる状態（デフォルト） */
.pc-global-nav li.has-bf-mega > .bf-mega{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* hover / キーボード操作で開く */
.pc-global-nav li.has-bf-mega:hover > .bf-mega,
.pc-global-nav li.has-bf-mega:focus-within > .bf-mega{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* “隙間”を橋渡しして hover が切れないようにする */
.pc-global-nav li.has-bf-mega{
  position: relative;
}
.pc-global-nav li.has-bf-mega::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.page-menu #dir h2{
  position: relative;
  padding-left: 14px;
}
.page-menu #dir h2::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 4px;
  background: #e60012;
  border-radius: 2px;
}


/* 運営・ディレクション（#dir）見出しに赤ライン */
.page-menu #dir menu-h2{
  border-left: 4px solid #e60012;
  padding-left: 12px;
}

/* ローカルメディア運営／編集（伴走・月額）の見出しだけ左赤ライン */
#localmedia > .menu-h2{
  border-left: 4px solid #e60012;
  padding-left: 12px;
}

/* セクション見出し（h2）全部に左赤ライン */
.page-menu .menu-h2{
  border-left: 4px solid #e60012;
  padding-left: 12px;
}

body.page-menu .menu-h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 10px;

  border-left: 4px solid #e60012;
  padding-left: 12px;
}

/* =============== */
/* Flow / Note area */
/* =============== */

/* セクション間の余白を少し整える（必要なら） */
body.page-menu #flow-section,
body.page-menu #note {
  margin-top: 40px;
}

/* ---- Flow：横並びステップ化 ---- */
body.page-menu .flow-steps{
  list-style: none;              /* olの見た目は消してCSSで番号出す */
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  padding: 0;
  margin: 18px 0 0;
}

body.page-menu .flow-steps li{
  counter-increment: step;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px 12px;
  font-weight: 700;
  line-height: 1.3;
  position: relative;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* 数字バッジ */
body.page-menu .flow-steps li::before{
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #e60012;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 10px;
}

/* 右向きの矢印（最後以外） */
body.page-menu .flow-steps li::after{
  content: "→";
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
  font-weight: 800;
}
body.page-menu .flow-steps li:last-child::after{
  content: "";
}

/* 画面が狭い時は段組み変更 */
@media (max-width: 1100px){
  body.page-menu .flow-steps{
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 768px){
  body.page-menu .flow-steps{
    grid-template-columns: repeat(2, 1fr);
  }
  body.page-menu .flow-steps li::after{
    content: ""; /* スマホは矢印消す */
  }
}

/* ---- 注意事項：カード化 ---- */
body.page-menu .note-box{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,.07);
  margin-top: 14px;
}

body.page-menu .note-lead{
  margin: 10px 0 0;
  color: #333;
  line-height: 1.7;
}

body.page-menu .note-list{
  margin: 14px 0 0;
  padding-left: 18px;
  line-height: 1.8;
}

/* CTAを中で整列 */
body.page-menu .note-cta{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

body.page-menu .note-sub{
  margin: 0;
  color: #666;
}

/* btn-cta が小さすぎる/細いなら補強（既存があるなら不要） */
body.page-menu .btn-cta{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}

/* ===== Flow: 読みやすく調整（上書き） ===== */

body.page-menu .flow-steps{
  /* 7個を無理に横一列にしない。自動折返しで自然に */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 16px;
  align-items: stretch;
}

/* カード内の文字が変な位置で割れないように */
body.page-menu .flow-steps li{
  text-align: left;
  padding: 14px 14px 16px;
  min-height: 74px;
  word-break: keep-all;      /* 日本語のぶった切りを減らす */
  line-break: strict;
}

/* 数字バッジを少し小さくして余白を整える */
body.page-menu .flow-steps li::before{
  width: 24px;
  height: 24px;
  font-size: 13px;
  margin-bottom: 8px;
}

/* 矢印は一旦消す（折返しするレイアウトだと矢印が迷子になりやすい） */
body.page-menu .flow-steps li::after{
  content: "";
}

/* ===== CTAボタン hover で赤 ===== */
body.page-menu .btn-cta{
  background: #111;
  color: #fff;
  border: 1px solid #111;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

body.page-menu .btn-cta:hover{
  background: #e60012;
  border-color: #e60012;
  color: #fff;
  transform: translateY(-1px);
}

/* キーボード操作時も見えるように（任意だけどおすすめ） */
body.page-menu .btn-cta:focus-visible{
  outline: 3px solid rgba(230,0,18,.25);
  outline-offset: 3px;
}

body.page-menu .note-list{
  line-height: 1.9;
}

body.page-menu .note-box{
  padding: 22px 22px;
}

/* ===== CTA hoverで赤（確実版）===== */
body.page-menu a.btn-cta{
  background-color: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
  text-decoration: none !important;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}

body.page-menu a.btn-cta:hover{
  background-color: #e60012 !important;
  border-color: #e60012 !important;
  color: #fff !important;
  transform: translateY(-1px);
  opacity: 1 !important;
}

/* クリック中/タップ中も赤寄せ（任意） */
body.page-menu a.btn-cta:active{
  transform: translateY(0);
  opacity: .95;
}

/* グループ見出し（運営・ディレクション） */
.menu-section--group { padding-top: 8px; }

/* 記事制作内の小見出し（赤ラインはそのまま、サイズだけ少し小さく） */
.menu-h2--sub{
  font-size: 20px;
  margin: 0; /* plan-head内で余白が暴れないように */
}

/* 見出し行の並び（右側の注釈を下揃えに） */
.plan-head{
  align-items: flex-end;
  gap: 16px;
}

/* 記事制作内：見出し直下の注釈を詰める */
#article-production .menu-h2 + .menu-lead{
  margin-top: -6px;
}

/* ==========================
  Major headings（運営・ディレクション／記事制作）
  - ABOUTページの下線見出しと同系統
========================== */
.menu-section--major { padding-top: 10px; }

.menu-major-title{
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  margin: 40px 0 10px;
  position: relative;
  padding-bottom: 12px;
  letter-spacing: .02em;
}

.menu-major-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:72px;
  height:4px;
  background:#ff0000;
  border-radius:2px;
}

.menu-major-lead{
  margin: 0 0 22px;
  line-height: 1.9;
  color:#333;
}

/* ==========================
  Sub heads（枠の外に出す4つの見出し）
========================== */
.menu-subhead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin: 26px 0 12px;
}

.menu-subnote{
  margin:0;
  font-size:12px;
  color:#777;
}

/* 取材記事／タイアップ等の見出しは少し小さく（左赤ラインは維持） */
.menu-h2--sub{
  font-size: 22px; /* 好みで 20〜24px */
  margin: 0;
}

/* h3でも左の赤ラインを出す（menu-h2と同じ見え方にする） */
.menu-h3 {
  position: relative;
  padding-left: 14px; /* ライン分の余白（必要なら調整） */
  font-weight: 700;   /* ここも必要なら調整 */
}

.menu-h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;        /* 縦位置（必要なら微調整） */
  width: 4px;
  height: 1.2em;
  background: #e60012; /* いつもの赤 */
  border-radius: 2px;
}


/* =========================================
   bf-mega：横並び固定 + hoverが切れないブリッジ
========================================= */

/* ▼横並びを“強制” */
body.page-menu .has-bf-mega > .bf-mega .bf-mega__list{
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap; /* 折り返したいなら wrap に */
}

/* ▼パネルの位置（必要なら微調整） */
body.page-menu .has-bf-mega > .bf-mega .bf-mega__panel{
  top: 10px; /* 0〜16px で好み */
}

/* ▼hoverが切れない “透明ブリッジ” を作る
   料金リンク（li）からパネルまでの空白を埋める */
body.page-menu .has-bf-mega{
  position: relative;
}
body.page-menu .has-bf-mega::after{
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 18px;       /* ここを増やすと消えにくい（12〜24px） */
  background: transparent;
}


body.page-menu .has-bf-mega > .bf-mega .bf-mega__panel{
  top: 0 !important;
}

/* =========================================
   BF mega menu（料金）: 暗転あり・安定版（MENUページ限定）
   ※これを menu.css の一番下に置く
========================================= */
body.page-menu{
  --bf-header-h: 86px;   /* ヘッダーの高さに合わせて調整（ズレたらここだけ） */
  --bf-mega-gap: 10px;   /* 料金リンクと黒バーの距離 */
}

/* li を基準にする */
body.page-menu .pc-global-nav li.has-bf-mega{
  position: relative;
}

/* ▼ bf-mega は「黒バーの箱」だけを保持（全画面fixedにしないのがコツ） */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega{
  display: block !important;                 /* display:none を殺す */
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + var(--bf-mega-gap)) !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility 0s linear .15s;
}

/* hover / focus で開く */
body.page-menu .pc-global-nav li.has-bf-mega:hover > .bf-mega,
body.page-menu .pc-global-nav li.has-bf-mega:focus-within > .bf-mega{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .15s ease, visibility 0s;
}

/* hoverが切れないブリッジ（隙間対策） */
body.page-menu .pc-global-nav li.has-bf-mega::after{
  content:"";
  position:absolute;
  left:-10px; right:-10px;
  top:100%;
  height: 18px;
}

/* ▼ 画面全体の暗転（overlay） */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__overlay{
  display: block !important;
  position: fixed;
  left: 0; right: 0;
  top: var(--bf-header-h);
  bottom: 0;

  background: rgba(0,0,0,.78);
  opacity: 0;
  pointer-events: none;               /* 重要：これがないと暗転上に乗った瞬間閉じなくなる */
  transition: opacity .15s ease;
  z-index: 9998;
}

/* 開いてる間だけ暗転を見せる */
body.page-menu .pc-global-nav li.has-bf-mega:hover > .bf-mega .bf-mega__overlay,
body.page-menu .pc-global-nav li.has-bf-mega:focus-within > .bf-mega .bf-mega__overlay{
  opacity: 1;
}

/* ▼ 黒いバー（パネル本体） */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__panel{
  position: relative;
  z-index: 9999;

  background: rgba(0,0,0,.88);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  width: min(920px, calc(100vw - 80px));
}

/* 横並び */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__list{
  display: flex !important;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 白字＋赤下線 */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__link{
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  letter-spacing: .06em;
  display: inline-block;
  padding: 10px 2px 12px;
  border-bottom: 2px solid transparent;
}

body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__item:hover .bf-mega__link,
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__item.is-active .bf-mega__link{
  border-bottom-color: #e60012;
  font-weight: 800;
}

/* =========================================
   BF mega menu（料金） 暗転あり：最終版
   - transform を使わず、overlay を画面に固定する
   ※ menu.css の一番下に貼る
========================================= */
body.page-menu{
  --bf-header-h: 86px;     /* JSが効けば自動で上書きされる。効かない時の保険 */
  --bf-mega-gap: 10px;
}

/* headerは常に最前面（念のため） */
body.page-menu header.sticky{
  z-index: 10010;
}

/* hover判定用 */
body.page-menu .pc-global-nav li.has-bf-mega{
  position: relative;
}

/* ▼ bf-mega：画面幅いっぱいの fixed（transform禁止！） */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega{
  display: flex !important;
  justify-content: center !important;

  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--bf-header-h, 86px) + var(--bf-mega-gap, 10px)) !important;

  transform: none !important; /* ★これが超重要（overlayが0pxになる原因） */
  z-index: 10000 !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, visibility 0s linear .15s;
}

/* hover/focusで開く */
body.page-menu .pc-global-nav li.has-bf-mega:hover > .bf-mega,
body.page-menu .pc-global-nav li.has-bf-mega:focus-within > .bf-mega{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .15s ease, visibility 0s;
}

/* ▼ 暗転（overlay） */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__overlay{
  display: block !important;
  position: fixed !important;

  /* ヘッダーの下から暗転 */
  inset: var(--bf-header-h, 86px) 0 0 0 !important;

  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity .15s ease;
}

/* 開いてる間だけ暗転 */
body.page-menu .pc-global-nav li.has-bf-mega:hover > .bf-mega .bf-mega__overlay,
body.page-menu .pc-global-nav li.has-bf-mega:focus-within > .bf-mega .bf-mega__overlay{
  opacity: 1;
}

/* ▼ 黒いバー（パネル） */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__panel{
  position: relative;
  z-index: 1;

  background: rgba(0,0,0,.88);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  width: min(920px, calc(100vw - 80px));
}

/* 横並び */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__list{
  display: flex !important;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 白字＋赤下線 */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__link{
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  letter-spacing: .06em;
  display: inline-block;
  padding: 10px 2px 12px;
  border-bottom: 2px solid transparent;
}

body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__item:hover .bf-mega__link,
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__item.is-active .bf-mega__link{
  border-bottom-color: #e60012;
  font-weight: 800;
}

body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__overlay{
  background: radial-gradient(
    circle at 50% 20%,
    rgba(0,0,0,.82),
    rgba(0,0,0,.68)
  ) !important;
}

/* =========================================
   BF mega menu 最終上書き（MENUページ限定）
   - 暗転を濃く
   - カーソルで消えない
   - バー位置を上げる
   - 白い枠線を消す
   ※menu.css の一番下に貼る
========================================= */
body.page-menu{
  --bf-mega-gap: 2px; /* ここを小さくするとバーが上に寄る（0〜8pxで調整） */
}

/* ① bf-mega 本体（ドロップダウン） */
body.page-menu .pc-global-nav li.has-bf-mega{
  position: relative;
}

body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega{
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + var(--bf-mega-gap)) !important; /* ②バー位置 */
  transform: translateX(-50%) !important;
  z-index: 9999 !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* hover/focus で開く（bf-mega自体に乗っても開いたままにする） */
body.page-menu .pc-global-nav li.has-bf-mega:hover > .bf-mega,
body.page-menu .pc-global-nav li.has-bf-mega:focus-within > .bf-mega,
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega:hover{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ③ “すぐ消える”対策：隙間ブリッジを強化 */
body.page-menu .pc-global-nav li.has-bf-mega::after{
  content:"";
  position:absolute;
  left:-20px; right:-20px;
  top:100%;
  height: 28px;   /* 消えるなら 36px まで増やしてOK */
}

/* ④ 暗転（overlay）を確実に濃くする */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__overlay{
  display: block !important;
  position: fixed !important;
  left: 0; right: 0;
  top: var(--bf-header-h, 86px) !important;
  bottom: 0 !important;

  background: rgba(0,0,0,.82) !important; /* ★濃さ：ここを 0.75〜0.9 で調整 */
  opacity: 0;
  pointer-events: none !important;
  transition: opacity .12s ease !important;
  z-index: 9998 !important;
}

/* 開いてる間だけ暗転ON（bf-megaに乗っても維持） */
body.page-menu .pc-global-nav li.has-bf-mega:hover > .bf-mega .bf-mega__overlay,
body.page-menu .pc-global-nav li.has-bf-mega:focus-within > .bf-mega .bf-mega__overlay,
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega:hover .bf-mega__overlay{
  opacity: 1 !important;
}

/* ⑤ 黒バー（panel）から白枠を完全に消す */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__panel{
  background: rgba(0,0,0,.90) !important;
  border: 0 !important;         /* 白い線の原因になりがち */
  outline: 0 !important;        /* outlineが付いてる場合 */
  box-shadow: 0 14px 36px rgba(0,0,0,.35) !important; /* 影だけ残す */
  border-radius: 14px !important;
  padding: 12px 16px !important;
  width: min(920px, calc(100vw - 80px)) !important;
}

/* 横並び */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__list{
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* リンク */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__link{
  color: #fff !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 10px 2px 12px !important;
  border-bottom: 2px solid transparent !important;
}

body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__item:hover .bf-mega__link,
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__item.is-active .bf-mega__link{
  border-bottom-color: #e60012 !important;
  font-weight: 800 !important;
}

/* =========================================
   BF mega menu 安定化パッチ（MENUページ限定）
   - カーソル外すと消える問題を止める
   - バーの白フチを消す
   - バー位置を上げる（変数で調整）
========================================= */
body.page-menu{
  --bf-mega-gap: 2px;      /* ←バーを上げたいなら 0px に近づける */
  --bf-bridge-h: 44px;     /* ←消えるなら 60px とかに増やす */
  --bf-overlay-alpha: .65; /* ←暗転の濃さ（好み） */
}

/* 閉じる時に“猶予”を作ってチラつき防止 */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega{
  transition: opacity .15s ease, visibility 0s linear .28s !important;
}

/* li hover だけじゃなく、bf-mega 自体 hover でも開いたままにする */
body.page-menu .pc-global-nav li.has-bf-mega:hover > .bf-mega,
body.page-menu .pc-global-nav li.has-bf-mega:focus-within > .bf-mega,
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega:hover{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .15s ease, visibility 0s !important;
}

/* 「料金」リンク → 黒バー へ移動する時の“橋”(これが効くと消えなくなる) */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega::before{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--bf-bridge-h));
  height: var(--bf-bridge-h);
  background: transparent;
  z-index: 9999;
}

/* 暗転の濃さを上書き */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__overlay{
  background: rgba(0,0,0,var(--bf-overlay-alpha)) !important;
}

/* 白フチの原因（border/outline/内側影）を全部殺す */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__panel{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.35) !important; /* inset無しに */
  background: rgba(0,0,0,.92) !important;
}

/* =========================================
   BF mega menu 仕上げパッチ
   - バーを画面中央に固定（右寄り解消）
   - 暗転（全体黒ホバー）を復活＆安定
========================================= */

/* 1) 黒バーの「基準」を viewport にする（中央寄せのズレ防止） */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega{
  position: fixed !important;                 /* ← absolute から fixed に */
  left: 50% !important;
  top: calc(var(--bf-header-h, 86px) + var(--bf-mega-gap, 2px)) !important;
  transform: translateX(-50%) !important;
  width: min(920px, calc(100vw - 80px)) !important; /* パネル幅と揃える */
}

/* 2) パネルは親幅100%でOK（中身だけ） */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__panel{
  width: 100% !important;
}

/* 3) 暗転（overlay）を「開いてる間は常に表示」にする */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__overlay{
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  top: var(--bf-header-h, 86px) !important;    /* ヘッダー下から暗転 */
  background: rgba(0,0,0,.65) !important;      /* 濃さはここ */
  opacity: 0 !important;
  pointer-events: none !important;             /* 暗転の上を通っても閉じない */
  transition: opacity .15s ease !important;
  z-index: 9990 !important;
}

/* bf-mega が表示状態なら overlay を必ず 1 に */
body.page-menu .pc-global-nav li.has-bf-mega:hover > .bf-mega .bf-mega__overlay,
body.page-menu .pc-global-nav li.has-bf-mega:focus-within > .bf-mega .bf-mega__overlay,
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega:hover .bf-mega__overlay{
  opacity: 1 !important;
}

/* =========================================
   BF mega menu 最終パッチ
   - transform を消して overlay を viewport 基準に戻す
   - 白ライン（枠線）も消す
========================================= */

body.page-menu{
  --bf-header-h: 86px;  /* ずれるならここだけ調整 */
  --bf-mega-gap: 0px;   /* バー位置を上げたいなら 0〜10px */
}

/* ▼ bf-mega（黒バー全体）を viewport 中央寄せ（transformなし） */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega{
  position: fixed !important;
  top: calc(var(--bf-header-h) + var(--bf-mega-gap)) !important;

  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;

  width: min(920px, calc(100vw - 80px)) !important;
  transform: none !important;          /* ★これが重要：overlay復活の肝 */

  z-index: 9999 !important;

  /* 開閉は既存ルールのままでOK（下は保険） */
  display: block !important;
}

/* ▼ 暗転（全体黒ホバー） */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__overlay{
  display: block !important;
  position: fixed !important;

  left: 0 !important;
  right: 0 !important;
  top: var(--bf-header-h) !important;
  bottom: 0 !important;

  background: rgba(0,0,0,.65) !important; /* 濃さはここ（.55〜.75） */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .15s ease !important;

  z-index: 9998 !important;
}

/* ▼ 開いてる間は必ず暗転ON */
body.page-menu .pc-global-nav li.has-bf-mega:hover > .bf-mega .bf-mega__overlay,
body.page-menu .pc-global-nav li.has-bf-mega:focus-within > .bf-mega .bf-mega__overlay,
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega:hover .bf-mega__overlay{
  opacity: 1 !important;
}

/* ▼ パネルを暗転より前に */
body.page-menu .pc-global-nav li.has-bf-mega > .bf-mega .bf-mega__panel{
  position: relative !important;
  z-index: 10000 !important;

  border: 0 !important;     /* ★白ライン消す */
  outline: 0 !important;    /* ★白ライン消す */
  box-shadow: 0 12px 32px rgba(0,0,0,.25) !important;
}

/* =========================
   MENU mega underline fix
   ========================= */
@media (min-width: 1024px){
  body.page-menu .bf-mega__link{
    text-decoration: none !important;
    border-bottom: none !important;
  }
  body.page-menu .bf-mega__link::before,
  body.page-menu .bf-mega__link::after{
    content: none !important;
  }

  /* “アクティブだけ”1本下線 */
  body.page-menu .bf-mega__item.is-active > .bf-mega__link{
    border-bottom: 2px solid #ff0000 !important;
  }
}

/* MENUページだけ hover でオーバーレイ表示（必要なら） */
.page-menu .has-bf-mega:hover .bf-mega__overlay{
  opacity: 1;
  pointer-events: auto;
}

/* ===== PC：最前面の赤ライン（料金ページで消える対策） ===== */
@media (min-width: 960px) {
  html::before{
    content:"";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;              /* 好みで 2〜6px */
    background: #e60012;
    z-index: 2147483647;      /* ほぼ最前面 */
    pointer-events: none;     /* クリック邪魔しない */
  }

  /* すでに body::before を使ってるなら重複防止（任意） */
  body::before{
    content: none !important;
  }
}