/* ------------------------------------------
   1. 全体の背景と箱のルール
   ------------------------------------------ */
body {
    background-color: #f0f0f0 !important; /* 全体の背景を薄グレーに */
}

#container, .main-content, #content-wrap, 
#side-bar, .side-menu, .menu-box {
    background-color: #ffffff !important;
    border: 1px solid #cccccc !important; /* 四角い枠線 */
    border-radius: 0 !important; /* 角丸を消す */
    box-shadow: none !important;
}

/* ------------------------------------------
   2. ヘッダー（一番上の黒バー）の設定
      ここだけ文字を「白」にします
   ------------------------------------------ */
#header a, #header span, #header i,
.navbar a, .navbar span, .navbar i,
.navbar-nav a, .navbar-right a {
    color: #ffffff !important; /* メニュー文字を白に */
}

/* ------------------------------------------
   3. タイトル帯や見出しの設定
      ここは「グレー背景」に「黒文字」にします
   ------------------------------------------ */
#page-title, .page-title, h1, h2, 
.menu-title, .side-column-title {
    background-color: #cccccc !important; /* タイトルのグレー */
    color: #000000 !important; /* 文字を黒に */
    border: 1px solid #999999 !important;
    border-left: 8px solid #888888 !important; /* 左の太線 */
    border-radius: 0 !important;
    padding: 5px 10px !important;
}

/* ------------------------------------------
   4. ページ内のリンク設定
   ------------------------------------------ */
#container a, #container a * {
    color: #000000 !important; /* リンクも基本は黒 */
}

a:hover {
    text-decoration: underline !important;
}

/* ------------------------------------------
   5. 検索窓の文字
   ------------------------------------------ */
input#search-input, .form-control {
    color: #000000 !important;
    background-color: #ffffff !important;
}