/* ==========================================================================
   プロゼミ風 テーマカラー一括制御CSS（見出し四角形化・完全上書き版）
   ========================================================================== */

:root {
  --bg-color: #fcf5ec;       /* 1. 画面全体の背景色（薄めの肌色） */
  --main-color: #00bfa5;     /* 2. ヘッダーや見出しのメイン色（エメラルド） */
  --content-bg: #ffffff;     /* 3. 本文欄・サイドバーの背景色（白） */
  --border-color: #e0d8cf;   /* 4. 各種ボックスの枠線（薄いベージュ） */
  --orange-accent: #ff9800;  /* 5. アクセント用のオレンジ色 */
}

/* 1. 画面全体の背景（薄めの肌色） */
html, body, #all_wrapper, #wrapper_main, .atwiki-wrapper {
  background-color: var(--bg-color) !important;
  background-image: none !important;
}

/* 2. ページ全体のコンテナ */
#container, .container, #wrapper {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px !important;
}

/* 3. 【本文・メインカラムエリア】（白背景にリセット） */
#main, .main, #content, #center_main, .contents {
  background-color: var(--content-bg) !important;
  background-image: none !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0px !important; /* 丸みをなくして四角に */
  box-shadow: none !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* 4. 【すべての見出しをエメラルドの四角形に統一】（h1, h2, h3など）
   画像で変わっていなかった「困ったことは〜」や「ニュース」も強制適用します */
h1, h2, h3, h4, .wiki-title, #header_title, #page-title, .title {
  background-color: var(--main-color) !important;
  background-image: none !important;
  padding: 12px 15px !important;
  border-radius: 0px !important; /* 丸みを完全になくして四角に */
  border-left: none !important; /* 既存のオレンジや青の縦線を消去 */
  border-top: none !important;
  border-right: none !important;
  border-bottom: 4px solid rgba(0, 0, 0, 0.15) !important; /* 押しボタン風の下線 */
  margin: 20px 0 15px 0 !important;
  display: block !important;
  width: auto !important;
  box-sizing: border-box !important;
}

/* 5. 【左右サイドメニュー・カラムエリア】（白背景にリセット） */
#menubar, #sidebar, #right_sidebar, .sidebar {
  background-color: var(--content-bg) !important;
  background-image: none !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0px !important; /* 四角に */
  padding: 15px !important;
  box-sizing: border-box !important;
}

/* 6. サイドメニュー内の各見出しヘッダー（エメラルド＋四角型） */
#menubar h2, #menubar h3, .side-title, .menu-title, #right_sidebar h2, #right_sidebar h3 {
  background-color: var(--main-color) !important;
  padding: 8px 12px !important;
  border-radius: 0px !important; /* 四角に */
  border-bottom: 4px solid rgba(0, 0, 0, 0.15) !important;
  margin: 0 0 15px 0 !important;
  display: block !important;
}

/* 7. サイトリンク・コミュニティなどのリンクボタン */
#menubar .menu-button, #menubar ul li a.button-style, .btn-custom {
  background-color: var(--main-color) !important;
  padding: 10px 15px !important;
  border-radius: 0px !important; /* 四角に */
  border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important;
  display: block !important;
  margin-bottom: 10px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 8. メニュー内テーブル（アクセス数など）の枠線リセット */
#menubar table {
  background: var(--content-bg) !important;
  border: 1px solid #dcdcdc !important;
  border-collapse: collapse !important;
  width: 100% !important;
}
#menubar td, #menubar th {
  border: 1px solid #dcdcdc !important;
  padding: 5px 8px !important;
}