/* グローバルメニュー「無料ツール」の3列パネル（PC表示＝幅1251px以上のみ）
   使い方：外観 → メニューで、親項目の CSS クラスに menu-tools を付ける。
   2段目の項目＝列の見出し、3段目＝ツール。2段目に menu-tools-all を付けた項目は最下段に横長で表示。
   テーマの jscript.js はホバーで子の ul を slideDown/slideUp するため、パネル内は !important で表示を固定する。 */
@media screen and (min-width:1251px){
  #global_menu > ul > li.menu-tools{position:static}
  #global_menu > ul > li.menu-tools > ul.sub-menu{
    left:0 !important; right:0; width:100% !important; min-width:0; padding:18px 22px 20px; background:#000;
    box-sizing:border-box; box-shadow:0 12px 24px rgba(0,0,0,.25);
  }
  #global_menu > ul > li.menu-tools.active > ul.sub-menu{
    display:grid !important; grid-template-columns:repeat(3,1fr); column-gap:24px; row-gap:6px; height:auto !important; overflow:visible !important;
  }
  /* 列の見出し */
  #global_menu li.menu-tools > ul > li > a{
    padding:4px 4px 10px; margin:0 0 6px; background:none !important; border-bottom:1px solid rgba(255,255,255,.25);
    font-size:12.5px; font-weight:700; letter-spacing:.05em; color:#9fb3c8 !important;
  }
  #global_menu li.menu-tools > ul > li > a[href="#"]{pointer-events:none; cursor:default}
  #global_menu li.menu-tools > ul > li.menu-item-has-children > a:before{display:none}
  /* 列の中のツール（3段目）は横に飛び出さず、常に表示 */
  #global_menu li.menu-tools ul ul{
    display:block !important; position:static; left:auto !important; top:auto !important; width:auto; min-width:0;
    height:auto !important; overflow:visible !important; box-shadow:none;
  }
  #global_menu li.menu-tools ul ul a{padding:7px 8px; background:none; font-size:14px; line-height:1.5; border-radius:4px}
  #global_menu li.menu-tools ul ul a:hover{background:#333}
  /* すべてのツール一覧（最下段・横長） */
  #global_menu li.menu-tools > ul > li.menu-tools-all{grid-column:1 / -1; margin-top:8px; text-align:right}
  #global_menu li.menu-tools > ul > li.menu-tools-all > a{
    display:inline-block; margin:0; padding:8px 14px; border:1px solid rgba(255,255,255,.4); border-radius:999px;
    font-size:13.5px; letter-spacing:0; color:#fff !important; pointer-events:auto; cursor:pointer;
  }
  #global_menu li.menu-tools > ul > li.menu-tools-all > a:hover{background:#333 !important}
}
/* 「無料メルマガ」をボタン風に（親項目の CSS クラスに menu-cta を付けた場合） */
@media screen and (min-width:1251px){
  #global_menu > ul > li.menu-cta > a{background:#e8590c; color:#fff !important}
  #global_menu > ul > li.menu-cta > a:hover{background:#c94c08}
}
