/*
Theme Name: Quadra Biz 001 Child
Template: quadra_biz001
Version: 1.0.0
*/

.gs-safe{max-width:1080px;margin:0 auto;padding:60px 20px;font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:#0f172a;line-height:1.8;background:#fff;}
.gs-safe h1{font-size:clamp(26px,3.5vw,34px);font-weight:700;margin:0 0 20px 0;}
.gs-safe h2{font-size:22px;margin:40px 0 12px 0;border-left:4px solid #0ea5e9;padding-left:10px;font-weight:700;}
.gs-safe p{margin:0 0 18px 0;}
.gs-safe img{max-width:100%;height:auto;border-radius:12px;border:1px solid #e2e8f0;margin:24px 0;display:block;}
.gs-safe ul{padding-left:20px;margin:0 0 20px 0;}
.gs-safe li{margin:.4em 0;}
.gs-safe .btn{display:inline-block;margin-top:12px;padding:10px 18px;border:1px solid #0f172a;border-radius:8px;color:#0f172a;font-weight:700;text-decoration:none;}


/* ▼ まず、#header に塗られているベース色を無効化（通常時＆スクロール時） */
#header,
#header.active {
  background: transparent !important;
}

/* ▼ 上段（ロゴ帯）だけ常に白 */
#header .header_top,
#header .header_top::before {
  background: #fff !important;
}

/* ▼ 下段（メニュー帯）は好きな色に（今の基調に合わせて #0093cb を初期値に） */
#header .header_bottom,
#global_menu {
  background: #0093cb !important;  /* ←必要ならここを好みの色に変更 */
}

/* ▼ モバイル用の白いオーバーレイが全体を薄白くするので無効化 */
.mobile #header:after {
  background: transparent !important;
}

/* （任意）メニュー文字を黒に固定したいなら有効化
#global_menu a { color:#111 !important; text-shadow:none !important; }
*/


/* サイドバー非表示 */
#side_col {
  display: none !important;
}

/* メインカラムを横幅いっぱいに広げて中央に寄せる */
#main_col {
  width: 100% !important;
  float: none !important;
  margin: 0 auto !important;
}
@media screen and (max-width: 768px){
  html body h2.u-h2{ font-size:30px !important; line-height:1.3 !important; }
}
@media screen and (max-width: 480px){
  html body h2.u-h2{ font-size:26px !important; line-height:1.3 !important; }
}
/* =============================
   MOBILE MENU: #global_menu_button 専用パッチ
   ・ロゴの右横（右上）に固定
   ・三本線を濃グレー(#444)に統一
   ・画像／マスク／SVG でも見えるよう保険付き
   ・あなたの既存CSSの流儀(#header / #global_menu / #global_menu_button)に準拠
   ============================= */
@media (max-width: 1024px){

  /* ヘッダーを位置基準に */
  #header { position: relative !important; }

  /* ハンバーガーを“ロゴ右横＝右上”へ固定 */
  #global_menu_button{
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center; 
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10020 !important;

    /* 画像ベースのテーマでも白抜けしないように */
    background-image: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    filter: none !important; /* 既存の明度/反転が残っても打ち消す */
    background: transparent !important;
  }

  /* ロゴ帯の右側に余白（被り防止） */
  #header .header_top { padding-right: 64px !important; }

  /* ── 色統一：三本線を #444 に固定（タイプ別に網羅） ── */
  /* span/バー線タイプ */
  #global_menu_button span,
  #global_menu_button .bar,
  #global_menu_button i{
    background-color: #444 !important;
  }

  /* before/after で描いてるタイプ */
  #global_menu_button::before,
  #global_menu_button::after{
    /* テーマが擬似要素で線を描いている場合の保険 */
    background-color: #444 !important;
    /* 一部テーマは content が必要だが、既に定義済み想定。未定義でも副作用なし */
  }

  /* SVGタイプ */
  #global_menu_button svg path{
    fill: #444 !important;
    stroke: #444 !important;
  }

  /* 画像アイコンタイプ（白→濃グレー化） */
  #global_menu_button img{
    filter: brightness(0) saturate(100%) invert(28%) contrast(115%) !important;
    opacity: 1 !important;
    width: auto; 
    max-height: 24px;
  }

  /* 展開時も色が戻らないよう保険 */
  #global_menu_button.is-active span,
  #global_menu_button.active span{
    background-color: #444 !important;
  }
}

/* メニュー帯の色（あなたの既存値に合わせる。必要ならここだけ変える） */
#header .header_bottom,
#global_menu {
  background: #0062ac !important;
}

/* 既存オーバーレイ対策（あなたの方針を踏襲） */
#header:not(.active)::after { pointer-events: none !important; }
.mobile #header:after { background: transparent !important; }



/*
Theme Name: Quadra Biz 001 Child
Template: quadra_biz001
Version: 1.0.0
*/

/* ========================================
   ブログカード画像の修正
======================================== */

/* 通常時：画像を標準サイズに（元のテーマの拡大をリセット） */
.item.hover_animation_type1 .image_wrap .image {
  transform: scale(1) !important;
  background-position: center center !important;
  transition: transform 0.4s ease !important;
}

/* ホバー時：画像を拡大 */
.item.hover_animation_type1:hover .image_wrap .image {
  transform: scale(1.1) !important;
}

/* 画像コンテナの設定 */
.item.hover_animation_type1 .image_wrap {
  overflow: hidden !important;
}