/* クラス名はご自身がHTMLで設定しているものに合わせてください */
/* 標準のままなら .background-image-fixed-2 */
/* 変更したなら .my-big-banner */

.my-big-banner, 
.background-image-fixed-2 {
    /* 1. 画像を消す */
    background-image: none !important;
    
    /* 2. 背景色を指定する（例：薄い空色） */
    background-color: #e6f3e5 !important;
    
    /* 3. 高さを維持したい場合（お好みで調整） */
    min-height: 400px !important;
    
    /* 4. 文字を中央に配置 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* 余白リセット */
    padding: 0 !important;
    margin: 0 !important;
}

/* 5. 文字色を見やすく変更する（背景が明るい場合） */
.my-big-banner h1, 
.my-big-banner h2,
.my-big-banner p,
.background-image-fixed-2 h1,
.background-image-fixed-2 h2,
.background-image-fixed-2 p {
    color: #333333 !important; /* 黒に近いグレー */
    text-shadow: none !important; /* 影も消してスッキリさせる */
}

/* #blog-post の直下にある img タグ（＝バナー画像）だけを消す */
/* 記事本文内の画像は消えません */
#blog-post > .img-responsive,
#blog-post > img {
    display: none !important;
}

/* --- 固定背景画像のくすみ（フィルター）を消す設定 --- */

/* 1. 画像の上に乗っている「暗いマスク」を透明にする */
.background-image-fixed-2 .dark-mask,
.my-big-banner .dark-mask {
    background: none !important;
}

/* 2. （任意）フィルターを消すと白文字が見にくくなる場合の対策 */
/* 文字色を黒っぽくするか、文字に影をつけて読みやすくします */
.background-image-fixed-2 h1,
.background-image-fixed-2 h2,
.background-image-fixed-2 p,
.my-big-banner h1,
.my-big-banner h2,
.my-big-banner p {
    /* どちらかお好みの方を選んでください */
    
    /* パターンA：文字を濃い色にする（背景が明るい画像の場合） */
    /* color: #333 !important; */
    /* text-shadow: none !important; */

    /* パターンB：文字は白のままで、黒い影を強くつける（背景が複雑な場合） */
    text-shadow: 2px 2px 5px rgba(0,0,0, 0.8) !important;
}

/* --- See Moreセクションの文字を黒にする --- */

.bar h1, .bar h2, .bar h3, 
.bar p {
    color: #000000 !important; /* 文字：黒 */
    text-transform: none !important; /* 必要なら：大文字変換を解除 */
}

/* アイコン（fa-bookなど）も黒くする */
.bar .icon {
    color: #000000 !important;
    border-color: #000000 !important; /* アイコンの丸枠も黒に */
}