:root {
  /* メインカラー（テーマカラー） */
  --basecolor: #5976BA;
  --basecolor-rgb: 89, 118, 186;
  --basecolor2: #F0F5FC;
	  
/*  --basecolor: #006400;*/
/*   --basecolor-rgb: 0, 100, 0;*/
 
  --basecolor-back: rgba(var(--basecolor-rgb), 0.67);
  --basecolor-light: rgba(var(--basecolor-rgb), 0.19);
  --basecolor-light2: var(--basecolor2);
  --basecolor-medium: rgba(var(--basecolor-rgb), 0.5);
  --basecolor-dark: #3d5299;  /* 濃い色 - basecolor変更時に合わせて更新 */
  --basecolor-bright: #6e92e6;  /* あかるい色 - basecolor変更時に合わせて更新 */
  --basecolor-bright2: #6282cc;  /* あかるい色暗め - basecolor変更時に合わせて更新 */


  /* サブカラー */
  --red: #f64;
  --yellow: #c80;
  --green: #3a0;
  --blue: #58f;
  --gray: #888;
  --lightgray: #d3d3d3 ;
  --black: #111;
  --white: #fff;
}

/* =================================================
   basecolor関連クラス
   ================================================= */

/* 背景色 */
.bg-basecolor { background-color: var(--basecolor); }
.bg-basecolor-light { background-color: var(--basecolor-light); }
.bg-basecolor-medium { background-color: var(--basecolor-medium); }
.bg-basecolor-dark { background-color: var(--basecolor-dark); }

/* グラデーション背景 */
.bg-basecolor-gradient { background: linear-gradient(var(--basecolor), var(--basecolor)); }
.bg-basecolor-gradient-light { background: linear-gradient(var(--basecolor), var(--basecolor-light)); }
.bg-basecolor-gradient-dark { background: linear-gradient(var(--basecolor-dark), var(--basecolor)); }

/* テキスト色 */
.text-basecolor { color: var(--basecolor); }
.text-basecolor-dark { color: var(--basecolor-dark); }

/* ボーダー色 */
.border-basecolor { border-color: var(--basecolor); }
.border-basecolor-light { border-color: var(--basecolor-light); }
.border-basecolor-dark { border-color: var(--basecolor-dark); }

/* =================================================
   サブカラー関連クラス
   ================================================= */

/* 背景色 */
.bg-red { background-color: var(--red); }
.bg-yellow { background-color: var(--yellow); }
.bg-green { background-color: var(--green); }
.bg-blue { background-color: var(--blue); }
.bg-gray { background-color: var(--gray); }
.bg-lightgray { background-color: var(--lightgray); }
.bg-black { background-color: var(--black); }
.bg-white { background-color: var(--white); }

/* テキスト色 */
.text-red { color: var(--red); }
.text-yellow { color: var(--yellow); }
.text-green { color: var(--green); }
.text-blue { color: var(--blue); }
.text-gray { color: var(--gray); }
.text-black { color: var(--black); }
.text-white { color: var(--white); }

/* ボーダー色 */
.border-red { border-color: var(--red); }
.border-yellow { border-color: var(--yellow); }
.border-green { border-color: var(--green); }
.border-blue { border-color: var(--blue); }
.border-gray { border-color: var(--gray); }
.border-black { border-color: var(--black); }
.border-white { border-color: var(--white); }

/* =================================================
   アイコンフィルタークラス
   ================================================= */

.icon-green {
    filter: invert(25%) sepia(54%) saturate(1846%) hue-rotate(89deg) brightness(92%) contrast(106%);
}
.icon-basecolor{
    /*filter: invert(47%) sepia(52%) saturate(510%) hue-rotate(184deg) brightness(88%) contrast(86%);*/
	filter: brightness(0) saturate(100%) invert(69%) sepia(57%) saturate(5003%) hue-rotate(199deg) brightness(78%) contrast(81%);
}
.icon-white {
    filter: invert(99%) sepia(1%) saturate(422%) hue-rotate(170deg) brightness(117%) contrast(100%);
}
.icon-blue {
    filter: brightness(0) saturate(100%) invert(43%) sepia(5%) saturate(5637%) hue-rotate(184deg) brightness(104%) contrast(81%);
}
.icon-blue2 {
    filter: invert(43%) sepia(85%) saturate(1691%) hue-rotate(168deg) brightness(90%) contrast(101%);
}
.icon-red {
    filter: invert(26%) sepia(62%) saturate(5679%) hue-rotate(332deg) brightness(91%) contrast(91%);
}
.icon-yellow {
    filter: invert(73%) sepia(90%) saturate(867%) hue-rotate(355deg) brightness(100%) contrast(108%);
}
.icon-green {
    filter: brightness(0) saturate(100%) invert(50%) sepia(22%) saturate(3583%) hue-rotate(99deg) brightness(91%) contrast(74%);
}
.icon-orange {
    filter: invert(72%) sepia(26%) saturate(6428%) hue-rotate(1deg) brightness(105%) contrast(102%);
}

/* =================================================
   テーマ別セット
   ================================================= */

/* メインテーマ */
.theme-main {
    background-color: var(--basecolor);
    color: var(--white);
}

.theme-main-light {
    background-color: var(--basecolor-light);
    color: var(--basecolor);
}

/* 警告・エラー・成功テーマ */
.theme-warning {
    background-color: var(--yellow);
    color: var(--white);
}

.theme-error {
    background-color: var(--red);
    color: var(--white);
}

.theme-success {
    background-color: var(--green);
    color: var(--white);
}