/**
 * Color Variables
 * カラーパレットに関する変数を定義します。
 * これらの変数は、他のスタイルシートで使用されます。
 * デザインに合わせて変更・追加することができます。
 */
:root {
  --white: #ffffff;
  --black: #000000;
  
  --bg-1: url("/system_panel/uploads/images/bg-1.jpg");
  --bg-2: url("/system_panel/uploads/images/bg-2.jpg");
  --bg-3: url("/system_panel/uploads/images/bg-3.jpg");
  --fb-blue: #0866FF;
  --ink: #3E3E3E;
  --dark-green: #00453D;
  --dark-gold: #95886E;
  --orange: #A86822;
  --red: #B14C3D;
  
  --white--opac-20: rgba(255 255 255 / 20%);
  --dark-green--opac-50: rgba(0 69 61 / 50%);
}

/**
 * Text Colors
 * テキストの色に関するスタイルを持つクラスを定義します。
 * .text-whiteのようなクラスを使用して、テキストの色を変更することができます。
 * 事前にBootstrapのCSSを読み込んでしまっているため、<a>要素の色なども含めて上書きする必要があります。
 * 具体的には、
 * 1. クラスを持つ要素
 * 2. クラスを持つ<a>要素
 * 3. クラスを持つ<a>要素のvisited状態
 * 4. クラスを持つ<a>要素のhover状態
 * 5. クラスを持つ<p>要素の子孫の<a>要素
 * 6. クラスを持つ<p>要素の子孫の<a>要素のvisited状態
 * 7. クラスを持つ<p>要素の子孫の<a>要素のhover状態
 */
.color-fg, .color-fg a, .color-fg a:visited, .color-fg a:hover, p a.color-fg, p a.color-fg:visited, p a.color-fg:hover {
  color: var(--fg-color);
}

.text-white {
  --fg-color: var(--white);
}

.text-black {
  --fg-color: var(--black);
}

.text-ink {
  --fg-color: var(--ink);
}

.text-dark-green {
  --fg-color: var(--dark-green);
}
.text-red {
  --fg-color: var(--red);
}

/**
 * Background Colors
 */
.color-bg {
  background-color: var(--bg-color);
}

.bg-white {
  --bg-color: var(--white);
}
.bg-black {
  --bg-color: var(--black);
}
.bg-ink {
  --bg-color: var(--ink);
}
.bg-dark-green {
  --bg-color: var(--dark-green);
}
.bg-orange {
  --bg-color: var(--orange);
}
.bg-red {
  --bg-color: var(--red);
}
.bg-fb-blue {
  --bg-color: var(--fb-blue);
}
.bg-dark-gold {
  --bg-color: var(--dark-gold);
}

.bg-1 {
  background-image: var(--bg-1);
}
.bg-2 {
  background-image: var(--bg-2);
}
.bg-3 {
  background-image: var(--bg-3);
}

/**
 * Border Colors
 */
.border-white {
  --border-color: var(--white);
}

.border-black {
  --border-color: var(--black);
}

.border-white--opac-20 {
  --border-color: var(--white--opac-20);
}

.border-dark-green {
  --border-color: var(--dark-green);
}

.border-ink {
  --border-color: var(--ink);
}
.bg-insta {
    background: linear-gradient(to right,
        rgba(247, 207, 0, 0.7),
        rgba(246, 37, 2, 0.7) 45%,
        rgba(182, 47, 82, 0.7) 75%,
        rgba(113, 58, 166, 0.7));
    color: #fff;
}